Skip to content

usePosition

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

It exposes selected-node values like:

  • x
  • y
  • width
  • height
  • rotation

and actions like:

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

Usage

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

const position = usePosition()

Basic example

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

Practical examples

Align selected nodes

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

Flip selection

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

Rotate selection

ts
position.rotate(90)

Released under the MIT License.