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.

Related APIs

• SDK API Overview
• useLayout
• useTypography