context menu

index.html

@@ -87,58 +87,7 @@ <h2 id="result">Answer: 42</h2>
     </div>
 
     <div id="contextMenu">
-        <ul id="ctxUL">
-            <li>test</li>
-            <li>test</li>
-            <li>
-                blaasdasdasd
-                <ul class="dropDownMenu">
-                        <li>
-                            test
-                            <ul class="subDropDownMenu">
-                                <li>ldskjfalskjdf</li>
-                                <li>ldskjfalskjdf</li>
-                                <li>ldskjfalskjdf</li>
-                                <li>ldskjfalskjdf</li>
-                            </ul>
-                        </li>
-                        <li>test3
-                            <ul class="subDropDownMenu">
-                                <li>1falskjdf</li>
-                                <li>2df</li>
-                                <li>3alskjdf</li>
-                                <li>4skjdf</li>
-                            </ul>
-                        </li>
-                        <li>test3
-
-                            <ul class="subDropDownMenu">
-                                <li>1falskjdf</li>
-                                <li>2df</li>
-                                <li>3alskjdf</li>
-                                <li>4skjdf</li>
-                                <li>
-                                    asldfjasldfj
-                                    <ul class="subDropDownMenu">
-                                        <li>1falskjdf</li>
-                                        <li>2df</li>
-                                        <li>3alskjdf</li>
-                                        <li>4skjdfssdfsdfsdfsdf88888
-                                            <ul class="subDropDownMenu">
-                                                <li>1falskjdf</li>
-                                                <li>2df</li>
-                                                <li>3alskjdf</li>
-                                                <li>4skjdf</li>
-                                            </ul>
-                                        </li>
-                                    </ul>
-                                </li>
-                            </ul>
-                        </li>
-
-                </ul></li>
-                <li>testasdasdasd2</li>
-        </ul>
+        <ul id="ctxUL"></ul>
     </div>
 
     <script src="scripts/parallelseries.js" defer></script>
@@ -148,6 +97,7 @@ <h2 id="result">Answer: 42</h2>
     <script src="scripts/scheme.js" defer></script>
 
     <script src="scripts/tool_manager.js" defer></script>
+    <script src="scripts/context_menu.js" defer></script>
     <script src="scripts/connector.js" defer></script>
 
     <script src="scripts/component.js" defer></script>

scripts/context_menu.js

