Skip to content

Migration 0.X to 1.0

Daybrush (Younkue Choi) edited this page Aug 11, 2022 · 20 revisions

Removed

  • set property is removed from Resizable's resizeStart event.
  • MOVEABLE_PROPS_MAP, MOVEABLE_EVENTS_MAP, MOVEABLE_EVENTS_PROPS_MAP constants are removed.
  • triggerAblesSimultaneously is removed. (Use self able prop)

Changed

Environments

  • TypeScript users can use it from version 4.2 or later.

Options, Methods, Events

  • In Rotatable's beforeRotate, rotate events, rotate, absoluteRotate property names is changed to beforeRotation, rotation, absoluteRotation.
  • In Rotatable's rotateGroup event,set property is renamed to setGroupRotation.
  • defaultGroupRotate property of the Rotatable is renamed to defaultGroupRotation.
  • preventClickDefault property is renamed to preventClickEventOnDragStart.
  • style property is renamed to moveableStyle.

Added

Before

<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>

After

<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>

After All-in-one

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