mirror of
https://github.com/anomalyco/opencode.git
synced 2026-08-15 17:08:21 -04:00
fix(merman): remove sequence lifeline fade (#41623)
This commit is contained in:
Kit Langton
@@ -134,7 +134,6 @@ function prepareDiagram(kind: DiagramKind, source: string, options: MermaidMarkd
|
||||
resolveSequenceStyleColors({
|
||||
participant: color(colors.primary),
|
||||
lifeline: color(colors.muted),
|
||||
lifelineEnd: color(colors.background),
|
||||
group: color(colors.secondary),
|
||||
request: color(colors.request ?? colors.primary),
|
||||
response: color(colors.response ?? colors.primary),
|
||||
|
||||
@@ -1,11 +1,9 @@
|
||||
import { describe, expect, test } from "bun:test"
|
||||
import { RGBA } from "@opentui/core"
|
||||
import { diagramTextWidth } from "../core/text.js"
|
||||
import { expectDiagram } from "../test/diagram.js"
|
||||
import { renderSequenceDiagram } from "./diagram.js"
|
||||
import { drawSequenceDiagramGrid } from "./drawing.js"
|
||||
import { parseMermaidSequenceDiagram } from "./parser.js"
|
||||
import { resolveSequenceStyleColors } from "./style.js"
|
||||
|
||||
describe("SequenceDiagram", () => {
|
||||
test("parses Mermaid sequenceDiagram participants and messages", () => {
|
||||
@@ -62,10 +60,6 @@ sequenceDiagram
|
||||
│ 401 WWW-Auth │
|
||||
◄─────────────────┤
|
||||
│ │
|
||||
│ │
|
||||
│ │
|
||||
│ │
|
||||
│ │
|
||||
`)
|
||||
})
|
||||
|
||||
@@ -98,10 +92,6 @@ sequenceDiagram
|
||||
│ │ │
|
||||
│ ├─ same target or reject ──►
|
||||
│ │ │
|
||||
│ │ │
|
||||
│ │ │
|
||||
│ │ │
|
||||
│ │ │
|
||||
`)
|
||||
})
|
||||
|
||||
@@ -171,27 +161,6 @@ sequenceDiagram
|
||||
expect(new Set(rampStyles)).toEqual(new Set(["lifelineRamp1", "lifelineRamp2", "lifelineRamp3"]))
|
||||
})
|
||||
|
||||
test("fades the bottom of participant lifelines", () => {
|
||||
const grid = drawSequenceDiagramGrid(
|
||||
parseMermaidSequenceDiagram(
|
||||
"sequenceDiagram\n participant Browser\n participant Server\n Browser->>Server: request",
|
||||
),
|
||||
)
|
||||
const fadeStyles = grid.rows
|
||||
.flatMap((row) => row.map((cell) => cell.style))
|
||||
.filter((style) => style?.startsWith("lifelineFade"))
|
||||
|
||||
expect(new Set(fadeStyles)).toEqual(
|
||||
new Set(["lifelineFade1", "lifelineFade2", "lifelineFade3", "lifelineFade4", "lifelineFade5"]),
|
||||
)
|
||||
|
||||
const lifeline = RGBA.fromInts(100, 120, 110)
|
||||
const background = RGBA.fromInts(10, 20, 15)
|
||||
const colors = resolveSequenceStyleColors({ lifeline, lifelineEnd: background })
|
||||
expect(colors.lifelineFade1.equals(lifeline)).toBe(true)
|
||||
expect(colors.lifelineFade5.equals(background)).toBe(true)
|
||||
})
|
||||
|
||||
test("renders notes and long cross-participant messages in order", () => {
|
||||
const output = renderSequenceDiagram(`
|
||||
sequenceDiagram
|
||||
@@ -364,10 +333,6 @@ sequenceDiagram
|
||||
│ │
|
||||
│ async dashed │
|
||||
│(─────────────────┤
|
||||
│ │
|
||||
│ │
|
||||
│ │
|
||||
│ │
|
||||
│ │"
|
||||
`)
|
||||
})
|
||||
@@ -697,10 +662,6 @@ sequenceDiagram
|
||||
│ │ │ │ │ │
|
||||
│ │ │ get user:42 │ │ │
|
||||
│ │ ├─────────────────► │ │
|
||||
│ │ │ │ │ │
|
||||
│ │ │ │ │ │
|
||||
│ │ │ │ │ │
|
||||
│ │ │ │ │ │
|
||||
│ │ │ │ │ │
|
||||
╰─────────────────────────────────────────╯"
|
||||
`)
|
||||
@@ -748,10 +709,6 @@ sequenceDiagram
|
||||
├────────────────────╮
|
||||
│ Check Permissions │
|
||||
◄────────────────────╯
|
||||
│
|
||||
│
|
||||
│
|
||||
│
|
||||
│"
|
||||
`)
|
||||
})
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { BorderChars, type BorderStyle } from "@opentui/core"
|
||||
import { DiagramCanvas } from "../core/canvas.js"
|
||||
import { diagramTextWidth } from "../core/text.js"
|
||||
import { DEFAULT_FRAGMENT_BORDER_STYLE, SEQUENCE_LIFELINE_FADE_STEPS } from "./options.js"
|
||||
import { DEFAULT_FRAGMENT_BORDER_STYLE } from "./options.js"
|
||||
import {
|
||||
createSequencePlacementPlan,
|
||||
type SequenceGroupPlacement,
|
||||
@@ -227,13 +227,7 @@ export function drawSequenceDiagramGrid(
|
||||
|
||||
for (let y = lifelineStartY; y <= lifelineEndY; y++) {
|
||||
const distance = y - lifelineStartY
|
||||
const fadeDistance = y - (lifelineEndY - SEQUENCE_LIFELINE_FADE_STEPS.length + 1)
|
||||
const style =
|
||||
fadeDistance >= 0
|
||||
? (`lifelineFade${fadeDistance + 1}` as SequenceCellStyle)
|
||||
: !options.compact && distance < 3
|
||||
? (`lifelineRamp${distance + 1}` as SequenceCellStyle)
|
||||
: "lifeline"
|
||||
const style = !options.compact && distance < 3 ? (`lifelineRamp${distance + 1}` as SequenceCellStyle) : "lifeline"
|
||||
setCell(grid, center, y, SEQUENCE_BORDER.vertical, style)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2,7 +2,6 @@ import type { BorderStyle } from "@opentui/core"
|
||||
|
||||
export const DEFAULT_MIN_PARTICIPANT_GAP = 18
|
||||
export const DEFAULT_FRAGMENT_BORDER_STYLE = "rounded" satisfies BorderStyle
|
||||
export const SEQUENCE_LIFELINE_FADE_STEPS = [1, 2, 3, 4, 5] as const
|
||||
|
||||
export function normalizeSequenceMinParticipantGap(value: number | undefined): number {
|
||||
return value === undefined || !Number.isFinite(value) ? DEFAULT_MIN_PARTICIPANT_GAP : Math.max(1, Math.floor(value))
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { diagramTextWidth } from "../core/text.js"
|
||||
import { normalizeSequenceMinParticipantGap, SEQUENCE_LIFELINE_FADE_STEPS } from "./options.js"
|
||||
import { normalizeSequenceMinParticipantGap } from "./options.js"
|
||||
import type {
|
||||
SequenceDiagram,
|
||||
SequenceDiagramRenderOptions,
|
||||
@@ -531,10 +531,7 @@ export function createSequencePlacementPlan(
|
||||
const stepStartY = lifelineStartY + 1
|
||||
const width = Math.max(contentBounds.rightX + 1, ...groups.map((group) => group.rightX + 1), fragments.rightX + 1)
|
||||
const baseHeight =
|
||||
stepStartY +
|
||||
diagram.steps.reduce((total, step) => total + getStepHeight(step, centers, indexes, compact), 0) +
|
||||
SEQUENCE_LIFELINE_FADE_STEPS.length -
|
||||
1
|
||||
stepStartY + diagram.steps.reduce((total, step) => total + getStepHeight(step, centers, indexes, compact), 0)
|
||||
const height = hasGroups ? Math.max(5, baseHeight + 1) : Math.max(3, baseHeight)
|
||||
const lifelineEndY = hasGroups ? height - 2 : height - 1
|
||||
const participants = diagram.participants.map((participant, index) => {
|
||||
|
||||
@@ -1,19 +1,16 @@
|
||||
import { RGBA } from "@opentui/core"
|
||||
import {
|
||||
blendColor,
|
||||
createColorRampTheme,
|
||||
DIAGRAM_FADE_STEPS,
|
||||
numberedStyleKeys,
|
||||
rgba,
|
||||
type DiagramRgb,
|
||||
} from "../core/color/style.js"
|
||||
import { SEQUENCE_LIFELINE_FADE_STEPS } from "./options.js"
|
||||
import type { FadeStyle, LifelineFadeStyle, LifelineRampStyle, SequenceCellStyle } from "./types.js"
|
||||
import type { FadeStyle, LifelineRampStyle, SequenceCellStyle } from "./types.js"
|
||||
|
||||
export interface SequenceStyleColors {
|
||||
participant?: RGBA
|
||||
lifeline?: RGBA
|
||||
lifelineEnd?: RGBA
|
||||
group?: RGBA
|
||||
request?: RGBA
|
||||
response?: RGBA
|
||||
@@ -33,7 +30,6 @@ const LIFELINE_RAMP_STYLES = [
|
||||
const DEFAULT_THEME_RGB = {
|
||||
participant: [228, 239, 232],
|
||||
lifeline: [111, 138, 126],
|
||||
lifelineEnd: [15, 23, 19],
|
||||
group: [76, 99, 89],
|
||||
request: [134, 225, 200],
|
||||
response: [230, 177, 126],
|
||||
@@ -45,22 +41,14 @@ const DEFAULT_THEME_RGB = {
|
||||
|
||||
export function resolveSequenceStyleColors(
|
||||
colors: SequenceStyleColors = {},
|
||||
): Required<SequenceStyleColors> & Record<FadeStyle | LifelineFadeStyle | LifelineRampStyle, RGBA> {
|
||||
): Required<SequenceStyleColors> & Record<FadeStyle | LifelineRampStyle, RGBA> {
|
||||
const participant = colors.participant ?? rgba(DEFAULT_THEME_RGB.participant)
|
||||
const lifeline = colors.lifeline ?? rgba(DEFAULT_THEME_RGB.lifeline)
|
||||
const request = colors.request ?? rgba(DEFAULT_THEME_RGB.request)
|
||||
const response = colors.response ?? rgba(DEFAULT_THEME_RGB.response)
|
||||
const lifelineEnd = colors.lifelineEnd ?? rgba(DEFAULT_THEME_RGB.lifelineEnd)
|
||||
const lifelineFade = Object.fromEntries(
|
||||
SEQUENCE_LIFELINE_FADE_STEPS.map((step, index) => [
|
||||
`lifelineFade${step}`,
|
||||
blendColor(lifeline, lifelineEnd, index / (SEQUENCE_LIFELINE_FADE_STEPS.length - 1)),
|
||||
]),
|
||||
) as Record<LifelineFadeStyle, RGBA>
|
||||
return {
|
||||
participant,
|
||||
lifeline,
|
||||
lifelineEnd,
|
||||
group: colors.group ?? rgba(DEFAULT_THEME_RGB.group),
|
||||
request,
|
||||
response,
|
||||
@@ -71,13 +59,12 @@ export function resolveSequenceStyleColors(
|
||||
...createColorRampTheme(numberedStyleKeys("requestFade", SEQUENCE_FADE_STEPS), lifeline, request),
|
||||
...createColorRampTheme(numberedStyleKeys("responseFade", SEQUENCE_FADE_STEPS), lifeline, response),
|
||||
...createColorRampTheme(LIFELINE_RAMP_STYLES, participant, lifeline),
|
||||
...lifelineFade,
|
||||
}
|
||||
}
|
||||
|
||||
export function sequenceStyleColor(
|
||||
style: SequenceCellStyle | undefined,
|
||||
colors: Required<SequenceStyleColors> & Record<FadeStyle | LifelineFadeStyle | LifelineRampStyle, RGBA>,
|
||||
colors: Required<SequenceStyleColors> & Record<FadeStyle | LifelineRampStyle, RGBA>,
|
||||
): RGBA | undefined {
|
||||
if (style === "noteBadge") return colors.note
|
||||
if (style === "fragmentLabel") return colors.fragment
|
||||
|
||||
@@ -61,7 +61,6 @@ export interface SequenceDiagramRenderOptions {
|
||||
export type MessageStyle = "request" | "response"
|
||||
export type FadeStyle = `${MessageStyle}Fade${1 | 2 | 3 | 4 | 5}`
|
||||
export type LifelineRampStyle = `lifelineRamp${1 | 2 | 3}`
|
||||
export type LifelineFadeStyle = `lifelineFade${1 | 2 | 3 | 4 | 5}`
|
||||
export type SequenceCellStyle =
|
||||
| "participant"
|
||||
| "lifeline"
|
||||
@@ -69,7 +68,6 @@ export type SequenceCellStyle =
|
||||
| MessageStyle
|
||||
| FadeStyle
|
||||
| LifelineRampStyle
|
||||
| LifelineFadeStyle
|
||||
| "fragment"
|
||||
| "fragmentLabel"
|
||||
| "note"
|
||||
|
||||
Reference in New Issue
Block a user