Fixed indexing error, changed mouse events

src/components/Graph.vue

@@ -3,7 +3,7 @@
     class="render-area"
     ref="renderer"
     @dblclick="createNode"
-    @click="deactivateAllNodes"
+    @click.left.stop="unselectAllNodes"
   >
     <g>
       <line
@@ -15,23 +15,23 @@
         :x2="nodes[link.target].x"
         :y2="nodes[link.target].y"
         :class="{ 'line-active': link.selected }"
-      />
+        @click.right.stop.prevent="removeLink(idx)"
+      ></line>
     </g>
     <g>
       <circle
         class="node-default"
-        r="25"
+        :r="RADIUS"
         v-for="(node, idx) in nodes"
         :key="idx"
         :cx="node.x"
         :cy="node.y"
         :class="{ 'node-active': node.selected }"
-        @dblclick.prevent="createNode"
-        @click.right.prevent="removeNode(idx)"
+        @click.right.stop.prevent="removeNode(idx)"
         @click.left.stop="selectNode(idx)"
         @mousedown="dragNode($event, idx)"
-        @mouseup="dropNode()"
-      />
+        @mouseup="dropNode"
+      ></circle>
     </g>
     <g>
       <text
@@ -45,10 +45,13 @@
       </text>
     </g>
   </svg>
+  <!-- <path d="M591,451 C291,300 891,300 591,451" stroke="black" fill="transparent" style="
+    stroke-width: 4px;
+"></path> -->
 </template>
 
 <script>
-import { ref, watch } from "vue";
+import { ref } from "vue";
 import Linker from "./core/linker";
 import EulerCycle from "./core/euler";
 
@@ -80,27 +83,27 @@ export default {
     const euler = new EulerCycle();
 
     // Watchers
-    watch(
-      () => props.stepData,
-      (sd) => {
-        nodes.value.forEach((e) => {
-          e.selected = false;
-        });
+    // watch(
+    //   () => props.stepData,
+    //   (sd) => {
+    //     nodes.value.forEach((e) => {
+    //       e.selected = false;
+    //     });
 
-        links.value.forEach((e) => {
-          e.selected = false;
-        });
+    //     links.value.forEach((e) => {
+    //       e.selected = false;
+    //     });
 
-        if (Object.keys(sd).length !== 0) {
-          nodes.value[sd.source].selected = true;
-          nodes.value[sd.target].selected = true;
-          links.value.forEach((e) => {
-            if (e.source === sd.source && e.target === sd.target)
-              e.selected = true;
-          });
-        }
-      }
-    );
+    //     if (Object.keys(sd).length !== 0) {
+    //       nodes.value[sd.source].selected = true;
+    //       nodes.value[sd.target].selected = true;
+    //       links.value.forEach((e) => {
+    //         if (e.source === sd.source && e.target === sd.target)
+    //           e.selected = true;
+    //       });
+    //     }
+    //   }
+    // );
 
     // Methods
     const hasntIntersections = (node) => {
@@ -112,12 +115,6 @@ export default {
       });
     };
 
-    const deactivateAllNodes = () =>
-      nodes.value.forEach((e) => {
-        e.selected = false;
-        linker.reset();
-      });
-
     const activateNodes = (ids) =>
       ids.forEach((e) => (nodes.value[e].selected = true));
 
@@ -138,23 +135,32 @@ export default {
     };
 
     const removeNode = (id) => {
-      links.value = links.value.filter(
-        (e) => e.source !== id && e.target !== id
-      );
-      nodes.value = nodes.value.filter((el, idx) => idx !== id);
+      links.value = links.value
+        .filter((e) => e.source !== id && e.target !== id)
+        .map((current) => {
+          current.source =
+            current.source > id ? current.source - 1 : current.source;
+          current.target =
+            current.target > id ? current.target - 1 : current.target;
+          return current;
+        });
+
+      nodes.value = nodes.value.filter((_, idx) => idx !== id);
+
       emit("isEuler", []);
     };
 
     const selectNode = (id) => {
-      if (linker.sourceEmpty()) {
-        linker.source = id;
+      if (linker.sourceEmpty()) linker.setSource(id);
+      else linker.addTarget(id);
+
       activateNodes([id]);
-      } else {
-        linker.target = id;
-        deactivateNodes([linker.source, linker.target]);
-        createLink(linker.load());
+    };
+
+    const unselectAllNodes = () => {
+      deactivateNodes(linker.expandIds());
+
       linker.reset();
-      }
     };
 
     // Node drag and drop
