@remotion/cli 4.0.0-prefetchapi.16 → 4.0.0-prefetching.14

package/dist/editor/components/PreviewZoomControls.js

@@ -0,0 +1,67 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PreviewZoomControls = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const minus_1 = require("../icons/minus");
+const plus_1 = require("../icons/plus");
+const preview_size_1 = require("../state/preview-size");
+const ControlButton_1 = require("./ControlButton");
+const layout_1 = require("./layout");
+const container = {
+    color: 'black',
+    flexDirection: 'row',
+    display: 'flex',
+};
+const buttonStyle = {
+    fontSize: 24,
+};
+const iconStyle = {
+    color: 'white',
+    width: 14,
+};
+const slider = {
+    width: 120,
+    accentColor: 'var(--blue)',
+};
+const PreviewZoomControls = () => {
+    const { size, setSize } = (0, react_1.useContext)(preview_size_1.PreviewSizeContext);
+    const onZoomOutClicked = (0, react_1.useCallback)(() => {
+        setSize((z) => {
+            if (z === 'auto')
+                return 1 - preview_size_1.ZOOM_BUTTON_STEP;
+            const newSize = Number((Number(z) - preview_size_1.ZOOM_BUTTON_STEP).toFixed(2));
+            return Math.max(preview_size_1.PREVIEW_MIN_ZOOM, newSize);
+        });
+    }, [setSize]);
+    const onZoomInClicked = (0, react_1.useCallback)(() => {
+        setSize((z) => {
+            if (z === 'auto')
+                return 1 + preview_size_1.ZOOM_BUTTON_STEP;
+            const newSize = Number((Number(z) + preview_size_1.ZOOM_BUTTON_STEP).toFixed(2));
+            return Math.min(preview_size_1.PREVIEW_MAX_ZOOM, newSize);
+        });
+    }, [setSize]);
+    const onChange = (0, react_1.useCallback)((e) => {
+        setSize(() => Number(e.target.value));
+    }, [setSize]);
+    const onWheel = (0, react_1.useCallback)((e) => {
+        setSize((z) => {
+            if (e.deltaY > 0) {
+                if (z === 'auto')
+                    return 1 - preview_size_1.ZOOM_SLIDER_STEP;
+                const newSize = Number((Number(z) - preview_size_1.ZOOM_SLIDER_STEP).toFixed(2));
+                return Math.max(preview_size_1.PREVIEW_MIN_ZOOM, newSize);
+            }
+            if (e.deltaY < 0) {
+                if (z === 'auto')
+                    return 1 + preview_size_1.ZOOM_SLIDER_STEP;
+                const newSize = Number((Number(z) + preview_size_1.ZOOM_SLIDER_STEP).toFixed(2));
+                return Math.min(preview_size_1.PREVIEW_MAX_ZOOM, newSize);
+            }
+            return z;
+        });
+    }, [setSize]);
+    return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { onClick: onZoomOutClicked, style: buttonStyle, title: "Zoom out preview", role: 'ControlButton', type: "button", disabled: preview_size_1.PREVIEW_MIN_ZOOM === size, children: (0, jsx_runtime_1.jsx)(minus_1.Minus, { style: iconStyle }) }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }), (0, jsx_runtime_1.jsx)("input", { title: `Preview size (${size}x)`, alt: `Preview size (${size}x)`, type: 'range', min: preview_size_1.PREVIEW_MIN_ZOOM, step: preview_size_1.ZOOM_SLIDER_STEP, value: size, max: preview_size_1.PREVIEW_MAX_ZOOM, onChange: onChange, onWheel: onWheel, style: slider }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }), (0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { onClick: onZoomInClicked, style: buttonStyle, title: "Zoom in preview", role: 'button', type: "button", disabled: preview_size_1.PREVIEW_MAX_ZOOM === size, children: (0, jsx_runtime_1.jsx)(plus_1.Plus, { style: iconStyle }) })] }));
+};
+exports.PreviewZoomControls = PreviewZoomControls;

package/dist/editor/helpers/normalize-wheel.d.ts

@@ -0,0 +1,5 @@
+export declare function normalizeWheel(event: WheelEvent): {
+    deltaX: number;
+    deltaY: number;
+    deltaZ: number;
+};

package/dist/editor/helpers/normalize-wheel.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.normalizeWheel = void 0;
+// Taken from https://github.com/tldraw/tldraw/blob/254dfdfd77c4abde53240f7d8ca3558e08688493/packages/core/src/hooks/useZoomEvents.ts which is adapted from https://stackoverflow.com/a/13650579
+const MAX_ZOOM_STEP = 10;
+function normalizeWheel(event) {
+    const { deltaY, deltaX } = event;
+    let deltaZ = 0;
+    if (event.ctrlKey || event.metaKey) {
+        const signY = Math.sign(event.deltaY);
+        const absDeltaY = Math.abs(event.deltaY);
+        let dy = deltaY;
+        if (absDeltaY > MAX_ZOOM_STEP) {
+            dy = MAX_ZOOM_STEP * signY;
+        }
+        deltaZ = dy;
+    }
+    return { deltaX, deltaY, deltaZ };
+}
+exports.normalizeWheel = normalizeWheel;

package/dist/editor/helpers/normalize-zoom.d.ts

@@ -0,0 +1 @@
+declare function normalizeWheel(event: WheelEvent): number[];

package/dist/editor/helpers/normalize-zoom.js

@@ -0,0 +1,16 @@
+"use strict";
+// Adapted from https://stackoverflow.com/a/13650579
+function normalizeWheel(event) {
+    const { deltaY, deltaX } = event;
+    let deltaZ = 0;
+    if (event.ctrlKey || event.metaKey) {
+        const signY = Math.sign(event.deltaY);
+        const absDeltaY = Math.abs(event.deltaY);
+        let dy = deltaY;
+        if (absDeltaY > MAX_ZOOM_STEP) {
+            dy = MAX_ZOOM_STEP * signY;
+        }
+        deltaZ = dy;
+    }
+    return [deltaX, deltaY, deltaZ];
+}