add shuffle mecanism to LibraryMap

src/messages/fr.json

@@ -25,7 +25,8 @@
         "tree-map": "Arborescent",
         "card-map": "Aléatoire",
         "card-list": "Alphabétique"
-      }
+      },
+      "shuffle": "Mélanger"
     },
     "filters": {
       "title": "Filtres",

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"

src/store/modules/library.js

@@ -6,6 +6,7 @@ import {
   parseNodesQueryParams,
   getUniqueNodesIds,
   getRelatedNodesIds,
+  getRandomIds,
   buildTree
 } from '@/store/utils.js'
 
@@ -13,6 +14,7 @@ import {
 export default {
   state: {
     trees: {},
+    randomNodes: undefined,
     nodebook: undefined,
 
     // LibraryOptions options
@@ -89,6 +91,10 @@ export default {
       state.nodeDepartId = id
     },
 
+    'SET_RANDOM_NODES' (state, ids) {
+      state.randomNodes = ids
+    },
+
     'SET_SEARCH' (state, str) {
       state.search = str
     }
@@ -114,14 +120,8 @@ export default {
     },
 
     async 'INIT_LIBRARY_MAP' ({ state, commit, dispatch }) {
-      const departIds = await dispatch('INIT_LIBRARY')
-      const ids = departIds.slice(0, 3)
-      const departNodes = await dispatch('GET_NODES', { ids, dataLevel: 'partial' })
-      const relatedIds = getRelatedNodesIds(departNodes, ids)
-      const relatedNodes = await dispatch('GET_NODES', { ids: relatedIds, dataLevel: 'partial' })
-      const nodes = [...departNodes, ...relatedNodes]
-      commit('SET_TAGS_OPTIONS', nodes)
-      return nodes
+      await dispatch('INIT_LIBRARY')
+      return dispatch('ROLL_RANDOM_NODES')
     },
 
     async 'INIT_LIBRARY_LIST' ({ state, commit, dispatch }) {
@@ -186,6 +186,17 @@ export default {
       return getters.nodeTree
     },
 
+    async 'ROLL_RANDOM_NODES' ({ state, rootState, commit, dispatch }) {
+      commit('SET_RANDOM_NODES', undefined)
+      const ids = getRandomIds(rootState.ids.depart)
+      const departNodes = await dispatch('GET_NODES', { ids, dataLevel: 'partial' })
+      const relatedIds = getRelatedNodesIds(departNodes, ids)
+      const relatedNodes = await dispatch('GET_NODES', { ids: relatedIds, dataLevel: 'partial' })
+      const nodes = [...departNodes, ...relatedNodes]
+      commit('SET_RANDOM_NODES', [...ids, ...relatedIds])
+      commit('SET_TAGS_OPTIONS', nodes)
+    },
+
     'UPDATE_QUERY_MODE' (store, mode) {
       if (router.currentRoute.query.mode === mode) return
       router.push({ query: { mode } })
@@ -255,8 +266,14 @@ export default {
       })
     },
 
+    // LibraryMap
+    randomNodes: (state, getters, rootState) => {
+      if (state.randomNodes === undefined) return
+      return state.randomNodes.map(id => rootState.nodes[id])
+    },
+
     // LibraryTree
-    nodeTree: (state, rootState) => {
+    nodeTree: state => {
       return state.trees[state.nodeDepartId] || { nodes: [], links: [] }
     },
 

src/store/utils.js

@@ -74,6 +74,18 @@ export function getRelatedNodesIds (nodes, ignored) {
 }
 
 
+export function getRandomIds (ids, count = 3) {
+  const randomIds = []
+  while (randomIds.length < count) {
+    const id = ids[Math.floor(Math.random() * ids.length)]
+    if (!randomIds.includes(id)) {
+      randomIds.push(id)
+    }
+  }
+  return randomIds
+}
+
+
 export function buildTree (treeData, nodesData) {
   const uniqueIds = []
   const nodes = []