React moveable

🔥 Features

• Draggable refers to the ability to drag and move targets.
• Resizable indicates whether the target's width and height can be increased or decreased.
• Scalable indicates whether the target's x and y can be scale of transform.
• Rotatable indicates whether the target can be rotated.
• Warpable indicates whether the target can be warped(distorted, bented).
• Pinchable indicates whether the target can be pinched with draggable, resizable, scalable, rotatable.
• Groupable indicates Whether the targets can be moved in group with draggable, resizable, scalable, rotatable.
• Snappable indicates whether to snap to the guideline.
• OriginDraggable* indicates Whether to drag origin.
• Clippable indicates Whether to clip the target.
• Roundable indicates Whether to show and drag or double click border-radius.
• Support SVG Elements (svg, path, line, ellipse, g, rect, ...etc)
• Support Major Browsers
• Support 3d Transform

⚙️ Installation

📄 Documents

🚀 How to use

⚙️ Developments

The main project was made with and I used to make it lighter with umd.

For development and testing, check in packages/react-moveable.

Runs the app in the development mode. Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits. You will also see any lint errors in the console.

Files related to major features.

⭐️ Show Your Support

Please give a ⭐️ if this project helped you!

👏 Contributing

If you have any questions or requests or want to contribute to or other packages, please write the issue or give me a Pull Request freely.

🐞 Bug Report

If you find a bug, please report to us opening a new Issue on GitHub.

📝 License

This project is MIT licensed.

Moveable

Moveable is Draggable! Resizable! Scalable! Rotatable!

Extends

Namespaces

Clippable

Draggable

Group

OriginDraggable

Pinchable

Resizable

Rotatable

Roundable

Scalable

Scrollable

Snappable

Warpable

Members

className

Source:

You can specify the className of the moveable controlbox. (default: "")

Example

dragArea

Source:

Add an event to the moveable area instead of the target for stopPropagation. (default: false, true in group)

Example

dragTarget

Source:

The target(s) to drag Moveable target(s) (default: target)

Example

edge

Source:

Resize, Scale Events at edges

Example

origin

Source:

Whether or not the origin controlbox will be visible or not (default: true)

Example

padding

Source:

Add padding around the target to increase the drag area. (default: null)

Example

passDragArea

Source:

Set `pointerEvents: none;` css to pass events in dragArea. (default: false)

Example

target

Source:

The target to indicate Moveable Control Box.

Example

zoom

Source:

Zooms in the elements of a moveable. (default: 1)

Example

Methods

destroy() → {void}

Source:

Remove the Moveable object and the events.

Example

Returns:

Type

void

dragStart(e)

Source:

You can drag start the Moveable through the external `MouseEvent`or `TouchEvent`. (Angular: ngDragStart)

Example

emit(eventName, paramopt) → {boolean}

Source:

Overrides:

Fires an event to call listeners.

emit<Name extends keyof Events, Param = Events[Name]>(eventName) → {boolean}

emit<Name extends keyof Events, Param = Events[Name]>(eventName, param) → {boolean}

Example

Returns:

If false, stop the event.

Type

boolean

getManager() → {MoveableManagerInterface<any, any>}

Source:

Get a manager that manages the moveable's state and props.

Example

Returns:

- The Rect Info

Type

MoveableManagerInterface<any, any>

getRect() → {RectInfo}

Source:

You can get the vertex information, position and offset size information of the target based on the container.

Example

Returns:

- The Rect Info

Type

RectInfo

hitTest(el) → {number}

Source:

Hit test an element or rect on a moveable target.

Example

Returns:

- Get hit test rate (rate > 0 is hitted)

Type

number

isDragging()

Source:

Check if the moveable state is being dragged.

Example

Source:

Whether the coordinates are inside Moveable

Example

Returns:

- True if the coordinate is in moveable or false

isMoveableElement(target)

Source:

Check if the target is an element included in the moveable.

Example

off(eventNameopt, listeneropt) → {this}

Source:

Overrides:

Remove listeners registered in the event target.

off<Name extends keyof Events, Param = Events[Name]>(eventName, listener) → {this}

off(events) → {this}

Example

Returns:

Type

this

on(eventName, listeneropt) → {this}

Source:

Overrides:

Add a listener to the registered event.

on<Name extends keyof Events, Param = Events[Name]>(eventName, listener) → {this}

on(events) → {this}

Example

Returns:

Type

this

once<Name extends keyof Events & string, Param = Events[Name]>(eventName, listeneropt) → {Promise<OnEvent<Param, this>>}

Source:

Overrides:

Add a disposable listener and Use promise to the registered event.

Example

Returns:

Type

Promise<OnEvent<Param, this>>

request(ableName, paramopt, isInstantopt) → {Requester}

Source:

See:

Request able through a method rather than an event. At the moment of execution, requestStart is executed, and then request and requestEnd can be executed through Requester.

Example

Returns:

- Able Requester. If there is no request in able, nothing will work.

Type

Requester

trigger<Name extends keyof Events>(eventName, paramopt) → {boolean}

Source:

Overrides:

Fires an event to call listeners.

trigger<Name extends keyof Events, Param = Events[Name]>(eventName) → {boolean}

trigger<Name extends keyof Events, Param = Events[Name]>(eventName, param) → {boolean}

Example

Returns:

If false, stop the event.

Type

boolean

updateRect(typeopt, isTargetopt, isSetStateopt)

Source:

If the width, height, left, and top of all elements change, update the shape of the moveable.

Example

updateTarget(typeopt)

Source:

If the width, height, left, and top of the only target change, update the shape of the moveable.

Example

Type Definitions

Able<Props extends IObject<any> = IObject<any>, Events extends IObject<any> = IObject<any>>

Source:

Properties:

Type:

AbleRequestParam

Source:

Properties:

Type:

DefaultOptions

Source:

Properties:

Type:

DragAreaOptions

Source:

Properties:

Type:

HitRect

Source:

Properties:

Type:

MoveableDefaultProps

Source:

Properties:

Type:

MoveableOptions

Source:

Properties:

Type:

OnBeforeRender

Source:

Properties:

Type:

OnBeforeRenderEnd

Source:

Properties:

Type:

OnBeforeRenderGroup

Source:

Properties:

Type:

OnBeforeRenderGroupEnd

Source:

Properties:

Type:

OnBeforeRenderGroupStart

Source:

Properties:

Type:

OnBeforeRenderStart

Source:

Properties:

Type:

OnClick

Source:

Properties:

Type:

OnClickGroup

Source:

Properties:

Type:

OnEndEvent

Source:

Properties:

Type:

OnEvent

Source:

Properties:

Type:

OnRender

Source:

Properties:

Type:

OnRenderEnd

Source:

Properties:

Type:

OnRenderGroup

Source:

Properties:

import React from "react";

import ReactDOM from "react-dom";

import Moveable from "react-moveable";

import { ref } from "framework-utils";

import { Frame } from "scenejs";

import "./styles.css";

class App extends React.Component {

  frame = new Frame({

    width: "250px",

    height: "200px",

    left: "0px",

    top: "0px",

    transform: {

      rotate: "0deg",

      scaleX: 1,

      scaleY: 1,

      matrix3d: [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1]