Create Draggable/Resizable/Scalable/Rotatable/Warpable Element – moveable

Preview:

Description:

moveable is a JavaScript library that makes an element draggable, resizable, scalable, scrollable, rotatable, roundable, clippable, and wrappable.

How to use it:

Install and import the moveable.

# NPM
$ npm install moveable --save

import Moveable from "moveable";

Or load the umd version from the dist folder.

<script src="/dist/moveable.min.js"></script>

<-- or from a cdn -->
<script src="https://cdn.jsdelivr.net/npm/moveable@latest/dist/moveable.min.js"></script>

Initialize the Moveable library and specify the target element.

const moveable = new Moveable(document.body, {
      target: document.querySelector(".target"),
      container: null,
      rootContainer: null,
      rotatable: false,
      rotationPosition: "top",
      roundable: true,
      roundRelative: false,
      draggable: false,
      dragTarget: target,
      scalable: false,
      resizable: false,
      warpable: false,
      pinchable: true, // ["resizable", "scalable", "rotatable"]
      pinchThreshold: 0,
      pinchOutside: true,
      resizeFormat: v => v, // function to convert size for resize
      clippable: true,
      defaultClipPath: "inset",
      customClipPath: "",
      clipRelative: false,
      clipArea: false,
      dragWithClip: true,
      triggerAblesSimultaneously: false,
      snappable: true,
      snapDirections: { center: true, middle: true },
      elementSnapDirections: { top: true, bottom: true, right: true, left: true },
      snapThreshold: 5,
      snapContainer: document.body,
      snapGridWidth: 5,
      snapGridHeight: 5,
      snapDigit: 0,
      isDisplayInnerSnapDigit: true,
      snapGap: true,
      snapDistFormat: self,
      isDisplaySnapDigit: true,
      originDraggable: true,
      scrollable: true,
      scrollContainer: document.body,
      scrollThreshold: 0,
      getScrollPosition: ({ scrollContainer }) => ([scrollContainer.scrollLeft, scrollContainer.scrollTop]),
      bounds: { left: 0, top: 0, bottom: 1000, right: 1000 },
      innerBounds: null,
      innerBound: null,
      verticalGuidelines: [100, 200, 300],
      horizontalGuidelines: [0, 100, 200],
      elementGuidelines: [document.querySelector(".element")],
      keepRatio: true,
      origin: true,
      padding: null,
      zoom: 1,
      dragArea: false,
      edge: false, // resize, scale events at edges
      keepRatio: false,
      clipVerticalGuidelines: [0, 100, 200],
      clipHorizontalGuidelines: [0, 100, 200],
      clipSnapThreshold: 5,
      clipTargetBounds: true,
      throttleDrag: 0,
      throttleResize: 0,
      throttleScale: 0,
      throttleRotate: 0,
      rotationTarget: false,
      throttleDragRotate: 0,
      renderDirections: ["n", "nw", "ne", "s", "se", "sw", "e", "w"],
      className: "",
      defaultGroupRotate: 0 // Sets the initial rotation of the group
});

Callback functions.

const moveable = new Moveable(document.body, {
    OnDrag: function () {},
    OnDragEnd: function () {},
    OnDragGroup: function () {},
    OnDragGroupEnd: function () {},
    OnDragGroupStart: function () {},
    OnDragStart: function () {},
    OnPinch: function () {},
    OnPinchEnd: function () {},
    OnPinchGroup: function () {},
    OnPinchGroupEnd: function () {},
    OnPinchGroupStart: function () {},
    OnPinchStart: function () {},
    OnResize: function () {},
    OnResizeEnd: function () {},
    OnResizeGroup: function () {},
    OnResizeGroupEnd: function () {},
    OnResizeGroupStart: function () {},
    OnResizeStart: function () {},
    OnRotate: function () {},
    OnRotateEnd: function () {},
    OnRotateGroup: function () {},
    OnRotateGroupEnd: function () {},
    OnRotateGroupStart: function () {},: function () {},
    OnRotateStart: function () {},
    OnScale: function () {},
    OnScaleEnd: function () {},
    OnScaleGroup: function () {},
    OnScaleGroupEnd: function () {},
    OnScaleGroupStart: function () {},
    OnScaleStart: function () {},
    OnWarp: function () {},
    OnWarpEnd: function () {},
    OnWarpStart: function () {},
    OnRenderStart: function () {},
    OnRender: function () {},
    OnRenderEnd: function () {},
    OnRenderGroupStart: function () {},
    OnRenderGroup: function () {},
    OnRenderGroupEnd: function () {},
});

