Gojs temporaryLink

@ahmetgundogdu wrote:

temporary Link comes on arrows I want to bring it further
draw, as you see in the gif is moving away

test.gif1342×639 342 KB

I want temporaryLink to be like this.
how do i do it?

Untitled.png793×577 82.5 KB

MY temporaryLink :

this.diagram.toolManager.linkingTool.temporaryLink =
    goMake(go.Link,
        {
            curve: go.Link.Bezier,
            toShortLength: 0.5,
            fromSpot: go.Spot.Right, toSpot: go.Spot.None,
            fromEndSegmentLength: 20, toEndSegmentLength: 50,
        },
        goMake(go.Shape, "RoundedRectangle",
            {
                isPanelMain: true,
                strokeWidth: 1,
                stroke: "#777"
            }
        ),
        goMake(go.Shape, {
            toArrow: "CustomArrowHead",
            strokeWidth: 0,
            fill: "#777"
        })
    )

portTargeted event:

    this.diagram.toolManager.linkingTool.portTargeted = (node: go.Node, port: go.GraphObject, tempNode: go.Node, tempPort: go.GraphObject, toEnd: boolean) => {
        let templink = this.diagram.toolManager.linkingTool.temporaryLink;
        if (!port) {
            templink.fromEndSegmentLength = 20;
            templink.toSpot = go.Spot.None;
        } else {
            templink.fromEndSegmentLength = 50;
            if (port.portId === "L") {
                templink.toSpot = go.Spot.LeftSide;
                templink.toPort.margin = new go.Margin(5);
            } else if (port.portId === "R") {
                templink.toSpot = go.Spot.RightSide;
            } else if (port.portId === "T") {
                templink.toSpot = go.Spot.TopSide;
            } else if (port.portId === "B") {
                templink.toSpot = go.Spot.BottomSide;
            }
        }

        if (port && port.portId && toEnd) {
            this.diagram.nodes.each((other) => {
                if (other && other.data && other.data.key === node.part.data.key) {
                    other.part.findObject("R_H").opacity = .4;
                    other.part.findObject("L_H").opacity = .4;
                    other.part.findObject("T_H").opacity = .4;
                    other.part.findObject("B_H").opacity = .4;
                }
            });
            node.part.findObject(port.portId + "_H").opacity = .8;

            this.lastPortSnap = node;
            this.portId = port.portId + "_H";
        } else {
            this.diagram.nodes.each((other) => {
                if (other && other.data) {
                    other.part.findObject("R_H").opacity = 0;
                    other.part.findObject("L_H").opacity = 0;
                    other.part.findObject("T_H").opacity = 0;
                    other.part.findObject("B_H").opacity = 0;
                }
            });
        }
    }

Posts: 2

Participants: 2

Read full topic