### Install vue3-drag-resize-rotate

Source: https://github.com/gausszhou/vue3-drag-resize-rotate/blob/master/README.md

Install the package using npm.

```shell
npm install  @gausszhou/vue3-drag-resize-rotate
```

--------------------------------

### Alignment and Snapping Example

Source: https://github.com/gausszhou/vue3-drag-resize-rotate/blob/master/_autodocs/api-reference/vue-drag-resize-rotate.md

Demonstrates alignment guides and snapping behavior when dragging elements near each other or container edges. Enhances precise placement.

```vue
<template>
  <div style="position: relative; width: 100%; height: 100vh;">
    <VueDragResizeRotate
      :w="200"
      :h="200"
      :x="0"
      :y="0"
      :snap="true"
      :snapBorder="true"
      :snapTolerance="5"
      :parent="true"
      @refLineParams="onRefLineParams"
    >
      Element 1
    </VueDragResizeRotate>
    
    <VueDragResizeRotate
      :w="200"
      :h="200"
      :x="250"
      :y="0"
      :snap="true"
      :snapBorder="true"
      :parent="true"
      @refLineParams="onRefLineParams"
    >
      Element 2
    </VueDragResizeRotate>
  </div>
</template>

<script>
export default {
  methods: {
    onRefLineParams(refLine) {
      console.log('Reference lines:', refLine);
    }
  }
};
</script>
```

--------------------------------

### Install Vue 3 Drag Resize Rotate

Source: https://github.com/gausszhou/vue3-drag-resize-rotate/blob/master/_autodocs/quick-reference.md

Install the component using npm. This command adds the necessary package to your project.

```bash
npm install @gausszhou/vue3-drag-resize-rotate
```

--------------------------------

### Full Install

Source: https://github.com/gausszhou/vue3-drag-resize-rotate/blob/master/_autodocs/quick-reference.md

Import the component and its default CSS for full functionality.

```javascript
// Full install
import VueDragResizeRotate from "@gausszhou/vue3-drag-resize-rotate"
import "@gausszhou/vue3-drag-resize-rotate/lib/bundle.esm.css"
```

--------------------------------

### Basic Configuration Example

Source: https://github.com/gausszhou/vue3-drag-resize-rotate/blob/master/_autodocs/configuration.md

Sets up a basic draggable, resizable element with initial dimensions and enabled states.

```javascript
{
  x: 0,
  y: 0,
  w: 200,
  h: 200,
  draggable: true,
  resizable: true,
  rotatable: false
}
```

--------------------------------

### Rotation Example

Source: https://github.com/gausszhou/vue3-drag-resize-rotate/blob/master/_autodocs/api-reference/vue-drag-resize-rotate.md

Demonstrates how to enable rotation for the component. Useful for elements that need to be oriented freely.

```vue
<template>
  <VueDragResizeRotate
    :w="200"
    :h="200"
    :x="100"
    :y="100"
    :rotatable="true"
    @rotating="onRotating"
    @rotatestop="onRotateStop"
  >
    <img src="image.png" style="width: 100%; height: 100%;" />
  </VueDragResizeRotate>
</template>

<script>
export default {
  methods: {
    onRotating(angle) {
      console.log(`Rotating to: ${angle}°`);
    },
    onRotateStop(angle) {
      console.log(`Stopped at: ${angle}°`);
    }
  }
};
</script>
```

--------------------------------

### Basic Drag and Resize Example

Source: https://github.com/gausszhou/vue3-drag-resize-rotate/blob/master/_autodocs/api-reference/vue-drag-resize-rotate.md

Shows a basic implementation of a resizable and draggable element. Use this for simple interactive components.

```vue
<template>
  <VueDragResizeRotate
    :w="200"
    :h="200"
    :x="0"
    :y="0"
    :draggable="true"
    :resizable="true"
    @dragging="onDragging"
    @resizing="onResizing"
  >
    <div style="padding: 10px;">
      Drag me around and resize!
    </div>
  </VueDragResizeRotate>
</template>

<script>
export default {
  methods: {
    onDragging(left, top) {
      console.log(`Position: ${left}, ${top}`);
    },
    onResizing(left, top, width, height) {
      console.log(`Size: ${width}x${height}`);
    }
  }
};
</script>
```

--------------------------------

### Installing the Component with Vue.use()

Source: https://github.com/gausszhou/vue3-drag-resize-rotate/blob/master/_autodocs/index.md

Install the VueDragResizeRotate component globally using Vue.use(). This method is recommended for easy access to the component throughout your application.

```javascript
app.use(VueDragResizeRotate)
// Now available as <VueDragResizeRotate> in all templates
```

--------------------------------

### Grid and Aspect Ratio Example

Source: https://github.com/gausszhou/vue3-drag-resize-rotate/blob/master/_autodocs/api-reference/vue-drag-resize-rotate.md

Shows how to snap elements to a grid and maintain a specific aspect ratio during resizing. Ideal for structured layouts.

```vue
<template>
  <VueDragResizeRotate
    :w="300"
    :h="200"
    :x="0"
    :y="0"
    :grid="[20, 20]"
    :lockAspectRatio="true"
    :parent="true"
  >
    <div style="background: #f0f0f0; padding: 20px;">
      Snaps to 20px grid, maintains 3:2 aspect ratio
    </div>
  </VueDragResizeRotate>
</template>
```

--------------------------------

### Default Slot Usage Example

Source: https://github.com/gausszhou/vue3-drag-resize-rotate/blob/master/_autodocs/slots-and-styling.md

An example demonstrating how to place complex content, like a card with a button, inside the default slot of the component.

```vue
<template>
  <VueDragResizeRotate :w="300" :h="200" :x="100" :y="100">
    <div style="padding: 20px; background: #f0f0f0; height: 100%;">
      <h2>Resizable Card</h2>
      <p>Drag, resize, and rotate this card</p>
      <button @click="doSomething">Click me</button>
    </div>
  </VueDragResizeRotate>
</template>
```

