|
|
@@ -11,7 +11,7 @@
|
|
|
:key="i"
|
|
|
v-bind="linkProps(l)"
|
|
|
/>
|
|
|
- <!-- mousel link-->
|
|
|
+ <!-- mouse link-->
|
|
|
<flow-link
|
|
|
v-if="pointerLink.active"
|
|
|
v-bind="pointerLink"
|
|
|
@@ -21,8 +21,7 @@
|
|
|
v-for="(n,i) of nodeData.nodes"
|
|
|
:key="'node' + n.id"
|
|
|
:id="n.id"
|
|
|
- :value="n"
|
|
|
- :transform="nodeTransform(i)"
|
|
|
+ v-bind="nodeProps(n)"
|
|
|
@nodePointerDown.prevent="nodeDragStart($event,i)"
|
|
|
@socketPointerDown="socketPointerDown(n.id,...arguments)"
|
|
|
/>
|
|
|
@@ -49,29 +48,44 @@ export default {
|
|
|
},
|
|
|
data () {
|
|
|
return {
|
|
|
- nodeData: nodeData, // shared?
|
|
|
- pointerLink: {active: false, x1: 0, y1: 0, x2: 0, y2: 0}
|
|
|
+ nodeData: nodeData,
|
|
|
+ pointerLink: {active: false, x1: 0, y1: 0, x2: 0, y2: 0},
|
|
|
+ hlType: ''
|
|
|
}
|
|
|
},
|
|
|
computed: {
|
|
|
- nodeTransform () {
|
|
|
- return (i) => `translate(${this.nodeData.nodes[i].x} ${this.nodeData.nodes[i].y})`
|
|
|
+ nodeProps () {
|
|
|
+ return (n) => {
|
|
|
+ return {
|
|
|
+ transform: `translate(${n.x} ${n.y})`,
|
|
|
+ id: n.id,
|
|
|
+ label: n.label,
|
|
|
+ type: this.nodeData.registry[n.src].type,
|
|
|
+ inputs: this.nodeData.registry[n.src].inputs,
|
|
|
+ output: this.nodeData.registry[n.src].output,
|
|
|
+ match: {}
|
|
|
+ }
|
|
|
+ }
|
|
|
},
|
|
|
// computed
|
|
|
linkProps () {
|
|
|
return (link) => {
|
|
|
if (!this.$refs.nodes) return
|
|
|
- const refFrom = this.$refs.nodes.find(n => n.value.id === link.from)
|
|
|
- const refTo = this.$refs.nodes.find(n => n.value.id === link.to)
|
|
|
+ // find Index perhaps
|
|
|
+ const nodeFrom = this.nodeData.nodes.find(n => n.id === link.from)
|
|
|
+ const nodeTo = this.nodeData.nodes.find(n => n.id === link.to)
|
|
|
|
|
|
- const fromOutput = refFrom.output(0) // only 1 output
|
|
|
- const toInput = refTo.input(link.in)
|
|
|
+ const refFrom = this.$refs.nodes.find(n => n.id === link.from)
|
|
|
+ const refTo = this.$refs.nodes.find(n => n.id === link.to)
|
|
|
|
|
|
- const x1 = refFrom.value.x + fromOutput.cx // + inputPos.x
|
|
|
- const y1 = refFrom.value.y + fromOutput.cy // + inputPos.y
|
|
|
+ const fromOutput = refFrom.outputPos(0) // only 1 output
|
|
|
+ const toInput = refTo.inputPos(link.in)
|
|
|
|
|
|
- const x2 = refTo.value.x + toInput.cx
|
|
|
- const y2 = refTo.value.y + toInput.cy
|
|
|
+ const x1 = nodeFrom.x + fromOutput.cx // + inputPos.x
|
|
|
+ const y1 = nodeFrom.y + fromOutput.cy // + inputPos.y
|
|
|
+
|
|
|
+ const x2 = nodeTo.x + toInput.cx
|
|
|
+ const y2 = nodeTo.y + toInput.cy
|
|
|
// console.log('Thing:', x1, y1, x2, y2)
|
|
|
return {x1, y1, x2, y2}
|
|
|
}
|
|
|
@@ -85,27 +99,23 @@ export default {
|
|
|
},
|
|
|
methods: {
|
|
|
socketPointerDown (nodeId, e, socket) {
|
|
|
- const node = this.$refs.nodes.find(n => n.value.id === nodeId)
|
|
|
+ const nodeRef = this.$refs.nodes.find(n => n.id === nodeId)
|
|
|
+ const node = this.nodeData.nodes.find(n => n.id === nodeId)
|
|
|
|
|
|
- const isInput = socket.in != undefined
|
|
|
- console.log('Socket:', socket)
|
|
|
- if (isInput) {
|
|
|
- console.log('Socket is input')
|
|
|
- }
|
|
|
- const socketPos = isInput ? node.input(socket.in) : node.output(socket.out)
|
|
|
+ const isInput = socket.in !== undefined
|
|
|
+ const socketPos = isInput ? nodeRef.inputPos(socket.in) : nodeRef.outputPos(socket.out)
|
|
|
|
|
|
const p = this.transformedPoint(e.x, e.y)
|
|
|
-
|
|
|
if (isInput) {
|
|
|
- this.pointerLink.x1 = node.value.x + socketPos.cx
|
|
|
- this.pointerLink.y1 = node.value.y + socketPos.cy
|
|
|
+ this.pointerLink.x1 = node.x + socketPos.cx
|
|
|
+ this.pointerLink.y1 = node.y + socketPos.cy
|
|
|
this.pointerLink.x2 = p.x
|
|
|
this.pointerLink.y2 = p.y
|
|
|
} else {
|
|
|
this.pointerLink.x1 = p.x
|
|
|
this.pointerLink.y1 = p.y
|
|
|
- this.pointerLink.x2 = node.value.x + socketPos.cx
|
|
|
- this.pointerLink.y2 = node.value.y + socketPos.cy
|
|
|
+ this.pointerLink.x2 = node.x + socketPos.cx
|
|
|
+ this.pointerLink.y2 = node.y + socketPos.cy
|
|
|
}
|
|
|
|
|
|
this.pointerLink.active = true
|
|
|
@@ -154,6 +164,7 @@ export default {
|
|
|
document.addEventListener('mousemove', drag)
|
|
|
document.addEventListener('mouseup', drop)
|
|
|
},
|
|
|
+
|
|
|
createSVGPoint (x, y) {
|
|
|
const p = this.$refs.svg.createSVGPoint()
|
|
|
p.x = x; p.y = y
|
luis