Show the custom (saved) shapes in pallete without changing their position of the shapes

Hi,
I am using a pallete in my GOJS project and I am showing the basic(Defalut)shapes and custom shapes(made from the combination of default shapes) in the pallete,Basic shapes are showing accurately but in the case of custom shapes the position of the shapes gets distorted when i show them in the pallete.
attaching the screenshots of saved shape on the canvas and on the pallete.Saved(custom) Shape:


Distorted shape on the pallete in custom shapes catagory:

Here is my code.In this i just hardcoded the json data of the saved shape in node data array.

  // create the Palette for custom shapes
  var customPallete =
    GO(go.Palette, "customShapes");

  // the Palette's node template for custom shapes
  customPallete.nodeTemplate =
    GO(go.Node, "Auto",
     GO(go.Shape,
        {
          name: "SHAPE",
          width: 40, height: 40,
          stroke: "#000000",
          fill: "transparent",
          //angle: 45,
          // strokeWidth: 1
        },
        new go.Binding("figure","fig"),
        new go.Binding("location", "loc").makeTwoWay(),
        new go.Binding("fill", "fill"),
        new go.Binding("stroke", "stroke"),
        new go.Binding("strokeWidth", "strokeWidth")
      ),
      new go.Binding("angle", "ang").makeTwoWay(),
      new go.Binding("location", "loc").makeTwoWay()
    );
  // the list of data to show in the Palette
  customPallete.model.nodeDataArray = [
    {"fig":"Square", "name":null, "key":"Shape_72", "isGroup":true},
    {"fig":"LogicUnion", "key":"shape_LogicUnion_XlZ2Ivar", "geometry":null, "ang":null, "size":{"class":"go.Size", "width":70, "height":80}, "loc":{"class":"go.Point", "x":0, "y":0}, "group":"Shape_72", "spots":[], "fill":"transparent", "stroke":"black", "strokeWidth":null},
    {"fig":"LineV", "key":"shape_LineV_0WncD2lL", "geometry":null, "ang":null, "size":{"class":"go.Size", "width":70, "height":70}, "loc":{"class":"go.Point", "x":158.39999999999986, "y":55.00000000000003}, "group":"Shape_72", "spots":[], "fill":"transparent", "stroke":"black", "strokeWidth":null},
    {"fig":"LineV", "key":"shape_LineV_x9PPD7en", "geometry":null, "ang":null, "size":{"class":"go.Size", "width":70, "height":70}, "loc":{"class":"go.Point", "x":89.5, "y":54.99999999999997}, "group":"Shape_72", "spots":[], "fill":"transparent", "stroke":"black", "strokeWidth":null},
    {"fig":"LogicUnion", "key":"shape_LogicUnion_WznJrOmZ", "geometry":null, "ang":179.7, "size":{"class":"go.Size", "width":70, "height":70}, "loc":{"class":"go.Point", "x":123.79999999999991, "y":-13.999999999999993}, "group":"Shape_72", "spots":[], "fill":"transparent", "stroke":"black", "strokeWidth":null}
  ]

I believe that you are using Groups when you should be using Panels.

How did you define the Node that is shown in the diagram? That is a single simple Node, isn’t it? If the user constructed that node out of simpler parts, they should not have grouped them together by using Groups.

In fact, that whole node should consist of a single Shape that is a “RoundedRectangle”.

http://gojs.net/latest/intro/groups.html
http://gojs.net/latest/intro/panels.html

The node that is shown in the diagram is constructed using 4 shapes and i want them to appear in pallete like they are appearing in the diagram (As a single shape).
Should i remove the group property from the hard-coded data of all the shapes?

And according to gojs documentation if i want to treat a collection of Nodes and Links as if they were a single Node i should use the Group class. So i am confused why shouldn’t i use the group in this case because i also want to use the 4 shapes as a single node in my pallete.

Yes, you should not be using Groups at all. Instead, you should either use a Panel holding the individual Shapes at the positions that you want to keep, or you should construct a single Shape that has a Geometry holding all of the PathFigures of the “grouped” Shapes. I’m guessing that the former choice is better for you.

Do you need to have Links that connect your Nodes? If not, use the simpler Part class rather than the Node class.

So the “assembling” operation in the main diagram would construct a single Part that is of type “Position” Panel holding all of the Shapes that were in the selected Parts. A “disassembling” operation would replace the selected Part with a bunch of Parts, one for each Shape in the original Part.

Presumably you would disallow assembling a single Part and you would disallow disassembling a Part that only had a single Shape in it, since neither of those operations would accomplish anything.

