@remotion/studio 4.0.474 → 4.0.476
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/components/Canvas.js +6 -0
- package/dist/components/ColorPicker/ColorPicker.js +4 -31
- package/dist/components/ColorPicker/ColorPickerPopup.d.ts +6 -0
- package/dist/components/ColorPicker/ColorPickerPopup.js +11 -6
- package/dist/components/CompositionSelectorItem.js +4 -4
- package/dist/components/Editor.js +4 -1
- package/dist/components/GlobalKeybindings.js +12 -0
- package/dist/components/KeyboardShortcutsExplainer.js +24 -0
- package/dist/components/Modals.js +2 -1
- package/dist/components/NewComposition/ComboBox.js +1 -0
- package/dist/components/NewComposition/InputDragger.d.ts +6 -0
- package/dist/components/NewComposition/InputDragger.js +40 -14
- package/dist/components/NewComposition/RenameComposition.js +8 -1
- package/dist/components/NewComposition/RenameFolder.js +8 -1
- package/dist/components/NewComposition/RenameStaticFile.js +11 -1
- package/dist/components/Notifications/Notification.js +5 -4
- package/dist/components/Notifications/NotificationCenter.js +1 -1
- package/dist/components/ObserveDefaultPropsContext.js +6 -2
- package/dist/components/PlayPause.js +22 -66
- package/dist/components/PreviewToolbar.js +17 -3
- package/dist/components/RenderModal/RenderModalJSONPropsEditor.js +2 -1
- package/dist/components/SelectedOutlineOverlay.d.ts +104 -42
- package/dist/components/SelectedOutlineOverlay.js +1278 -336
- package/dist/components/SelectedOutlineUvControls.d.ts +17 -0
- package/dist/components/SelectedOutlineUvControls.js +167 -0
- package/dist/components/StudioCanvasCapture.d.ts +5 -0
- package/dist/components/StudioCanvasCapture.js +40 -0
- package/dist/components/Timeline/EasingEditorModal.d.ts +11 -0
- package/dist/components/Timeline/EasingEditorModal.js +247 -0
- package/dist/components/Timeline/KeyframeSettingsModal.js +1 -0
- package/dist/components/Timeline/Timeline.js +10 -7
- package/dist/components/Timeline/TimelineDeleteKeybindings.js +64 -35
- package/dist/components/Timeline/TimelineDragHandler.js +2 -2
- package/dist/components/Timeline/TimelineEffectItem.js +1 -2
- package/dist/components/Timeline/TimelineEffectPropItem.js +1 -1
- package/dist/components/Timeline/TimelineExpandedKeyframeRow.d.ts +1 -0
- package/dist/components/Timeline/TimelineExpandedKeyframeRow.js +2 -2
- package/dist/components/Timeline/TimelineExpandedTrackKeyframes.js +1 -1
- package/dist/components/Timeline/TimelineHeightContainer.js +2 -0
- package/dist/components/Timeline/TimelineItemStack.js +3 -56
- package/dist/components/Timeline/TimelineKeyframeControls.d.ts +7 -0
- package/dist/components/Timeline/TimelineKeyframeControls.js +259 -62
- package/dist/components/Timeline/TimelineKeyframeDiamond.js +4 -2
- package/dist/components/Timeline/TimelineKeyframeEasingLine.js +128 -3
- package/dist/components/Timeline/TimelineKeyframeTracksContext.d.ts +7 -0
- package/dist/components/Timeline/TimelineKeyframeTracksContext.js +17 -0
- package/dist/components/Timeline/TimelineMediaInfo.js +4 -24
- package/dist/components/Timeline/TimelinePrimitiveFieldValue.js +4 -0
- package/dist/components/Timeline/TimelineRotationField.js +21 -39
- package/dist/components/Timeline/TimelineScaleField.js +1 -1
- package/dist/components/Timeline/TimelineScrollable.js +19 -3
- package/dist/components/Timeline/TimelineSelection.d.ts +67 -3
- package/dist/components/Timeline/TimelineSelection.js +289 -32
- package/dist/components/Timeline/TimelineSequence.js +17 -9
- package/dist/components/Timeline/TimelineSequenceItem.js +328 -168
- package/dist/components/Timeline/TimelineSequenceName.d.ts +4 -2
- package/dist/components/Timeline/TimelineSequenceName.js +70 -19
- package/dist/components/Timeline/TimelineSequencePropItem.js +1 -1
- package/dist/components/Timeline/TimelineTimeIndicators.js +4 -2
- package/dist/components/Timeline/TimelineTransformOriginField.d.ts +11 -0
- package/dist/components/Timeline/TimelineTransformOriginField.js +138 -0
- package/dist/components/Timeline/TimelineTranslateField.js +1 -1
- package/dist/components/Timeline/TimelineUvCoordinateField.js +1 -1
- package/dist/components/Timeline/call-add-keyframe.d.ts +17 -0
- package/dist/components/Timeline/call-add-keyframe.js +65 -1
- package/dist/components/Timeline/delete-selected-timeline-item.js +23 -13
- package/dist/components/Timeline/disable-sequence-interactivity.d.ts +8 -0
- package/dist/components/Timeline/disable-sequence-interactivity.js +24 -0
- package/dist/components/Timeline/reset-selected-timeline-props.js +15 -7
- package/dist/components/Timeline/timeline-rotation-utils.d.ts +2 -0
- package/dist/components/Timeline/timeline-rotation-utils.js +34 -0
- package/dist/components/Timeline/transform-origin-utils.d.ts +24 -0
- package/dist/components/Timeline/transform-origin-utils.js +170 -0
- package/dist/components/Timeline/update-selected-easing.d.ts +35 -0
- package/dist/components/Timeline/update-selected-easing.js +133 -0
- package/dist/components/Timeline/use-expanded-track-keyframe-rows.d.ts +1 -0
- package/dist/components/Timeline/use-expanded-track-keyframe-rows.js +28 -0
- package/dist/components/Timeline/use-timeline-keyframe-drag.js +8 -13
- package/dist/components/canvas-capture-enabled.d.ts +1 -0
- package/dist/components/canvas-capture-enabled.js +4 -0
- package/dist/components/effect-drag-and-drop.d.ts +11 -0
- package/dist/components/effect-drag-and-drop.js +73 -0
- package/dist/components/selected-outline-geometry.d.ts +20 -0
- package/dist/components/selected-outline-geometry.js +18 -0
- package/dist/components/selected-outline-uv.d.ts +46 -0
- package/dist/components/selected-outline-uv.js +240 -0
- package/dist/esm/{chunk-xjvc8qen.js → chunk-0atarw3p.js} +8779 -5352
- package/dist/esm/internals.mjs +8779 -5352
- package/dist/esm/previewEntry.mjs +8789 -5362
- package/dist/esm/renderEntry.mjs +1 -1
- package/dist/helpers/colors.d.ts +0 -1
- package/dist/helpers/colors.js +1 -2
- package/dist/state/modals.d.ts +2 -1
- package/package.json +11 -10
|
@@ -0,0 +1,240 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.getSelectedUvHandles = exports.getUvCoordinateForPoint = exports.getUvHandleConnectionLines = exports.getUvHandlePosition = exports.tuplesEqual = void 0;
|
|
4
|
+
exports.constrainUv = constrainUv;
|
|
5
|
+
const remotion_1 = require("remotion");
|
|
6
|
+
const selected_outline_geometry_1 = require("./selected-outline-geometry");
|
|
7
|
+
const parseUvCoordinate = (value) => {
|
|
8
|
+
if (Array.isArray(value) &&
|
|
9
|
+
value.length === 2 &&
|
|
10
|
+
value.every((item) => typeof item === 'number' && Number.isFinite(item))) {
|
|
11
|
+
return [value[0], value[1]];
|
|
12
|
+
}
|
|
13
|
+
return null;
|
|
14
|
+
};
|
|
15
|
+
const tuplesEqual = (left, right) => {
|
|
16
|
+
if (!Array.isArray(left) || left.length !== 2) {
|
|
17
|
+
return false;
|
|
18
|
+
}
|
|
19
|
+
return left[0] === right[0] && left[1] === right[1];
|
|
20
|
+
};
|
|
21
|
+
exports.tuplesEqual = tuplesEqual;
|
|
22
|
+
const getBilinearUvHandlePosition = (points, uv) => {
|
|
23
|
+
const [tl, tr, br, bl] = points;
|
|
24
|
+
const top = (0, selected_outline_geometry_1.mixPoint)(tl, tr, uv[0]);
|
|
25
|
+
const bottom = (0, selected_outline_geometry_1.mixPoint)(bl, br, uv[0]);
|
|
26
|
+
return (0, selected_outline_geometry_1.mixPoint)(top, bottom, uv[1]);
|
|
27
|
+
};
|
|
28
|
+
const projectiveEpsilon = 0.000001;
|
|
29
|
+
const getProjectiveTransform = (points) => {
|
|
30
|
+
const [tl, tr, br, bl] = points;
|
|
31
|
+
const dx1 = tr.x - br.x;
|
|
32
|
+
const dx2 = bl.x - br.x;
|
|
33
|
+
const dx3 = tl.x - tr.x + br.x - bl.x;
|
|
34
|
+
const dy1 = tr.y - br.y;
|
|
35
|
+
const dy2 = bl.y - br.y;
|
|
36
|
+
const dy3 = tl.y - tr.y + br.y - bl.y;
|
|
37
|
+
let g = 0;
|
|
38
|
+
let h = 0;
|
|
39
|
+
if (Math.abs(dx3) > projectiveEpsilon || Math.abs(dy3) > projectiveEpsilon) {
|
|
40
|
+
const determinant = dx1 * dy2 - dx2 * dy1;
|
|
41
|
+
if (Math.abs(determinant) < projectiveEpsilon) {
|
|
42
|
+
return null;
|
|
43
|
+
}
|
|
44
|
+
g = (dx3 * dy2 - dx2 * dy3) / determinant;
|
|
45
|
+
h = (dx1 * dy3 - dx3 * dy1) / determinant;
|
|
46
|
+
}
|
|
47
|
+
return {
|
|
48
|
+
a: tr.x - tl.x + g * tr.x,
|
|
49
|
+
b: bl.x - tl.x + h * bl.x,
|
|
50
|
+
c: tl.x,
|
|
51
|
+
d: tr.y - tl.y + g * tr.y,
|
|
52
|
+
e: bl.y - tl.y + h * bl.y,
|
|
53
|
+
f: tl.y,
|
|
54
|
+
g,
|
|
55
|
+
h,
|
|
56
|
+
};
|
|
57
|
+
};
|
|
58
|
+
const applyProjectiveTransform = (transform, uv) => {
|
|
59
|
+
const denominator = transform.g * uv[0] + transform.h * uv[1] + 1;
|
|
60
|
+
return {
|
|
61
|
+
x: (transform.a * uv[0] + transform.b * uv[1] + transform.c) / denominator,
|
|
62
|
+
y: (transform.d * uv[0] + transform.e * uv[1] + transform.f) / denominator,
|
|
63
|
+
};
|
|
64
|
+
};
|
|
65
|
+
const getUvHandlePosition = (points, uv) => {
|
|
66
|
+
const transform = getProjectiveTransform(points);
|
|
67
|
+
return transform === null
|
|
68
|
+
? getBilinearUvHandlePosition(points, uv)
|
|
69
|
+
: applyProjectiveTransform(transform, uv);
|
|
70
|
+
};
|
|
71
|
+
exports.getUvHandlePosition = getUvHandlePosition;
|
|
72
|
+
const getUvHandleConnectionLines = ({ handles, points, }) => {
|
|
73
|
+
const handlesByField = new Map(handles.map((handle) => [
|
|
74
|
+
`${handle.effectIndex}\u0000${handle.fieldKey}`,
|
|
75
|
+
handle,
|
|
76
|
+
]));
|
|
77
|
+
const seenPairs = new Set();
|
|
78
|
+
const lines = [];
|
|
79
|
+
for (const handle of handles) {
|
|
80
|
+
const targetFieldKey = handle.fieldSchema.lineTo;
|
|
81
|
+
if (targetFieldKey === undefined || targetFieldKey === handle.fieldKey) {
|
|
82
|
+
continue;
|
|
83
|
+
}
|
|
84
|
+
const target = handlesByField.get(`${handle.effectIndex}\u0000${targetFieldKey}`);
|
|
85
|
+
if (target === undefined) {
|
|
86
|
+
continue;
|
|
87
|
+
}
|
|
88
|
+
const pairKey = [
|
|
89
|
+
handle.effectIndex,
|
|
90
|
+
...[handle.fieldKey, targetFieldKey].sort(),
|
|
91
|
+
].join('\u0000');
|
|
92
|
+
if (seenPairs.has(pairKey)) {
|
|
93
|
+
continue;
|
|
94
|
+
}
|
|
95
|
+
seenPairs.add(pairKey);
|
|
96
|
+
lines.push({
|
|
97
|
+
key: `${handle.effectIndex}-${handle.fieldKey}-${targetFieldKey}`,
|
|
98
|
+
from: (0, exports.getUvHandlePosition)(points, handle.value),
|
|
99
|
+
to: (0, exports.getUvHandlePosition)(points, target.value),
|
|
100
|
+
});
|
|
101
|
+
}
|
|
102
|
+
return lines;
|
|
103
|
+
};
|
|
104
|
+
exports.getUvHandleConnectionLines = getUvHandleConnectionLines;
|
|
105
|
+
const vectorBetween = (from, to) => {
|
|
106
|
+
return { x: to.x - from.x, y: to.y - from.y };
|
|
107
|
+
};
|
|
108
|
+
const getBilinearUvCoordinateForPoint = (points, point) => {
|
|
109
|
+
const [tl, tr, br, bl] = points;
|
|
110
|
+
let u = 0.5;
|
|
111
|
+
let v = 0.5;
|
|
112
|
+
for (let i = 0; i < 8; i++) {
|
|
113
|
+
const current = getBilinearUvHandlePosition(points, [u, v]);
|
|
114
|
+
const errorX = current.x - point.x;
|
|
115
|
+
const errorY = current.y - point.y;
|
|
116
|
+
if (Math.abs(errorX) + Math.abs(errorY) < 0.001) {
|
|
117
|
+
break;
|
|
118
|
+
}
|
|
119
|
+
const du = {
|
|
120
|
+
x: (0, selected_outline_geometry_1.mix)(tr.x - tl.x, br.x - bl.x, v),
|
|
121
|
+
y: (0, selected_outline_geometry_1.mix)(tr.y - tl.y, br.y - bl.y, v),
|
|
122
|
+
};
|
|
123
|
+
const dv = vectorBetween((0, selected_outline_geometry_1.mixPoint)(tl, tr, u), (0, selected_outline_geometry_1.mixPoint)(bl, br, u));
|
|
124
|
+
const determinant = du.x * dv.y - du.y * dv.x;
|
|
125
|
+
if (Math.abs(determinant) < 0.000001) {
|
|
126
|
+
break;
|
|
127
|
+
}
|
|
128
|
+
u -= (errorX * dv.y - errorY * dv.x) / determinant;
|
|
129
|
+
v -= (du.x * errorY - du.y * errorX) / determinant;
|
|
130
|
+
}
|
|
131
|
+
return [u, v];
|
|
132
|
+
};
|
|
133
|
+
const getUvCoordinateForPoint = (points, point) => {
|
|
134
|
+
const transform = getProjectiveTransform(points);
|
|
135
|
+
if (transform === null) {
|
|
136
|
+
return getBilinearUvCoordinateForPoint(points, point);
|
|
137
|
+
}
|
|
138
|
+
const determinant = transform.a * (transform.e - transform.f * transform.h) -
|
|
139
|
+
transform.b * (transform.d - transform.f * transform.g) +
|
|
140
|
+
transform.c * (transform.d * transform.h - transform.e * transform.g);
|
|
141
|
+
if (Math.abs(determinant) < projectiveEpsilon) {
|
|
142
|
+
return getBilinearUvCoordinateForPoint(points, point);
|
|
143
|
+
}
|
|
144
|
+
const inverseA = transform.e - transform.f * transform.h;
|
|
145
|
+
const inverseB = transform.c * transform.h - transform.b;
|
|
146
|
+
const inverseC = transform.b * transform.f - transform.c * transform.e;
|
|
147
|
+
const inverseD = transform.f * transform.g - transform.d;
|
|
148
|
+
const inverseE = transform.a - transform.c * transform.g;
|
|
149
|
+
const inverseF = transform.c * transform.d - transform.a * transform.f;
|
|
150
|
+
const inverseG = transform.d * transform.h - transform.e * transform.g;
|
|
151
|
+
const inverseH = transform.b * transform.g - transform.a * transform.h;
|
|
152
|
+
const inverseI = transform.a * transform.e - transform.b * transform.d;
|
|
153
|
+
const denominator = inverseG * point.x + inverseH * point.y + inverseI;
|
|
154
|
+
if (Math.abs(denominator) < projectiveEpsilon) {
|
|
155
|
+
return getBilinearUvCoordinateForPoint(points, point);
|
|
156
|
+
}
|
|
157
|
+
return [
|
|
158
|
+
(inverseA * point.x + inverseB * point.y + inverseC) / denominator,
|
|
159
|
+
(inverseD * point.x + inverseE * point.y + inverseF) / denominator,
|
|
160
|
+
];
|
|
161
|
+
};
|
|
162
|
+
exports.getUvCoordinateForPoint = getUvCoordinateForPoint;
|
|
163
|
+
function constrainUv(value, schema) {
|
|
164
|
+
var _a, _b;
|
|
165
|
+
const min = (_a = schema.min) !== null && _a !== void 0 ? _a : -Infinity;
|
|
166
|
+
const max = (_b = schema.max) !== null && _b !== void 0 ? _b : Infinity;
|
|
167
|
+
return [(0, selected_outline_geometry_1.clamp)(value[0], min, max), (0, selected_outline_geometry_1.clamp)(value[1], min, max)];
|
|
168
|
+
}
|
|
169
|
+
const getSelectedUvHandles = ({ propStatuses, clientId, getEffectDragOverrides, nodePath, selectedEffects, sequence, sourceFrame, }) => {
|
|
170
|
+
if (clientId === null || selectedEffects === undefined) {
|
|
171
|
+
return [];
|
|
172
|
+
}
|
|
173
|
+
const handles = [];
|
|
174
|
+
for (const [effectIndex, selectedFields] of selectedEffects) {
|
|
175
|
+
const effect = sequence.effects[effectIndex];
|
|
176
|
+
if (!effect) {
|
|
177
|
+
continue;
|
|
178
|
+
}
|
|
179
|
+
const effectStatus = remotion_1.Internals.getEffectPropStatusesCtx({
|
|
180
|
+
propStatuses,
|
|
181
|
+
nodePath,
|
|
182
|
+
effectIndex,
|
|
183
|
+
});
|
|
184
|
+
if (effectStatus.type !== 'can-update-effect') {
|
|
185
|
+
continue;
|
|
186
|
+
}
|
|
187
|
+
const dragOverrides = getEffectDragOverrides(nodePath, effectIndex);
|
|
188
|
+
const activeSchema = remotion_1.Internals.flattenActiveSchema(effect.schema, (key) => {
|
|
189
|
+
const propStatus = effectStatus.props[key];
|
|
190
|
+
if ((propStatus === null || propStatus === void 0 ? void 0 : propStatus.status) !== 'static' &&
|
|
191
|
+
(propStatus === null || propStatus === void 0 ? void 0 : propStatus.status) !== 'keyframed') {
|
|
192
|
+
return undefined;
|
|
193
|
+
}
|
|
194
|
+
return remotion_1.Internals.getEffectiveVisualModeValue({
|
|
195
|
+
propStatus,
|
|
196
|
+
dragOverrideValue: dragOverrides[key],
|
|
197
|
+
defaultValue: undefined,
|
|
198
|
+
frame: sourceFrame,
|
|
199
|
+
shouldResortToDefaultValueIfUndefined: false,
|
|
200
|
+
});
|
|
201
|
+
});
|
|
202
|
+
for (const [fieldKey, fieldSchema] of Object.entries(activeSchema)) {
|
|
203
|
+
if (fieldSchema.type !== 'uv-coordinate' ||
|
|
204
|
+
(!selectedFields.allFields && !selectedFields.fieldKeys.has(fieldKey))) {
|
|
205
|
+
continue;
|
|
206
|
+
}
|
|
207
|
+
const propStatus = effectStatus.props[fieldKey];
|
|
208
|
+
if ((propStatus === null || propStatus === void 0 ? void 0 : propStatus.status) !== 'static' &&
|
|
209
|
+
(propStatus === null || propStatus === void 0 ? void 0 : propStatus.status) !== 'keyframed') {
|
|
210
|
+
continue;
|
|
211
|
+
}
|
|
212
|
+
const dragOverrideValue = dragOverrides[fieldKey];
|
|
213
|
+
const effectiveValue = remotion_1.Internals.getEffectiveVisualModeValue({
|
|
214
|
+
propStatus,
|
|
215
|
+
dragOverrideValue,
|
|
216
|
+
defaultValue: fieldSchema.default,
|
|
217
|
+
frame: sourceFrame,
|
|
218
|
+
shouldResortToDefaultValueIfUndefined: true,
|
|
219
|
+
});
|
|
220
|
+
const value = parseUvCoordinate(effectiveValue);
|
|
221
|
+
if (value === null) {
|
|
222
|
+
continue;
|
|
223
|
+
}
|
|
224
|
+
handles.push({
|
|
225
|
+
clientId,
|
|
226
|
+
propStatus,
|
|
227
|
+
effectIndex,
|
|
228
|
+
fieldDefault: fieldSchema.default,
|
|
229
|
+
fieldKey,
|
|
230
|
+
fieldSchema,
|
|
231
|
+
nodePath,
|
|
232
|
+
schema: effect.schema,
|
|
233
|
+
sourceFrame,
|
|
234
|
+
value,
|
|
235
|
+
});
|
|
236
|
+
}
|
|
237
|
+
}
|
|
238
|
+
return handles;
|
|
239
|
+
};
|
|
240
|
+
exports.getSelectedUvHandles = getSelectedUvHandles;
|