diff --git a/src/static/css/style.css b/src/static/css/style.css index 0c55026..ff90f9c 100644 --- a/src/static/css/style.css +++ b/src/static/css/style.css @@ -5827,25 +5827,29 @@ body.tutorial-active .tutorial-cursor { to { background-position: 0 0; } } -/* U-Turn-Pfeil zwischen Snake-Reihen */ +/* Reihenwechsel-Pfeil (kompakter ↓ direkt unter dem letzten Block) */ .pipeline-uturn { - height: 36px; + display: flex; + gap: var(--sp-md); + align-items: stretch; + height: 32px; width: 100%; margin: var(--sp-xs) 0; pointer-events: none; - overflow: visible; } -.pipeline-uturn svg { - width: 100%; +.uturn-spacer { flex: 0 0 168px; } +.uturn-arrow { + flex: 0 0 168px; + display: flex; + justify-content: center; + align-items: stretch; +} +.uturn-arrow svg { + width: 24px; height: 100%; overflow: visible; } -.pipeline-uturn-path { - fill: none; - stroke: var(--border); - stroke-width: 2; - stroke-linecap: round; -} +.pipeline-uturn-path, .pipeline-uturn-head { fill: none; stroke: var(--border); @@ -5855,12 +5859,12 @@ body.tutorial-active .tutorial-cursor { } .pipeline-uturn.is-flowing .pipeline-uturn-path { stroke: var(--accent); - stroke-dasharray: 8 6; - animation: pipelineUturnDash 0.9s linear infinite; + stroke-dasharray: 6 4; + animation: pipelineUturnDash 0.7s linear infinite; } .pipeline-uturn.is-flowing .pipeline-uturn-head { stroke: var(--accent); } @keyframes pipelineUturnDash { - to { stroke-dashoffset: -28; } + to { stroke-dashoffset: -20; } } .pipeline-loop { diff --git a/src/static/js/pipeline.js b/src/static/js/pipeline.js index 2b997ec..0f3551b 100644 --- a/src/static/js/pipeline.js +++ b/src/static/js/pipeline.js @@ -246,22 +246,20 @@ const Pipeline = { `; }, - /** U-Turn-Pfeil zwischen zwei Reihen (Snake-Übergang). */ + /** Kompakter Reihenwechsel-Pfeil: kurzer ↓ direkt unter dem letzten Block der oberen Reihe. */ _renderUturn(side, fromKey) { - // SVG-Bogen + Pfeilkopf, side="right" startet rechts oben, "left" startet links oben. - // viewBox: 100 wide, 44 high - const path = side === 'right' - ? 'M 92 0 L 92 18 A 14 14 0 0 1 78 32 L 8 32' - : 'M 8 0 L 8 18 A 14 14 0 0 0 22 32 L 92 32'; - const head = side === 'right' - ? '' - : ''; + const arrowSvg = ` +
+ + + + +
`; + const spacers = ''; + const inner = side === 'right' ? (spacers + arrowSvg) : (arrowSvg + spacers); return ` `; },