Правильная работа svg и ContextMenu

Webix JS
#1

Здравствуйте!
Как красивее организовать работу ContextMenu и картинки в svg формате?
Реализовывал разное содержимое меню в зависимости от типа объекта.
Сделал вот так, но выглядит очень топорно
https://snippet.webix.com/loxjgt0f
Можно ли вызывать контекстное меню не только правым, но и левым кликом?

#2

Здравствуйте, @Roman,

Можно ли вызывать контекстное меню не только правым, но и левым кликом?

Да, можно. Для этого необходимо задать контекст вызова меню и вручную вызвать метод show() - https://snippet.webix.com/ac0es875.

Как красивее организовать работу ContextMenu и картинки в svg формате?

Здесь уже не так однозначно. В любом случае выйдет не очень красиво, т.к. придется обращаться к нативному HTML. В целом, если просто немного подправить, выходит что-то такое: https://snippet.webix.com/n8gkd5g2.

#3

Большое спасибо!
Как потом отследить при обработке события в меню, каким кликом оно было выбрано - левым или правым?

#4

Как потом отследить при обработке события в меню, каким кликом оно было выбрано - левым или правым?

Можно отследить это с помощью контекста вызова:

onBeforeShow: function() {
      var context = this.getContext();
      if (context.which === 1) { //left click
         //do smth
      } else if (context.which === 3) { //right click
         //do smth
      } 
    }

context в данном случае является MouseEvent, с помощью которого можно отследить, какая кнопка была нажата. Ее мы можем получить с помощью context.which. Вот пример: https://snippet.webix.com/wasmk0wn.

Кстати, еще как предложение по улучшению кода, вместо использования spacer для добавления SVG элементов лучше использовать template, т.к. по сути template - это контейнер, в котором можно разместить любые HTML элементы. Также данный компонент имеет отдельные методы для работы с такими элементами. В то время как spacer практически не имеет никакого API, и не предназначен для работы с данными.

Как пример, вот несколько возможных реализация с помощью template:

https://snippet.webix.com/kphfbvki
https://snippet.webix.com/vxgv5ik0

#5

Спасибо! Очень полезно!