How to implement overlapping Panels?

GoJS
1

In the group there’s square rectangle nodes. Inside the rectangle there’s two textblocks one in the center and one in the topleft. I am using rotate multiple tool to rotate group and nodes. I need to skip rotating the textblocks inside the nodes. Nodes should always align with the group while the texts should always remain at angle 0. ideally also the topleft textblock should always remain at the topleft even though the rectangle is rotated. Here’s my node and group code :

1601997890263
1601997890263803×218 27.3 KB

let _0degreeNodeTemplate =
                    $(go.Node, "Auto",
                        {
                            rotatable: false,
                            deletable: false,
                            locationSpot: new go.Spot(0, 0, 0, 0),
                            dragComputation: scope.stayInGroup,
                            movable: true,
                            canMove: false,
                            margin: 1
                        },
                        new go.Binding("location", "loc").makeTwoWay(),
                        new go.Binding("angle", "angle").makeTwoWay(),
                        $(go.Panel, "Auto", { name: "NODE_RECTANGLE" },
                        $(go.Shape, "Rectangle", {
                            toMaxLinks: 1,
                            fromMaxLinks: 1,
                            width: 75,
                            height: 75,
                            stroke: "black",
                            strokeWidth: 1,
                            fromSpot: go.Spot.TopSide,
                            toSpot: go.Spot.TopSide,
                            portId: "",
                            cursor: "pointer",
                            fromLinkable: true, fromLinkableSelfNode: false, fromLinkableDuplicates: false,
                            toLinkable: true, toLinkableSelfNode: false, toLinkableDuplicates: false
                        }, new go.Binding("fill", "color"),
                            ),
                        $(go.TextBlock, "Default text", { margin: 6, font: "bold 18px sans-serif" },
                            new go.Binding("text", "name").makeTwoWay()),
                        $(go.TextBlock, "Default text", { name:"TEXT_BLOCK", margin: 6, alignment: go.Spot.TopLeft, font: "10px sans-serif" },
                            new go.Binding("text", "ID_COLONNE").makeTwoWay()),
                        )

                    );

let _0degreeGroupTemplate =
                    $(go.Group, "Auto",
                        {
                            rotatable: true,
                            locationSpot: go.Spot.Center,
                            rotateObjectName: "GROUP_RECTANGLE",
                            resizable: false,
                        }, new go.Binding("location", "loc").makeTwoWay(),
                        $(go.Panel, "Auto", { name: "GROUP_RECTANGLE" },
                            $(go.Shape, "Rectangle", { name: "SHAPE", parameter1: 10, height: 85 + 20, fill: "lightyellow" },
                                new go.Binding("width", "nodeCount", function (v) { return v * 75 + 50; })),
                            $(go.Shape, "TopFrontSide", { name: "FRONTLINE", parameter1: 10, strokeWidth: 2, height: 85 + 20 },
                                new go.Binding("stroke", "frontcolor"), new go.Binding("width", "nodeCount", function (v) { return v * 75 + 50; })),
                            $(go.TextBlock, { margin: 5, alignment: go.Spot.TopLeft, font: "Bold 12pt Sans-Sherif", width: 20 }, new go.Binding("text", "key")),
                            $(go.Placeholder, { padding: 5 }),
                            new go.Binding("angle", "angle").makeTwoWay()
                        )
                    );
2

There are two techniques that you could use.

One is demonstrated in the Seating Chart sample: Seating Chart
Assuming that the angle is available as a property on the node data:

new go.Binding("angle", "angle", function(n) { return -n; })

That should keep the TextBlock always upright, effectively at a document angle of zero.

The other is that you could have the “angle” Binding not on the whole Node, but only on the piece of the node that you want to rotate. Something like:

Node, "Spot", with rotateObjectName referring to the inner Panel
    Panel, "Spot"
        Shape, "Square"
        TextBlock, the bold text, with inverse Binding on "angle"
    TextBlock

Although that should keep that top-left text near the top-left corner of the node, it will not be kept within the square shape as it rotates at angles other than a multiple of 90. I don’t know where you would want that text to be when the angle is 45 degrees.

[EDIT: I have changed the main TextBlock, which is rotated along with its Panel, to have the inverse Binding on “angle”, so that both texts are always written upright.]

3

Thanks, the inverse Binding works pretty well from that GoT example )