在画布 JointJs 或任何画布几何体的变化中保持元素到位的几何体

问题描述

从折叠/展开 https://resources.jointjs.com/demos/collapsible 的 joinjs 演示中，我想像这个例子一样在折叠/展开后保持点击元素鼠标焦点位置。如您所见，元素似乎没有移动，但画布已无缝移动。还有什么是正确的术语？

崩溃前

崩溃后

我使用的是 Jointjs，而不是 rappid，这是我迄今为止尝试过的。

paper.on('element:expand:pointerdown',function(elementView: joint.dia.ElementView,evt) {
  evt.stopPropagation(); // stop any further actions with the element view (e.g. dragging)
  const model = elementView.model;
  const expanded = model.prop('expanded');
  self.toggle(model,expanded);
});

//This toggle expand/collapse
toggle(cell: joint.dia.Element,expanded: boolean) {
  const self = this;

  const elements = self.canvasGraph.getSuccessors(cell).concat(cell);
  // find all the links between successors and the element
  const subgraph = self.canvasGraph.getSubgraph(elements);
  //hide the successors
  if (expanded) {
    subgraph.forEach((element) => {
      element.attr('./visibility','hidden');
    });
  } else {
    subgraph.forEach((element) => {
      element.attr('./visibility','visible');
    });
  }

  cell.attr('./visibility','visible');

  //do dagre layout
  self._layoutGraph(self.canvasGraph);
}

//Directed graph layout
_layoutGraph(graph) {
  const autoLayoutElements = [];
  graph.getElements().forEach((el) => {

    //make a subgraph of only visible elements
    if (el.attr('./visibility') !== 'hidden') {
      autoLayoutElements.push(el);
    }
  });

  joint.layout.DirectedGraph.layout(graph.getSubgraph(autoLayoutElements),{
    align: 'UR',setVertices: true,setLabels: true,marginX: 50,marginY: 50,rankSep: 200,rankDir: "LR"
  });
}

谢谢

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）