Setting a Group's dynamicLayout to false Doesn't Fully Disable Responsive Resize

Adobe XD UXP Plugin API
1

Platform: Windows 10 version 1909
Adobe XD version 31.2.12.4

Issue

I used XD plugin code to draw a box, where each side of the box was composed of ten separate line segments. Then I grouped all the line segments into a Group with code. Then I disabled Responsive Resize with code using group.dynamicLayout = false;

The Adobe XD user interface showed the group as having Responsive Resize disabled, i.e.

image
image591×211 1.72 KB

but when I grabbed the corner of the group and resized it with my mouse, the resize happened as if Responsive Resize was enabled.

Before the resize:

image
image405×291 1.19 KB

After the resize:

image
image363×298 1.44 KB

If I run my code (which disables Responsive Resize) and then I use the Adobe XD user interface to enable and then re-disable Responsive Resize, resizing the group with my mouse then happens as if Responsive Resize is disabled, as expected.

image
image376×285 1.25 KB

It seems like group.dynamicLayout = false; changes what the Adobe XD user interface shows in the side panel, but it doesn’t actually change the resizing behavior of the group.

Steps to reproduce

Here is a complete, small, working example that replicates the behavior.

manifest.json

{
  "id": "14231fd1",
  "name": "XD Plugin 3",
  "version": "0.0.1",
  "host": {
    "app": "XD",
    "minVersion": "21.0"
  },
  "uiEntryPoints": [
    {
      "type": "menu",
      "label": "Draw Box",
      "commandId": "drawBox"
    }
  ]
}

main.js

const { GraphicNode, Line, Color } = require("scenegraph");
const commands = require("commands");

function drawWall(selection, i, j, orientation) {
  const line = new Line();
  if (orientation == "vertical") {
    line.setStartEnd(0, 0, 0, 30);
  } else { // assume "horizontal"
    line.setStartEnd(0, 0, 30, 0);
  }
  line.stroke = new Color("Black");
  line.strokeWidth = 5;
  line.strokeEndCaps = GraphicNode.STROKE_CAP_ROUND;
  selection.insertionParent.addChild(line);
  line.moveInParentCoordinates(50 + i*30, 50 + j*30);
  return line;
}

function drawBoxHandlerFunction(selection) {
  console.log("Drawing box");
  let wall;
  let arrayOfWalls = [];
  for (let i=0; i<10; i++) {
    wall = drawWall(selection, i, 0, "horizontal");
    arrayOfWalls.push(wall);
    wall = drawWall(selection, i, 10, "horizontal");
    arrayOfWalls.push(wall);
    wall = drawWall(selection, 0, i, "vertical");
    arrayOfWalls.push(wall);
    wall = drawWall(selection, 10, i, "vertical");
    arrayOfWalls.push(wall);
  }
  selection.items = arrayOfWalls;  // Select all the walls
  commands.group();  // Wraps the selected objects in a Group, leaving the Group selected afterward
  // so selection.items[0] is the just-created group
  let group = selection.items[0];
  group.dynamicLayout = false;  // turns off "responsive resize" on the group
}

module.exports = {
  commands: {
    drawBox: drawBoxHandlerFunction
  }
};

The plugin (named “XD Plugin 3”) will add a new menu item to the Plugins panel: “XD Plugin 3”. If you click that, it should draw a box on the currently-focused artboard. The box should be selected (as a group) and if you look under LAYOUT in the right side panel, Responsive Resize should be disabled. But if you resize the box with your mouse, you will see it come apart at the seams, as if Responsive Resize were enabled. Enabling and re-disabling Responsive Resize (in the Adobe XD side panel) will change the group resizing behavior to the expected behavior.

3

I have the same issue. When you (manually) lock the aspect ratio (the lock icon next to w and h) the resizing happens as expected.
There seems to be no way to set the aspect ration from code which is a shame because dynamic Layout is half useless here.
You can vote for it here:

1 Like
4

If I manually lock the aspect ratio by clicking on the padlock icon right of W and H, the aspect ratio does indeed stay the same when I drag the corner of my group, but the lines still come apart at the seams, i.e. they don’t grow/shrink in proportion to the size of the group.

That said, it would be nice to have API access to the aspect ratio lock, so I will go vote for that.

2 Likes