Event handlers.

moveable.on("click", ({ hasTarget, containsTarget, targetIndex }) => {
  // If you click on an element other than the target and not included in the target, index is -1.
  console.log("onClickGroup", target, hasTarget, containsTarget, targetIndex);
});
moveable.on("clickGroup", ({ inputTarget, isTarget, containsTarget, targetIndex }) => {
  // If you click on an element other than the target and not included in the target, index is -1.
  console.log("onClickGroup", inputTarget, isTarget, containsTarget, targetIndex);
});
moveable.on("drag", ({ target, transform }) => {
  target.style.transform = transform;
});
moveable.on("dragEnd", ({ target, isDrag }) => {
  console.log(target, isDrag);
});
moveable.on("dragGroup", ({ 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;)
  });
});
moveable.on("dragGroupEnd", ({ targets, isDrag }) => {
  console.log("onDragGroupEnd", targets, isDrag);
});
moveable.on("dragGroupStart", ({ targets }) => {
  console.log("onDragGroupStart", targets);
});
moveable.on("dragStart", ({ target }) => {
  console.log(target);
});
moveable.on("pinch", ({ target }) => {
  console.log(target);
});
moveable.on("pinchEnd", ({ target }) => {
  console.log(target);
});
moveable.on("pinchGroup", ({ targets, events }) => {
  console.log("onPinchGroup", targets);
});
moveable.on("pinchGroupEnd", ({ targets, isDrag }) => {
  console.log("onPinchGroupEnd", targets, isDrag);
});
moveable.on("pinchGroupStart", ({ targets }) => {
  console.log("onPinchGroupStart", targets);
});
moveable.on("pinchStart", ({ target }) => {
  console.log(target);
});
moveable.on("rotate", ({ target }) => {
  console.log(target);
});
moveable.on("scroll", ({ scrollContainer, direction }) => {
  scrollContainer.scrollLeft += direction[0] * 10;
  scrollContainer.scrollTop += direction[1] * 10;
})
moveable.on("scrollGroup", ({ scrollContainer, direction }) => {
  scrollContainer.scrollLeft += direction[0] * 10;
  scrollContainer.scrollTop += direction[1] * 10;
});
moveable.on("scale", ({ target }) => {
  console.log(target);
});
moveable.on("pinchEnd", ({ target }) => {
  console.log(target);
});
moveable.on("rotateEnd", ({ target }) => {
  console.log(target);
});
moveable.on("scaleEnd", ({ target }) => {
  console.log(target);
});
moveable.on("pinchGroup", ({ targets, events }) => {
  console.log("onPinchGroup", targets);
});
moveable.on("pinchGroupEnd", ({ targets, isDrag }) => {
  console.log("onPinchGroupEnd", targets, isDrag);
});
moveable.on("pinchGroupStart", ({ targets }) => {
  console.log("onPinchGroupStart", targets);
});
moveable.on("pinchStart", ({ target }) => {
  console.log(target);
});
moveable.on("render", ({ target }) => {
  console.log("onRender", target);
});
moveable.on("renderEnd", ({ target }) => {
  console.log("onRenderEnd", target);
});
moveable.on("renderGroup", ({ targets }) => {
  console.log("onRenderGroup", targets);
});
moveable.on("renderGroupEnd", ({ targets }) => {
  console.log("onRenderGroupEnd", targets);
});
moveable.on("renderGroupStart", ({ targets }) => {
  console.log("onRenderGroupStart", targets);
});
moveable.on("renderStart", ({ target }) => {
  console.log("onRenderStart", target);
});
moveable.on("resize", ({ target, width, height }) => {
  target.style.width = `${e.width}px`;
  target.style.height = `${e.height}px`;
});
moveable.on("beforeResize", ({ setFixedDirection }) => {
  if (shiftKey) {
     setFixedDirection([0, 0]);
  }
});
moveable.on("resizeEnd", ({ target, isDrag }) => {
  console.log(target, isDrag);
});
moveable.on("resizeGroup", ({ targets, events }) => {
  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; }); }); moveable.on("resizeGroupEnd", ({ targets, isDrag }) => {
  console.log("onResizeGroupEnd", targets, isDrag);
});
moveable.on("resizeGroupEnd", ({ targets, isDrag }) => {
  console.log("onResizeGroupEnd", targets, isDrag);
});
moveable.on("resizeGroupStart", ({ targets }) => {
  console.log("onResizeGroupStart", targets);
});
moveable.on("resizeStart", ({ target }) => {
  console.log(target);
});
moveable.on("rotate", ({ target, transform, dist }) => {
  target.style.transform = transform;
});
moveable.on("rotateEnd", ({ target, isDrag }) => {
  console.log(target, isDrag);
});
moveable.on("rotateGroup", ({ targets, events }) => {
  console.log("onRotateGroup", targets);
  events.forEach(ev => {
      const target = ev.target;
      // ev.drag is a drag event that occurs when the group rotate.
      const left = ev.drag.beforeDist[0];
      const top = ev.drag.beforeDist[1];
      const deg = ev.beforeDist;
  });
});
moveable.on("rotateGroupEnd", ({ targets, isDrag }) => {
  console.log("onRotateGroupEnd", targets, isDrag);
});
moveable.on("rotateGroupStart", ({ targets }) => {
  console.log("onRotateGroupStart", targets);
});
moveable.on("rotateStart", ({ target }) => {
  console.log(target);
});
moveable.on("rotateStart", ({ target }) => {
  console.log(target);
});
moveable.on("scale", ({ target, transform, dist }) => {
  target.style.transform = transform;
});
moveable.on("beforeScale", ({ setFixedDirection }) => {
  if (shiftKey) {
    setFixedDirection([0, 0]);
  }
});
moveable.on("scaleEnd", ({ target, isDrag }) => {
  console.log(target, isDrag);
});
moveable.on("scaleGroup", ({ targets, events }) => {
  console.log("onScaleGroup", targets);
  events.forEach(ev => {
      const target = ev.target;
      // ev.drag is a drag event that occurs when the group scale.
      const left = ev.drag.beforeDist[0];
      const top = ev.drag.beforeDist[0];
      const scaleX = ev.scale[0];
      const scaleX = ev.scale[1];
  });
});
moveable.on("scaleGroupEnd", ({ targets, isDrag }) => {
  console.log("onScaleGroupEnd", targets, isDrag);
});
moveable.on("scaleGroupStart", ({ targets }) => {
  console.log("onScaleGroupStart", targets);
});
moveable.on("scaleStart", ({ target }) => {
  console.log(target);
});
moveable.on("scroll", ({ scrollContainer, direction }) => {
  scrollContainer.scrollLeft += direction[0] * 10;
  scrollContainer.scrollTop += direction[1] * 10;
});
moveable.on("snap", e => {
  console.log("onSnap", e);
});
moveable.on("warp", ({ target, transform, delta, multiply }) => {
 // target.style.transform = transform;
 matrix = multiply(matrix, delta);
 target.style.transform = `matrix3d(${matrix.join(",")})`;
});
moveable.on("warpEnd", ({ target, isDrag }) => {
  console.log(target, isDrag);
});
moveable.on("warpStart", ({ target }) => {
  console.log(target);
});

