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"
      }}
    }
  }
}