Uh oh!
There was an error while loading. Please reload this page.
feat(plugin-gantt): locate icon + flash highlight + group node type (4-level tree) - #1809
Merged
Conversation
…up node type - Add a locate (Crosshair) icon to each task-list End cell. Clicking it smooth-scrolls the timeline to center that row's bar and pulses the bar with a ring (gantt-flash) so the eye can catch it after the scroll. - Add `type:'group'` node kind: a pure tree header that's expandable/ collapsible like a summary but renders NO timeline bar — for 项目/产品 style grouping levels (左侧成树、右侧无条). Children render bars normally. - Demo: add a 4-level manufacturing fixture (?mfg=1) — 项目 → 产品 → 排产计划 → 派工单 — exercising group headers + summary/task bars. - i18n: add gantt.row.locate (zh/en + gantt default fallback).
The latest updates on your projects. Learn more about Vercel for GitHub. |
Contributor
✅ Console Performance Budget
📦 Bundle Size Report
Size Limits
|
normalizeTaskType now maps a record's typeField value 'group'/'folder' onto the no-bar group header (project/phase still map to bar-carrying summary). This makes the no-bar grouping level configurable via view metadata (typeField) instead of only via hand-built GanttTask. Adds tests.
Contributor
✅ Console Performance Budget
📦 Bundle Size Report
Size Limits
|
Uh oh!
There was an error while loading. Please reload this page.
os-zhuang pushed a commit
that referenced
this pull request
Jun 22, 2026
…ndle ergonomics & view-switch anchoring (#1870) * feat(plugin-gantt): config-driven node lock + defaultCollapsedDepth Two metadata-driven knobs for the 项目→产品→排产计划→派工单 tree (no hardcoded business logic): - defaultCollapsedDepth (默认折叠): GanttView seeds collapsedIds once from a 0-indexed depth threshold, folding every node at/below it that has children. ObjectGantt forwards schema.defaultCollapsedDepth. - locked (仅查看/跳转): per-node view-only flag. A locked bar can't be dragged/resized, its progress can't be dragged, no dependency dot, and its inline-edit / context-menu edit+delete are hidden — clicking (open/jump) still works. ObjectGantt maps schema.lockField truthiness onto task.locked. Demo: ?mfg=1 locks every 派工单 and collapses 排产计划 (depth 2) by default. +5 tests (group/depth/lock in GanttView, lockField+depth wiring in ObjectGantt). * docs(skill): document gantt group/lock/defaultCollapsedDepth + locate icon Update the page-builder gantt section to cover the metadata-driven tree knobs: typeField 'group'/'folder' (无条 header), lockField (仅查看/跳转 per-node), defaultCollapsedDepth (默认折叠 by depth), and the per-row 定位 (locate) icon. Keeps the objectui skill current with #1809 + #1870. * fix(plugin-gantt): flash after locate-scroll settles; pin locate icon flush to row edge - Flash now starts on scrollend (the smooth-scroll-finished signal) rather than ~40ms after the click, so the pulse fires where the bar lands instead of mid-flight. Falls back to a short fixed delay when scrollend is unsupported; a 1.5s backstop guards the supported path. Pending waits are torn down on re-trigger and unmount via flashCleanupRef. - Locate icon moved out of the right-aligned End-date flow into a row-pinned absolute slot flush with the chart divider, so it no longer reads as inset ('偏左') and no longer shifts the date column on hover. * fix(plugin-gantt): locate aligns to bar start; locate icon clears the date - Locate now scrolls to the bar's start (with a small left margin) instead of centering its midpoint, so a long bar's beginning stays visible rather than scrolling off the left edge. Bars that fit the viewport still center. - Fix the locate icon falling back to the row's left edge: Tailwind's fractional right-0.5 isn't in the prebuilt CSS, so the right offset is now an inline style (right:1px), keeping the icon flush at the divider with a small gap from the date column. * fix(plugin-gantt): make locate flash far more visible Blink the located bar 3× with a 3px outline ring plus a colored drop-shadow glow (up to ~9px) instead of a single thin 2px outline-color fade. The glow is a filter (not box-shadow) so it stays clear of the critical-path bars' inline box-shadow. Bump the flash duration to 1.5s and sync the clear timer. * fix(plugin-gantt): show task title inside leaf bars Leaf task bars previously rendered no label — only summary bars showed their title, so a wide leaf bar (e.g. a 派工单 work order) looked blank. Render the title inside leaf bars like summary bars; the progress%/drag-date readout now overlays it on hover so the bar's text width never shifts. Adds a tree test. * fix(plugin-gantt): per-key i18n fallback so partial host dictionaries don't leak raw keys useGanttTranslation probed a single key (gantt.column.taskName) and, if the host i18n resolved it, trusted the host's t() for *every* key. A consuming app whose dictionary translates the common gantt keys but lags on newer ones (e.g. gantt.linkType.*, gantt.menu.removeDependency) then leaked raw keys, since i18next returns the key string on a miss. Resolve each key against the host first and fall back to the bundled default only when the host returns the key unchanged. * feat(plugin-gantt): make the task-list pane an independent vertical scroller The left task list was overflow-hidden and only mirrored the timeline's scrollTop, so vertical scrolling was possible only over the right (timeline) pane. With large datasets users expect to scroll the task list directly. Make the list overflow-y-auto and sync two-way: list scroll pushes scrollTop onto the timeline (which drives the shared virtualization window and mirrors back). Both sync paths assign scrollTop only when it differs, so the browser emits no further scroll event and the loop self-terminates. * refactor(plugin-gantt): make 'Today' a text button to match 'This week'/'This month' The jump-to-today control was a CalendarDays icon while the sibling period-jump controls were text buttons, so the toolbar group read inconsistently. Render it as a text button (gantt.toolbar.today) with the same sizing as its siblings; drop the now-unused CalendarDays import. * feat(plugin-gantt): anchor the viewport-centre date when switching granularity Switching Day/Week/Month/Year kept the scroll container's raw pixel scrollLeft, but a Day->Month switch shrinks the timeline ~5x, so that offset landed on a wildly different (usually edge-clamped) date — the jumpy, disorienting behaviour users described as '乱'. Capture the date at the viewport centre via xToDate before the switch, then re-centre on it in a useLayoutEffect once the new dateToX mapping and total width are measured (pre-paint, so no flash). The anchor ref is null for any other dateToX change (zoom, fold, edits), leaving those paths untouched. * demo(plugin-gantt): manufacturing 4-level scheduling fixture Flesh out the ?mfg=1 fixture to mirror the 3.4 制造排班 spec: status-based bar colors for 排产计划 (待开始/已下推/进行中/已完成) and 派工单 (待开始/进行中/已报工/已完成), ◆-prefixed milestone rows, planned-vs-actual baselines on 派工单, hover-detail `fields`, FS dependencies between 三级 排产计划 only, and a status-color legend (ManufacturingLegend). * fix(plugin-gantt): exact-day anchor across view switches + visible timeline scrollbar View-switch anchoring: switching granularity now preserves the precise day at the viewport's left edge, so Day(Apr 9)→Week→Month→Day round-trips back to Apr 9 instead of drifting to the timeline start. The precise intent is held in a persistent ref updated only by genuine user scrolling; coarser views snap their *display* to the containing week/month bucket but never overwrite the anchor. A gate, armed on each switch and cleared only by real user input (wheel / touch / pointer / scroll keys), blocks the browser's auto-clamp scroll — fired when a narrower layout shrinks scrollWidth — from poisoning the anchor (the bug that sent Month→Day to Dec 29). Scrollbar: macOS overlay scrollbars collapse to 0px and auto-hide, making the timeline's vertical scrollbar nearly impossible to find, and thousands of virtualized rows shrank the thumb to a sliver. Style ::-webkit-scrollbar into a persistent 14px bar with a floored thumb size, and hide the redundant (synced) task-list scrollbar. Standard scrollbar-width is scoped to @supports not selector(::-webkit-scrollbar) so modern Chrome doesn't ignore the pseudo and fall back to the overlay bar. * feat(plugin-gantt): drag-to-link from either bar endpoint, auto-deriving FS/FF/SS/SF dhtmlx-style dependency creation. Each leaf bar now exposes a connector dot at BOTH ends (start + finish). The link type is derived from which endpoint you drag FROM and which half of the target bar you drop ONTO: end→start=FS, end→end=FF, start→start=SS, start→end=SF. A draft hint ('Task A (end) → Task B (end)') names the endpoints during the drag so the resulting link type is obvious before release. * feat(plugin-gantt): drag the task-list divider to resize the name column The task-list pane width was auto-derived from the container with no way to widen it. Add a draggable splitter on the divider between the name grid and the timeline: drag to resize (clamped 160px ↔ container-200px so it can never collapse or swallow the chart), double-click to reset to auto-size. The chosen width persists in the saved layout (persistLayoutKey / onLayoutChange) and the start/end columns auto-reveal once the pane is wide enough. * fix(plugin-gantt): separate link/progress handles to stop mis-operation (dhtmlx-style) The connector dots half-overlapped the bar end and resize zone, and the progress grip was a thin full-height strip in the bar body — so linking sometimes moved the bar and progress was awkward to grab. - Connector dots now float fully OUTSIDE each bar end (detached circles in a 20px hit area). Sitting outside the bar body means grabbing one can never start a move or an edge-resize. They show on row hover (or while this bar is the link source) and are pure visual hints during a drag. - Progress handle is now an up-pointing triangle hugging the bottom edge at the progress %, with its hit area confined to the bottom half — clear of the move body (top) and the centred end dots. * fix(plugin-gantt): track bar hover on the full-width row so the connector dots stay grabbable The link connector dots float just outside each end of a bar. Hover was tracked on the narrow bar element, so the moment the cursor crossed the bar's right edge toward the end dot, the bar's mouseleave fired, cleared hoveredTaskId, and the dot vanished before it could be grabbed — and a fast sweep could outrun the dot's pointer-events:auto re-render and fall straight through. Move onMouseEnter/onMouseLeave to the full-width row. The row spans the whole timeline, so moving bar -> dot never leaves the hover zone (dhtmlx-style), and the dot is enabled well before the cursor reaches it. * fix(plugin-gantt): give link dots dhtmlx-style breathing room; widen default columns Two ergonomics fixes the user called out against dhtmlx: 1. Connector dots were crammed against the bar end. Now the visible circle sits out with a comfortable ~12px gap so it reads as its own affordance. The transparent hit area is wider and BRIDGES back to the bar edge (z-20 above the dependency line's z-10 hit-stroke), so crossing the gap never drops the row hover and the dot stays grabbable the whole way out. 2. Default column width was too narrow (35/50/60). Bumped to 44/64/80 so day/week/month columns have room to breathe. Tests: the drag-snap suites were calibrated to columnWidth=60. Rescaled their pixel deltas to clean multiples of 80 (avoiding the Math.round(±1.5) asymmetry) and updated the COLUMN_WIDTH constants/comments. 201 pass. * fix(plugin-gantt): floor timeline columns at 110px so day/week/month stay readable
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
Three Gantt enhancements, driven by a manufacturing-scheduling spec (项目 → 产品 → 排产计划 → 派工单):
Locate-on-timeline icon — each task-list End cell gets a 🞋 (Crosshair) button. Clicking it smooth-scrolls the timeline to center that row's bar and pulses the bar with a ring (
gantt-flash) so it's easy to spot after the scroll. The button reveals on row hover;stopPropagationkeeps it from opening the detail drawer.type:'group'node kind — a pure tree header that is expandable/collapsible like a summary row but renders no timeline bar. This makes pure grouping levels (项目/产品: 左侧成树、右侧无条) possible — previously any node with children always drew a summary bar. Children still render their own bars normally.4-level demo fixture (
?mfg=1) — 项目A → 产品A-1/A-2 → 排产计划 → 派工单(WO001 张三…), exercising group headers + summary bars + task bars together.Spec coverage
type:'group'type:'group'Not in this PR (follow-ups, noted with the requester): seed-able "三级默认折叠" prop, and per-node read-only lock so 派工单 is view-only while 排产计划 stays draggable.
i18n
Adds
gantt.row.locate(zh在甘特图上定位/ enLocate on timeline) plus the standalone fallback inGANTT_DEFAULT_TRANSLATIONS.Verification
pnpm --filter @object-ui/plugin-gantt vitest run→ 188 passed (16 files).?mfg=1): only 排产计划 rows carry summary bars and only 派工单 rows carry task bars; the 项目/产品 group rows render no bar; collapsing 项目A hides its whole subtree and expands back; locate click centers + flashes the target bar.Config-driven (not hardcoded)
No business terms live in the component —
GanttViewonly knows the generic primitivesparent(builds the tree) andtype(node kind). The 4-level manufacturing data lives only in the demo fixture (demo/main.tsx), never in the runtime.The structure is configured through view metadata, not code:
parentField→ which record field builds the hierarchytypeField→ which record field maps to the node kind. A value ofgroup(orfolder) now yields the no-bar header;summary/project/phasekeep a bar;milestone/taskas before.So an app models 项目/产品 as records whose
typeField=group, and 排产计划/派工单 fall out of theparentchain + start/end fields — no plugin changes needed.