open text on map node click & uniformized openText and closeText methods

src/components/NodeMap.vue

@@ -18,6 +18,9 @@
           :cy="node.y"
           :class="node.data.class + (node.data.first ? ' first' : '')"
           :r="node.children ? 7 : 5"
+          tabindex="0"
+          @click="onNodeClick(node.data)"
+          @keyup.enter="onNodeClick(node.data)"
         >
           <title>{{ node.data.title }}</title>
         </circle>
@@ -107,7 +110,7 @@ export default {
         .force('center', forceCenter(this.width * 0.5, this.height * 0.5))
     },
 
-    // DRAG EVENT HANDLER
+    // D3 DRAG EVENT HANDLERS
 
     onNodeDragStart (e, node) {
       if (!e.active) {
@@ -128,6 +131,17 @@ export default {
       }
       node.fx = null
       node.fy = null
+    },
+
+    // BASIC HANDLERS
+
+    onNodeClick (nodeData) {
+      const { id, parents } = nodeData
+      if (parents) {
+        this.$emit('open', parents[0].id, id)
+      } else {
+        this.$emit('open', id)
+      }
     }
   },
 

src/components/text/TextCard.vue

@@ -17,12 +17,12 @@
           <b-nav class="ml-auto flex-nowrap">
             <b-nav-item
               v-for="child in text.children" :key="child.id"
-              @click="$emit('open', child.id)"
+              @click="$emit('open', id, child.id)"
             >
               {{ child.id }}
             </b-nav-item>
 
-            <b-nav-item @click="$emit('close')">
+            <b-nav-item @click="$emit('close', id)">
               x
             </b-nav-item>
           </b-nav>

src/pages/Library.vue

@@ -1,16 +1,16 @@
 <template>
   <div class="h-100 position-relative">
     <!-- BACKGROUND (mode) -->
-    <component :is="mode" />
+    <component :is="mode" @open="openText" />
 
     <!-- FOREGROUND (texts) -->
     <section v-for="parent in parents" :key="parent.id" class="split-screen">
-      <text-card :id="parent.id" @open="openText(parent, $event)" @close="closeText(parent)" />
+      <text-card :id="parent.id" @open="openText" @close="closeText" />
       <div>
         <text-card
           v-for="id in parent.children" :key="id"
           :id="id"
-          @close="closeText(parent, id)"
+          @close="closeText(parent.id, $event)"
         />
       </div>
     </section>
@@ -47,17 +47,24 @@ export default {
   },
 
   methods: {
-    openText (parent, id) {
+    openText (id, childId) {
-      if (parent.children.includes(id)) return
+      const parent = this.parents.find(p => p.id === id)
-      parent.children.push(id)
+      if (parent && (childId === undefined || parent.children.includes(childId))) return
+
+      if (!parent) {
+        this.parents.push({ id, children: childId ? [childId] : [] })
+      } else if (childId) {
+        parent.children.push(childId)
+      }
       this.updateQuery(this.parents)
     },
 
-    closeText (parent, id) {
+    closeText (id, childId) {
-      if (!id) {
+      const parent = this.parents.find(p => p.id === id)
+      if (!childId) {
         this.updateQuery(this.parents.filter(p => p !== parent))
       } else {
-        parent.children = parent.children.filter(id_ => id_ !== id)
+        parent.children = parent.children.filter(childId_ => childId_ !== childId)
         this.updateQuery(this.parents)
       }
     },

src/pages/library/TreeMap.vue

@@ -4,6 +4,7 @@
       v-if="!loading"
       v-bind="mapData"
       :show-id="true"
+      v-on="$listeners"
     />
   </b-overlay>
 </template>