Rotating Groups

There’s an example of that in the documentation: DraggingTool | GoJS API

By the way, Groups with Placeholders do not support rotation of the members of the group.

Code:
function highlightGroup(e, grp, show) {
if (!grp) return;
e.handled = true;
if (show) {
var tool = grp.diagram.toolManager.draggingTool;
var map = tool.draggedParts || tool.copiedParts;
if (grp.canAddMembers(map.toKeySet())) {
grp.isHighlighted = true;
return;
}
}
grp.isHighlighted = false;
}

var DFTemplate =
(go.Group, go.Panel.Auto, // or "Viewbox" { resizable: true,resizeObjectName:"SHAPE", rotatable: true, locationSpot: go.Spot.Center,locationObjectName: "SHAPE", selectionObjectName: "SHAPE", background: "transparent", mouseDragEnter: function(e, grp, prev) { highlightGroup(e, grp, true); }, mouseDragLeave: function(e, grp, next) { highlightGroup(e, grp, false); }, computesBoundsAfterDrag: true, mouseDrop: finishDrop, handlesDragDropForMembers: true, ungroupable: true }, new go.Binding("background", "isHighlighted", function(h) { return h ? "rgba(255,0,0,0.1)" : "transparent"; }).ofObject(), (go.Panel, “Spot”,
(go.Shape, "Rectangle", {name:"SHAPE",fill:"rgba(255,255,255,0)",strokeWidth:2,stroke: "rgba(0,0,0,1)",width:200, height:250}), (go.TextBlock,
{
editable: true,
_isNodeLabel: true,
isMultiline:true,
alignment: new go.Spot(0.5, 1,0,10),
cursor: “pointer”
},
new go.Binding(“font”, “font”),
new go.Binding(“stroke”, “color”),
new go.Binding(“text”, “text”).makeTwoWay()
)
)
);
Result:


But groups without Placeholders do not support rotation of the members of the group.How do I get a TextBlock out of the highlighted area?

After the group rotates, Nodes can only move up and down in the red ellipse region.

I have no idea of what you are trying to do. And I cannot understand your code unless it is formatted properly.

If you want to rotate groups, did you not try searching for help? You would have found Rotate a Group. But maybe that’s not what you want to do.

Once the group shape is rotated, you will need to make the dragComputation function smarter to recognize that the area inside the rotated rectangle is no longer rectangular in document coordinates.

Question 1:

Once the group shape is rotated, I will need to make the dragComputation function smarter to recognize that the area inside the rotated rectangle is no longer rectangular in document coordinates.But how do I deal with the dragComputation function?

            function stayInGroup(part, pt, gridpt) {
            // don't constrain top-level nodes
            var grp = part.containingGroup;
            if (grp === null)
                return pt;
            // try to stay within the background Shape of the Group
            var back = grp.findObject("SHAPE");
            if (back === null)
                return pt;
            // allow dragging a Node out of a Group if the Shift key is down
            //if (part.diagram.lastInput.shift) return pt;
            var p1 = back.getDocumentPoint(go.Spot.TopLeft);
            var p2 = back.getDocumentPoint(go.Spot.BottomRight);
            var b = part.actualBounds;
            var loc = part.location;
            // find the padding inside the group's placeholder that is around the member parts
            var m = (grp.placeholder !== null ? grp.placeholder.padding : new go.Margin(0));
            // now limit the location appropriately
            var x = Math.max(p1.x + m.left, Math.min(pt.x, p2.x - m.right - b.width - 1)) + (loc.x - b.x);
            var y = Math.max(p1.y + m.top, Math.min(pt.y, p2.y - m.bottom - b.height - 1)) + (loc.y - b.y);
            return new go.Point(x,y);
        }

Question 2:

How do I deal with the highlightGroup function?

            function highlightGroup(e, grp, show) {
            if (!grp)
                return;
            e.handled = true;
            if (show) {
                var tool = grp.diagram.toolManager.draggingTool;
                var map = tool.draggedParts || tool.copiedParts;
                if (grp.canAddMembers(map.toKeySet())) {
                    grp.isHighlighted = true;
                    return;
                }
            }
            grp.isHighlighted = false;
        }

Yes, besides rotating member nodes, you also have to change their locations so that they remain inside the rotated rectangular bounds of the rotated group. If I have time, I’ll create a GroupRotatingTool that does that.

For your other question, which looks like it really ought to be its own forum topic because it’s unrelated to rotating groups and keeping member nodes inside rotated groups, I think it’s just a matter of how you implement highlighting in the group.

Thank you for your solution and look forward to the new GroupRotatingTool.

Here you go: Rotating Groups
The tool is at http://gojs.net/temp/GroupRotatingTool.js

Note: Groups that are rotated must not have a Placeholder.