center to origin node in LibraryTree

src/components/layouts/MapZoom.vue

@@ -24,7 +24,8 @@ export default {
     id: { type: String, required: true },
     minZoom: { type: Number, default: 0.3 },
     maxZoom: { type: Number, default: 1 },
-    initialZoom: { type: Number, default: 1 }
+    initialZoom: { type: Number, default: 1 },
+    center: { type: Object, default: null }
   },
 
   data () {
@@ -46,6 +47,12 @@ export default {
     }
   },
 
+  watch: {
+    center (val, prevVal) {
+      this.transform = this.transform.translate(prevVal.x - val.x, prevVal.y - val.y)
+    }
+  },
+
   methods: {
     updateSize () {
       const { width, height } = this.$el.getBoundingClientRect()
@@ -67,7 +74,7 @@ export default {
     window.addEventListener('resize', () => this.updateSize())
 
     this.zoom.on('zoom', ({ transform }) => {
-      this.transform = transform
+      this.transform = this.center ? transform.translate(-this.center.x, -this.center.y) : transform
       this.scale = transform.k
     })
 

src/pages/library/LibraryTree.vue

@@ -1,6 +1,10 @@
 <template>
   <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">
+    <map-zoom
+      id="library-tree"
+      :min-zoom="0.3" :max-zoom="1" :center="center"
+      :key="nodeDepartId"
+    >
       <path
         v-for="link in nodeTree.links"
         :key="`${link.source.data.id}_${link.target.data.id}`"
@@ -77,7 +81,7 @@ export default {
   },
 
   computed: {
-    ...mapGetters(['nodeTree']),
+    ...mapGetters(['nodeDepartId', 'nodeTree']),
 
     dataNodes () {
       return this.nodeTree.nodes.map(node => node.data)
@@ -100,6 +104,11 @@ export default {
         .force('y', forceY())
     },
 
+    center () {
+      const { x, y } = this.nodeTree.nodes.length ? this.nodeTree.nodes[0] : { x: 0, y: 0 }
+      return { x, y }
+    },
+
     // ONE TIME GETTER
     lineGenerator () {
       return line().x(node => node.x).y(node => node.y)