move Sandbox to be Home

Updated so that the Sandbox view is now the default  starting view, which has more features

app/src/components/OnBoard.vue

@@ -73,13 +73,13 @@ var delaytwo = 100
 import Router from '@/router'
 
 export default {
-  data: function() {
+  data: function () {
     return {
       localmicrocosm: Router.currentRoute.params.microcosm,
       clientid: '',
       parta: true,
       partb: false,
-      partc: false
+      partc: false,
     }
   },
 
@@ -120,8 +120,8 @@ export default {
     },
     readyFocusTwo() {
       this.$refs.objectnametwo.focus()
-    }
-  }
+    },
+  },
 }
 </script>
 
@@ -166,9 +166,9 @@ input {
 @media only screen and (min-width: 640px) {
   /* Style adjustments for viewports that meet the condition */
 
-  .notlogged {
+  /* .notlogged {
     grid-column: 1 / 3;
     grid-row: 1;
-  }
+  } */
 }
 </style>

app/src/experimental/ModeToolbar.vue

@@ -37,9 +37,11 @@ export default {
     setMode(mode) {
       this.$store.commit('ui/setMode', mode)
       if (mode == 'exit') {
-        console.log('YOu')
         this.removeLocal()
       }
+      if (mode == 'addNode') {
+        this.$store.dispatch('addNode')
+      }
     },
     isActive(mode) {
       return this.mode === mode.name

app/src/experimental/icons/library/exit.vue

+<template>
+  <g>
+    <path d="M21 6H45V43H21" stroke="black" stroke-width="3" />
+    <rect x="18" y="8" width="25" height="32" fill="white" />
+    <path
+      d="M1.93934 23.9393C1.35355 24.5251 1.35355 25.4749 1.93934 26.0607L11.4853 35.6066C12.0711 36.1924 13.0208 36.1924 13.6066 35.6066C14.1924 35.0208 14.1924 34.0711 13.6066 33.4853L5.12132 25L13.6066 16.5147C14.1924 15.9289 14.1924 14.9792 13.6066 14.3934C13.0208 13.8076 12.0711 13.8076 11.4853 14.3934L1.93934 23.9393ZM32 23.5L3 23.5V26.5L32 26.5V23.5Z"
+      fill="black"
+    />
+    <line x1="22.5" y1="6" x2="22.5" y2="18" stroke="black" stroke-width="3" />
+    <line x1="22.5" y1="32" x2="22.5" y2="44" stroke="black" stroke-width="3" />
+  </g>
+</template>

app/src/experimental/icons/library/index.js

@@ -9,6 +9,7 @@ import person from './person'
 import plus from './plus'
 import select from './select'
 import upload from './upload'
+import exit from './exit'
 
 export {
   addNode,
@@ -22,4 +23,5 @@ export {
   plus,
   select,
   upload,
+  exit,
 }

app/src/router/index.js

 import Vue from 'vue'
 import VueRouter from 'vue-router'
 import Home from '../views/Home.vue'
-import Sandbox from '../views/Sandbox'
+import Oldhome from '../views/Oldhome'
 
 Vue.use(VueRouter)
 
@@ -9,12 +9,12 @@ export const routes = [
   {
     path: '/',
     name: 'Home',
-    component: Home
+    component: Home,
   },
   {
-    path: '/sandbox',
-    name: 'Sandbox',
-    component: Sandbox
+    path: '/oldhome',
+    name: 'Old Home',
+    component: Oldhome,
   },
   {
     path: '/about',
@@ -23,12 +23,12 @@ export const routes = [
     // this generates a separate chunk (about.[hash].js) for this route
     // which is lazy-loaded when the route is visited.
     component: () =>
-      import(/* webpackChunkName: "about" */ '../views/About.vue')
+      import(/* webpackChunkName: "about" */ '../views/About.vue'),
   },
   // dynamic segement `:microcosm` is added to the path
   {
     path: '/microcosm/:microcosm',
-    component: Home
+    component: Home,
   },
 
   {
@@ -38,8 +38,8 @@ export const routes = [
     component: () =>
       import(
         /* webpackChunkName: "NotFoundComponent" */ '../views/NotFound.vue'
-      )
-  }
+      ),
+  },
 ]
 
 const router = new VueRouter({
@@ -47,7 +47,7 @@ const router = new VueRouter({
   //base: 'https://alpha.nodenogg.in/',
   //base: process.env.VUE_APP_HTTP + '://' + process.env.VUE_APP_URL + '',
   //base: process.env.VUE_APP_HTTP,
-  routes
+  routes,
 })
 
 export default router

app/src/views/Home.vue

 <template>
-  <div class="home">
-    <div v-if="clientset">
-      <div v-if="listview">
-        <ListLayer
-          v-for="value in myNodes"
-          v-bind:key="value.node_id"
-          v-bind:nodeid="value.node_id"
-          v-bind:nodetext="value.node_text"
-        />
-
-        <OtherListlayer
-          v-for="value in otherNodes"
-          v-bind:key="value.node_id"
-          v-bind:nodeid="value.node_id"
-          v-bind:nodetext="value.node_text"
-        />
-      </div>
-      <div v-else>
+  <div ref="container" class="wrapper" v-bind:style="modeContainerStyle">
+    <ConnectionsLayer
+      v-bind:width="width"
+      v-bind:height="height"
+      v-bind:connections="connections"
+    />
+    <PanZoomContainer
+      v-bind:width="width"
+      v-bind:height="height"
+      v-bind:scale="scale"
+      v-bind:translation="translation"
+    >
+      <div v-if="clientset">
         <OtherNodeslayer
           v-for="value in otherNodes"
           v-bind:key="value.node_id"
           v-bind:nodeid="value.node_id"
           v-bind:nodetext="value.node_text"
         />
-
         <NodesLayer
           @editTrue="(e) => editTrue(e)"
           v-for="value in myNodes"
@@ -32,68 +26,93 @@
           v-bind:nodetext="value.node_text"
         />
       </div>
-      <ControlsLayer @listView="listView()" />
-    </div>
-    <OnBoard v-else @clientAdded="clientAdded()" />
+      <OnBoard v-else @clientAdded="clientAdded()" />
+    </PanZoomContainer>
+    <!-- <SelectionLayer
+      v-if="domContainerReady"
+      v-bind:shape="interaction.shape"
+      v-bind:width="elementWidth"
+      v-bind:height="elementHeight"
+    /> -->
+    <ModeToolbar
+      @offlineTriggered="offlineTriggered()"
+      @onlineTriggered="onlineTriggered()"
+    />
+    <ViewToolbar />
   </div>
 </template>
 
 <script>
-// @ is an alias to /src
-import OnBoard from '@/components/OnBoard.vue'
-import NodesLayer from '@/components/NodesLayer.vue'
+import PanZoomContainer from '@/experimental/PanZoomContainer'
+import ConnectionsLayer from '@/experimental/layers/ConnectionsLayer'
+import NodesLayer from '@/components/NodesLayer'
 import OtherNodeslayer from '@/components/OtherNodeslayer.vue'
-import ListLayer from '@/components/ListLayer.vue'
-import OtherListlayer from '@/components/OtherListlayer.vue'
-import ControlsLayer from '@/components/ControlsLayer.vue'
-
-import { mapState } from 'vuex'
+import OnBoard from '@/components/OnBoard.vue'
+import ModeToolbar from '@/experimental/ModeToolbar'
+import ViewToolbar from '@/experimental/ViewToolbar'
+// import SelectionLayer from '@/experimental/layers/SelectionLayer'
 import { shortcutsMixin } from '@/components/mixins/shortcutsMixin.js'
-// import Router from '@/router'
-// console.log(Router.currentRoute.params.microcosm)
+import { mapGetters, mapState } from 'vuex'
 
 export default {
   name: 'Home',
-  // Shortcut mixin is here so we can call the keyboard controls anytime
   mixins: [shortcutsMixin],
+  data: function () {
+    return {
+      elementWidth: undefined,
+      elementHeight: undefined,
+      width: 2000,
+      height: 2000,
+      clientset: false,
+      listview: false,
+      offline: false,
+    }
+  },
+  computed: {
+    domContainerReady() {
+      return !!this.elementWidth && !!this.elementHeight
+    },
+    ...mapState({
+      interaction: (state) => state.ui.interaction,
+      scale: (state) => state.ui.scale,
+      translation: (state) => state.ui.translation,
+      myNodes: (state) => state.myNodes,
+      otherNodes: (state) => state.otherNodes,
+      shortcutstate: (state) => state.shortcutstate,
+      connections: (state) => state.configConnections,
+    }),
+    ...mapGetters({
+      activeMode: 'ui/activeMode',
+      modeContainerStyle: 'ui/modeContainerStyle',
+    }),
+  },
+  mounted() {
+    window.addEventListener('resize', this.handleResize)
+    this.handleResize()
+  },
+
   created() {
     if (typeof window !== 'undefined') {
       document.addEventListener('keydown', this.handleKeyPress)
     }
-    if (localStorage.myNNClient == null) {
-      // visiting from URL get them to name client
-      // localStorage.setItem('myNNClient', 'unknown client')
-      // console.log(localStorage.myNNClient)
-    }
   },
+
   beforeDestroy() {
     if (typeof window !== 'undefined') {
       document.removeEventListener('keydown', this.handleKeyPress)
     }
   },
 
-  data: function () {
-    return {
-      clientset: false,
-      listview: false,
-      offline: false,
-    }
+  destroyed() {
+    window.removeEventListener('resize', this.handleResize)
   },
-
-  components: {
-    OnBoard,
-    NodesLayer,
-    OtherNodeslayer,
-    ListLayer,
-    OtherListlayer,
-    ControlsLayer,
-  },
-  computed: mapState({
-    myNodes: (state) => state.myNodes,
-    otherNodes: (state) => state.otherNodes,
-    shortcutstate: (state) => state.shortcutstate,
-  }),
   methods: {
+    handleResize() {
+      const { offsetWidth, offsetHeight } = this.$refs.container
+      this.elementWidth = offsetWidth
+      this.elementHeight = offsetHeight
+    },
+
     clientAdded() {
       this.clientset = !this.clientset
     },
@@ -107,14 +126,6 @@ export default {
       this.$store.dispatch('addNode')
     },
 
-    listView() {
-      if (this.listview == false) {
-        this.listview = true
-      } else {
-        this.listview = false
-      }
-    },
-
     offlineTriggered() {
       this.offline = true
     },
@@ -122,7 +133,24 @@ export default {
       this.offline = false
     },
   },
+  components: {
+    ModeToolbar,
+    ViewToolbar,
+    PanZoomContainer,
+    // SelectionLayer,
+    NodesLayer,
+    OtherNodeslayer,
+    ConnectionsLayer,
+    OnBoard,
+  },
 }
 </script>
 
-<style scoped></style>
+<style scoped>
+.wrapper {
+  height: calc(100vh - 120px);
+  width: calc(100%-80px);
+  margin: 40px;
+  position: relative;
+}
+</style>

app/src/views/Sandbox.vue → app/src/views/Oldhome.vue

 <template>
-  <div ref="container" class="wrapper" v-bind:style="modeContainerStyle">
-    <ConnectionsLayer
-      v-bind:width="width"
-      v-bind:height="height"
-      v-bind:connections="connections"
-    />
-    <PanZoomContainer
-      v-bind:width="width"
-      v-bind:height="height"
-      v-bind:scale="scale"
-      v-bind:translation="translation"
-    >
-      <div v-if="clientset">
+  <div class="home">
+    <div v-if="clientset">
+      <div v-if="listview">
+        <ListLayer
+          v-for="value in myNodes"
+          v-bind:key="value.node_id"
+          v-bind:nodeid="value.node_id"
+          v-bind:nodetext="value.node_text"
+        />
+
+        <OtherListlayer
+          v-for="value in otherNodes"
+          v-bind:key="value.node_id"
+          v-bind:nodeid="value.node_id"
+          v-bind:nodetext="value.node_text"
+        />
+      </div>
+      <div v-else>
         <OtherNodeslayer
           v-for="value in otherNodes"
           v-bind:key="value.node_id"
           v-bind:nodeid="value.node_id"
           v-bind:nodetext="value.node_text"
         />
+
         <NodesLayer
           @editTrue="(e) => editTrue(e)"
           v-for="value in myNodes"
@@ -26,93 +32,68 @@
           v-bind:nodetext="value.node_text"
         />
       </div>
-      <OnBoard v-else @clientAdded="clientAdded()" />
-    </PanZoomContainer>
-    <!-- <SelectionLayer
-      v-if="domContainerReady"
-      v-bind:shape="interaction.shape"
-      v-bind:width="elementWidth"
-      v-bind:height="elementHeight"
-    /> -->
-    <ModeToolbar
-      @offlineTriggered="offlineTriggered()"
-      @onlineTriggered="onlineTriggered()"
-    />
-    <ViewToolbar />
+      <ControlsLayer @listView="listView()" />
+    </div>
+    <OnBoard v-else @clientAdded="clientAdded()" />
   </div>
 </template>
 
 <script>
-import PanZoomContainer from '@/experimental/PanZoomContainer'
-import ConnectionsLayer from '@/experimental/layers/ConnectionsLayer'
-import NodesLayer from '@/components/NodesLayer'
-import OtherNodeslayer from '@/components/OtherNodeslayer.vue'
+// @ is an alias to /src
 import OnBoard from '@/components/OnBoard.vue'
-import ModeToolbar from '@/experimental/ModeToolbar'
-import ViewToolbar from '@/experimental/ViewToolbar'
-// import SelectionLayer from '@/experimental/layers/SelectionLayer'
+import NodesLayer from '@/components/NodesLayer.vue'
+import OtherNodeslayer from '@/components/OtherNodeslayer.vue'
+import ListLayer from '@/components/ListLayer.vue'
+import OtherListlayer from '@/components/OtherListlayer.vue'
+import ControlsLayer from '@/components/ControlsLayer.vue'
+
+import { mapState } from 'vuex'
 import { shortcutsMixin } from '@/components/mixins/shortcutsMixin.js'
-import { mapGetters, mapState } from 'vuex'
+// import Router from '@/router'
+// console.log(Router.currentRoute.params.microcosm)
 
 export default {
-  name: 'Sandbox',
+  name: 'Oldhome',
+  // Shortcut mixin is here so we can call the keyboard controls anytime
   mixins: [shortcutsMixin],
-  data: function () {
-    return {
-      elementWidth: undefined,
-      elementHeight: undefined,
-      width: 2000,
-      height: 2000,
-      clientset: false,
-      listview: false,
-      offline: false,
-    }
-  },
-  computed: {
-    domContainerReady() {
-      return !!this.elementWidth && !!this.elementHeight
-    },
-    ...mapState({
-      interaction: (state) => state.ui.interaction,
-      scale: (state) => state.ui.scale,
-      translation: (state) => state.ui.translation,
-      myNodes: (state) => state.myNodes,
-      otherNodes: (state) => state.otherNodes,
-      shortcutstate: (state) => state.shortcutstate,
-      connections: (state) => state.configConnections,
-    }),
-    ...mapGetters({
-      activeMode: 'ui/activeMode',
-      modeContainerStyle: 'ui/modeContainerStyle',
-    }),
-  },
-  mounted() {
-    window.addEventListener('resize', this.handleResize)
-    this.handleResize()
-  },
-
   created() {
     if (typeof window !== 'undefined') {
       document.addEventListener('keydown', this.handleKeyPress)
     }
+    if (localStorage.myNNClient == null) {
+      // visiting from URL get them to name client
+      // localStorage.setItem('myNNClient', 'unknown client')
+      // console.log(localStorage.myNNClient)
+    }
   },
-
   beforeDestroy() {
     if (typeof window !== 'undefined') {
       document.removeEventListener('keydown', this.handleKeyPress)
     }
   },
 
-  destroyed() {
-    window.removeEventListener('resize', this.handleResize)
+  data: function () {
+    return {
+      clientset: false,
+      listview: false,
+      offline: false,
+    }
   },
-  methods: {
-    handleResize() {
-      const { offsetWidth, offsetHeight } = this.$refs.container
-      this.elementWidth = offsetWidth
-      this.elementHeight = offsetHeight
-    },
 
+  components: {
+    OnBoard,
+    NodesLayer,
+    OtherNodeslayer,
+    ListLayer,
+    OtherListlayer,
+    ControlsLayer,
+  },
+  computed: mapState({
+    myNodes: (state) => state.myNodes,
+    otherNodes: (state) => state.otherNodes,
+    shortcutstate: (state) => state.shortcutstate,
+  }),
+  methods: {
     clientAdded() {
       this.clientset = !this.clientset
     },
@@ -126,6 +107,14 @@ export default {
       this.$store.dispatch('addNode')
     },
 
+    listView() {
+      if (this.listview == false) {
+        this.listview = true
+      } else {
+        this.listview = false
+      }
+    },
+
     offlineTriggered() {
       this.offline = true
     },
@@ -133,24 +122,7 @@ export default {
       this.offline = false
     },
   },
-  components: {
-    ModeToolbar,
-    ViewToolbar,
-    PanZoomContainer,
-    // SelectionLayer,
-    NodesLayer,
-    OtherNodeslayer,
-    ConnectionsLayer,
-    OnBoard,
-  },
 }
 </script>
 
-<style scoped>
-.wrapper {
-  height: calc(100vh - 120px);
-  width: calc(100%-80px);
-  margin: 40px;
-  position: relative;
-}
-</style>
+<style scoped></style>