documentRoot undefined when accessed from panel

Adobe XD
1

The code below worked normally when used outside a panel UI.
When inside a panel documentRoot seems to be undefined.

Any reason for that?

Error:

TypeError: Cannot read property ‘children’ of undefined

Code:

let panel;
const { Artboard, Rectangle, Ellipse, Text, Color } = require("scenegraph");

function walkDownTree(selection, documentRoot) {

  documentRoot.children.forEach((node) => {

    if (node instanceof Artboard) {

      let artboard = node;
      console.log(artboard.name);

      artboard.children.forEach(childNode => {

        let Lname = childNode.name;
        let Lwidth = childNode.localBounds.width;
        let Lheight = childNode.localBounds.height;

        console.log(Lname);

        if (Number.isInteger(Lwidth) == false) {
          console.log(Lwidth);
          childNode.resize(Math.round(Lwidth), Lheight);
          console.log(Lwidth);
        }

        if (Number.isInteger(Lheight) == false) {
          console.log(Lheight);
          childNode.resize(Lwidth, Math.round(Lheight));
          console.log(Lheight);
        }

        walkDownTree(selection, childNode);

      });

    }

  });

}

function create() {

  const html = `
  <style>
  </style>

  <form method="dialog">
    <footer><button type="submit" uxp-variant="cta">Apply</button></footer>
  </form>
  `;

  panel = document.createElement("div");
  panel.innerHTML = html;
  panel.querySelector("form").addEventListener("submit", walkDownTree);

  return panel;

}

function show(event) {

  if (!panel) event.node.appendChild(create());

}

module.exports = {
  panels: {
    enlargeRectangle: {
      show,
    },
  },
};
2

The selection and root writing appears to be out of date. Since this notation is used only in the first period, use require.

When calling walkDownTree from the panel, pass document root as an argument.

Extra:
When editing a document from the panel, you must use app.editDocument.

let panel;
const { Artboard, Rectangle, Ellipse, Text, Color, selection, root } = require("scenegraph");
const app = require("application");

function walkDownTree(rootNode) {

  rootNode.children.forEach((node) => {

    if (node instanceof Artboard) {

      let artboard = node;
      console.log(artboard.name);

      artboard.children.forEach(childNode => {

        let Lname = childNode.name;
        let Lwidth = childNode.localBounds.width;
        let Lheight = childNode.localBounds.height;

        console.log(Lname);

        if (Number.isInteger(Lwidth) == false) {
          console.log(Lwidth);
          childNode.resize(Math.round(Lwidth), Lheight);
          console.log(Lwidth);
        }

        if (Number.isInteger(Lheight) == false) {
          console.log(Lheight);
          childNode.resize(Lwidth, Math.round(Lheight));
          console.log(Lheight);
        }

        walkDownTree(childNode);

      });

    }

  });

}

function create() {

  const html = `
  <style>
  </style>

  <form method="dialog">
    <footer><button type="submit" uxp-variant="cta">Apply</button></footer>
  </form>
  `;

  panel = document.createElement("div");
  panel.innerHTML = html;
  panel.querySelector("form").addEventListener("submit", () => {
    app.editDocument({editLabel: "Enlarge Rectangle"}, () => {
      walkDownTree(root);
    });
  });

  return panel;

}

function show(event) {

  if (!panel) event.node.appendChild(create());

}

module.exports = {
  panels: {
    enlargeRectangle: {
      show,
    },
  },
};
1 Like
3

Thanks a lot!
Works like a charm now!

1 Like