Scene graph: - Nodes use relative coordinates (x,y relative to parent) - getAbsolutePosition() walks up the parent chain - reparentNode() preserves visual position when moving between frames - Deep hit testing traverses into container children - hitTestFrame() finds deepest frame under cursor (for drop targeting) - flattenTree() returns indented layer list for the panel - isDescendant() prevents circular reparenting Renderer: - canvas.translate(node.x, node.y) per node — children render relative - All shapes draw at (0,0) in their local space - Drop target highlight (blue outline on frame during drag-over) - Selection UI uses getAbsolutePosition() for screen-space handles Input: - Drag onto frame → blue highlight → drop reparents nodes - Handle hit testing uses absolute positions - Snap guides work with absolute coordinates Layers panel: - Tree view with depth-based indentation (16px per level) - Expand arrow for containers with children - Shift+click for additive selection |
||
|---|---|---|
| .vscode | ||
| patches | ||
| src | ||
| src-tauri | ||
| .gitignore | ||
| .oxfmtrc.json | ||
| bun.lock | ||
| FIGMA_UI3_CDP_FINDINGS.md | ||
| index.html | ||
| oxlint.json | ||
| package.json | ||
| PLAN.md | ||
| README.md | ||
| tsconfig.json | ||
| tsconfig.node.json | ||
| vite.config.ts | ||
Tauri + React + Typescript
This template should help get you started developing with Tauri, React and Typescript in Vite.