From 3a17a28d09f7118ab8c35ac840b54a2be669858e Mon Sep 17 00:00:00 2001
From: Adam Procter <adamprocter@researchnot.es>
Date: Mon, 25 May 2020 13:29:02 +0100
Subject: [PATCH] reworking connections
---
app/src/components/NodesLayer.vue | 1 +
.../experimental/layers/ConnectionsLayer.vue | 138 ++++++------------
app/src/experimental/utils/svg.js | 16 +-
app/src/store/index.js | 92 ++----------
app/src/views/Sandbox.vue | 7 +-
5 files changed, 73 insertions(+), 181 deletions(-)
diff --git a/app/src/components/NodesLayer.vue b/app/src/components/NodesLayer.vue
index dd6a645..5088fdd 100644
--- a/app/src/components/NodesLayer.vue
+++ b/app/src/components/NodesLayer.vue
@@ -278,6 +278,7 @@ export default {
position: relative;
}
+
.info {
font-size: 0.8em;
}
diff --git a/app/src/experimental/layers/ConnectionsLayer.vue b/app/src/experimental/layers/ConnectionsLayer.vue
index 981fe54..1d2b233 100644
--- a/app/src/experimental/layers/ConnectionsLayer.vue
+++ b/app/src/experimental/layers/ConnectionsLayer.vue
@@ -4,51 +4,28 @@
:width="width"
:height="height"
>
- <template v-for="group in groups">
- <path
- v-on:click="(e) => onClick(curve, e)"
- v-for="curve in group.connections"
- v-bind:key="curve.id"
- v-bind:d="curve.path"
- v-bind:stroke="getPalette(curve.color, 'dark')"
- v-bind:stroke-dasharray="
- curve.lineDash
- ? curve.lineDash.join(' ')
- : defaultConnectionProps.lineDash.join(' ')
- "
- v-bind:stroke-width="
- curve.lineWidth || defaultConnectionProps.lineWidth
- "
- />
- </template>
<path
- v-bind:stroke="getPalette('blue', 'dark')"
- v-bind:stroke-width="defaultConnectionProps.lineWidth"
- v-if="newConnection && newConnection.target"
- v-bind:d="getCurve(newConnection)"
- />
- <circle
- v-bind:cx="newConnection.target.x"
- v-bind:cy="newConnection.target.y"
- r="10"
- v-bind:fill="getPalette('blue', 'dark')"
- v-if="newConnection && newConnection.target"
+ v-for="(value, index) in configConnections"
+ v-bind:key="index"
+ v-bind:d="value.path"
+ v-bind:stroke="getPalette(value.color, 'dark')"
+ v-bind:stroke-dasharray="
+ value.linedash
+ ? value.linedash.join(' ')
+ : defaultConnectionProps.linedash.join(' ')
+ "
+ v-bind:stroke-width="value.linewidth || defaultConnectionProps.linewidth"
/>
+
+ <!-- <path d="M 10 10 C 20 20, 40 20, 50 10" stroke="black" fill="transparent" /> -->
</svg>
</template>
<script>
import { getPalette } from '@/experimental/constants/color'
-
-// import { generateConnectionHandles } from '@/utils/nodes'
-// import { generateBezierCurve, makeBezier } from '@/utils/svg'
-//import { generateConnectionHandles } from '@/utils/nodes'
import { generateBezierCurve } from '@/experimental/utils/svg'
-import { groupBy } from '@/experimental/utils/helpers'
import { mapState } from 'vuex'
-const groupByFrom = groupBy('from')
-
export default {
props: {
width: {
@@ -57,18 +34,6 @@ export default {
height: {
type: Number,
},
- nodes: {
- type: Array,
- },
- connections: {
- type: Array,
- },
- newConnection: {
- type: Object,
- },
- onClickConnection: {
- type: Function,
- },
},
data() {
return {
@@ -76,37 +41,40 @@ export default {
defaultConnectionProps: {
hue: 'dark',
tension: 0.25,
- lineWidth: 5,
- lineDash: [0, 0],
+ linewidth: 5,
+ linedash: [0, 0],
},
}
},
- computed: {
- groups() {
- const grouped = groupByFrom(this.connections)
- return Object.keys(grouped).map((id) => {
- return {
- id,
- connections: grouped[id].map((connection) => {
- const fromNode = this.findNode(connection.from)
- const toNode = this.findNode(connection.to)
- return {
- ...connection,
- path: generateBezierCurve(
- fromNode,
- toNode,
- this.defaultConnectionProps.tension
- ),
- }
- }),
- }
- })
- },
- ...mapState({
- connections: (state) => state.configConnections,
- }),
- },
+ computed: mapState({
+ myNodes: (state) => state.myNodes,
+ otherNodes: (state) => state.otherNodes,
+ configConnections: (state) => state.configConnections,
+ }),
+
+ // groups() {
+ // const grouped = groupByFrom(this.links);
+ // return Object.keys(grouped).map(id => {
+ // return {
+ // id,
+ // links: grouped[id].map(link => {
+ // const fromNode = this.findNode(link.from);
+ // const toNode = this.findNode(link.to);
+ // return {
+ // ...link,
+ // path: generateBezierCurve(
+ // fromNode,
+ // toNode,
+ // this.defaultLinkProps.tension
+ // )
+ // };
+ // })
+ // };
+ // });
+ // }
+ // },
+
methods: {
getCurve(connection) {
const fromNode = this.findNode(connection.from)
@@ -114,28 +82,6 @@ export default {
const r = generateBezierCurve(fromNode, toNode, 0.1)
return r
},
- onClick(connection) {
- this.onClickConnection(
- [connection.id],
- !!event.shiftKey || !!event.metaKey
- )
- },
- findNode(id) {
- return [...this.nodes].find((pt) => pt.id === id)
- },
-
- // startConnect(connectid, fromNode, toNode, startx, starty, endx, endy, connected) {
- // this.$store.dispatch('startConnect', {
- // connectid,
- // fromNode,
- // toNode,
- // startx,
- // starty,
- // endx,
- // endy,
- // connected,
- // })
- // },
},
}
</script>
diff --git a/app/src/experimental/utils/svg.js b/app/src/experimental/utils/svg.js
index b93e8cd..67ebd05 100644
--- a/app/src/experimental/utils/svg.js
+++ b/app/src/experimental/utils/svg.js
@@ -16,9 +16,11 @@ export const generateBezierCurve = (from, to, tension) => {
tension * 2
)
- return `M${fromHandle.x},${fromHandle.y} C${fromHandle.x *
- (1 + adjustedTension)},${fromHandle.y} ${toHandle.x *
- (1 - adjustedTension)},${toHandle.y} ${toHandle.x},${toHandle.y}`
+ return `M${fromHandle.x},${fromHandle.y} C${
+ fromHandle.x * (1 + adjustedTension)
+ },${fromHandle.y} ${toHandle.x * (1 - adjustedTension)},${toHandle.y} ${
+ toHandle.x
+ },${toHandle.y}`
}
}
@@ -34,7 +36,9 @@ export const makeBezier = (fromHandle, toHandle, tension) => {
tension * 2
)
- return `M${fromHandle.x},${fromHandle.y} C${fromHandle.x *
- (1 + adjustedTension)},${fromHandle.y} ${toHandle.x *
- (1 - adjustedTension)},${toHandle.y} ${toHandle.x},${toHandle.y}`
+ return `M${fromHandle.x},${fromHandle.y} C${
+ fromHandle.x * (1 + adjustedTension)
+ },${fromHandle.y} ${toHandle.x * (1 - adjustedTension)},${toHandle.y} ${
+ toHandle.x
+ },${toHandle.y}`
}
diff --git a/app/src/store/index.js b/app/src/store/index.js
index c67a768..520424d 100644
--- a/app/src/store/index.js
+++ b/app/src/store/index.js
@@ -226,24 +226,18 @@ const store = new Vuex.Store({
},
MAKE_CONNECT(state, e) {
- // console.log(state.connections[1].connection.id)
- //add the new info connection here
- //console.log(e)
- //var first = e.e
- //var second = e.f
var connectid =
Math.random().toString(36).substring(2, 15) +
Math.random().toString(36).substring(2, 15)
state.configConnections.push({
- connectid: connectid,
- startid: e.fromNode,
- endid: e.toNode,
- startx: e.startx,
- starty: e.starty,
- endx: e.endx,
- endy: e.endy,
- connected: e.connected,
+ connect_id: connectid,
+ start_id: e.fromnode,
+ end_id: e.tonode,
+ path: e.path,
+ color: e.color,
+ line_dash: e.linedash,
+ line_width: e.linewidth,
})
pouchdb
@@ -271,50 +265,6 @@ const store = new Vuex.Store({
})
},
- // UPDATE_CONNECT(state, e) {
- // localnodeid = e.nodeid
- // connectid = e.connectid
- // var i
- // for (i = 0; i < Object.keys(state.configConnections).length; i++) {
- // //
- // // if endid matches update endx and endy else if startid matchs update startx /y
- // if (localnodeid == state.configConnections[i].startid) {
- // state.configConnections[i].startx = e.xpos
- // state.configConnections[i].starty = e.ypos
- // //state.connections[i].connected = e.connected
- // // console.log(state.connections)
- // } else if (localnodeid == state.configConnections[i].endid) {
- // state.configConnections[i].endx = e.xpos
- // state.configConnections[i].endy = e.ypos
- // //state.connections[i].connected = e.connected
- // } else {
- // //empty
- // }
- // }
-
- // pouchdb
- // .get(state.glo_con)
- // .then(function (doc) {
- // return pouchdb.bulkDocs([
- // {
- // _id: state.global_con_name,
- // _rev: doc._rev,
- // connections: state.configConnections,
- // },
- // ])
- // })
- // .then(function () {
- // return pouchdb.get(state.global_con_name).then(function (doc) {
- // state.connections = doc.connections
- // })
- // })
- // .catch(function (err) {
- // if (err.status == 404) {
- // // pouchdb.put({ })
- // }
- // })
- // },
-
MOVE_POS(state, e) {
var i
for (i = 0; i < Object.keys(state.configPositions).length; i++) {
@@ -591,30 +541,16 @@ const store = new Vuex.Store({
startConnect: (
{ commit },
- { connectid, fromNode, toNode, startx, starty, endx, endy, connected }
+ { connectid, fromnode, tonode, path, color, linedash, linewidth }
) => {
commit('MAKE_CONNECT', {
connectid,
- fromNode,
- toNode,
- startx,
- starty,
- endx,
- endy,
- connected,
- })
- },
-
- updateConnect: (
- { commit },
- { connectid, nodeid, xpos, ypos, connected }
- ) => {
- commit('UPDATE_CONNECT', {
- connectid,
- nodeid,
- xpos,
- ypos,
- connected,
+ fromnode,
+ tonode,
+ path,
+ color,
+ linedash,
+ linewidth,
})
},
diff --git a/app/src/views/Sandbox.vue b/app/src/views/Sandbox.vue
index 2117d09..7b69b74 100644
--- a/app/src/views/Sandbox.vue
+++ b/app/src/views/Sandbox.vue
@@ -1,5 +1,11 @@
<template>
<div ref="container" class="wrapper" v-bind:style="modeContainerStyle">
+ <ConnectionsLayer
+ v-bind:width="width"
+ v-bind:height="height"
+ v-bind:nodes="myNodes"
+ v-bind:connections="connections"
+ />
<PanZoomContainer
v-bind:width="width"
v-bind:height="height"
@@ -28,7 +34,6 @@
/> -->
<ModeToolbar />
<ViewToolbar />
- <ConnectionsLayer />
</div>
</template>
--
GitLab