Gojs rotate object

GoJS
1

I want to show the rotate icon where I marked it, but I want it to rotate the inside icon.

How can I do that?

Untitled

My template:

this.diagram.nodeTemplateMap.add("", goMake(go.Node, "Spot", {
            zOrder: 5,
            locationObjectName: "Shape",
            locationSpot: go.Spot.Center,
            selectionAdornmentTemplate: nodeSelectionAdornmentTemplate,
            selectionObjectName: "Shape",
            resizeObjectName: "Shape",
            rotateObjectName: "Shape",
            resizeAdornmentTemplate: nodeResizeAdornmentTemplate,
            resizable: this.props.config.nodeConfig.resizable,
            rotatable: true,
            rotateAdornmentTemplate: nodeRotateAdornmentTemplate,
            isShadowed: true,
            shadowVisible: false,
            shadowBlur: 10,
            background: "transparent",
            shadowOffset: new go.Point(0, 0),
            click: (e: go.InputEvent, obj: go.GraphObject) => {
                if (obj && obj.part && obj.part.data && obj.part.data.nodeConfig && obj.part.data.nodeConfig.isLock) {
                    this.diagram.select(obj.part);
                }
            },
            doubleClick: () => {
                this.openPropertyInspector();
            },
            mouseEnter: (e: go.InputEvent, node: go.Node) => {
                (node as any).findObject("RotateIcon").fill = 'rgba(114,168,232, 0.12)';
            },
            mouseLeave: (e, node) => {

                (node as any).findObject("RotateIcon").fill = 'transparent';

            }
        },
            this.makeSubNodeBinding("shadowColor", "textBackgroundColor"),
            new go.Binding("location", "", this.bindShapeLocation).makeTwoWay(this.converterShapeLocation),
            this.makeSubNodeBinding("isActionable", "isLock"),
            goMake(go.Panel, "Auto",
                goMake(go.Shape, "RoundedRectangle", { name: "RotateIcon", fill: "transparent", strokeWidth: 0 }),
                goMake(go.Panel, "Vertical", { margin: new go.Margin(0, 0, 0, 0) },
                    goMake(go.Panel, "Spot",
                        goMake(go.Panel, "Spot",
                            {
                                shadowVisible: false,
                                name: "Shape"
                            },
                            new go.Binding("desiredSize", "", this.bindShapeSize).makeTwoWay(this.converterShapeSize),
                            new go.Binding("angle", "", this.bindShapeAngle).makeTwoWay(this.converterShapeAngle),
                            this.getNodeShape()
                        )
                    ),
                    goMake(go.Panel, "Spot", { margin: new go.Margin(2.5, 0, 0, 0) },
                        goMake(go.Panel, "Auto",
                            goMake(go.Shape, "RoundedRectangle", { fill: "rgba(0, 0, 0, 0.05)", strokeWidth: 0 },
                                this.makeSubNodeBinding("fill", "textBackgroundColor"),
                            ),
                            goMake(go.TextBlock,
                                {
                                    editable: true,
                                    stroke: "black",
                                    font: "6pt sans-serif",
                                    verticalAlignment: go.Spot.Center,
                                    alignment: go.Spot.Center,
                                    margin: new go.Margin(1, 5, 0, 5),
                                    background: "transparent"
                                },
                                new go.Binding("text", "", this.bindShapeText).makeTwoWay(this.converterShapeText),
                                new go.Binding("font", "", this.bindShapeTextFont),
                                this.makeSubNodeBinding("textAlign", "textAlignment"),
                                this.makeSubNodeBinding("isUnderline", "textIsUnderline"),
                                this.makeSubNodeBinding("stroke", "textColor")
                            )
                        )
                    )
                )
            )
        ));
2

I don’t see your Part.rotateAdornmentTemplate.

If I understand you correctly, I think you want to do something like:

    myDiagram.nodeTemplate =
      $(go.Node, "Auto",
        {
          rotatable: true,
          rotateObjectName: "TB",
          rotateAdornmentTemplate:
            $(go.Adornment, "Spot",
              $(go.Placeholder, { padding: 3 }),
              $(go.Shape, "Circle", { alignment: go.Spot.TopRight, width: 8, height: 8, fill: "red", strokeWidth: 0 })
            )
        },
        $(go.Shape,
          { fill: "white", portId: "" },
          new go.Binding("fill", "color")),
        $(go.TextBlock,
          { name: "TB", margin: 8, background: "lime" },
          new go.Binding("text"))
      );
3

My rotateAdornmentTemplate

var nodeRotateAdornmentTemplate = goMake(go.Adornment,
    { locationSpot: go.Spot.Center, locationObjectName: "CIRCLE" },
    goMake(go.Panel, "Auto", { cursor: "pointer", stretch: go.GraphObject.Fill, background: "transparent" },
        goMake(go.Shape, { name: "CIRCLE", alignment: go.Spot.TopRight, cursor: "pointer", geometry: go.Geometry.parse(rotateImage, true), strokeWidth: 0, fill: "#72a8e8", width: 10, height: 10 })
    )
);

I try set alignment but something like that happened.

Untitled
Untitled.png770×400 23.2 KB

I want the rotate icon on the top right outside. I don’t want him in there.
Like thisfw

My template:

this.diagram.nodeTemplateMap.add("", goMake(go.Node, "Spot", {
            zOrder: 5,
            locationObjectName: "Shape",
            locationSpot: go.Spot.Center,
            selectionAdornmentTemplate: nodeSelectionAdornmentTemplate,
            selectionObjectName: "Sami",
            resizeObjectName: "Sami",
            rotateObjectName: "Shape",
            resizeAdornmentTemplate: nodeResizeAdornmentTemplate,
            resizable: this.props.config.nodeConfig.resizable,
            rotatable: true,
            rotateAdornmentTemplate: nodeRotateAdornmentTemplate,
            isShadowed: true,
            shadowVisible: false,
            shadowBlur: 10,
            background: "transparent",
            shadowOffset: new go.Point(0, 0),
            click: (e: go.InputEvent, obj: go.GraphObject) => {
                if (obj && obj.part && obj.part.data && obj.part.data.nodeConfig && obj.part.data.nodeConfig.isLock) {
                    this.diagram.select(obj.part);
                }
            },
            doubleClick: () => {
                this.openPropertyInspector();
            },
            mouseEnter: (e: go.InputEvent, node: go.Node) => {

                (node as any).findObject("Sami").fill = 'rgba(114,168,232, 0.15)';

                let fromLinkable = this.bindNodeFromLinkable(node.data);

                let items = ["T_H", "L_H", "R_H", "B_H"];
                for (let i = 0; i <= items.length; i++) {
                    if (node.part.findObject(items[i])) {
                        node.part.findObject(items[i]).opacity = fromLinkable ? .4 : 0;
                    }
                }
                this.toggleHighlightLinksAndNodes(node.part.data.key, true);
            },
            mouseLeave: (e, node) => {

                if (!(node as any).isSelected) {
                    (node as any).findObject("Sami").fill = 'transparent';
                }

                let items = ["T_H", "L_H", "R_H", "B_H"];
                for (let i = 0; i <= items.length; i++) {
                    if (node.part.findObject(items[i])) {
                        node.part.findObject(items[i]).opacity = 0;
                    }
                }
            }
        },
            this.makeSubNodeBinding("shadowColor", "textBackgroundColor"),
            new go.Binding("location", "", this.bindShapeLocation).makeTwoWay(this.converterShapeLocation),
            this.makeSubNodeBinding("isActionable", "isLock"),
            goMake(go.Panel, "Auto",
                goMake(go.Shape, "RoundedRectangle", { spot1: go.Spot.TopLeft, spot2: go.Spot.BottomRight, name: "Sami", fill: "transparent", strokeWidth: 0 }),
                goMake(go.Panel, "Vertical", { margin: new go.Margin(5) },
                    goMake(go.Panel, "Spot",
                        goMake(go.Panel, "Spot",
                            {
                                shadowVisible: false,
                                name: "Shape"
                            },
                            new go.Binding("desiredSize", "", this.bindShapeSize).makeTwoWay(this.converterShapeSize),
                            new go.Binding("angle", "", this.bindShapeAngle).makeTwoWay(this.converterShapeAngle),
                            this.getNodeShape()
                        ),
                        this.makePort("T", go.Spot.Top, go.Spot.TopSide, false, true),
                        this.makePort("L", go.Spot.Left, go.Spot.LeftSide, false, true),
                        this.makePort("R", go.Spot.Right, go.Spot.RightSide, false, true),
                        //this.makeHelperArrow("T_H", go.Spot.Top, go.Spot.TopSide, false, true, "imageTop"),
                        //this.makeHelperArrow("L_H", go.Spot.Left, go.Spot.LeftSide, true, true, "imageLeft"),
                        //this.makeHelperArrow("R_H", go.Spot.Right, go.Spot.RightSide, true, true, "imageRight")
                    ),
                    goMake(go.Panel, "Spot", { margin: new go.Margin(2.5, 0, 0, 0) },
                        goMake(go.Panel, "Auto",
                            goMake(go.Shape, "RoundedRectangle", { fill: "rgba(0, 0, 0, 0.05)", strokeWidth: 0 },
                                this.makeSubNodeBinding("fill", "textBackgroundColor"),
                            ),
                            goMake(go.TextBlock,
                                {
                                    editable: true,
                                    stroke: "black",
                                    font: "6pt sans-serif",
                                    verticalAlignment: go.Spot.Center,
                                    alignment: go.Spot.Center,
                                    margin: new go.Margin(1, 5, 0, 5),
                                    background: "transparent"
                                },
                                new go.Binding("text", "", this.bindShapeText).makeTwoWay(this.converterShapeText),
                                new go.Binding("font", "", this.bindShapeTextFont),
                                this.makeSubNodeBinding("textAlign", "textAlignment"),
                                this.makeSubNodeBinding("isUnderline", "textIsUnderline"),
                                this.makeSubNodeBinding("stroke", "textColor")
                            )
                        ),
                        this.makePort("B", go.Spot.Bottom, go.Spot.BottomSide, false, true),
                        //this.makeHelperArrow("B_H", go.Spot.Bottom, go.Spot.BottomSide, true, false, "imageBottom"),
                    )
                )
            )
        ));
4

I still don’t see your nodeRotateAdornmentTemplate. No matter – you have the right idea. Adjust the alignment of the handle to be where you want it to be relative to the “Shape”.

5 
var nodeRotateAdornmentTemplate = goMake(go.Adornment,
    { locationSpot: go.Spot.Center, locationObjectName: "CIRCLE" },
    goMake(go.Panel, "Auto", { cursor: "pointer", stretch: go.GraphObject.Fill, background: "transparent" },
        goMake(go.Shape, { name: "CIRCLE", alignment: go.Spot.TopRight, cursor: "pointer", geometry: go.Geometry.parse(rotateImage, true), strokeWidth: 0, fill: "#72a8e8", width: 10, height: 10 })
    )
);

I do, but I can’t get results. Could you please show me the code?

6

Change the alignment to be what you want. Maybe new go.Spot(1, 0, 20, -20) or something.