Take a good look at this sample: Shape Assembly

The thing i want to do is that i want to show the custom shape by using hard-coded data in nodeDataArray of pallete.And i am getting this hard-coded data

customPallete.model.nodeDataArray = [
{“fig”:“Rectangle”, “key”:“shape_Rectangle_522VpMKl”, “geometry”:null, “ang”:null, “size”:{“class”:“go.Size”, “width”:70, “height”:70}, “loc”:{“class”:“go.Point”, “x”:7.105427357601002e-15, “y”:7.105427357601002e-15}, “group”:“Shape_76”, “spots”:[], “fill”:“transparent”, “stroke”:“black”, “strokeWidth”:null},

{“fig”:“Triangle”, “key”:“shape_Triangle_QKMiHvAN”, “geometry”:null, “ang”:null, “size”:{“class”:“go.Size”, “width”:70, “height”:70}, “loc”:{“class”:“go.Point”, “x”:7.105427357601002e-15, “y”:-70.00000000000004}, “group”:“Shape_76”, “spots”:[], “fill”:“transparent”, “stroke”:“black”, “strokeWidth”:null}
];

by constructing the shape in canvas.But the problem is that i am not able to get the same custom shape in pallete because the shapes that were used to construct the custom shape changes there positions in the pallete.All other properties are working fine in hard-coded data except the location x,y

I’m sorry, but there is not enough information to tell what you are doing and what you want to be done.

How did the two nodes get the same location?

And don’t give too much information, either, because that will be confusing.

May I see the source code of the sample provided by you, in this url Shape Assembly

??? The source code is all right there on the page. Invoke the “View Source” command in your browser.

Will resizable property be working on the node that is constructed after assembling or not?
Because when i apply the resizable:true in myDiagram.nodeTemplateMap this happens :

only the panel is resizing,the shape is not

Sorry, but no, I did not have time to implement that. Perhaps I can do that when I get some free time. Alas I cannot promise anything right now.

Not a problem ,But Whenever you will be implementing the resizable property will you please tell me how can I make the spots and links assembled also that are connected with the shapes .
Here is the sample diagram with links and spots that i want to assemble and treat as a single node:

Ah, you didn’t say that you wanted the user to define nodes with new ports.

But that’s quite possible. Basically you want the Node template to be a “Spot” Panel where the main element is a Shape or a Panel of Shapes (depending on whether it’s a primitive or an assembly), and you want the rest of the elements of the Node template to be the ports.

Since you presumably want to support a variable number of ports on each node, you’ll need to bind the Node.itemArray to an Array of objects describing each port, and the Node.itemTemplate would be the template for each port. I think the Pipes sample, Pipes, demonstrates this.

But of course the Pipes sample only has a single Shape as the main element of the Node panel, rather than a nested Panel with its own Binding of Panel.itemArray and Panel.itemTemplate to remember each basic figure and size and position of an assembly of shapes.

Hi Walter,
Can you please guide me for how can i achieve the resize of assemble shape? For example i have circle and rectangle in my assemble shape. Now when i resize it, it resizes the panel but not the circle and rectangle.

Hello Walter,
Its been almost a week but i am not able to find any solution for the resizing of assembled shapes .I researched all the resizing samples and examples in GoJS but i did not find any solution of my problem.
Please guide me for how it can be done.

You’ll need to implement a custom ResizingTool that overrides ResizingTool.resize to notice whether the object being reshaped is a Panel. If it is, it should proportionally resize each of the Shapes within the Panel and change their GraphObject.position proportionally within the rectangle. (And if it is not, I think the default behavior will work correctly, so just call the base method.)

In the future we’ll have a sample that demonstrates doing this for separate Nodes. In your case you’ll have separate Shapes within a single Node, so you’ll need to adapt that code.

Thanks for the reply,
What is the default behaviour /base method ?Are you talking about the resize property that we set in node template

resizable:true,
resizeObjectName:“ObjectName”

No, I was talking about overriding the ResizingTool.resize method.

Its default behavior is somewhat complex, and it’s changing in 1.7. GoJS Change Log. But that shouldn’t matter for your override, where you want your own behavior when the resizeObject is that Panel holding a bunch of Shapes.

Hi can you please let me know how can i select all the shapes inside a panel to adjust their sizes with the panel resize? Or can you implement it in the assembling demo that was given by you above in this url- Shape Assembly .

In that sample, when the Part.resizeObject is a Panel instead of a Shape, you can access all of its Shape elements via the Panel.elements iterator.

http://gojs.net/latest/intro/collections.html