Commit graph

5 commits

Author SHA1 Message Date
Danila Poyarkov b7f51579ef Fix selection outline scaling with zoom
Draw selection outlines and resize handles in screen space (CSS pixels)
instead of canvas coordinates. Skia renders via dpr-scaled transform
so strokes stay 1px regardless of zoom level.
2026-02-27 21:55:19 +03:00
Danila Poyarkov 323a1f90c4 Migrate React → Vue 3 + VueUse + Reka UI
- Vue 3 SFC components with <script setup>
- Reactive store (Vue reactivity) replacing React refs/state
- Composables: useCanvas, useCanvasInput, useKeyboard
- Components: EditorCanvas, LayersPanel, PropertiesPanel, Toolbar
- Floating toolbar (Figma UI3 style) with pill shape + shadow
- Properties panel with Design/Prototype tabs + zoom display
- Sections: Position, Rotation, Layout, Appearance, Fill, Stroke, Effects, Export
- CSS custom properties for theming (--panel-bg, --border, --accent, etc.)
- Add Figma UI3 CDP inspection findings (toolbar, panels, sections)
2026-02-27 21:25:31 +03:00
Danila Poyarkov ec90f35df8 PoC 2 & 3: Yoga WASM layout + Kiwi codec
Yoga WASM (yoga-layout v3.2.1):
- Vertical/horizontal auto-layout with gap, padding, alignment ✅
- Nested frames with flex-grow ✅
- Space-between distribution ✅
- 1000-node layout in 3ms ✅

Kiwi binary codec (from figma-use multiplayer module):
- 194-definition Figma schema (2178 lines) compiles in 6ms
- Encode 4 nodes → 237 bytes Zstd-compressed
- Full round-trip: encode → Zstd compress → decompress → decode ✅
- Patch kiwi-schema to allow sparse field IDs (Figma uses IDs > 312)

Extracted files: schema.ts, codec.ts, protocol.ts, client.ts, index.ts
2026-02-27 17:16:21 +03:00
Danila Poyarkov c123dad50c Add oxlint, oxfmt, typescript-go
- oxlint with react, react-hooks, typescript, import, unicorn plugins
- oxfmt (no trailing commas, single quotes, sorted imports)
- tsgo (typescript-go native preview) for fast typechecking
- Fix all lint warnings: non-null assertions, unused expressions, stale closures
- Scripts: lint, format, typecheck, check
2026-02-27 15:52:55 +03:00
Danila Poyarkov 68b54ad6b7 Initial commit: Tauri + CanvasKit + React editor scaffold
- Tauri v2 desktop shell with 1280x800 window
- CanvasKit WASM (Skia) rendering via WebGL2
- Scene graph with typed nodes (Frame, Rectangle, Ellipse, Line, etc.)
- Skia renderer with fills, strokes, rounded corners, opacity, rotation
- Selection system with resize handles
- Undo/redo manager (inverse command pattern with batching)
- Bottom toolbar (Select, Frame, Rect, Ellipse, Line) matching Figma UI3
- Left layers panel, right properties panel
- Pan (scroll), zoom (Ctrl+scroll toward cursor)
- Keyboard shortcuts: V/F/R/O/L for tools, Cmd+Z undo, Backspace delete
- 5 demo shapes rendered on canvas
2026-02-27 15:48:29 +03:00