Creating an object with pathData

Adobe XD UXP Plugin API
#1

Greetings everyone,
I’m currently having trouble trying to generate objects from svg pathData instead of width/height. Let’s say I’m trying to create a rectangle, refeering to the pathData instead of width/height, like the following example:

let rect = new Rectangle();
rect.pathData = ‘M 0 0 L 325 0 L 325 55 L 0 55 Z’;
rect.fill = 4278217177;
rect.stroke = 4278217177;
documentRoot.addChild(rect);

I get the following feedback:
“Plugin TypeError: Cannot set property pathData of [object Object] which has only a getter at functionName.”

Am I missing something? Is object.pathData a read-only parameter?

1 Like
#2

From the docs (https://adobexdplatform.com/plugin-docs/reference/scenegraph.html#pathpathdata--string) of a “Path”:

Representation of the path outline in SVG <path> syntax. Unlike other node types, pathData is writable here. Syntax is automatically normalized, so the getter may return a slightly different string than what you passed to the setter.

Therefore, path data is only “writeable” for Path nodes (not for rectangles – for everything but paths, they’re read-only). See also the pathData docs for GraphicsNode (https://adobexdplatform.com/plugin-docs/reference/scenegraph.html#graphicnodepathdata--string):

Returns a representation of the node’s outline in SVG <path> syntax. Note that only nodes with strokePosition == GraphicNode.CENTER_STROKE can be faithfully rendered in actual SVG using the exact pathData shown here.
Kind : instance property of GraphicNode Read only : true

2 Likes
#3

This is a snippet that works for me:

let triangleSide = 100;

let triangleHeight = triangleSide * (Math.sqrt(3)/2);

pathData =
`
M${artboardCenterX},${artboardCenterY-(triangleHeight/2)}
l${triangleSide/2},${triangleHeight}
l${-triangleSide},0
Z
`;

drawPath();

function drawPath()
{
let path = new Path();
path.pathData = pathData;
path.fill = new Color("#000000");
path.fillEnabled = true;
path.stroke = new Color("#000000");
path.strokeEnabled = false;
mainSelection.insertionParent.addChild(path);
mainSelection.items = [path];
}
2 Likes
#4

That’s what I was fearing, but I guess that part of the docs sneaked around me. Thanks a lot for clearing that out for me!

1 Like
#5

I may need to try creating a Path instead of Rectangles, Ellipses and recreate what I am trying to achieve. Thanks a lot for sharing your snippet!

#6

May I ask why? From what I’ve seen so far, it’s replacing new Rectangle() with new Path(), is it not :wink:?

Anytime!

#7

The problem is that for my particular case I wish to create specifically a Rectangle object instead of a Path one, as in a Rectangle you’re able to set certain stuff like border-radius. I was able to visually simulate it by using a Path instead, but I lose some functionality on the result object. But it is what it is, and I can see why other objects can’t be built by simply feeding some pathData. I guess I was just testing my luck. :sweat_smile:

2 Likes
#8

hi @psa,

why simulating a Rectangle using a Path?

1 Like
#9

As @PaoloBiagini says, why is that a problem? You should be able to take your path and make an equivalent Rectangle with no problem.

#10

Maybe I’m not understanding correctly, but creating a Path and a Rectangle it’s not the same thing, regarding how the user is able to manipulate the two objects, some parameters like “border-radius” are only available for Rectangle objects. As in my particular case I need to generate them only by providing the pathData, I’m not able to create a Rectangle, but instead a Path. Or am I missing something?

#11

Doesn’t this sample code work for you?

let rect = new Rectangle();
rect.width = 200;
rect.height = 100;
rect.fill = new Color("#FF0000");
selection.insertionParent.addChild(rect);

Did you import the Rectangle class through require?

#12

The problem here is creating a new Rectangle using only the pathData parameter, and not the width/height.
Something like the following:

let rect = new Rectangle();
rect.pathData = ‘M 0 0 L 325 0 L 325 55 L 0 55 Z’;
rect.fill = 4278217177;
rect.stroke = 4278217177;
documentRoot.addChild(rect);

This is not possible apparently, so I need to figure out another solution eventually. But thanks everyone for trying to help! :wink: