From b6ec2c8f6c05aad3686f570ab0189def0e817e3a Mon Sep 17 00:00:00 2001
From: Adam Procter <adamprocter@researchnot.es>
Date: Wed, 19 Feb 2020 12:51:49 +0000
Subject: [PATCH] fixed dragging
---
canvas-10-feb/src/components/NodesLayer.vue | 1 +
canvas-10-feb/src/components/mixins/drag.js | 22 +++++++++----------
.../src/components/otherNodeslayer.vue | 13 +++++------
canvas-10-feb/src/views/Home.vue | 9 ++++----
4 files changed, 21 insertions(+), 24 deletions(-)
diff --git a/canvas-10-feb/src/components/NodesLayer.vue b/canvas-10-feb/src/components/NodesLayer.vue
index 3be4d8b..6afd23e 100644
--- a/canvas-10-feb/src/components/NodesLayer.vue
+++ b/canvas-10-feb/src/components/NodesLayer.vue
@@ -9,6 +9,7 @@
:id="nodeid"
></textarea>
</div>
+
<p>markdown supported</p>
<button>delete</button>
</form>
diff --git a/canvas-10-feb/src/components/mixins/drag.js b/canvas-10-feb/src/components/mixins/drag.js
index fd36bc6..d270cb7 100644
--- a/canvas-10-feb/src/components/mixins/drag.js
+++ b/canvas-10-feb/src/components/mixins/drag.js
@@ -1,6 +1,6 @@
export const drag = {
methods: {
- makeDraggable(nodes) {
+ makeDraggable(incoming) {
var active = false
var currentX
var currentY
@@ -9,15 +9,15 @@ export const drag = {
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)
+ incoming.addEventListener('mousedown', startDrag)
+ incoming.addEventListener('mousemove', drag)
+ incoming.addEventListener('mouseup', endDrag)
+ incoming.addEventListener('mouseleave', endDrag)
+ incoming.addEventListener('touchstart', startDrag)
+ incoming.addEventListener('touchmove', drag)
+ incoming.addEventListener('touchend', endDrag)
+ incoming.addEventListener('touchleave', endDrag)
+ incoming.addEventListener('touchcancel', endDrag)
function startDrag(e) {
if (e.type === 'touchstart') {
@@ -47,7 +47,7 @@ export const drag = {
xOffset = currentX
yOffset = currentY
- setTranslate(currentX, currentY, nodes)
+ setTranslate(currentX, currentY, incoming)
}
}
diff --git a/canvas-10-feb/src/components/otherNodeslayer.vue b/canvas-10-feb/src/components/otherNodeslayer.vue
index 25d7b1a..911ba24 100644
--- a/canvas-10-feb/src/components/otherNodeslayer.vue
+++ b/canvas-10-feb/src/components/otherNodeslayer.vue
@@ -1,15 +1,12 @@
<template>
- <div ref="othernodes" class="othernodes">
- <form>
- <p :id="nodeid">{{ nodetext }}</p>
- <p>markdown supported</p>
- </form>
+ <div ref="othernodes" class="node">
+ <p :id="nodeid">{{ nodetext }}</p>
+ <p>markdown supported</p>
</div>
</template>
<script>
import { drag } from './mixins/drag.js'
-// import { mapState } from 'vuex'
export default {
name: 'otherNodeslayer',
@@ -26,8 +23,8 @@ export default {
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
-.othernodes {
+.node {
background-color: aquamarine;
- /* position: absolute; */
+ position: absolute;
}
</style>
diff --git a/canvas-10-feb/src/views/Home.vue b/canvas-10-feb/src/views/Home.vue
index 21b6785..5f3c831 100644
--- a/canvas-10-feb/src/views/Home.vue
+++ b/canvas-10-feb/src/views/Home.vue
@@ -1,18 +1,17 @@
<template>
<div class="home">
- <otherNodeslayer
- v-for="value in otherNodes"
+ <NodesLayer
+ v-for="value in myNodes"
v-bind:key="value.nodeid"
v-bind:nodeid="value.nodeid"
v-bind:nodetext="value.nodetext"
/>
- <NodesLayer
- v-for="value in myNodes"
+ <otherNodeslayer
+ v-for="value in otherNodes"
v-bind:key="value.nodeid"
v-bind:nodeid="value.nodeid"
v-bind:nodetext="value.nodetext"
/>
-
<CanvasLayer />
<ControlsLayer />
</div>
--
GitLab