Danila Poyarkov 12031b76c9 feat(app): migrate position and appearance panels

- Move independent-corner presentation and batched mutations into AppearanceControls

- Rebuild Position and Appearance with aligned panel grids and semantic locators

- Replace type text headers with compact node icons and add visual coverage

2026-07-13 14:47:48 +03:00

1.2 KiB

Raw Blame History

title	description
useAppearance	Control visibility, opacity, and corner radius state 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
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,
  showIndependentCorners,
  toggleVisibility,
  toggleIndependentCorners,
} = useAppearance()

Practical examples

Toggle selection visibility

appearance.toggleVisibility()

Edit per-corner radii

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

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.2 KiB Raw Blame History