Link margin for "toSide" or "fromSide"

ahmetgundogdu · August 20, 2019, 1:50pm

Hello,
I have this diagram

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)

walter · August 20, 2019, 2:38pm

There are several possible answers to your question, depending on the effects that you want. The most general is to make the whole node the port, so that links connecting with the bottom of the node will start or end at the bottom of the TextBlock.

If you don’t mind some criticism, I’d like to point out some problems.

First, please run with go-debug.js while developing, so that you can catch some of the errors in the Output window of the debugger.

new go.Spot(-1, -1) is quite invalid. Using go-debug.js will catch such errors.

You have a bunch of Panels that seem completely unnecessary. In general a Panel should hold at least two elements, although “Viewbox” is an exception. Why have an “Auto” Panel surrounding only a “Vertical” Panel? What’s the point of a “Horizontal” Panel holding a single TextBlock?

Minor issues include unnecessary settings on the Node of name: "MainNode", selectable: true, isPanelMain: true, opacity: 1, and zOrder: 1.

Having all of the Bindings use an empty string as the source is suspicious. I suspect it is at least a lot slower than it needs to be. Maybe you should read about sub-bindings at Binding to a property of a property.

Binding isActionable seems suspicious to me. What are you trying to accomplish by setting isActionable?

A bunch more of the Bindings seem unnecessary, too, but that’s just my guess.

Setting stroke: "transparent" on the TextBlock also seems suspicious to me – it’s odd to have the text not be seen unless the Binding gives it a stroke color.

ahmetgundogdu · August 21, 2019, 6:35am

These are some of the trials during development.
The simplest solution is to weld the entire node.
But when I do this, there is a lot of space left and right in long texts.
I just want to adjust the space below without disturbing the current image

ahmetgundogdu · August 21, 2019, 7:01am

Thank you for mentioning the mistakes you’ve seen

In a topic I opened earlier, I thought that the vertical panel expanded only vertically and the horizontal panel expanded only horizontally.

If you remove the horizontal panel from this templated textblock will not appear for long text. The vertical panel takes the length of the first shape and use default width itself to it. Or so I think.
The unnecessary panel in the viewbox is used to draw two different svg tracks on top of each other. The viewbox outside is also intended to allow the object to grow in scale when enlarged.
The purpose of using the “isActionable” binding is to lock the object. Although some of the “gojs” default tools continue to work in my audience, I fix them manually.
The remainder is experimented and undeleted feature assignments.

I also couldn’t find how to use the debug library when using npm. Is there an example of this or should I replace the go.js file in my local files with the debug file?

walter · August 21, 2019, 8:39am

Another solution would be to set the TextBlock.background to be “white” (or whatever your diagram Div background is) and the Link.layerName to be “Background”. That way the text is always in front of the links and the opaque background avoids any link paths from obscuring the text.

ahmetgundogdu · August 21, 2019, 10:28am

It’s not something I want to give the text box a background color. Because then the header at the destination of the link is left behind the text, and we can’t figure out where it went from.
I tried the Layer example, but what I wanted was still not there. Isn’t there a simple way to leave a space between the start and end points of the links?

walter · August 21, 2019, 10:46am

You could try setting fromShortLength and toShortLength. But such properties apply independent of the connection angle.

ahmetgundogdu · August 21, 2019, 12:50pm

This setting rests on the node and contains a single value for all links that are linked to it. This doesn’t solve our business.
Is there a different method?
We can also change the structure of the node template if necessary.
Although I have changed the layout structures many times before, I could not reach the desired result.

walter · August 21, 2019, 1:50pm

Well, I have given you three different possible solutions. In retrospect, I think my second one is best (making the labels opaque and having all links in a Layer behind the Layer with the nodes).