usePosition

usePosition() is a control composable for position-related UI.

It exposes selected-node values like:

• x
• y
• width
• height
• rotation

x, y, and rotation read as Figma's properties panel shows them: the top-left of the turned layer's box on the canvas, measured from its frame or page, and its counterclockwise angle. updateProp('x' | 'y' | 'rotation', value) moves or turns each selected node so it shows that value, turning about its center. panelProp(key) gives the shared value across a multi-selection, or MIXED.

and actions like:

• align
• flip
• rotate
• scrub/update numeric properties

Usage

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

const position = usePosition()

Basic example

const { x, y, width, height, rotation, updateProp, commitProp } = usePosition()

Practical examples

Align selected nodes

position.align('horizontal', 'center')
position.align('vertical', 'min')

Flip selection

position.flip('horizontal')
position.flip('vertical')

Rotate selection

position.rotate(90)

Related APIs

• useLayout
• useAppearance