Broken Link in the doNoLink event

@ahmetgundogdu wrote:

test.gif1348×688 443 KB

link breaks in the doNoLink event.
temporaryLink and linkTemplate edited by my previous topic

doNoLink Event:

doNoLink(fromnode?: go.Node, fromport?: go.GraphObject, tonode?: go.Node, toport?: go.GraphObject) {
        setTimeout(() => {

            this.tempLink = {
                from: fromnode.key,
                fromPort: fromport.name.replace("_H", ""),
                linkConfig: {
                    color: "#2b5887",
                    text: "Send"
                } as ILinkConfig
            };

            this.diagram.startTransaction("Add Node Temp");

            this.documentPoint = { x: this.diagram.lastInput.documentPoint.x, y: this.diagram.lastInput.documentPoint.y };
            // Add Node Temp
            let tempData: IFlowItemBase = {
                name: "Product"
            }
            this.setConfigurationDroppedData(tempData);
            tempData.key = LinkDrawnHelperNodeKey;
            tempData.category = "TemporaryNode";
            tempData.nodeConfig.location = {
                x: this.documentPoint.x,
                y: this.documentPoint.y
            }
            this.diagram.model.addNodeData(tempData);
            // Add Node Temp

            // Add Node Link
            let fromPortName = fromport.name.replace("_H", "");
            let toLinkName: string;
            if (fromPortName == 'R') {
                toLinkName = 'L';
            } else if (fromPortName == 'T') {
                toLinkName = 'B';
            } else if (fromPortName == 'L') {
                toLinkName = 'R';
            } else if (fromPortName == 'B') {
                toLinkName = 'T';
            }

            let tempTemporaryLink: any = {
                from: fromnode.key,
                to: LinkDrawnHelperNodeKey,
                fromPort: fromPortName,
                toPort: toLinkName,
                linkConfig: {
                    id: 0,
                    color: "#777"
                } as ILinkConfig
            };
            (this.diagram.model as any).addLinkData(tempTemporaryLink);
            // Add Node Link
            this.setState({ lastLinkFromTypeName: fromnode.data.typeName })
            this.openUnKnownNodeSelector(this.diagram.lastInput.viewPoint.x, this.diagram.lastInput.viewPoint.y);
        }, 100);
    }

TemporaryNode:

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))
        );
    }
    this.diagram.nodeTemplateMap.add("TemporaryNode", goMake(go.Node, "Spot", {
                    selectionAdorned: false,
                    movable: false,
                    locationObjectName: "Shape",
                    locationSpot: go.Spot.Center
                },
                    new go.Binding("location", "", this.bindShapeLocation),
                    goMake(go.Panel, "Spot",
                        goMake(go.Panel, "Spot", {
                            name: "Shape"
                        },
                            goMake(go.Picture, {
                                source: unknownSelectorImage
                            }),
                            new go.Binding("desiredSize", "", this.bindShapeSize).makeTwoWay(this.converterShapeSize),
                        ),
                        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.makePort("B", go.Spot.Bottom, go.Spot.BottomSide, false, true)
                    )
                ));

Link Template:

createLinkTemplate() {

    this.diagram.linkTemplate =
        goMake(go.Link,
            {
                curve: go.Link.Bezier,
                fromEndSegmentLength: 20, toEndSegmentLength: 50
            },
            {
                selectionAdornmentTemplate:
                    goMake(go.Adornment,
                        goMake(go.Shape,
                            { isPanelMain: true, stroke: "dodgerblue", strokeWidth: 1 }),
                        goMake(go.Shape,
                            { toArrow: "CustomArrowHead", fill: "dodgerblue", stroke: null })
                    )
            },
            new go.Binding("points").makeTwoWay(),
            goMake(go.Shape,  // the highlight shape, normally transparent
                {
                    isPanelMain: true,
                    strokeWidth: 2,
                    stroke: "transparent",
                    name: "HIGHLIGHT",
                }),
            goMake(go.Shape, "RoundedRectangle", // the link path shape
                {
                    isPanelMain: true,
                    strokeWidth: 1
                },
                this.makeSubLinkBinding("stroke", "color")
            ),
            goMake(go.Shape,  // the arrowhead
                {
                    toArrow: "CustomArrowHead",
                    strokeWidth: 0
                },
                this.makeSubLinkBinding("fill", "color"),
                this.makeSubLinkBinding("stroke", "color")
            ),
            goMake(go.Panel, "Auto",
                {
                    _isLinkLabel: this.findConfigDiagram("linkConfig", "isDraggableLinkLabel"), visible: false
                },
                goMake(go.Shape, "RoundedRectangle",  // the label background, which becomes transparent around the edges
                    {
                        name: "linkTextBlockBackground"
                    },
                    this.makeSubLinkBinding("fill", "textBackgroundColor"),
                    this.makeSubLinkBinding("stroke", "textBackgroundColor"),
                    this.makeSubLinkBinding("visible", "isShowMouseOver")
                ),

                goMake(go.TextBlock, "transition",  // the label text
                    {
                        name: "linkTextBlock",
                        textAlign: "center",
                        isMultiline: false,
                        font: "6pt sans-serif",
                        margin: new go.Margin(2, 2, 1.41, 2),
                        editable: true,  // enable in-place editing
                    },
                    // editing the text automatically updates the model data
                    this.makeSubLinkBinding("isUnderline", "textIsUnderline"),
                    this.makeSubLinkBinding("stroke", "textColor"),
                    this.makeSubLinkBinding("textAlign", "textAlignment")
                )
            )
        );
    this.diagram.toolManager.linkingTool.temporaryLink =
        goMake(go.Link,
            {
                curve: go.Link.Bezier,
                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"
            })
        )
}

Posts: 1

Participants: 1

Read full topic