jsPlumb：端点错误的位置

Posted 2023-02-16

【中文标题】jsPlumb：端点错误的位置

【英文标题】：jsPlumb: Endpoints wrong position

【发布时间】：2016-05-13 14:05:39

【问题描述】：

使用 Dojo，我以编程方式创建盒子并将其放置在主 div 的内部 div 中，放置盒子后我使用 addEndpoint() 将端点添加到我的盒子，问题是端点没有放置在正确的位置. 这是我的代码

<div data-dojo-attach-point="containerNode" class="divCenter navEditorDiv" style="">
<button data-dojo-attach-event="onClick: showPopOut" data-dojo-attach-point="createNode"
        class="btn  btn-primary fa fa-plus-square position" style=""></button>

<div data-dojo-attach-point="navigationNode"></div> </div>

以上代码是我的 html

jsplumbInstance: function () 
        if (!this._instance) 
            this._instance = jsPlumb.getInstance(
                // default drag options
                DragOptions: cursor: 'pointer', zIndex: 2000,
                // the overlays to decorate each connection with.  note that the label overlay uses a function to generate the label text; in this
                // case it returns the 'labelText' member that we set on each connection in the 'init' method below.
                ConnectionOverlays: [
                    ["Arrow", 
                        location: 1,
                        visible: true,
                        id: "ARROW",
                        /* events:
                         click:function()  alert("you clicked on the arrow overlay")
                         */
                    ],
                    ["Label", 
                        location: 0.8,
                        id: "label",
                        cssClass: "aLabel fa fa-times",
                        /*events:
                         tap:function()  jsPlumb.remove("label");
                         */
                    ]
                ],

               Container: this.navigationNode
            );

        
        return this._instance;
    ,

以上代码是我的 jsPlumb 实例，其中“Container”设置为 innerDiv dojo 附加点

 leftEndPoints: function () 
        connectorPaintStyle = 
            lineWidth: 4,
            strokeStyle: "#61B7CF",
            joinstyle: "round",
            outlineColor: "white",
            outlineWidth: 2
        ,
            // .. and this is the hover style.
            connectorHoverStyle = 
                lineWidth: 4,
                strokeStyle: "#216477",
                outlineWidth: 2,
                outlineColor: "white"
            ,
            endpointHoverStyle = 
                fillStyle: "#216477",
                strokeStyle: "#216477"
            ;
        var sourceEndpoint = 
            anchor: "RightMiddle",
            endpoint: "Dot",
            paintStyle: 
                strokeStyle: "#7AB02C",
                fillStyle: "transparent",
                radius: 7,
                lineWidth: 3
            ,
            isSource: true,
            connector: ["Flowchart", stub: [40, 60], gap: 10, cornerRadius: 5, alwaysRespectStubs: true],
            connectorStyle: connectorPaintStyle,
            hoverPaintStyle: endpointHoverStyle,
            connectorHoverStyle: connectorHoverStyle,
            deleteEndpointsOnDetach: false,
            dragOptions: ,
            maxConnections: -1,
            overlays: [
                ["Label", 
                    location: [0.5, 1.5],
                    label: "Drag",
                    cssClass: "endpointSourceLabel",
                    visible: false
                ]
            ],
        ;
        return sourceEndpoint;
    ,

以上代码是我的 jsPlumb 端点

domConstruct.place(rootWidget.boxNode, that.navigationNode);
that.jsplumbInstance().addEndpoint(rootWidget.boxNode,that.leftEndPoints());

使用 Dojo domConstruct.place 我将框放置在 innerDiv 中，并在放置后添加端点。

请帮我解决它。

错误位置的截图

预期结果截图

【参考方案1】：

您可以为父容器设置样式 position: absolute; 来解决这个问题。

【讨论】：

就我而言，我没有通过 jsplumb setContainer 设置任何容器。只需设置容器即可解决问题。