Skip to content

Commit 21907b4

Browse files
0HyperCube0HyperCube
committed
Data types and zooming on wires
1 parent 06d2625 commit 21907b4

File tree

1 file changed

+50
-38
lines changed

1 file changed

+50
-38
lines changed

‎frontend/src/components/panels/NodeGraph.vue

Lines changed: 50 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -21,10 +21,10 @@
2121
<div class="node" style="--offset-left: 3; --offset-top: 2; --data-color: var(--color-data-raster); --data-color-dim: var(--color-data-raster-dim)">
2222
<div class="primary">
2323
<div class="ports">
24-
<!-- <div class="input port">
24+
<!-- <div class="input port" data-datatype="raster">
2525
<div></div>
2626
</div> -->
27-
<div class="output port">
27+
<div class="output port" data-datatype="raster">
2828
<div></div>
2929
</div>
3030
</div>
@@ -35,10 +35,10 @@
3535
<div class="node" style="--offset-left: 9; --offset-top: 2; --data-color: var(--color-data-raster); --data-color-dim: var(--color-data-raster-dim)">
3636
<div class="primary">
3737
<div class="ports">
38-
<div class="input port">
38+
<div class="input port" data-datatype="raster">
3939
<div></div>
4040
</div>
41-
<div class="output port">
41+
<div class="output port" data-datatype="raster">
4242
<div></div>
4343
</div>
4444
</div>
@@ -48,10 +48,10 @@
4848
<div class="arguments">
4949
<div class="argument">
5050
<div class="ports">
51-
<div class="input port" style="--data-color: var(--color-data-raster); --data-color-dim: var(--color-data-vector-dim)">
51+
<div class="input port" data-datatype="raster" style="--data-color: var(--color-data-raster); --data-color-dim: var(--color-data-vector-dim)">
5252
<div></div>
5353
</div>
54-
<!-- <div class="output port">
54+
<!-- <div class="output port" data-datatype="raster">
5555
<div></div>
5656
</div> -->
5757
</div>
@@ -62,10 +62,10 @@
6262
<div class="node" style="--offset-left: 15; --offset-top: 2; --data-color: var(--color-data-raster); --data-color-dim: var(--color-data-raster-dim)">
6363
<div class="primary">
6464
<div class="ports">
65-
<!-- <div class="input port">
65+
<!-- <div class="input port" data-datatype="raster">
6666
<div></div>
6767
</div> -->
68-
<div class="output port">
68+
<div class="output port" data-datatype="raster">
6969
<div></div>
7070
</div>
7171
</div>
@@ -76,10 +76,10 @@
7676
<div class="node" style="--offset-left: 21; --offset-top: 2; --data-color: var(--color-data-raster); --data-color-dim: var(--color-data-raster-dim)">
7777
<div class="primary">
7878
<div class="ports">
79-
<div class="input port">
79+
<div class="input port" data-datatype="raster">
8080
<div></div>
8181
</div>
82-
<div class="output port">
82+
<div class="output port" data-datatype="raster">
8383
<div></div>
8484
</div>
8585
</div>
@@ -89,10 +89,10 @@
8989
<div class="arguments">
9090
<div class="argument">
9191
<div class="ports">
92-
<div class="input port">
92+
<div class="input port" data-datatype="raster">
9393
<div></div>
9494
</div>
95-
<!-- <div class="output port">
95+
<!-- <div class="output port" data-datatype="raster">
9696
<div></div>
9797
</div> -->
9898
</div>
@@ -103,10 +103,10 @@
103103
<div class="node" style="--offset-left: 2; --offset-top: 5; --data-color: var(--color-data-vector); --data-color-dim: var(--color-data-vector-dim)">
104104
<div class="primary">
105105
<div class="ports">
106-
<!-- <div class="input port">
106+
<!-- <div class="input port" data-datatype="vector">
107107
<div></div>
108108
</div> -->
109-
<div class="output port">
109+
<div class="output port" data-datatype="vector">
110110
<div></div>
111111
</div>
112112
</div>
@@ -117,10 +117,10 @@
117117
<div class="node" style="--offset-left: 6; --offset-top: 7; --data-color: var(--color-data-raster); --data-color-dim: var(--color-data-raster-dim)">
118118
<div class="primary">
119119
<div class="ports">
120-
<!-- <div class="input port">
120+
<!-- <div class="input port" data-datatype="raster">
121121
<div></div>
122122
</div> -->
123-
<div class="output port">
123+
<div class="output port" data-datatype="raster">
124124
<div></div>
125125
</div>
126126
</div>
@@ -131,10 +131,10 @@
131131
<div class="node" style="--offset-left: 12; --offset-top: 7; --data-color: var(--color-data-raster); --data-color-dim: var(--color-data-raster-dim)">
132132
<div class="primary">
133133
<div class="ports">
134-
<!-- <div class="input port">
134+
<!-- <div class="input port" data-datatype="raster">
135135
<div></div>
136136
</div> -->
137-
<div class="output port">
137+
<div class="output port" data-datatype="raster">
138138
<div></div>
139139
</div>
140140
</div>
@@ -145,10 +145,10 @@
145145
<div class="node" style="--offset-left: 12; --offset-top: 9; --data-color: var(--color-data-raster); --data-color-dim: var(--color-data-raster-dim)">
146146
<div class="primary">
147147
<div class="ports">
148-
<!-- <div class="input port">
148+
<!-- <div class="input port" data-datatype="raster">
149149
<div></div>
150150
</div> -->
151-
<div class="output port">
151+
<div class="output port" data-datatype="raster">
152152
<div></div>
153153
</div>
154154
</div>
@@ -157,7 +157,13 @@
157157
</div>
158158
</div>
159159
</div>
160-
<div class="wires">
160+
<div
161+
class="wires"
162+
:style="{
163+
transform: `scale(${transform.scale}) translate(${transform.x}px, ${transform.y}px)`,
164+
transformOrigin: `0 0`,
165+
}"
166+
>
161167
<svg ref="wiresContainer"></svg>
162168
</div>
163169
</LayoutRow>
@@ -371,15 +377,15 @@ export default defineComponent({
371377
buildWirePathString(outputBounds: DOMRect, inputBounds: DOMRect, verticalOut: boolean, verticalIn: boolean): string {
372378
const containerBounds = (this.$refs.nodesContainer as HTMLElement).getBoundingClientRect();
373379
374-
const outX = verticalOut ? outputBounds.x + outputBounds.width / 2 : outputBounds.x + (outputBounds.width - 1);
375-
const outY = verticalOut ? outputBounds.y : outputBounds.y + outputBounds.height / 2;
376-
const outConnectorX = outX - containerBounds.x;
377-
const outConnectorY = outY - containerBounds.y;
380+
const outX = verticalOut ? outputBounds.x + outputBounds.width / 2 : outputBounds.x + outputBounds.width - 1;
381+
const outY = verticalOut ? outputBounds.y + 1 : outputBounds.y + outputBounds.height / 2;
382+
const outConnectorX = (outX - containerBounds.x) / this.transform.scale;
383+
const outConnectorY = (outY - containerBounds.y) / this.transform.scale;
378384
379385
const inX = verticalIn ? inputBounds.x + inputBounds.width / 2 : inputBounds.x + 1;
380-
const inY = verticalIn ? inputBounds.y + (outputBounds.height + 1) : inputBounds.y + inputBounds.height / 2;
381-
const inConnectorX = inX - containerBounds.x;
382-
const inConnectorY = inY - containerBounds.y;
386+
const inY = verticalIn ? inputBounds.y + inputBounds.height - 1 : inputBounds.y + inputBounds.height / 2;
387+
const inConnectorX = (inX - containerBounds.x) / this.transform.scale;
388+
const inConnectorY = (inY - containerBounds.y) / this.transform.scale;
383389
// debugger;
384390
const horizontalGap = Math.abs(outConnectorX - inConnectorX);
385391
const verticalGap = Math.abs(outConnectorY - inConnectorY);
@@ -396,13 +402,13 @@ export default defineComponent({
396402
verticalIn ? inConnectorX : inConnectorX - horizontalCurve
397403
},${verticalIn ? inConnectorY + verticalCurve : inConnectorY} ${inConnectorX},${inConnectorY}`;
398404
},
399-
createWirePath(outputPort: HTMLElement, inputPort: HTMLElement): SVGPathElement {
400-
const pathString = this.buildWirePathString(outputPort.getBoundingClientRect(), inputPort.getBoundingClientRect(), true, false);
401-
const dataType = "vector";
405+
createWirePath(outputPort: HTMLElement, inputPort: HTMLElement, verticalOut: boolean, verticalIn: boolean): SVGPathElement {
406+
const pathString = this.buildWirePathString(outputPort.getBoundingClientRect(), inputPort.getBoundingClientRect(), verticalOut, verticalIn);
407+
const dataType = outputPort.dataset.datatype;
402408
403409
const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
404410
path.setAttribute("d", pathString);
405-
path.setAttribute("style", `--data-color: var(--color-data-${dataType}); --data-color-dim: var(--color-data-${dataType}-dim)`);
411+
path.setAttribute("style", `--data-color: var(--color-data-${dataType}); --data-color-dim: var(--color-data-${dataType}-dim)`);
406412
(this.$refs.wiresContainer as HTMLElement).appendChild(path);
407413
408414
return path;
@@ -430,11 +436,10 @@ export default defineComponent({
430436
},
431437
pointerDown(e: PointerEvent) {
432438
const port = (e.target as HTMLElement).closest(".port") as HTMLElement;
433-
console.log(e.target, port);
434439
435440
if (port) {
436441
const output = port.classList.contains("output");
437-
const path = this.createWirePath(port, port);
442+
const path = this.createWirePath(port, port, false, false);
438443
this.drawing = { port, output, path };
439444
} else {
440445
this.panning = true;
@@ -451,7 +456,7 @@ export default defineComponent({
451456
const output = this.drawing.output ? port : mouse;
452457
const input = this.drawing.output ? mouse : port;
453458
454-
const pathString = this.buildWirePathString(output, input, true, false);
459+
const pathString = this.buildWirePathString(output, input, false, false);
455460
this.drawing.path.setAttribute("d", pathString);
456461
}
457462
},
@@ -462,9 +467,16 @@ export default defineComponent({
462467
},
463468
},
464469
mounted() {
465-
const outputPort = document.querySelectorAll(".output.port")[4] as HTMLElement;
466-
const inputPort = document.querySelectorAll(".input.port")[1] as HTMLElement;
467-
this.createWirePath(outputPort, inputPort);
470+
{
471+
const outputPort = document.querySelectorAll(".output.port")[4] as HTMLElement;
472+
const inputPort = document.querySelectorAll(".input.port")[1] as HTMLElement;
473+
this.createWirePath(outputPort, inputPort, true, true);
474+
}
475+
{
476+
const outputPort = document.querySelectorAll(".output.port")[6] as HTMLElement;
477+
const inputPort = document.querySelectorAll(".input.port")[3] as HTMLElement;
478+
this.createWirePath(outputPort, inputPort, true, false);
479+
}
468480
},
469481
components: {
470482
LayoutRow,

0 commit comments

Comments
 (0)