How to use the @moveable/matrix.convertDimension 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 / utils.ts View on Github external
while (el && !isEnd) {
        const style: CSSStyleDeclaration = getComputedStyle(el);
        const tagName = el.tagName.toLowerCase();
        const position = style.position;
        const isFixed = position === "fixed";
        const styleTransform = style.transform!;
        let matrix: number[] = convertCSStoMatrix(getTransformMatrix(styleTransform));

        if (!is3d && matrix.length === 16) {
            is3d = true;
            n = 4;
            const matrixesLength = matrixes.length;

            for (let i = 0; i < matrixesLength; ++i) {
                matrixes[i] = convertDimension(matrixes[i], 3, 4);
            }
        }
        if (is3d && matrix.length === 9) {
            matrix = convertDimension(matrix, 3, 4);
        }

        let offsetLeft = (el as HTMLElement).offsetLeft;
        let offsetTop = (el as HTMLElement).offsetTop;

        if (isFixed) {
            const containerRect = (container || document.documentElement).getBoundingClientRect();

            offsetLeft -= containerRect.left;
            offsetTop  -= containerRect.top;
        }
        // svg
github daybrush / moveable / packages / react-moveable / src / react-moveable / utils.ts View on Github external
const position = style.position;
        const isFixed = position === "fixed";
        const styleTransform = style.transform!;
        let matrix: number[] = convertCSStoMatrix(getTransformMatrix(styleTransform));

        if (!is3d && matrix.length === 16) {
            is3d = true;
            n = 4;
            const matrixesLength = matrixes.length;

            for (let i = 0; i < matrixesLength; ++i) {
                matrixes[i] = convertDimension(matrixes[i], 3, 4);
            }
        }
        if (is3d && matrix.length === 9) {
            matrix = convertDimension(matrix, 3, 4);
        }

        let offsetLeft = (el as HTMLElement).offsetLeft;
        let offsetTop = (el as HTMLElement).offsetTop;

        if (isFixed) {
            const containerRect = (container || document.documentElement).getBoundingClientRect();

            offsetLeft -= containerRect.left;
            offsetTop  -= containerRect.top;
        }
        // svg
        const isSVG = isUndefined(offsetLeft);
        let hasNotOffset = isSVG;
        let origin: number[];
        // inner svg element
github daybrush / moveable / packages / react-moveable / src / react-moveable / utils.ts View on Github external
);
        if (!targetMatrix) {
            targetMatrix = matrix;
        }
        if (!transformOrigin) {
            transformOrigin = origin;
        }
        if (isEnd || isFixed) {
            break;
        } else {
            el = offsetParent;
            isEnd = isOffsetEnd;
        }

    }
    let mat = prevMatrix ? convertDimension(prevMatrix, prevN!, n) : createIdentityMatrix(n);
    let beforeMatrix = prevMatrix ? convertDimension(prevMatrix, prevN!, n) : createIdentityMatrix(n);
    let offsetMatrix = createIdentityMatrix(n);
    const length = matrixes.length;
    const endContainer = getOffsetInfo(originalContainer, originalContainer, true).offsetParent;

    matrixes.reverse();
    matrixes.forEach((matrix, i) => {
        if (length - 2 === i) {
            beforeMatrix = mat.slice();
        }
        if (length - 1 === i) {
            offsetMatrix = mat.slice();
        }

        if (isObject(matrix[n - 1])) {
            [matrix[n - 1], matrix[2 * n - 1]] =
github daybrush / moveable / packages / react-moveable / src / react-moveable / utils.ts View on Github external
n,
                    matrix[2 * n - 1] as any,
                    mat,
                    matrixes[i + 1],
                );
        }
        mat = multiply(
            mat,
            matrix,
            n,
        );
    });
    const isMatrix3d = !isSVGGraphicElement && is3d;
    const transform = `${isMatrix3d ? "matrix3d" : "matrix"}(${
        convertMatrixtoCSS(isSVGGraphicElement && targetMatrix.length === 16
            ? convertDimension(targetMatrix, 4, 3) : targetMatrix)
        })`;

    return [
        beforeMatrix, offsetMatrix, mat, targetMatrix, transform, transformOrigin, is3d,
    ];
}
export function getSVGMatrix(
github daybrush / moveable / packages / react-moveable / src / react-moveable / utils.ts View on Github external
if (!targetMatrix) {
            targetMatrix = matrix;
        }
        if (!transformOrigin) {
            transformOrigin = origin;
        }
        if (isEnd || isFixed) {
            break;
        } else {
            el = offsetParent;
            isEnd = isOffsetEnd;
        }

    }
    let mat = prevMatrix ? convertDimension(prevMatrix, prevN!, n) : createIdentityMatrix(n);
    let beforeMatrix = prevMatrix ? convertDimension(prevMatrix, prevN!, n) : createIdentityMatrix(n);
    let offsetMatrix = createIdentityMatrix(n);
    const length = matrixes.length;
    const endContainer = getOffsetInfo(originalContainer, originalContainer, true).offsetParent;

    matrixes.reverse();
    matrixes.forEach((matrix, i) => {
        if (length - 2 === i) {
            beforeMatrix = mat.slice();
        }
        if (length - 1 === i) {
            offsetMatrix = mat.slice();
        }

        if (isObject(matrix[n - 1])) {
            [matrix[n - 1], matrix[2 * n - 1]] =
                getSVGOffset(
github daybrush / moveable / packages / react-moveable / src / react-moveable / ables / Warpable.tsx View on Github external
const direction = getDirection(inputTarget);

        if (!direction || !target) {
            return false;
        }
        const state = moveable.state;
        const {
            transformOrigin, is3d,
            targetTransform, targetMatrix,
            width, height,
            left, top,
        } = state;

        datas.datas = {};
        datas.targetTransform = targetTransform;
        datas.warpTargetMatrix = is3d ? targetMatrix : convertDimension(targetMatrix, 3, 4);
        datas.targetInverseMatrix = ignoreDimension(invert(datas.warpTargetMatrix, 4), 3, 4);
        datas.direction = direction;
        datas.left = left;
        datas.top = top;

        setDragStart(moveable, { datas });
        datas.poses = [
            [0, 0],
            [width, 0],
            [0, height],
            [width, height],
        ].map((p, i) => minus(p, transformOrigin));

        datas.nextPoses = datas.poses.map(([x, y]: number[]) => caculate(datas.warpTargetMatrix, [x, y, 0, 1], 4));
        datas.startMatrix = createIdentityMatrix(4);
        datas.prevMatrix = createIdentityMatrix(4);