单击cytoscape.js平移和z-index /前景元素 [英] cytoscape.js pan and z-index/ foregrounding Elements on Click
问题描述
我一直在使用cytoscape.js，在尝试使用图表时遇到了一些问题。
I've been using cytoscape.js, and I've run into a few issues while trying to use the graphs.
1）有没有办法通过单击并拖动背景进行平移？似乎应该可以，但是我完全无法做到。在某些时候，我可能会添加panzoom，但如果没有这样做也可能会有所帮助。
1) Is there a way to pan by clicking and dragging the background? It seems like it should work, but I've been totally unable to get it to. At some point I'll probably add panzoom, but if it's possible to do it without as well that would be helpful.
这里是 jsfiddle ，其中包含我的代码的简化版本。 zoomEnabled：虚假正常工作，但 panningEnabled：真似乎不正常。
Here's a jsfiddle, which contains a simplified version of my code. The zoomEnabled: false is working properly, but the panningEnabled: true does not seem to be.
2）当涉及将节点彼此层叠时，我遇到了一个问题。
2) I've come across a bit of an issue when it comes to layering nodes on top of each other.
I单击m个前景接地节点，以及之前单击的中间接地节点。因此，当最近单击的节点与任何其他节点重叠时，它应该在顶部。在最近节点之前被单击的节点应该在除前景节点之外的所有节点之上。
I'm "foregrounding" nodes when they're clicked, and "middlegrounding" nodes that have previously been clicked. So when the most recently clicked node overlaps with any other node, it should be on top. Nodes that have been clicked previous to the most recent should be on top of all nodes except for the foregrounded node.
我一直在尝试并且未能使用z-index为此。这是我的点击功能：
I've been attempting and failing to use z-index to accomplish this. Here's my clicking function:
cy.on('tap', 'node', function(e){
var curr_node = e.cyTarget;
var prev_foci = cy.elements('node.focused');
prev_foci.not(curr_node).addClass('less-focused');
if (curr_node.hasClass('less-focused')){ //if it's been middlegrounded, foreground
curr_node.removeClass('less-focused');
}
else { //otherwise, swap between foreground and background
curr_node.toggleClass('focused');
}
});
我的样式如下
.selector('.focused')
.css({
'width' : 200,
'height' : 200,
'background-color' : "#505",
'z-index' : 4,
'border-width' : "2px",
'border-color' : "#999",
})
.selector('.less-focused')
.css({
'background-color' : "#a00",
'z-index' : 3,
}),
这里是 jsfiddle 。
我已经对颜色进行了编码，以便更轻松地了解正在发生的事情上。尽管我相信我的逻辑是正确的（颜色在改变我想要的方式，并且z索引与它们相关联），但是节点的视觉顺序似乎并没有改变。如果将两个节点重叠，则它们默认将子节点置于父节点之上。
I've color coded to make it easier to see what's going on. Though I believe my logic is correct (the colors are switching the way I'd like, and the z-index is tied to them), the visual order of the nodes does not appear to be changing. If you overlay two, they just default to putting the child node on top of the parent.
但是，前景节点的行为就像它们位于其他节点之上一样。当您单击它们时。如果您将两个重叠，然后单击重叠，即使在视觉上位于中间的红色下方，它的行为也就像您单击了前景的紫色节点一样。当您单击并拖动时，它看起来也正是我想要的样子，放开后它就会改变。
However, the foregrounded nodes behave as if they are on top of the other nodes when you click on them. If you overlay two and click the overlap it will behave as if you've clicked the foregrounded purple node, even if it is visually beneath the middlegrounded red. It also looks exactly the way I want it to when you click and drag, it just then changes when you let go.
另一个问题是文本。不管z-index或节点的关系如何，它都会流血。
Another issue is the text. Regardless of z-index or node relationships, it bleeds through.
我希望节点有效地是不透明的，并且不要让其他节点或文本显示出来。
I would like the nodes to effectively be opaque, and not let other nodes or text show through.
我知道z-index仅相对于父级，但是我认为这会起作用，因为它会影响所有其他选定的节点。似乎并非如此。还有其他方法可以做到这一点吗？正如它所说，从功能上讲，它确实可以按我的意愿工作。
I know that z-index is only relative to the parent, but I thought this would work because it's affecting all other selected nodes. It seems that's not the case. Is there some other way to accomplish this? As it said, functionally, it does seem to be working as I want. Just not visually.
非常感谢！
推荐答案
（1 ）按住背景，直到看到活动的声相指示器。您可能还禁用了框选择功能，以使保持延迟更快。
(1) Hold the background until you see the active pan indicator. You may also make box selection disabled to make the hold delay faster.
（2）似乎您已经发现了一个错误。 https://github.com/cytoscape/cytoscape.js/issues/414
(2) It seems you may have found a bug. https://github.com/cytoscape/cytoscape.js/issues/414
这篇关于单击cytoscape.js平移和z-index /前景元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
