Danila Poyarkov 1d8ddd951a feat(editor): add corner smoothing control

- Expose mixed smoothing percentages through Appearance controls
- Preserve per-node corner preview values in one-step undo
- Cover CanvasKit profiles and .fig import/export with engine and visual tests

2026-07-17 19:28:34 +03:00

1.4 KiB

Raw Blame History

title	description
useAppearance	Control visibility, opacity, corner radius, and smoothing for the current selection.

useAppearance

useAppearance() is the appearance-focused control composable for property panels.

It exposes selection-derived UI state for:

visibility
opacity
corner radius
corner smoothing as a normalized percentage
independent corner radii, including imported unequal-corner state
blend mode

Usage

import { useAppearance } from '@open-pencil/vue'

const appearance = useAppearance()

Basic example

const {
  visibilityState,
  opacityPercent,
  cornerRadiusValue,
  cornerSmoothingPercent,
  showIndependentCorners,
  toggleVisibility,
  toggleIndependentCorners,
} = useAppearance()

Practical examples

Toggle selection visibility

appearance.toggleVisibility()

Edit per-corner radii

appearance.updateCornerProp('topLeftRadius', 12)
appearance.commitCornerProp('topLeftRadius', 12, 8)

Edit corner smoothing

appearance.updateCornerProp('cornerSmoothing', 0.75)
appearance.commitCornerProp('cornerSmoothing', 0.75, 0)

Render the per-corner editor from showIndependentCorners. It accounts for both the explicit scene-node flag and imported nodes whose corner values differ. Multi-selection toggles and commits are grouped into one undo entry.

1.4 KiB Raw Blame History