Question

我正在使用 jsPlumb ，并且我一直在尝试让我的组折叠时对嵌套的div连接器进行代理。

我的真实项目中的节点比提供的 jsFiddle 上的节点复杂得多，但我对其进行了简化，因此它只能显示当前问题

如何使这种折叠的东西与嵌套元素一起使用？

我尝试将div手动添加到我的组中，但是它们被拉出了我的节点div，我也尝试过使用组设置，但是没有任何作用

<div id="canvas">

<div id="group">
  <div id="button">
  
  </div>
</div>



<div class="node">
<div class="source"> </div>
</div>

<div class="node">
<div class="source"> </div>
</div>

<div class="node">
<div class="source"> </div>
</div>

</div>

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
  width: 100%;
  height: 100%;
}

#canvas {
  background-color: gray;
  width: 100%;
  height: 100%;
}

#group {
  position: absolute !important;
  width: 400px;
  height: 300px;
  border: 1px solid white;
  background-color: #4b4b4b;
  z-index: 1;
}

.node {
  position: absolute !important;
  left: 450px;
  width: 80px;
  height: 60px;
  border: 1px solid white;
  background-color: #2b2b2b;
  z-index: 2;
}

.source {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 20px;
  height: 20px;
  background-color: red;
  cursor: move;
}

#button {
  position: absolute;
  right: 0;
  width: 20px;
  background-color: blue;
  cursor: pointer;
}

.jtk-connector {
  z-index: 100;
}

let param = {
    source : {
        anchor: ["Right"],
        endpoint: ["Blank", {src: "img/arrow.png", width: 20, height: 20}],
        connector: ["Bezier",{curviness: 50}],
        connectorStyle: {stroke: "#aaaaaa", strokeWidth: 2},
        connectorOverlays: [["Arrow", {location: 1, width: 12, length: 10}]],
    },

    target: {
        anchor: ["Left"],
        endpoint: ["Blank", { width: 5, height: 5}]
    }
}

function initialize() {
    let collapsed = false;
    jsPlumb.setContainer($("#canvas"));

  jsPlumb.draggable($(".node"));
  jsPlumb.draggable($("#group"));

    jsPlumb.makeTarget($(".node"), param.target);
  jsPlumb.makeSource($(".source"), param.source);

  jsPlumb.addGroup({el:$("#group")[0],
                                    anchor:["Left","Right"],
                    proxied:true, 
                    prune:false, 
                    orphan:true, 
                    id:"grp1"});
  $("#button").click(()=>{
    let grp = $("#group");

    collapsed = !collapsed;
    grp.animate(collapsed ? {width: "100px", height: "80px"} : {width: "400px", height: "300px"});
    grp.css("overflow", (collapsed ? "hidden" : "visible"))

    //collapses the group and proxies the connectors to the group
    if (collapsed) {
        jsPlumb.collapseGroup("grp1");
    }
    else {
        jsPlumb.expandGroup("grp1");
    }
  });
}

jsPlumb.ready(initialize)

jsFiddle

折叠后，来自嵌套.source div的连接器应代理到该组，但是现在div仍保持连接状态

（请忽略左侧连接器的不良定位，我无法在 jsFiddle 上使用它，但这不是我当前的问题）

我没有足够的声誉来发布图片，所以这里是链接

输入（https://image.noelshack.com/fichiers/2019/18/6/1556995783-fiddle.png）

输出（https://image.noelshack.com/fichiers/2019/18/6/1556995783-fiddle2.png）

我计划在折叠组时隐藏该div，以便于在大型流程图中阅读，但是现在它只是将连接器链接到我的 jsPlumb 的左上角 strong>容器

如何获得嵌套div上的连接器以代理我的组？

0 个答案: