I don’t set or bind it, still adding space why? how to fix this?
Thank you also for your suggestions
My template map:
makePort(name: string, align: any, spot: any, output: any, input: any) {
var horizontal = align.equals(go.Spot.Top) || align.equals(go.Spot.Bottom);
return goMake(go.Shape,
{
fill: "transparent", // changed to a color in the mouseEnter event handler
strokeWidth: 0, // no stroke
width: horizontal ? NaN : 8, // if not stretching horizontally, just 8 wide
height: !horizontal ? NaN : 8, // if not stretching vertically, just 8 tall
alignment: align, // align the port on the main Shape
stretch: (horizontal ? go.GraphObject.Horizontal : go.GraphObject.Vertical),
portId: name, // declare this object to be a "port"
fromSpot: spot, // declare where links may connect at this port
fromLinkable: false, // declare whether the user may draw links from here
toSpot: spot, // declare where links may connect at this port
fromLinkableSelfNode: false,
fromLinkableDuplicates: true,
toLinkableSelfNode: false,
toLinkableDuplicates: true
},
new go.Binding("toLinkable", "", this.bindNodeToLinkable.bind(this))
);
}
makeHelperArrow(name: any, align: any, spot: any, output: any, input: any, imageType: any) {
var horizontal = align.equals(go.Spot.Top) || align.equals(go.Spot.Bottom);
var alignmentFocus = align.opposite();
alignmentFocus.offsetX = 0;
alignmentFocus.offsetY = 0;
alignmentFocus.x = alignmentFocus.x === 1 || alignmentFocus.x === 0 ? alignmentFocus.x : 0.5;
alignmentFocus.y = alignmentFocus.y === 1 || alignmentFocus.y === 0 ? alignmentFocus.y : 0.5;
return goMake(go.Picture, Tools.LinkHelpers[imageType],
{
name: name,
cursor: "copy",
desiredSize: new go.Size(12, 12),
alignment: align,
portId: name,
fromSpot: spot,
toSpot: spot,
toLinkable: false,
opacity: 0,
alignmentFocus: alignmentFocus,
mouseEnter: (e: any, node: any) => {
if (node.name == "L_H") {
this.diagram.toolManager.linkingTool.temporaryLink.fromSpot = go.Spot.LeftSide;
this.diagram.toolManager.linkingTool.temporaryLink.toSpot = go.Spot.RightSide;
} else if (node.name == "R_H") {
this.diagram.toolManager.linkingTool.temporaryLink.fromSpot = go.Spot.RightSide;
this.diagram.toolManager.linkingTool.temporaryLink.toSpot = go.Spot.LeftSide;
} else if (node.name == "T_H") {
this.diagram.toolManager.linkingTool.temporaryLink.fromSpot = go.Spot.TopSide;
this.diagram.toolManager.linkingTool.temporaryLink.toSpot = go.Spot.BottomSide;
} else if (node.name == "B_H") {
this.diagram.toolManager.linkingTool.temporaryLink.fromSpot = go.Spot.BottomSide;
this.diagram.toolManager.linkingTool.temporaryLink.toSpot = go.Spot.TopSide;
}
let fromLinkable = this.bindNodeFromLinkable(node.part.data);
node.cursor = fromLinkable ? "copy" : "default";
var items = ["T_H", "L_H", "R_H", "B_H"];
node.opacity = fromLinkable ? .8 : 0;
for (var i = 0; i <= items.length; i++) {
if (node.name !== items[i]) {
if (node.part.findObject(items[i])) {
node.part.findObject(items[i]).opacity = fromLinkable ? .4 : 0;
}
}
}
}
},
new go.Binding("visible", "", this.bindNodeFromLinkable.bind(this)),
new go.Binding("fromLinkable", "", this.bindNodeFromLinkable.bind(this)),
);
}
bindShapeGeometry(sourceData: IUnifiedShape) {
return go.Geometry.parse(Tools.Shapes[sourceData.shapeKey], true);
}
getNodeShape() {
return goMake(go.Panel, "Viewbox",
{
cursor: "move",
background: "transparent",
padding: 5
},
goMake(go.Panel, "Position",
{
itemTemplate:
goMake(go.Panel,
goMake(go.Shape, "RoundedRectangle",
{
isGeometryPositioned: true,
shadowVisible: false
},
new go.Binding("stroke", "", this.bindPanelItemBorderColor.bind(this)),
new go.Binding("fill", "", this.bindPanelItemColor.bind(this)),
new go.Binding("geometry", "", this.bindShapeGeometry.bind(this)),
new go.Binding("strokeWidth", "", (sourceData: IUnifiedShape) => { return sourceData.stroke ? 2 : 0 })
)
)
},
new go.Binding("itemArray", "", this.bindPanelItemArray.bind(this)),
),
);
}
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) => {
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) => {
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;
}
}
}
},
new go.Binding("shadowColor", "", this.bindShapeTextBackgroundColor),
new go.Binding("location", "", this.bindShapeLocation).makeTwoWay(this.converterShapeLocation),
new go.Binding("isActionable", "", this.bindShapeLock),
goMake(go.Panel, "Vertical",
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",
goMake(go.Panel, "Auto",
goMake(go.Shape, "RoundedRectangle", { fill: "rgba(0, 0, 0, 0.1)", strokeWidth: 0 }),
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)
},
new go.Binding("text", "", this.bindShapeText).makeTwoWay(this.converterShapeText),
//new go.Binding("stroke", "", this.bindShapeTextColor),
//new go.Binding("font", "", this.bindShapeTextFont),
new go.Binding("isUnderline", "", this.bindShapeTextUnderline),
//new go.Binding("background", "", this.bindShapeTextBackgroundColor),
//new go.Binding("textAlign", "", this.bindShapeTextAlignment),
)
),
this.makePort("B", go.Spot.Bottom, go.Spot.BottomSide, false, true),
this.makeHelperArrow("B_H", go.Spot.Bottom, go.Spot.BottomSide, true, false, "imageBottom"),
)
)
));