@@ -0,0 +1,158 @@
+class Menu {
+    constructor(text) {
+        this.className = "Menu";
+        this.element = document.createElement("ul"); // element.getBoundingClientRect() -> width && height
+        this.items = [];
+        this.submenus = [];
+        this.parent = null;
+        this.level = 0;
+        this.text = text;
+
+
+    }
+
+    addItem(item) {
+        if (!item) return; 
+
+        item.parent = this;
+
+        if(item.className === "Item") {
+            this.items.push(item);
+
+            this.element.appendChild(item.element);
+        }
+        else if (item.className === "Menu") {
+
+            item.level = this.level + 1;
+
+            item.update();
+
+            let li = document.createElement("li");
+            li.innerText = item.text;
+            li.appendChild(item.element);
+
+            this.element.appendChild(li);
+
+
+
+            this.submenus.push(item);
+        }
+
+    }
+
+    update() {
+        this.element.className = "";
+
+        if (this.level === 1) {
+            this.element.classList.add("dropDownMenu");
+        }
+        else if (this.level > 1) {
+            this.element.classList.add("subDropDownMenu");
+        }
+        for (let i = 0; i < this.submenus.length; ++i) {
+            let m = this.submenus[i];
+            m.level = this.level + 1;
+
+            m.update();
+        }
+    }
+
+    onDelete() {
+        for (let i = 0; i < this.items.length; ++i) {
+            let item = this.items[i];
+            item.onDelete();
+        }
+        for (let i = 0; i < this.submenus.length; ++i) {
+            let submenu = this.submenus[i];
+            submenu.onDelete();
+        }
+        this.items = [];
+        this.submenus = [];
+        this.element.innerHTML = "";
+    }
+
+    getRight() {
+        let right = this.element.getBoundingClientRect().right;
+
+        for (let i = 0; i < this.submenus.length; ++i) {
+            let m = this.submenus[i];
+            let res = m.getRight();
+            if (res) {
+                right = res;
+                break;
+            }
+        }
+        return right;
+    }
+
+    getBottom() {
+        let bottom = this.element.getBoundingClientRect().bottom;
+
+        for (let i = 0; i < this.submenus.length; ++i) {
+            let m = this.submenus[i];
+            let res = m.getBottom();
+            if (res) {
+                bottom = res;
+                break;
+            }
+        }
+        return bottom;
+    }
+
+}
+
+class Item {
+    constructor(txt, cmd) {
+        this.className = "Item";
+        this.parent = null;
+        this.cmd = cmd;
+        this.element = document.createElement('li');
+        this.element.innerText = txt;
+        this.element.addEventListener("click", cmd);
+    }
+
+    onDelete() {
+        this.element.removeEventListener("click", this.cmd);
+    }
+}
+
+
+
+var context_menu = {
+    element: null,
+    main_menu: new Menu(""),
+
+    setPos(x, y) {
+        this.element.style.left = x + "px";
+        this.element.style.top = y + "px";
+    },
+
+    show() {
+        this.element.style.display = "block";
+        this.noIntersect();
+    },
+
+    hide() {
+        this.element.style.display = "none";
+    },
+
+    clear() {
+        this.main_menu.onDelete();
+    },
+
+    noIntersect() {
+        let right = this.main_menu.getRight();
+        let bottom = this.main_menu.getBottom();
+        if (right > canvas.width) {
+            let left = context_menu.element.getBoundingClientRect().left;
+            left -= right - canvas.width;
+            this.element.style.left = left + "px";
+        }
+        if (bottom > canvas.height) {
+            let top = context_menu.element.getBoundingClientRect().top;
+            top -= bottom - canvas.height;
+            this.element.style.top = top + "px";
+        }
+    }
+};
+

scripts/main.js

@@ -3,7 +3,6 @@ const ctx = canvas.getContext('2d');
 canvas.width = window.innerWidth;
 canvas.height = window.innerHeight;
 
-var menu = document.getElementById("contextMenu");
 
 var choosenComponent = {name: "", shortName: "", defaultValue: ""};
 
@@ -13,17 +12,9 @@ var cursor =  {
   touches: null,
   offsetX: 0,
   offsetY: 0,
+  lastTouch: null
 };
 
-menu.addEventListener("click", function(event) {
-  let target = event.target;
-
-  if (target.children.length <= 0) {
-    menu.style.display = "none";
-  }
-
-});
-
 
 window.onload = function() {
   scheme.renderAll();
@@ -46,14 +37,6 @@ window.onload = function() {
     scheme.isMouseHover = true;
   }, false);
 
-
-  canvas.addEventListener("contextmenu", function(event) {
-    event.preventDefault();
-    menu.style.display = "block";
-    menu.style.left = event.clientX + "px";
-    menu.style.top = event.clientY + "px";
-  });
-
 
   window.onresize = function() {
     scheme.offsetX += (window.innerWidth - canvas.width) / 2 / scheme.zoom;
@@ -64,6 +47,29 @@ window.onload = function() {
 
     scheme.renderAll();
   };
+
+  context_menu.element = document.getElementById("contextMenu");
+  context_menu.main_menu.element = document.getElementById("ctxUL");
+
+  context_menu.element.addEventListener("click", function(event) {
+    let target = event.target;
+
+    if (target.children.length <= 0) {
+      context_menu.hide();
+    }
+
+  });
+
+  context_menu.element.addEventListener("mouseover", function(event) {
+    let target = event.target;
+
+    context_menu.noIntersect();
+
+
+  });
+
+
+  canvas.addEventListener("contextmenu", toolmgr.onContextMenu);
 
 
   input.style.height = input.offsetHeight + "px";