From 9a5dda75045751a8ee531ba515d0448de1bd0160 Mon Sep 17 00:00:00 2001 From: Hanrim <148833226+MerciHanrim@users.noreply.github.com> Date: Tue, 6 Oct 2026 23:10:00 +0900 Subject: [PATCH 1/3] feat(graph): flow colours in the minimap, the timeline and three templates, each colour offered once (v0.20.0) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Part of #325, PR 2 of 3. Version 0.20.0. Contract: docs/flow-colour-and-compact-nodes.md FC-5 and FC-6. Compact nodes are left to PR 3. Minimap and timeline: a coloured node's minimap mark takes its colour (MinimapDock), and a coloured Pool or Register draws its series in it, for the line, the legend mark and the endpoint (TimelineChart). Every other mark and series keeps the colour it had, by kind or by index, so colouring one node never recolours another; the Register's dashed line and the Pool's solid line stay, and edge colours never reach the timeline. Both views paint inline SVG fill and stroke, which forced colours do not replace, so they ask the new useForcedColors() (src/ui/media.ts, beside useIsMobile, now one mediaQuery helper) and draw no flow colour there. Each timeline line carries data-series. The run and the run CSV are byte-identical with and without colours. Templates: Coffee roastery, the gacha banner and early MMO ship three flow colours each, as data in the file, written by their builders through withTemplateFlowColours (src/engine/templateFlowColours.ts): each listed node takes its flow's palette colour, and so does every resource edge whose two ends are in the same flow; a Parameter, a Register, a missing id or a node listed twice throws. Coffee: Sage green beans, Gold roasted beans, Rose desserts. Gacha: each zone the colour its frame already carries (Sage, Violet, Rose), set in scripts/gen-gacha-banner-zones-example.ts. MMO: Sage items and loot, Gold gold, Violet experience and level. Parameters, Registers, the gacha comparison row and the MMO combat chain stay uncoloured. With accent removed, each regenerated file is identical to the one before. Each template's engine digest equals the one recorded in sha256Baseline.fixture.ts; its content and full revision digests change, as they must, and are pinned at their current values in src/engine/templateFlowColours.test.ts. sha256Baseline.test.ts keeps the recorded #301 values unchanged: for these three files it checks the engine digest as recorded, and an explicit legacy test removes accent and checks all three recorded digests. Inspector (AccentField): each colour is offered once. Recent leaves out the palette's colours and In this document leaves out both, so the current colour's ring shows once; an empty row is hidden. On the phone the read-only sheet shows the colour as one line of text with no control: a dot with the colour's name and hex (the hex alone off the palette, a dir="ltr" run), Default with an empty ring, Mixed with no dot. A locked desktop canvas keeps the disabled editor, and its disabled look is now pinned there. Tests: unit src/engine/templateFlowColours.test.ts and the split digest test; e2e flow-colour-views.spec.ts (minimap, timeline, the run and CSV unchanged, forced colours, each colour once, the locked desktop, the three templates opened from the menu), flow-colour-mobile.spec.ts rewritten for the summary line, flow-colour.spec.ts's Recent assertion moved to the stored order plus the row without palette colours, whats-new.spec.ts pins 0.20.0. No visual baseline changes: flow-colour-visual masks the minimap, and the template baselines are taken under forced colours. Four release-note lines in 18 languages, 16 without native review; the copy guards move only their exact pins (catalog 1023 to 1027, runtime 1245 to 1249, English Pool and Register prose 20 to 21 and 10 to 11, pt-PT's difference from pt-BR 273 to 274 for `telemóvel`, with the missing note for 0.19.0's move from 270 to 273), no bound widened. Docs: the contract, docs/mobile.md, CHANGELOG.md and README.md. --- .changes/flow-colour-views.json | 1 + CHANGELOG.md | 11 + README.md | 28 +-- docs/flow-colour-and-compact-nodes.md | 22 +- docs/mobile.md | 2 +- e2e/flow-colour-mobile.spec.ts | 120 ++++++----- e2e/flow-colour-views.spec.ts | 241 +++++++++++++++++++++ e2e/flow-colour.spec.ts | 8 +- e2e/whats-new.spec.ts | 2 +- examples/coffee-roastery.json | 69 ++++-- examples/gacha-banner-zones.json | 240 ++++++++++++++------- examples/mmo-progression.json | 249 ++++++++++++++-------- package-lock.json | 4 +- package.json | 2 +- scripts/gen-gacha-banner-zones-example.ts | 8 +- src/components/AccentField.tsx | 65 +++++- src/components/MinimapDock.tsx | 12 +- src/components/TimelineChart.tsx | 23 +- src/engine/coffee-roastery.fixture.ts | 13 +- src/engine/gachaBannerZonesGraph.ts | 25 +++ src/engine/mmo-progression.fixture.ts | 25 ++- src/engine/templateFlowColours.test.ts | 120 +++++++++++ src/engine/templateFlowColours.ts | 45 ++++ src/i18n/itCopy.test.ts | 6 +- src/i18n/locales/ar/ui.ts | 4 + src/i18n/locales/de/ui.ts | 4 + src/i18n/locales/en/ui.ts | 4 + src/i18n/locales/es-419/ui.ts | 4 + src/i18n/locales/es-ES/ui.ts | 4 + src/i18n/locales/fr/ui.ts | 4 + src/i18n/locales/it/ui.ts | 4 + src/i18n/locales/ja/ui.ts | 4 + src/i18n/locales/ko/ui.ts | 4 + src/i18n/locales/nl/ui.ts | 4 + src/i18n/locales/pt-BR/ui.ts | 4 + src/i18n/locales/pt-PT/ui.ts | 4 + src/i18n/locales/ru/ui.ts | 4 + src/i18n/locales/th/ui.ts | 4 + src/i18n/locales/tr/ui.ts | 4 + src/i18n/locales/vi/ui.ts | 4 + src/i18n/locales/zh-Hans/ui.ts | 4 + src/i18n/locales/zh-Hant/ui.ts | 4 + src/i18n/nlCopy.test.ts | 6 +- src/i18n/ptBrCopy.test.ts | 4 +- src/i18n/ptPtCopy.test.ts | 14 +- src/i18n/ruCopy.test.ts | 2 +- src/i18n/thCopy.test.ts | 4 +- src/i18n/trCopy.test.ts | 2 +- src/i18n/viCopy.test.ts | 8 +- src/index.css | 35 +++ src/model/sha256Baseline.test.ts | 48 ++++- src/releaseNotes/releaseNotes.ts | 10 + src/ui/media.ts | 35 ++- 53 files changed, 1269 insertions(+), 312 deletions(-) create mode 100644 .changes/flow-colour-views.json create mode 100644 e2e/flow-colour-views.spec.ts create mode 100644 src/engine/templateFlowColours.test.ts create mode 100644 src/engine/templateFlowColours.ts diff --git a/.changes/flow-colour-views.json b/.changes/flow-colour-views.json new file mode 100644 index 00000000..f230c864 --- /dev/null +++ b/.changes/flow-colour-views.json @@ -0,0 +1 @@ +{ "type": "user-facing", "releaseNoteId": "release:0.20.0" } diff --git a/CHANGELOG.md b/CHANGELOG.md index fc823cc2..0c4a9ffd 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,17 @@ All notable Loop Studio releases, newest first. Behavioral changes are pinned in versioned spec documents (see the [README](README.md#technical-reference)); this file is the narrative history, not the contract. +## v0.20.0 — 2026-10-07 + +Flow colours beyond the canvas (issue #325, the second of three parts). The contract is [`docs/flow-colour-and-compact-nodes.md`](docs/flow-colour-and-compact-nodes.md) FC-5 and FC-6. + +- **The minimap and the timeline.** A coloured node's minimap mark takes its colour, and a coloured Pool or Register draws its timeline line, its legend mark and its endpoint in it. Every other mark and series keeps its colour, so colouring one node never recolours another; the Register's dashed line and the Pool's solid line stay, and connection colours never reach the timeline. Under forced colours neither view draws a flow colour. +- **Three templates in colour.** The Coffee roastery, gacha banner and early MMO templates open with three colours on their main flows: green beans, roasted beans and desserts; the gacha banner's three zones, in the colours their frames already carry; items, gold and experience. Parameters and Registers stay uncoloured. Their simulation is unchanged: the engine digest of each template is the one recorded before. +- **Each colour once.** In the Inspector's Colour section, Recent leaves out the palette's colours, and In this document leaves out both, so the current colour's ring shows once; a row with nothing left is hidden. +- **The phone shows a colour as one line.** The read-only Inspector on a phone shows the colour as text, a dot with the colour's name and hex (its hex alone off the palette), Default with an empty ring, Mixed with no dot, instead of the disabled editor. A locked canvas on the desktop keeps the disabled editor. + +**No migration.** Run results and the run CSV are unchanged for any diagram. The three templates' files now carry `accent` fields, so their content and revision digests differ from v0.19.0's. Four release-note lines in 18 languages, 16 of them without native review. The informational `meta.tool` string is now `loop-studio/0.20.0`. + ## v0.19.0 — 2026-10-06 Flow colours (issue #325, the first of three parts): nodes and connections can carry a colour so the flows of a large graph read apart at a glance. The contract is [`docs/flow-colour-and-compact-nodes.md`](docs/flow-colour-and-compact-nodes.md). diff --git a/README.md b/README.md index 22bd9e57..e4f011ab 100644 --- a/README.md +++ b/README.md @@ -140,7 +140,19 @@ Additional feature-specific design documents (localization, mobile, module system, large-graph readability, simulation playback, edge routing, data import, …) live under [`docs/`](docs/). -## Latest — v0.19.0 +## Latest — v0.20.0 + +Flow colours beyond the canvas. + +- **The minimap and the timeline** show a coloured node in its colour; a coloured Pool or + Register draws its timeline line in it, and every other series keeps its own +- **Three templates in colour**: Coffee roastery, the gacha banner and early MMO open with + three colours on their main flows; their results are unchanged +- **Each colour once** in the Inspector: Recent and In this document leave out the colours + already shown above them +- **On a phone**, the read-only Inspector shows a colour as one line: a dot, its name and hex + +## v0.19.0 Flow colours: give nodes and connections a colour so a large graph's flows read apart. @@ -173,18 +185,8 @@ A fix release: the menus answer the keyboard the same way. - **On a phone**, a sheet takes focus when it opens, and Escape in a sheet opened from More goes back to More; the run bar and the update bar stay usable -## v0.18.0 - -The third-party open-source licenses, inside the app. - -- **About Loop Studio → Third-party open-source licenses** shows the full license text of - every third-party component the build includes, in its original English, in the same - dialog; Back returns to About -- **Offline too**: the installed app has the text precached, and the single-file version - carries it inside the file; the web and installed builds also open it as a text file -- **Loop Studio's own notice is unchanged**: the licenses cover the included components only - -See [`CHANGELOG.md`](CHANGELOG.md) for the full notes of these releases, v0.17.2 (the +See [`CHANGELOG.md`](CHANGELOG.md) for the full notes of these releases, v0.18.0 (the +third-party open-source licenses in the About dialog), v0.17.2 (the Temporary session button drawn like the menu buttons), v0.17.1 (share links compressed with the browser's own Compression Streams), v0.17.0 (password-protected share links), v0.16.0 (the storage gate, temporary sessions and the diff --git a/docs/flow-colour-and-compact-nodes.md b/docs/flow-colour-and-compact-nodes.md index e03abbdf..82132d6b 100644 --- a/docs/flow-colour-and-compact-nodes.md +++ b/docs/flow-colour-and-compact-nodes.md @@ -190,13 +190,23 @@ The flow colour is a rest colour. Every state that restyles an element today sti - The browser's colour input applies on its real `change` event only: never on opening it and never on the live `input` events while its dialog is open, so opening it on Default or on a mixed selection applies nothing (in particular, never black). - Each swatch is a `