added shortcuts support

added n key

CHANGELOG.md

+# 0.1.8
+
+_25th March 2020_
+
+### Added
+
+- New start of Keyboard Shortcut support, pressing n key now creates new nodes.
+
+### Changed
+
+- Simplified About page opening text
+
 # 0.1.7
 
 _15th March 2020_

app/package.json

 {
   "name": "nodenogg.in",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",
@@ -9,11 +9,11 @@
   },
   "dependencies": {
     "core-js": "^3.6.4",
-    "marked": "^0.8.0",
+    "marked": "^0.8.2",
     "pouchdb": "^7.2.1",
     "pouchdb-find": "^7.2.1",
     "vue": "^2.6.11",
-    "vue-context": "^5.0.0",
+    "vue-context": "^5.1.0",
     "vue-draggable-resizable": "^2.1.0",
     "vue-emoji-picker": "^1.0.1",
     "vue-router": "^3.1.6",

app/src/components/NodesLayer.vue

@@ -20,11 +20,15 @@
         <form>
           <div v-for="value in myNodes" v-bind:key="value.node_id">
             <textarea
+              @focus="editTrue(true)"
+              @blur="editTrue(false)"
+              autofocus
               v-if="nodeid == value.node_id"
               @input="editNode"
               v-model="value.node_text"
               :id="nodeid"
               class="drag-cancel"
+              ref="nodetext"
             ></textarea>
           </div>
           <h3>Reactions</h3>
@@ -59,10 +63,20 @@ export default {
       pickupz: 99
     }
   },
+  // FIXME: how do we know how to focus on the newest node ?
+  // FIXME: Tab between them would also be good
+  // var delay = 100
+  // var input
+  // mounted() {
+  //   setTimeout(this.setFocus, delay)
+  //   input = this.$refs.nodetext
+  //   console.log(input)
+  // },
+  // method
+  // setFocus() {
+  //   this.$refs.nodetext.focus()
+  // },
 
-  mounted() {
-    //
-  },
   computed: mapState({
     myNodes: state => state.myNodes,
     configPositions: state => state.configPositions,
@@ -134,9 +148,11 @@ export default {
       })
     },
 
-    setFocus() {
-      // this.$refs.nodetext.focus()
+    editTrue(e) {
+      this.$emit('editTrue', e)
+      //  console.log(e)
     },
+
     editNode(e) {
       var nodeid = e.target.id
       var nodetext = e.target.value

app/src/components/mixins/shortcutsMixin.js

+export const shortcutsMixin = {
+  created() {
+    //  console.log('hey mix')
+  },
+  methods: {
+    handleKeyPress(e) {
+      if (this.shortcutstate == false) {
+        if (e.keyCode == 78) {
+          // n for new
+
+          this.addNode()
+        }
+      }
+    }
+  }
+}

app/src/store/index.js

@@ -34,6 +34,7 @@ var remote =
 
 const store = new Vuex.Store({
   state: {
+    shortcutstate: false,
     version: process.env.VUE_APP_VERSION,
     localnodeid: '',
     global_pos_name: 'positions',
@@ -230,6 +231,12 @@ const store = new Vuex.Store({
         })
     },
 
+    //
+
+    SHORTCUT_STATE(state, e) {
+      state.shortcutstate = e
+    },
+
     ADD_NODE(state, e) {
       var uniqueid =
         Math.random()
@@ -460,6 +467,10 @@ const store = new Vuex.Store({
     editNode: ({ commit }, { nodeid, nodetext }) => {
       commit('EDIT_NODE', { nodeid, nodetext })
     },
+
+    shortcutState: ({ commit }, e) => {
+      commit('SHORTCUT_STATE', e)
+    },
     deleteFlag: ({ commit }, e) => {
       // var text = e.target.value
       commit('DELETE_FLAG', e)

app/src/views/About.vue

@@ -2,12 +2,9 @@
   <div class="about">
     <h1>About</h1>
     <p>
-      Currently digital tools do a really poor job of extending the design
-      studio design thinking processes.
-    </p>
-    <p>
-      This tool is designed to support a new type of co-creation, a spatial and
-      messy area to work together connecting ideas and concepts.
+      nodenogg.in is designed to support a new type of co-creation, a messy
+      spatial area in which you work together creating and connecting ideas and
+      concepts
     </p>
     <p>
       Made by Adam Procter

app/src/views/Home.vue

@@ -9,6 +9,7 @@
       />
 
       <NodesLayer
+        @editTrue="(e) => editTrue(e)"
         v-for="value in myNodes"
         v-bind:key="value.node_id"
         v-bind:nodeid="value.node_id"
@@ -29,9 +30,22 @@ import OtherNodeslayer from '@/components/OtherNodeslayer.vue'
 import ControlsLayer from '@/components/ControlsLayer.vue'
 
 import { mapState } from 'vuex'
+import { shortcutsMixin } from '@/components/mixins/shortcutsMixin.js'
 
 export default {
   name: 'Home',
+  // Shortcut mixin is here so we can call the keyboard controls anytime
+  mixins: [shortcutsMixin],
+  created() {
+    if (typeof window !== 'undefined') {
+      document.addEventListener('keydown', this.handleKeyPress)
+    }
+  },
+  beforeDestroy() {
+    if (typeof window !== 'undefined') {
+      document.removeEventListener('keydown', this.handleKeyPress)
+    }
+  },
 
   data: function() {
     return {
@@ -48,13 +62,23 @@ export default {
   },
   computed: mapState({
     myNodes: state => state.myNodes,
-    otherNodes: state => state.otherNodes
+    otherNodes: state => state.otherNodes,
+    shortcutstate: state => state.shortcutstate
   }),
   methods: {
     clientAdded() {
       this.clientset = !this.clientset
     },
 
+    editTrue(e) {
+      this.$store.dispatch('shortcutState', e)
+    },
+
+    // This is here to support the shortcuts
+    addNode() {
+      this.$store.dispatch('addNode')
+    },
+
     offlineTriggered() {
       this.offline = true
     },

app/yarn.lock

@@ -4511,9 +4511,9 @@ map-visit@^1.0.0:
   dependencies:
     object-visit "^1.0.0"
 
-marked@^0.8.0:
-  version "0.8.0"
-  resolved "https://registry.yarnpkg.com/marked/-/marked-0.8.0.tgz#ec5c0c9b93878dc52dd54be8d0e524097bd81a99"
+marked@^0.8.2:
+  version "0.8.2"
+  resolved "https://registry.yarnpkg.com/marked/-/marked-0.8.2.tgz#4faad28d26ede351a7a1aaa5fec67915c869e355"
 
 md5.js@^1.3.4:
   version "1.3.5"
@@ -7198,9 +7198,9 @@ vue-clickaway@^2.2.2:
   dependencies:
     loose-envify "^1.2.0"
 
-vue-context@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/vue-context/-/vue-context-5.0.0.tgz#7f9a90bb00a45eba6aad1d49fdf9e0a946bf503f"
+vue-context@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/vue-context/-/vue-context-5.1.0.tgz#cf007f4728d36c007a8fb7dcf75f61b8c8251343"
   dependencies:
     vue-clickaway "^2.2.2"
 

vscode.code-workspace

+{
+  "folders": [
+    {
+      "path": "."
+    }
+  ],
+  "settings": {}
+}