add shuffle mecanism to LibraryMap

src/pages/library/LibraryMap.vue

@@ -1,8 +1,11 @@
 <template>
-  <b-overlay :show="nodes === undefined" class="h-100">
-    <map-zoom id="library-map" :min-zoom="0.2" :max-zoom="2">
+  <b-overlay :show="nodes === undefined" class="h-100" z-index="0">
+    <map-zoom
+      id="library-map" ref="map"
+      :min-zoom="0.2" :max-zoom="2" :initial-zoom="0.5"
+    >
       <foreignObject
-        v-for="(node, i) in filteredNodes" :key="i"
+        v-for="node in filteredNodes" :key="'f-' + node.data.id"
         :style="`--x: ${node.x}px; --y: ${node.y}px; --r: ${node.rotate}deg;`"
       >
         <node-view
@@ -53,7 +56,7 @@ export default {
   },
 
   computed: {
-    ...mapGetters(['search', 'tags', 'strangeness']),
+    ...mapGetters(['randomNodes', 'search', 'tags', 'strangeness']),
 
     filteredNodes () {
       if (!this.nodes) return
@@ -91,17 +94,30 @@ export default {
     }
   },
 
-  created () {
-    // JS-BP
-    const radius = window.innerWidth < 769 ? 700 / 1.5 : 700
-    this.$store.dispatch('INIT_LIBRARY_MAP').then(nodes => {
-      this.nodes = nodes.map((node, i) => {
+  watch: {
+    randomNodes (randomNodes) {
+      if (!randomNodes) {
+        this.nodes = undefined
+        return
+      }
+
+      // JS-BP
+      const radius = window.innerWidth < 769 ? 700 / 1.5 : 700
+      this.nodes = randomNodes.map((node, i) => {
         return { x: 0, rotate: randomUniform(-25, 25)(), data: node }
       })
+
       this.simulation.nodes(this.nodes)
-        .force('attract', forceManyBody())
+        .force('attract', forceManyBody().strength(1))
         .force('collision', forceCollide().radius(radius / 2))
-    })
+        .alpha(0.5).restart()
+
+      this.$refs.map.reset()
+    }
+  },
+
+  created () {
+    this.$store.dispatch('INIT_LIBRARY_MAP')
   }
 }
 </script>