package.json

@@ -8,30 +8,29 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "core-js": "^3.17.2",
-    "focus-trap-vue": "3",
+    "core-js": "^3.29.0",
     "freeze-dry": "^0.2.5",
-    "marked": "^3.0.2",
+    "marked": "^3.0.7",
     "pouchdb": "^7.2.2",
-    "vue": "^3.2.8",
+    "vue": "^3.2.47",
     "vue-router": "^4.0.0",
     "vue3-swatches": "^1.0.3",
     "vuemoji-picker": "^0.0.7",
     "vuex": "^4.0.0"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "^4.5.12",
-    "@vue/cli-plugin-eslint": "^4.5.12",
-    "@vue/cli-plugin-router": "^4.5.12",
-    "@vue/cli-plugin-vuex": "^4.5.12",
-    "@vue/cli-service": "^4.5.12",
-    "@vue/compiler-sfc": "^3.2.8",
+    "@vue/cli-plugin-babel": "~5.0.8",
+    "@vue/cli-plugin-eslint": "~5.0.8",
+    "@vue/cli-plugin-router": "~5.0.8",
+    "@vue/cli-plugin-vuex": "~5.0.8",
+    "@vue/cli-service": "~5.0.8",
+    "@vue/compiler-sfc": "^3.2.20",
     "@vue/eslint-config-prettier": "^6.0.0",
     "babel-eslint": "^10.1.0",
     "eslint": "^7.32.0",
     "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-vue": "^7.17.0",
-    "prettier": "^2.3.2"
+    "eslint-plugin-vue": "^7.19.1",
+    "prettier": "^2.4.1"
   },
   "eslintConfig": {
     "root": true,
@@ -53,4 +52,4 @@
     "last 2 versions",
     "not dead"
   ]
-}
+}
\ No newline at end of file

src/App.vue

@@ -3,7 +3,7 @@
     <router-link to="/">Start</router-link> |
     <router-link to="/credits">Credits</router-link> |
     <router-link to="/collect">Collect</router-link> |
-    <router-link to="/cards">Cards</router-link> |
+    <router-link to="/allnodes">All Nodes</router-link> |
     <router-link to="/spatial">Spatial</router-link>
   </div>
   <router-view />

src/components/SpaceBase.vue

 <template>
-  <div></div>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 1000 1000"
+    width="450px"
+    ref="myref"
+  >
+    <g class="draggable-group" v-for="(nodes, index) in myArray" :key="index">
+      <rect width="150" height="200" style="fill: rgb(255, 0, 100)" />
+      <foreignObject id="x" x="10" width="131" height="100">
+        <textarea rows="3" cols="30" v-model="nodes.node_text"></textarea>
+      </foreignObject>
+    </g>
+  </svg>
 </template>
 
 <script>
 // @ is an alias to /src
 import { mapState } from 'vuex'
+// import drag from '@/mixins/drag'
 
 export default {
   name: 'SpaceBase',
   components: {},
   data() {
-    return {}
+    return {
+      myArray: [],
+    }
   },
 
   computed: {
     ...mapState({
+      myNodes: (state) => state.myNodes,
       otherNodes: (state) => state.otherNodes,
       allEmoji: (state) => state.allEmoji,
     }),
   },
 
+  props: {
+    added: Boolean,
+  },
+
+  watch: {
+    added: function () {
+      setTimeout(this.loadData, 500)
+    },
+  },
+
+  methods: {
+    loadData() {
+      var nodesFiltered = this.myNodes.myNodes.filter(
+        (nodes) => nodes.node_deleted == false
+      )
+      // this should probably be on the tool bar NOT HERE really
+      this.$store.dispatch('getMynodes')
+      this.$store.dispatch('getEmoji')
+      this.$store.dispatch('getPositions')
+
+      this.myArray = nodesFiltered.reverse()
+    },
+  },
+
+  // mixins: [
+  //   drag(this.$refs.svg, function () {
+  //     // drag
+  //   }),
+  // ],
+
   mounted() {
-    this.$store.dispatch('getPositions')
+    makeDraggable(this.$refs.myref)
+    setTimeout(this.loadData, 500)
+    if (localStorage.nogg_name && localStorage.nogg_microcosm) {
+      var devicename = localStorage.nogg_name
+      var microcosm = localStorage.nogg_microcosm
+      this.$store.dispatch('setMicrocosm', { devicename, microcosm })
+      // this.$store.dispatch('getEmoji')
+      // this.$store.dispatch('getPositions')
+    } else {
+      console.log('no')
+      // go home
+    }
   },
 }
