Gojs ResizeAdornment and SelectionAdornment

what is the reason for this space?

How to remove this space ?

I want like this
fw

My Selection Adornment:

const nodeSelectionAdornmentTemplate: any =
    goMake(go.Adornment, "Auto",
        goMake(go.Shape, "RoundedRectangle", { fill: null, stroke: "#dbe9f9", strokeWidth: 1 }),
        goMake(go.Placeholder)
    );

My Resize Adornment :

const nodeResizeAdornmentTemplate =
    goMake(go.Adornment, "Spot",
        { locationSpot: go.Spot.Right },
        goMake(go.Placeholder),
        goMake(go.Shape, "Rectangle", { alignment: go.Spot.TopLeft, cursor: "nw-resize", desiredSize: new go.Size(3, 3), fill: "#fff", strokeWidth: 0.5, stroke: "#72a8e8" }),
        goMake(go.Shape, "Rectangle", { alignment: go.Spot.Top, cursor: "n-resize", desiredSize: new go.Size(3, 3), fill: "#fff", strokeWidth: 0.5, stroke: "#72a8e8" }),
        goMake(go.Shape, "Rectangle", { alignment: go.Spot.TopRight, cursor: "ne-resize", desiredSize: new go.Size(3, 3), fill: "#fff", strokeWidth: 0.5, stroke: "#72a8e8" }),
        goMake(go.Shape, "Rectangle", { alignment: go.Spot.Left, cursor: "w-resize", desiredSize: new go.Size(3, 3), fill: "#fff", strokeWidth: 0.5, stroke: "#72a8e8" }),
        goMake(go.Shape, "Rectangle", { alignment: go.Spot.Right, cursor: "e-resize", desiredSize: new go.Size(3, 3), fill: "#fff", strokeWidth: 0.5, stroke: "#72a8e8" }),
        goMake(go.Shape, "Rectangle", { alignment: go.Spot.BottomLeft, cursor: "se-resize", desiredSize: new go.Size(3, 3), fill: "#fff", strokeWidth: 0.5, stroke: "#72a8e8" }),
        goMake(go.Shape, "Rectangle", { alignment: go.Spot.Bottom, cursor: "s-resize", desiredSize: new go.Size(3, 3), fill: "#fff", strokeWidth: 0.5, stroke: "#72a8e8" }),
        goMake(go.Shape, "Rectangle", { alignment: go.Spot.BottomRight, cursor: "sw-resize", desiredSize: new go.Size(3, 3), fill: "#fff", strokeWidth: 0.5, stroke: "#72a8e8" })
    );

My Template:

this.diagram.nodeTemplateMap.add("", goMake(go.Node, "Spot", {
    zOrder: 5,
    locationObjectName: "Shape",
    locationSpot: go.Spot.Center,
    selectionAdornmentTemplate: nodeSelectionAdornmentTemplate,
    selectionObjectName: "MyShape",
    resizeObjectName: "MyShape",
    rotateObjectName: "MyShape",
    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("MyShape").fill = 'rgba(114,168,232, 0.12)';

        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("MyShape").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", { name: "MyShape", 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()
                ),
                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)
            ),
            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)
            )
        )
    )
));

That is because by default the “Auto” Panel will try to size the main border object to fit around the other contents of the panel. With "RoundedRectangle"s, to avoid overlapping the contents at the corners, this means that the Shape must be bigger. The amount depends on the corner radius.

Please read https://gojs.net/latest/intro/panels.html#AutoPanels and try setting the “RoundedRectangle” Shape’s Shape.spot1 and Shape.spot2 properties to go.Spot.TopLeft and go.Spot.BottomRight, respectively.

I tried your suggestion I got good results but the sizing squares at the corners are not fully seated. How do I solve this

Untitled

My nodeResizeAdornmentTemplate :

