101 lines
3.3 KiB
JavaScript
101 lines
3.3 KiB
JavaScript
"use strict";
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
exports.calculateOuter = exports.calculateContainerStyle = exports.calculateOuterStyle = exports.calculateCanvasTransformation = void 0;
|
|
const remotion_1 = require("remotion");
|
|
const calculate_player_size_js_1 = require("./utils/calculate-player-size.js");
|
|
const calculateCanvasTransformation = ({ previewSize, compositionWidth, compositionHeight, canvasSize, }) => {
|
|
const scale = remotion_1.Internals.calculateScale({
|
|
canvasSize,
|
|
compositionHeight,
|
|
compositionWidth,
|
|
previewSize,
|
|
});
|
|
const correction = 0 - (1 - scale) / 2;
|
|
const xCorrection = correction * compositionWidth;
|
|
const yCorrection = correction * compositionHeight;
|
|
const width = compositionWidth * scale;
|
|
const height = compositionHeight * scale;
|
|
const centerX = canvasSize.width / 2 - width / 2;
|
|
const centerY = canvasSize.height / 2 - height / 2;
|
|
return {
|
|
centerX,
|
|
centerY,
|
|
xCorrection,
|
|
yCorrection,
|
|
scale,
|
|
};
|
|
};
|
|
exports.calculateCanvasTransformation = calculateCanvasTransformation;
|
|
const calculateOuterStyle = ({ config, style, canvasSize, overflowVisible, layout, }) => {
|
|
if (!config) {
|
|
return {};
|
|
}
|
|
return {
|
|
position: 'relative',
|
|
overflow: overflowVisible ? 'visible' : 'hidden',
|
|
...(0, calculate_player_size_js_1.calculatePlayerSize)({
|
|
compositionHeight: config.height,
|
|
compositionWidth: config.width,
|
|
currentSize: canvasSize,
|
|
height: style === null || style === void 0 ? void 0 : style.height,
|
|
width: style === null || style === void 0 ? void 0 : style.width,
|
|
}),
|
|
opacity: layout ? 1 : 0,
|
|
...style,
|
|
};
|
|
};
|
|
exports.calculateOuterStyle = calculateOuterStyle;
|
|
const calculateContainerStyle = ({ config, layout, scale, overflowVisible, }) => {
|
|
if (!config) {
|
|
return {};
|
|
}
|
|
if (!layout) {
|
|
return {
|
|
position: 'absolute',
|
|
width: config.width,
|
|
height: config.height,
|
|
display: 'flex',
|
|
transform: `scale(${scale})`,
|
|
overflow: overflowVisible ? 'visible' : 'hidden',
|
|
};
|
|
}
|
|
return {
|
|
position: 'absolute',
|
|
width: config.width,
|
|
height: config.height,
|
|
display: 'flex',
|
|
transform: `scale(${scale})`,
|
|
marginLeft: layout.xCorrection,
|
|
marginTop: layout.yCorrection,
|
|
overflow: overflowVisible ? 'visible' : 'hidden',
|
|
};
|
|
};
|
|
exports.calculateContainerStyle = calculateContainerStyle;
|
|
const calculateOuter = ({ layout, scale, config, overflowVisible, }) => {
|
|
if (!config) {
|
|
return {};
|
|
}
|
|
if (!layout) {
|
|
return {
|
|
width: config.width * scale,
|
|
height: config.height * scale,
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
position: 'absolute',
|
|
overflow: overflowVisible ? 'visible' : 'hidden',
|
|
};
|
|
}
|
|
const { centerX, centerY } = layout;
|
|
return {
|
|
width: config.width * scale,
|
|
height: config.height * scale,
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
position: 'absolute',
|
|
left: centerX,
|
|
top: centerY,
|
|
overflow: overflowVisible ? 'visible' : 'hidden',
|
|
};
|
|
};
|
|
exports.calculateOuter = calculateOuter;
|