Link margin for "toSide" or "fromSide"

@ahmetgundogdu wrote:

Hello,
I have this diagram

link_margin.png1386×786 117 KB

and this node template:

createNodeTemplates() {
    this.diagram.nodeTemplateMap.add("",
        goMake(go.Node, "Spot",
            {
                avoidableMargin: new go.Margin(10),
                name: "MainNode",
                locationObjectName: "Shape",
                locationSpot: go.Spot.Center,
                selectable: true,
                isPanelMain: true,
                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,
                shadowOffset: new go.Point(0, 0),
                background: "transparent",
                opacity: 1,
                zOrder: 1,



                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);
                    }
                },
                mouseEnter: (e: go.InputEvent, obj: go.GraphObject) => {
                    this.toggleHighlightLinksAndNodes(obj.part.data.key, true);
                },
                mouseLeave: (e: go.InputEvent, obj: go.GraphObject) => {
                    this.toggleHighlightLinksAndNodes(obj.part.data.key, false);
                },
                doubleClick: () => {
                    this.openPropertyInspector();
                },

            },
            new go.Binding("shadowColor", "", this.bindShapeTextBackgroundColor),
            new go.Binding("location", "", this.bindShapeLocation).makeTwoWay(this.converterShapeLocation),
            new go.Binding("isActionable", "", this.bindShapeLock),
            goMake(go.Panel, "Auto",
                goMake(go.Panel, "Vertical",
                    goMake(go.Panel, "Position",
                        {
                            name: "Shape",
                            shadowVisible: false,
                        },
                 
                        goMake(go.Panel, "Viewbox",
                            goMake(go.Panel, "Position", {
                                alignment: new go.Spot(-1, -1),

                            },
                                this.getLockedFigure(lockedSVGPath),
                                this.getLockedFigure(lockedSVGPath2),
                                new go.Binding("visible", "", this.bindShapeLock),

                            ),
                        ),
                        goMake(go.Panel, "Viewbox",
                            {
                                cursor: "move",
                                _isGuideObject: true,
                                padding: new go.Margin(2),
                                fromSpot: go.Spot.AllSides,
                                toSpot: go.Spot.AllSides,
                                portId: "",
                                toLinkable: true,
                                fromLinkableSelfNode: false,
                                fromLinkableDuplicates: true,
                                toLinkableSelfNode: false,
                                toLinkableDuplicates: true,

                            },
                            new go.Binding("cursor", "", (sourceData: IFlowItemBase) => {
                                return this.bindNodeFromLinkable(sourceData) ? "crosshair" : "move";
                            }),

                            new go.Binding("fromLinkable", "", this.bindNodeFromLinkable.bind(this)),
                            new go.Binding("toLinkable", "", this.bindNodeToLinkable.bind(this)),

                            new go.Binding("desiredSize", "", this.bindShapeSize),
                            goMake(go.Panel, "Position",
                                {
                                    itemTemplate:
                                        goMake(go.Panel,
                                            goMake(go.Shape, "RoundedRectangle",
                                                {
                                                    fill: "transparent",
                                                    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)),

                            ),
                        ),

                        new go.Binding("desiredSize", "", this.bindShapeSize).makeTwoWay(this.converterShapeSize),
                        new go.Binding("angle", "", this.bindShapeAngle).makeTwoWay(this.converterShapeAngle),
                    ),
                    goMake(go.Panel, "Horizontal",
                        goMake(go.TextBlock,
                            {
                                name: "textBlock",
                                editable: true,  // editing the text automatically updates the model data
                                shadowVisible: true,
                                stroke: "transparent",
                            },
                            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),
                        )
                    )
                ),

            ),
        )
    );

When you look at the image, you can see that the red link is behind the text.(“Flow Starter 1”)
I want to set the distance of the connection to the starting or ending point (to start from outside of the text)

Posts: 5

Participants: 2

Read full topic