const nodeResizeAdornmentTemplate =
    goMake(go.Adornment, "Spot",
        { locationSpot: go.Spot.Right },
        goMake(go.Placeholder),
        goMake(go.Shape, "Rectangle", { alignment: go.Spot.TopLeft, cursor: "nw-resize", desiredSize: new go.Size(3, 3), fill: "#fff", strokeWidth: 0.5, stroke: "#72a8e8" }),
        goMake(go.Shape, "Rectangle", { alignment: go.Spot.Top, cursor: "n-resize", desiredSize: new go.Size(3, 3), fill: "#fff", strokeWidth: 0.5, stroke: "#72a8e8" }),
        goMake(go.Shape, "Rectangle", { alignment: go.Spot.TopRight, cursor: "ne-resize", desiredSize: new go.Size(3, 3), fill: "#fff", strokeWidth: 0.5, stroke: "#72a8e8" }),
        goMake(go.Shape, "Rectangle", { alignment: go.Spot.Left, cursor: "w-resize", desiredSize: new go.Size(3, 3), fill: "#fff", strokeWidth: 0.5, stroke: "#72a8e8" }),
        goMake(go.Shape, "Rectangle", { alignment: go.Spot.Right, cursor: "e-resize", desiredSize: new go.Size(3, 3), fill: "#fff", strokeWidth: 0.5, stroke: "#72a8e8" }),
        goMake(go.Shape, "Rectangle", { alignment: go.Spot.BottomLeft, cursor: "se-resize", desiredSize: new go.Size(3, 3), fill: "#fff", strokeWidth: 0.5, stroke: "#72a8e8" }),
        goMake(go.Shape, "Rectangle", { alignment: go.Spot.Bottom, cursor: "s-resize", desiredSize: new go.Size(3, 3), fill: "#fff", strokeWidth: 0.5, stroke: "#72a8e8" }),
        goMake(go.Shape, "Rectangle", { alignment: go.Spot.BottomRight, cursor: "sw-resize", desiredSize: new go.Size(3, 3), fill: "#fff", strokeWidth: 0.5, stroke: "#72a8e8" })
    );

Same thing – adjust the alignment values.

Do you see Walter rotating and rotating does not affect the shape inside.

alignment values not working.

const nodeSelectionAdornmentTemplate: any =
    goMake(go.Adornment, "Auto",
        goMake(go.Shape, "RoundedRectangle", { spot1: go.Spot.TopLeft, spot2: go.Spot.BottomRight, fill: null, stroke: "#dbe9f9", strokeWidth: 1 }),
        goMake(go.Placeholder)
    );

const nodeResizeAdornmentTemplate =
    goMake(go.Adornment, "Spot",
        { locationSpot: go.Spot.Right },
        goMake(go.Placeholder),
        goMake(go.Shape, "Rectangle", { alignment: new go.Spot(0, 0, 1, 2), cursor: "nw-resize", desiredSize: new go.Size(3, 3), fill: "#fff", strokeWidth: 0.5, stroke: "#72a8e8" }),
        goMake(go.Shape, "Rectangle", { alignment: go.Spot.Top, cursor: "n-resize", desiredSize: new go.Size(3, 3), fill: "#fff", strokeWidth: 0.5, stroke: "#72a8e8" }),
        goMake(go.Shape, "Rectangle", { alignment: new go.Spot(1, 0, -1, 2), cursor: "ne-resize", desiredSize: new go.Size(3, 3), fill: "#fff", strokeWidth: 0.5, stroke: "#72a8e8" }),
        goMake(go.Shape, "Rectangle", { alignment: go.Spot.Left, cursor: "w-resize", desiredSize: new go.Size(3, 3), fill: "#fff", strokeWidth: 0.5, stroke: "#72a8e8" }),
        goMake(go.Shape, "Rectangle", { alignment: go.Spot.Right, cursor: "e-resize", desiredSize: new go.Size(3, 3), fill: "#fff", strokeWidth: 0.5, stroke: "#72a8e8" }),
        goMake(go.Shape, "Rectangle", { alignment: new go.Spot(0, 1, 1, -2), cursor: "se-resize", desiredSize: new go.Size(3, 3), fill: "#fff", strokeWidth: 0.5, stroke: "#72a8e8" }),
        goMake(go.Shape, "Rectangle", { alignment: go.Spot.Bottom, cursor: "s-resize", desiredSize: new go.Size(3, 3), fill: "#fff", strokeWidth: 0.5, stroke: "#72a8e8" }),
        goMake(go.Shape, "Rectangle", { alignment: new go.Spot(1, 1, -1, -2), cursor: "sw-resize", desiredSize: new go.Size(3, 3), fill: "#fff", strokeWidth: 0.5, stroke: "#72a8e8" })
    );

