groupable.md

🚀 How to use Groupable

• Groupable indicates Whether the targets can be moved in group with draggable, resizable, scalable, rotatable.

• API Documentation

• draggable

  • onDragGroupStart
  • onDragGroup
  • onDragGroupEnd

• resizable

  • onResizeGroupStart
  • onResizeGroup
  • onResizeGroupEnd

• scalable

  • onScaleGroupStart
  • onScaleGroup
  • onScaleGroupEnd

• rotatable

  • onRotateGroupStart
  • onRotateGroup
  • onRotateGroupEnd

• pinchable

  • onPinchGroupStart
  • onPinchGroup
  • onPinchGroupEnd

import Moveable from "preact-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={({ targets, direction }) => {
                console.log("onResizeGroup", targets);

                e.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);

                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[1];
                    const scaleX = ev.scale[0];
                    const scaleY = ev.scale[1];
                });
                target!.style.transform = transform;
            }}
            onScaleEnd={({ target, isDrag, clientX, clientY }) => {
                console.log("onScaleGroupEnd", target, isDrag);
            }}

            /* rotatable */
            rotatable={true}
            throttleRotate={0}
            onRotateGroupStart={({ targets, clientX, clientY }) => {
                console.log("onRotateGroupStart", targets);
            }}
            onRotateGroup={({
                targets,
                events
                delta, dist,
            }) => {
                e.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;
                });

            }}
            onRotateGroupEnd={({ targets, isDrag, clientX, clientY }) => {
                console.log("onRotateGroupEnd", targets, isDrag);
            }}

            // Enabling pinchable lets you use events that
            // can be used in draggable, resizable, scalable, and rotateable.
            pinchable={true}
            onPinchGroupStart={({ targets, clientX, clientY, datas }) => {
                // pinchGroupStart event occur before dragGroupStart, rotateGroupStart, scaleGroupStart, resizeGroupStart
                console.log("onPinchGroupStart");
            }}
            onPinchGroup={({ targets, clientX, clientY, datas }) => {
                // pinchGroup event occur before dragGroup, rotateGroup, scaleGroup, resizeGroup
                console.log("onPinchGroup");
            }}
            onPinchGroupEnd={({ isDrag, targets, clientX, clientY, datas }) => {
                // pinchGroupEnd event occur before dragGroupEnd, rotateGroupEnd, scaleGroupEnd, resizeGroupEnd
                console.log("onPinchGroupEnd");
            }}
        />
    );
}