--------------------------------

### Initiate Drag on Touch Start

Source: https://github.com/gausszhou/vue3-drag-resize-rotate/blob/master/_autodocs/api-reference/vue-drag-resize-rotate.md

Attach this event handler to the element's touchstart event to initiate the drag operation.

```html
@touchstart="elementTouchDown"
```

--------------------------------

### Vue Component with Alignment Guides

Source: https://github.com/gausszhou/vue3-drag-resize-rotate/blob/master/public/markdown/advanced/advanced-reference-line.md

This Vue component demonstrates the usage of the VueDragResizeRotate component with alignment guide lines. It captures reference line parameters emitted by the component to display visual guides during element manipulation. Ensure the `snap` and `snapTolerance` props are configured for snapping behavior.

```html
<template>
  <div class="view-box">
    <div id="toolbar">对齐时出现辅助线</div>
    <div class="container">
      <VueDragResizeRotate
        :w="200"
        :h="200"
        :parent="true"
        :debug="false"
        :min-width="200"
        :min-height="200"
        :isConflictCheck="true"
        :snap="true"
        :snapTolerance="10"
        @refLineParams="getRefLineParams"
        style="background-color: rgb(174, 213, 129)"
      ></VueDragResizeRotate>
      <VueDragResizeRotate
        :w="200"
        :h="200"
        :parent="true"
        :x="210"
        :debug="false"
        :min-width="200"
        :min-height="200"
        :isConflictCheck="true"
        :snap="true"
        :snapTolerance="10"
        @refLineParams="getRefLineParams"
        style="background-color: rgb(129, 212, 250)"
      ></VueDragResizeRotate>
      <VueDragResizeRotate
        :w="200"
        :h="200"
        :parent="true"
        :x="420"
        :debug="false"
        :min-width="200"
        :min-height="200"
        :isConflictCheck="true"
        :snap="true"
        :snapTolerance="10"
        @refLineParams="getRefLineParams"
        style="background-color: rgb(239, 154, 154)"
      ></VueDragResizeRotate>
      <span
        class="ref-line v-line"
        v-for="(item, index) in vLine"
        :key="'v_' + index"
        v-show="item.display"
        :style="{
          left: item.position,
          top: item.origin,
          height: item.lineLength
        }"
      />
      <span
        class="ref-line h-line"
        v-for="(item, index) in hLine"
        :key="'h_' + index"
        :style="{
          top: item.position,
          left: item.origin,
          width: item.lineLength
        }"
      />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      vLine: [],
      hLine: []
    };
  },
  methods: {
    getRefLineParams(params) {
      const { vLine, hLine } = params;
      this.vLine = vLine;
      this.hLine = hLine;
    }
  }
};
</script>

<style scoped>
.ref-line {
  position: absolute;
  background-color: rgb(219, 89, 110);
  z-index: 9999;
}
.v-line {
  width: 1px;
}
.h-line {
  height: 1px;
}
</style>
```

--------------------------------

### Callbacks for Custom Logic Example

Source: https://github.com/gausszhou/vue3-drag-resize-rotate/blob/master/_autodocs/api-reference/vue-drag-resize-rotate.md

Demonstrates how to use various callbacks for drag, resize, and rotate events to implement custom logic or validation. Allows fine-grained control over interactions.

```vue
<template>
  <VueDragResizeRotate
    :w="200"
    :h="200"
    :x="0"
    :y="0"
    :onDragStart="onDragStart"
    :onDrag="onDrag"
    :onResizeStart="onResizeStart"
    :onResize="onResize"
    :onRotateStart="onRotateStart"
    :onRotate="onRotate"
  >
    Interactive element
  </VueDragResizeRotate>
</template>

<script>
export default {
  methods: {
    onDragStart(event) {
      console.log('Drag started');
      return true; // return false to prevent drag
    },
    onDrag(left, top) {
      console.log(`Dragging to ${left}, ${top}`);
      return true; // return false to prevent position update
    },
    onResizeStart(handle, event) {
      console.log(`Resize started from ${handle}`);
      return true;
    },
    onResize(left, top, width, height) {
      console.log(`Resizing to ${width}x${height}`);
      return true;
    },
    onRotateStart(event) {
      console.log('Rotation started');
      return true;
    },
    onRotate(angle) {
      console.log(`Rotating to ${angle}°`);
      return true;
    }
  }
};
</script>
```

--------------------------------

### Instance Methods for Position and Size Manipulation

Source: https://github.com/gausszhou/vue3-drag-resize-rotate/blob/master/_autodocs/quick-reference.md

Examples of using instance methods to directly manipulate the position and size of the component. These methods allow for programmatic control over the component's dimensions and location.

```javascript
// Position/Size
this.$refs.component.moveHorizontally(100)
this.$refs.component.moveVertically(50)
this.$refs.component.changeWidth(300)
this.$refs.component.changeHeight(200)
```

--------------------------------

### Conflict Detection Example

Source: https://github.com/gausszhou/vue3-drag-resize-rotate/blob/master/_autodocs/api-reference/vue-drag-resize-rotate.md

Shows how to enable conflict detection to prevent elements from overlapping. Useful for managing space in dashboards or editors.

```vue
<template>
  <div style="position: relative; width: 100%; height: 100vh;">
    <VueDragResizeRotate
      :w="200"
      :h="200"
      :x="0"
      :y="0"
      :isConflictCheck="true"
      :parent="true"
      @dragstop="onDragStop"
    >
      Element 1 (can't overlap)
    </VueDragResizeRotate>
    
    <VueDragResizeRotate
      :w="200"
      :h="200"
      :x="250"
      :y="0"
      :isConflictCheck="true"
      :parent="true"
    >
      Element 2 (can't overlap)
    </VueDragResizeRotate>
  </div>
</template>

<script>
export default {
  methods: {
    onDragStop(left, top) {
      console.log('Drag stopped, no collisions detected');
    }
  }
};
</script>
```

