Context menu ES6 class conversion (#161)

* ContextMenu ES6 class conversion

* Fix compat with extensions

src/litegraph.js

@@ -13611,14 +13611,15 @@ const globalExport = {};
      * - ignore_item_callbacks: ignores the callback inside the item, it just calls the options.callback
      * - event: you can pass a MouseEvent, this way the ContextMenu appears in that position
      */
-    function ContextMenu(values, options) {
+    class ContextMenu {
+        constructor(values, options) {
         options = options || {};
         this.options = options;
         var that = this;
 
         //to link a menu with its parent
         if (options.parentMenu) {
-            if (options.parentMenu.constructor !== this.constructor) {
+            if (!(options.parentMenu instanceof ContextMenu)) {
                 console.error(
                     "parentMenu must be of class ContextMenu, ignoring it"
                 );
@@ -13628,6 +13629,9 @@ const globalExport = {};
                 this.parentMenu.lock = true;
                 this.parentMenu.current_submenu = this;
             }
+            if (options.parentMenu.options?.className === "dark") {
+                options.className = "dark"
+            }
         }
 
         var eventClass = null;
@@ -13635,8 +13639,7 @@ const globalExport = {};
             eventClass = options.event.constructor.name;
         if (eventClass !== "MouseEvent" &&
             eventClass !== "CustomEvent" &&
-			eventClass !== "PointerEvent"
-        ) {
+            eventClass !== "PointerEvent") {
             console.error(
                 "Event passed to ContextMenu is not of type MouseEvent or CustomEvent. Ignoring it. (" + eventClass + ")"
             );
@@ -13655,6 +13658,7 @@ const globalExport = {};
             root.style.pointerEvents = "auto";
         }, 100); //delay so the mouse up event is not caught by this element
 
+
         //this prevents the default context browser menu to open in case this menu was created when pressing right button
         LiteGraph.pointerListenerAdd(root, "up",
             function (e) {
@@ -13738,7 +13742,6 @@ const globalExport = {};
             root.closing_timer = setTimeout(that.close.bind(that, e), 500);
             //that.close(e);
         });*/
-
         LiteGraph.pointerListenerAdd(root, "enter", function (e) {
             //console.log("pointerevents: ContextMenu enter");
             if (root.closing_timer) {
@@ -13758,6 +13761,7 @@ const globalExport = {};
 
         if (root_document.fullscreenElement)
             root_document.fullscreenElement.appendChild(root);
+
         else
             root_document.body.appendChild(root);
 
@@ -13797,7 +13801,7 @@ const globalExport = {};
         }
     }
 
-    ContextMenu.prototype.addItem = function(name, value, options) {
+    addItem(name, value, options) {
         var that = this;
         options = options || {};
 
@@ -13897,11 +13901,9 @@ const globalExport = {};
 
             //special cases
             if (value) {
-                if (
-                    value.callback &&
+                if (value.callback &&
                     !options.ignore_item_callbacks &&
-                    value.disabled !== true
-                ) {
+                    value.disabled !== true) {
                     //item callback
                     var r = value.callback.call(
                         this,
@@ -13923,8 +13925,7 @@ const globalExport = {};
                         callback: value.submenu.callback,
                         event: e,
                         parentMenu: that,
-                        ignore_item_callbacks:
-                            value.submenu.ignore_item_callbacks,
+                        ignore_item_callbacks: value.submenu.ignore_item_callbacks,
                         title: value.submenu.title,
                         extra: value.submenu.extra,
                         autoopen: options.autoopen
@@ -13939,9 +13940,9 @@ const globalExport = {};
         }
 
         return element;
-    };
+    }
 
-    ContextMenu.prototype.close = function(e, ignore_parent_menu) {
+    close(e, ignore_parent_menu) {
         if (this.root.parentNode) {
             this.root.parentNode.removeChild(this.root);
         }
@@ -13950,10 +13951,8 @@ const globalExport = {};
             this.parentMenu.current_submenu = null;
             if (e === undefined) {
                 this.parentMenu.close();
-            } else if (
-                e &&
-                !ContextMenu.isCursorOverElement(e, this.parentMenu.root)
-            ) {
+            } else if (e &&
+                !ContextMenu.isCursorOverElement(e, this.parentMenu.root)) {
                 ContextMenu.trigger(this.parentMenu.root, LiteGraph.pointerevents_method + "leave", e);
             }
         }
@@ -13967,10 +13966,10 @@ const globalExport = {};
 
         // TODO implement : LiteGraph.contextMenuClosed(); :: keep track of opened / closed / current ContextMenu
         // on key press, allow filtering/selecting the context menu elements
-    };
+    }
 
     //this code is used to trigger events easily (used in the context menu mouseleave
-    ContextMenu.trigger = function(element, event_name, params, origin) {
+    static trigger(element, event_name, params, origin) {
         var evt = document.createEvent("CustomEvent");
         evt.initCustomEvent(event_name, true, true, params); //canBubble, cancelable, detail
         evt.srcElement = origin;
@@ -13981,24 +13980,24 @@ const globalExport = {};
         }
         //else nothing seems binded here so nothing to do
         return evt;
-    };
+    }
 
     //returns the top most menu
-    ContextMenu.prototype.getTopMenu = function() {
+    getTopMenu() {
         if (this.options.parentMenu) {
             return this.options.parentMenu.getTopMenu();
         }
         return this;
-    };
+    }
 
-    ContextMenu.prototype.getFirstEvent = function() {
+    getFirstEvent() {
         if (this.options.parentMenu) {
             return this.options.parentMenu.getFirstEvent();
         }
         return this.options.event;
-    };
+    }
 
-    ContextMenu.isCursorOverElement = function(event, element) {
+    static isCursorOverElement(event, element) {
         var left = event.clientX;
         var top = event.clientY;
         var rect = element.getBoundingClientRect();
@@ -14014,7 +14013,8 @@ const globalExport = {};
             return true;
         }
         return false;
-    };
+    }
+    }
 
     LiteGraph.ContextMenu = ContextMenu;