@remotion/studio/dist/helpers/get-effective-translation.js

APIs for interacting with the Remotion Studio

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.applyZoomAroundFocalPoint = exports.getCenterPointWhileScrolling = exports.getEffectiveTranslation = void 0;
const remotion_1 = require("remotion");
const smooth_zoom_1 = require("./smooth-zoom");
const getEffectiveXTranslation = ({ canvasSize, scale, compositionWidth, translation, }) => {
    const maxTranslation = Math.abs(canvasSize.width / 2 +
        (scale * compositionWidth) / 2 -
        MUST_BE_INSIDE_CANVAS);
    return Math.max(-maxTranslation, Math.min(translation.x, maxTranslation));
};
const MUST_BE_INSIDE_CANVAS = 50;
const getEffectiveYTranslation = ({ canvasSize, scale, compositionHeight, translation, }) => {
    const maxTranslation = Math.abs(canvasSize.height / 2 + (scale * compositionHeight) / 2) -
        MUST_BE_INSIDE_CANVAS;
    return Math.max(-maxTranslation, Math.min(translation.y, maxTranslation));
};
const getEffectiveTranslation = ({ canvasSize, scale, compositionHeight, compositionWidth, translation, }) => {
    return {
        x: getEffectiveXTranslation({
            canvasSize,
            compositionWidth,
            scale,
            translation,
        }),
        y: getEffectiveYTranslation({
            canvasSize,
            compositionHeight,
            scale,
            translation,
        }),
    };
};
exports.getEffectiveTranslation = getEffectiveTranslation;
const getCenterPointWhileScrolling = ({ size, clientX, clientY, compositionWidth, compositionHeight, scale, translation, }) => {
    const mouseLeft = clientX - size.left;
    const mouseTop = clientY - size.top;
    const contentLeftPoint = size.width / 2 - (compositionWidth * scale) / 2 - translation.x;
    const contentTopPoint = size.height / 2 - (compositionHeight * scale) / 2 - translation.y;
    const offsetFromVideoLeft = Math.min(compositionWidth, Math.max(0, (mouseLeft - contentLeftPoint) / scale));
    const offsetFromVideoTop = Math.min(compositionHeight, Math.max(0, (mouseTop - contentTopPoint) / scale));
    return {
        centerX: offsetFromVideoLeft,
        centerY: offsetFromVideoTop,
    };
};
exports.getCenterPointWhileScrolling = getCenterPointWhileScrolling;
const applyZoomAroundFocalPoint = ({ canvasSize, contentDimensions, previewSizeBefore, oldNumericSize, newNumericSize, clientX, clientY, }) => {
    const scale = remotion_1.Internals.calculateScale({
        canvasSize,
        compositionHeight: contentDimensions.height,
        compositionWidth: contentDimensions.width,
        previewSize: previewSizeBefore.size,
    });
    const clampedNew = Math.min(smooth_zoom_1.MAX_ZOOM, Math.max(smooth_zoom_1.MIN_ZOOM, newNumericSize));
    if (clampedNew === oldNumericSize) {
        return previewSizeBefore;
    }
    const { centerX, centerY } = (0, exports.getCenterPointWhileScrolling)({
        size: canvasSize,
        clientX,
        clientY,
        compositionWidth: contentDimensions.width,
        compositionHeight: contentDimensions.height,
        scale,
        translation: previewSizeBefore.translation,
    });
    const zoomDifference = clampedNew - oldNumericSize;
    const uvCoordinatesX = centerX / contentDimensions.width;
    const uvCoordinatesY = centerY / contentDimensions.height;
    const correctionLeft = -uvCoordinatesX * (zoomDifference * contentDimensions.width) +
        (1 - uvCoordinatesX) * zoomDifference * contentDimensions.width;
    const correctionTop = -uvCoordinatesY * (zoomDifference * contentDimensions.height) +
        (1 - uvCoordinatesY) * zoomDifference * contentDimensions.height;
    return {
        size: clampedNew,
        translation: (0, exports.getEffectiveTranslation)({
            translation: {
                x: previewSizeBefore.translation.x - correctionLeft / 2,
                y: previewSizeBefore.translation.y - correctionTop / 2,
            },
            canvasSize,
            compositionHeight: contentDimensions.height,
            compositionWidth: contentDimensions.width,
            scale,
        }),
    };
};
exports.applyZoomAroundFocalPoint = applyZoomAroundFocalPoint;