Commit graph

298 commits

Author SHA1 Message Date
Danila Poyarkov 07e9182b4c Move collab routing logic into CollabPanel
CollabPanel now uses injected collab + useRouter() directly.
No more emit relay through EditorView.
2026-03-06 21:43:10 +03:00
Danila Poyarkov b4698d7a63 Use colorToCSS() instead of hand-rolled rgba conversions
Fix colorToCSS to include alpha channel. Replace all manual
Math.round(c.r * 255) patterns with colorToCSS() from core.
2026-03-06 21:43:03 +03:00
Danila Poyarkov 9d73297040 Delete re-export shims, import from @open-pencil/core directly
Remove 14 src/engine/ shims and entire src/kiwi/ directory.
Only src/engine/fonts.ts remains (has real Tauri font logic).
Replace isTauri() with IS_TAURI constant.
2026-03-06 21:42:56 +03:00
Danila Poyarkov 6ec8fc518b Move demo to /demo route, add @unhead/vue for title management
- / shows empty canvas
- /demo loads demo content (for app.openpencil.dev landing link)
- Title template: '{page} — OpenPencil' via useHead
- 'Try it online' links in README and docs point to /demo
2026-03-06 20:54:48 +03:00
Danila Poyarkov 5ae6234e40
Tailwind CSS v4 JSX export (#54)
* Add Tailwind CSS v4 JSX export format

- Add JSXFormat type ('openpencil' | 'tailwind') to sceneNodeToJSX/selectionToJSX
- Tailwind resolver (tailwind.ts): px→spacing (v4 multiplier), hex→color class,
  fontSize/fontWeight/borderRadius named lookups with arbitrary value fallback
- Export: FRAME→div, TEXT→p, SECTION→section, className with TW utility classes
- CLI: export --format jsx --style tailwind
- CodePanel: format toggle button (OpenPencil / Tailwind)
- Rename Jsx→JSX in all public APIs (sceneNodeToJSX, selectionToJSX, renderJSX, etc.)
- 29 new Tailwind export tests, all 43 export tests pass

* Extract escapeJSXText — replace nested ternary with entity map lookup

* Deduplicate export-jsx: extract shared padding, corner radius, and node context helpers

* Update changelog

* Tighten Tailwind JSX export fidelity
2026-03-06 18:04:11 +03:00
Danila Poyarkov bc52095138 Add double-click to rename layers, extract useInlineRename composable
- New useInlineRename composable: shared editing state, commit logic,
  and keyboard handling for inline rename across panels
- LayerTree: double-click a layer name to rename inline
- PagesPanel: refactored to use useInlineRename, removing duplicate code

Closes #57
2026-03-06 09:50:35 +03:00
Danila Poyarkov 6f31af44e9 Fix drawer animation: single spring transition, no jump on close
Use one constant spring (stiffness 800, damping 50) for both drag
tracking and snap animation. Eliminates the transition switch that
caused motion-v to reinitialize mid-animation. Extract spring
constants to constants.ts. Fix selectTab not updating targetHeight.
2026-03-06 09:22:03 +03:00
Danila Poyarkov a2d7b89709 Adopt motion-v for mobile drawer and toolbar animations
- MobileDrawer: spring-animated height via motion.div :animate + @pan,
  replaces useSwipe + manual rAF. Tab state always set (never null),
  content stays rendered when drawer is closed.
- Toolbar: AnimatePresence with directional slide variants and
  layout-animated width via motion.div layout, replaces manual
  scrollWidth measuring + inline CSS transitions.
- Add SWIPE_VELOCITY_THRESHOLD constant.
- activeRibbonTab type narrowed from union | null to union.
2026-03-06 08:50:38 +03:00
Danila Poyarkov 724e632251 Fix mobile drawer jump on swipe down
Reset dragOffset after snap change and a rAF so the height
transition starts before the translate snaps back to 0.
2026-03-06 00:14:28 +03:00
Danila Poyarkov 49b891d3f9 Refactor mobile drawer: use VueUse composables, unify panels
- Replace hand-rolled touch handlers with useSwipe
- Replace manual offsetHeight measurement with useElementSize
- Replace window.innerHeight with useWindowSize
- Merge MobileRibbon into MobileDrawer (unified bottom sheet)
- Match desktop layout: PagesPanel + Layers in same panel
- Add viewport-fit=cover for safe area insets
- Glassy HUD buttons with backdrop-blur
- Fix toolbar overflow on narrow viewports
- Remove MobileRibbon.vue, SWIPE_MAX_DURATION constant
2026-03-05 22:13:24 +03:00
Anton Soldatov 168c25c189
feat: mobile layout, PWA support (#27) (#27)
- Mobile-responsive editor with bottom drawer, ribbon nav, HUD overlay
- Touch support: single-finger tools, two-finger pinch-zoom
- PWA: manifest, service worker, installability
- Extract LayerTree from LayersPanel, shared utils (colorToCSS, initials, toolIcons)
- Constants moved to src/constants.ts, clipboard state to editor store
- reka-ui Popover/DropdownMenu in MobileHud

Co-authored-by: Danila Poyarkov <dev@dannote.net>
2026-03-05 19:51:51 +03:00
Danila Poyarkov 661b83e749 Port analyze/diff tools from figma-use, split tools into domain files
Analyze: colors, typography, spacing, clusters
Diff: diff_create (tree diff), diff_show (preview changes)
Utility: get_components, get_current_page, arrange, node_to_component

Split schema.ts (2600 lines) into read, create, modify, structure,
variables, vector, analyze, registry — each under 600 lines.

Clean up inline types (use Color, Vector, SceneNode from existing defs).
Update AGENTS.md and CONTRIBUTING.md with code quality guidelines.
2026-03-05 19:16:23 +03:00
Danila Poyarkov ed61445e2d
SVG export (#52)
* Add SVG export

Scene graph → SVG serializer with support for rectangles, ellipses,
lines, stars, polygons, vectors (fill/stroke geometry and vector
networks), text with style runs, gradients (linear, radial, angular),
image fills, effects (drop shadow, inner shadow, blur), opacity,
rotation, flips, blend modes, clip paths, and nested groups.

- packages/core: svg-node.ts (minimal XML builder), svg-export.ts
  (serializer), ExportFormat now includes 'SVG', computeContentBounds
  extracted for reuse
- packages/cli: export command accepts --format svg
- UI: SVG added to ExportSection format picker (scale hidden for SVG),
  context menu 'Export as SVG' option
- 47 new tests covering SVGNode builder, geometry blob → path, vector
  network → path, and full node export for all shape types

* Update changelog

* Add export_svg tool to ToolDefs

Available via MCP, AI chat, and CLI eval command.

* Replace standalone export items with Copy/Paste as submenu

Figma-style submenu: Copy as text, Copy as SVG, Copy as PNG (⇧⌘C),
Copy as JSX. Keeps Export as PNG (⇧⌘E) as a separate item.

* Remove standalone Export as PNG from context menu

* Update changelog
2026-03-05 10:31:02 +03:00
Danila Poyarkov ad96b1c654 Add CJK font fallback for text rendering
Load a system CJK font (PingFang SC, Microsoft YaHei, Noto Sans CJK, etc.)
at startup and pass it as a fallback in CanvasKit's fontFamilies array.
Falls back to Google Fonts (Noto Sans SC) when no system font is available.

Also fixes loadFont to only cache fonts that successfully register with
CanvasKit's TypefaceFontProvider, preventing invalid font data from being
treated as loaded.

Closes #48
2026-03-05 09:48:11 +03:00
Danila Poyarkov 29096fa56b Merge remote-tracking branch 'origin/master' into reka-color-picker
# Conflicts:
#	src/components/HsvColorArea.vue
2026-03-05 09:05:06 +03:00
Danila Poyarkov d060e32784 Merge origin/master (PR #41 data-test-ids) 2026-03-05 09:03:26 +03:00
Danila Poyarkov 38e7fdd4ac Fix hit-testing: scope hover to current page, click-through empty containers
- Scope hover hit-test to current page (was searching all pages including
  internal component page, causing ghost hover outlines)
- Frames/sections without visible fills or strokes are click-through
- Groups are always click-through (only children are hittable)
- Clipping parents reject hits outside their bounds
- Instances/components check children before falling back to fill check
- Switch test fixtures from material3.fig (55MB) / nuxtui.fig (82MB) to
  gold-preview.fig (537KB) for fast dev runs, gate heavy fixtures behind
  BUN_HEAVY_TESTS env var (enabled in CI)
2026-03-05 08:56:35 +03:00
Danila Poyarkov b3e1bbdb09 Replace custom color picker with reka-ui Color components
Upgrade reka-ui 2.8.2 → 2.9.0 and replace the hand-rolled HSV color
area, hue slider, alpha slider, and hex input with reka-ui's new
ColorArea, ColorSlider, and ColorField primitives.

- ColorAreaRoot + ColorAreaArea handle the 2D saturation/brightness
  picker with proper gradient backgrounds and keyboard navigation
- ColorSliderRoot + ColorSliderTrack for hue and alpha channels with
  automatic gradient rendering
- ColorFieldRoot + ColorFieldInput for hex color text input with
  arrow key increment/decrement support
- Bridge between our Color type (0–1 range) and reka-ui's Color
  (0–255 RGB) via hex string serialization

Removes ~110 lines of custom HSV↔RGB conversion math, pointer capture
handling, and CSS gradient computation.
2026-03-04 20:52:30 +03:00
Anton Soldatov 3ac016b806
Add data-test-id attributes to all Vue components (#41) 2026-03-04 17:18:26 +03:00
Danila Poyarkov 74b09d4397 Merge branch 'renderer-profiler' into compatibility-fixes 2026-03-04 14:19:35 +03:00
Danila Poyarkov 713a0dc817 Fix instance overrides and layout scoping on .fig import
- Resolve symbolOverride guidPaths by overrideKey instead of guid
- Handle overriddenSymbolID for instance component swaps
- Propagate overrides transitively through the componentId clone chain
- Preserve internalOnly flag on canvas nodes during export
- Scope computeAllLayouts to current page for paste/undo/font-load
2026-03-04 14:18:37 +03:00
Danila Poyarkov 2a86ea5ce5 Add renderer profiler with HUD overlay, GPU timing, and phase instrumentation
Profiler modules in packages/core/src/profiler/:
- FrameStats: rolling 120-frame buffer tracking FPS, CPU/GPU times, node counts
- GpuTimer: EXT_disjoint_timer_query_webgl2 wrapper for GPU-side timing
- DrawCallCounter: WebGL context proxy counting draw calls per frame
- PhaseTimer: Chrome DevTools Performance panel custom tracks via User Timing API
- HudRenderer: in-canvas overlay with stats text and frame time bar graph
- CaptureStack: per-node profiling with speedscope JSON export
- RenderProfiler: orchestrates all layers with zero cost when disabled

Integration:
- SkiaRenderer.render() instrumented with phase markers for scene, picture
  recording/replay, section titles, component labels, selection, rulers, flush
- Node counting and viewport culling tracking in renderNode()
- WebGL2 context passed through for GPU timer and draw call counter
- Shift+P keyboard shortcut to toggle HUD overlay
- toggleProfiler() added to editor store
2026-03-04 14:13:17 +03:00
Danila Poyarkov 942d3be059 Add auto-save toggle to File menu
Checkbox item in File > Auto-save to local file. Enabled by default.
When disabled, the 3s debounced auto-save to the opened .fig file
is skipped — user can still save manually with ⌘S.
2026-03-04 10:43:20 +03:00
Danila Poyarkov 3c0c4e530c Guard against double destroy and post-unmount rendering
- Add destroyed flag to SkiaRenderer.destroy() to prevent double-free
- Check destroyed flag in renderNow() to skip rendering after unmount
  (loadFonts promise could resolve after component unmounts)
2026-03-04 10:35:44 +03:00
Danila Poyarkov 9e3a6c0e7f Extract collectFontKeys into core and add font tests
- Extract font key collection from editor store into
  collectFontKeys() in packages/core/src/fonts.ts
- 18 tests: styleToWeight, weightToStyle, markFontLoaded/isFontLoaded,
  collectFontKeys (nested nodes, style runs, deduplication, default
  font filtering, invalid IDs)
2026-03-04 10:16:26 +03:00
Danila Poyarkov ed85451579 Await font loading before hiding file-open loader
- Make loadFontsForNodes async and await it in openFigFile so the
  loading overlay stays visible until all Google Fonts are ready
- Load fonts when switching pages (previously only loaded for first page)
- Paste still fire-and-forgets font loading for instant feedback
2026-03-04 10:11:12 +03:00
Danila Poyarkov a92315149a Always show visibility toggle on fill, stroke, and effect rows 2026-03-04 09:56:16 +03:00
Danila Poyarkov 1ca96094ab Fix stroke color row overlap
- Remove opacity ScrubInput from color row (matches Figma layout)
- Constrain ColorInput with min-w-0 flex-1 so it doesn't push buttons off
- Add shrink-0 to eye/remove buttons to prevent squishing
2026-03-04 09:54:09 +03:00
Danila Poyarkov e7426f3c58 Fix stroke section layout to match Figma
- Move side selector from header to details row (right of weight input)
- Use 4-dot grid icon for the side selector button (matches Figma)
- Highlight button border with accent color when independent weights active
- Use 3-line stroke weight icon instead of filled rect
- Header now only has section label + add button
2026-03-04 09:51:39 +03:00
Danila Poyarkov 45cab3e5fb Merge branch 'individual-strokes' into compatibility-fixes 2026-03-04 09:49:23 +03:00
Danila Poyarkov c412b78ed8 Add stroke align, individual side strokes, and side selector UI
- Renderer: stroke align (INSIDE/CENTER/OUTSIDE) using clip-based
  approach for all shape types including sections
- Renderer: individual side strokes when independentStrokeWeights is
  enabled, drawing per-side lines with correct align offsets
- StrokeSection: align dropdown, side selector dropdown (All/Top/Bottom/
  Left/Right/Custom), individual weight inputs with side-specific icons
- Kiwi serialize: export correct strokeAlign and border weight fields
- Scene graph: sync border weight props through instance sync
- 19 tests covering align, individual weights, instance sync, kiwi
  export, and FigmaAPI properties
2026-03-04 09:47:14 +03:00
Danila Poyarkov c3e0810620 Fix scrollbar: use utility class instead of global selector
Global * scrollbar styles caused scrollbars to appear on the
menu bar and other elements. Replace with scrollbar-thin utility
applied only to panel scroll containers.
2026-03-04 09:35:30 +03:00
Danila Poyarkov 038c876bc6 Fix horizontal scrollbar on pages panel 2026-03-04 02:27:09 +03:00
Danila Poyarkov c40c6c78a8 Fix horizontal scrollbar on right panel, style scrollbars for Tauri 2026-03-04 02:21:06 +03:00
Danila Poyarkov 8a13c5ffb6 Load all font weight/style variants needed by pasted text nodes
loadFontsForNodes only loaded the Regular style for each family.
Now collects fontWeight and italic from each text node and style
run, converts to style name via weightToStyle, and loads each
variant separately (e.g. Medium, Bold, Bold Italic).
2026-03-04 01:15:44 +03:00
Danila Poyarkov 9c82cba672 Fix font loading not registering in core cache, add layout text measurement tests
Tauri's loadFont registered fonts with the CanvasKit provider but
not in core's loadedFamilies cache, so isFontLoaded returned false
and measureTextNode returned null during layout recomputation.

Add markFontLoaded() to core and call it from Tauri font loader.
Add tests verifying text measurement integrates with auto-layout
centering.
2026-03-04 00:16:15 +03:00
Danila Poyarkov bf83118f96 Recompute layouts after font loading completes 2026-03-04 00:13:24 +03:00
Danila Poyarkov d7e2015967 Estimate text width for WIDTH_AND_HEIGHT auto-resize in layout
Text nodes with textAutoResize=WIDTH_AND_HEIGHT now use an estimated
content width instead of the node's current width when computing
auto-layout. Fixes month headers (and similar centered text in
auto-layout) appearing left-aligned after paste.
2026-03-04 00:11:48 +03:00
Danila Poyarkov 809a1dfe75 Clear hover on zoom/pinch to keep scene picture cache valid 2026-03-03 23:58:46 +03:00
Danila Poyarkov 534a7b298e Add DEFAULT_FONT_FAMILY constant, load fonts on paste and .fig import
Replace all 'Inter' string literals with DEFAULT_FONT_FAMILY from
constants. Add loadFontsForNodes() that collects font families from
text nodes and loads them into CanvasKit, called after clipboard
paste and .fig file import.
2026-03-03 23:56:21 +03:00
Danila Poyarkov 7e06969ab5 Multi-selection properties panel with tests
Show position, appearance, fill, stroke, and effects sections
when multiple nodes are selected. Shared values display normally,
differing values show 'Mixed'. Editing applies to all selected.

- Shared composable (use-multi-props) for isMulti, active, activeNode
- ScrubInput supports MIXED symbol as model-value
- Per-node previous values for correct undo on multi-edit
- Fix flip transform encoding (scale first column only)
- Fix npm publish auth for MCP package
- 22 new tests: flip, alignment, multi-node merging, kiwi roundtrip
2026-03-03 20:35:51 +03:00
Danila Poyarkov 5a77f2c1cc Fix flip and single-node alignment
Flip horizontal/vertical now toggles flipX/flipY with scale
transform instead of manipulating rotation. Import detects flip
from negative transform determinant. Single-node alignment uses
parent frame bounds instead of bailing out.
2026-03-03 18:35:30 +03:00
Danila Poyarkov 299d9b73b8 Auto-expand layers tree to reveal selected node 2026-03-03 14:48:51 +03:00
Danila Poyarkov 0c0be3f28b Hide internal pages and render page dividers
Decode internalOnly from kiwi field 142, filter internal pages
in SceneGraph.getPages() by default (pass true to include them).
Pages with names of only dashes/asterisks/spaces and no children
render as horizontal divider lines.
2026-03-03 14:37:56 +03:00
Danila Poyarkov 3e054f0885 Resizable pages/layers split in left panel 2026-03-03 14:22:32 +03:00
Danila Poyarkov 93c549bad0 Reuse GL context on panel resize
Panel resizing now creates a new surface from the existing
GrDirectContext instead of destroying and recreating the entire
renderer. All caches (paints, fonts, node pictures, scene picture,
filters) are preserved across resizes.
2026-03-03 12:48:51 +03:00
Danila Poyarkov 921f28e9f9 Show loading overlay on canvas while opening .fig files 2026-03-03 12:35:54 +03:00
Danila Poyarkov a32b134eba
Improve zoom smoothness, add absolute position cache (#21)
* Improve trackpad pinch-zoom smoothness

- Replace Math.pow(0.99, delta) with Math.exp(-delta/100) zoom curve
  for natural, symmetric scaling that handles both tiny trackpad deltas
  and large mouse wheel jumps gracefully
- Normalize wheel deltaMode (LINE → 40px, PAGE → 800px) so external
  mice on Firefox produce consistent zoom behavior
- Clamp per-flush scale factor to 0.75–1.25 to prevent jarring jumps
  from discrete mouse wheel ticks

* Add per-frame absolute position cache for SceneGraph
2026-03-03 11:44:31 +03:00
Danila Poyarkov a9a1f9ac1f
Shadow rendering performance: per-node SkPicture cache (#25)
* Replace saveLayer with MaskFilter for drop shadows

Drop shadows now draw directly with MaskFilter.MakeBlur instead of
saveLayer + ImageFilter. Eliminates per-shadow offscreen buffer
allocation, significantly improving render throughput for scenes
with many shadowed nodes.

Text shadows still use saveLayer (MaskFilter can't be applied to
text glyphs individually).

Benchmark: 50 shadow nodes render at 1.55ms/frame (scene change).

* Cache per-node SkPictures for effect rendering

Nodes with visible effects (shadows, blurs) are recorded into
individual SkPictures and replayed on subsequent scene redraws.
Only the modified node re-records; unchanged shadow nodes replay
from cache.

- MaskFilter.MakeBlur for drop shadows instead of saveLayer
- Reusable effectLayerPaint and cached ImageFilters/MaskFilters
- invalidateNodePicture() called on node update
- invalidateAllPictures() on font load; invalidateScenePicture()
  preserves node cache for scene-only invalidation
- Shadow benchmark: 50 nodes at 1.47ms/frame (scene change)

* Update changelog with shadow rendering performance improvements
2026-03-03 11:37:01 +03:00
Danila Poyarkov c618d486e4 Remove effects showcase section from demo 2026-03-03 10:17:43 +03:00