Skip to main content

Node

Type

Reference

Properties

  • idNodeId
    A randomly generated unique id
  • dataObject
    • propsRecord<String, any>
      The current props for the user element
    • typeReact.ElementType
      The type of User Element
    • nameString
      Name of the User Element
    • displayNameString
      By default, it will be set to the same value as 'name'. But User Components have the ability to opt for a more user-friendly name by setting the craft.name property
    • isCanvasboolean
      True if the current Node is a Canvas Node
    • parentNodeId
      The parent Node's id
    • nodesNodeId[]
      The id of the child Nodes
    • hiddenboolean
    • customRecord<String, any>
      Custom properties stored in the Node
    • linkedNodesRecord<String, NodeId>
      A map of Nodes defined inside the User Component. Only applicable if the current Node's User Element is a Component which contains <Element /> inside its render
  • eventsObject
    • selectedboolean
      Is true if the user element is clicked
    • hoveredboolean
      Is true if the user element is being hovered
    • draggedboolean
      Is true if the user element is being dragged
  • domHTMLElement | null
    The DOM of the current Node's User Element. For User Components, this is defined by the `connect` connector
  • relatedRecord<String, React.ElementType>
    A map of React Components that shares the current Node context
  • rulesObject
    • canDrag(currentNode: Node) => boolean
      Specifies if the current Node can be dragged. Applicable only if the current Node is a direct child of a Canvas Node
    • canDrop(targetNode: Node, currentNode: Node) => boolean
      Specifies if the current Node that is being dragged can be dropped in its target. Applicable only if the current Node is a direct child of a Canvas Node
    • canMoveIn(incomingNodes: Node[], currentNode: Node, helpers: NodeHelpers) => boolean
      Specifies if an array of incoming Nodes can be dropped into the current component. Applicable only to components whose corresponding Node is a Canvas
    • canMoveOut(outgoingNodes: Node[], currentNode: Node, helpers: NodeHelpers) => boolean
      Specifies if an array of child Nodes can be dragged out of the current component. Applicable only to components whose corresponding Node is a Canvas

Examples

Basics

Simple elements

// Example
<div style={{background: "#eee"}}>Hello</h2>

"node-a": {
id: "node-a",
data: {
type: "div",
props: {
style: {{
background: "#eee",
}}
children: "Hello"
},
name: "div",
displayName: "div",
isCanvas: false
}
}

User Component

// Definition
const Container = () => {}
Container.craft = {
name: "SimpleContainer"
};


// Example
<Container bg="#fff" />

"node-b": {
id: "node-b",
data: {
type: Container,
props: {
bg: "#fff"
},
name: "Container",
displayName: "SimpleContainer",
isCanvas: false
}
}

Child Nodes

Nodes that are referenced in the parent Node's data.nodes property. These nodes are rendered in the parent User Component's children prop

// Example
<Container bg="#fff">
<h2>Hello</h2>
</Container>

"node-a": {
id: "node-a",
data: {
...
type: Container,
props: {...},
nodes: ["node-b"]
}
}

"node-b": {
id: "node-b",
data: {
type: "h2,
props: {...},
parent: "node-a"
}
}

Linked nodes

Nodes that are linked to a parent Node via an arbitary id

// Definition
const TextEditable = () => {};

const Container = () => {
return (
<div>
<Element id="header" is={TextEditable} text="Header" />
</div>
)
}

// Example
<Container bg="#fff" />

"node-a": {
id: "node-a",
data: {
type: Container,
props: {...},
linkedNodes: {
"header": "node-b"
}
}
}

"node-b": {
id: "node-b",
data: {
type: TextEditable,
props: {...},
parent: "node-a"
}
}

Nodes with Custom properties

// Definition
const Container = () => {...}
Container.craft = {
custom: { // default custom values
toSaveInDatabase: false
}
};

// Example
<Element is={Container} bg="#fff" custom={{ toSaveInDatabase: true}} />

"node-b": {
id: "node-b",
data: {
...
custom: {
toSaveInDatabase: true,
style: {{
display: "flex"
}}
}
}
}