Skip to content

Migration 0.X to 1.0

Daybrush (Younkue Choi) edited this page Aug 4, 2020 · 20 revisions

Deprecated

Removed

  • Resizable's set property on resizeStart event.

Changed

  • Scalable's scale property becomes beforeScale on scale event

Added

Before

<Moveable
    target={target}
    draggable={true}
    scalable={true}
    origin={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]})`;
    }}
></Moveable>

After

<Moveable
    target={target}
    draggable={true}
    scalable={true}
    origin={true}
    onScaleStart={e => {
        e.setTransform("rotate(30deg) scale(2, 2) translate(10px, 10px)", 1); // scale(2, 2)
        e.dragStart && e.dragStart.setTransformIndex(2); // translate(10px, 10px)
    }}
    onScale={e => {
        // Use e.scale
        // Use e.drag.translate
        e.target.style.transform = e.drag.transform;
    }}
></Moveable>
Clone this wiki locally