diff --git a/packages/merman/src/markdown.ts b/packages/merman/src/markdown.ts index f380b7dec1..a629b98b23 100644 --- a/packages/merman/src/markdown.ts +++ b/packages/merman/src/markdown.ts @@ -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), diff --git a/packages/merman/src/sequence/diagram.test.ts b/packages/merman/src/sequence/diagram.test.ts index 62a40c9106..61539ccfa0 100644 --- a/packages/merman/src/sequence/diagram.test.ts +++ b/packages/merman/src/sequence/diagram.test.ts @@ -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 │ ◄────────────────────╯ - │ - │ - │ - │ │" `) }) diff --git a/packages/merman/src/sequence/drawing.ts b/packages/merman/src/sequence/drawing.ts index 372610b325..a02c61b448 100644 --- a/packages/merman/src/sequence/drawing.ts +++ b/packages/merman/src/sequence/drawing.ts @@ -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) } } diff --git a/packages/merman/src/sequence/options.ts b/packages/merman/src/sequence/options.ts index f20071cd8f..05a0fe8846 100644 --- a/packages/merman/src/sequence/options.ts +++ b/packages/merman/src/sequence/options.ts @@ -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)) diff --git a/packages/merman/src/sequence/placement.ts b/packages/merman/src/sequence/placement.ts index 22cf14b454..ad1387c1c6 100644 --- a/packages/merman/src/sequence/placement.ts +++ b/packages/merman/src/sequence/placement.ts @@ -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) => { diff --git a/packages/merman/src/sequence/style.ts b/packages/merman/src/sequence/style.ts index 9a019f56e0..382c9d1c63 100644 --- a/packages/merman/src/sequence/style.ts +++ b/packages/merman/src/sequence/style.ts @@ -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 & Record { +): Required & Record { 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 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 & Record, + colors: Required & Record, ): RGBA | undefined { if (style === "noteBadge") return colors.note if (style === "fragmentLabel") return colors.fragment diff --git a/packages/merman/src/sequence/types.ts b/packages/merman/src/sequence/types.ts index c8ccf1e955..ad8cb39fc4 100644 --- a/packages/merman/src/sequence/types.ts +++ b/packages/merman/src/sequence/types.ts @@ -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"