### Development Server Setup

Source: https://github.com/daybrush/moveable/blob/master/packages/ngx-moveable/projects/ngx-moveable/README.md

Run the development server using `npm run start` for a local preview. The app reloads automatically on source file changes.

```bash
npm run start(ng serve)
```

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

### Install Dependencies and Run Storybook

Source: https://github.com/daybrush/moveable/blob/master/packages/moveable/README.md

Installs project dependencies, bootstraps the monorepo, and starts the Storybook development server. Open http://localhost:6006 to view the app.

```bash
$ yarn install
$ npm run bootstrap
$ npm run storybook
```

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

### Install Dependencies and Run Storybook

Source: https://github.com/daybrush/moveable/blob/master/README.md

Installs project dependencies, builds packages, and starts the Storybook development server. Open http://localhost:6006 to view the components.

```sh
yarn
npm run packages:build
npm run storybook
```

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

### Basic Groupable Setup with Dragging

Source: https://github.com/daybrush/moveable/blob/master/packages/react-moveable/groupable.md

Demonstrates how to initialize Moveable with multiple targets and enable group dragging. It includes event handlers for drag start, during, and end.

```tsx
import Moveable from "react-moveable";

render() {
    return (
        <Moveable
            /* multiple targets */
            target={[].slice.call(document.querySelectorAll(".target"))}
            container={null}
            origin={true}

            /* Resize event edges */
            edge={false}

            /* draggable */
            draggable={true}
            throttleDrag={0}
            onDragGroupStart={({ targets }) => {
                console.log("onDragGroupStart", targets);
            }}
            onDragGroup={({ targets, events }) => {
                console.log("onDragGroup", targets);

                events.forEach(ev => {
                    // drag event
                    console.log("onDrag left, top", ev.left, ev.top);
                    // ev.target!.style.left = `${ev.left}px`;
                    // ev.target!.style.top = `${ev.top}px`;
                    console.log("onDrag translate", ev.dist);
                    ev.target!.style.transform = ev.transform;
                });
            }}
            onDragGroupEnd={({ targets, isDrag, clientX, clientY }) => {
                console.log("onDragGroupEnd", target, isDrag);
            }}

            /* When resize or scale, keeps a ratio of the width, height. */
            keepRatio={true}

            /* resizable*/
            /* Only one of resizable, scalable, warpable can be used. */
            resizable={true}
            throttleResize={0}
            onResizeGroupStart={({ targets, clientX, clientY }) => {
                console.log("onResizeGroupStart", targets);
            }}
            onResizeGroup={({ events, targets, direction }) => {
                console.log("onResizeGroup", targets);

                events.forEach(ev => {
                    const offset = [
                        direction[0] < 0 ? -ev.delta[0] : 0,
                        direction[1] < 0 ? -ev.delta[1] : 0,
                    ];
                    // ev.drag is a drag event that occurs when the group resize.
                    const left = offset[0] + ev.drag.beforeDist[0];
                    const top = offset[1] + ev.drag.beforeDist[1];
                    const width = ev.width;
                    const top = ev.top;
                });
            }}
            onResizeGroupEnd={({ targets, isDrag, clientX, clientY }) => {
                console.log("onResizeGroupEnd", targets, isDrag);
            }}

            /* scalable */
            /* Only one of resizable, scalable, warpable can be used. */
            scalable={true}
            throttleScale={0}
            onScaleGroupStart={({ targets, clientX, clientY }) => {
                console.log("onScaleGroupStart", targets);
            }}
            onScale={({
                targets,
                events,
            }) => {
                console.log("onScaleGroup", targets);


```

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

### Install Lit-Moveable

Source: https://github.com/daybrush/moveable/blob/master/packages/lit-moveable/README.md

Install the lit-moveable package using npm.

```bash
$ npm install lit-moveable
```

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

### Install React Moveable

Source: https://github.com/daybrush/moveable/blob/master/packages/react-moveable/README.md

Install the react-moveable package using npm.

```sh
$ npm i react-moveable
```

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

### Install Preact Moveable

Source: https://github.com/daybrush/moveable/blob/master/packages/preact-moveable/README.md

Install the preact-moveable package using npm.

```sh
$ npm i preact-moveable
```

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

### Install ngx-moveable

Source: https://github.com/daybrush/moveable/blob/master/packages/ngx-moveable/projects/ngx-moveable/README.md

Install the ngx-moveable package using npm.

```sh
#!/bin/bash
$ npm i ngx-moveable
```

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

### Install Svelte Moveable

Source: https://github.com/daybrush/moveable/blob/master/packages/svelte-moveable/README.md

Install the svelte-moveable package using npm.

```sh
#!/bin/sh
$ npm i svelte-moveable
```

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

### Install Vue Moveable

Source: https://github.com/daybrush/moveable/blob/master/packages/vue-moveable/README.md

Install Vue Moveable using npm or yarn.

```bash
npm install vue-moveable
# or
yarn add vue-moveable
```

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

### Install Moveable via npm

Source: https://github.com/daybrush/moveable/blob/master/README.md

Install the Moveable library using npm. This is the recommended method for Node.js projects.

```sh
$ npm i moveable
```

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

### Svelte Moveable Basic Setup

Source: https://github.com/daybrush/moveable/blob/master/packages/svelte-moveable/README.md

Basic setup for Svelte Moveable component. Imports the component and binds a target element.

```html
<script>
    import Moveable from "svelte-moveable";
    let target;
</script>
```

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

### Install Vue 2 Moveable

Source: https://github.com/daybrush/moveable/blob/master/packages/vue3-moveable/README.md

Install the vue-moveable@beta package using npm for Vue 2 projects.

```sh
$ npm i vue-moveable@beta
```

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

### Moveable CSS Configuration Example

Source: https://github.com/daybrush/moveable/blob/master/packages/moveable/test/manual/css.html

This snippet demonstrates the initialization of a Moveable component with various CSS-related configurations. It includes settings for target selection, styling, snapping, and origin.

```css
.target1, .target2 {
  position: relative;
  width: 200px;
  height: 200px;
  top: 100px;
  background: #f55;
  border: 1px solid #333;
}

.moveable-control-box .moveable-rotation .moveable-rotation-control {
  border-radius: 0;
  background: #f55;
  border: 0;
}
```

```javascript
let hasInteracted = false;
let isActive = true;
const editor = document.body;
let moveable;

moveable = new Moveable(editor, {
  target: ".target",
  className: "moveable",
  // If the container is null, the position is fixed. (default: parentElement(document.body))
  container: editor,
  draggable: true,
  resizable: true,
  scalable: false,
  rotatable: true,
  isDisplaySnapDigit: false,
  elementGuidelines: [document.body],
  snappable: true,
  snapThreshold: 5,
  snapGap: false,
  snapDirections: {
    top: true,
    right: true,
    bottom: true,
    left: true,
    center: true,
    middle: true,
  },
  elementSnapDirections: {
    top: true,
    right: true,
    bottom: true,
    left: true,
    center: true,
    middle: true,
  },
  // Enabling pinchable lets you use events that
  // can be used in draggable, resizable, scalable, and rotateable.
  pinchable: false,
  // ["resizable", "scalable", "rotatable"]
  origin: false,
  keepRatio: true,
  // Resize, Scale Events at edges.
  // edge: true,
  throttleDrag: 0,
  throttleResize: 0,
  throttleRotate: 0,
  padding: {
    left: 0,
    top: 0,
    right: 0,
    bottom: 0,
  },
});
```

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

### Svelte: Change Target on Drag Start

Source: https://github.com/daybrush/moveable/blob/master/handbook/handbook.md

Provides an example of changing the target of the Moveable component in a Svelte application. Similar to other frameworks, it updates the target and then calls `dragStart`.

```html
<script>
    import Moveable from "svelte-moveable";
    import { onMount } from "svelte";

    let moveable;
    let target;

    function onMouseDown(e) {
        target = e.target;

        setTimeout(() => {
            moveable.dragStart(e);
        });
    }
</script>
```jsx
<div class="target" on:mousedown={onMouseDown}>Target1</div>
<div class="target" on:mousedown={onMouseDown}>Target2</div>
<div class="target" on:mousedown={onMouseDown}>Target3</div>
<Moveable
    bind:this={moveable}
    target={target}
    />
```

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

### Handle Drag Start Event

Source: https://github.com/daybrush/moveable/blob/master/packages/moveable/test/manual/custom/changeTarget.html

Logs a message to the console when the drag operation starts on the Moveable instance. This is a basic event listener for drag initiation.

```javascript
moveableDemo.on('dragStart', (e) => {
  console.log('dragStart');
});
```

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

### Install Vue 3 Moveable

Source: https://github.com/daybrush/moveable/blob/master/packages/vue3-moveable/README.md

Install the vue3-moveable package using npm for Vue 3 projects.

```sh
$ npm i vue3-moveable
```

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

### Custom Able Implementation and Usage

Source: https://github.com/daybrush/moveable/blob/master/packages/react-moveable/src/ables/README.md

Demonstrates how to create a custom able with specific props and render custom elements. This example shows how to integrate a custom able into a Moveable component.

```typescript
import Moveable, { MoveableManagerInterface, Renderer } from "react-moveable";

interface CustomAbleProps {
    customAble: boolean;
    prop1: number;
}
const CustomAble = {
    name: "customAble",
    props: [
        "customAble",
        "prop1",
    ],
    events: [],
    render(moveable: MoveableManagerInterface<CustomAbleProps>, React: Renderer) {
        const CustomElement = React.useCSS("div", `
        {
            position: absolute;
        }
        `);
        console.log(moveable.props.prop1);

        // Add key (required)
        // Add class prefix moveable-(required)
        return <CustomElement key="custom-element" className="moveable-custom">
        </CustomElement>;
    },
}

<Moveable
    ables={[CustomAble]}
    props={{
        customAble: true,
        prop1: 3,
    }}
    />
```

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

### Basic Preact Moveable Usage

Source: https://github.com/daybrush/moveable/blob/master/packages/preact-moveable/README.md

Demonstrates the basic setup and usage of the Moveable component in Preact. Includes configuration for dragging, resizing, scaling, rotating, and warping.

```tsx
import Moveable from "preact-moveable";

render() {
    return (
        <Moveable
            target={document.querySelector(".target")}
            container={null}
            origin={true}

            /* Resize, Scale event edges */
            edge={false}

            /* draggable */
            draggable={true}
            throttleDrag={0}
            onDragStart={({ target, clientX, clientY }) => {
                console.log("onDragStart", target);
            }}
            onDrag={({
                target,
                beforeDelta, beforeDist,
                left, top,
                right, bottom,
                delta, dist,
                transform,
                clientX, clientY,
            }: OnDrag) => {
                console.log("onDrag left, top", left, top);
                // target!.style.left = `${left}px`;
                // target!.style.top = `${top}px`;
                console.log("onDrag translate", dist);
                target!.style.transform = transform;
            }}
            onDragEnd={({ target, isDrag, clientX, clientY }) => {
                console.log("onDragEnd", target, isDrag);
            }}

            /* When resize or scale, keeps a ratio of the width, height. */
            keepRatio={true}

            /* resizable*/
            /* Only one of resizable, scalable, warpable can be used. */
            resizable={true}
            throttleResize={0}
            onResizeStart={({ target , clientX, clientY}) => {
                console.log("onResizeStart", target);
            }}
            onResize={({
                target, width, height,
                dist, delta,
                clientX, clientY,
            }: OnResize) => {
                console.log("onResize", target);
                delta[0] && (target!.style.width = `${width}px`);
                delta[1] && (target!.style.height = `${height}px`);
            }}
            onResizeEnd={({ target, isDrag, clientX, clientY }) => {
                console.log("onResizeEnd", target, isDrag);
            }}

            /* scalable */
            /* Only one of resizable, scalable, warpable can be used. */
            scalable={true}
            throttleScale={0}
            onScaleStart={({ target, clientX, clientY }) => {
                console.log("onScaleStart", target);
            }}
            onScale={({
                target, scale, dist, delta, transform,
                clientX, clientY,
            }: OnScale) => {
                console.log("onScale scale", scale);
                target!.style.transform = transform;
            }}
            onScaleEnd={({ target, isDrag, clientX, clientY }) => {
                console.log("onScaleEnd", target, isDrag);
            }}

            /* rotatable */
            rotatable={true}
            throttleRotate={0}
            onRotateStart={({ target, clientX, clientY }) => {
                console.log("onRotateStart", target);
            }}
            onRotate={({
                target,
                delta, dist,
                transform,
                clientX, clientY,
            }: onRotate) => {
                console.log("onRotate", dist);
                target!.style.transform = transform;
            }}
            onRotateEnd={({ target, isDrag, clientX, clientY }) => {
                console.log("onRotateEnd", target, isDrag);
            }}

            /* warpable */
            /* Only one of resizable, scalable, warpable can be used. */
            /*
            this.matrix = [
                1, 0, 0, 0,
                0, 1, 0, 0,
                0, 0, 1, 0,
                0, 0, 0, 1,
            ]
            */
            warpable={true}
            onWarpStart={({ target, clientX, clientY }) => {
                console.log("onWarpStart", target);
            }}
            onWarp={({
                target,
                clientX,
                clientY,
                delta,
                dist,
                multiply,
                transform,
            }) => {
                console.log("onWarp", target);
                // target.style.transform = transform;
                this.matrix = multiply(this.matrix, delta);
                target.style.transform = `matrix3d(${this.matrix.join(",")})`;
            }}
            onWarpEnd={({ target, isDrag, clientX, clientY }) => {
                console.log("onWarpEnd", target, isDrag);
            }}

        />
    )
}
```

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

### Scale Event Handler Before Migration

Source: https://github.com/daybrush/moveable/wiki/Migration-0.X-to-1.0

Example of the `onScaleStart` and `onScale` event handlers before migrating to version 1.0. Note the use of `e.set` and `e.dragStart.set`.

```tsx
<Moveable
    target={target}
    draggable={true}
    scalable={true}
    onScaleStart={e => {
        e.set([2, 2]);
        e.dragStart && e.dragStart.set([10, 10]);
    }}
    onScale={e => {
        const scale = e.scale;
        const translate = e.drag.beforeTranslate;

        // The order is unconditionally fixed. translate > rotate > scale only
        e.target.style.transform = `translate(${translate[0]}px, ${translate[1]}px) scale(${scale[0]}, ${scale[1]})`;
    }}
    onDragStart={e => {
       e.set([10, 10]);
    }}
    onDrag={e => {
        const translate = e.beforeTranslate;
        e.target.style.transform = `translate(${translate[0]}px, ${translate[1]}px)`;
    }}
></Moveable>
```

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

### Basic React Moveable Usage

Source: https://github.com/daybrush/moveable/blob/master/packages/react-moveable/README.md

Demonstrates the basic setup and event handling for Moveable in a React component. Includes configurations for dragging, resizing, scaling, and rotating elements, along with pinch gestures.

```tsx
import Moveable from "react-moveable";

