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(incomingNode: Node, currentNode: Node) => boolean
    Specifies if an incoming Node can be dropped in the current Node. Applicable only if the current Node is a Canvas Node
  • canMoveOut(outgoingNode: Node, currentNode: Node) => boolean
    Specifies if a child Node can be dragged out of the current Node. Applicable only if the current Node is a Canvas Node

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

// Definitionconst 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 arbitrary id

// Definitionconst 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

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