remotion 4.0.474 → 4.0.475
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/Img.d.ts +6 -0
- package/dist/cjs/Interactive.d.ts +56 -0
- package/dist/cjs/Interactive.js +119 -0
- package/dist/cjs/animated-image/AnimatedImage.js +1 -1
- package/dist/cjs/canvas-image/CanvasImage.d.ts +6 -0
- package/dist/cjs/index.d.ts +1 -0
- package/dist/cjs/index.js +3 -1
- package/dist/cjs/internals.d.ts +18 -0
- package/dist/cjs/interpolate-colors.d.ts +2 -3
- package/dist/cjs/interpolate-colors.js +1 -0
- package/dist/cjs/interpolate-keyframed-status.js +1 -0
- package/dist/cjs/interpolate.js +147 -0
- package/dist/cjs/no-react.d.ts +6 -0
- package/dist/cjs/sequence-field-schema.d.ts +32 -1
- package/dist/cjs/sequence-field-schema.js +6 -0
- package/dist/cjs/version.d.ts +1 -1
- package/dist/cjs/version.js +1 -1
- package/dist/esm/index.mjs +360 -122
- package/dist/esm/no-react.mjs +139 -0
- package/dist/esm/version.mjs +1 -1
- package/package.json +2 -2
package/dist/cjs/Img.d.ts
CHANGED
|
@@ -18,6 +18,12 @@ export type ImgProps = NativeImgProps & {
|
|
|
18
18
|
readonly stack?: string;
|
|
19
19
|
} & Pick<SequenceProps, 'durationInFrames' | 'from' | 'hidden'>;
|
|
20
20
|
export declare const imgSchema: {
|
|
21
|
+
readonly 'style.transformOrigin': {
|
|
22
|
+
readonly type: "transform-origin";
|
|
23
|
+
readonly step: 1;
|
|
24
|
+
readonly default: "50% 50%";
|
|
25
|
+
readonly description: "Transform origin";
|
|
26
|
+
};
|
|
21
27
|
readonly 'style.translate': {
|
|
22
28
|
readonly type: "translate";
|
|
23
29
|
readonly step: 1;
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { SequenceProps } from './Sequence.js';
|
|
3
|
+
type InteractiveHtmlTag = 'a' | 'article' | 'aside' | 'button' | 'code' | 'div' | 'em' | 'footer' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'header' | 'label' | 'li' | 'main' | 'nav' | 'ol' | 'p' | 'pre' | 'section' | 'small' | 'span' | 'strong' | 'ul';
|
|
4
|
+
type InteractiveSvgTag = 'circle' | 'ellipse' | 'g' | 'line' | 'path' | 'rect' | 'svg' | 'text';
|
|
5
|
+
type InteractiveTag = InteractiveHtmlTag | InteractiveSvgTag;
|
|
6
|
+
type ElementForTag<Tag extends InteractiveTag> = Tag extends keyof HTMLElementTagNameMap ? HTMLElementTagNameMap[Tag] : Tag extends keyof SVGElementTagNameMap ? SVGElementTagNameMap[Tag] : Element;
|
|
7
|
+
type InteractiveSequenceProps = Pick<SequenceProps, 'durationInFrames' | 'from' | 'hidden' | 'name' | 'showInTimeline'> & {
|
|
8
|
+
/**
|
|
9
|
+
* @deprecated For internal use only
|
|
10
|
+
*/
|
|
11
|
+
readonly stack?: string;
|
|
12
|
+
};
|
|
13
|
+
type InteractiveElementProps<Tag extends InteractiveTag> = Omit<React.ComponentPropsWithoutRef<Tag>, keyof InteractiveSequenceProps> & InteractiveSequenceProps;
|
|
14
|
+
type InteractiveElementComponent<Tag extends InteractiveTag> = React.ComponentType<InteractiveElementProps<Tag> & React.RefAttributes<ElementForTag<Tag>>>;
|
|
15
|
+
/**
|
|
16
|
+
* @description HTML and SVG elements that are registered in the Remotion Studio timeline and can be visually edited.
|
|
17
|
+
*/
|
|
18
|
+
export declare const Interactive: {
|
|
19
|
+
A: InteractiveElementComponent<"a">;
|
|
20
|
+
Article: InteractiveElementComponent<"article">;
|
|
21
|
+
Aside: InteractiveElementComponent<"aside">;
|
|
22
|
+
Button: InteractiveElementComponent<"button">;
|
|
23
|
+
Circle: InteractiveElementComponent<"circle">;
|
|
24
|
+
Code: InteractiveElementComponent<"code">;
|
|
25
|
+
Div: InteractiveElementComponent<"div">;
|
|
26
|
+
Ellipse: InteractiveElementComponent<"ellipse">;
|
|
27
|
+
Em: InteractiveElementComponent<"em">;
|
|
28
|
+
Footer: InteractiveElementComponent<"footer">;
|
|
29
|
+
G: InteractiveElementComponent<"g">;
|
|
30
|
+
H1: InteractiveElementComponent<"h1">;
|
|
31
|
+
H2: InteractiveElementComponent<"h2">;
|
|
32
|
+
H3: InteractiveElementComponent<"h3">;
|
|
33
|
+
H4: InteractiveElementComponent<"h4">;
|
|
34
|
+
H5: InteractiveElementComponent<"h5">;
|
|
35
|
+
H6: InteractiveElementComponent<"h6">;
|
|
36
|
+
Header: InteractiveElementComponent<"header">;
|
|
37
|
+
Label: InteractiveElementComponent<"label">;
|
|
38
|
+
Li: InteractiveElementComponent<"li">;
|
|
39
|
+
Line: InteractiveElementComponent<"line">;
|
|
40
|
+
Main: InteractiveElementComponent<"main">;
|
|
41
|
+
Nav: InteractiveElementComponent<"nav">;
|
|
42
|
+
Ol: InteractiveElementComponent<"ol">;
|
|
43
|
+
P: InteractiveElementComponent<"p">;
|
|
44
|
+
Path: InteractiveElementComponent<"path">;
|
|
45
|
+
Pre: InteractiveElementComponent<"pre">;
|
|
46
|
+
Rect: InteractiveElementComponent<"rect">;
|
|
47
|
+
Section: InteractiveElementComponent<"section">;
|
|
48
|
+
Small: InteractiveElementComponent<"small">;
|
|
49
|
+
Span: InteractiveElementComponent<"span">;
|
|
50
|
+
Strong: InteractiveElementComponent<"strong">;
|
|
51
|
+
Svg: InteractiveElementComponent<"svg">;
|
|
52
|
+
Text: InteractiveElementComponent<"text">;
|
|
53
|
+
Ul: InteractiveElementComponent<"ul">;
|
|
54
|
+
};
|
|
55
|
+
export type InteractiveProps<Tag extends InteractiveTag> = InteractiveElementProps<Tag>;
|
|
56
|
+
export {};
|
|
@@ -0,0 +1,119 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
+
}) : function(o, v) {
|
|
16
|
+
o["default"] = v;
|
|
17
|
+
});
|
|
18
|
+
var __importStar = (this && this.__importStar) || (function () {
|
|
19
|
+
var ownKeys = function(o) {
|
|
20
|
+
ownKeys = Object.getOwnPropertyNames || function (o) {
|
|
21
|
+
var ar = [];
|
|
22
|
+
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
|
|
23
|
+
return ar;
|
|
24
|
+
};
|
|
25
|
+
return ownKeys(o);
|
|
26
|
+
};
|
|
27
|
+
return function (mod) {
|
|
28
|
+
if (mod && mod.__esModule) return mod;
|
|
29
|
+
var result = {};
|
|
30
|
+
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
|
|
31
|
+
__setModuleDefault(result, mod);
|
|
32
|
+
return result;
|
|
33
|
+
};
|
|
34
|
+
})();
|
|
35
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
36
|
+
exports.Interactive = void 0;
|
|
37
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
38
|
+
const react_1 = __importStar(require("react"));
|
|
39
|
+
const enable_sequence_stack_traces_js_1 = require("./enable-sequence-stack-traces.js");
|
|
40
|
+
const sequence_field_schema_js_1 = require("./sequence-field-schema.js");
|
|
41
|
+
const Sequence_js_1 = require("./Sequence.js");
|
|
42
|
+
const wrap_in_schema_js_1 = require("./wrap-in-schema.js");
|
|
43
|
+
const interactiveElementSchema = {
|
|
44
|
+
durationInFrames: sequence_field_schema_js_1.durationInFramesField,
|
|
45
|
+
from: sequence_field_schema_js_1.fromField,
|
|
46
|
+
...sequence_field_schema_js_1.sequenceVisualStyleSchema,
|
|
47
|
+
hidden: sequence_field_schema_js_1.hiddenField,
|
|
48
|
+
};
|
|
49
|
+
const setRef = (ref, value) => {
|
|
50
|
+
if (typeof ref === 'function') {
|
|
51
|
+
ref(value);
|
|
52
|
+
}
|
|
53
|
+
else if (ref) {
|
|
54
|
+
ref.current = value;
|
|
55
|
+
}
|
|
56
|
+
};
|
|
57
|
+
const makeInteractiveElement = (tag, displayName) => {
|
|
58
|
+
const Inner = (0, react_1.forwardRef)((propsWithControls, ref) => {
|
|
59
|
+
const { durationInFrames, from, hidden, name, showInTimeline, stack, _experimentalControls, ...props } = propsWithControls;
|
|
60
|
+
const refForOutline = (0, react_1.useRef)(null);
|
|
61
|
+
const callbackRef = (0, react_1.useCallback)((element) => {
|
|
62
|
+
refForOutline.current = element;
|
|
63
|
+
setRef(ref, element);
|
|
64
|
+
}, [ref]);
|
|
65
|
+
return (jsx_runtime_1.jsx(Sequence_js_1.Sequence, { layout: "none", from: from !== null && from !== void 0 ? from : 0, durationInFrames: durationInFrames !== null && durationInFrames !== void 0 ? durationInFrames : Infinity, hidden: hidden, name: name !== null && name !== void 0 ? name : displayName, showInTimeline: showInTimeline !== null && showInTimeline !== void 0 ? showInTimeline : true, _experimentalControls: _experimentalControls, _remotionInternalStack: stack, _remotionInternalRefForOutline: refForOutline, children: react_1.default.createElement(tag, {
|
|
66
|
+
...props,
|
|
67
|
+
ref: callbackRef,
|
|
68
|
+
}) }));
|
|
69
|
+
});
|
|
70
|
+
Inner.displayName = displayName;
|
|
71
|
+
const Wrapped = (0, wrap_in_schema_js_1.wrapInSchema)({
|
|
72
|
+
Component: Inner,
|
|
73
|
+
schema: interactiveElementSchema,
|
|
74
|
+
supportsEffects: false,
|
|
75
|
+
});
|
|
76
|
+
Wrapped.displayName = displayName;
|
|
77
|
+
(0, enable_sequence_stack_traces_js_1.addSequenceStackTraces)(Wrapped);
|
|
78
|
+
return Wrapped;
|
|
79
|
+
};
|
|
80
|
+
/**
|
|
81
|
+
* @description HTML and SVG elements that are registered in the Remotion Studio timeline and can be visually edited.
|
|
82
|
+
*/
|
|
83
|
+
exports.Interactive = {
|
|
84
|
+
A: makeInteractiveElement('a', '<Interactive.A>'),
|
|
85
|
+
Article: makeInteractiveElement('article', '<Interactive.Article>'),
|
|
86
|
+
Aside: makeInteractiveElement('aside', '<Interactive.Aside>'),
|
|
87
|
+
Button: makeInteractiveElement('button', '<Interactive.Button>'),
|
|
88
|
+
Circle: makeInteractiveElement('circle', '<Interactive.Circle>'),
|
|
89
|
+
Code: makeInteractiveElement('code', '<Interactive.Code>'),
|
|
90
|
+
Div: makeInteractiveElement('div', '<Interactive.Div>'),
|
|
91
|
+
Ellipse: makeInteractiveElement('ellipse', '<Interactive.Ellipse>'),
|
|
92
|
+
Em: makeInteractiveElement('em', '<Interactive.Em>'),
|
|
93
|
+
Footer: makeInteractiveElement('footer', '<Interactive.Footer>'),
|
|
94
|
+
G: makeInteractiveElement('g', '<Interactive.G>'),
|
|
95
|
+
H1: makeInteractiveElement('h1', '<Interactive.H1>'),
|
|
96
|
+
H2: makeInteractiveElement('h2', '<Interactive.H2>'),
|
|
97
|
+
H3: makeInteractiveElement('h3', '<Interactive.H3>'),
|
|
98
|
+
H4: makeInteractiveElement('h4', '<Interactive.H4>'),
|
|
99
|
+
H5: makeInteractiveElement('h5', '<Interactive.H5>'),
|
|
100
|
+
H6: makeInteractiveElement('h6', '<Interactive.H6>'),
|
|
101
|
+
Header: makeInteractiveElement('header', '<Interactive.Header>'),
|
|
102
|
+
Label: makeInteractiveElement('label', '<Interactive.Label>'),
|
|
103
|
+
Li: makeInteractiveElement('li', '<Interactive.Li>'),
|
|
104
|
+
Line: makeInteractiveElement('line', '<Interactive.Line>'),
|
|
105
|
+
Main: makeInteractiveElement('main', '<Interactive.Main>'),
|
|
106
|
+
Nav: makeInteractiveElement('nav', '<Interactive.Nav>'),
|
|
107
|
+
Ol: makeInteractiveElement('ol', '<Interactive.Ol>'),
|
|
108
|
+
P: makeInteractiveElement('p', '<Interactive.P>'),
|
|
109
|
+
Path: makeInteractiveElement('path', '<Interactive.Path>'),
|
|
110
|
+
Pre: makeInteractiveElement('pre', '<Interactive.Pre>'),
|
|
111
|
+
Rect: makeInteractiveElement('rect', '<Interactive.Rect>'),
|
|
112
|
+
Section: makeInteractiveElement('section', '<Interactive.Section>'),
|
|
113
|
+
Small: makeInteractiveElement('small', '<Interactive.Small>'),
|
|
114
|
+
Span: makeInteractiveElement('span', '<Interactive.Span>'),
|
|
115
|
+
Strong: makeInteractiveElement('strong', '<Interactive.Strong>'),
|
|
116
|
+
Svg: makeInteractiveElement('svg', '<Interactive.Svg>'),
|
|
117
|
+
Text: makeInteractiveElement('text', '<Interactive.Text>'),
|
|
118
|
+
Ul: makeInteractiveElement('ul', '<Interactive.Ul>'),
|
|
119
|
+
};
|
|
@@ -2,6 +2,12 @@ import { type RefObject } from 'react';
|
|
|
2
2
|
import type { EffectsProp } from '../effects/effect-types.js';
|
|
3
3
|
import type { CanvasImageCanvasProps } from './props.js';
|
|
4
4
|
export declare const canvasImageSchema: {
|
|
5
|
+
readonly 'style.transformOrigin': {
|
|
6
|
+
readonly type: "transform-origin";
|
|
7
|
+
readonly step: 1;
|
|
8
|
+
readonly default: "50% 50%";
|
|
9
|
+
readonly description: "Transform origin";
|
|
10
|
+
};
|
|
5
11
|
readonly 'style.translate': {
|
|
6
12
|
readonly type: "translate";
|
|
7
13
|
readonly step: 1;
|
package/dist/cjs/index.d.ts
CHANGED
|
@@ -127,6 +127,7 @@ export { getRemotionEnvironment } from './get-remotion-environment.js';
|
|
|
127
127
|
export { getStaticFiles, StaticFile } from './get-static-files.js';
|
|
128
128
|
export * from './IFrame.js';
|
|
129
129
|
export { Img, ImgProps } from './Img.js';
|
|
130
|
+
export { Interactive, type InteractiveProps } from './Interactive.js';
|
|
130
131
|
export * from './internals.js';
|
|
131
132
|
export { interpolateColors, type InterpolateColorsOptions, } from './interpolate-colors.js';
|
|
132
133
|
export { LogLevel } from './log.js';
|
package/dist/cjs/index.js
CHANGED
|
@@ -14,7 +14,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
|
14
14
|
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
15
15
|
};
|
|
16
16
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
-
exports.Config = exports.Experimental = exports.watchStaticFile = exports.MediaPlaybackError = exports.Video = exports.OffthreadVideo = exports.Html5Video = exports.useRemotionEnvironment = exports.usePixelDensity = exports.useDelayRender = exports.useCurrentScale = exports.useCurrentFrame = exports.useBufferState = exports.staticFile = exports.Series = exports.Sequence = exports.registerRoot = exports.prefetch = exports.random = exports.interpolate = exports.assertValidInterpolatePosterizeOption = exports.assertValidInterpolateEasingOption = exports.Loop = exports.interpolateColors = exports.Img = exports.getStaticFiles = exports.getRemotionEnvironment = exports.delayRender = exports.continueRender = exports.getInputProps = exports.Composition = exports.CanvasImage = exports.isHtmlInCanvasSupported = exports.HtmlInCanvas = exports.HTML_IN_CANVAS_UNSUPPORTED_MESSAGE = exports.Solid = exports.cancelRender = exports.Html5Audio = exports.Audio = exports.Artifact = void 0;
|
|
17
|
+
exports.Config = exports.Experimental = exports.watchStaticFile = exports.MediaPlaybackError = exports.Video = exports.OffthreadVideo = exports.Html5Video = exports.useRemotionEnvironment = exports.usePixelDensity = exports.useDelayRender = exports.useCurrentScale = exports.useCurrentFrame = exports.useBufferState = exports.staticFile = exports.Series = exports.Sequence = exports.registerRoot = exports.prefetch = exports.random = exports.interpolate = exports.assertValidInterpolatePosterizeOption = exports.assertValidInterpolateEasingOption = exports.Loop = exports.interpolateColors = exports.Interactive = exports.Img = exports.getStaticFiles = exports.getRemotionEnvironment = exports.delayRender = exports.continueRender = exports.getInputProps = exports.Composition = exports.CanvasImage = exports.isHtmlInCanvasSupported = exports.HtmlInCanvas = exports.HTML_IN_CANVAS_UNSUPPORTED_MESSAGE = exports.Solid = exports.cancelRender = exports.Html5Audio = exports.Audio = exports.Artifact = void 0;
|
|
18
18
|
require("./_check-rsc.js");
|
|
19
19
|
require("./asset-types.js");
|
|
20
20
|
const Clipper_js_1 = require("./Clipper.js");
|
|
@@ -64,6 +64,8 @@ Object.defineProperty(exports, "getStaticFiles", { enumerable: true, get: functi
|
|
|
64
64
|
__exportStar(require("./IFrame.js"), exports);
|
|
65
65
|
const Img_js_1 = require("./Img.js");
|
|
66
66
|
Object.defineProperty(exports, "Img", { enumerable: true, get: function () { return Img_js_1.Img; } });
|
|
67
|
+
const Interactive_js_1 = require("./Interactive.js");
|
|
68
|
+
Object.defineProperty(exports, "Interactive", { enumerable: true, get: function () { return Interactive_js_1.Interactive; } });
|
|
67
69
|
__exportStar(require("./internals.js"), exports);
|
|
68
70
|
const interpolate_colors_js_1 = require("./interpolate-colors.js");
|
|
69
71
|
Object.defineProperty(exports, "interpolateColors", { enumerable: true, get: function () { return interpolate_colors_js_1.interpolateColors; } });
|
package/dist/cjs/internals.d.ts
CHANGED
|
@@ -105,6 +105,12 @@ export declare const Internals: {
|
|
|
105
105
|
readonly description: "Layout";
|
|
106
106
|
readonly variants: {
|
|
107
107
|
readonly 'absolute-fill': {
|
|
108
|
+
readonly 'style.transformOrigin': {
|
|
109
|
+
readonly type: "transform-origin";
|
|
110
|
+
readonly step: 1;
|
|
111
|
+
readonly default: "50% 50%";
|
|
112
|
+
readonly description: "Transform origin";
|
|
113
|
+
};
|
|
108
114
|
readonly 'style.translate': {
|
|
109
115
|
readonly type: "translate";
|
|
110
116
|
readonly step: 1;
|
|
@@ -161,6 +167,12 @@ export declare const Internals: {
|
|
|
161
167
|
};
|
|
162
168
|
readonly SequenceWithoutSchema: import("react").ForwardRefExoticComponent<import("./Sequence.js").SequenceProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
163
169
|
readonly sequenceStyleSchema: {
|
|
170
|
+
readonly 'style.transformOrigin': {
|
|
171
|
+
readonly type: "transform-origin";
|
|
172
|
+
readonly step: 1;
|
|
173
|
+
readonly default: "50% 50%";
|
|
174
|
+
readonly description: "Transform origin";
|
|
175
|
+
};
|
|
164
176
|
readonly 'style.translate': {
|
|
165
177
|
readonly type: "translate";
|
|
166
178
|
readonly step: 1;
|
|
@@ -212,6 +224,12 @@ export declare const Internals: {
|
|
|
212
224
|
};
|
|
213
225
|
};
|
|
214
226
|
readonly sequenceVisualStyleSchema: {
|
|
227
|
+
readonly 'style.transformOrigin': {
|
|
228
|
+
readonly type: "transform-origin";
|
|
229
|
+
readonly step: 1;
|
|
230
|
+
readonly default: "50% 50%";
|
|
231
|
+
readonly description: "Transform origin";
|
|
232
|
+
};
|
|
215
233
|
readonly 'style.translate': {
|
|
216
234
|
readonly type: "translate";
|
|
217
235
|
readonly step: 1;
|
|
@@ -2,9 +2,8 @@
|
|
|
2
2
|
* Copied from:
|
|
3
3
|
* https://github.com/software-mansion/react-native-reanimated/blob/master/src/reanimated2/Colors.ts
|
|
4
4
|
*/
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
};
|
|
5
|
+
import { type InterpolateOptions } from './interpolate.js';
|
|
6
|
+
export type InterpolateColorsOptions = Pick<InterpolateOptions, 'easing' | 'posterize'>;
|
|
8
7
|
export declare const colorNames: {
|
|
9
8
|
[key: string]: number;
|
|
10
9
|
};
|
|
@@ -539,6 +539,7 @@ function processColor(color) {
|
|
|
539
539
|
const interpolateColorsRGB = (value, inputRange, colors, options) => {
|
|
540
540
|
const [r, g, b, a] = [red, green, blue, opacity].map((f) => {
|
|
541
541
|
const unrounded = (0, interpolate_js_1.interpolate)(value, inputRange, colors.map((c) => f(c)), {
|
|
542
|
+
easing: options === null || options === void 0 ? void 0 : options.easing,
|
|
542
543
|
extrapolateLeft: 'clamp',
|
|
543
544
|
extrapolateRight: 'clamp',
|
|
544
545
|
posterize: options === null || options === void 0 ? void 0 : options.posterize,
|
package/dist/cjs/interpolate.js
CHANGED
|
@@ -42,6 +42,32 @@ const lengthUnits = new Set([
|
|
|
42
42
|
'vw',
|
|
43
43
|
]);
|
|
44
44
|
const cssNumberRegex = /^([+-]?(?:\d+\.?\d*|\.\d+))([a-zA-Z%]+)?$/;
|
|
45
|
+
const transformOriginKeywords = new Set([
|
|
46
|
+
'left',
|
|
47
|
+
'center',
|
|
48
|
+
'right',
|
|
49
|
+
'top',
|
|
50
|
+
'bottom',
|
|
51
|
+
]);
|
|
52
|
+
const transformOriginKeywordOptions = (keyword) => {
|
|
53
|
+
if (keyword === 'left') {
|
|
54
|
+
return [{ axis: 'x', value: { value: 0, unit: '%' } }];
|
|
55
|
+
}
|
|
56
|
+
if (keyword === 'right') {
|
|
57
|
+
return [{ axis: 'x', value: { value: 100, unit: '%' } }];
|
|
58
|
+
}
|
|
59
|
+
if (keyword === 'top') {
|
|
60
|
+
return [{ axis: 'y', value: { value: 0, unit: '%' } }];
|
|
61
|
+
}
|
|
62
|
+
if (keyword === 'bottom') {
|
|
63
|
+
return [{ axis: 'y', value: { value: 100, unit: '%' } }];
|
|
64
|
+
}
|
|
65
|
+
return [
|
|
66
|
+
{ axis: 'x', value: { value: 50, unit: '%' } },
|
|
67
|
+
{ axis: 'y', value: { value: 50, unit: '%' } },
|
|
68
|
+
];
|
|
69
|
+
};
|
|
70
|
+
const transformOriginCenter = { value: 50, unit: '%' };
|
|
45
71
|
const stringifyNumber = (value) => {
|
|
46
72
|
return String((0, normalize_number_js_1.normalizeNumber)(value));
|
|
47
73
|
};
|
|
@@ -67,6 +93,124 @@ const parseStringInterpolationComponent = (component, value) => {
|
|
|
67
93
|
}
|
|
68
94
|
throw new TypeError(`Cannot interpolate "${value}" because "${unit}" is not a supported translate or rotate unit`);
|
|
69
95
|
};
|
|
96
|
+
const parseTransformOriginLengthPercentage = ({ component, value, allowPercentage, }) => {
|
|
97
|
+
var _a;
|
|
98
|
+
const match = cssNumberRegex.exec(component);
|
|
99
|
+
if (match === null) {
|
|
100
|
+
throw new TypeError(`Cannot interpolate "${value}" because "${component}" is not a supported transform-origin ${allowPercentage ? 'length-percentage' : 'z length'}`);
|
|
101
|
+
}
|
|
102
|
+
const unit = (_a = match[2]) !== null && _a !== void 0 ? _a : null;
|
|
103
|
+
const numberValue = Number(match[1]);
|
|
104
|
+
if (!Number.isFinite(numberValue)) {
|
|
105
|
+
throw new TypeError(`Cannot interpolate "${value}" because "${component}" is not finite`);
|
|
106
|
+
}
|
|
107
|
+
if (unit === null ||
|
|
108
|
+
!lengthUnits.has(unit) ||
|
|
109
|
+
(!allowPercentage && unit === '%')) {
|
|
110
|
+
throw new TypeError(`Cannot interpolate "${value}" because "${component}" is not a supported transform-origin ${allowPercentage ? 'length-percentage' : 'z length'}`);
|
|
111
|
+
}
|
|
112
|
+
return { value: numberValue, unit };
|
|
113
|
+
};
|
|
114
|
+
const parseTransformOriginToken = (component, value) => {
|
|
115
|
+
const lower = component.toLowerCase();
|
|
116
|
+
if (transformOriginKeywords.has(lower)) {
|
|
117
|
+
return { type: 'keyword', keyword: lower };
|
|
118
|
+
}
|
|
119
|
+
return {
|
|
120
|
+
type: 'length-percentage',
|
|
121
|
+
parsed: parseTransformOriginLengthPercentage({
|
|
122
|
+
component,
|
|
123
|
+
value,
|
|
124
|
+
allowPercentage: true,
|
|
125
|
+
}),
|
|
126
|
+
};
|
|
127
|
+
};
|
|
128
|
+
const parseTwoTransformOriginKeywords = (first, second, value) => {
|
|
129
|
+
const candidates = [];
|
|
130
|
+
for (const firstOption of transformOriginKeywordOptions(first)) {
|
|
131
|
+
for (const secondOption of transformOriginKeywordOptions(second)) {
|
|
132
|
+
if (firstOption.axis === secondOption.axis) {
|
|
133
|
+
continue;
|
|
134
|
+
}
|
|
135
|
+
candidates.push(firstOption.axis === 'x'
|
|
136
|
+
? [firstOption.value, secondOption.value]
|
|
137
|
+
: [secondOption.value, firstOption.value]);
|
|
138
|
+
}
|
|
139
|
+
}
|
|
140
|
+
if (candidates.length === 0) {
|
|
141
|
+
throw new TypeError(`Cannot interpolate "${value}" because "${first} ${second}" is not a valid transform-origin keyword pair`);
|
|
142
|
+
}
|
|
143
|
+
return candidates[0];
|
|
144
|
+
};
|
|
145
|
+
const parseTransformOriginXY = (parts, value) => {
|
|
146
|
+
if (parts.length === 1) {
|
|
147
|
+
const token = parseTransformOriginToken(parts[0], value);
|
|
148
|
+
if (token.type === 'length-percentage') {
|
|
149
|
+
return [token.parsed, transformOriginCenter];
|
|
150
|
+
}
|
|
151
|
+
if (token.keyword === 'top' || token.keyword === 'bottom') {
|
|
152
|
+
return [
|
|
153
|
+
transformOriginCenter,
|
|
154
|
+
transformOriginKeywordOptions(token.keyword)[0].value,
|
|
155
|
+
];
|
|
156
|
+
}
|
|
157
|
+
return [
|
|
158
|
+
transformOriginKeywordOptions(token.keyword)[0].value,
|
|
159
|
+
transformOriginCenter,
|
|
160
|
+
];
|
|
161
|
+
}
|
|
162
|
+
const first = parseTransformOriginToken(parts[0], value);
|
|
163
|
+
const second = parseTransformOriginToken(parts[1], value);
|
|
164
|
+
if (first.type === 'length-percentage' &&
|
|
165
|
+
second.type === 'length-percentage') {
|
|
166
|
+
return [first.parsed, second.parsed];
|
|
167
|
+
}
|
|
168
|
+
if (first.type === 'keyword' && second.type === 'keyword') {
|
|
169
|
+
return parseTwoTransformOriginKeywords(first.keyword, second.keyword, value);
|
|
170
|
+
}
|
|
171
|
+
const keyword = first.type === 'keyword'
|
|
172
|
+
? first
|
|
173
|
+
: second.type === 'keyword'
|
|
174
|
+
? second
|
|
175
|
+
: null;
|
|
176
|
+
const length = first.type === 'length-percentage'
|
|
177
|
+
? first.parsed
|
|
178
|
+
: second.type === 'length-percentage'
|
|
179
|
+
? second.parsed
|
|
180
|
+
: null;
|
|
181
|
+
if (keyword === null || length === null) {
|
|
182
|
+
throw new Error('Expected a keyword and a length-percentage value');
|
|
183
|
+
}
|
|
184
|
+
const keywordIsFirst = first.type === 'keyword';
|
|
185
|
+
if (keyword.keyword === 'left' || keyword.keyword === 'right') {
|
|
186
|
+
if (!keywordIsFirst) {
|
|
187
|
+
throw new TypeError(`Cannot interpolate "${value}" because horizontal transform-origin keywords must come before a length-percentage value`);
|
|
188
|
+
}
|
|
189
|
+
return [transformOriginKeywordOptions(keyword.keyword)[0].value, length];
|
|
190
|
+
}
|
|
191
|
+
if (keyword.keyword === 'top' || keyword.keyword === 'bottom') {
|
|
192
|
+
return [length, transformOriginKeywordOptions(keyword.keyword)[0].value];
|
|
193
|
+
}
|
|
194
|
+
return keywordIsFirst
|
|
195
|
+
? [transformOriginCenter, length]
|
|
196
|
+
: [length, transformOriginCenter];
|
|
197
|
+
};
|
|
198
|
+
const parseTransformOriginValue = (output, parts) => {
|
|
199
|
+
const [x, y] = parseTransformOriginXY(parts.slice(0, 2), output);
|
|
200
|
+
const z = parts[2] === undefined
|
|
201
|
+
? { value: 0, unit: null }
|
|
202
|
+
: parseTransformOriginLengthPercentage({
|
|
203
|
+
component: parts[2],
|
|
204
|
+
value: output,
|
|
205
|
+
allowPercentage: false,
|
|
206
|
+
});
|
|
207
|
+
return {
|
|
208
|
+
kind: 'translate',
|
|
209
|
+
values: [x.value, y.value, z.value],
|
|
210
|
+
units: [x.unit, y.unit, z.unit],
|
|
211
|
+
dimensions: parts[2] === undefined ? 2 : 3,
|
|
212
|
+
};
|
|
213
|
+
};
|
|
70
214
|
const parseStringInterpolationValue = (output) => {
|
|
71
215
|
var _a, _b, _c, _d, _e, _f;
|
|
72
216
|
var _g, _h, _j, _k, _l, _m;
|
|
@@ -85,6 +229,9 @@ const parseStringInterpolationValue = (output) => {
|
|
|
85
229
|
if (parts.length < 1 || parts.length > 3 || parts[0] === '') {
|
|
86
230
|
throw new TypeError(`String outputRange values must contain 1 to 3 components, but got "${output}"`);
|
|
87
231
|
}
|
|
232
|
+
if (parts.some((part) => transformOriginKeywords.has(part.toLowerCase()))) {
|
|
233
|
+
return parseTransformOriginValue(output, parts);
|
|
234
|
+
}
|
|
88
235
|
const parsed = parts.map((part) => parseStringInterpolationComponent(part, output));
|
|
89
236
|
const [{ kind }] = parsed;
|
|
90
237
|
for (const part of parsed) {
|
package/dist/cjs/no-react.d.ts
CHANGED
|
@@ -82,6 +82,12 @@ export declare const NoReactInternals: {
|
|
|
82
82
|
readonly description: "Layout";
|
|
83
83
|
readonly variants: {
|
|
84
84
|
readonly 'absolute-fill': {
|
|
85
|
+
readonly 'style.transformOrigin': {
|
|
86
|
+
readonly type: "transform-origin";
|
|
87
|
+
readonly step: 1;
|
|
88
|
+
readonly default: "50% 50%";
|
|
89
|
+
readonly description: "Transform origin";
|
|
90
|
+
};
|
|
85
91
|
readonly 'style.translate': {
|
|
86
92
|
readonly type: "translate";
|
|
87
93
|
readonly step: 1;
|
|
@@ -41,6 +41,13 @@ export type TranslateFieldSchema = {
|
|
|
41
41
|
description?: string;
|
|
42
42
|
keyframable?: boolean;
|
|
43
43
|
};
|
|
44
|
+
export type TransformOriginFieldSchema = {
|
|
45
|
+
type: 'transform-origin';
|
|
46
|
+
step?: number;
|
|
47
|
+
default: string | undefined;
|
|
48
|
+
description?: string;
|
|
49
|
+
keyframable?: boolean;
|
|
50
|
+
};
|
|
44
51
|
export type ScaleFieldSchema = {
|
|
45
52
|
type: 'scale';
|
|
46
53
|
min?: number;
|
|
@@ -95,13 +102,19 @@ export type ArrayFieldSchema = {
|
|
|
95
102
|
description?: string;
|
|
96
103
|
keyframable?: false;
|
|
97
104
|
};
|
|
98
|
-
export type VisibleFieldSchema = NumberFieldSchema | BooleanFieldSchema | RotationCssFieldSchema | RotationDegreesFieldSchema | TranslateFieldSchema | ScaleFieldSchema | UvCoordinateFieldSchema | ColorFieldSchema | ArrayFieldSchema | EnumFieldSchema;
|
|
105
|
+
export type VisibleFieldSchema = NumberFieldSchema | BooleanFieldSchema | RotationCssFieldSchema | RotationDegreesFieldSchema | TranslateFieldSchema | TransformOriginFieldSchema | ScaleFieldSchema | UvCoordinateFieldSchema | ColorFieldSchema | ArrayFieldSchema | EnumFieldSchema;
|
|
99
106
|
export type SequenceFieldSchema = VisibleFieldSchema | HiddenFieldSchema;
|
|
100
107
|
export type SequenceSchema = {
|
|
101
108
|
[key: string]: SequenceFieldSchema;
|
|
102
109
|
};
|
|
103
110
|
export type SchemaKeysRecord<S extends SequenceSchema> = Record<keyof S, unknown>;
|
|
104
111
|
export declare const sequenceVisualStyleSchema: {
|
|
112
|
+
readonly 'style.transformOrigin': {
|
|
113
|
+
readonly type: "transform-origin";
|
|
114
|
+
readonly step: 1;
|
|
115
|
+
readonly default: "50% 50%";
|
|
116
|
+
readonly description: "Transform origin";
|
|
117
|
+
};
|
|
105
118
|
readonly 'style.translate': {
|
|
106
119
|
readonly type: "translate";
|
|
107
120
|
readonly step: 1;
|
|
@@ -155,6 +168,12 @@ export declare const sequencePremountSchema: {
|
|
|
155
168
|
};
|
|
156
169
|
};
|
|
157
170
|
export declare const sequenceStyleSchema: {
|
|
171
|
+
readonly 'style.transformOrigin': {
|
|
172
|
+
readonly type: "transform-origin";
|
|
173
|
+
readonly step: 1;
|
|
174
|
+
readonly default: "50% 50%";
|
|
175
|
+
readonly description: "Transform origin";
|
|
176
|
+
};
|
|
158
177
|
readonly 'style.translate': {
|
|
159
178
|
readonly type: "translate";
|
|
160
179
|
readonly step: 1;
|
|
@@ -240,6 +259,12 @@ export declare const sequenceSchema: {
|
|
|
240
259
|
readonly description: "Layout";
|
|
241
260
|
readonly variants: {
|
|
242
261
|
readonly 'absolute-fill': {
|
|
262
|
+
readonly 'style.transformOrigin': {
|
|
263
|
+
readonly type: "transform-origin";
|
|
264
|
+
readonly step: 1;
|
|
265
|
+
readonly default: "50% 50%";
|
|
266
|
+
readonly description: "Transform origin";
|
|
267
|
+
};
|
|
243
268
|
readonly 'style.translate': {
|
|
244
269
|
readonly type: "translate";
|
|
245
270
|
readonly step: 1;
|
|
@@ -309,6 +334,12 @@ export declare const sequenceSchemaWithoutFrom: {
|
|
|
309
334
|
readonly description: "Layout";
|
|
310
335
|
readonly variants: {
|
|
311
336
|
readonly 'absolute-fill': {
|
|
337
|
+
readonly 'style.transformOrigin': {
|
|
338
|
+
readonly type: "transform-origin";
|
|
339
|
+
readonly step: 1;
|
|
340
|
+
readonly default: "50% 50%";
|
|
341
|
+
readonly description: "Transform origin";
|
|
342
|
+
};
|
|
312
343
|
readonly 'style.translate': {
|
|
313
344
|
readonly type: "translate";
|
|
314
345
|
readonly step: 1;
|
|
@@ -2,6 +2,12 @@
|
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.sequenceSchemaDefaultLayoutNone = exports.sequenceSchemaWithoutFrom = exports.sequenceSchema = exports.fromField = exports.durationInFramesField = exports.hiddenField = exports.sequenceStyleSchema = exports.sequencePremountSchema = exports.sequenceVisualStyleSchema = void 0;
|
|
4
4
|
exports.sequenceVisualStyleSchema = {
|
|
5
|
+
'style.transformOrigin': {
|
|
6
|
+
type: 'transform-origin',
|
|
7
|
+
step: 1,
|
|
8
|
+
default: '50% 50%',
|
|
9
|
+
description: 'Transform origin',
|
|
10
|
+
},
|
|
5
11
|
'style.translate': {
|
|
6
12
|
type: 'translate',
|
|
7
13
|
step: 1,
|
package/dist/cjs/version.d.ts
CHANGED
package/dist/cjs/version.js
CHANGED