render() {
    return (
        <Moveable
            target={document.querySelector(".target")}
            container={null}
            origin={true}

            /* Resize event edges */
            edge={false}

            /* draggable */
            draggable={true}
            throttleDrag={0}
            onDragStart={({ target, clientX, clientY }) => {
                console.log("onDragStart", target);
            }}
            onDrag={({
                target,
                beforeDelta, beforeDist,
                left, top,
                right, bottom,
                delta, dist,
                transform,
                clientX, clientY,
            }: OnDrag) => {
                console.log("onDrag left, top", left, top);
                // target!.style.left = `${left}px`;
                // target!.style.top = `${top}px`;
                console.log("onDrag translate", dist);
                target!.style.transform = transform;
            }}
            onDragEnd={({ target, isDrag, clientX, clientY }) => {
                console.log("onDragEnd", target, isDrag);
            }}

            /* When resize or scale, keeps a ratio of the width, height. */
            keepRatio={true}

            /* resizable*/
            /* Only one of resizable, scalable, warpable can be used. */
            resizable={true}
            throttleResize={0}
            onResizeStart={({ target , clientX, clientY}) => {
                console.log("onResizeStart", target);
            }}
            onResize={({
                target, width, height,
                dist, delta, direction,
                clientX, clientY,
            }: OnResize) => {
                console.log("onResize", target);
                delta[0] && (target!.style.width = `${width}px`);
                delta[1] && (target!.style.height = `${height}px`);
            }}
            onResizeEnd={({ target, isDrag, clientX, clientY }) => {
                console.log("onResizeEnd", target, isDrag);
            }}

            /* scalable */
            /* Only one of resizable, scalable, warpable can be used. */
            scalable={true}
            throttleScale={0}
            onScaleStart={({ target, clientX, clientY }) => {
                console.log("onScaleStart", target);
            }}
            onScale={({
                target, scale, dist, delta, transform,
                clientX, clientY,
            }: OnScale) => {
                console.log("onScale scale", scale);
                target!.style.transform = transform;
            }}
            onScaleEnd={({ target, isDrag, clientX, clientY }) => {
                console.log("onScaleEnd", target, isDrag);
            }}

            /* rotatable */
            rotatable={true}
            throttleRotate={0}
            onRotateStart={({ target, clientX, clientY }) => {
                console.log("onRotateStart", target);
            }}
            onRotate={({
                target,
                delta, dist,
                transform,
                clientX, clientY,
            }: onRotate) => {
                console.log("onRotate", dist);
                target!.style.transform = transform;
            }}
            onRotateEnd={({ target, isDrag, clientX, clientY }) => {
                console.log("onRotateEnd", target, isDrag);
            }}
            // Enabling pinchable lets you use events that
            // can be used in draggable, resizable, scalable, and rotateable.
            pinchable={true}
            onPinchStart={({ target, clientX, clientY, datas }) => {
                // pinchStart event occur before dragStart, rotateStart, scaleStart, resizeStart
                console.log("onPinchStart");
            }}
            onPinch={({ target, clientX, clientY, datas }) => {
                // pinch event occur before drag, rotate, scale, resize
                console.log("onPinch");
            }}
            onPinchEnd={({ isDrag, target, clientX, clientY, datas }) => {
                // pinchEnd event occur before dragEnd, rotateEnd, scaleEnd, resizeEnd
                console.log("onPinchEnd");
            }}
        />
    );
}

```

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

### JavaScript Drag Start Handler

Source: https://github.com/daybrush/moveable/blob/master/packages/moveable/test/manual/dragapi.html

Handles the start of a drag operation. It creates a new element, sets a custom drag image, and initializes Moveable for the new element.

```javascript
let moveableRef = null;
let newDiv;
let entered = false;

function dragstart(e) {
    const newContent = document.createTextNode(e.target.innerHTML);
    const container = document.querySelector('#container-left');
    let img = new Image();
    img.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=';
    e.dataTransfer.setDragImage(img, 0, 0);

    newDiv = document.createElement("div");
    newDiv.appendChild(newContent);
    newDiv.classList.add('item');

    const rect = e.target.getBoundingClientRect();
    dx = e.clientX - e.target.getBoundingClientRect().left;
    dy = e.clientY - e.target.getBoundingClientRect().top;

    newDiv.style.left = `${rect.left}px`;
    newDiv.style.top = `${rect.top}px`;
    newDiv.style.position = 'absolute';
    newDiv.style.pointerEvents = "none";

    container.appendChild(newDiv);

    moveableRef.setState({
        target: newDiv,
        hideDefaultLines: true,
        resizable: false,
        origin: false,
    }, () => {
        moveableRef.dragStart(e);
    });
}
```

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

### Show Partial Control Box with Directions

Source: https://github.com/daybrush/moveable/blob/master/handbook/handbook.md

Specify which directions the control box should render for Moveable. This example shows how to set initial directions and then update them.

```typescript
import Moveable from "moveable";

const moveable = new Moveable(document.body, {
    renderDirections: ["n", "nw", "ne", "s", "se", "sw", "e", "w"],
});

moveable.renderDirections = ["nw", "ne", "sw", "se"];
```

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

### All-in-one Event Handler After Migration

Source: https://github.com/daybrush/moveable/wiki/Migration-0.X-to-1.0

Example using the `onRender` event handler after migrating to version 1.0, which consolidates drag, scale, and rotate transformations into `e.transform`.

```tsx
<Moveable
    target={target}
    draggable={true}
    scalable={true}
    onRender={e => {
        e.target.style.transform = e.transform;
    }}
></Moveable>
```

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

### Initialize Moveable with Custom Options

Source: https://github.com/daybrush/moveable/blob/master/packages/moveable/test/manual/custom/changeTarget.html

Initializes a Moveable instance with various configuration options including snapping, dragging, resizing, and bounds. This setup is suitable for complex drag-and-drop interfaces.

```javascript
var moveableDemo = new Moveable(document.body, {
  target: null,
  snapThreshold: 5,
  draggable: true,
  resizable: false,
  keepRatio: false,
  throttleDrag: 0,
  throttleResize: 0,
  startDragRotate: 0,
  throttleDragRotate: 0,
  zoom: 1,
  origin: true,
  bounds: {
    left: 0,
    right: 700,
    top: 0,
    bottom: 520
  },
  padding: {
    left: 0,
    top: 0,
    right: 0,
    bottom: 0
  },
  elementGuidelines: [],
  snapGap: true,
  snapDirections: {
    left: true,
    top: true,
    right: true,
    bottom: true
  },
  elementSnapDirections: {
    left: true,
    top: true,
    right: true,
    bottom: true
  },
});
```

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

### Preact Moveable Pinch Events

Source: https://github.com/daybrush/moveable/blob/master/packages/preact-moveable/README.md

Enables pinch gestures for draggable, resizable, scalable, and rotatable functionalities. Includes examples for pinchStart, pinch, and pinchEnd events.

```javascript
pinchable={true}
onPinchStart={({ target, clientX, clientY, datas }) => {
    // pinchStart event occur before dragStart, rotateStart, scaleStart, resizeStart
    console.log("onPinchStart");
}}
onPinch={({ target, clientX, clientY, datas }) => {
    // pinch event occur before drag, rotate, scale, resize
    console.log("onPinch");
}}
onPinchEnd={({ isDrag, target, clientX, clientY, datas }) => {
    // pinchEnd event occur before dragEnd, rotateEnd, scaleEnd, resizeEnd
    console.log("onPinchEnd");
}}
```

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

### Vanilla JS: Change Target on Drag Start

Source: https://github.com/daybrush/moveable/blob/master/handbook/handbook.md

Demonstrates how to dynamically change the target of the Moveable component using Vanilla JavaScript when a mousedown event occurs.

```javascript
import Moveable from "moveable";


