How to use the @moveable/matrix.plus function in @moveable/matrix

To help you get started, we’ve selected a few @moveable/matrix examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github daybrush / moveable / packages / react-moveable / src / react-moveable / MoveableGroup.tsx View on Github external
const [left, top, width, height] = getGroupRect(this.moveables, rotation);

        // tslint:disable-next-line: max-line-length
        target.style.cssText += `left:0px;top:0px;width:${width}px; height:${height}px;transform:rotate(${rotation}deg)`;
        state.width = width;
        state.height = height;

        const info = getTargetInfo(target, this.controlBox.getElement(), this.getContainer(), state);
        const pos = [info.left!, info.top!];
        [
            info.pos1,
            info.pos2,
            info.pos3,
            info.pos4,
        ] = getAbsolutePosesByState(info as Required);
        info.origin = plus(pos, info.origin!);
        info.beforeOrigin = plus(pos, info.beforeOrigin!);

        const clientRect = info.clientRect!;

        clientRect.top += (top - info.top!) - state.top;
        clientRect.left += (left - info.left!) - state.left;

        this.updateState(
            {
                ...info,
                left: left - info.left!,
                top: top - info.top!,
            },
            isSetState,
        );
    }
github daybrush / moveable / packages / react-moveable / src / react-moveable / MoveableGroup.tsx View on Github external
// tslint:disable-next-line: max-line-length
        target.style.cssText += `left:0px;top:0px;width:${width}px; height:${height}px;transform:rotate(${rotation}deg)`;
        state.width = width;
        state.height = height;

        const info = getTargetInfo(target, this.controlBox.getElement(), this.getContainer(), state);
        const pos = [info.left!, info.top!];
        [
            info.pos1,
            info.pos2,
            info.pos3,
            info.pos4,
        ] = getAbsolutePosesByState(info as Required);
        info.origin = plus(pos, info.origin!);
        info.beforeOrigin = plus(pos, info.beforeOrigin!);

        const clientRect = info.clientRect!;

        clientRect.top += (top - info.top!) - state.top;
        clientRect.left += (left - info.left!) - state.left;

        this.updateState(
            {
                ...info,
                left: left - info.left!,
                top: top - info.top!,
            },
            isSetState,
        );
    }
    public triggerEvent(name: string, e: any): any {
github daybrush / moveable / packages / react-moveable / src / react-moveable / ables / Rotatable.tsx View on Github external
(child, childDatas, eventParams) => {
                const { left, top, beforeOrigin } = child.state;
                const childClient = plus(
                    minus([left, top], [parentLeft, parentTop]),
                    minus(beforeOrigin, parentBeforeOrigin),
                );

                childDatas.prevClient = childClient;
                eventParams.dragStart = Draggable.dragStart(
                    child,
                    new CustomDragger().dragStart(childClient, inputEvent),
                );
            },
        );
github daybrush / moveable / packages / react-moveable / src / react-moveable / ables / Resizable.ts View on Github external
(_, childDatas) => {
                const [clientX, clientY] = caculate(
                    createRotateMatrix(moveable.rotation / 180 * Math.PI, 3),
                    [
                        childDatas.originalX * parentScale[0],
                        childDatas.originalY * parentScale[1],
                        1,
                    ],
                    3,
                );

                return {
                    ...e,
                    parentScale,
                    dragClient: plus(fixedPosition, [clientX, clientY]),
                    parentKeepRatio: keepRatio,
                };
            },
        );
github daybrush / moveable / packages / react-moveable / src / react-moveable / ables / Draggable.ts View on Github external
const props = moveable.props;
        const parentMoveable = props.parentMoveable;
        const throttleDrag = parentEvent ? 0 : (props.throttleDrag || 0);

        let isSnap = false;

        if (!isPinch && !parentEvent && !parentFlag) {
            const [verticalInfo, horizontalInfo] = checkSnapDrag(moveable, distX, distY, datas);

            isSnap = verticalInfo.isSnap || horizontalInfo.isSnap;
            distX -= verticalInfo.offset;
            distY -= horizontalInfo.offset;
        }
        datas.passDistX = distX;
        datas.passDistY = distY;
        const beforeTranslate = plus(getDragDist({ datas, distX, distY }, true), startTranslate);
        const translate = plus(getDragDist({ datas, distX, distY }, false), startTranslate);

        if (!isSnap) {
            throttleArray(translate, throttleDrag);
            throttleArray(beforeTranslate, throttleDrag);
        }

        const beforeDist = minus(beforeTranslate, startTranslate);
        const dist = minus(translate, startTranslate);
        const delta = minus(dist, prevDist);
        const beforeDelta = minus(beforeDist, prevBeforeDist);

        datas.prevDist = dist;
        datas.prevBeforeDist = beforeDist;

        const left = datas.left + beforeDist[0];
github daybrush / moveable / packages / react-moveable / src / react-moveable / ables / Draggable.ts View on Github external
const parentMoveable = props.parentMoveable;
        const throttleDrag = parentEvent ? 0 : (props.throttleDrag || 0);

        let isSnap = false;

        if (!isPinch && !parentEvent && !parentFlag) {
            const [verticalInfo, horizontalInfo] = checkSnapDrag(moveable, distX, distY, datas);

            isSnap = verticalInfo.isSnap || horizontalInfo.isSnap;
            distX -= verticalInfo.offset;
            distY -= horizontalInfo.offset;
        }
        datas.passDistX = distX;
        datas.passDistY = distY;
        const beforeTranslate = plus(getDragDist({ datas, distX, distY }, true), startTranslate);
        const translate = plus(getDragDist({ datas, distX, distY }, false), startTranslate);

        if (!isSnap) {
            throttleArray(translate, throttleDrag);
            throttleArray(beforeTranslate, throttleDrag);
        }

        const beforeDist = minus(beforeTranslate, startTranslate);
        const dist = minus(translate, startTranslate);
        const delta = minus(dist, prevDist);
        const beforeDelta = minus(beforeDist, prevBeforeDist);

        datas.prevDist = dist;
        datas.prevBeforeDist = beforeDist;

        const left = datas.left + beforeDist[0];
        const top = datas.top + beforeDist[1];
github daybrush / moveable / packages / react-moveable / src / react-moveable / ables / Warpable.tsx View on Github external
posIndexes.forEach((index: number) => {
            nextPoses[index] = plus(nextPoses[index], dist);
        });
github daybrush / moveable / packages / react-moveable / src / react-moveable / DraggerUtils.ts View on Github external
export function getDragDist({ datas, distX, distY }: any, isBefore?: boolean) {
    const {
        inverseBeforeMatrix,
        inverseMatrix, is3d,
        startDragBeforeDist,
        startDragDist,
        absoluteOrigin,
    } = datas;
    const n = is3d ? 4 : 3;

    return minus(
        caculate(
            isBefore ? inverseBeforeMatrix : inverseMatrix,
            plus(absoluteOrigin, [distX, distY]),
            n,
        ),
        isBefore ? startDragBeforeDist : startDragDist,
    );
}
export function caculateTransformOrigin(