Analysepipeline: kompakter Reihenwechsel-Pfeil statt langem Bogen
Der U-Turn-Bogen, der quer ueber die ganze Box-Breite lief, wirkte bei nur drei Bloecken pro Reihe optisch ueberladen. Jetzt sitzt unter dem letzten Block der oberen Reihe ein schlichter, kurzer Pfeil nach unten, der direkt zum ersten Block der naechsten Reihe zeigt. - pipeline.js: Neue _renderUturn-Variante, die Spacer (Block-Breite) vor oder hinter den Pfeil setzt, sodass er passgenau unter dem letzten Block sitzt (rechts nach ltr-Reihe, links nach rtl-Reihe). - style.css: Pfeil-Container nutzt Flex mit Block-Breite-Spacern statt 100%-breitem SVG. Kurzer ↓ als gerader Pfad mit Pfeilkopf, is-flowing-Animation bleibt erhalten. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Dieser Commit ist enthalten in:
@@ -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 {
|
||||
|
||||
In neuem Issue referenzieren
Einen Benutzer sperren