Draggable & Resizable Panel Component For Vue 3

Install & Download:

Description:

A draggable, resizable, and accessible panel component for Vue 3.

How to use it:

1. Import and register the DraggablePanel component.

import { defineComponent, ref, reactive } from 'vue'
import DraggablePanel from 'draggable-panel'
import 'draggable-panel/dist/style.css'

export default defineComponent({
  name: 'App',
  components: {
    DraggablePanel,
  },
})

2. Create a draggable panel.

<draggable-panel class="draggable-panel"
   :canvas-style="{ background: '#FFFFFF' }"
   :chart-style="{ background: '#1976D255' }"
   :width="canvasWidth"
   :height="canvasHeight"
   :padding="32"
   :data="chartList"
   :chart-min-width="100"
   :chart-min-height="100"
   :scale-min="0.5"
   :scale-max="10"
   :lock="false"
   :chartId='chartId'
   @canvas-scale="canvasScale"
   @canvas-drop="dropInCanvas"
   @chart-move="chartMove"
   @chart-scale="chartScale">
  <template #chart="{ chart, index }">
      <div style="padding: 16px">
          ID: {{ chart.id }} (default)
      </div>
  </template>
  <template #chart-8888="{ chart, index }">
    <div style="padding: 16px; color: #FF0000">
      <strong>ID: {{ chart.id }} (slot with id)</strong>
      <div style="margin: 8px 0">Hotkey:</div>
      <ul>
        <li>move: space + drag</li>
        <li>scale: ctrl + mousewheel</li>
        <li>scale +: ctrl + =</li>
        <li>scale -: ctrl + -</li>
        <li>reset -: ctrl + 0</li>
        <li>real size: ctrl + enter</li>
      </ul>
    </div>
  </template>
</draggable-panel>

3. All default props.

width         : {
  required: true,
  type    : Number as PropType<number>,
},
height        : {
  required: true,
  type    : Number as PropType<number>,
},
data          : {
  required: true,
  type    : Array as PropType<ChartItem[]>,
},
chartMinWidth : {
  required: false,
  type    : Number as PropType<number>,
  default : 100,
},
chartMinHeight: {
  required: false,
  type    : Number as PropType<number>,
  default : 100,
},
padding       : {
  required: false,
  type    : Number as PropType<number>,
  default : 32,
},
lock          : {
  required: false,
  type    : Boolean as PropType<boolean>,
  default : false,
},
canvasStyle   : {
  required: false,
  type    : Object as PropType<Style>,
  default : {},
},
chartStyle    : {
  required: false,
  type    : Object as PropType<Style>,
  default : {},
},
scaleMin      : {
  required: false,
  type    : Number as PropType<number>,
  default : 0.5,
},
scaleMax      : {
  required: false,
  type    : Number as PropType<number>,
  default : 10,
},
chartId       : {
  required: false,
  type    : Number as PropType<number>,
  default : 0,
},

4. Events.