--------------------------------

### Conflict Detection and Drag Start Callback

Source: https://github.com/gausszhou/vue3-drag-resize-rotate/blob/master/_autodocs/configuration.md

Enables conflict detection during drag operations and provides a callback function to execute custom logic before a drag starts.

```javascript
{
  x: 100,
  y: 100,
  isConflictCheck: true,
  parent: true,
  onDragStart: (event) => {
    // Custom logic before drag
    return true;  // Allow drag
  }
}
```

--------------------------------

### Responsive Styling for Mobile

Source: https://github.com/gausszhou/vue3-drag-resize-rotate/blob/master/_autodocs/slots-and-styling.md

Adapt the component's styling for different screen sizes using media queries. This example increases handle size for touch devices and improves visibility when dragging on mobile.

```css
/* Desktop styling */
.vue-drag-resize-rotate {
  border: 1px solid #ccc;
}

.vue-drag-resize-rotate .handle {
  width: 8px;
  height: 8px;
}

/* Mobile optimization */
@media (max-width: 768px) {
  /* Larger handles for touch */
  .vue-drag-resize-rotate .handle {
    width: 12px;
    height: 12px;
  }
  
  /* More visible when dragging */
  .vue-drag-resize-rotate.dragging {
    opacity: 1;
  }
}
```

--------------------------------

### ES Module Import

Source: https://github.com/gausszhou/vue3-drag-resize-rotate/blob/master/_autodocs/quick-reference.md

Import the component as an ES module, typically used in modern build setups.

```javascript
// As ES module
import VueDragResizeRotate from "@gausszhou/vue3-drag-resize-rotate/lib/bundle.esm.js"
```

--------------------------------

### Basic Component with onDragStart Callback

Source: https://github.com/gausszhou/vue3-drag-resize-rotate/blob/master/public/markdown/callbacks/callbacks-ondragstart.md

This example demonstrates a basic Vue component utilizing the onDragStart prop. The callback function logs the event, changes the text color to red, and returns false to cancel the drag operation.

```html
<template>
  <div class="view-box">
    <div id="toolbar">
      <p :style="style">
        I turn red when
        <i>onDragStart</i>
        is called. Callback then prevents activation.
      </p>
    </div>
    <div class="container">
      <VueDragResizeRotate :on-drag-start="onDragStart"></VueDragResizeRotate>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      style: {
        color: "black"
      }
    };
  },
  methods: {
    onDragStart(e) {
      console.log(e);
      this.style.color = "red";
      return false;
    }
  }
};
</script>
```

--------------------------------

### Call snapCheck Instance Method

Source: https://github.com/gausszhou/vue3-drag-resize-rotate/blob/master/_autodocs/api-reference/vue-drag-resize-rotate.md

Performs alignment checks against other elements and container borders when snapping is enabled. Emits alignment guide line coordinates.

```javascript
await component.snapCheck()
```

--------------------------------

### Card-Style Component Layout

Source: https://github.com/gausszhou/vue3-drag-resize-rotate/blob/master/_autodocs/slots-and-styling.md

Example of styling the component to resemble a card. This pattern uses background, border-radius, and box-shadow for the card appearance, with specific styling for header, content, and handles.

```css
.my-card {
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.my-card .header {
  background: #f5f5f5;
  padding: 16px;
  border-bottom: 1px solid #e0e0e0;
  cursor: move;
}

.my-card .content {
  padding: 16px;
  flex: 1;
  overflow: auto;
}

.my-card .handle {
  background: #4a90e2;
  border: none;
  border-radius: 4px;
}
```

--------------------------------

### Drag Handle and Cancel Example

Source: https://github.com/gausszhou/vue3-drag-resize-rotate/blob/master/_autodocs/api-reference/vue-drag-resize-rotate.md

Illustrates using a specific element as a drag handle and defining areas that should not trigger dragging. Useful for complex UIs.

```vue
<template>
  <VueDragResizeRotate
    :w="200"
    :h="200"
    :draggable="true"
    dragHandle=".drag-handle"
    dragCancel=".no-drag"
  >
    <div class="drag-handle" style="cursor: move; background: #ddd; padding: 10px;">
      Drag from here
    </div>
    <div class="no-drag" style="margin: 10px;">
      <button>Click me (won't drag)</button>
    </div>
    <div style="padding: 10px;">
      Content area
    </div>
  </VueDragResizeRotate>
</template>
```

--------------------------------

### getComputedSize($el)

Source: https://github.com/gausszhou/vue3-drag-resize-rotate/blob/master/_autodocs/utilities.md

Gets computed width and height from window.getComputedStyle. This function accounts for borders, padding, and margins.

```APIDOC
## getComputedSize($el)

### Description
Gets computed width and height from window.getComputedStyle. This function accounts for borders, padding, and margins.

### Parameters
#### Path Parameters
- **$el** (`HTMLElement`) - DOM element

### Returns
- **[number, number]** - [width, height] as floating-point numbers

### Example
```javascript
const el = document.querySelector('.my-element');
const [width, height] = getComputedSize(el);
console.log(`Computed: ${width}x${height}`);
```
```

--------------------------------

### Styling Default Handles

Source: https://github.com/gausszhou/vue3-drag-resize-rotate/blob/master/_autodocs/slots-and-styling.md

Customize the appearance of the default resize and rotation handles using CSS. This example shows styling for corner, edge, and rotation handles, including hover effects.

