From b8f972bac2a0451c402a8d174df61d12b5636bcd Mon Sep 17 00:00:00 2001
From: Adam Procter <adamprocter@researchnot.es>
Date: Mon, 17 Feb 2020 19:08:01 +0000
Subject: [PATCH] textareas
---
canvas-10-feb/src/components/CanvasLayer.vue | 2 +-
canvas-10-feb/src/components/NodesLayer.vue | 10 ++-
canvas-10-feb/src/components/mixins/drag.js | 64 +++++++++++++++++++-
canvas-10-feb/src/components/mixins/draw.js | 10 +--
canvas-10-feb/src/store/index.js | 10 +--
canvas-10-feb/src/views/Home.vue | 9 ++-
6 files changed, 90 insertions(+), 15 deletions(-)
diff --git a/canvas-10-feb/src/components/CanvasLayer.vue b/canvas-10-feb/src/components/CanvasLayer.vue
index 89fa957..fb3183f 100644
--- a/canvas-10-feb/src/components/CanvasLayer.vue
+++ b/canvas-10-feb/src/components/CanvasLayer.vue
@@ -17,7 +17,7 @@ export default {
mixins: [draw],
computed: mapState({
- configRect: state => state.configRect,
+ configConnect: state => state.configConnect,
configHandle: state => state.configHandle
}),
diff --git a/canvas-10-feb/src/components/NodesLayer.vue b/canvas-10-feb/src/components/NodesLayer.vue
index def2422..6278e4d 100644
--- a/canvas-10-feb/src/components/NodesLayer.vue
+++ b/canvas-10-feb/src/components/NodesLayer.vue
@@ -1,5 +1,5 @@
<template>
- <div class="editor">
+ <div class="node" ref="nodes">
<form id="editForm" class="myScroll">
<textarea></textarea>
<p>markdown supported</p>
@@ -16,7 +16,11 @@ export default {
name: 'NodesLayer',
mixins: [drag],
- mounted() {},
+ mounted() {
+ var nodes = this.$refs.nodes
+
+ this.makeDraggable(nodes)
+ },
methods: {
setFocus() {
this.$refs.notetext.focus()
@@ -30,7 +34,7 @@ export default {
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
-.editor {
+.node {
background-color: aquamarine;
position: absolute;
}
diff --git a/canvas-10-feb/src/components/mixins/drag.js b/canvas-10-feb/src/components/mixins/drag.js
index 412563c..fd36bc6 100644
--- a/canvas-10-feb/src/components/mixins/drag.js
+++ b/canvas-10-feb/src/components/mixins/drag.js
@@ -1,3 +1,65 @@
export const drag = {
- methods: {}
+ methods: {
+ makeDraggable(nodes) {
+ var active = false
+ var currentX
+ var currentY
+ var initialX
+ var initialY
+ var xOffset = 0
+ var yOffset = 0
+
+ nodes.addEventListener('mousedown', startDrag)
+ nodes.addEventListener('mousemove', drag)
+ nodes.addEventListener('mouseup', endDrag)
+ nodes.addEventListener('mouseleave', endDrag)
+ nodes.addEventListener('touchstart', startDrag)
+ nodes.addEventListener('touchmove', drag)
+ nodes.addEventListener('touchend', endDrag)
+ nodes.addEventListener('touchleave', endDrag)
+ nodes.addEventListener('touchcancel', endDrag)
+
+ function startDrag(e) {
+ if (e.type === 'touchstart') {
+ initialX = e.touches[0].clientX - xOffset
+ initialY = e.touches[0].clientY - yOffset
+ } else {
+ initialX = e.clientX - xOffset
+ initialY = e.clientY - yOffset
+ }
+ if (e.target.parentNode.classList.contains('node')) {
+ active = true
+ }
+ }
+
+ function drag(e) {
+ if (active) {
+ e.preventDefault()
+
+ if (e.type === 'touchmove') {
+ currentX = e.touches[0].clientX - initialX
+ currentY = e.touches[0].clientY - initialY
+ } else {
+ currentX = e.clientX - initialX
+ currentY = e.clientY - initialY
+ }
+
+ xOffset = currentX
+ yOffset = currentY
+
+ setTranslate(currentX, currentY, nodes)
+ }
+ }
+
+ function endDrag() {
+ initialX = currentX
+ initialY = currentY
+ active = false
+ }
+
+ function setTranslate(xPos, yPos, el) {
+ el.style.transform = 'translate3d(' + xPos + 'px, ' + yPos + 'px, 0)'
+ }
+ }
+ }
}
diff --git a/canvas-10-feb/src/components/mixins/draw.js b/canvas-10-feb/src/components/mixins/draw.js
index 5f02803..9bd5dc3 100644
--- a/canvas-10-feb/src/components/mixins/draw.js
+++ b/canvas-10-feb/src/components/mixins/draw.js
@@ -7,12 +7,12 @@ export const draw = {
box(ctx, x, y) {
ctx.setTransform(1, 0, 0, 1, x, y)
- ctx.fillStyle = this.configRect.fill
+ ctx.fillStyle = this.configConnect.fill
ctx.fillRect(
- this.configRect.x,
- this.configRect.y,
- this.configRect.height,
- this.configRect.width
+ this.configConnect.x,
+ this.configConnect.y,
+ this.configConnect.height,
+ this.configConnect.width
)
ctx.fillStyle = this.configHandle.fill
diff --git a/canvas-10-feb/src/store/index.js b/canvas-10-feb/src/store/index.js
index badaf8c..353e3ec 100644
--- a/canvas-10-feb/src/store/index.js
+++ b/canvas-10-feb/src/store/index.js
@@ -5,7 +5,8 @@ Vue.use(Vuex)
export default new Vuex.Store({
state: {
- configRect: {
+ // this will be objects containing arrays of all the handles / connections and nodes
+ configConnect: {
x: -25,
y: -25,
height: 50,
@@ -15,10 +16,11 @@ export default new Vuex.Store({
configHandle: {
x: 25,
y: 25,
- height: 4,
- width: 4,
+ height: 10,
+ width: 10,
fill: 'black'
- }
+ },
+ configNodes: {}
},
mutations: {},
actions: {},
diff --git a/canvas-10-feb/src/views/Home.vue b/canvas-10-feb/src/views/Home.vue
index 1f2953a..1591e67 100644
--- a/canvas-10-feb/src/views/Home.vue
+++ b/canvas-10-feb/src/views/Home.vue
@@ -1,5 +1,7 @@
<template>
<div class="home">
+ <!-- The number of NodesLayers comes from store -->
+ <NodesLayer />
<NodesLayer />
<CanvasLayer />
<ControlsLayer />
@@ -12,13 +14,18 @@ import CanvasLayer from '@/components/CanvasLayer.vue'
import NodesLayer from '@/components/NodesLayer.vue'
import ControlsLayer from '@/components/ControlsLayer.vue'
+import { mapState } from 'vuex'
+
export default {
name: 'Home',
components: {
CanvasLayer,
NodesLayer,
ControlsLayer
- }
+ },
+ computed: mapState({
+ configNodes: state => state.configNodes
+ })
}
</script>
--
GitLab