Skip to content

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

Usage

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

const appearance = useAppearance()

Basic example

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

Practical examples

Toggle selection visibility

ts
appearance.toggleVisibility()

Edit per-corner radii

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

Released under the MIT License.