```css
/* Corner handles */
.handle-tl, .handle-tr, .handle-bl, .handle-br {
  width: 8px;
  height: 8px;
  background: white;
  border: 1px solid #333;
}

/* Edge handles */
.handle-tm, .handle-bm {
  width: 10px;
  height: 6px;
}

.handle-ml, .handle-mr {
  width: 6px;
  height: 10px;
}

/* Rotation handle */
.handle-rot {
  width: 8px;
  height: 8px;
  border: 2px solid #333;
  border-right-color: transparent;
  border-radius: 50%;
  background: white;
  position: relative;
  top: -24px;  /* Positions above element */
  left: 50%;   /* Centers horizontally */
  transform: translateX(-50%);
}

/* Hover effects */
.vue-drag-resize-rotate:hover .handle {
  opacity: 1;
  background: #4a90e2;
}

.vue-drag-resize-rotate:not(.active) .handle {
  opacity: 0;
}

.vue-drag-resize-rotate.active .handle {
  opacity: 1;
}
```

--------------------------------

### Get Computed Element Size

Source: https://github.com/gausszhou/vue3-drag-resize-rotate/blob/master/_autodocs/utilities.md

Retrieves the computed width and height of a DOM element, including borders and padding. Use this to get the actual rendered dimensions of an element.

```javascript
import { getComputedSize } from './utils/dom'

const [width, height] = getComputedSize(element)
```

```javascript
const el = document.querySelector('.my-element');
const [width, height] = getComputedSize(el);
console.log(`Computed: ${width}x${height}`);
```

--------------------------------

### Import Utility Functions

Source: https://github.com/gausszhou/vue3-drag-resize-rotate/blob/master/_autodocs/quick-reference.md

Demonstrates how to import various utility functions from the component's library. These functions can assist with tasks like snapping, restricting bounds, and calculations.

```javascript
import { 
  snapToGrid,
  restrictToBounds,
  rotatedPoint,
  getAngle,
  computeWidth,
  computeHeight,
  matchesSelectorToParentElements,
  getComputedSize,
  addEvent,
  removeEvent
} from '@gausszhou/vue3-drag-resize-rotate/lib/utils'
```

--------------------------------

### getSize(el)

Source: https://github.com/gausszhou/vue3-drag-resize-rotate/blob/master/_autodocs/utilities.md

Gets the width and height of an element's bounding rectangle in pixels.

```APIDOC
## getSize(el)

### Description
Gets the width and height of an element's bounding rectangle.

### Parameters
#### Path Parameters
- **el** (HTMLElement) - Required - DOM element to measure

### Returns
- **[width, height]** ([number, number]) - [width, height] in pixels

### Example
```javascript
import { getSize } from './utils/dom'

const [width, height] = getSize(element)
```
```

--------------------------------

### Instance Methods for State Management

Source: https://github.com/gausszhou/vue3-drag-resize-rotate/blob/master/_autodocs/quick-reference.md

Illustrates instance methods used for managing the component's state, including updating parent container information and correcting component size. These are useful for ensuring the component's internal state is consistent.

```javascript
// State
this.$refs.component.updateParentSize()
this.$refs.component.checkParentSize()
this.$refs.component.correctSize()
```

--------------------------------

### Get Mouse Coordinates Return Type

Source: https://github.com/gausszhou/vue3-drag-resize-rotate/blob/master/_autodocs/api-reference/vue-drag-resize-rotate.md

The getMouseCoordinate method returns an object containing the x and y coordinates.

```javascript
{
  x: number,
  y: number
}
```

--------------------------------

### Initiate Resize or Rotate

Source: https://github.com/gausszhou/vue3-drag-resize-rotate/blob/master/_autodocs/api-reference/vue-drag-resize-rotate.md

Call this method when a handle is pressed to initiate resizing or rotation. It triggers the onResizeStart callback and sets up internal state for the operation.

```javascript
handleDown(handle, event)
```

--------------------------------

### Basic CSS Styling

Source: https://github.com/gausszhou/vue3-drag-resize-rotate/blob/master/_autodocs/quick-reference.md

Provides basic CSS for the component's appearance, including styling for the component itself, handles, and active states. It also demonstrates how to hide handles when the component is not active.

```css
/* Basic styling */
.vue-drag-resize-rotate {
  background: white;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.vue-drag-resize-rotate .handle {
  width: 8px;
  height: 8px;
  background: #4a90e2;
  border: none;
  border-radius: 4px;
}

.vue-drag-resize-rotate.active {
  box-shadow: 0 0 10px rgba(74,144,226,0.5);
}

/* Show handles only when active */
.vue-drag-resize-rotate:not(.active) .handle {
  opacity: 0;
}
```

--------------------------------

### Importing the Component

Source: https://github.com/gausszhou/vue3-drag-resize-rotate/blob/master/_autodocs/index.md

Import the VueDragResizeRotate component for use in your Vue application. This is the standard way to import the component before installation.

```javascript
import VueDragResizeRotate from "@gausszhou/vue3-drag-resize-rotate"

// VueDragResizeRotate is a Vue component with:
// - name: "VueDragResizeRotate"
// - install: function for Vue.use()
// - Props: [all configuration options]
// - Emits: [all events]
// - Methods: [all instance methods]
// - Computed: [computed properties]
// - watch: [prop watchers]
```

--------------------------------

### handleDown

Source: https://github.com/gausszhou/vue3-drag-resize-rotate/blob/master/_autodocs/api-reference/vue-drag-resize-rotate.md

Initiates resize or rotate operations when a handle is pressed. It calls the `onResizeStart` callback and sets up internal state for resize or rotate actions.

```APIDOC
## `handleDown(handle, event)`

### Description
Initiates resize or rotate when handle is pressed. Calls `onResizeStart` callback. Sets up internal state for resize or rotate. Stores corner coordinates for rotated resize calculations. Attaches move and stop listeners.

### Parameters
* **handle** (`string`) - Required - Handle identifier (tl, tm, tr, mr, br, bm, bl, ml, rot)
* **event** (`MouseEvent | TouchEvent`) - Required - The event object

### Returns
* `boolean` - Returns `false` to prevent operation
```

--------------------------------

### Grid Snapping with Scale - snapToGrid

