feat: add CanvasPathEditor and editable path functionality

- Implemented CanvasPathEditor component for editing paths on the canvas.
- Created editablePath module to handle path data manipulation and conversion to SVG.
- Introduced pathPen module for managing path drawing with a pen tool, including anchor management and path data generation.
- Added tests for editablePath and pathPen functionalities to ensure correctness of path editing and drawing behavior.
This commit is contained in:
2026-07-17 11:28:29 +08:00
parent fe4b08f548
commit d424b56076
30 changed files with 3791 additions and 44 deletions
+38
View File
@@ -1,5 +1,17 @@
# Progress Log
## 2026-07-17 Pen Tool and Shape Path Editing
- Loaded repository instructions, go-zero decision rules, frontend design guidance, and the file-based planning workflow.
- Preserved all existing plan history and started Phase 35 for the requested Pen tool and path editing integration.
- No backend contract change has been assumed; discovery will determine whether the existing canvas node schema can persist editable paths.
- Traced the current toolbar, freehand Pen implementation, shape-node JSON model, React SVG previews, and Leafer renderer boundary.
- Installed `leafer-x-path-editor@1.1.3`; dependency inspection exposed a Leafer 1.1/2.2 peer-version mismatch that must be resolved before UI wiring.
- Kept Leafer at 2.2.2, aligned the plugin runtime dependencies, and added a dedicated interactive path-editor overlay with programmatic enter/exit and Enter-to-delete bridging.
- Added normalized shape-path persistence, SVG pen-path write-back, shape preview/export support, toolbar integration, and focused regression coverage.
- Focused path tests, strict TypeScript compilation, and `git diff --check` pass.
- Corrected the tool model after user clarification: restored Brush as the original freehand SVG tool and added a separate Pen mode that produces editable normalized path nodes.
## Session: 2026-07-15 (CAD Semantics and Crop)
### Phase 23
@@ -268,3 +280,29 @@
- Rechecked `/Users/liangxu/Desktop/花语江南6-204方案.dwg`: conversion completes in about 10 seconds, emits an 8.49 MB SVG instead of roughly 50 MB, and frames the visible drawing at a 1.43:1 aspect ratio.
- Browser import, nonblank rendering, compact vector toolbar, source SVG download, save, and reload persistence all pass at `http://127.0.0.1:5174`.
- Final `pnpm test`, TypeScript validation, `pnpm build`, and `git diff --check` pass; the build retains only the repository's existing Vite large-chunk warning.
# Session: 2026-07-17
### Phase 35: Pen/Brush correction
- **Status:** complete
- Resumed from the existing Leafer path-editor implementation after the user clarified that Pen must be added after Shape without replacing Brush.
- Locked the correction boundary: `path` is the new editable Pen, `pen` remains the existing continuous Brush, and only marked Pen SVGs plus Shape nodes are vertex-editable.
- Confirmed the toolbar and shortcuts are already separate; isolated the remaining regression to pen-node creation and editable-node detection.
- The focused red test reproduced the boundary bug: marked/unmarked SVG fixtures disagreed with the current Shape-backed Pen contract, and unmarked Brush SVGs were still returned by `editablePathForNode`.
- Removed legacy Brush SVGs from the vertex-editing contract; the focused regression now passes while the new Pen remains a Shape-backed editable path.
- Verification so far: strict TypeScript passes, all 43 frontend tests pass, `git diff --check` passes, and the resolved Leafer dependency tree remains entirely on 2.2.2.
- First production-build attempt stopped because another `next build` process owns the repository build lock; no files were reverted or lock files removed.
- User clarified that the Pen itself must be the Path Editor, not merely Brush sampling persisted as a Shape. Added a new regression expectation for immediate editor entry and Pen-tool editing of existing Shapes.
- First editor-entry patch matched the background handler's duplicate Path branch; TypeScript failed on undefined `node`, so the fix is being moved to the node handler and the source regression is narrowed to that scope.
- Corrected editor-entry wiring now passes focused tests and TypeScript; the complete 43-test suite and Next/Vite production build also pass.
- Started the updated Vite preview at `http://127.0.0.1:5179`; browser verification is restoring the existing mocked project flow on that fresh origin.
- Browser interaction now confirms the new Pen opens `leafer-x-path-editor` immediately after drawing, while Brush retains its prior continuous stroke behavior and remains selected after commit.
- Existing-Shape editing under active Pen did not yet open in the browser despite a confirmed Shape hit; tracing the node pointer handler's earlier branches before finalizing.
- Rebased the remaining fix mentally onto the concurrently added anchor-based Pen implementation; no user changes will be reverted. The needed integration is now `pathPen` commit/click -> `CanvasPathEditor`.
- Added regression expectations for explicit Pen completion opening Path Editor, active-Pen Shape clicks entering Path Editor only when no Pen draft is open, and tool switching committing without forcing editor entry.
- The first anchor-Pen node patch hit the duplicate background branch; the scoped regression and TypeScript failed as intended before browser verification.
- Focused Path Editor and anchor-Pen tests now pass (11/11) with strict TypeScript; browser will reload fully to replace the invalidated hot module.
- Clean-browser verification passes for both Path Editor handoffs: active-Pen Shape click and completed new Pen path. Captured `output/playwright/path-editor-pen-final.png`.
- Rechecked Brush after the clean anchor-Pen reload: continuous freehand behavior remains intact, no editor opens, and Brush stays active.
- Final verification passes on the merged anchor-Pen implementation: 48 frontend tests, strict TypeScript, `git diff --check`, exact Leafer 2.2.2 dependency resolution, Next production build, and Vite production build.
- Reran the full frontend production build after the lock cleared; Next and Vite both pass, with only the existing large-chunk warning.
- Confirmed both local previews still respond with HTTP 200 at `http://127.0.0.1:5175` and `http://127.0.0.1:5177`.