1

お互いのエンドポイントに接続するネストされた要素を持つチャートをまとめようとしています。この jsFiddleでわかるように、あまりうまくいっていません。JS の全文を以下に示します。

jsPlumb.ready(function () {
    jsPlumb.importDefaults({ ConnectionOverlays: [["Arrow", { location: 1 }]] });
    var pinCount = 0;
    var pin = {
        endpoint: "Dot",
        isSource: true,
        isTarget: true,
        maxConnections: -1,

        paintStyle: {
            strokeStyle: "#1e8151",
            fillStyle: "transparent",
            radius: 7,
            lineWidth: 2
        },
        connectorStyle: {
            lineWidth: 3,
            strokeStyle: "#deea18",
            joinstyle: "round",
            outlineColor: "#eaedef",
            outlineWidth: 0,
            overlays: [
                ["Arrow", {
                    location: 1
                }]
            ]
        },
        connectorHoverStyle: {
            lineWidth: 4,
            strokeStyle: "#5C96BC",
            outlineWidth: 2,
            outlineColor: "white"
        },
        connector: ["StateMachine", {
            stub: [5, 5],
            gap: 10,
            cornerRadius: 5,
            alwaysRespectStubs: true
        }]
    }

    jsPlumb.draggable($(".container"));
    jsPlumb.draggable($(".reactor"), { containment: "parent" });

    function rebalance(part, side) {
        var ends = $.grep(jsPlumb.getEndpoints(part), function (elem, i) {
            return elem.anchor.type == side
        });
        var len = ends.length + 1;
        $.each(ends, function (i, elem) {
            elem.anchor.y = (1 / len) * (i + 1);
        });
        jsPlumb.repaintEverything();
    }

    function addPin(part, side) {
        jsPlumb.addEndpoint(part, pin, { anchor: side, uuid: "pin" + pinCount });
        pinCount++;
        rebalance(part, side);
    }

    var $c = $("#container");
    var $r1 = $("#child1"), $r2 = $("#child2");

    addPin($c, "Left");
    addPin($c, "Right");
    addPin($r1, "Left");
    addPin($r1, "Right");
    addPin($r2, "Left");
    addPin($r2, "Right");

    jsPlumb.connect({uuids: ["pin0", "pin2"]});
    jsPlumb.connect({uuids: ["pin3", "pin4"]});
    jsPlumb.connect({uuids: ["pin5", "pin1"]});
});

のようなピア ノード接続["pin3", "pin4"]は、チャートの一部を移動するまで正常に見えます。それから彼らは爆発します。親/子エンドポイント間の接続は、実際には想定されていることを実行しません。position: absolute;関連するすべての要素からandを削除するとdraggable、中途半端にまずまずのことができますが、a) まだ配置の問題があり、b) これらのプロパティを削除すると目的が無効になります。

一般的なjsPlumbのヒントは歓迎しますが、具体的には、これが適切に整列するのを妨げる何か間違ったことをしていますか? コネクタ/エンドポイントの一部のプロパティを誤用していませんか? ここで発生している配置の問題の回避策はありますか?

4

0 に答える 0