what is the reason for this space?
How to remove this space ?
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)
)
)
)
));
