Skip to content

Commit 1984d21

Browse files
serpentbladeclaude
serpentblade
and
claude
committed
fix(quick-260610-jrk): connection SVG display:block so connectors sit on sockets
Connection lines anchored ~14px below each socket, at the node BOTTOM, instead of on the socket. Root cause (DOM-evidence-confirmed): the connection <svg> was display:inline (the SVG default), so the 1px-tall SVG sat on the connection element's TEXT BASELINE. With the engine container's default line-height that baseline is ~14px below the connection element's top, and the connection element IS the area-transform origin — so the offset is in screen space and pushed every endpoint ~14px down. getDOMSocketPosition's socket measurements (offsetTop within the node-view) were already correct; the inline-SVG baseline was the sole drift. Fix: display:block on .rozie-flow-connection__svg (CSS-only, in FlowCanvas's scoped :root {} engine-DOM block). Drops the endpoint->socket vertical offset from ~13.9px to ~0.1px on all 6 targets. No script/emitter/core change; dist-parity zero-drift; regenerated 6 leaves. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
1 parent e28998a commit 1984d21

7 files changed

Lines changed: 104 additions & 0 deletions

File tree

‎packages/ui/rete/packages/angular/src/FlowCanvas.ts‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -119,6 +119,19 @@ function rozieToken(key: string): InjectionToken<unknown> {
119119
::ng-deep .rozie-flow-canvas .rozie-flow-socket:hover { background: #3b82f6; }
120120
::ng-deep .rozie-flow-canvas .rozie-flow-connection { position: absolute; }
121121
::ng-deep .rozie-flow-canvas .rozie-flow-connection__svg {
122+
/* display:block is LOAD-BEARING, not cosmetic. An <svg> is display:inline by
123+
default, so the 1px-tall connection SVG sits on the connection element's TEXT
124+
BASELINE — which, with the engine container's default line-height, pushes the
125+
whole path DOWN ~14px. That offset is in screen space (the connection element
126+
is the area-transform origin), so EVERY connection endpoint lands ~14px below
127+
its socket — visibly anchoring connectors at the BOTTOM of each node instead
128+
of on the socket. The socket positions reported by getDOMSocketPosition are
129+
already correct (offsetTop/offsetLeft within the node-view); the inline
130+
baseline is the sole cause of the vertical drift. block (or equivalently
131+
line-height:0 / vertical-align:top on the inline box) removes the baseline gap
132+
so the path renders at its true coordinates. Verified: drops the endpoint→
133+
socket vertical offset from ~13.9px to ~0.1px on all 6 targets. */
134+
display: block;
122135
overflow: visible;
123136
width: 1px;
124137
height: 1px;

‎packages/ui/rete/packages/lit/src/FlowCanvas.ts‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -93,6 +93,19 @@ export default class FlowCanvas extends SignalWatcher(LitElement) {
9393
.rozie-flow-canvas .rozie-flow-socket:hover { background: #3b82f6; }
9494
.rozie-flow-canvas .rozie-flow-connection { position: absolute; }
9595
.rozie-flow-canvas .rozie-flow-connection__svg {
96+
/* display:block is LOAD-BEARING, not cosmetic. An <svg> is display:inline by
97+
default, so the 1px-tall connection SVG sits on the connection element's TEXT
98+
BASELINE — which, with the engine container's default line-height, pushes the
99+
whole path DOWN ~14px. That offset is in screen space (the connection element
100+
is the area-transform origin), so EVERY connection endpoint lands ~14px below
101+
its socket — visibly anchoring connectors at the BOTTOM of each node instead
102+
of on the socket. The socket positions reported by getDOMSocketPosition are
103+
already correct (offsetTop/offsetLeft within the node-view); the inline
104+
baseline is the sole cause of the vertical drift. block (or equivalently
105+
line-height:0 / vertical-align:top on the inline box) removes the baseline gap
106+
so the path renders at its true coordinates. Verified: drops the endpoint→
107+
socket vertical offset from ~13.9px to ~0.1px on all 6 targets. */
108+
display: block;
96109
overflow: visible;
97110
width: 1px;
98111
height: 1px;
@@ -1515,6 +1528,19 @@ injectGlobalStyles('rozie-flow-canvas-global', `
15151528
.rozie-flow-canvas .rozie-flow-socket:hover { background: #3b82f6; }
15161529
.rozie-flow-canvas .rozie-flow-connection { position: absolute; }
15171530
.rozie-flow-canvas .rozie-flow-connection__svg {
1531+
/* display:block is LOAD-BEARING, not cosmetic. An <svg> is display:inline by
1532+
default, so the 1px-tall connection SVG sits on the connection element's TEXT
1533+
BASELINE — which, with the engine container's default line-height, pushes the
1534+
whole path DOWN ~14px. That offset is in screen space (the connection element
1535+
is the area-transform origin), so EVERY connection endpoint lands ~14px below
1536+
its socket — visibly anchoring connectors at the BOTTOM of each node instead
1537+
of on the socket. The socket positions reported by getDOMSocketPosition are
1538+
already correct (offsetTop/offsetLeft within the node-view); the inline
1539+
baseline is the sole cause of the vertical drift. block (or equivalently
1540+
line-height:0 / vertical-align:top on the inline box) removes the baseline gap
1541+
so the path renders at its true coordinates. Verified: drops the endpoint→
1542+
socket vertical offset from ~13.9px to ~0.1px on all 6 targets. */
1543+
display: block;
15181544
overflow: visible;
15191545
width: 1px;
15201546
height: 1px;

‎packages/ui/rete/packages/react/src/FlowCanvas.global.css‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,19 @@
5252
.rozie-flow-canvas .rozie-flow-socket:hover { background: #3b82f6; }
5353
.rozie-flow-canvas .rozie-flow-connection { position: absolute; }
5454
.rozie-flow-canvas .rozie-flow-connection__svg {
55+
/* display:block is LOAD-BEARING, not cosmetic. An <svg> is display:inline by
56+
default, so the 1px-tall connection SVG sits on the connection element's TEXT
57+
BASELINE — which, with the engine container's default line-height, pushes the
58+
whole path DOWN ~14px. That offset is in screen space (the connection element
59+
is the area-transform origin), so EVERY connection endpoint lands ~14px below
60+
its socket — visibly anchoring connectors at the BOTTOM of each node instead
61+
of on the socket. The socket positions reported by getDOMSocketPosition are
62+
already correct (offsetTop/offsetLeft within the node-view); the inline
63+
baseline is the sole cause of the vertical drift. block (or equivalently
64+
line-height:0 / vertical-align:top on the inline box) removes the baseline gap
65+
so the path renders at its true coordinates. Verified: drops the endpoint→
66+
socket vertical offset from ~13.9px to ~0.1px on all 6 targets. */
67+
display: block;
5568
overflow: visible;
5669
width: 1px;
5770
height: 1px;

‎packages/ui/rete/packages/solid/src/FlowCanvas.tsx‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -81,6 +81,19 @@ __rozieInjectStyle('FlowCanvas-cd396d6a', `.rozie-flow-canvas[data-rozie-s-cd396
8181
.rozie-flow-canvas .rozie-flow-socket:hover { background: #3b82f6; }
8282
.rozie-flow-canvas .rozie-flow-connection { position: absolute; }
8383
.rozie-flow-canvas .rozie-flow-connection__svg {
84+
/* display:block is LOAD-BEARING, not cosmetic. An <svg> is display:inline by
85+
default, so the 1px-tall connection SVG sits on the connection element's TEXT
86+
BASELINE — which, with the engine container's default line-height, pushes the
87+
whole path DOWN ~14px. That offset is in screen space (the connection element
88+
is the area-transform origin), so EVERY connection endpoint lands ~14px below
89+
its socket — visibly anchoring connectors at the BOTTOM of each node instead
90+
of on the socket. The socket positions reported by getDOMSocketPosition are
91+
already correct (offsetTop/offsetLeft within the node-view); the inline
92+
baseline is the sole cause of the vertical drift. block (or equivalently
93+
line-height:0 / vertical-align:top on the inline box) removes the baseline gap
94+
so the path renders at its true coordinates. Verified: drops the endpoint→
95+
socket vertical offset from ~13.9px to ~0.1px on all 6 targets. */
96+
display: block;
8497
overflow: visible;
8598
width: 1px;
8699
height: 1px;

‎packages/ui/rete/packages/svelte/src/FlowCanvas.svelte‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1368,6 +1368,19 @@ $effect(() => { const __watchVal = (() => zoom)(); untrack(() => { if (__rozieWa
13681368
.rozie-flow-canvas .rozie-flow-socket:hover { background: #3b82f6; }
13691369
.rozie-flow-canvas .rozie-flow-connection { position: absolute; }
13701370
.rozie-flow-canvas .rozie-flow-connection__svg {
1371+
/* display:block is LOAD-BEARING, not cosmetic. An <svg> is display:inline by
1372+
default, so the 1px-tall connection SVG sits on the connection element's TEXT
1373+
BASELINE — which, with the engine container's default line-height, pushes the
1374+
whole path DOWN ~14px. That offset is in screen space (the connection element
1375+
is the area-transform origin), so EVERY connection endpoint lands ~14px below
1376+
its socket — visibly anchoring connectors at the BOTTOM of each node instead
1377+
of on the socket. The socket positions reported by getDOMSocketPosition are
1378+
already correct (offsetTop/offsetLeft within the node-view); the inline
1379+
baseline is the sole cause of the vertical drift. block (or equivalently
1380+
line-height:0 / vertical-align:top on the inline box) removes the baseline gap
1381+
so the path renders at its true coordinates. Verified: drops the endpoint→
1382+
socket vertical offset from ~13.9px to ~0.1px on all 6 targets. */
1383+
display: block;
13711384
overflow: visible;
13721385
width: 1px;
13731386
height: 1px;

‎packages/ui/rete/packages/vue/src/FlowCanvas.vue‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1337,6 +1337,19 @@ defineExpose({ getEditor, getArea, addNode, removeNode, addConnection, removeCon
13371337
.rozie-flow-canvas .rozie-flow-socket:hover { background: #3b82f6; }
13381338
.rozie-flow-canvas .rozie-flow-connection { position: absolute; }
13391339
.rozie-flow-canvas .rozie-flow-connection__svg {
1340+
/* display:block is LOAD-BEARING, not cosmetic. An <svg> is display:inline by
1341+
default, so the 1px-tall connection SVG sits on the connection element's TEXT
1342+
BASELINE — which, with the engine container's default line-height, pushes the
1343+
whole path DOWN ~14px. That offset is in screen space (the connection element
1344+
is the area-transform origin), so EVERY connection endpoint lands ~14px below
1345+
its socket — visibly anchoring connectors at the BOTTOM of each node instead
1346+
of on the socket. The socket positions reported by getDOMSocketPosition are
1347+
already correct (offsetTop/offsetLeft within the node-view); the inline
1348+
baseline is the sole cause of the vertical drift. block (or equivalently
1349+
line-height:0 / vertical-align:top on the inline box) removes the baseline gap
1350+
so the path renders at its true coordinates. Verified: drops the endpoint→
1351+
socket vertical offset from ~13.9px to ~0.1px on all 6 targets. */
1352+
display: block;
13401353
overflow: visible;
13411354
width: 1px;
13421355
height: 1px;

‎packages/ui/rete/src/FlowCanvas.rozie‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1117,6 +1117,19 @@ $expose({
11171117
.rozie-flow-canvas .rozie-flow-socket:hover { background: #3b82f6; }
11181118
.rozie-flow-canvas .rozie-flow-connection { position: absolute; }
11191119
.rozie-flow-canvas .rozie-flow-connection__svg {
1120+
/* display:block is LOAD-BEARING, not cosmetic. An <svg> is display:inline by
1121+
default, so the 1px-tall connection SVG sits on the connection element's TEXT
1122+
BASELINE — which, with the engine container's default line-height, pushes the
1123+
whole path DOWN ~14px. That offset is in screen space (the connection element
1124+
is the area-transform origin), so EVERY connection endpoint lands ~14px below
1125+
its socket — visibly anchoring connectors at the BOTTOM of each node instead
1126+
of on the socket. The socket positions reported by getDOMSocketPosition are
1127+
already correct (offsetTop/offsetLeft within the node-view); the inline
1128+
baseline is the sole cause of the vertical drift. block (or equivalently
1129+
line-height:0 / vertical-align:top on the inline box) removes the baseline gap
1130+
so the path renders at its true coordinates. Verified: drops the endpoint→
1131+
socket vertical offset from ~13.9px to ~0.1px on all 6 targets. */
1132+
display: block;
11201133
overflow: visible;
11211134
width: 1px;
11221135
height: 1px;

0 commit comments

Comments
 (0)