Source: https://github.com/gausszhou/vue3-drag-resize-rotate/blob/master/_autodocs/utilities.md

Calculates a new position snapped to a grid, considering a scale ratio. Import from './utils/fns'.

```javascript
import { snapToGrid, restrictToBounds } from './utils/fns'

function calculateNewPosition(deltaX, deltaY, gridX, gridY, scaleRatio) {
  const [snappedX, snappedY] = snapToGrid([gridX, gridY], deltaX, deltaY, scaleRatio);
  return { x: snappedX, y: snappedY };
}
```

--------------------------------

### Drag Handle and Cancel Area Configuration

Source: https://github.com/gausszhou/vue3-drag-resize-rotate/blob/master/_autodocs/configuration.md

Defines specific elements that can initiate dragging and elements that should prevent dragging if interaction starts on them.

```javascript
{
  dragHandle: '.header',      // Only drag from .header element
  dragCancel: '.close-btn',   // Prevent drag if starting from .close-btn
  preventDeactivation: false
}
```

--------------------------------

### Handle Info Object Configuration

Source: https://github.com/gausszhou/vue3-drag-resize-rotate/blob/master/_autodocs/configuration.md

Configure the appearance and behavior of handles. The 'size' and 'offset' properties control the visual dimensions and positioning of handles, while 'switch' determines their visibility based on the active state.

```javascript
{
  size: number,     // Handle size in pixels (default: 8)
  offset: number,   // Handle offset from edge in pixels (default: -4)
  switch: boolean   // Show/hide handles based on active state (default: true)
}
```

--------------------------------

### Debounce High-Frequency Events

Source: https://github.com/gausszhou/vue3-drag-resize-rotate/blob/master/_autodocs/quick-reference.md

Use debouncing for high-frequency events like dragging to improve performance. This example shows how to debounce the 'dragging' event.

```javascript
@dragging="debounce((l, t) => expensive(l, t), 100)"
```

--------------------------------

### Prevent Dragging Based on Condition

Source: https://github.com/gausszhou/vue3-drag-resize-rotate/blob/master/_autodocs/quick-reference.md

Conditionally prevent the drag operation from starting. Return `false` from the `onDragStart` event handler to cancel the drag.

```javascript
:onDragStart="(e) => {
  // return false to prevent
  return !isLocked;
}"
```

--------------------------------

### mounted

Source: https://github.com/gausszhou/vue3-drag-resize-rotate/blob/master/_autodocs/api-reference/vue-drag-resize-rotate.md

Initializes the DOM state and event listeners for the component. It sets up native drag prevention, calculates parent container size, computes aspect ratio, and attaches necessary event listeners.

```APIDOC
## `mounted()`

### Description
Initializes DOM state and event listeners. Sets native drag prevention unless `enableNativeDrag` is true. Calculates parent container size, computes aspect ratio factor, and calculates initial width and height. Sets data attributes for conflict detection and snapping. Attaches document-level mouse/touch listeners and window resize listener.

### Side Effects
- Sets native drag prevention unless `enableNativeDrag` is true
- Calculates parent container size
- Computes aspect ratio factor
- Calculates initial width and height
- Sets data attributes for conflict detection and snapping
- Attaches document-level mouse/touch listeners
- Attaches window resize listener
```

--------------------------------

### Server Sync for Position and Size

Source: https://github.com/gausszhou/vue3-drag-resize-rotate/blob/master/_autodocs/index.md

Send updated element positions and sizes to the server using POST requests in the dragstop and resizestop event handlers. This pattern is suitable for applications requiring data persistence.

```javascript
methods: {
  async onDragStop(left, top) {
    await fetch('/api/elements/position', {
      method: 'POST',
      body: JSON.stringify({ id: this.elementId, left, top })
    });
  },
  async onResizeStop(left, top, width, height) {
    await fetch('/api/elements/size', {
      method: 'POST',
      body: JSON.stringify({ id: this.elementId, left, top, width, height })
    });
  }
}
```

--------------------------------

### Instance Methods for Detection and Calculation

Source: https://github.com/gausszhou/vue3-drag-resize-rotate/blob/master/_autodocs/quick-reference.md

Shows instance methods for performing conflict checks, snap checks, and retrieving size information. These methods are valuable for implementing custom logic related to component interactions and layout.

```javascript
// Detection
this.$refs.component.conflictCheck()
await this.$refs.component.snapCheck()

// Info
const [w, h] = this.$refs.component.getParentSize()
const [w, h] = this.$refs.component.getComputedSize()

// Calculation
const bounds = this.$refs.component.calcDragLimits()
const limits = this.$refs.component.calcResizeLimits()
```

--------------------------------

### Handle Dragging Events

Source: https://github.com/gausszhou/vue3-drag-resize-rotate/blob/master/_autodocs/events.md

Implement the `onDragging` method to perform actions while an element is being dragged. This example shows how to validate the element's position to prevent it from going out of bounds.

```javascript
methods: {
  onDragging(left, top) {
    // Validate position
    if (this.isOutOfBounds(left, top)) {
      console.warn('Element moving out of bounds');
    }
  }
}
```

--------------------------------

### Basic Component and Handle Styling

Source: https://github.com/gausszhou/vue3-drag-resize-rotate/blob/master/_autodocs/slots-and-styling.md

Provides CSS rules for basic styling of the component's root element and its handles, including active and dragging states.

```css
/* Style the component */
.vue-drag-resize-rotate {
  background: #fff;
  border: 2px solid #333;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Style handles */
.vue-drag-resize-rotate .handle {
  background: #4a90e2;
  border: none;
  border-radius: 4px;
  cursor: grab;
}

.vue-drag-resize-rotate .handle:active {
  cursor: grabbing;
}

/* Rotation handle special styling */
.vue-drag-resize-rotate .handle-rot {
  background: #e24a4a;
}

/* Active state styling */
.vue-drag-resize-rotate.active {
  box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.5);
}

/* Dragging state */
.vue-drag-resize-rotate.dragging {
  opacity: 0.8;
  z-index: 1000;
}

/* Resizing state */
.vue-drag-resize-rotate.resizing {
  background: #f0f0f0;
}
```

