State Flags

The component exposes boolean props for turning editing capabilities on or off based on your product state.

<vdr
  :active="true"
  :draggable="true"
  :resizeable="true"
  :rotateable="true"
  :activeable="true"
/>

Flags

Prop	Purpose
active	Whether the component is active and shows outline/handles
activeable	Whether the component can be activated and operated
draggable	Whether the whole element can be dragged
resizeable	Whether resize handles can resize the element
rotateable	Whether the angle handle can rotate the element

Common Modes

Read-only:

<vdr :active="false" :activeable="false" :draggable="false" :resizeable="false" :rotateable="false" />

Drag only:

<vdr :resizeable="false" :rotateable="false" />

Disable rotation while keeping drag and resize:

<vdr :rotateable="false" :sticks="['tl', 'tm', 'tr', 'mr', 'br', 'bm', 'bl', 'ml']" />

See Flags for an interactive example.