Get path as created

.nuxt/store.js

@@ -18,15 +18,21 @@ void (function updateModules() {
   // Enforce store modules
   store.modules = store.modules || {}
 
+  resolveStoreModules(require('../store/state.js'), 'state.js')
   resolveStoreModules(require('../store/storeRoute.js'), 'storeRoute.js')
+  resolveStoreModules(require('../store/modules/coordinates.js'), 'modules/coordinates.js')
+  resolveStoreModules(require('../store/modules/display.js'), 'modules/display.js')
 
   // If the environment supports hot reloading...
 
   if (process.client && module.hot) {
     // Whenever any Vuex module is updated...
     module.hot.accept([
       '../store/index.js',
+      '../store/state.js',
       '../store/storeRoute.js',
+      '../store/modules/coordinates.js',
+      '../store/modules/display.js',
     ], () => {
       // Update `root.modules` with the latest definitions.
       updateModules()

components/Glyphs.vue

@@ -1,8 +1,8 @@
 <template>
   <component 
     :is="i.glyph? i.glyph: 'Dot'" 
-    :x="getXDisp(items.x, i, $store.getters.solveXDisp(items.x))"
-    :y="getYDisp(turn, i)"
+    :x="coords[0]"
+    :y="coords[1]"
     :color="items.color"
   />
 </template>
@@ -11,11 +11,9 @@
 import _ from "lodash";
 import Dot from "./Glyphs/Dot.vue";
 import Book from "./Glyphs/Book.vue";
-import { DisplayMixin } from "~/components/DisplayMixin.js";
 
 export default {
-  props:['items', 'i', 'turn'],
-  mixins: [DisplayMixin],
+  props:['items', 'i', 'coords'],
   components: {
     Dot: Dot,
     Book: Book

components/Links.vue

@@ -2,20 +2,18 @@
   <component
     :is="i.link.type"
     v-if="Object.keys($options.components).includes(i.link.type)"
-    :x="getXDisp(items.x, i, $store.getters.solveXDisp(items.x))"
-    :y="getYDisp(turn, i)"
-    :XYLink="getLink(i.link)"
+    :x="coords[0]"
+    :y="coords[1]"
+    :XYLink="$store.getters.getLink(i.link)"
     :color="items.color"
   />
 </template>
 
 <script>
 import Dotted from "./Links/Dotted.vue";
-import { DisplayMixin } from "~/components/DisplayMixin.js";
 
 export default {
-  props:['items', 'i', 'turn'],
-  mixins: [DisplayMixin],
+  props:['items', 'i', 'coords'],
   components: {
     Dotted: Dotted,
   }, 

components/Paths.vue

@@ -1,10 +1,10 @@
 <template>
   <path 
     :class="{active: isActive}"
-    v-on:dblclick="toggleChildren(items.children)"
+    v-on:click="toggleChildren(items.children)"
 
     :id="branchName"
-    :d="dString(items)" 
+    :d="dString()" 
     fill="none" 
     :stroke="items.color" 
     stroke-width="7"
@@ -14,27 +14,36 @@
 <script>
 import _ from "lodash";
 import { PathsMixin } from "./Paths/PathsMixin.js";
-import { DisplayMixin } from "~/components/DisplayMixin.js";
 
 export default {
-  props: ['items', 'branchName'],
-  mixins: [PathsMixin, DisplayMixin],
+  props: ['items', 'branchName', 'coords'],
+  mixins: [PathsMixin],
   computed: {
     isActive() {
-      var display = this.$store.state.show
-      return !this.items.children.every((val) => val in display)
-    }
+      if (_.isEmpty(this._Display.filtered)){
+        var display = this._Display.show
+        return !this.items.children.every((val) => val in display)
+      } else {return false} 
+    },
+    getPath() { // –> [[x, y], ...]
+      // continuity data is held in 'y' of path items 
+      // it is used in dString logic.
+      const xConst = this.items.x.reduce((a, b) => a + b, 0)
+      const yArr = _.map(this.items.path, 'y')
+      const coords = yArr.map(i => Array.isArray(i) ? [xConst+i[0], i[1]] : [xConst, i])
+      return coords
+    },
   },
   methods: {
     toggleChildren(children) {
       if (children.length) {
         if (this.isActive === true) {
           //var payload = {branches:children, parent:this.branchName}
-          this.$store.commit('addVisible', children) // payload
+          this.$store.dispatch('addVisible', children) // payload
         } else {
           for (var key of children){
-            var subChild = this._$[key].children
-            var show = this.$store.state.show
+            var subChild = this._Branches[key].children
+            var show = this._Display.show
             var activeChildren = subChild.filter(branch => branch in show)
             // Recusrion for children with descendants
             if (activeChildren.length>0){
@@ -44,23 +53,15 @@ export default {
             this.$store.commit('removeVisible', key)
           }
         }
-        console.log("state.show: ", this.$store.state.show)
+        //console.log("_Display.show: ", this._Display.show)
+        this.$store.dispatch('updateCache') // cant update 1 branch due to down stream effects.
       }
     },
 
-    getPath(bItems) { // –> [[x, y], ...]
-      // continuity data is held in 'y' of path items 
-      // it is used in dString logic.
-      const xConst = bItems.x.reduce((a, b) => a + b, 0) // sum here?
-      const yArr = _.map(bItems.path, 'y')
-      const coords = yArr.map(i => Array.isArray(i) ? [xConst+i[0], i[1]] : [xConst, i])
-      return coords
-    },
-
-    dString(bItems) {
+    dString() {
       var d = [];
-      var path = this.getPath(bItems)
-      var dispCoords = this.getDispPath(bItems)
+      var path = this.getPath
+      var dispCoords = Object.values(this.coords)
 
       for (var i of _.range(path.length)) {
         let [x, y] = path[i] // Logic variables
@@ -83,7 +84,7 @@ export default {
         }
 
         // In-path link: Prefix link dStrting at given point if type==path
-        var XYLink = this.inPathLink(bItems, i)
+        var XYLink = this.inPathLink(this.items, i)
         if (XYLink !== false) { 
           this.moveTo(d, ...XYLink)
           this.Branch(d, xDisp, yDisp, XYLink)

components/Paths/PathsMixin.js

@@ -1,35 +1,41 @@
 export const PathsMixin = {
   methods: {
+    ExtendOrReplace(d, x, y, marker, string) {
+      // If repeat, overwrite. Otherwise, extened dString.
+      let last_index = d.length-1
+      if (d.length>0 && d[last_index][0] === marker) {
+        d[last_index] = (string) // Overwrite repeat
+        return d
+      } else {
+        return d.push(string) // Extend dString
+      }
+    },
     moveTo(d, x, y){
-      return d.push(`M${x} ${y}`)
-    }, 
+      const marker = 'M'
+      const string = `${marker}${x} ${y}`
+      return this.ExtendOrReplace(d, x, y, marker, string)
+    },
     Branch(d, x, y, priorXYDisp, scale) {
       var [xprior, yprior] = priorXYDisp;
-      var maxHeight = yprior + +this.$store.state.scale
+      var maxHeight = yprior + +this._Display.scale
       var midY = (yprior + maxHeight) / 2;
       d.push(`C${xprior} ${midY} ${x} ${midY} ${x} ${maxHeight}`);
-      if (maxHeight<y){
-        this.Line(d, x, y)
-      } else(this.Line(d, x, y)) 
+      this.Line(d, x, y)
       // zero length line necessary for animation. 
       // Otherwise its not the same path
       return d
     },
     Line(d, x ,y) {
-      let last_index = d.length-1
-      if (d[last_index][0] === "L") {
-        d[last_index] = (`L${x} ${y}`) // Extend prior line
-        return d
-      } else {
-        return d.push(`L${x} ${y}`) // Start new line
-      }
+      const marker = 'L'
+      const string = `${marker}${x} ${y}`
+      return this.ExtendOrReplace(d, x, y, marker, string)
     }, 
 
     // In-path Link
     inPathLink(bItems, index){
       var link = Object.values(bItems.path)[index].link
       if (Object.keys(link).length > 0 && link.type==="Path"){
-        return this.getLink(link)
+        return this.$store.getters.getLink(link)
       } else {
         return false
       }

components/CollapseState.vue → components/UI/CollapseState.vue

@@ -15,10 +15,10 @@ export default {
       return Object.keys(this.$store.getters.rootBranches).sort()
     },
     all(){
-      return Object.keys(this._$).sort()
+      return Object.keys(this._Branches).sort()
     },
     branchState(){
-      var show = Object.keys(this.$store.state.show).sort()
+      var show = Object.keys(this._Display.show).sort()
       if ( _.isEqual(show, this.roots) ){
         return 0
       } else if ( _.isEqual(show, this.all)) {
@@ -30,10 +30,10 @@ export default {
   },
   methods: {
     collapse() {
-      this.$store.commit('setVisible', this.roots)
+      this.$store.dispatch('setVisible', this.roots)
     },
     expand() {
-      this.$store.commit('setVisible', this.all)
+      this.$store.dispatch('setVisible', this.all)
     },
     onChg(e) {
       switch(+e.target.value) {
@@ -46,6 +46,7 @@ export default {
         default: 
           break
       }
+      this.$store.dispatch('updateCache')
     }
   }
 }

components/UI/DisplaySlider.vue

@@ -0,0 +1,9 @@
+<template>
+
+</template>
+
+<script>
+export default {
+
+};
+</script>