Gojs ResizeAdornment and SelectionAdornment

@ahmetgundogdu wrote:

what is the reason for this space?

How to remove this space ?

Untitled.png586×620 23.2 KB

I want like this

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)
            )
        )
    )
));

Posts: 1

Participants: 1

Read full topic