73 lines
4.5 KiB
Markdown
73 lines
4.5 KiB
Markdown
# SLICE 5 — gtd-gantt rendering
|
||
|
||
> **State-saving rule:** update this file immediately after EVERY completed task (tick the checkbox, update Status and Resume notes) and whenever pausing for input — automatically, without being asked. State on disk must always match reality.
|
||
|
||
## Status
|
||
**COMPLETE** (2026-07-15). All rendering code landed; 140/140 unit tests pass;
|
||
`tsc` clean; `npm run dist` builds the `.jpl`. User manually verified in Joplin
|
||
desktop. README + SPEC gantt docs added (beyond the original task list, at user
|
||
request). No automated front-end tests (per the earlier webview-testing
|
||
decision; disambiguation mirrors the unit-tested collectGantt).
|
||
|
||
## Goal
|
||
Render the gantt in the webview: fence interception, message plumbing, DOM, CSS.
|
||
|
||
## Tasks
|
||
- [x] `src/gtd-calendar-renderer.ts`: intercepts `gtd-gantt` fences. A block with
|
||
a non-empty `project:` value (cheap regex `GANTT_PROJECT_LINE`, no YAML
|
||
lib) → inline `<span class="gtd-gantt-badge">gantt: <project></span>`;
|
||
otherwise emits the chart placeholder (`data-block-type="gantt"`). Project
|
||
value is HTML-escaped and unquoted. Empty-project alignment matches
|
||
collectGantt (empty ⇒ chart).
|
||
- [x] `src/index.ts`: `handleGetGantt` + `getGantt` switch case, mirroring
|
||
handleGetKanban (parse → selectedNote → resolveScanFolder → collectGantt →
|
||
payload with title/cardDetail/scopeAll/configError/warnings+softcap/chart/
|
||
stats). No-selectedNote path returns an empty chart.
|
||
- [x] `src/gtd-calendar-webview.js`: `renderGantt` + `buildGanttGrid` and helpers
|
||
(offsetDays, clampOffset, monthTicks, todayLocalISO, tooltips). Single CSS
|
||
grid: label column (sticky) + `repeat(totalDays, 26px)`; month tick header
|
||
row; project header rows; bars via `grid-column` from day offsets (bg/fg
|
||
colour or `colourFromId` hash); milestones as ◆ markers (done → dimmed +
|
||
struck label, ↻ for recurring); today line spanning body rows; click →
|
||
openNote; hover text via native `title` (suppressed when card-detail:none);
|
||
title/configError/warnings/stats blocks as in other views (stats footnote
|
||
carries the scope: all marker).
|
||
- [x] `src/event-calendar.css`: `.gtd-gantt-*` styles (badge, scroll container,
|
||
grid, sticky corner/labels, ticks, bars, milestones, today line), using
|
||
the same rgba/theme-var conventions as existing styles.
|
||
- [x] Manual verification in Joplin desktop — CONFIRMED 2026-07-15. Verified
|
||
live: item-block badge (`gantt: bluesky`) renders inline (not a chart);
|
||
chart renders with title, month tick header, alphabetical project header
|
||
(`bluesky (3)`), a note **bar** spanning begin→end (Jul 1–14), ◆
|
||
**milestones** on to-do due dates, and the red **today** line at Jul 15.
|
||
Footnote reports item/note/folder counts. Host-note exclusion confirmed
|
||
(an item block in the chart's own note is correctly omitted — put items in
|
||
separate notes). Unknown-option warning fires correctly for stray keys like
|
||
`todos` (gantt has no notes/todos inclusion option).
|
||
- [x] Docs (added at user request; not in the original task list): README gantt
|
||
section (item vs chart, bar/milestone rules, chart options table) + SPEC.md
|
||
§2.5 (dual-role disambiguation rule, item/chart schemas). Screenshots not
|
||
committed — verified interactively instead.
|
||
|
||
## Resume notes
|
||
Code complete. Files touched:
|
||
- `src/gtd-calendar-renderer.ts` (gantt fence + badge/chart disambiguation)
|
||
- `src/index.ts` (handleGetGantt + switch case + imports)
|
||
- `src/gtd-calendar-webview.js` (dispatch + renderGantt/buildGanttGrid + helpers)
|
||
- `src/event-calendar.css` (.gtd-gantt-* styles)
|
||
|
||
Design choices worth noting for a resumed session:
|
||
- Grid layout is a single `display:grid` with explicit gridRow/gridColumn per
|
||
element (label col = 1, day columns = 2..N+1). Bars: `grid-column: off+2 /
|
||
endOff+3` (inclusive end). Milestones: `off+2 / span 1`. Today line:
|
||
`grid-row: 1 / <rowIndex>` at the today column.
|
||
- Hover uses native `title` tooltips (not the calendar's hover-card DOM) — simpler
|
||
and reliable; revisit if richer hover cards are wanted. card-detail:none
|
||
suppresses tooltips; "always" currently behaves like "hover" (no inline text on
|
||
bars) — a possible future refinement, noted but out of scope.
|
||
- No automated renderer/webview tests by design (front-end testing deferred, per
|
||
the SLICE-boundary discussion). Disambiguation regex mirrors the unit-tested
|
||
collectGantt classification.
|
||
|
||
Next after manual sign-off: SLICE6.
|