--------------------------------

### Get Element Size

Source: https://github.com/gausszhou/vue3-drag-resize-rotate/blob/master/_autodocs/utilities.md

Retrieves the width and height of an HTML element's bounding rectangle in pixels. Use this to measure the dimensions of an element for layout or interaction purposes.

```javascript
import { getSize } from './utils/dom'

const [width, height] = getSize(element)
```

```javascript
const el = document.querySelector('.my-element');
const [width, height] = getSize(el);
console.log(`Size: ${width}x${height}`);
```

--------------------------------

### snapToGrid(grid, pendingX, pendingY, scale)

Source: https://github.com/gausszhou/vue3-drag-resize-rotate/blob/master/_autodocs/utilities.md

Snaps provided X and Y coordinates to the nearest grid point, with an option to apply scaling. This is useful for aligning elements precisely on a grid layout.

```APIDOC
## snapToGrid(grid, pendingX, pendingY, scale)

### Description
Snaps coordinates to a grid with optional scaling.

### Method
N/A (Utility Function)

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

### Parameters
- **grid** (`number[]`) - Required - Grid spacing `[xSpacing, ySpacing]`
- **pendingX** (`number`) - Required - X coordinate to snap
- **pendingY** (`number`) - Required - Y coordinate to snap
- **scale** (`number`) - Optional - Scale factor for scaling calculations. Defaults to `1`.

### Request Example
```javascript
import { snapToGrid } from './utils/fns'

const [snappedX, snappedY] = snapToGrid([20, 20], 45, 67, 1)
```

### Response
#### Success Response
- **Returns**: `[number, number]` - Snapped X and Y coordinates

### Response Example
```javascript
// 20px grid, no scaling
snapToGrid([20, 20], 45, 67)      // [40, 60]
snapToGrid([20, 20], 89, 135)     // [100, 140]

// 10px grid with 2x scale
snapToGrid([10, 10], 25, 35, 2)   // [10, 40]

// Non-uniform grid
snapToGrid([15, 25], 48, 76)      // [45, 75]
```
```

--------------------------------

### created

Source: https://github.com/gausszhou/vue3-drag-resize-rotate/blob/master/_autodocs/api-reference/vue-drag-resize-rotate.md

Initializes the internal state of the component and validates prop combinations. It also initializes corner coordinate objects and warns to the console if constraints are invalid.

```APIDOC
## `created()`

### Description
Initializes internal state and validates prop combinations. Validates minWidth ≤ maxWidth and minHeight ≤ maxHeight. Warns to console if constraints are invalid.

### Side Effects
- Initializes corner coordinate objects (TL, TR, BL, BR) and Center
- Validates minWidth ≤ maxWidth and minHeight ≤ maxHeight
- Warns to console if constraints are invalid
```

--------------------------------

### Basic Component Usage

Source: https://github.com/gausszhou/vue3-drag-resize-rotate/blob/master/public/markdown/basic/basic-basic-component.md

Demonstrates the fundamental implementation of the VueDragResizeRotate component. Use this for elements that need to be freely moved and resized within a parent container.

```html
<template>
  <div class="view-box">
    <div id="toolbar">基本组件</div>
    <div class="container">
      <VueDragResizeRotate :x="0" :y="0" :w="200" :h="200">
        <p>你可以拖着我，按照自己的意愿调整大小。1</p>
      </VueDragResizeRotate>
      <VueDragResizeRotate :x="200" :y="200" :w="200" :h="200">
        <p>你可以拖着我，按照自己的意愿调整大小。2</p>
      </VueDragResizeRotate>
    </div>
  </div>
</template>
```

--------------------------------

### snapCheck()

Source: https://github.com/gausszhou/vue3-drag-resize-rotate/blob/master/_autodocs/api-reference/vue-drag-resize-rotate.md

Performs alignment checks against other elements and container borders when snapping is enabled. It aligns the element to nearby elements based on `snapTolerance` and emits `refLineParams` with alignment guide line coordinates.

```APIDOC
## snapCheck()

### Description
Performs alignment checks against other elements and container borders when snapping is enabled.

### Parameters
None

### Returns
`Promise<void>`

### Details
Aligns the element to nearby elements based on `snapTolerance`. Supports single and multi-element alignment. Detects 12 alignment scenarios. Emits `refLineParams` with alignment guide line coordinates.
```

--------------------------------

### Call settingAttribute Instance Method

Source: https://github.com/gausszhou/vue3-drag-resize-rotate/blob/master/_autodocs/api-reference/vue-drag-resize-rotate.md

This method configures data attributes for conflict detection and snapping. It is called automatically on component mount.

```javascript
component.settingAttribute()
```

--------------------------------

### Snap coordinates to a grid

Source: https://github.com/gausszhou/vue3-drag-resize-rotate/blob/master/_autodocs/utilities.md

Utilize `snapToGrid` to align coordinates with a specified grid spacing, with an option to apply scaling. This is helpful for precise element placement.

```javascript
import { snapToGrid } from './utils/fns'

const [snappedX, snappedY] = snapToGrid([20, 20], 45, 67, 1)
```

```javascript
// 20px grid, no scaling
snapToGrid([20, 20], 45, 67)      // [40, 60]
snapToGrid([20, 20], 89, 135)     // [100, 140]

// 10px grid with 2x scale
snapToGrid([10, 10], 25, 35, 2)   // [10, 40]

// Non-uniform grid
snapToGrid([15, 25], 48, 76)      // [45, 75]
```

--------------------------------

### Get Mouse Coordinates

Source: https://github.com/gausszhou/vue3-drag-resize-rotate/blob/master/_autodocs/api-reference/vue-drag-resize-rotate.md