@@ -186,23 +192,33 @@ export default {
     };
 
     // Links
-    const createLink = (link) => {
-      links.value.push(Object.assign({ selected: false }, link));
+    linker.onLink((source, target) => {
+      links.value.push({
+        selected: false,
+        source,
+        target,
+      });
 
       euler.loadLinks([...links.value]);
 
       if (euler.check()) emit("isEuler", euler.find());
       else emit("isEuler", []);
+    });
+
+    const removeLink = (id) => {
+      links.value = links.value.filter((_, idx) => idx !== id);
     };
 
     return {
+      RADIUS,
       nodes,
       links,
       renderer,
       createNode,
       selectNode,
+      unselectAllNodes,
       removeNode,
-      deactivateAllNodes,
+      removeLink,
       dragNode,
       dropNode,
     };
@@ -234,6 +250,7 @@ line {
   -webkit-user-select: none;
   -ms-user-select: none;
   fill: #fff;
+  pointer-events: none;
 }
 
 .node-default {

src/components/core/linker.js

@@ -1,44 +1,55 @@
 class Linker {
   #source = null;
-  #target = null;
+  #targets = null;
+  #callback = () => {};
 
-  constructor() {}
+  constructor() {
+    this.reset();
+  }
 
-  get source() {
+  getSource() {
     return this.#source;
   }
 
-  set source(src) {
+  setSource(src) {
     if (this.#source === null) this.#source = src;
   }
 
-  get target() {
-    return this.#target;
+  getTargets() {
+    return this.#targets;
   }
 
-  set target(trg) {
-    if (trg === this.#source) return;
-    if (this.#target === null) this.#target = trg;
+  setTargets(trg) {
+    this.#targets = trg;
+  }
+
+  addTarget(trg) {
+    this.#targets.push(trg);
+    this.#callback(this.#source, trg);
   }
 
   sourceEmpty() {
     return this.#source === null;
   }
 
-  targetEmpty() {
-    return this.#target === null;
+  targetsEmpty() {
+    return this.#targets.length === 0;
   }
 
-  load() {
-    return {
-      source: this.#source,
-      target: this.#target,
-    };
+  expandIds() {
+    if (this.sourceEmpty()) {
+      return [...this.#targets];
+    }
+    return [this.#source, ...this.#targets];
+  }
+
+  onLink(fn) {
+    this.#callback = fn;
   }
 
   reset() {
     this.#source = null;
-    this.#target = null;
+    this.#targets = [];
   }
 }
 

src/main.js

@@ -2,4 +2,20 @@ import { createApp } from "vue";
 import router from "./router";
 import App from "./App.vue";
 
-createApp(App).use(router).mount("#app");
+const app = createApp(App).use(router);
+
+app.directive("click-outside", {
+  beforeMount(el, binding) {
+    el.clickOutsideEvent = function (event) {
+      if (!(el === event.target || el.contains(event.target))) {
+        binding.value(event, el);
+      }
+    };
+    document.body.addEventListener("click", el.clickOutsideEvent);
+  },
+  unmounted(el) {
+    document.body.removeEventListener("click", el.clickOutsideEvent);
+  },
+});
+
+app.mount("#app");

src/router/index.js

@@ -1,17 +1,12 @@
 import { createRouter, createWebHistory } from "vue-router";
 
-import Home from "../views/Home.vue";
+import View from "@/views/View.vue";
 
 const routes = [
   {
     path: "/",
-    name: "Home",
-    component: Home,
-  },
-  {
-    path: "/view",
     name: "view",
-    component: () => import(/* webpackChunkName: "view" */ "../views/View.vue"),
+    component: View,
   },
 ];
 

src/views/View.vue

@@ -141,5 +141,6 @@ export default {
 </script>
 
 <style>
+@import "~@/assets/css/creation.css";
 @import "~@/assets/css/graph.css";
 </style>