From e274a0948e6c41691d553a5cc7ada05c0d6f204f Mon Sep 17 00:00:00 2001
From: Adam Procter <adamprocter@researchnot.es>
Date: Wed, 25 Mar 2020 13:21:00 +0000
Subject: [PATCH] added shortcuts support
added n key
---
CHANGELOG.md | 12 ++++++++++
app/package.json | 6 ++---
app/src/components/NodesLayer.vue | 26 +++++++++++++++++----
app/src/components/mixins/shortcutsMixin.js | 16 +++++++++++++
app/src/store/index.js | 11 +++++++++
app/src/views/About.vue | 9 +++----
app/src/views/Home.vue | 26 ++++++++++++++++++++-
app/yarn.lock | 12 +++++-----
vscode.code-workspace | 8 +++++++
9 files changed, 105 insertions(+), 21 deletions(-)
create mode 100644 app/src/components/mixins/shortcutsMixin.js
create mode 100644 vscode.code-workspace
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 01c0214..4be71de 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,15 @@
+# 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_
diff --git a/app/package.json b/app/package.json
index f19c71f..a4a0fb0 100644
--- a/app/package.json
+++ b/app/package.json
@@ -1,6 +1,6 @@
{
"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",
diff --git a/app/src/components/NodesLayer.vue b/app/src/components/NodesLayer.vue
index 7d1eecc..d568214 100644
--- a/app/src/components/NodesLayer.vue
+++ b/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
diff --git a/app/src/components/mixins/shortcutsMixin.js b/app/src/components/mixins/shortcutsMixin.js
new file mode 100644
index 0000000..1a1f17a
--- /dev/null
+++ b/app/src/components/mixins/shortcutsMixin.js
@@ -0,0 +1,16 @@
+export const shortcutsMixin = {
+ created() {
+ // console.log('hey mix')
+ },
+ methods: {
+ handleKeyPress(e) {
+ if (this.shortcutstate == false) {
+ if (e.keyCode == 78) {
+ // n for new
+
+ this.addNode()
+ }
+ }
+ }
+ }
+}
diff --git a/app/src/store/index.js b/app/src/store/index.js
index d2a0d61..6279f1a 100644
--- a/app/src/store/index.js
+++ b/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)
diff --git a/app/src/views/About.vue b/app/src/views/About.vue
index 3e70fd6..14062cd 100644
--- a/app/src/views/About.vue
+++ b/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
diff --git a/app/src/views/Home.vue b/app/src/views/Home.vue
index 42609fe..b2f76c9 100644
--- a/app/src/views/Home.vue
+++ b/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
},
diff --git a/app/yarn.lock b/app/yarn.lock
index 21f31f0..8ff5c86 100644
--- a/app/yarn.lock
+++ b/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"
diff --git a/vscode.code-workspace b/vscode.code-workspace
new file mode 100644
index 0000000..022c3e5
--- /dev/null
+++ b/vscode.code-workspace
@@ -0,0 +1,8 @@
+{
+ "folders": [
+ {
+ "path": "."
+ }
+ ],
+ "settings": {}
+}
--
GitLab