HTMLGraph | Canvas

Add Node

Adds a node to the canvas with customizable properties.

    
canvas.addNode({
  id: &#34;node-1&#34;,
  x: 100,
  y: 100,
  element: document.createElement(&#39;div&#39;),
})

For convenience, static ports can be defined directly during node creation.

    
const node = document.createElement(&#39;div&#39;);
const port = document.createElement(&#39;div&#39;);
node.appendChild(port);

canvas.addNode({
  id: &#34;node-1&#34;,
  element: node,
  x: 100,
  y: 100,
  ports: [
    {
      id: &#34;port-1&#34;,
      element: port,
    },
  ],
})

All available parameters are demonstrated in the following example:

    
const node = document.createElement(&#39;div&#39;);
const port = document.createElement(&#39;div&#39;);
node.appendChild(port);

canvas.addNode({
  id: &#34;node-1&#34;,
  element: node,
  x: 100,
  y: 100,
  ports: [
    {
      id: &#34;port-1&#34;,
      element: port,
      direction: 0,
    },
  ],
  centerFn: (w, h) =&gt; ({ x: w / 2, y: h / 2 }),
  priority: 1,
})

Parameters

Name	Type	Description	Required	Default
id	any	Unique identifier for the node	no	autogenerated
element	HTMLElement	HTML element for the node	yes
x	number	X-coordinate of the node	yes
y	number	Y-coordinate of the node	yes
ports	Array<Port>	Array of ports	no	[]
centerFn	function	Function to determine the node’s center	no	(w, h) => ({ x: w / 2, y: h / 2 })
priority	number	Z-index of the node	no	0

Port Parameters

Name	Type	Description	Required	Default
id	any	Unique identifier for the port	no	autogenerated
element	HTMLElement	HTML element for the port	yes
direction	number	Radian angle for edge direction	no	0