Placeholder in group Template not working with customResizeTool and rotateMultipleTool

GoJS
1

Hi Walter,
I am using placeholder in my grouptemplate and when i rotate the group panel the shapes it contains are moving outside this panel Also it doesn’t has smart size for all the shapes because i have set desired size of this panel to desiredSize:new go.Size(270, 200),if i set minsize and use placeholder it cover all the shapes accurately but in this case it stops resizing.What i want is group panel should cover all sizes shapes properly and all the shapes should resize and rotate with the group panel.

here is my groupTemplate code

  myDiagram.groupTemplate =
  GO(go.Group, "Auto",
    {rotatable:true,resizable:true,resizeObjectName: "SHAPE",locationObjectName: "SHAPE",resizeAdornmentTemplate: //showing resize panel in right bottom corner only
          GO(go.Adornment, "Spot",
            GO(go.Placeholder, { padding: 5/2 }),  // half the SHAPE.strokeWidth
            GO(go.Shape, { alignment: go.Spot.Right, width: 6, height: 6, stroke: "dodgerblue", fill: "lightblue", cursor: "e-resize" }),
            GO(go.Shape, { alignment: go.Spot.BottomRight, width: 6, height: 6, stroke: "dodgerblue", fill: "lightblue", cursor: "se-resize" }),
            GO(go.Shape, { alignment: go.Spot.Bottom, width: 6, height: 6, stroke: "dodgerblue", fill: "lightblue", cursor: "s-resize" })
          ),ungroupable: true},
    new go.Binding("location", "loc",go.Point.parse).makeTwoWay(go.Point.stringify),
    new go.Binding("angle", "ang").makeTwoWay(),

    GO(go.Panel, "Auto",
      GO(go.Shape, "RoundedRectangle",  // surrounds the Placeholder
      { name:"SHAPE",
      parameter1: 14,
      fill: "transparent",
      desiredSize:new go.Size(270, 200),
      stroke:"transparent"
      // minSize: new go.Size(270, 200) 
      }),
       // new go.Binding("desiredSize", "size", go.Size.parse).makeTwoWay(go.Size.stringify),
     // GO(go.Placeholder,    // represents the area of all member parts,
    //  { padding: 5}),  // with some extra padding around them
      GO(go.TextBlock,
        {
        font: "bold 14px sans-serif",
        stroke:"black",
        alignment: go.Spot.Center,
        wrap: go.TextBlock.WrapFit,
        editable: true
        },
        new go.Binding("font", "fontstyle"),
        new go.Binding("text", "text").makeTwoWay(),
        new go.Binding("stroke", "textcolor"))
    )
  );

here is the diagram i get

currently its resizing and rotating correctly but the problem is i want to use plcaeholder and minsize in group template so that group panel contains the whole shape.

2

The problem is that a Placeholder always measures the bounds of its members in document coordinates, not in the possibly rotated coordinates of a Panel inside the visual tree of a Group. This is why Groups with Placeholders do not support rotation, as documented.

Some day we may introduce some alternative behavior for Placeholder so that it supports rotated member Parts, but that is some distance in the not-yet-planned future.

3

Hi Walter,
Thanks for reply.

So how can we achieve the desired behaviour like group panel cover all shapes inside it and on rotate/resize,group rotate/resize the shapes inside it.

4

It depends on what policies you want. You’ll need to automatically update the size and location of the containing Group as member Nodes move around, or else you’ll want to restrict the movement of member Nodes by customizing their Node.dragComputation function.

Have you seen the ResizeMultipleTool and RotateMultipeTool in the extensions directory?

Some day we’ll add as an extension a new tool that might do what you want. For now I have put it up at: Resize and Rotate Multiple. Note that this does not impose any restrictions on the movement of Nodes or implement any automatic resizing or repositioning of Groups. But it does implement the hard part – supporting the rotating and resizing of Groups without Placeholders and their member Nodes.

5

Thanks,I got my part in the example.

6

Hi Walter,
I have one more question,Is it possible to show the resizing panel on the click of the nodes(gamma and Delta) that are in the group ,now it appears only after clicking the group.

7

I know, I have to call click event in nodeTemplate like this -----------

click: function(e, node) {showGroupAdronment(node, true);}

and then --------------------------------

function showGroupAdornment(node,show){
open the resizing panel; _// I want to know which method I have to call to show the resizing panel?_
}

8

You could make the regular Nodes not selectable.

Is the resizing of all of the member nodes or all of the selected nodes doing what you want?

9

Only when i click on the member nodes, i want to show the resize panel.

10

Then make top-level Nodes selectable and member Nodes not selectable.

11

Member nodes are already non selectable in my diagram,how would this open the resize panel on clicking on the nodes.

12

I am not getting your point…all i want is to show that skyblue color resize panel whenever i click on the nodes(i.e. gamma and delta) that are in the group.currently it only appears when i click on the group.

13

as you see in this gif,clicking on the member nodes does nothing and when i click on the group, Resize panel appears,so i want to show the resize panel on the clicks of nodes also.

14

It should be the case that clicking on an unselectable node will select the containing group if that is selectable.

Also, if you select toplevel nodes Alpha and Beta, you should get the multiple-resize-rotate behavior.

15

So, after making the member nodes unselectable, resize panel will automatically appear when i click on these nodes?

16

I just tried this by setting selectable: false on the Node template. Then clicking on Gamma or Delta selects the Group, just as I expected.

But you’ll want something smarter than having all Nodes be not selectable. Maybe something like:

        new go.Binding("selectable", "containingGroup", function(g) { return g === null; }).ofObject(),
17

The problem is I am using Data Inspector in my project .So if I make any node unselectable ,I will not be able to inspect the nodes properties in Data Inspector.

18

I’m confused. I thought you said earlier that when the user clicked on “Gamma” or “Delta” that you wanted the Group to be selected and show the custom ResizeRotateMultiple handles.

Note that the ResizeRotateMultipleTool intentionally only shows the special handles when either a Group is selected or when two or more Nodes are selected. The whole point of that tool is to support resizing or rotating multiple nodes, either by selecting a group or by selecting multiple nodes.

But perhaps you have yet different requirements, in addition to wanting to have the size and location of the group adjust automatically to the sizes and locations of its member nodes.

19

Thanks for the reply Walter,i have one more issue…i made a diagram by using two or more shapes by rotating or changing the angles of these shapes and this diagram is in a group,when i resize the group it breaks the diagram…how can i prevent this.Resizing works fine if i make a diagram without changing the shapes angles .

Here is the screenshot video of the issue

20

That custom tool I gave you was designed to resize each member node proportionally. If you want to extend the functionality to do different things to each member node, you can do that. But you might want to consider the complications involving more complex geometries than just single straight lines.