const moveable = new Moveable(document.body, {
    target: document.querySelector(".target1")
});

window.addEventListener("mousedown", e => {
    moveable.setState({
        target: e.target,
    }, () => {
        moveable.dragStart(e);
    });
});
```

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

### Scale and Drag Event Handlers After Migration (Separate)

Source: https://github.com/daybrush/moveable/wiki/Migration-0.X-to-1.0

Example of `onDrag` and `onScale` event handlers after migrating to version 1.0. The `e.transform` property is now used directly.

```tsx
<Moveable
    target={target}
    draggable={true}
    scalable={true}
    onDrag={e => {
        e.target.style.transform = e.transform;
    }}
    onScale={e => {
        e.target.style.transform = e.drag.transform;
    }}
></Moveable>
```

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

### Initialize Moveable with Target and Portal

Source: https://github.com/daybrush/moveable/blob/master/test/portal.html

Initializes the Moveable component with dragging enabled, specifying a target element and a portal container. Includes event handlers for drag start and drag events.

```javascript
const moveable = new Moveable(document.querySelector(".moveable"), {
  draggable: true,
  target: document.querySelector(".target"),
  portalContainer: document.querySelector(".moveable")
}).on("dragStart", e => {
  // if (e.inputEvent && e.inputEvent.target.class === "test") e.stop();
}).on("drag", e => {
  console.log(e.transform);
  e.target.style.transform = e.transform;
});
```

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

### Svelte Moveable Component with All Features

Source: https://github.com/daybrush/moveable/blob/master/packages/svelte-moveable/README.md

A comprehensive example of the Svelte Moveable component configured with all possible features and event handlers. This includes draggable, resizable, scalable, rotatable, warpable, and pinchable functionalities.

```jsx
<div class="target" bind:this={target}>Target</div>
<Moveable
  target={target}
  origin={true}
  edge={false}

  draggable={true}
  throttleDrag={0}
  on:dragStart={({ detail }) => onDragStart(detail)}
  on:drag={({ detail }) => onDrag(detail)}
  on:dragEnd={({ detail }) => onDragEnd(detail)}

  keepRatio={false}
  renderDirections={["nw", "ne", "sw", "se", "n", "w", "s", "e"]}

  resizable={false}
  throttleResize={0}
  on:resizeStart={({ detail }) => onResizeStart(detail)}
  on:resize={({ detail }) => onResize(detail)}
  on:resizeEnd={({ detail }) => onResizeEnd(detail)}

  scalable={false}
  throttleScale={0}
  on:scaleStart={({ detail }) => onScaleStart(detail)}
  on:scale={({ detail }) => onScale(detail)}
  on:scaleEnd={({ detail }) => onScaleEnd(detail)}


  rotatable={false}
  throttleRotate={0}
  on:rotateStart={({ detail }) => onRotateStart(detail)}
  on:rotate={({ detail }) => onRotate(detail)}
  on:rotateEnd={({ detail }) => onRotateEnd(detail)}

  warpable={false}
  on:warpStart={({ detail }) => onWarpStart(detail)}
  on:warp={({ detail }) => onWarp(detail)}
  on:warpEnd={({ detail }) => onWarpEnd(detail)}

  pinchable="false"
  on:pinchStart={({ detail }) => onPinchStart(detail)}
  on:pinch={({ detail }) => onPinch(detail)}
  on:pinchEnd={({ detail }) => onPinchEnd(detail)}
/>

```

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

### Development Server

Source: https://github.com/daybrush/moveable/blob/master/packages/vue3-moveable/README.md

Runs the Vue3 Moveable app in development mode. Opens http://localhost:8080 and reloads on edits. Displays lint errors in the console.

```bash
npm run serve
```

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

### Initialize Moveable and Selecto

Source: https://github.com/daybrush/moveable/blob/master/packages/moveable/test/manual/selecto.html

Initializes Moveable with drag, resize, and snap functionalities, and Selecto for selecting targets within a container. Sets up event listeners for selection and rendering.

```javascript
let moveableRef = null;
let selectoRef = null;
let targets = [];
let newDiv;
let entered = false;
const container = document.querySelector("#container");

moveableRef = new Moveable(container, {
  draggable: true,
  target: targets,
  resizable: true,
  snappable: true,
  snapGridWidth: 10,
  snapGridHeight: 10,
  snapThreshold: 10,
  throttleDrag: 1,
  throttleScale: 0
});

