端点位置未在 jsPlumb 调整大小中更新

Question

我正在尝试使用 jsPlumb 实现流程图编辑器，这是我第一次使用它。我有一个方形元素（也可以拖动），当我尝试重新调整它的大小时，端点不会移动（参见 1）。我在这里使用 jsPlumb-2.0.7.js。

当我使用 jquery.jsPlumb-1.4.1-all-min.js 时，端点随着元素大小的改变而移动。但是，编辑器中菱形元素的端点存在一些问题（参见 2）。我通过将方形元素旋转 45 度来实现这个菱形元素。

以下是我如何调整元素的大小：

function makeResizable(classname){
    $(classname).resizable({
        resize : function(event, ui) {
            jsPlumb.repaint(ui.helper);
        }
    });
}

这是我的源端点：

var connectorPaintStyle = {
    lineWidth: 4,
    strokeStyle: "#61B7CF",
    joinstyle: "round",
    outlineColor: "white",
    outlineWidth: 2
},
connectorHoverStyle = {
    lineWidth: 4,
    strokeStyle: "#216477",
    outlineWidth: 2,
    outlineColor: "white"
},
endpointHoverStyle = {
    fillStyle: "#216477",
    strokeStyle: "#216477"
},
sourceEndpoint = {
        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,
        maxConnections: -1,
        dragOptions: {},
        overlays: [
            [ "Label", {
                location: [0.5, 1.5],
                label: "Drag",
                cssClass: "endpointSourceLabel",
                visible:false
            } ]
        ]
    };

这是我的目标端点：

targetEndpoint = {
        endpoint: "Dot",
        paintStyle: { fillStyle: "#7AB02C", radius: 11 },
        hoverPaintStyle: endpointHoverStyle,
        maxConnections: -1,
        dropOptions: { hoverClass: "hover", activeClass: "active" },
        isTarget: true,
        overlays: [
            [ "Label", { location: [0.5, -0.5], label: "Drop", cssClass: "endpointTargetLabel", visible:false } ]
        ]
    }

我使用 jsPlumb.addEndpoint() 方法添加端点。我寻求帮助，但找不到合适的答案。任何人都可以为这个问题提供解决方案吗？

Answer 1

我将此作为答案发布，因为它解决了我的问题！我使用了最新版本的 jsPlumb-2.0.7.js 并创建了一个 jsPlumb.

实例

var instance = jsPlumb.getInstance({/*Drag options and connection overlays*/});

然后我用这个 instance 使元素可以拖动和调整大小。

而且，我没有使用 instance.repaint(ui.helper)，而是在可调整大小的函数中使用了 instance.revalidate(ui.helper)。然后它完美地工作了！

端点位置未在 jsPlumb 调整大小中更新

endpoint location not updating in jsPlumb resize

javascript

jquery

jsplumb