Extracts page coordinates from a mouse or touch event. For touch events, it uses changedTouches[0]; for mouse events, it uses pageX/pageY or falls back to clientX/clientY with scroll offset.

```javascript
const { x, y } = component.getMouseCoordinate(event)
```

--------------------------------

### Grid Snapping Calculation

Source: https://github.com/gausszhou/vue3-drag-resize-rotate/blob/master/_autodocs/index.md

Demonstrates how to use the snapToGrid function to align coordinates to a specified grid. This is useful for ensuring elements align with a grid system during drag or resize operations.

```javascript
snapToGrid([20, 20], 45, 67)
// 45 / 20 = 2.25 → round to 2 → 2 * 20 = 40
// 67 / 20 = 3.35 → round to 3 → 3 * 20 = 60
// Result: [40, 60]
```

--------------------------------

### Basic Component Usage

Source: https://github.com/gausszhou/vue3-drag-resize-rotate/blob/master/_autodocs/quick-reference.md

Render the component in your template with basic configuration for width, height, position, and interaction. Content is placed inside the component tags.

```vue
<template>
  <VueDragResizeRotate
    :w="200"
    :h="200"
    :x="0"
    :y="0"
    :draggable="true"
    :resizable="true"
    :rotatable="false"
  >
    Content here
  </VueDragResizeRotate>
</template>
```

--------------------------------

### Handling Rotation Events

Source: https://github.com/gausszhou/vue3-drag-resize-rotate/blob/master/public/markdown/events/events-rotating.md

Use the `rotating` event to get real-time rotation degrees while the user is rotating the element. The `rotatestop` event is triggered when the rotation action ends, providing the final rotation degree. Ensure `rotatable` is set to `true` on the component.

```html
<template>
  <div class="view-box">
    <div id="toolbar">调整旋转角度触发事件rotating和rotatestop</div>
    <div class="container">
      <VueDragResizeRotate
        :w="200"
        :h="200"
        :x="0"
        :y="0"
        :rotatable="true"
        @rotating="onRotating"
        @rotatestop="onRotateStop"
      >
        <p>
          {{ rotating ? "你正在旋转" : "这个角度刚刚好" }}
          <br />
          Rotate: {{ rotate }}
        </p>
      </VueDragResizeRotate>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      rotating: false,
      x: 0,
      y: 0,
      width: 200,
      height: 200,
      rotate: 0
    };
  },
  methods: {
    onRotating: function (degree) {
      this.resizing = true;
      this.rotate = degree;
    },
    onRotateStop: function (degree) {
      this.resizing = false;
      this.rotate = degree;
    }
  }
};
</script>
```

--------------------------------

### calcResizeLimits()

Source: https://github.com/gausszhou/vue3-drag-resize-rotate/blob/master/_autodocs/api-reference/vue-drag-resize-rotate.md

Computes the size boundaries for resize operations, respecting min/max dimensions, aspect ratio, grid constraints, and parent boundaries. Returns an object with min/max values for left, right, top, and bottom.

```APIDOC
## calcResizeLimits()

### Description
Computes size boundaries for resize operations. Respects `minWidth`, `maxWidth`, `minHeight`, `maxHeight`, and grid constraints. When `parent` is enabled, restricts element to remain within parent bounds. Accounts for aspect ratio locking when applicable.

### Method
`calcResizeLimits(): {
  minLeft: number | null,
  maxLeft: number | null,
  minTop: number | null,
  maxTop: number | null,
  minRight: number | null,
  maxRight: number | null,
  minBottom: number | null,
  maxBottom: number | null
}`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```javascript
const limits = component.calcResizeLimits()
```

### Response
#### Success Response (200)
An object containing the minimum and maximum values for left, right, top, and bottom boundaries during resize operations.

#### Response Example
```json
{
  "minLeft": 10,
  "maxLeft": 400,
  "minTop": 10,
  "maxTop": 200,
  "minRight": 10,
  "maxRight": 400,
  "minBottom": 10,
  "maxBottom": 200
}
```
```

--------------------------------

### Import and Use in Vue App

Source: https://github.com/gausszhou/vue3-drag-resize-rotate/blob/master/_autodocs/quick-reference.md

Import the component and its CSS, then register it with your Vue application instance. Ensure the CSS is imported for proper styling.

```javascript
import { createApp } from "vue";
import VueDragResizeRotate from "@gausszhou/vue3-drag-resize-rotate";
import "@gausszhou/vue3-drag-resize-rotate/lib/bundle.esm.css";

const app = createApp(App);
app.use(VueDragResizeRotate);
app.mount("#app");
```

--------------------------------

### Custom Handle Slots

Source: https://github.com/gausszhou/vue3-drag-resize-rotate/blob/master/_autodocs/slots-and-styling.md

Illustrates how to use named slots to replace default resize and rotate handles with custom content.

```vue
<VueDragResizeRotate>
  <!-- Content -->
  <div>Resizable content</div>
  
  <!-- Custom handles -->
  <template #tl>
    <!-- Custom top-left handle -->
  </template>
  
  <template #rot>
    <!-- Custom rotation handle -->
  </template>
</VueDragResizeRotate>
```

--------------------------------

### actualHandles

Source: https://github.com/gausszhou/vue3-drag-resize-rotate/blob/master/_autodocs/api-reference/vue-drag-resize-rotate.md

Returns an array of visible handles based on the resizable and rotatable state of the component.

```APIDOC
## `actualHandles`

### Description
Returns an array of visible handles based on the resizable and rotatable state of the component.

### Returns
* `string[]` - Array of handle names: `tl`, `tm`, `tr`, `mr`, `br`, `bm`, `bl`, `ml`, `rot`
```

--------------------------------

### Real-Time Synchronization with Server

Source: https://github.com/gausszhou/vue3-drag-resize-rotate/blob/master/_autodocs/events.md