selectoRef = new Selecto({
  container: document.querySelector("#container"),
  dragContainer: document.querySelector("#container"),
  selectableTargets: [".selectable"],
  hitRate: 0,
  selectByClick: true,
  selectFromInside: false,
  toggleContinueSelect: ["shift"],
  ratio: 0
});

function setTargets(nextTargets) {
  targets = nextTargets;
  moveableRef.target = targets;
}

moveableRef.on("render", e => {
  e.target.style.cssText += e.cssText;
});

selectoRef.on("selectEnd", e => {
  const moveable = moveableRef;
  if (e.isDragStart) {
    e.inputEvent.preventDefault();
    moveable.waitToChangeTarget().then(() => {
      console.log("W C T");
      moveable.dragStart(e.inputEvent);
    });
  }
  setTargets(e.selected);
});
//# sourceURL=pen.js
```

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

### Angular: Change Target on Drag Start

Source: https://github.com/daybrush/moveable/blob/master/handbook/handbook.md

Illustrates how to change the target of the Moveable component in an Angular application. It uses `setTimeout` to ensure the target is updated before initiating the drag start.

```typescript
@Component({
    selector: 'AppComponent',
    template: `
<div (mousedown)="onMouseDown($event)">
    <div class="target">target</div>
    <div class="target">target2</div>
</div>
<ngx-moveable
    #moveable
    [target]="target"
    />
`,
})
export class AppComponent {
    targert = null;
    @ViewChild('moveable', { static: false })  moveable;
    onMouseDown(e) {
        this.target = e.target;
        setTimeout(() => {
            this.moveable.ngDragStart(e);
        });
    }
}
```

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

### Selecto Initialization and Event Handling

Source: https://github.com/daybrush/moveable/blob/master/packages/moveable/test/manual/groupandsnappable.html

Initializes Selecto for selecting targets within the container. It handles 'selectEnd' to initiate Moveable dragging and 'dragStart' to prevent Moveable from interfering with Selecto's drag.

```javascript
this.selecto = new Selecto({
  container: this.element,
  dragContainer: this.element,
  selectableTargets: [" .target"],
  hitRate: 0,
  selectByClick: true,
  selectFromInside: false,
  toggleContinueSelect: ["shift"],
  ratio: 0
});
this.selecto.on("selectEnd", e => {
  if (e.isDragStart) {
    e.inputEvent.preventDefault();
    this.moveable.waitToChangeTarget().then(() => {
      this.moveable.dragStart(e.inputEvent);
    });
  }
  this.setTargets(e.selected);
});
this.selecto.on("dragStart", e => {
  const target = e.inputEvent.target;
  if (
    this.moveable.isMoveableElement(target) ||
    this.myTargets.some(t => t === target || t.contains(target))
  ) {
    e.stop();
  }
});
```

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

### React/Preact: Change Target on Drag Start

Source: https://github.com/daybrush/moveable/blob/master/handbook/handbook.md

Shows how to change the target of the Moveable component in React or Preact applications. It utilizes the `setState` method to update the target and then initiates drag start.

```tsx
import Moveable from "react-moveable"; // preact-moveable

<div onMouseDown={onMouseDown}></div>
<Moveable ref={e => { this.moveable = e; }} target={this.state.target} />

onMouseDown(e) {
    // Use nativeEvent if you are using react event handling
    const nativeEvent = e.nativeEvent

    this.setState({
        target: nativeEvent.target,
    }, () => {
        this.moveable.dragStart(nativeEvent);
    });
}
```

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

### Moveable Initialization with Group and Snap Options

Source: https://github.com/daybrush/moveable/blob/master/packages/moveable/test/manual/groupandsnappable.html

Initializes a Moveable instance with options for dragging, resizing, rotating, and snapping to grids and rotation thresholds. It also configures bounds and edge snapping.

```javascript
this.moveable = new Moveable(this.element, {
  target: [],
  bounds: {
    left: 0,
    top: 0,
    right: 0,
    bottom: 0,
    position: "css"
  },
  isDisplayGridGuidelines: true,
  snapGridWidth: 50,
  snapGridHeight: 50,
  snapThreshold: 50,
  snappable: true,
  draggable: true,
  resizable: true,
  rotatable: true,
  snapRotationThreshold: 50,
  snapRotationDegrees: [0, 90, 180, 270],
  origin: false,
  rotationPosition: "bottom",
  edge: true
});
```

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

### Set NPM Registry

Source: https://github.com/daybrush/moveable/blob/master/README.md

Configures Yarn to use the official npm registry. This is a prerequisite for installing project dependencies.

```sh
yarn config set registry https://registry.npmjs.org/
```

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

### Moveable Line Styles

Source: https://github.com/daybrush/moveable/blob/master/custom_css.md

Defines the default appearance for `.moveable-line` elements, used for drawing lines and rotation guides.

```css
.moveable-line {
    position: absolute;
    width: 1px;
    height: 1px;
    background: #4af;
    transform-origin: 0px 0.5px;
}
```

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

### Initialize Moveable Component with All Features

Source: https://github.com/daybrush/moveable/blob/master/README.md

This snippet demonstrates how to initialize the Moveable component with all its features enabled, including draggable, resizable, scalable, rotatable, warpable, and pinchable. It also shows basic event handling for each feature.

```typescript
import Moveable from "moveable";