const rotateImage = 'M14.968,10.312c0.575-3.917-1.748-7.643-5.521-8.859C6.752,0.585,3.86,1.195,1.732,3.012l0.24-2.18   c0.039-0.41-0.251-0.782-0.663-0.827C0.897-0.041,0.527,0.256,0.481,0.668L0.006,4.984C-0.022,5.199,0.05,5.408,0.193,5.566   c0.142,0.159,0.345,0.249,0.559,0.249l4.346-0.004C5.5,5.811,5.827,5.496,5.847,5.099c0.001-0.013,0.001-0.025,0.001-0.039   c0-0.414-0.337-0.75-0.751-0.749L2.533,4.314c0.013-0.015,0.019-0.028,0.032-0.043c1.744-1.574,4.169-2.116,6.422-1.39   c2.835,0.913,4.639,3.567,4.539,6.475c-0.052,1.485-0.588,2.929-1.595,4.089c-0.015,0.013-0.027,0.019-0.042,0.033l-0.047-2.563   c-0.008-0.414-0.349-0.744-0.763-0.736c-0.013,0-0.026,0.001-0.039,0.002c-0.396,0.027-0.705,0.36-0.698,0.762l0.079,4.346   c0.004,0.214,0.099,0.415,0.26,0.554c0.161,0.139,0.371,0.208,0.586,0.176l4.306-0.558c0.411-0.053,0.701-0.429,0.647-0.84   c-0.053-0.411-0.431-0.694-0.84-0.647l-2.175,0.282C14.129,13.129,14.746,11.703,14.968,10.312z';

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", cursor: "pointer", geometry: go.Geometry.parse(rotateImage, true), strokeWidth: 0, fill: "#72a8e8", width: 10, height: 10 })
    )
);



getNodeShape() {
    return goMake(go.Panel, "Viewbox",
        {
            cursor: "move",
            background: "transparent",
            padding: 5
        },
        goMake(go.Picture, { desiredSize: new go.Size(58, 58) },
            new go.Binding("source", "", (sourceData, target) => {
                let fileSvg = require('../assets/svg/' + sourceData.typeName + '.svg');
                let color = target.part.data.nodeConfig.color;
                let borderColor = target.part.data.nodeConfig.borderColor;

                if (!color) {
                    color = (this.diagram.model.modelData as IFlowDiagram).configs.nodeConfig.color;
                }
                if (!color) {
                    color = this.props.config.nodeConfig.color;
                }

                if (!borderColor) {
                    borderColor = (this.diagram.model.modelData as IFlowDiagram).configs.nodeConfig.borderColor;
                }
                if (!borderColor) {
                    borderColor = this.props.config.nodeConfig.borderColor;
                }

                fileSvg = fileSvg.replace(new RegExp("fill:currentColor", 'g'), "fill: " + color).replace(new RegExp("fill:strokeColor", 'g'), "fill: " + borderColor);

                return "data:image/svg+xml;base64," + btoa(fileSvg);
            })
        )
    );
}

 this.diagram.nodeTemplateMap.add("", goMake(go.Node, "Spot", {
            zOrder: 5,
            locationObjectName: "Shape",
            locationSpot: go.Spot.Center,
            selectionAdornmentTemplate: nodeSelectionAdornmentTemplate,
            selectionObjectName: "Sami",
            resizeObjectName: "Sami",
            rotateObjectName: "Sami",
            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()
                        )
                    ),
                    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")
                            )
                        )
                    )
                )
            )
        ));

Your earlier code did set Node.rotateObjectName, which you need to do if you want the user to rotate something inside the node rather than the whole node. Perhaps you no longer are setting that property? https://gojs.net/latest/intro/tools.html#RotatingTool

I want the icon inside and the text rotation but I want the icon and resize icons to be in this position.

So I set resizeObjectName, rotateObjectName, selectionObjectName to “Sami”

I want it to be positioned according to the Sami shape, but I want the inside icon to resize and rotate

Isn’t it possible to do this at gojs?

It seems unnatural to me to position the rotation handle relative to something that is not rotating. You can do that using alignment when the angle is zero, Could you please show where the handle should be when the angle is 135 degrees?

Text and image in Shape need to rotate
how do I solve this problem?
Untitled

      $(go.Diagram, . . .,
          { . . .,
            "rotatingTool.handleAngle": -50
          });
      $(go.Node, "Auto",
        {
          locationSpot: go.Spot.Center,
          locationObjectName: "INFO",
          rotatable: true,
          rotateObjectName: "INFO",
          rotateAdornmentTemplate:
            $(go.Adornment, "Spot",
              $(go.Placeholder, { padding: 3 }),
              $(go.Shape, "Circle",
                { alignment: new go.Spot(1, 0, 4, -4), width: 8, height: 8, fill: "red", strokeWidth: 0 })
            )
        },
        $(go.Shape, { fill: "lightblue", }),
        $(go.Panel, "Vertical",
          { name: "INFO" },
          new go.Binding("angle").makeTwoWay(),
          $(go.Shape, "Triangle",
            { fill: "green", strokeWidth: 0, width: 50, height: 50 },
            new go.Binding("fill", "color")),
          $(go.TextBlock,
            { margin: 8 },
            new go.Binding("text"))
        )
      )

Here are two copies of a node using this template. One is at zero degrees, the other is at about 225 degrees.
image