How to use the @moveable/matrix.convertMatrixtoCSS 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 / ables / Warpable.tsx View on Github external
const h = createWarpMatrix(
            poses[0],
            poses[1],
            poses[2],
            poses[3],
            nextPoses[0],
            nextPoses[1],
            nextPoses[2],
            nextPoses[3],
        );

        if (!h.length) {
            return false;
        }

        const matrix = convertMatrixtoCSS(multiply(targetInverseMatrix, h, 4));
        const transform = `${datas.targetTransform} matrix3d(${matrix.join(",")})`;

        const delta = multiplyCSS(invert(prevMatrix, 4), matrix, 4);

        datas.prevMatrix = matrix;

        triggerEvent(moveable, "onWarp", fillParams(moveable, e, {
            delta,
            matrix: multiplyCSS(startMatrix, matrix, 4),
            multiply: multiplyCSS,
            dist: matrix,
            transform,
        }));
        return true;
    },
    dragControlEnd(
github daybrush / moveable / packages / react-moveable / src / react-moveable / utils.ts View on Github external
endContainer,
                    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 / ables / DragArea.tsx View on Github external
];
        }
        if (!target || !dragArea) {
            return [];
        }
        const h = createWarpMatrix(
            [0, 0],
            [width, 0],
            [0, height],
            [width, height],
            pos1,
            pos2,
            pos3,
            pos4,
        );
        const transform = h.length ? `matrix3d(${convertMatrixtoCSS(h).join(",")})` : "none";

        return [
            <div style="{{"></div>,
            renderPieces(React),
        ];
    },
    dragStart(moveable: MoveableManager, { datas, clientX, clientY, inputEvent }: any) {