diff --git a/CHANGELOG.md b/CHANGELOG.md
index 01c021445a34171204a39325cdaa3070c13c4bf1..4be71dedd8cd296ddb02d16ec3a497e6932dd183 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 f19c71fb937c5e585b2a33d4505a241e38fa4135..a4a0fb0e24a64f0b1ee0951443e9f861eed77d54 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 7d1eecc4cf0b366c1e16cd7ab34c0a0f2d731747..d5682140c2a23d5582893c6b3bccee9828bc7f6b 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 0000000000000000000000000000000000000000..1a1f17a635cf23235675cd2664e16848427a570d
--- /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 d2a0d61a7c5f3b5d6c39b99bee7c070d803320b1..6279f1a0b1d346d6e8506cea5548d29b27bb4569 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 3e70fd61867100689a1ab2df5a61eb9d818222f1..14062cd7d160dd7d4d835ca6c05bae539f10f12b 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 42609fe0508c18863b629aba1b8fdc378ccb5809..b2f76c905a93c0657cacf5c2fdd315b8d1cb1883 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 21f31f0be1a8d2b9f0a95d7f81f00c0ac83f1141..8ff5c863eda4c0e348db3599c64d8df8f40ccf02 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 0000000000000000000000000000000000000000..022c3e5cc0e90ee0aa0c117db1c7b4cc64d0e68c
--- /dev/null
+++ b/vscode.code-workspace
@@ -0,0 +1,8 @@
+{
+ "folders": [
+ {
+ "path": "."
+ }
+ ],
+ "settings": {}
+}