#Node Properties
Take note of these badges:
| Badge | Description |
|---|---|
| Experimental | This is an expirimental feature. |
| Slatebox App Enabled | This property works in conjuction with the Slatebox App. |
| Collaboration Feature | This property works in collaboration mode, which must be bootrstrapped either with the Slatebox App or some other mechanism. |
Property example | Description | Type | Default |
|---|---|---|---|
id abcd | A unique id for the node | string | "" |
name node_name | Internal name for the node | string | "" |
text display text | The node text that is displayed | string | "" |
image https://picsum.photos/id/237/200/300 | A background image for the node | string | "" |
groupId groupId | Assign a groupId to group nodes together. Nodes that are part of the same groupId can be resized, copied, and dragged together | string | "" |
xPos 25000 | The x coordinate of the node on the slate in px | integer | 0 |
yPos 25000 | The y coordinate of the node on the slate in px | integer | 0 |
height 100 | The height of the node in px | integer | 10 |
width 200 | The width of the node in px | integer | 10 |
borderStyle null | The style to attach to the border. Can be any of these variants: null (solid), -, ., --., -.., . , - , --, - ., --., --.. | string | null |
borderWidth 1 | The width of the border in px | integer | 1 |
borderColor #000 | The color of the border in hex | string | #000 |
borderOpacity 1 | The opacity of the border as a percent (0.0 - 1.0) | integer | 1 |
lineColor #000000 | The line color of this node's associations. Default fallback if the association constructor isn't given a lineColor | string | #000 |
lineOpacity 1 | The line opacity (0.0 - 1.0) of this node's associations. Default fallback if the association constructor isn't given a lineOpacity | integer | 1 |
lineEffect outlined | The line effect of this node's association. Default fallback if the association constructor isn't given a lineEffect. The available effects are: dropShadow, postItNote, tattered, blur, outline, pixelate, posterize, and pencil | string | "" |
lineWidth 5 | The default line width of this node's associations in px. Default fallback if the association constructor isn't given a lineWidth. | integer | 2 |
opacity 1 | The opacity of the node (0.0 - 1.0). | integer | 1 |
textOpacity 1 | The opacity of the text (0.0 - 1.0). | integer | 1 |
showDelete true | Show the delete icon when the node is clicked | boolean | true |
| Experimental showAddAndDeleteConditionally false | Only show the add and delete buttons on the last duplicated node. Primarily used for building templates in the Slatebox App. | boolean | false |
showResize true | Show the resize icon when the node is clicked | boolean | true |
showAdd true | Show the add icon when the node is clicked. The add icon duplicates the current node, and if mindMapMode on the slate is set to true, it autoamtically creates an association to the duplicated node. | boolean | true |
showRelationshipConnector true | Show the relationship connector icon when the node is clicked. This connector can be draggable and lets the user create associations to other nodes. | boolean | true |
showRelationshipDelete true | Show the delete icon when a node's association is clicked. | boolean | true |
| Slatebox App Enabled showRelationshipProperties true | Show the properties icon when a node's associations are clicked. Either use Slatebox App, or provide your own properties screen when this is clicked. | boolean | true |
showRelationshipReassign true | Show the relationship reassign icon when the node's associations are clicked. This is the same icon and functionality as the showRelationshipConnector, but it is for reassigning or removing an existing association instead of creating a new one. | boolean | true |
showRotate val true | Show the rotate icon when the node is clicked | boolean | true |
showMenu val true | Show the menu (which contains all the icons) when the node is clicked. | boolean | true |
| Slatebox App Enabled showColorTab true | Show the color tab when the node properties icon is clicked in the Slatebox App. | boolean | true |
| Slatebox App Enabled showTextTab true | Show the text tab when the node properties icon is clicked in the Slatebox App. | boolean | true |
| Slatebox App Enabled showShapeTab true | Show the shape tab when the node properties icon is clicked in the Slatebox App. | boolean | true |
| Slatebox App Enabled showImageTab true | Show the image tab when the node properties icon is clicked in the Slatebox App. | boolean | true |
| Slatebox App Enabled showEffectTab true | Show the effect tab when the node properties icon is clicked in the Slatebox App. | boolean | true |
| Experimental spaceBetweenNodesWhenAdding 100 | Define the space between added nodes in px. Primarily used for building templates in the Slatebox App. | integer | null |
| Experimental disableMenuAsTemplate true | Disable the menu when the slate is used as a template. Primarily used for building templates in the Slatebox App. | boolean | false |
disableDrag false | Disable dragging for this node | boolean | false |
allowDrag true | Allow dragging for this node | boolean | true |
allowMenu true | Show the menu when the node is clicked | boolean | true |
allowContext true | Show the context menu when the node is left-clicked (or two finger clicked) | boolean | true |
allowResize true | Show the resize icon when the node is clicked | boolean | true |
isLocked false | Lock the node, causing a lock icon to appear, disabling the node | boolean | false |
| Slatebox App Enabled isComment true | Mark this node as a comment - useful in conjuction with the Slatebox App commenting system. | boolean | false |
backgroundColor 90-#031634-#2D579A | Background color as hex. Can be a gradient in this form as well: 90-#031634-#2D579A | string | #fff |
foregroundColor #fff | Color of the node text | string | #000 |
fontSize 35 | Size of the font in pt | integer | 18 |
fontFamily Bangers | Font family. Note: this font must either be installed on the machine, or loaded (through Google fonts for example) | string | Roboto |
vectorPath M3 3h18v18H3z | The SVG vector path to apply to this node. This is the m value from the <path m='xxx'> element. rectangle, roundedrectangle, and ellipse may be used as shortcuts | string | roundedrectangle |
rotate.rotationAngle 45 | The rotated angle of the node in degress (from 0 -360) | integer | 0 |
textXAlign middle | Align the text horizontally. Can be end (right aligned), middle, or start (left aligned) | string | middle |
textYAlign center | Align the text vertically. Can be hanging (top aligned), center, or baseline (bottom aligned) | string | center |
link.show false | Show the link associated with the node | boolean | false |
link.type url | Set the link to either url or currentSlate | string | "" |
link.data https://slatebox.com | If the type is url, set this to the URL to be opened in a new window. If the type is currentSlate, set this to the id of the node you want to center on (e.g., second_node) | string | "" |
filters.vect postItNote | The filter effect of this node's vectorPath. The available effects are: dropShadow, postItNote, tattered, blur, outline, pixelate, posterize, and pencil. | string | "" |
filters.text outline | The filter effect of this node's text. The available effects are: dropShadow, postItNote, tattered, blur, outline, pixelate, posterize, and pencil. | string | "" |