add NodePreview & NodeViewChildListGroup in Library

src/pages/library/LibraryMap.vue

@@ -6,13 +6,21 @@
         :style="`--x: ${node.x}px; --y: ${node.y}px; --r: ${node.rotate}deg;`"
       >
         <node-view
+          :id="'preview-node-' + node.data.id"
+          :class="{ 'hidden': previewNode === node.data }"
           :node="node.data"
           mode="card"
-          @open-node="onOpen(node.data)"
           :hidden="node.hidden"
+          @click.native="onNodeClick(node.data)"
         />
       </foreignObject>
     </map-zoom>
+
+    <node-preview-zone
+      v-if="dataNodes"
+      v-model="previewNode" :nodes="dataNodes"
+      @open-node="onPreviewNodeClick"
+    />
   </b-overlay>
 </template>
 
@@ -21,8 +29,8 @@ import { randomUniform } from 'd3'
 import { forceSimulation, forceCollide, forceManyBody } from 'd3-force'
 import { mapGetters } from 'vuex'
 
-import { searchInNode, tagsInNode } from '@/store/utils'
-import { MapZoom } from '@/components/layouts'
+import { searchInNode, tagsInNode, getRelation } from '@/store/utils'
+import { MapZoom, NodePreviewZone } from '@/components/layouts'
 import { NodeView } from '@/components/nodes'
 
 
@@ -31,13 +39,15 @@ export default {
 
   components: {
     MapZoom,
+    NodePreviewZone,
     NodeView
   },
 
   data () {
     return {
       simulation: forceSimulation(),
-      nodes: undefined
+      nodes: undefined,
+      previewNode: null
     }
   },
 
@@ -53,16 +63,27 @@ export default {
         })
       })
       return this.nodes
+    },
+
+    dataNodes () {
+      if (!this.nodes) return
+      return this.nodes.map(node => node.data)
     }
   },
 
   methods: {
     onOpen (node) {
-      if (node.parents && node.parents.length) {
-        this.$emit('open-node', { parentId: node.parents[0].id, childId: node.id })
-      } else {
-        this.$emit('open-node', { parentId: node.id })
-      }
+      this.$parent.$emit('open-node', getRelation(node))
+    },
+
+    onNodeClick (node) {
+      this.previewNode = node
+      this.$root.$emit('bv::show::popover', 'preview-node-' + node.id)
+    },
+
+    onPreviewNodeClick (ids) {
+      this.$root.$emit('bv::hide::popover', 'preview-node-' + this.previewNode.id)
+      this.$emit('open-node', ids)
     }
   },
 
@@ -93,4 +114,14 @@ foreignObject {
     cursor: pointer;
   }
 }
+
+.node-view.hidden {
+  border: $line;
+  border-style: dashed;
+  background-color: transparent;
+
+  ::v-deep .node-view-wrapper {
+    opacity: 0;
+  }
+}
 </style>