How to use @moveable/matrix - 10 common examples

if (parentScale) {
            scaleX = parentScale[0];
            scaleY = parentScale[1];
        } else if (pinchFlag) {
            if (parentDistance) {
                scaleX = (width + parentDistance) / width;
                scaleY = (height + parentDistance * height / width) / height;
            }
        } else {
            const dist = getDragDist({ datas, distX, distY });
            let distWidth = direction[0] * dist[0];
            let distHeight = direction[1] * dist[1];

            if (keepRatio && width && height) {
                const rad = getRad([0, 0], dist);
                const standardRad = getRad([0, 0], direction);
                const ratioRad = getRad([0, 0], [startWidth, startHeight]);
                const size = Math.sqrt(distWidth * distWidth + distHeight * distHeight);
                const signSize = Math.cos(rad - standardRad) * size;

                if (!direction[0]) {
                    // top, bottom
                    distHeight = signSize;
                    distWidth = getKeepRatioWidth(distHeight, isWidth, ratio);
                } else if (!direction[1]) {
                    // left, right
                    distWidth = signSize;
                    distHeight = getKeepRatioHeight(distWidth, isWidth, ratio);
                } else {
                    // two-way
                    distWidth = Math.cos(ratioRad) * signSize;
                    distHeight = Math.sin(ratioRad) * signSize;

function getTriangleRad(pos1: number[], pos2: number[], pos3: number[]) {
    // pos1 Rad
    const rad1 = getRad(pos1, pos2);
    const rad2 = getRad(pos1, pos3);

    const rad = rad2 - rad1;

    return rad >= 0 ? rad : rad + 2 * Math.PI;
}

function getTriangleRad(pos1: number[], pos2: number[], pos3: number[]) {
    // pos1 Rad
    const rad1 = getRad(pos1, pos2);
    const rad2 = getRad(pos1, pos3);

    const rad = rad2 - rad1;

    return rad >= 0 ? rad : rad + 2 * Math.PI;
}

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,
        );
    }

// 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 {

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

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

function getRotatiion(touches: Client[]) {
    return getRad([
        touches[0].clientX,
        touches[0].clientY,
    ], [
        touches[1].clientX,
        touches[1].clientY,
    ]) / Math.PI * 180;
}

x3 = (x3 - left) || 0;
    x4 = (x4 - left) || 0;

    y1 = (y1 - top) || 0;
    y2 = (y2 - top) || 0;
    y3 = (y3 - top) || 0;
    y4 = (y4 - top) || 0;

    originX = (originX - left) || 0;
    originY = (originY - top) || 0;

    const center = [
        (x1 + x2 + x3 + x4) / 4,
        (y1 + y2 + y3 + y4) / 4,
    ];
    const pos1Rad = getRad(center, [x1, y1]);
    const pos2Rad = getRad(center, [x2, y2]);
    const direction =
        (pos1Rad < pos2Rad && pos2Rad - pos1Rad < Math.PI) || (pos1Rad > pos2Rad && pos2Rad - pos1Rad < -Math.PI)
            ? 1 : -1;

    return [
        [left, top, right, bottom],
        [originX, originY],
        [x1, y1],
        [x2, y2],
        [x3, y3],
        [x4, y4],
        direction,
    ];
}

export function getRotationRad(
    poses: number[][],
    direction: number,
) {
    return getRad(direction > 0 ? poses[0] : poses[1], direction > 0 ? poses[1] : poses[0]);
}
export function getTargetInfo(