+
+// THIS IS PLAIN JS should be a mixin
+
+function makeDraggable(svg) {
+  // var svg = evt.target
+  svg.addEventListener('mousedown', startDrag)
+  svg.addEventListener('mousemove', drag)
+  svg.addEventListener('mouseup', endDrag)
+  svg.addEventListener('mouseleave', endDrag)
+  svg.addEventListener('touchstart', startDrag)
+  svg.addEventListener('touchmove', drag)
+  svg.addEventListener('touchend', endDrag)
+  svg.addEventListener('touchleave', endDrag)
+  svg.addEventListener('touchcancel', endDrag)
+  function getMousePosition(evt) {
+    var CTM = svg.getScreenCTM()
+    if (evt.touches) {
+      evt = evt.touches[0]
+    }
+    return {
+      x: (evt.clientX - CTM.e) / CTM.a,
+      y: (evt.clientY - CTM.f) / CTM.d,
+    }
+  }
+  var selectedElement, offset, transform
+  function initialiseDragging(evt) {
+    offset = getMousePosition(evt)
+    // Make sure the first transform on the element is a translate transform
+    var transforms = selectedElement.transform.baseVal
+    if (
+      transforms.length === 0 ||
+      transforms.getItem(0).type !== SVGTransform.SVG_TRANSFORM_TRANSLATE
+    ) {
+      // Create an transform that translates by (0, 0)
+      var translate = svg.createSVGTransform()
+      translate.setTranslate(0, 0)
+      selectedElement.transform.baseVal.insertItemBefore(translate, 0)
+    }
+    // Get initial translation
+    transform = transforms.getItem(0)
+    offset.x -= transform.matrix.e
+    offset.y -= transform.matrix.f
+  }
+  function startDrag(evt) {
+    if (evt.target.classList.contains('draggable')) {
+      selectedElement = evt.target
+      initialiseDragging(evt)
+    } else if (evt.target.parentNode.classList.contains('draggable-group')) {
+      selectedElement = evt.target.parentNode
+      initialiseDragging(evt)
+    }
+  }
+  function drag(evt) {
+    if (selectedElement) {
+      evt.preventDefault()
+      var coord = getMousePosition(evt)
+      transform.setTranslate(coord.x - offset.x, coord.y - offset.y)
+    }
+  }
+  function endDrag() {
+    selectedElement = false
+  }
+}
 </script>
 
-<style scoped></style>
+<style scoped>
+.draggable-group {
+  cursor: move;
+  max-width: 150px;
+}
+
+.static {
+  cursor: not-allowed;
+}
+</style>

src/components/ToolBar.vue

 <template>
   <div>
-    <button @click="addNode()">Add Node</button>
-    <button>Select Node</button>
+    <button @click="addNode()">+ Add Node</button>
+    <!-- <button>Select Node</button>
     <button>Make Connections</button>
-    <UploadMedia />
-    <button @click="exitMicrocosm()">Exit</button>
-    <p>{{ microcosm }}</p>
+    <UploadMedia /> -->
+    <button class="leave" @click="exitMicrocosm()">
+      &lt;- Leave Microcosm
+    </button>
+    <!-- <p>{{ microcosm }}</p> -->
   </div>
 </template>
 
 <script>
 // @ is an alias to /src
