Как я могу получить соединитель на вложенном div для прокси в моей группе? - PullRequest
Новая
       17

Как я могу получить соединитель на вложенном div для прокси в моей группе?

0 голосов
/ 04 мая 2019

Я использую 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 контейнер

...