API methods.

// destroy
moveable.destroy();
// check if is dragging
moveable.isDragging();
// check if is moveable element
moveable.isMoveableElement(e.target);
// check whether an event has been attached to a component.
moveable.hasOn(eventName);
// indicate whether the event is attached. 
moveable.hitTest(el);
// indicate whether the event is attached. 
moveable.hitTest(el);
// update the shape of the moveable
moveable.updateRect();
// change options or properties
moveable.setState(state, callbackopt);
// triggers a custom event
moveable.trigger(eventName, customEventopt, ...restParam);
// Instantly Request (requestStart - request - requestEnd)
moveable.request("draggable", { deltaX: 10, deltaY: 10, isInstant: true });
// Start move
const requester = moveable.request("draggable");
requester.request({ deltaX: 10, deltaY: 10 });
requester.request({ deltaX: 10, deltaY: 10 });
requester.request({ deltaX: 10, deltaY: 10 });
requester.requestEnd();
// update
moveable.updateTarget();
// trigger an event
moveable.on(event);
// executs event just one time
moveable.once(event);
// unbind an event
moveable.off(event);

Changelog:

v0.53.0 (10/28/2023)

• bugfix & update

v0.52.0 (10/28/2023)

• bugfix

v0.51.2 (09/19/2023)

• bugfix

v0.51.0 (07/09/2023)

• add onBound event
• bugfix

v0.50.2 (07/04/2023)

• bugfix

v0.50.1 (07/03/2023)

• bugfix

v0.49.1 (06/28/2023)

• bugfix

v0.49.0 (06/25/2023)

• support drag api

v0.48.0 (06/05/2023)

• support drag api
• bugfix

v0.47.8 (05/16/2023)

• Bugfixed

v0.47.7 (05/15/2023)

• Bugfixed

v0.47.7 (05/09/2023)

• Bugfixed

v0.47.0 (05/09/2023)

• Bugfixed

v0.46.1 (04/16/2023)

• Bugfixed

v0.46.0 (04/13/2023)

• Bugfixed

v0.45.0 (03/26/2023)

• Bugfixed
• Updated

v0.44.4 (03/21/2023)

• Bugfixed

v0.44.3 (03/14/2023)

• Bugfixed

v0.44.2 (03/11/2023)

• Bugfixed

v0.44.0 (03/09/2023)

• Bugfixed

v0.43.0 (01/29/2023)

• Bugfixed

v0.42.2 (12/17/2022)

• Bugfixed

v0.42.1 (12/11/2022)

• Updated

v0.41.0 (12/04/2022)

• Bugfix for react-moveable and vue-moveable.

v0.40.0 (11/27/2022)

• Bugfix for react-moveable and vue-moveable.

v0.39.0 (11/14/2022)

• Bugfix for react-moveable.

v0.38.0 (11/05/2022)

• Bugfix for react-moveable.

v0.37.0 (10/17/2022)

• Bugfix for react-moveable.

v0.36.4 (10/11/2022)

• bugfix

v0.36.1 (09/19/2022)

• react-moveable: fix updateSelectors method

v0.35.6 (09/15/2022)

• react-moveable: add moveableTarget property in click event
• react-moveable: add updateSelectors method
• react-moveable: support multiple group
• @moveable/helper: add helper package
• Bug Fix

v0.35.4 (08/25/2022)

• Fixed for React component

v0.35.3 (08/23/2022)

• Fixed for React component

v0.35.0 (08/06/2022)

• Fixed for React component

v0.34.3 (08/04/2022)

• Fixed for React component

v0.34.2 (08/02/2022)

• Update for React component

v0.33.0 (07/22/2022)

• bugfix

v0.32.0 (07/22/2022)

• bugfix

v0.31.2 (07/18/2022)

• bugfix

v0.31.0 (07/18/2022)

• add hideChildMoveableDefaultLines prop
• add setFixedDirection on rotateStart
• support edge prop’s object type
• add Snappable
• Bug Fix

v0.30.0 (06/10/2022)

• add snap direction format
• add preventClickDefault option
• add flushSync prop
• Bug Fix

v0.29.9 (06/08/2022)

• vue-moveable, react-moveable: add clippable keepRatio
• add snappable package
• bugfix

