@yoyoo-ddr/vue

Vue 3 component for DDR — Draggable, Resizable, Rotatable. Built on top of @yoyoo-ddr/core.

Install

npm i @yoyoo-ddr/vue --save

@yoyoo-ddr/core is included as a dependency — no need to install it separately.

Quick Start

JSX (recommended)

import DDR from '@yoyoo-ddr/vue'
import type { TransformProps } from '@yoyoo-ddr/vue'
import '@yoyoo-ddr/vue/dist/style.css'
import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup() {
    const t = ref<TransformProps>({
      x: 100, y: 100, width: 100, height: 100, rotation: 0,
    })

    return () => (
      <div style={{ width: '100%', height: '100%' }}>
        <DDR
          v-model:value={t.value}
          parent={true}
          grid={[10, 10]}
          minWidth={20}
          minHeight={20}
          onDragstart={(e, transform) => console.log('drag start', transform)}
        >
          <div style={{ width: '100%', height: '100%', background: 'red' }} />
        </DDR>
      </div>
    )
  },
})

SFC (Single File Component)

<template>
  <div style="width: 100%; height: 100%">
    <DDR
      v-model:value="transform"
      :parent="true"
      :grid="[10, 10]"
      :minWidth="20"
      :minHeight="20"
      @dragstart="onDragStart"
    >
      <div :style="{ width: '100%', height: '100%', background: 'red' }" />
    </DDR>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import DDR from '@yoyoo-ddr/vue'
import type { TransformProps } from '@yoyoo-ddr/vue'
import '@yoyoo-ddr/vue/dist/style.css'

const transform = ref<TransformProps>({
  x: 100, y: 100, width: 100, height: 100, rotation: 0,
})

const onDragStart = (e: MouseEvent, t: TransformProps) => {
  console.log('drag start', t)
}
</script>

v-model:value

The component uses v-model:value to keep position/size/rotation in sync:

const t = ref<TransformProps>({ x: 0, y: 0, width: 100, height: 100, rotation: 0 })

<DDR v-model:value={t.value} />
// t.value updates automatically on drag / resize / rotate

Props

All props are optional. Props match DDRCoreConfig from @yoyoo-ddr/core.

| Prop | Type | Default | Description | |------|------|---------|-------------| | value | TransformProps | { x:0, y:0, width:100, height:100, rotation:0 } | Controlled position / size / rotation (use with v-model:value) | | active | boolean | true | Whether interaction is enabled | | draggable | boolean | true | Enable drag | | resizable | boolean | true | Enable resize | | rotatable | boolean | true | Enable rotation | | resizeHandler | string[] | ['tl','tm','tr','r','br','bm','bl','l'] | Visible resize handle positions | | handlerSize | number | 11 | Resize handle size in px | | acceptRatio | boolean | false | Lock aspect ratio (hold Shift to toggle) | | minWidth | number | 1 | Minimum width | | minHeight | number | 1 | Minimum height | | maxWidth | number | 1000000 | Maximum width | | maxHeight | number | 1000000 | Maximum height | | parent | boolean | false | Constrain to parent bounds | | grid | [number, number] | [1, 1] | Grid snap [x, y] | | axis | 'x' 'y' 'xy' | 'xy' | Restrict drag axis | | zoom | number | 1 | Parent scale factor (for transform: scale()) | | useCSSTransform | boolean | false | Use transform: translate() for sub-pixel smoothness | | transformOrigin | [number, number] | [0, 0] | Parent transform-origin in px | | stop | boolean | true | Stop event propagation | | prevent | boolean | true | Prevent default events | | beforeActive | () => boolean | () => false | Guard before interaction; return true to allow |

Events

Each event receives (event: MouseEvent, transform: TransformProps).

| Event | Description | |-------|-------------| | dragstart | Drag started | | drag | Dragging | | dragend | Drag ended | | resizestart | Resize started | | resize | Resizing | | resizeend | Resize ended | | rotatestart | Rotate started | | rotate | Rotating | | rotateend | Rotate ended | | change | Fires on every interaction tick (drag/resize/rotate move) |

Re-exports from Core

For convenience, @yoyoo-ddr/vue re-exports core types and the DDRCore class:

import type { TransformProps, DDRCoreConfig, HanlderType } from '@yoyoo-ddr/vue'
import { DDRCore } from '@yoyoo-ddr/vue'
import type { DDRProps, DDREvents } from '@yoyoo-ddr/vue'

CSS State Classes

| Class | Description | |-------|-------------| | yoyoo-ddr | Wrapper (always present) | | active | Component is active | | ddr-ready-drag | Ready to drag | | ddr-dragging | Dragging | | ddr-ready-resize | Ready to resize | | ddr-resizing | Resizing | | ddr-ready-rotate | Ready to rotate | | ddr-rotating | Rotating |

License

MIT