add shuffle mecanism to LibraryMap

src/pages/library/LibraryList.vue

@@ -1,5 +1,5 @@
 <template>
-  <b-overlay :show="filteredNodes === undefined" class="h-100">
+  <b-overlay :show="filteredNodes === undefined" class="h-100" z-index="0">
     <div class="library-list">
       <div class="library-list-container" @click="onContainerClick">
         <div v-for="([char, nodes]) in filteredNodes" :key="char">

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>

src/pages/library/LibraryOptions.vue

@@ -11,6 +11,14 @@
         name="mode-select" :aria-describedby="ariaDescribedby"
         buttons button-variant="outline-dark"
       />
+
+      <b-button
+        v-if="activeMode === 'map'"
+        variant="outline-dark" class="d-block mt-2"
+        @click="$store.dispatch('ROLL_RANDOM_NODES')"
+      >
+        {{ $t('options.display.shuffle') }}
+      </b-button>
     </b-form-group>
 
     <!-- LIST + MAP ONLY -->

src/pages/library/LibraryTree.vue

@@ -1,5 +1,5 @@
 <template>
-  <b-overlay :show="nodeTree.nodes.length === 0" class="h-100">
+  <b-overlay :show="nodeTree.nodes.length === 0" class="h-100" z-index="0">
     <map-zoom id="library-tree" :min-zoom="0.3" :max-zoom="1">
       <path
         v-for="link in nodeTree.links"