v0.29.8 (05/01/2022)

• bugfix

v0.29.6 (04/28/2022)

• bugfix

v0.29.4 (04/26/2022)

• fix svg transform
• code Refactoring

v0.29.2 (04/19/2022)

• fix fixed direction for scalable
• Support concurrent mode

v0.29.2 (04/18/2022)

• fix setFixedDirection for group
• fix dist for group

v0.29.1 (04/15/2022)

• fix resizeFormat

v0.29.0 (04/15/2022)

• add keepRatio in Resizable, Scalable
• add beforeScale, beforeResize events
• add resizeFormat option
• add beforeRotate, beforeRoateGroup events
• bugfixes

v0.28.0 (03/14/2022)

• add events property for groupEnd events
• add useResizeObserver prop
• add forceUpdate method
• add transform property on render events
• bugs fixed

v0.27.2 (11/16/2021)

• Bugs fixed

v0.27.0 (11/09/2021)

• Added hideDefaultLines prop
• Added snapDirections, elementSnapDirections
• Fixed bugs
• Remove snapCenter, snapHorizontal, snapVertical, snapElement (Use snapDirections, elementSnapDirections)

v0.26.0 (07/11/2021)

• Add vue-moveable package
• Add vue3-moveable package
• Support multi state
• Bugfix

v0.25.3 (06/18/2021)

• Fix snap to grid (bottom)
• Prevent click event
• Fix Native Event for dragArea or group
• Fix start original transform

v0.25.2 (06/15/2021)

• Fixed the problem that left and top dashed guidelines were not visible

v0.25.1 (06/15/2021)

• Add snapContainer prop
• Add snapGridWidth, snapGridHeight props
• Add isDisplayInnerSnapDigit prop
• Support svg able
• Support start transform for 1.0.0
• Remove overlapping guidelines

v0.24.6 (04/20/2021)

• Fix svg transform container
• Fix onRoundEnd event

v0.24.5 (03/29/2021)

• Update @scena/dragscroll

v0.24.4 (03/22/2021)

• remove console.log

v0.24.2 (03/20/2021)

• Change Moveable control box to use translate3d for z-index support in Safari
• groups request(“resizable”) TypeError: Cannot read property ‘target’ of undefined
• Fix resizable ratio

v0.23.1 (02/14/2021)

• Snap guideline disappear after left changed

v0.23.0 (01/31/2021)

• Add rotationTarget prop
• Add portalContainer prop
• Add className property in elementGuidelines
• Support svg’s g tag
• Fix rotation cursor
• Update element guidelines during drag

v0.22.2 (01/08/2021)

• Fix SVG position
• Fix Warpable matrix

v0.22.0 (12/21/2020)

• Support Custom Able
• Support Tree Shaking (React)
• Support live element guidelines
• Support partial element guidelines
• Add setFixedDirection, setRatio properties in Resizable, Scalable
• Add absoluteDist, absoluteDelta, absoluteRotate properties
• Support function element type
• Bugfixes

v0.21.1 (11/16/2020)

• Fix rotataionPosition’s calculation
• Fix zoom pixel cracking problem

v0.21.0 (11/08/2020)

• Add individualGroupable prop
• Add getManager method
• Add mouseEnter, mouseLeave events
• Add props prop for custom ables
• Fix edgeDraggable prop
• Change hitTest, isInside algorithm

v0.20.1 (11/04/2020)

• Add minRoundControls, maxRoundControls, roundClickable props for roundable

v0.20.0 (10/28/2020)

• Add minRoundControls, maxRoundControls, roundClickable props for roundable
• Add edgeDraggable prop
• Fix rotation direction
• Fix svg transform origin in safari
• Fix svg className
• Fix when rotate to 90/180/270 deg, resize bug

v0.19.4 (10/09/2020)

• remove console.log for npm

v0.19.3 (09/19/2020)

• Fix svelte-moveable types
• Fix rootContainer is not worked

v0.19.1 (09/15/2020)

• Export getElementInfo function (moveable, react-moveable)
• Add translateZ prop
• Support click, clickGroup event for no dragArea
• Add passDragArea prop
• Add clipVerticalGuidelines, clipHorizontalGuidelines, clipTargetBounds, clipSnapThreshold props
• Support target’s string, React.RefObject type
• Bugs fixed

v0.18.5 (07/17/2020)

• Fix Safari Offset Calculation
• Fix SVG Transform Origin Calculation
• Fix SVG ClientSize Calculation

v0.18.4 (07/15/2020)

• Bugfix

v0.18.3 (07/14/2020)

• Bugfix

v0.18.2 (07/13/2020)

• Add roundable props
• Add originDraggable props
• Add clippable props
• Add cspNonce props
• Add setMin, setMax property in resizable event
• Add top-left, top-right, …etc 8 direction value for rotatable
• Add moveable-dragging className
• Add lastEvent property
• Fix angular dependecies
• Fix @daybrush/utils types
• Fix zero dist issue
• Fix that innerBounds not works and change bounds color

v0.7.10 (06/08/2020)

• Fixed: resize could go outside the configured boundaries

v0.17.9 (06/06/2020)

• Fix Resize issue when container has keepRatio + rotated + with snapGuideLines
• Fix contextmenu issue

v0.17.8 (05/31/2020)

• Fix CSS’s camelized name issue

v0.17.7 (05/30/2020)

• Fix CSS’s camelized name issue
• Fix wrong maxWidth, maxHeight caculation issue for innerBounds and bounds
• Remove @types/react , @types/react-dom
• Fix @daybrush/drag’s version issue

v0.17.6 (05/18/2020)

• Fix firefox’s getBoundingClientRect
• Fix that zoom is not working

v0.17.5 (05/07/2020)

• Fix client position
• Caculate min, max size for Resizable

v0.17.4 (05/06/2020)

• Fix that getElement() is not a function

v0.17.3 (05/05/2020)

• Fix duplicated drag are and padding area.
• Fix that click event is not fired.

v0.17.2 (05/03/2020)

• Fix padding’s background color
• Fix first rendering issue

v0.17.1 (05/03/2020)

• Add padding, dragTarget props
• Add snapDistFormat props
• Add pinchOutside props
• Add hitTest method
• Fix bugs

v0.16.3 (04/04/2020)

• Fixed: isPinch is undefined during onDrag (when actually pinching on mobile)
• Fixed: Pinch Central Problem

v0.16.2 (04/01/2020)

• Fix SVG Firefox Issue
• when isDisplaySnapDigit={false} the number is displayed but set to 0

v0.16.1 (03/31/2020)

• Add snapGap props
• Add onSnap event
• Add triggerAblesSimultaneously props
• Add isDragging method
• Bugs fixed

v0.15.2 (03/06/2020)

• Fix rootContainer for 2d transform

v0.14.1 (02/06/2020)

• Support scrollable, onScroll for resizable, scalable
• Add zoom props
• Add rootContainer props with Absolute Container Matrix(SVG, elementGuidelines is not supported)
• Add snapDigit props
• Add isDisplaySnapDigit props
• Add innerBounds props
• Add request method (Draggable, Resizable, Rotatable, Scalable)
• Bugfix

v0.14.1 (02/06/2020)

• Updated

v0.14.0 (02/03/2020)

• Add throttleDragRotate (Drag only X axis or Y axis when hold SHIFT like Photoshop, Illustrator)
• Support for displaying snap distances in elementGuidelines
• Support bounds for a rotated system

v0.13.4 (01/13/2020)

• Bugs fixed

v0.13.3 (12/31/2019)

• Bugs fixed

v0.13.2 (12/26/2019)

• Bugs fixed

v0.13.0 (12/12/2019)

• Add snapVertical, snapHorizontal, snapElement props.
• Add set method on rotateGroup event.
• Add dashed line in element guidelines.
• Bugs Fixed

v0.12.0 (11/29/2019)

