openpencil/packages/docs/programmable/sdk/api/composables/use-position.md
2026-03-24 23:24:08 +03:00

928 B

title description
usePosition Read and update selected node position, size, rotation, alignment, and flipping.

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

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)