dojo jsPlumb:端点位置错误

bfhwhh0e  于 2022-12-08  发布在  Dojo
关注(0)|答案(1)|浏览(279)

使用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将box放置在innerDiv中,然后向其中添加端点。
请帮我修一下.
错误位置截图

预期结果屏幕截图

fd3cxomn

fd3cxomn1#

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

相关问题