Skip to content
Snippets Groups Projects
Commit 3a17a28d authored by Adam Procter's avatar Adam Procter
Browse files

reworking connections

parent a8352e54
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
app/src/components/NodesLayer.vue
+ 1
− 0
View file @ 3a17a28d
...@@ -278,6 +278,7 @@ export default { ...@@ -278,6 +278,7 @@ export default {
position: relative; position: relative;
} }
.info { .info {
font-size: 0.8em; font-size: 0.8em;
} }
......
app/src/experimental/layers/ConnectionsLayer.vue
+ 42
− 96
View file @ 3a17a28d
...@@ -4,51 +4,28 @@ ...@@ -4,51 +4,28 @@
:width="width" :width="width"
:height="height" :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 <path
v-bind:stroke="getPalette('blue', 'dark')" v-for="(value, index) in configConnections"
v-bind:stroke-width="defaultConnectionProps.lineWidth" v-bind:key="index"
v-if="newConnection && newConnection.target" v-bind:d="value.path"
v-bind:d="getCurve(newConnection)" v-bind:stroke="getPalette(value.color, 'dark')"
/> v-bind:stroke-dasharray="
<circle value.linedash
v-bind:cx="newConnection.target.x" ? value.linedash.join(' ')
v-bind:cy="newConnection.target.y" : defaultConnectionProps.linedash.join(' ')
r="10" "
v-bind:fill="getPalette('blue', 'dark')" v-bind:stroke-width="value.linewidth || defaultConnectionProps.linewidth"
v-if="newConnection && newConnection.target"
/> />
<!-- <path d="M 10 10 C 20 20, 40 20, 50 10" stroke="black" fill="transparent" /> -->
</svg> </svg>
</template> </template>
<script> <script>
import { getPalette } from '@/experimental/constants/color' 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 { generateBezierCurve } from '@/experimental/utils/svg'
import { groupBy } from '@/experimental/utils/helpers'
import { mapState } from 'vuex' import { mapState } from 'vuex'
const groupByFrom = groupBy('from')
export default { export default {
props: { props: {
width: { width: {
...@@ -57,18 +34,6 @@ export default { ...@@ -57,18 +34,6 @@ export default {
height: { height: {
type: Number, type: Number,
}, },
nodes: {
type: Array,
},
connections: {
type: Array,
},
newConnection: {
type: Object,
},
onClickConnection: {
type: Function,
},
}, },
data() { data() {
return { return {
...@@ -76,37 +41,40 @@ export default { ...@@ -76,37 +41,40 @@ export default {
defaultConnectionProps: { defaultConnectionProps: {
hue: 'dark', hue: 'dark',
tension: 0.25, tension: 0.25,
lineWidth: 5, linewidth: 5,
lineDash: [0, 0], 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({ computed: mapState({
connections: (state) => state.configConnections, 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: { methods: {
getCurve(connection) { getCurve(connection) {
const fromNode = this.findNode(connection.from) const fromNode = this.findNode(connection.from)
...@@ -114,28 +82,6 @@ export default { ...@@ -114,28 +82,6 @@ export default {
const r = generateBezierCurve(fromNode, toNode, 0.1) const r = generateBezierCurve(fromNode, toNode, 0.1)
return r 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> </script>
......
app/src/experimental/utils/svg.js
+ 10
− 6
View file @ 3a17a28d
...@@ -16,9 +16,11 @@ export const generateBezierCurve = (from, to, tension) => { ...@@ -16,9 +16,11 @@ export const generateBezierCurve = (from, to, tension) => {
tension * 2 tension * 2
) )
return `M${fromHandle.x},${fromHandle.y} C${fromHandle.x * return `M${fromHandle.x},${fromHandle.y} C${
(1 + adjustedTension)},${fromHandle.y} ${toHandle.x * fromHandle.x * (1 + adjustedTension)
(1 - adjustedTension)},${toHandle.y} ${toHandle.x},${toHandle.y}` },${fromHandle.y} ${toHandle.x * (1 - adjustedTension)},${toHandle.y} ${
toHandle.x
},${toHandle.y}`
} }
} }
...@@ -34,7 +36,9 @@ export const makeBezier = (fromHandle, toHandle, tension) => { ...@@ -34,7 +36,9 @@ export const makeBezier = (fromHandle, toHandle, tension) => {
tension * 2 tension * 2
) )
return `M${fromHandle.x},${fromHandle.y} C${fromHandle.x * return `M${fromHandle.x},${fromHandle.y} C${
(1 + adjustedTension)},${fromHandle.y} ${toHandle.x * fromHandle.x * (1 + adjustedTension)
(1 - adjustedTension)},${toHandle.y} ${toHandle.x},${toHandle.y}` },${fromHandle.y} ${toHandle.x * (1 - adjustedTension)},${toHandle.y} ${
toHandle.x
},${toHandle.y}`
} }
app/src/store/index.js
+ 14
− 78
View file @ 3a17a28d
...@@ -226,24 +226,18 @@ const store = new Vuex.Store({ ...@@ -226,24 +226,18 @@ const store = new Vuex.Store({
}, },
MAKE_CONNECT(state, e) { 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 = var connectid =
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.configConnections.push({ state.configConnections.push({
connectid: connectid, connect_id: connectid,
startid: e.fromNode, start_id: e.fromnode,
endid: e.toNode, end_id: e.tonode,
startx: e.startx, path: e.path,
starty: e.starty, color: e.color,
endx: e.endx, line_dash: e.linedash,
endy: e.endy, line_width: e.linewidth,
connected: e.connected,
}) })
pouchdb pouchdb
...@@ -271,50 +265,6 @@ const store = new Vuex.Store({ ...@@ -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) { MOVE_POS(state, e) {
var i var i
for (i = 0; i < Object.keys(state.configPositions).length; i++) { for (i = 0; i < Object.keys(state.configPositions).length; i++) {
...@@ -591,30 +541,16 @@ const store = new Vuex.Store({ ...@@ -591,30 +541,16 @@ const store = new Vuex.Store({
startConnect: ( startConnect: (
{ commit }, { commit },
{ connectid, fromNode, toNode, startx, starty, endx, endy, connected } { connectid, fromnode, tonode, path, color, linedash, linewidth }
) => { ) => {
commit('MAKE_CONNECT', { commit('MAKE_CONNECT', {
connectid, connectid,
fromNode, fromnode,
toNode, tonode,
startx, path,
starty, color,
endx, linedash,
endy, linewidth,
connected,
})
},
updateConnect: (
{ commit },
{ connectid, nodeid, xpos, ypos, connected }
) => {
commit('UPDATE_CONNECT', {
connectid,
nodeid,
xpos,
ypos,
connected,
}) })
}, },
......
app/src/views/Sandbox.vue
+ 6
− 1
View file @ 3a17a28d
<template> <template>
<div ref="container" class="wrapper" v-bind:style="modeContainerStyle"> <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 <PanZoomContainer
v-bind:width="width" v-bind:width="width"
v-bind:height="height" v-bind:height="height"
...@@ -28,7 +34,6 @@ ...@@ -28,7 +34,6 @@
/> --> /> -->
<ModeToolbar /> <ModeToolbar />
<ViewToolbar /> <ViewToolbar />
<ConnectionsLayer />
</div> </div>
</template> </template>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment