From 658eb226dae7eb28b485b2f6f68e1bb028b3919b Mon Sep 17 00:00:00 2001
From: Adam Procter <adamprocter@researchnot.es>
Date: Tue, 14 Apr 2020 23:33:19 +0100
Subject: [PATCH] Auto stash before merge of
"feature/nodes-and-connections-canvas" and "listView"
---
app/.eslintrc.js | 8 +-
app/.prettierrc.js | 2 +-
app/babel.config.js | 2 +-
app/src/components/BaseButton.vue | 6 +-
app/src/components/ControlsLayer.vue | 24 +--
app/src/components/ListLayer.vue | 8 +-
app/src/components/NodesLayer.vue | 20 +-
app/src/components/OnBoard.vue | 8 +-
app/src/components/OtherListlayer.vue | 8 +-
app/src/components/OtherNodeslayer.vue | 28 +--
app/src/components/mixins/drag.js | 4 +-
app/src/components/mixins/draw.js | 4 +-
app/src/components/mixins/shortcutsMixin.js | 4 +-
app/src/experimental/ModeToolbar.vue | 5 +-
app/src/experimental/PanZoomContainer.vue | 4 +-
.../experimental/icons/library/addNode.vue | 14 +-
app/src/experimental/icons/library/idea.vue | 2 +-
app/src/experimental/icons/library/index.js | 13 +-
.../experimental/icons/library/magnify.vue | 10 +-
app/src/experimental/icons/library/minus.vue | 2 +-
app/src/experimental/icons/library/move.vue | 10 +-
app/src/experimental/icons/library/plus.vue | 8 +-
app/src/experimental/icons/library/select.vue | 1 -
app/src/experimental/modes/select.js | 6 +-
app/src/experimental/utils/canvas.js | 6 +-
app/src/experimental/utils/dom.js | 4 +-
app/src/experimental/utils/nodes.js | 4 +-
app/src/experimental/utils/numbers.js | 26 +--
app/src/experimental/utils/view.js | 183 ++++++++++--------
app/src/main.js | 2 +-
app/src/router/index.js | 12 +-
app/src/store/index.js | 144 +++++++-------
app/src/views/About.vue | 6 +-
app/src/views/Home.vue | 18 +-
app/vue.config.js | 16 +-
35 files changed, 344 insertions(+), 278 deletions(-)
diff --git a/app/.eslintrc.js b/app/.eslintrc.js
index ec03089..f0d6621 100644
--- a/app/.eslintrc.js
+++ b/app/.eslintrc.js
@@ -1,14 +1,14 @@
module.exports = {
root: true,
env: {
- node: true,
+ node: true
},
extends: ['plugin:vue/essential', 'eslint:recommended', '@vue/prettier'],
parserOptions: {
- parser: 'babel-eslint',
+ parser: 'babel-eslint'
},
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
- 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
- },
+ 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
+ }
}
diff --git a/app/.prettierrc.js b/app/.prettierrc.js
index 3f714ac..a6b80c2 100644
--- a/app/.prettierrc.js
+++ b/app/.prettierrc.js
@@ -1,4 +1,4 @@
module.exports = {
singleQuote: true,
- semi: false,
+ semi: false
}
diff --git a/app/babel.config.js b/app/babel.config.js
index c1b783e..716b023 100644
--- a/app/babel.config.js
+++ b/app/babel.config.js
@@ -1,3 +1,3 @@
module.exports = {
- presets: ['@vue/cli-plugin-babel/preset'],
+ presets: ['@vue/cli-plugin-babel/preset']
}
diff --git a/app/src/components/BaseButton.vue b/app/src/components/BaseButton.vue
index 9af3b7b..4404fce 100644
--- a/app/src/components/BaseButton.vue
+++ b/app/src/components/BaseButton.vue
@@ -11,9 +11,9 @@
export default {
props: {
buttonClass: {
- type: String,
- },
- },
+ type: String
+ }
+ }
}
</script>
diff --git a/app/src/components/ControlsLayer.vue b/app/src/components/ControlsLayer.vue
index 59a3a9c..7401fae 100644
--- a/app/src/components/ControlsLayer.vue
+++ b/app/src/components/ControlsLayer.vue
@@ -45,8 +45,8 @@ export default {
},
computed: mapState({
- myMicrocosm: (state) => state.microcosm,
- myClient: (state) => state.myclient,
+ myMicrocosm: state => state.microcosm,
+ myClient: state => state.myclient
}),
methods: {
addNode() {
@@ -56,11 +56,11 @@ export default {
// FIXME: add action here to toggle visiblity
this.$emit('listView')
},
- exportStorage: function () {
+ exportStorage: function() {
// Save local indexeddb document-store to JSON file
// or export state.notes to JSON file
},
- removeLocal: function () {
+ removeLocal: function() {
localStorage.removeItem('myNNClient')
localStorage.removeItem('mylastMicrocosm')
// Hardcoded as when I set a URL had parameters the reload fails
@@ -76,10 +76,10 @@ export default {
deleteClient() {
this.$store.dispatch('deleteClient')
},
- handleConnection: function () {
+ handleConnection: function() {
var ref = this
if (navigator.onLine) {
- this.isReachable(this.getServerUrl()).then(function (online) {
+ this.isReachable(this.getServerUrl()).then(function(online) {
if (online) {
// handle online status
console.log('online')
@@ -94,19 +94,19 @@ export default {
ref.$emit('offlineTriggered')
}
},
- isReachable: function (url) {
+ isReachable: function(url) {
return fetch(url, { method: 'HEAD', mode: 'no-cors' })
- .then(function (resp) {
+ .then(function(resp) {
return resp && (resp.ok || resp.type === 'opaque')
})
- .catch(function (err) {
+ .catch(function(err) {
console.warn('[conn test failure]:', err)
})
},
- getServerUrl: function () {
+ getServerUrl: function() {
return serverUrl || window.location.origin
- },
- },
+ }
+ }
}
</script>
diff --git a/app/src/components/ListLayer.vue b/app/src/components/ListLayer.vue
index cb5ef61..91e4de6 100644
--- a/app/src/components/ListLayer.vue
+++ b/app/src/components/ListLayer.vue
@@ -18,17 +18,17 @@ export default {
name: 'ListLayer',
props: {
nodeid: String,
- nodetext: String,
+ nodetext: String
},
computed: mapState({
- myNodes: (state) => state.myNodes,
+ myNodes: state => state.myNodes
}),
filters: {
// need to write a reverse data filter I suspect here so new data is at the top of list
- marked: marked,
- },
+ marked: marked
+ }
}
</script>
diff --git a/app/src/components/NodesLayer.vue b/app/src/components/NodesLayer.vue
index d9e299a..fa2c456 100644
--- a/app/src/components/NodesLayer.vue
+++ b/app/src/components/NodesLayer.vue
@@ -76,19 +76,19 @@ export default {
nodetext: String,
nodewidth: Number,
nodeheight: Number,
- deleted: Boolean,
+ deleted: Boolean
},
data() {
return {
pickupz: 99,
readmode: false,
- mode: 'Read',
+ mode: 'Read'
}
},
filters: {
- marked: marked,
+ marked: marked
},
// FIXME: how do we know how to focus on the newest node ?
@@ -106,9 +106,9 @@ export default {
// },
computed: mapState({
- myNodes: (state) => state.myNodes,
- configPositions: (state) => state.configPositions,
- configEmoji: (state) => state.configEmoji,
+ myNodes: state => state.myNodes,
+ configPositions: state => state.configPositions,
+ configEmoji: state => state.configEmoji
}),
methods: {
onActivated() {
@@ -146,7 +146,7 @@ export default {
y,
width,
height,
- zindex,
+ zindex
})
},
onDrag(x, y) {
@@ -172,7 +172,7 @@ export default {
y,
width,
height,
- zindex,
+ zindex
})
},
@@ -198,8 +198,8 @@ export default {
this.readmode = true
this.mode = 'Edit'
}
- },
- },
+ }
+ }
}
</script>
diff --git a/app/src/components/OnBoard.vue b/app/src/components/OnBoard.vue
index 08af184..d5aa8b0 100644
--- a/app/src/components/OnBoard.vue
+++ b/app/src/components/OnBoard.vue
@@ -73,13 +73,13 @@ var delaytwo = 100
import Router from '@/router'
export default {
- data: function () {
+ data: function() {
return {
localmicrocosm: Router.currentRoute.params.microcosm,
clientid: '',
parta: true,
partb: false,
- partc: false,
+ partc: false
}
},
@@ -120,8 +120,8 @@ export default {
},
readyFocusTwo() {
this.$refs.objectnametwo.focus()
- },
- },
+ }
+ }
}
</script>
diff --git a/app/src/components/OtherListlayer.vue b/app/src/components/OtherListlayer.vue
index 348f2af..c2c267f 100644
--- a/app/src/components/OtherListlayer.vue
+++ b/app/src/components/OtherListlayer.vue
@@ -20,17 +20,17 @@ export default {
name: 'OtherListlayer',
props: {
nodeid: String,
- nodetext: String,
+ nodetext: String
},
computed: mapState({
- otherNodes: (state) => state.otherNodes,
+ otherNodes: state => state.otherNodes
}),
filters: {
// need to write a reverse data filter I suspect here so new data is at the top of list
- marked: marked,
- },
+ marked: marked
+ }
}
</script>
diff --git a/app/src/components/OtherNodeslayer.vue b/app/src/components/OtherNodeslayer.vue
index e3c83a0..c874492 100644
--- a/app/src/components/OtherNodeslayer.vue
+++ b/app/src/components/OtherNodeslayer.vue
@@ -99,32 +99,32 @@ export default {
name: 'otherNodeslayer',
components: {
- EmojiPicker,
+ EmojiPicker
},
props: {
nodeid: String,
nodetext: String,
nodewidth: Number,
- nodeheight: Number,
+ nodeheight: Number
},
data() {
return {
input: '',
search: '',
- pickupz: 99,
+ pickupz: 99
}
},
filters: {
- marked: marked,
+ marked: marked
},
mounted() {},
computed: mapState({
- otherNodes: (state) => state.otherNodes,
- configPositions: (state) => state.configPositions,
- configEmoji: (state) => state.configEmoji,
+ otherNodes: state => state.otherNodes,
+ configPositions: state => state.configPositions,
+ configEmoji: state => state.configEmoji
}),
methods: {
onActivated() {
@@ -162,7 +162,7 @@ export default {
y,
width,
height,
- zindex,
+ zindex
})
},
onDrag(x, y) {
@@ -188,7 +188,7 @@ export default {
y,
width,
height,
- zindex,
+ zindex
})
},
append(emoji) {
@@ -199,19 +199,19 @@ export default {
nodeid = this.nodeid
this.$store.dispatch('addEmoji', {
nodeid,
- emojitext,
+ emojitext
})
this.input = ''
- },
+ }
},
directives: {
focus: {
inserted(el) {
el.focus()
- },
- },
- },
+ }
+ }
+ }
}
</script>
diff --git a/app/src/components/mixins/drag.js b/app/src/components/mixins/drag.js
index 04c94bb..d270cb7 100644
--- a/app/src/components/mixins/drag.js
+++ b/app/src/components/mixins/drag.js
@@ -60,6 +60,6 @@ export const drag = {
function setTranslate(xPos, yPos, el) {
el.style.transform = 'translate3d(' + xPos + 'px, ' + yPos + 'px, 0)'
}
- },
- },
+ }
+ }
}
diff --git a/app/src/components/mixins/draw.js b/app/src/components/mixins/draw.js
index 2381617..9bd5dc3 100644
--- a/app/src/components/mixins/draw.js
+++ b/app/src/components/mixins/draw.js
@@ -25,6 +25,6 @@ export const draw = {
ctx.stroke()
ctx.setTransform(1, 0, 0, 1, 0, 0)
- },
- },
+ }
+ }
}
diff --git a/app/src/components/mixins/shortcutsMixin.js b/app/src/components/mixins/shortcutsMixin.js
index 281e164..1a1f17a 100644
--- a/app/src/components/mixins/shortcutsMixin.js
+++ b/app/src/components/mixins/shortcutsMixin.js
@@ -11,6 +11,6 @@ export const shortcutsMixin = {
this.addNode()
}
}
- },
- },
+ }
+ }
}
diff --git a/app/src/experimental/ModeToolbar.vue b/app/src/experimental/ModeToolbar.vue
index 98484e3..59ca38d 100644
--- a/app/src/experimental/ModeToolbar.vue
+++ b/app/src/experimental/ModeToolbar.vue
@@ -6,7 +6,10 @@
v-bind:key="mode.name"
v-bind:class="isActive(mode) ? 'active' : 'inactive'"
>
- <Icon v-bind:type="mode.icon" v-bind:theme="isActive(mode) ? 'light' : 'dark'" />
+ <Icon
+ v-bind:type="mode.icon"
+ v-bind:theme="isActive(mode) ? 'light' : 'dark'"
+ />
</button>
</nav>
</template>
diff --git a/app/src/experimental/PanZoomContainer.vue b/app/src/experimental/PanZoomContainer.vue
index adc5007..3b06ff3 100644
--- a/app/src/experimental/PanZoomContainer.vue
+++ b/app/src/experimental/PanZoomContainer.vue
@@ -138,7 +138,7 @@ export default {
if (!this.interaction.origin) {
return
}
- console.log('touch')
+ console.log('touch')
e.preventDefault()
const isPinchAction =
e.touches.length == 2 && this.interaction.origin.points.length > 1
@@ -156,7 +156,7 @@ export default {
e.preventDefault()
e.stopPropagation()
- console.log(e)
+ console.log(e)
this.handleWheel(e)
},
diff --git a/app/src/experimental/icons/library/addNode.vue b/app/src/experimental/icons/library/addNode.vue
index fa6ea56..0956ca9 100644
--- a/app/src/experimental/icons/library/addNode.vue
+++ b/app/src/experimental/icons/library/addNode.vue
@@ -5,8 +5,16 @@
clip-rule="evenodd"
d="M37 15H17.1154V30.8636H37V15ZM15.1154 13V32.8636H39V13H15.1154Z"
/>
- <path fill-rule="evenodd" clip-rule="evenodd" d="M26 27L26 19L28 19L28 27L26 27Z" />
+ <path
+ fill-rule="evenodd"
+ clip-rule="evenodd"
+ d="M26 27L26 19L28 19L28 27L26 27Z"
+ />
<path fill-rule="evenodd" clip-rule="evenodd" d="M31 24H23V22H31V24Z" />
- <path fill-rule="evenodd" clip-rule="evenodd" d="M16 16.1364H12V36H35.8846V32H16V16.1364Z" />
+ <path
+ fill-rule="evenodd"
+ clip-rule="evenodd"
+ d="M16 16.1364H12V36H35.8846V32H16V16.1364Z"
+ />
</g>
-</template>
\ No newline at end of file
+</template>
diff --git a/app/src/experimental/icons/library/idea.vue b/app/src/experimental/icons/library/idea.vue
index 85778e7..656647e 100644
--- a/app/src/experimental/icons/library/idea.vue
+++ b/app/src/experimental/icons/library/idea.vue
@@ -19,4 +19,4 @@
d="M14.0196 13.6294L17.0858 16.6956L15.6716 18.1098L12.6054 15.0436L14.0196 13.6294Z"
/>
</g>
-</template>
\ No newline at end of file
+</template>
diff --git a/app/src/experimental/icons/library/index.js b/app/src/experimental/icons/library/index.js
index 18ae6eb..1bca010 100644
--- a/app/src/experimental/icons/library/index.js
+++ b/app/src/experimental/icons/library/index.js
@@ -9,4 +9,15 @@ import person from './person'
import plus from './plus'
import select from './select'
-export { addNode, connection, draw, idea, magnify, minus, move, person, plus, select }
+export {
+ addNode,
+ connection,
+ draw,
+ idea,
+ magnify,
+ minus,
+ move,
+ person,
+ plus,
+ select
+}
diff --git a/app/src/experimental/icons/library/magnify.vue b/app/src/experimental/icons/library/magnify.vue
index 33d4c63..ed297b9 100644
--- a/app/src/experimental/icons/library/magnify.vue
+++ b/app/src/experimental/icons/library/magnify.vue
@@ -1,10 +1,16 @@
<template>
<g>
- <rect x="11" y="36.4246" width="10.5" height="4" transform="rotate(-45 11 36.4246)" />
+ <rect
+ x="11"
+ y="36.4246"
+ width="10.5"
+ height="4"
+ transform="rotate(-45 11 36.4246)"
+ />
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M27.3334 32.3333C32.6721 32.3333 37 28.0054 37 22.6667C37 17.3279 32.6721 13 27.3334 13C21.9946 13 17.6667 17.3279 17.6667 22.6667C17.6667 28.0054 21.9946 32.3333 27.3334 32.3333ZM27.3334 34.3333C33.7767 34.3333 39 29.11 39 22.6667C39 16.2233 33.7767 11 27.3334 11C20.89 11 15.6667 16.2233 15.6667 22.6667C15.6667 29.11 20.89 34.3333 27.3334 34.3333Z"
/>
</g>
-</template>
\ No newline at end of file
+</template>
diff --git a/app/src/experimental/icons/library/minus.vue b/app/src/experimental/icons/library/minus.vue
index 61d1fc0..ac48daa 100644
--- a/app/src/experimental/icons/library/minus.vue
+++ b/app/src/experimental/icons/library/minus.vue
@@ -1,3 +1,3 @@
<template>
- <rect x="13" y="24" width="23" height="2"/>
+ <rect x="13" y="24" width="23" height="2" />
</template>
diff --git a/app/src/experimental/icons/library/move.vue b/app/src/experimental/icons/library/move.vue
index c4cb6ea..305b7a2 100644
--- a/app/src/experimental/icons/library/move.vue
+++ b/app/src/experimental/icons/library/move.vue
@@ -1,10 +1,16 @@
<template>
<g>
<rect x="13" y="24" width="23" height="2" />
- <rect x="23.5" y="36.5" width="23" height="2" transform="rotate(-90 23.5 36.5)" />
+ <rect
+ x="23.5"
+ y="36.5"
+ width="23"
+ height="2"
+ transform="rotate(-90 23.5 36.5)"
+ />
<path d="M24.5 40L28 35L21 35L24.5 40Z" />
<path d="M24.5 10L21 15H28L24.5 10Z" />
<path d="M39.5 25L34.5 21.5L34.5 28.5L39.5 25Z" />
<path d="M9.5 25L14.5 28.5L14.5 21.5L9.5 25Z" />
</g>
-</template>
\ No newline at end of file
+</template>
diff --git a/app/src/experimental/icons/library/plus.vue b/app/src/experimental/icons/library/plus.vue
index b76c69b..6abc18e 100644
--- a/app/src/experimental/icons/library/plus.vue
+++ b/app/src/experimental/icons/library/plus.vue
@@ -1,6 +1,12 @@
<template>
<g>
<rect x="13" y="24" width="23" height="2" />
- <rect x="23.5" y="36.5" width="23" height="2" transform="rotate(-90 23.5 36.5)" />
+ <rect
+ x="23.5"
+ y="36.5"
+ width="23"
+ height="2"
+ transform="rotate(-90 23.5 36.5)"
+ />
</g>
</template>
diff --git a/app/src/experimental/icons/library/select.vue b/app/src/experimental/icons/library/select.vue
index 4e910b1..c09bb6c 100644
--- a/app/src/experimental/icons/library/select.vue
+++ b/app/src/experimental/icons/library/select.vue
@@ -1,4 +1,3 @@
-
<template>
<path
fill-rule="evenodd"
diff --git a/app/src/experimental/modes/select.js b/app/src/experimental/modes/select.js
index 72ea587..846897c 100644
--- a/app/src/experimental/modes/select.js
+++ b/app/src/experimental/modes/select.js
@@ -1,5 +1,3 @@
export default {
- mixins: {
-
- }
-}
\ No newline at end of file
+ mixins: {}
+}
diff --git a/app/src/experimental/utils/canvas.js b/app/src/experimental/utils/canvas.js
index 48db8b7..89de73a 100644
--- a/app/src/experimental/utils/canvas.js
+++ b/app/src/experimental/utils/canvas.js
@@ -1,6 +1,10 @@
import * as win from '@/experimental/constants/window'
import { generateLinkHandles } from '@/experimental/utils/nodes'
-import { mapRange, distanceBetween, angleBetween } from '@/experimental/utils/numbers'
+import {
+ mapRange,
+ distanceBetween,
+ angleBetween
+} from '@/experimental/utils/numbers'
//////////////////////////////////////////////////////////////////////
// CANVAS UTILITIES
diff --git a/app/src/experimental/utils/dom.js b/app/src/experimental/utils/dom.js
index ed19558..57cdb7e 100644
--- a/app/src/experimental/utils/dom.js
+++ b/app/src/experimental/utils/dom.js
@@ -18,11 +18,11 @@ export const getInteractionPoint = (target, event) => {
return {
x: parseInt(
((event.clientX - rect.left) / (rect.right - rect.left)) *
- target.offsetWidth
+ target.offsetWidth
),
y: parseInt(
((event.clientY - rect.top) / (rect.bottom - rect.top)) *
- target.offsetHeight
+ target.offsetHeight
)
}
}
diff --git a/app/src/experimental/utils/nodes.js b/app/src/experimental/utils/nodes.js
index 4e09101..8f2b347 100644
--- a/app/src/experimental/utils/nodes.js
+++ b/app/src/experimental/utils/nodes.js
@@ -186,10 +186,10 @@ export const generateAreaFromNodes = nodes => {
/**
* Generates a node shape from two given points
- *
+ *
* @param {Point} origin
* @param {Point} target
- * @return {Node}
+ * @return {Node}
* */
export const generateNode = (origin, target) => {
const minusX = origin.x > target.x
diff --git a/app/src/experimental/utils/numbers.js b/app/src/experimental/utils/numbers.js
index cdb7134..2ab8204 100644
--- a/app/src/experimental/utils/numbers.js
+++ b/app/src/experimental/utils/numbers.js
@@ -65,30 +65,30 @@ export const angleBetween = (point1, point2) =>
Math.atan2(point2.y - point1.y, point2.x - point1.x)
/**
-* Constrains a value within a range
-*
-* @param {number} value
-* @param {number} min
-* @param {number} max
-* @return {number}
-*
-* */
+ * Constrains a value within a range
+ *
+ * @param {number} value
+ * @param {number} min
+ * @param {number} max
+ * @return {number}
+ *
+ * */
export const clamp = (value, min, max) => {
return Math.max(min, Math.min(value, max))
}
/**
* ! TODO ! confusing naming
-* Scales a coordinate value
-*/
+ * Scales a coordinate value
+ */
export const scaleCoordinate = (coordinate, scaleRatio) => {
return scaleRatio * coordinate - coordinate
}
/**
* ! TODO ! confusing naming
-* Scales a @Point
-*/
+ * Scales a @Point
+ */
export const scalePoint = ({ x, y }, scale) => {
return {
x: scaleCoordinate(x, scale),
@@ -110,4 +110,4 @@ export const constrainTranslation = (targetTranslation, translationBounds) => {
x: clamp(x, xMin, xMax),
y: clamp(y, yMin, yMax)
}
-}
\ No newline at end of file
+}
diff --git a/app/src/experimental/utils/view.js b/app/src/experimental/utils/view.js
index 96d4628..4b90b00 100644
--- a/app/src/experimental/utils/view.js
+++ b/app/src/experimental/utils/view.js
@@ -1,4 +1,9 @@
-import { clamp, lerpPoint, scalePoint, distanceBetween } from '@/experimental/utils/numbers'
+import {
+ clamp,
+ lerpPoint,
+ scalePoint,
+ distanceBetween
+} from '@/experimental/utils/numbers'
//////////////////////////////////////////////////////////////////////
// DOM UTILITIES
@@ -12,123 +17,131 @@ import { clamp, lerpPoint, scalePoint, distanceBetween } from '@/experimental/ut
* @param {Event} event
* @param {Object} translation translated board position in {x,y}
* @param {Number} scale board scale
- * @returns {Object}
+ * @returns {Object}
*
* */
export const getNormalisedInteraction = (target, event, translation, scale) => {
- const rect = target.getBoundingClientRect()
- const x = event.clientX - parseInt(rect.left, 10)
- const y = event.clientY - parseInt(rect.top, 10)
+ const rect = target.getBoundingClientRect()
+ const x = event.clientX - parseInt(rect.left, 10)
+ const y = event.clientY - parseInt(rect.top, 10)
- return {
- relativePoint: { x, y },
- boardPoint: containerToBoardPoint({ x, y }, translation, scale)
- }
+ return {
+ relativePoint: { x, y },
+ boardPoint: containerToBoardPoint({ x, y }, translation, scale)
+ }
}
export const containerToBoardPoint = (containerPoint, translation, scale) => {
- return {
- x: parseInt((containerPoint.x + -translation.x) / scale, 10),
- y: parseInt((containerPoint.y + -translation.y) / scale, 10)
- }
+ return {
+ x: parseInt((containerPoint.x + -translation.x) / scale, 10),
+ y: parseInt((containerPoint.y + -translation.y) / scale, 10)
+ }
}
// ! TODO !
// export const boardToContainerPoint = (boardPoint, translation, scale) => {
// }
-
/**
* @param {HTMLElement} target - base element for event
* @param {Point} point point to transform
* @param {Object} translation translated board position in {x,y}
- * @returns {Point}
+ * @returns {Point}
*
* */
-export const getTranslatedPositionFromContainer = (target, point, translation) => {
- const rect = target.getBoundingClientRect()
+export const getTranslatedPositionFromContainer = (
+ target,
+ point,
+ translation
+) => {
+ const rect = target.getBoundingClientRect()
- return {
- x: point.x - (rect.left + translation.x),
- y: point.y - (rect.top + translation.y)
- }
-}
+ return {
+ x: point.x - (rect.left + translation.x),
+ y: point.y - (rect.top + translation.y)
+ }
+}
-export const changeViewFromWheelEvent = (event, container, { translation, scale, minScale, maxScale }) => {
- const scaleChange = 2 ** (event.deltaY * 0.002)
- const newScale = clamp(
- scale + (1 - scaleChange),
- minScale,
- maxScale
- )
- const mousePosition = getTranslatedPositionFromContainer(
- container,
- { x: event.clientX, y: event.clientY },
- translation
- )
+export const changeViewFromWheelEvent = (
+ event,
+ container,
+ { translation, scale, minScale, maxScale }
+) => {
+ const scaleChange = 2 ** (event.deltaY * 0.002)
+ const newScale = clamp(scale + (1 - scaleChange), minScale, maxScale)
+ const mousePosition = getTranslatedPositionFromContainer(
+ container,
+ { x: event.clientX, y: event.clientY },
+ translation
+ )
- const scaleRatio = newScale / (scale != 0 ? scale : 1)
- const focalPtDelta = scalePoint(mousePosition, scaleRatio)
- const newTranslation = {
- x: translation.x - focalPtDelta.x,
- y: translation.y - focalPtDelta.y
- }
+ const scaleRatio = newScale / (scale != 0 ? scale : 1)
+ const focalPtDelta = scalePoint(mousePosition, scaleRatio)
+ const newTranslation = {
+ x: translation.x - focalPtDelta.x,
+ y: translation.y - focalPtDelta.y
+ }
- return [newScale, newTranslation]
+ return [newScale, newTranslation]
}
-export const changeViewFromMultiTouch = (startTouches, newTouches, container, {
- minScale,
- maxScale,
- interaction
-}) => {
- const dist0 = distanceBetween(startTouches[0], startTouches[1])
- const dist1 = distanceBetween(newTouches[0], newTouches[1])
- const scaleChange = dist1 / dist0
- const startScale = interaction.origin.scale
- const targetScale = startScale + (scaleChange - 1) * startScale
- const newScale = clamp(targetScale, minScale, maxScale)
+export const changeViewFromMultiTouch = (
+ startTouches,
+ newTouches,
+ container,
+ { minScale, maxScale, interaction }
+) => {
+ const dist0 = distanceBetween(startTouches[0], startTouches[1])
+ const dist1 = distanceBetween(newTouches[0], newTouches[1])
+ const scaleChange = dist1 / dist0
+ const startScale = interaction.origin.scale
+ const targetScale = startScale + (scaleChange - 1) * startScale
+ const newScale = clamp(targetScale, minScale, maxScale)
- // calculate mid points
- const newMidPoint = lerpPoint(
- touchPoint(newTouches[0]),
- touchPoint(newTouches[1]),
- 0.5
- )
- const startMidpoint = lerpPoint(
- touchPoint(startTouches[0]),
- touchPoint(startTouches[1]),
- 0.5
- )
- const dragDelta = {
- x: newMidPoint.x - startMidpoint.x,
- y: newMidPoint.y - startMidpoint.y
- }
- const scaleRatio = newScale / startScale
- const focalPoint = getTranslatedPositionFromContainer(
- container,
- startMidpoint,
- interaction.origin.pointer.translation
- )
- const focalPointDelta = scalePoint(focalPoint, scaleRatio)
+ // calculate mid points
+ const newMidPoint = lerpPoint(
+ touchPoint(newTouches[0]),
+ touchPoint(newTouches[1]),
+ 0.5
+ )
+ const startMidpoint = lerpPoint(
+ touchPoint(startTouches[0]),
+ touchPoint(startTouches[1]),
+ 0.5
+ )
+ const dragDelta = {
+ x: newMidPoint.x - startMidpoint.x,
+ y: newMidPoint.y - startMidpoint.y
+ }
+ const scaleRatio = newScale / startScale
+ const focalPoint = getTranslatedPositionFromContainer(
+ container,
+ startMidpoint,
+ interaction.origin.pointer.translation
+ )
+ const focalPointDelta = scalePoint(focalPoint, scaleRatio)
- const newTranslation = {
- x: interaction.origin.pointer.translation.x - focalPointDelta.x + dragDelta.x,
- y: interaction.origin.pointer.translation.y - focalPointDelta.y + dragDelta.y
- }
- return [newTranslation, newScale]
+ const newTranslation = {
+ x:
+ interaction.origin.pointer.translation.x -
+ focalPointDelta.x +
+ dragDelta.x,
+ y:
+ interaction.origin.pointer.translation.y - focalPointDelta.y + dragDelta.y
+ }
+ return [newTranslation, newScale]
}
/**
* Normalises touch event position
*
* @param {Event} event
- * @returns {Point}
+ * @returns {Point}
*
* */
export const touchPoint = touch => {
- return {
- x: touch.clientX,
- y: touch.clientY
- }
-}
\ No newline at end of file
+ return {
+ x: touch.clientX,
+ y: touch.clientY
+ }
+}
diff --git a/app/src/main.js b/app/src/main.js
index 25a587f..b6b5acb 100644
--- a/app/src/main.js
+++ b/app/src/main.js
@@ -20,5 +20,5 @@ new Vue({
router,
store,
files,
- render: (h) => h(App),
+ render: h => h(App)
}).$mount('#app')
diff --git a/app/src/router/index.js b/app/src/router/index.js
index ed0ff00..79aa399 100644
--- a/app/src/router/index.js
+++ b/app/src/router/index.js
@@ -9,7 +9,7 @@ export const routes = [
{
path: '/',
name: 'Home',
- component: Home,
+ component: Home
},
{
path: '/sandbox',
@@ -23,12 +23,12 @@ export const routes = [
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () =>
- import(/* webpackChunkName: "about" */ '../views/About.vue'),
+ import(/* webpackChunkName: "about" */ '../views/About.vue')
},
// dynamic segement `:microcosm` is added to the path
{
path: '/microcosm/:microcosm',
- component: Home,
+ component: Home
},
{
@@ -38,8 +38,8 @@ export const routes = [
component: () =>
import(
/* webpackChunkName: "NotFoundComponent" */ '../views/NotFound.vue'
- ),
- },
+ )
+ }
]
const router = new VueRouter({
@@ -47,7 +47,7 @@ const router = new VueRouter({
//base: 'https://alpha.nodenogg.in/',
//base: process.env.VUE_APP_HTTP + '://' + process.env.VUE_APP_URL + '',
//base: process.env.VUE_APP_HTTP,
- routes,
+ routes
})
export default router
diff --git a/app/src/store/index.js b/app/src/store/index.js
index 58c9741..896085b 100644
--- a/app/src/store/index.js
+++ b/app/src/store/index.js
@@ -66,13 +66,13 @@ const store = new Vuex.Store({
],
configEmoji: [
//{}
- ],
+ ]
},
mutations: {
CREATE_MICROCOSM(state, doc) {
// const urldevice = Router.currentRoute.params.device
const urlmicrocosm = Router.currentRoute.params.microcosm
- pouchdb.close().then(function () {
+ pouchdb.close().then(function() {
if (urlmicrocosm != undefined) {
// myclient = urldevice
microcosm = urlmicrocosm
@@ -97,14 +97,14 @@ const store = new Vuex.Store({
pouchdb
.allDocs({
include_docs: true,
- attachments: true,
+ attachments: true
})
- .then(function (doc) {
+ .then(function(doc) {
state.microcosm = microcosm
state.allNodes = doc.rows
store.commit('SET_OTHER_NODES')
})
- .catch(function (err) {
+ .catch(function(err) {
console.log(err)
})
},
@@ -130,7 +130,7 @@ const store = new Vuex.Store({
if (state.allNodes[i].doc.nodes[j].deleted != true) {
const newNode = {
node_id: state.allNodes[i].doc.nodes[j].node_id,
- node_text: state.allNodes[i].doc.nodes[j].node_text,
+ node_text: state.allNodes[i].doc.nodes[j].node_text
}
state.otherNodes.push(newNode)
@@ -155,7 +155,7 @@ const store = new Vuex.Store({
GET_MY_NODES(state) {
pouchdb
.get(state.myclient)
- .then(function (doc) {
+ .then(function(doc) {
var i
for (i = 0; i < Object.keys(doc.nodes).length; i++) {
if (doc.nodes[i].deleted == true) {
@@ -164,11 +164,15 @@ const store = new Vuex.Store({
state.myNodes = doc.nodes
}
})
- .catch(function (err) {
+ .catch(function(err) {
if (err.status == 404) {
var uniqueid =
- Math.random().toString(36).substring(2, 15) +
- Math.random().toString(36).substring(2, 15)
+ Math.random()
+ .toString(36)
+ .substring(2, 15) +
+ Math.random()
+ .toString(36)
+ .substring(2, 15)
return pouchdb.put({
_id: state.myclient,
_attachments: {},
@@ -183,9 +187,9 @@ const store = new Vuex.Store({
content_type: 'sheet',
// NOTE: first node is hidden due to no position
deleted: true,
- attachment_name: '',
- },
- ],
+ attachment_name: ''
+ }
+ ]
})
}
})
@@ -194,15 +198,15 @@ const store = new Vuex.Store({
GET_POSITIONS(state) {
pouchdb
.get(state.global_pos_name)
- .then(function (doc) {
+ .then(function(doc) {
state.configPositions = doc.positions
})
- .catch(function (err) {
+ .catch(function(err) {
console.log(err)
if (err.status == 404) {
return pouchdb.put({
_id: state.global_pos_name,
- positions: [],
+ positions: []
})
}
})
@@ -222,23 +226,23 @@ const store = new Vuex.Store({
pouchdb
.get(state.global_pos_name)
- .then(function (doc) {
+ .then(function(doc) {
// console.log(doc)
// put the store into pouchdb
return pouchdb.bulkDocs([
{
_id: state.global_pos_name,
_rev: doc._rev,
- positions: state.configPositions,
- },
+ positions: state.configPositions
+ }
])
})
- .then(function () {
- return pouchdb.get(state.global_pos_name).then(function (doc) {
+ .then(function() {
+ return pouchdb.get(state.global_pos_name).then(function(doc) {
state.configPositions = doc.positions
})
})
- .catch(function (err) {
+ .catch(function(err) {
if (err.status == 404) {
// pouchdb.put({ })
}
@@ -253,11 +257,15 @@ const store = new Vuex.Store({
ADD_NODE(state, e) {
var uniqueid =
- Math.random().toString(36).substring(2, 15) +
- Math.random().toString(36).substring(2, 15)
+ Math.random()
+ .toString(36)
+ .substring(2, 15) +
+ Math.random()
+ .toString(36)
+ .substring(2, 15)
state.localnodeid = uniqueid
- pouchdb.get(state.myclient).then(function (doc) {
+ pouchdb.get(state.myclient).then(function(doc) {
if (e == undefined) {
doc.nodes.push({
node_id: uniqueid,
@@ -265,7 +273,7 @@ const store = new Vuex.Store({
node_owner: state.myclient,
content_type: 'sheet',
deleted: false,
- attachment_name: e,
+ attachment_name: e
})
}
@@ -274,42 +282,42 @@ const store = new Vuex.Store({
_id: state.myclient,
_rev: doc._rev,
_attachments: doc._attachments,
- nodes: doc.nodes,
+ nodes: doc.nodes
})
- .then(function () {
- return pouchdb.get(state.myclient).then(function (doc) {
+ .then(function() {
+ return pouchdb.get(state.myclient).then(function(doc) {
state.myNodes = doc.nodes
var end = Object.keys(state.myNodes).length - 1
const newNode = {
nodeid: state.myNodes[end].id,
- nodetext: state.myNodes[end].text,
+ nodetext: state.myNodes[end].text
// content_type: state.notes[end].content_type
}
state.activeNode = newNode
})
})
- .catch(function (err) {
+ .catch(function(err) {
if (err.status == 404) {
// pouchdb.put({ })
}
})
})
- pouchdb.get(state.global_pos_name).then(function (doc) {
+ pouchdb.get(state.global_pos_name).then(function(doc) {
doc.positions.push({
node_id: uniqueid,
x_pos: 50,
y_pos: 50,
width: 200,
height: 275,
- z_index: 1,
+ z_index: 1
})
return pouchdb
.put({
_id: state.global_pos_name,
_rev: doc._rev,
- positions: doc.positions,
+ positions: doc.positions
})
- .catch(function (err) {
+ .catch(function(err) {
console.log(err)
})
})
@@ -324,7 +332,7 @@ const store = new Vuex.Store({
}
pouchdb
.get(state.myclient)
- .then(function (doc) {
+ .then(function(doc) {
// put the store into pouchdb
return pouchdb.bulkDocs([
@@ -332,16 +340,16 @@ const store = new Vuex.Store({
_id: state.myclient,
_rev: doc._rev,
_attachments: doc._attachments,
- nodes: state.myNodes,
- },
+ nodes: state.myNodes
+ }
])
})
- .then(function () {
- return pouchdb.get(state.myclient).then(function (doc) {
+ .then(function() {
+ return pouchdb.get(state.myclient).then(function(doc) {
state.myNodes = doc.nodes
})
})
- .catch(function (err) {
+ .catch(function(err) {
if (err.status == 404) {
// pouchdb.put({ })
}
@@ -357,23 +365,23 @@ const store = new Vuex.Store({
}
pouchdb
.get(state.myclient)
- .then(function (doc) {
+ .then(function(doc) {
// put the store into pouchdb
return pouchdb.bulkDocs([
{
_id: state.myclient,
_rev: doc._rev,
_attachments: doc._attachments,
- nodes: state.myNodes,
- },
+ nodes: state.myNodes
+ }
])
})
- .then(function () {
- return pouchdb.get(state.myclient).then(function (doc) {
+ .then(function() {
+ return pouchdb.get(state.myclient).then(function(doc) {
state.myNodes = doc.nodes
})
})
- .catch(function (err) {
+ .catch(function(err) {
if (err.status == 404) {
// pouchdb.put({ })
}
@@ -383,40 +391,44 @@ const store = new Vuex.Store({
console.log
pouchdb
.get(state.global_emoji_name)
- .then(function (doc) {
+ .then(function(doc) {
state.configEmoji = doc.emojis
})
- .catch(function (err) {
+ .catch(function(err) {
console.log(err)
if (err.status == 404) {
return pouchdb.put({
_id: state.global_emoji_name,
- emojis: [],
+ emojis: []
})
}
})
},
ADD_EMOJI(state, e) {
var uniqueid =
- Math.random().toString(36).substring(2, 15) +
- Math.random().toString(36).substring(2, 15)
- pouchdb.get(state.global_emoji_name).then(function (doc) {
+ Math.random()
+ .toString(36)
+ .substring(2, 15) +
+ Math.random()
+ .toString(36)
+ .substring(2, 15)
+ pouchdb.get(state.global_emoji_name).then(function(doc) {
doc.emojis.push({
emoji_id: uniqueid,
node_id: e.nodeid,
- emoji_text: e.emojitext,
+ emoji_text: e.emojitext
})
return pouchdb
.put({
_id: state.global_emoji_name,
_rev: doc._rev,
- emojis: doc.emojis,
+ emojis: doc.emojis
})
- .catch(function (err) {
+ .catch(function(err) {
console.log(err)
})
})
- },
+ }
},
actions: {
@@ -427,7 +439,7 @@ const store = new Vuex.Store({
},
syncDB: () => {
- pouchdb.replicate.from(remote).on('complete', function () {
+ pouchdb.replicate.from(remote).on('complete', function() {
store.commit('GET_ALL_NODES')
store.commit('GET_MY_NODES')
store.commit('GET_POSITIONS')
@@ -435,29 +447,29 @@ const store = new Vuex.Store({
// turn on two-way, continuous, retriable sync
pouchdb
.sync(remote, { live: true, retry: true, attachments: true })
- .on('change', function () {
+ .on('change', function() {
// pop info into function to find out more
store.commit('GET_ALL_NODES')
store.commit('GET_MY_NODES')
store.commit('GET_POSITIONS')
store.commit('GET_EMOJI')
})
- .on('paused', function () {
+ .on('paused', function() {
// replication paused (e.g. replication up to date, user went offline)
// console.log('replication paused')
})
- .on('active', function () {
+ .on('active', function() {
// replicate resumed (e.g. new changes replicating, user went back online)
//console.log('back active')
})
- .on('denied', function () {
+ .on('denied', function() {
// a document failed to replicate (e.g. due to permissions)
})
- .on('complete', function () {
+ .on('complete', function() {
// handle complete
//console.log('complete')
})
- .on('error', function (err) {
+ .on('error', function(err) {
console.log(err)
})
})
@@ -490,9 +502,9 @@ const store = new Vuex.Store({
addEmoji: ({ commit }, { nodeid, emojitext }) => {
commit('ADD_EMOJI', {
nodeid,
- emojitext,
+ emojitext
})
- },
+ }
},
modules: {
ui: uiStore
diff --git a/app/src/views/About.vue b/app/src/views/About.vue
index 503dce5..277e30f 100644
--- a/app/src/views/About.vue
+++ b/app/src/views/About.vue
@@ -86,11 +86,11 @@ import { mapState } from 'vuex'
export default {
name: 'About',
- data: function () {
+ data: function() {
return {}
},
computed: mapState({
- myVersion: (state) => state.version,
- }),
+ myVersion: state => state.version
+ })
}
</script>
diff --git a/app/src/views/Home.vue b/app/src/views/Home.vue
index 8515a9c..17a3d19 100644
--- a/app/src/views/Home.vue
+++ b/app/src/views/Home.vue
@@ -25,7 +25,7 @@
/>
<NodesLayer
- @editTrue="(e) => editTrue(e)"
+ @editTrue="e => editTrue(e)"
v-for="value in myNodes"
v-bind:key="value.node_id"
v-bind:nodeid="value.node_id"
@@ -72,11 +72,11 @@ export default {
}
},
- data: function () {
+ data: function() {
return {
clientset: false,
listview: false,
- offline: false,
+ offline: false
}
},
@@ -86,12 +86,12 @@ export default {
OtherNodeslayer,
ListLayer,
OtherListlayer,
- ControlsLayer,
+ ControlsLayer
},
computed: mapState({
- myNodes: (state) => state.myNodes,
- otherNodes: (state) => state.otherNodes,
- shortcutstate: (state) => state.shortcutstate,
+ myNodes: state => state.myNodes,
+ otherNodes: state => state.otherNodes,
+ shortcutstate: state => state.shortcutstate
}),
methods: {
clientAdded() {
@@ -120,8 +120,8 @@ export default {
},
onlineTriggered() {
this.offline = false
- },
- },
+ }
+ }
}
</script>
diff --git a/app/vue.config.js b/app/vue.config.js
index 6ca6c21..b377ce6 100644
--- a/app/vue.config.js
+++ b/app/vue.config.js
@@ -10,12 +10,12 @@ module.exports = {
{
loader: 'file-loader',
options: {
- name: 'files/[name].[ext]',
- },
- },
- ],
- },
- ],
- },
- },
+ name: 'files/[name].[ext]'
+ }
+ }
+ ]
+ }
+ ]
+ }
+ }
}
--
GitLab