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

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) {
-      if (parent.children.includes(id)) return
-      parent.children.push(id)
+    openText (id, childId) {
+      const parent = this.parents.find(p => p.id === 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) {
-      if (!id) {
+    closeText (id, childId) {
+      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>