cytoscape.js pan and z-index/ foregrounding Elements on Click

问题

I've been using cytoscape.js, and I've run into a few issues while trying to use the graphs.

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.

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) I've come across a bit of an issue when it comes to layering nodes on top of each other.

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.

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');
    }
});

My styles look like

.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,
  }),

Here's a jsfiddle.

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.

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.

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.

Thanks very much!

回答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) It seems you may have found a bug. https://github.com/cytoscape/cytoscape.js/issues/414

来源：https://stackoverflow.com/questions/21296927/cytoscape-js-pan-and-z-index-foregrounding-elements-on-click

标签

javascript

z-index

cytoscape.js