const moveable = new Moveable(document.body, {
    target: document.querySelector(".target"),
    // If the container is null, the position is fixed. (default: parentElement(document.body))
    container: document.body,
    draggable: true,
    resizable: true,
    scalable: true,
    rotatable: true,
    warpable: true,
    // Enabling pinchable lets you use events that
    // can be used in draggable, resizable, scalable, and rotateable.
    pinchable: true, // ["resizable", "scalable", "rotatable"]
    origin: true,
    keepRatio: true,
    // Resize, Scale Events at edges.
    edge: false,
    throttleDrag: 0,
    throttleResize: 0,
    throttleScale: 0,
    throttleRotate: 0,
});
/* draggable */
moveable.on("dragStart", ({ target, clientX, clientY }) => {
    console.log("onDragStart", target);
}).on("drag", ({
    target, transform,
    left, top, right, bottom,
    beforeDelta, beforeDist, delta, dist,
    clientX, clientY,
}) => {
    console.log("onDrag left, top", left, top);
    target!.style.left = `${left}px`;
    target!.style.top = `${top}px`;
    // console.log("onDrag translate", dist);
    // target!.style.transform = transform;
}).on("dragEnd", ({ target, isDrag, clientX, clientY }) => {
    console.log("onDragEnd", target, isDrag);
});

/* resizable */
moveable.on("resizeStart", ({ target, clientX, clientY }) => {
    console.log("onResizeStart", target);
}).on("resize", ({ target, width, height, dist, delta, clientX, clientY }) => {
    console.log("onResize", target);
    delta[0] && (target!.style.width = `${width}px`);
    delta[1] && (target!.style.height = `${height}px`);
}).on("resizeEnd", ({ target, isDrag, clientX, clientY }) => {
    console.log("onResizeEnd", target, isDrag);
});

/* scalable */
moveable.on("scaleStart", ({ target, clientX, clientY }) => {
    console.log("onScaleStart", target);
}).on("scale", ({
    target, scale, dist, delta, transform, clientX, clientY,
}: OnScale) => {
    console.log("onScale scale", scale);
    target!.style.transform = transform;
}).on("scaleEnd", ({ target, isDrag, clientX, clientY }) => {
    console.log("onScaleEnd", target, isDrag);
});

/* rotatable */
moveable.on("rotateStart", ({ target, clientX, clientY }) => {
    console.log("onRotateStart", target);
}).on("rotate", ({ target, beforeDelta, delta, dist, transform, clientX, clientY }) => {
    console.log("onRotate", dist);
    target!.style.transform = transform;
}).on("rotateEnd", ({ target, isDrag, clientX, clientY }) => {
    console.log("onRotateEnd", target, isDrag);
});

/* warpable */
this.matrix = [
    1, 0, 0, 0,
    0, 1, 0, 0,
    0, 0, 1, 0,
    0, 0, 0, 1,
];
moveable.on("warpStart", ({ target, clientX, clientY }) => {
    console.log("onWarpStart", target);
}).on("warp", ({
    target,
    clientX,
    clientY,
    delta,
    dist,
    multiply,
    transform,
}) => {
    console.log("onWarp", target);
    // target.style.transform = transform;
    this.matrix = multiply(this.matrix, delta);
    target.style.transform = `matrix3d(${this.matrix.join(",")})`;
}).on("warpEnd", ({ target, isDrag, clientX, clientY }) => {
    console.log("onWarpEnd", target, isDrag);
});

/* pinchable */
// Enabling pinchable lets you use events that
// can be used in draggable, resizable, scalable, and rotateable.
moveable.on("pinchStart", ({ target, clientX, clientY }) => {
    // pinchStart event occur before dragStart, rotateStart, scaleStart, resizeStart
    console.log("onPinchStart");
}).on("pinch", ({ target, clientX, clientY, datas }) => {
    // pinch event occur before drag, rotate, scale, resize
    console.log("onPinch");
}).on("pinchEnd", ({ isDrag, target, clientX, clientY, datas }) => {
    // pinchEnd event occur before dragEnd, rotateEnd, scaleEnd, resizeEnd
    console.log("onPinchEnd");
});
```

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

### Angular Module Setup for ngx-moveable

Source: https://github.com/daybrush/moveable/blob/master/packages/ngx-moveable/projects/ngx-moveable/README.md

Configure your Angular application's NgModule to import and declare NgxMoveableComponent. Ensure BrowserModule is imported.

```typescript
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { NgxMoveableModule, NgxMoveableComponent } from '../ngx-moveable';