• Add defaultGroupRotate props
• Fix that clickGroup does not trigger after rotating
• Fix that at certain angles, moveable-control handle gets cut
• Fix that Element “sliding” when resizing

v0.11.1 (11/23/2019)

• Fix Resizable’s base direction caculation

v0.11.0 (11/23/2019)

• Add baseDirection props
• Add offsetWidth, offsetHeight in getRect’s method return value
• Fix Resizable’s wrong position calculation
• Fixed the problem that resize can’t snap

v0.10.8 (11/21/2019)

• Fix Resizable’s wrong position calculation.
• Fixes incorrect import issue in Preact.

v0.10.5 (11/16/2019)

• Fixed calculation of client, offset position considering borderWidth.
• Fixed zero scale.

v0.10.4 (11/15/2019)

• Fixes incorrect calculation when parent element is static in safari.

v0.10.2 (11/13/2019)

• Fix that scale or resize with keepRatio, snap is wrong.
• Fix that guidelines do not appear when dragging.

v0.9.10 (11/09/2019)

• Add scrollable props.
• Add onScroll, onScrollGroup event.
• Add scrollContainer props.
• Add getScrollPosition props.
• Add currentTarget and inputEvent on all events.
• Add setState method.
• Add getRect method.
• Add renderDirection props.
• Add className props.
• Add onClick event.
• Add onRenderStart, onRender, onRenderEnd events.
• Add onRenderGroupStart, onRenderGroup, onRenderGroupEnd events.
• Add warp in top, right, bottom and left directions.
• Lots of bugs fixed.

v0.9.8 (10/27/2019)

• Fix that miscaculate static parent’s offset position
• Fix dragArea’s transformOrigin

v0.9.7 (10/17/2019)

• Fix typo that elemenGuildelines to elementGuidelines

v0.9.6 (10/14/2019)

• Update PreactX
• Fix that setState is not a function

v0.9.5 (10/01/2019)

• fix that parent drag event occur snap.

v0.9.4 (10/01/2019)

• Fix that resizing north, west direction occur decimal point issue.
• Disable pinchable with snappable.
• Fix offset caculation for Webkit

v0.9.3 (10/01/2019)

• fix that keepRatio want to behave like sketches and illustrators
• fix keepRatio default false

v0.9.2 (10/01/2019)

• fix that bounds don’t apply when snap

v0.9.1 (09/30/2019)

• remove console.log
• Add Snappable (Drag, Resize, Scale, Warp)
• Add horizontalGuidelines & verticalGuidelines & elementGuidelines
• Add bounds option (boundaries)
• Add rotationPositoin option for rotation handle position
• Add dragArea option
• Add dragStart event on resizeStart, scaleStart.
• Add drag event on resize, scale.
• Add set parameter function on warpStart.
• Fixed north and west controls want to behave like photoshop
• Fix offset caculation for Webkit

v0.8.0 (08/28/2019)

• Add pinchThreshold option that set minimum distance to pinch easily.
• Add events parameter for all groupStart event. (such as onDragGroupStart, onScaleGroupStart, …etc)
• Add clickGroup event to find clicked target in the group
• Add set event method for all start event for absolute value. (such as onDragStart, onScaleStart, …etc)
• Add dragStart method for external mouse, touch event.
• Add isInside method that the coordinates are inside Moveable
• Update @daybrush/[email protected]
• Fix the way dist is used in onScale event

v0.7.5 (08/24/2019)

• bugfix

v0.7.4 (08/24/2019)

• Fix that pinch does not occur when pressed at the same time.
• Fix that scrolls and drags occur simultaneously and racks occur.
• Fix that mis-calculating when a static element is a parent.
• Fix that destroy() error

v0.7.3 (08/23/2019)

• fix infinite loop issue.

v0.7.2 (08/21/2019)

• Remove react types.

v0.7.1 (08/20/2019)

• Add Groupable
• Add edge option
• Add direction parameter on resize event
• Fix that do not call resizeEnd
• Remove unnecessary code.

v0.6.4 (08/07/2019)

• fix missing throttleScale
• fix ESM config