xd-scenegraph-helper is a set of lightweight helper functions with no external dependencies that let's you easily traverse the scenegraph of a XD document. While traversing, these functions will always respect the order of XD document flow. XD's default flow is: Nodes are included in back-to-front order
Make sure you have scenengraph correctly exposed to your plugin's code as a dependency. If you're using webpack you can do it by adding this to webpack.config.js:
externals: {
scenegraph: "scenegraph",
},
You can install this package via npm.
npm i xd-scenegraph-helper
// or
yarn add xd-scenegraph-helper
You can use it in your plugin setup like so:
const {findAll, findOne, findChildren, findChild} = require("xd-scenegraph-helper");
Searches this entire subtree (this node's children, its children's children, etc). Returns all nodes for which callback returns true.
findAll (targetNode: SceneNode.isContainer ,callback?: (node: SceneNode) => boolean): ReadonlyArray<[SceneNode]>
A function that evaluates whether to return the provided node. If this argument is omitted, findAll returns all nodes in the subtree.
Nodes are included in back-to-front order. Parents always appear before their children, and children appear in same relative order before their children, and children appear in same relative order as in the children array.
This traversal method is known as "pre-order traversal".
Example: find all Rectangle nodes and all nodes across the tree.
const scenegraph = require("scenegraph");
//selected node is an Artboard here.
const selectedNode = scenegraph.selection.items[0];
const {findAll} = require("xd-scenegraph-helper");
//for getting all nodes across the tree.
const allNodesInTree = findAll(selectedNode);
//for getting specific nodes across the tree.
const rectangles = findAll(selectedNode, (node)=> node instanceof scenegraph.Rectangle)
Searches this entire subtree (this node's children, its children's children, etc). Returns the first node for which callback returns true.
findOne (targetNode: SceneNode.isContainer ,callback?: (node: SceneNode) => boolean): Scenenode | null
A function that evaluates whether to return the provided node.
This function returns null if no matching node is found. The traversal order is the same as in findAll.
Example:
const scenegraph = require("scenegraph");
//selected node is an Artboard here.
const selectedNode = scenegraph.selection.items[0];
const {findOne} = require("xd-scenegraph-helper");
//for getting specific a node across the tree.
const rectangle = findOne(selectedNode, (node)=> node instanceof scenegraph.Rectangle)
Searches the immediate children of this node (i.e. not including the children's children). Returns the first node for which callback returns true.
findChild (targetNode: SceneNode.isContainer, callback?: (node: SceneNode) => boolean): Scenenode | null
A function that evaluates whether to return the provided node.
This function returns null if no matching node is found.
Example: find Group node whose is a immediate child of the targetNode.
const scenegraph = require("scenegraph");
//selected node is an Artboard here.
const selectedNode = scenegraph.selection.items[0];
const {findChild} = require("xd-scenegraph-helper");
//for getting specific immediate child.
const rectangle = findChild(selectedNode,(node)=> node instanceof scenegraph.Group)
Searches the immediate children of this node (i.e. not including the children's children). Returns all nodes for which callback returns true.
findChildren (targetNode: SceneNode.isContainer, callback?: (node: SceneNode) => boolean): ReadonlyArray<[SceneNode]>
A function that evaluates whether to return the provided node. If this argument is omitted, findChildren returns node.children.
Example: find all Group nodes who are immediate child of the targetNode.
const scenegraph = require("scenegraph");
//selected node is an Artboard here.
const selectedNode = scenegraph.selection.items[0];
const {findChildren} = require("xd-scenegraph-helper");
//for getting specific immediate children.
const groups = findChild(selectedNode,(node)=> node instanceof scenegraph.Group)
- Saud Tauqeer [email protected]
MIT
xd-scenegraph-herlper is heavily inspired by figma's API implementation.
Feel free to open an issue or submit a PR (please include isolated reproducible code) and i'll take a look at it as soon as humanly possible.