Merge branch 'ToolBar2' into main

app/src/components/NodesLayer.vue

@@ -311,10 +311,40 @@ export default {
     //             this.input = e.target.value;
     //           }, 300)
 
+    // editNode(e) {
+    //   const el = e.target
+    //   const cursorPos = el.selectionStart
+    //   console.log(cursorPos)
+    //   var nodeid = e.target.id
+    //   var nodetext = e.target.value
+    //   this.$store.dispatch('editNode', { nodeid, nodetext })
+
+    //   this.$nextTick(() => {
+    //     e.target.selectionStart = e.target.selectionEnd = cursorPos
+    //   })
+
+    // this.$nextTick(() => {
+    //   el.setSelectionRange(cursorPos, cursorPos)
+    // })
+    //},
+
+    // editNode: lodash.debounce(function (e) {
+    //   var nodeid = e.target.id
+    //   var nodetext = e.target.value
+    //   this.$store.dispatch('editNode', { nodeid, nodetext })
+    // }, 600),
+
     editNode: lodash.debounce(function (e) {
+      const el = e.target
+      const cursorPos = el.selectionStart
+
       var nodeid = e.target.id
       var nodetext = e.target.value
       this.$store.dispatch('editNode', { nodeid, nodetext })
+
+      this.$nextTick(() => {
+        el.setSelectionRange(cursorPos, cursorPos)
+      })
     }, 600),
 
     deleteFlag(e) {

app/src/components/OnBoard.vue

@@ -43,7 +43,7 @@
       class="innernode"
       :w="310"
       :h="375"
-      :x="1050"
+      :x="850"
       :y="15"
       :z="1"
       :draggable="true"

app/src/components/ToolBar.vue

+<template>
+  <div ref="nodes" class="node">
+    <vue-draggable-resizable
+      class="innernode"
+      :w="127"
+      :h="84"
+      :x="0"
+      :y="0"
+      :z="1"
+      :draggable="true"
+      :resizable="false"
+      style="border: 0px"
+    >
+      <svg xmlns="http://www.w3.org/2000/svg" class="newnode">
+        <g transform="translate(-1345 -843)">
+          <rect
+            class="a"
+            width="127"
+            height="84"
+            transform="translate(1345 865)"
+          />
+          <g class="b" transform="translate(1361 843)">
+            <rect class="d" width="127" height="84" />
+            <rect class="e" x="3.5" y="3.5" width="120" height="77" />
+          </g>
+          <line class="c" x2="41" transform="translate(1406.5 884.5)" />
+          <line class="c" y2="41" transform="translate(1426.5 863.5)" />
+        </g>
+      </svg>
+    </vue-draggable-resizable>
+  </div>
+</template>
+
+<script>
+export default {
+  data: function () {
+    return {}
+  },
+}
+</script>
+
+<style lang="css" scoped>
+.a {
+  fill: #333;
+}
+.b {
+  fill: #fff;
+}
+.b,
+.c {
+  stroke: #333;
+  stroke-width: 7px;
+}
+.c,
+.e {
+  fill: none;
+}
+.d {
+  stroke: none;
+}
+</style>

app/src/store/index.js

@@ -107,6 +107,7 @@ const store = new Vuex.Store({
           state.microcosm = microcosm
           state.allNodes = doc.rows
           store.commit('SET_OTHER_NODES')
+          store.commit('GET_MY_NODES')
         })
         .catch(function (err) {
           console.log(err)
@@ -659,8 +660,7 @@ const store = new Vuex.Store({
     syncDB: () => {
       pouchdb.replicate.from(remote).on('complete', function () {
         store.commit('GET_ALL_NODES')
-        store.commit('GET_MY_NODES')
-
+        //  store.commit('GET_MY_NODES')
         store.commit('GET_POSITIONS')
         store.commit('GET_CONNECTIONS')
         store.commit('GET_EMOJI')
@@ -675,7 +675,7 @@ const store = new Vuex.Store({
           .on('change', function () {
             // pop info into function to find out more
             store.commit('GET_ALL_NODES')
-            store.commit('GET_MY_NODES')
+            //   store.commit('GET_MY_NODES')
 
             store.commit('GET_POSITIONS')
             store.commit('GET_CONNECTIONS')

app/src/views/Home.vue

@@ -76,7 +76,7 @@
           </div>
           <ScribbleLayer v-bind:drawready="drawready"></ScribbleLayer>
         </PanZoomContainer>
-
+        <!-- <ToolBar /> -->
         <ModeToolbar
           @offlineTriggered="offlineTriggered()"
           @onlineTriggered="onlineTriggered()"
@@ -102,6 +102,7 @@ import PanZoomContainer from '@/experimental/PanZoomContainer'
 import ConnectionsLayer from '@/components/ConnectionsLayer'
 import NodesLayer from '@/components/NodesLayer'
 import OffLine from '@/components/OffLine'
+// import ToolBar from '@/components/ToolBar'
 import ScribbleLayer from '@/components/ScribbleLayer'
 import UploadLayer from '@/components/UploadLayer'
 import OtherNodeslayer from '@/components/OtherNodeslayer.vue'
@@ -225,6 +226,7 @@ export default {
     OtherNodeslayer,
     ConnectionsLayer,
     OnBoard,
+    // ToolBar,
     OffLine,
     UploadLayer,
     ScribbleLayer,