Sends updated element position and size to a server in real-time using fetch API. This is typically called after drag or resize operations are completed.

```javascript
methods: {
  async onDragStop(left, top) {
    await fetch('/api/element/position', {
      method: 'POST',
      body: JSON.stringify({ left, top })
    });
  },
  async onResizeStop(left, top, width, height) {
    await fetch('/api/element/size', {
      method: 'POST',
      body: JSON.stringify({ left, top, width, height })
    });
  }
}
```

--------------------------------

### Full Component Configuration Object

Source: https://github.com/gausszhou/vue3-drag-resize-rotate/blob/master/_autodocs/configuration.md

This object defines all available properties for configuring the component's behavior, including position, size, features, constraints, grid snapping, parent limitations, styling, handles, drag restrictions, and callbacks.

```javascript
{
  // Position & Size
  x: 100,
  y: 100,
  w: 300,
  h: 200,
  z: 10,
  r: 45,
  
  // Features
  draggable: true,
  resizable: true,
  rotatable: true,
  active: false,
  
  // Constraints
  minWidth: 100,
  minHeight: 100,
  maxWidth: 600,
  maxHeight: 400,
  lockAspectRatio: true,
  
  // Grid & Snapping
  grid: [10, 10],
  axis: 'both',
  snap: true,
  snapBorder: true,
  snapTolerance: 5,
  
  // Parent & Collision
  parent: true,
  isConflictCheck: true,
  
  // Styling
  className: 'vue-drag-resize-rotate',
  classNameActive: 'active',
  disableUserSelect: true,
  
  // Handles
  handles: ['tl', 'tr', 'bl', 'br', 'rot'],
  handleInfo: {
    size: 10,
    offset: -5,
    switch: true
  },
  
  // Drag Restrictions
  dragHandle: '.header',
  dragCancel: '.btn-close',
  
  // Callbacks
  onDragStart: (event) => {
    console.log('Drag started');
    return true;
  },
  onDrag: (left, top) => {
    console.log(`Position: ${left}, ${top}`);
    return true;
  }
}
```

--------------------------------

### VueDragResizeRotate Component Directory Structure

Source: https://github.com/gausszhou/vue3-drag-resize-rotate/blob/master/_autodocs/index.md

Overview of the source code directory structure for the VueDragResizeRotate component, highlighting the entry point, component files, and utility modules.

```bash
src/
├── index.js                              # Entry point, exports VueDragResizeRotate
├── components/
│   └── vue-drag-resize-rotate/
│       ├── index.vue                     # Main component (1500+ lines)
│       └── utils/
│           ├── fns.js                    # Math utilities
│           ├── dom.js                    # DOM utilities
│           └── gogocodeTransfer.js       # Event utilities
└── views/
    └── [Example implementations]
```

--------------------------------

### Multiple Elements with Snap to Borders

Source: https://github.com/gausszhou/vue3-drag-resize-rotate/blob/master/_autodocs/quick-reference.md

Render multiple resizable elements that snap to each other and their parent container. Ensure `snap` and `snapBorder` are enabled, and `parent` is set to `true`.

```vue
<div v-for="el in elements" :key="el.id">
  <VueDragResizeRotate
    :snap="true"
    :snapBorder="true"
    :parent="true"
    :x="el.x"
    :y="el.y"
  />
</div>
```

--------------------------------

### $on(instance, event, fn)

Source: https://github.com/gausszhou/vue3-drag-resize-rotate/blob/master/_autodocs/utilities.md

Registers an event listener on a component instance. This is useful for custom event management, especially during Vue 2 to Vue 3 migrations.

```APIDOC
## $on(instance, event, fn)

### Description
Registers an event listener on a component instance. This is useful for custom event management, especially during Vue 2 to Vue 3 migrations.

### Parameters
#### Path Parameters
- **instance** (`object`) - Component instance
- **event** (`string | string[]`) - Event name or array of event names
- **fn** (`function`) - Callback function

### Returns
- **instance** - Returns the instance for chaining

### Example
```javascript
// Single event
$on(component, 'myEvent', (data) => {
  console.log(data);
});

// Multiple events
$on(component, ['event1', 'event2'], (data) => {
  console.log(data);
});
```
```

--------------------------------

### $emit(instance, event, ...args)

Source: https://github.com/gausszhou/vue3-drag-resize-rotate/blob/master/_autodocs/utilities.md

Emits events on a component instance, supporting both Vue's built-in `$emit` and a custom event registry for broader compatibility.

```APIDOC
## $emit(instance, event, ...args)

### Description
Emits events on component instance. Emits event via both Vue's `$emit` (if available) and custom event registry. This ensures compatibility with both Vue 3 emits and custom event listeners registered via `$on`.

### Method
N/A (Function Call)

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

### Request Example
```javascript
import { $emit } from './utils/gogocodeTransfer'

$emit(this, 'my-event', value1, value2)
```

### Response
#### Success Response (200)
N/A (Function Return)

#### Response Example
```javascript
// Returns the instance for chaining
instance
```
```

--------------------------------

### move

Source: https://github.com/gausszhou/vue3-drag-resize-rotate/blob/master/_autodocs/api-reference/vue-drag-resize-rotate.md

Routes move events to the appropriate handler (resize, drag, or rotate) based on the current component state.

```APIDOC
## `move(event)`

### Description
Routes move events to appropriate handler based on current state. Dispatches to `handleResize()`, `handleDrag()`, or `handleRotate()` based on state flags.

### Parameters
* **event** (`MouseEvent | TouchEvent`) - Required - The event object

### Returns
* `void`
```

--------------------------------

### Call correctSize Instance Method

Source: https://github.com/gausszhou/vue3-drag-resize-rotate/blob/master/_autodocs/api-reference/vue-drag-resize-rotate.md

Enforces minimum and maximum size constraints on the component's width and height. Emits the 'resizestop' event after correction.

```javascript
component.correctSize()
```