cytoscape.js pan and z-index/foregrounding Элементы на клике

Question

Я использую cytoscape.js, и я столкнулся с несколькими проблемами при попытке использовать графики.

1) Есть ли способ панорамирования, щелкнув и перетащив фон? Похоже, он должен работать, но я не смог его полностью понять. В какой-то момент я, вероятно, добавлю panzoom, но если это возможно сделать, это не поможет.

Вот jsfiddle, который содержит упрощенную версию моего кода. zoomEnabled: false работает нормально, но panningEnabled: true не выглядит.

2) Я столкнулся с проблемой, когда дело доходит до наложения узлов друг на друга.

Я нахожусь на «ориентированных» узлах, когда они нажимаются, и узлы «middlegrounding», которые ранее были нажаты. Поэтому, когда самый последний щелкнутый узел перекрывается с любым другим узлом, он должен быть сверху. Узлы, которые были нажаты до последнего, должны быть на вершине всех узлов, за исключением узла переднего плана.

Я пытался и не использовал z-index для выполнения этого. Вот моя функция щелкающий:

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-индекс привязан к ним), визуальный порядок узлов не меняется. Если вы накладываете два, они просто по умолчанию ставят дочерний узел поверх родителя.

Однако передние узлы ведут себя так, как если бы они находились поверх других узлов, когда вы нажимаете на них. Если вы наложите двойку и щелкните по перекрытию, она будет вести себя так, как если бы вы нажмете на передний край фиолетового узла, даже если он визуально находится под серединой красного цвета. Он также выглядит так, как я хочу, когда вы нажимаете и перетаскиваете его, а затем меняются, когда отпускаете.

Другой вопрос - это текст. Независимо от отношений z-index или node, он истекает кровью.

Я хотел бы, чтобы узлы эффективно были непрозрачными и не пропускали другие узлы или текст.

Я знаю, что z-индекс относится только к родительскому, но я думал, что это сработает, потому что оно влияет на все остальные выбранные узлы. Кажется, это не так. Есть ли другой способ сделать это? Как он сказал, функционально, похоже, он работает так, как я хочу. Просто не визуально.

Большое спасибо!

Answer 1

(1) Держите фон, пока не увидите индикатор активной панорамы. Вы также можете отключить выбор блока, чтобы ускорить задержку.

(2) Кажется, вы нашли ошибку. https://github.com/cytoscape/cytoscape.js/issues/414