Я пытаюсь добавить класс по нажатию на узел в cytoscape.js. Вот ссылка на полный код:
https://stackblitz.com/edit/angular-kpnys1?file=src%2Fapp%2Fapp.component.ts
функция ngViewAfterInit
cy.on("tap", "node", function(evt) {
var node = evt.target;
console.log("tapped " + node.id());
cy.nodes(node).classes("foo");
});
Tap работает нормально, но не добавляет никаких классов к узлу. Это возможно?
Для этого вам нужно будет использовать правильный метод. В настоящее время ваш код вызывает node.classes(), который удаляет все предыдущие классы узла (вы в основном перезаписываете массив классов узла).
Что вы хотите сделать: используйте node.addClass("foo") и добавьте запись в свою таблицу стилей:
{
selector: ".foo",
css: {
"background-color": "green"
}
}
Точка указывает на класс, но вы можете указать его и дальше. Если вы хотите добавить класс foo только к родительским узлам, измените .foo на :parent.foo.
Но помимо этого, ваш код действительно работал (вроде), класс присутствовал при нажатии на узел. Вот отредактированная версия вашего stackblitz, я добавил упомянутые изменения и дал одному родительскому элементу панель классов. Если вы щелкнете по родительскому элементу, узел изменит цвет фона на зеленый и запишет свои текущие классы в консоль:
userZoomingEnabled: false, в вашем cytoscape.js init. userZoomingEnabled: разрешено ли пользовательским событиям (например, колесу мыши, масштабированию пальцем) увеличивать масштаб графика. Эта опция не влияет на программные изменения масштабирования.
- person Stephan T.; 10.02.2021