-import UploadMedia from '@/components/UploadMedia.vue'
+// import UploadMedia from '@/components/UploadMedia.vue'
 import shortcuts from '@/mixins/shortcuts'
 
 export default {
   name: 'ToolBar',
   components: {
-    UploadMedia,
+    // UploadMedia,
   },
   data() {
     return {
@@ -57,4 +59,8 @@ export default {
 }
 </script>
 
-<style scoped></style>
+<style scoped>
+.leave {
+  /* background-color: red; */
+}
+</style>

src/mixins/drag.js

+export default function makeDraggable(evt) {
+  var svg = evt.target
+  svg.addEventListener('mousedown', startDrag)
+  svg.addEventListener('mousemove', drag)
+  svg.addEventListener('mouseup', endDrag)
+  svg.addEventListener('mouseleave', endDrag)
+  svg.addEventListener('touchstart', startDrag)
+  svg.addEventListener('touchmove', drag)
+  svg.addEventListener('touchend', endDrag)
+  svg.addEventListener('touchleave', endDrag)
+  svg.addEventListener('touchcancel', endDrag)
+  function getMousePosition(evt) {
+    var CTM = svg.getScreenCTM()
+    if (evt.touches) {
+      evt = evt.touches[0]
+    }
+    return {
+      x: (evt.clientX - CTM.e) / CTM.a,
+      y: (evt.clientY - CTM.f) / CTM.d,
+    }
+  }
+  var selectedElement, offset, transform
+  function initialiseDragging(evt) {
+    offset = getMousePosition(evt)
+    // Make sure the first transform on the element is a translate transform
+    var transforms = selectedElement.transform.baseVal
+    if (
+      transforms.length === 0 ||
+      transforms.getItem(0).type !== SVGTransform.SVG_TRANSFORM_TRANSLATE
+    ) {
+      // Create an transform that translates by (0, 0)
+      var translate = svg.createSVGTransform()
+      translate.setTranslate(0, 0)
+      selectedElement.transform.baseVal.insertItemBefore(translate, 0)
+    }
+    // Get initial translation
+    transform = transforms.getItem(0)
+    offset.x -= transform.matrix.e
+    offset.y -= transform.matrix.f
+  }
+  function startDrag(evt) {
+    if (evt.target.classList.contains('draggable')) {
+      selectedElement = evt.target
+      initialiseDragging(evt)
+    } else if (evt.target.parentNode.classList.contains('draggable-group')) {
+      selectedElement = evt.target.parentNode
+      initialiseDragging(evt)
+    }
+  }
+  function drag(evt) {
+    if (selectedElement) {
+      evt.preventDefault()
+      var coord = getMousePosition(evt)
+      transform.setTranslate(coord.x - offset.x, coord.y - offset.y)
+    }
+  }
+  function endDrag(evt) {
+    selectedElement = false
+  }
+}

src/router/index.js

@@ -39,14 +39,14 @@ const routes = [
   },
 
   {
-    path: '/cards',
-    name: 'Cards',
+    path: '/allnodes',
+    name: 'All Nodes',
     beforeEnter: guardMyroute,
     // route level code-splitting
     // this generates a separate chunk (credits.[hash].js) for this route
     // which is lazy-loaded when the route is visited.
     component: () =>
-      import(/* webpackChunkName: "cards" */ '../views/Cards.vue'),
+      import(/* webpackChunkName: "cards" */ '../views/Nodes.vue'),
   },
   {
     path: '/spatial',

src/views/Cards.vue → src/views/Nodes.vue

@@ -14,7 +14,7 @@ export default {
   mounted() {
     this.$store.dispatch('getMicrocosm')
   },
-  name: 'Collect',
+  name: 'Nodes',
 
   components: {
     ToolBar,

src/views/Spatial.vue

 <template>
   <ToolBar @added-node="addedNode" />
-  <SpaceBase />
+  <SpaceBase :added="added" />
 </template>
 
 <script>
@@ -22,6 +22,12 @@ export default {
       added: false,
     }
   },
+
+  methods: {
+    addedNode() {
+      this.added = !this.added
+    },
+  },
 }
 </script>