@NgModule({
  declarations: [
    AppComponent,
    NgxMoveableComponent,
  ],
  imports: [
    BrowserModule,
    // NgxMoveableModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
```

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

### Moveable Configuration for Drag and Snapping

Source: https://github.com/daybrush/moveable/blob/master/packages/moveable/test/manual/groupDragTarget.html

Configure padding, input handling, custom abilities, snapping to guidelines and grids, and element snapping for Moveable instances.

```javascript
padding: { left: 0, top: 0, right: 0, bottom: 0 }, // ../moveable/issues/896 // For <input type="text"></input>
checkInput: true, // For contenteditable="true"
dragFocusedInput: true, // Z-Index Manager
layer: 1, // Set initial layer value
// Custom Abilities
ables: [
    DragHandleAble,
    DeleteButtonAble
],
props: {
    draghandleable: true,
    deletebuttonable: true
},
// Snapping!
snappable: true,
// Limit movement within the container
snapContainer: designCanvas,
bounds: {
    left: 0,
    top: 0,
    right: designCanvas.offsetWidth,
    bottom: designCanvas.offsetHeight
},
// Snap to a Grid
snapDistFormat: (v, type) => `${v}px`,
verticalGuidelines: [
    //50,
    //designCanvasWidth / 4,
    //designCanvasWidth / 2,
    //designCanvasWidth * 3 / 4,
    //designCanvasWidth - 50
],
horizontalGuidelines: [
    //50,
    //designCanvasHeight / 4,
    //designCanvasHeight / 2,
    //designCanvasHeight * 3 / 4,
    //designCanvasHeight - 50
],
snapDigit: 50,
snapThreshold: 50, // Distance value that can snap to guidelines
snapGridWidth: 50,
snapGridHeight: 50,
snapDirections: {
    left: true,
    top: true,
    right: true,
    bottom: true,
    center: true,
    middle: true
},
// preventDefault: false,
isDisplaySnapDigit: true,
isDisplayInnerSnapDigit: true,
isDisplayGridGuidelines: true,
// Element Snap
snapElement: false,
snapGap: false, // When you drag, make the gap snap in the element
guidelines. 
```

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

### Development Server

Source: https://github.com/daybrush/moveable/blob/master/packages/svelte-moveable/README.md

Runs the Svelte app in development mode. Opens http://localhost:5000 in the browser and reloads on edits. Displays lint errors in the console.

```bash
npm run dev
```

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

### Basic Lit-Moveable Usage

Source: https://github.com/daybrush/moveable/blob/master/packages/lit-moveable/README.md

Demonstrates how to use the lit-moveable component with Lit HTML for drag and resize functionality. Ensure 'lit-moveable' is imported.

```js
import "lit-moveable";
import { render } from "lit-html":

render(html`
<div class="target" style="width: 200px;height: 100px;">Target</div>
<lit-moveable
    .target=${".target"}
    .litMoveable=${true}
    .resizable=${true}
    @litDragStart=${({ detail: e }) => {
        e.set(translate);
    }}
    @litDrag=${({ detail: e }) => {
        e.target.style.transform = `translate(${e.beforeTranslate[0]}px, ${e.beforeTranslate[1]}px)`;
        translate = e.beforeTranslate;
    }}
    @litResizeStart=${({ detail: e }) => {
        e.dragStart && e.dragStart.set(translate);
    }}
    @litResize=${({ detail: e }) => {
        const beforeTranslate = e.drag.beforeTranslate;

        e.target.style.width = `${e.width}px`;
        e.target.style.height = `${e.height}px`;
        e.target.style.transform = `translate(${beforeTranslate[0]}px, ${beforeTranslate[1]}px)`;
        translate = beforeTranslate;
    }}
/>
`);
```

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

### Selecto Configuration for Element Selection

Source: https://github.com/daybrush/moveable/blob/master/packages/moveable/test/manual/groupDragTarget.html

Initializes Selecto for selecting elements within a container. It includes configurations for drag behavior, click events, and selection toggling.

```javascript
let targets = [];
window.objSelecto = new Selecto({
    container: designCanvas,
    dragContainer: designCanvas,
    selectableTargets: ["\.el"],
    hitRate: 0,
    selectByClick: true,
    preventClickEventOnDrag: true,
    selectFromInside: false,
    toggleContinueSelect: ["shift"],
    ratio: 0,
});
window.objSelecto.on("dragStart", e => {
    //console.log("dragStart");
    const target = e.inputEvent.target;
    if (
        window.objMoveable.isMoveableElement(target) ||
        targets.some(t => t === target || t.contains(target)) ||
        target.tagName === "BUTTON" ||
        target.isContentEditable
    ) {
        // console.log("스탑");
        e.stop();
    }
}).on("select", e => {
    console.log("select");
    targets = e.selected;
    window.objMoveable.target = e.selected;
}).on("selectEnd", e => {
    if (e.isDragStart) {
        // console.log("???");
        e.inputEvent.preventDefault();
        setTimeout(() => {
            window.objMoveable.dragStart(e.inputEvent);
        });
    }
});
```

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

### Moveable Initialization

Source: https://github.com/daybrush/moveable/blob/master/demo/index.html

This snippet demonstrates the basic initialization of Moveable on an HTML element. It requires the Moveable library to be included.

```javascript
!function(e){function r(r){for(var n,a,i=r[0],l=r[1],c=r[2],p=0,s=[];p<i.length;p++)a=i[p],Object.prototype.hasOwnProperty.call(o,a)&&o[a]&&s.push(o[a][0]),o[a]=0;for(n in l)Object.prototype.hasOwnProperty.call(l,n)&&(e[n]=l[n]);for(f&&f(r);s.length;)s.shift()();return u.push.apply(u,c||[]),t()}function t(){for(var e,r=0;r<u.length;r++){for(var t=u[r],n=!0,i=1;i<t.length;i++){var l=t[i];0!==o[l]&&(n=!1)}n&&(u.splice(r--,1),e=a(a.s=t[0]))}return e}var n={},o={1:0},u=[];function a(r){if(n[r])return n[r].exports;var t=n[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,a),t.l=!0,t.exports}a.m=e,a.c=n,a.d=function(e,r,t){a.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},a.r=function(e){
```

```javascript
undefined
```

```javascript
!typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.t=function(e,r){if(1&r&&(e=a(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(a.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var n in e)a.d(t,n,function(r){return e[r]}.bind(null,n));return t},a.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(r,"a",r),r},a.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},a.p="./";var i=this["webpackJsonp@scena/react-editor"]=this["webpackJsonp@scena/react-editor"]||[],l=i.push.bind(i);i.push=r,i=i.slice();for(var c=0;c<i.length;c++)r(i[c]);var f=l;t()}([])
```