draggable-panel
TypeScript icon, indicating that this package has built-in type declarations

1.0.10 • Public • Published

Vue Draggable Panel

Vue3 based drag panel component


Demo

https://cainier.github.io/draggable-panel

image

Example

https://github.com/Cainier/draggable-panel/blob/main/src/App.vue

Features

  1. Canvas scale
  2. Canvas move
  3. Chart item scale
  4. Chart item resize

Hotkey

Ctrl can be replaced by Command

  • Move: Space + Drag
  • Scale: Ctrl + Mousewheel
  • Scale +: Ctrl + =
  • Scale -: Ctrl + -
  • Reset: Ctrl + 0
  • Real Size: Ctrl + Enter

Installation

npm i draggable-panel

yarn add draggable-panel

Document

Props

  • width: Number
    • Description: Panel width (px)
    • Required
    • Example: 1920
  • height: Number
    • Description: Panel height (px)
    • Required
    • Example: 1080
  • data: Objects in Array
    • Description: Chart data array
    • Required
    • Example:
      [
        ...
        {
          id    : 1,    // ID (Number / String)
          width : 300,  // Default width (Number)
          height: 200,  // Default height (Number)
          x     : 20,   // Default Y (Number)
          y     : 20    // Default X (Number)
        },
        ...
      ]
      
  • chartMinWidth: Number
    • Description: Minimum chart width (px)
    • Default: 100
  • chartMinHeight: Number
    • Description: Minimum chart height (px)
    • Default: 100
  • padding: Number
    • Description: The default spacing between the canvas and the container (px)
    • Example: 32
  • scaleMin: Number
    • Description: Canvas minimum scale ratio
    • Example: 0.5
  • scaleMax: Number
    • Description: Canvas maximum scale ratio
    • Example: 10
  • lock: Boolean
    • Description: Lock scale / move / resize
    • Example: false
  • canvasStyle: Object
    • Description: Canvas custom style
    • Example:
      {
        "background": "#FFFFFF"
      }
  • chartStyle: Object
    • Description: Chart custom style
    • Example:
      {
        "background": "#1976D255"
      }

Events

  • @canvas-scale -> function(scale)

    • Description: Emitted when canvas scale
    • Parameters:
      • scale: Number
        • Description: Scale ratio
  • @canvas-drop -> function(event, position)

    • Description: Drag and drop element from outside the draggable-panel to the canvas
    • Parameters:
      • event: DragEvent
        • Description: DragEvent
      • position: Object
        • x: number
          • Description: Canvas position X
        • y: number
          • Description: Canvas position Y
  • @chart-move -> function(chartItem)

    • Description: Emitted when canvas chart move
    • Parameters:
      • chartItem: Object
        • Description: Chart object in chart array
  • @chart-scale -> function(chartItem)

    • Description: Emitted when canvas chart scale
    • Parameters:
      • chartItem: Object
        • Description: Chart object in chart array

Slots

  • chart

    • Description: Chart default item
    • Required
    • Example:
      <template #chart="{ chart, index }">
          <div>{{ chart }}</div>
      </template>
  • chart-[id]

    • Description: Chart for specified ID
    • Example:
      <template #chart-1="{ chart, index }">
          <div>{{ chart }}</div>
      </template>
      
      <template #chart-2="{ chart, index }">
          <div>{{ chart }}</div>
      </template>

Thanks For

Package Sidebar

Install

npm i draggable-panel

Weekly Downloads

21

Version

1.0.10

License

MIT

Unpacked Size

1.51 MB

Total Files

10

Last publish

Collaborators

  • cainier