在Cytoscape.js中,如何阻止节点在连续布局中移动,但仍然允许用户单击并拖动它们?

时间:2017-08-02 10:25:23

标签: cytoscape.js

这个问题与Unlock nodes on grab/mousedown event, can not move them immediately in Cytoscape.js类似,但请耐心等待。我的情况有一个额外的皱纹,所以接受的答案不适合我;我想使用连续布局。

我正在使用Cytoscape创建交互式图形编辑器。我希望图表能够连续布局,采用基于弹簧的布局,类似于d3的力布局。用户应该能够随时单击并拖动任何节点以手动调整布局,并且在他们放开节点之后,节点的位置应该固定;它应该不再受力布局的影响,它应该保持原样,直到用户再次移动或解锁它。

有关所需行为的示例,请参阅https://apo.adrian-jagusch.de/#/。单击工具栏上的圆形或方形按钮,然后在白色空白区域上单击一次以放置一些节点。然后单击十字准线按钮并尝试拖动周围的节点。您拖动的那些将停止移动,直到您通过双击解锁它们。

我设法设置了一些内容,以便在放开它们时我的节点被锁定。我与上面提到的问题的提问者有共同点的问题是,一旦节点被锁定,就不可能再点击并拖动它们直到它们被解锁。如果我注册了事件处理程序cy.nodes().on('mousedown', (event) => event.target.unlock()),那么当我点击它时节点就会被解锁,但是我无法立即移动它;我必须松开鼠标按钮,然后再次单击以拖动节点。我希望能够在第一次点击时拖动它。

我已经考虑过这个问题的几个解决方案:

  1. 遵循maxkfranz建议仅在布局期间锁定节点并在之后解锁它们,我尝试使用非连续布局(Euler或Cose)并简单地重新运行它以响应&# 34;自由"用户完成拖动节点时触发的事件。我使用了animate:" end"提供视觉过渡。这与我的预期非常相似,但它看起来并不好,并且与之交互感觉不太好。我真的希望布局是连续的。

  2. 我考虑过将连续布局仅应用于用户尚未修复的节点子集,即cy.nodes('[!fixedByUser]').layout({ name: "cola" ...}),停止现有布局并在每次节点获取时实例化新布局由用户修复或不修复。这个想法的问题是,布局不应完全忽略其位置已由用户修复的节点。他们仍然应该对非固定节点施加压力。

  3. 修补可乐布局,使其不更新数据包含属性fixedByUser: true的节点的位置。这似乎是需要经历太多工作的方式。我宁愿只使用支持此功能的库来开始。

  4. 切换到更好地支持我的用例的其他图表库。

  5. 我很感激你对此的想法!

1 个答案:

答案 0 :(得分:0)

如果您不希望某个节点受到布局的影响,请不要使用eles.layout()将其包含在布局中。如果要在布局运行时更改该条件,请停止旧布局并使用新的元素集启动新布局。任何可以无限运行的布局都可以毫无问题地进行替换。