@remotion/studio 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.
Files changed (73) hide show
  1. package/dist/components/Canvas.js +6 -0
  2. package/dist/components/ColorPicker/ColorPicker.js +4 -31
  3. package/dist/components/CompositionSelectorItem.js +4 -4
  4. package/dist/components/Editor.js +4 -1
  5. package/dist/components/Modals.js +2 -1
  6. package/dist/components/NewComposition/ComboBox.js +1 -0
  7. package/dist/components/PreviewToolbar.js +2 -2
  8. package/dist/components/SelectedOutlineOverlay.d.ts +58 -32
  9. package/dist/components/SelectedOutlineOverlay.js +766 -315
  10. package/dist/components/SelectedOutlineUvControls.d.ts +17 -0
  11. package/dist/components/SelectedOutlineUvControls.js +167 -0
  12. package/dist/components/StudioCanvasCapture.d.ts +5 -0
  13. package/dist/components/StudioCanvasCapture.js +40 -0
  14. package/dist/components/Timeline/EasingEditorModal.d.ts +11 -0
  15. package/dist/components/Timeline/EasingEditorModal.js +247 -0
  16. package/dist/components/Timeline/KeyframeSettingsModal.js +1 -0
  17. package/dist/components/Timeline/Timeline.js +10 -7
  18. package/dist/components/Timeline/TimelineDeleteKeybindings.js +64 -35
  19. package/dist/components/Timeline/TimelineDragHandler.js +2 -2
  20. package/dist/components/Timeline/TimelineEffectItem.js +1 -2
  21. package/dist/components/Timeline/TimelineEffectPropItem.js +1 -1
  22. package/dist/components/Timeline/TimelineExpandedKeyframeRow.d.ts +1 -0
  23. package/dist/components/Timeline/TimelineExpandedKeyframeRow.js +2 -2
  24. package/dist/components/Timeline/TimelineExpandedTrackKeyframes.js +1 -1
  25. package/dist/components/Timeline/TimelineHeightContainer.js +2 -0
  26. package/dist/components/Timeline/TimelineItemStack.js +3 -56
  27. package/dist/components/Timeline/TimelineKeyframeControls.d.ts +7 -0
  28. package/dist/components/Timeline/TimelineKeyframeControls.js +259 -62
  29. package/dist/components/Timeline/TimelineKeyframeDiamond.js +4 -2
  30. package/dist/components/Timeline/TimelineKeyframeEasingLine.js +128 -3
  31. package/dist/components/Timeline/TimelineKeyframeTracksContext.d.ts +7 -0
  32. package/dist/components/Timeline/TimelineKeyframeTracksContext.js +17 -0
  33. package/dist/components/Timeline/TimelineMediaInfo.js +4 -24
  34. package/dist/components/Timeline/TimelinePrimitiveFieldValue.js +4 -0
  35. package/dist/components/Timeline/TimelineRotationField.js +5 -23
  36. package/dist/components/Timeline/TimelineScrollable.js +19 -3
  37. package/dist/components/Timeline/TimelineSelection.d.ts +67 -3
  38. package/dist/components/Timeline/TimelineSelection.js +289 -32
  39. package/dist/components/Timeline/TimelineSequence.js +17 -9
  40. package/dist/components/Timeline/TimelineSequenceItem.js +29 -61
  41. package/dist/components/Timeline/TimelineSequenceName.js +3 -17
  42. package/dist/components/Timeline/TimelineSequencePropItem.js +1 -1
  43. package/dist/components/Timeline/TimelineTimeIndicators.js +4 -2
  44. package/dist/components/Timeline/TimelineTransformOriginField.d.ts +11 -0
  45. package/dist/components/Timeline/TimelineTransformOriginField.js +138 -0
  46. package/dist/components/Timeline/call-add-keyframe.d.ts +17 -0
  47. package/dist/components/Timeline/call-add-keyframe.js +65 -1
  48. package/dist/components/Timeline/delete-selected-timeline-item.js +23 -13
  49. package/dist/components/Timeline/reset-selected-timeline-props.js +13 -5
  50. package/dist/components/Timeline/timeline-rotation-utils.d.ts +2 -0
  51. package/dist/components/Timeline/timeline-rotation-utils.js +32 -0
  52. package/dist/components/Timeline/transform-origin-utils.d.ts +24 -0
  53. package/dist/components/Timeline/transform-origin-utils.js +170 -0
  54. package/dist/components/Timeline/update-selected-easing.d.ts +35 -0
  55. package/dist/components/Timeline/update-selected-easing.js +133 -0
  56. package/dist/components/Timeline/use-expanded-track-keyframe-rows.d.ts +1 -0
  57. package/dist/components/Timeline/use-expanded-track-keyframe-rows.js +28 -0
  58. package/dist/components/canvas-capture-enabled.d.ts +1 -0
  59. package/dist/components/canvas-capture-enabled.js +4 -0
  60. package/dist/components/effect-drag-and-drop.d.ts +11 -0
  61. package/dist/components/effect-drag-and-drop.js +73 -0
  62. package/dist/components/selected-outline-geometry.d.ts +20 -0
  63. package/dist/components/selected-outline-geometry.js +18 -0
  64. package/dist/components/selected-outline-uv.d.ts +46 -0
  65. package/dist/components/selected-outline-uv.js +240 -0
  66. package/dist/esm/{chunk-xjvc8qen.js → chunk-qaqqvw4q.js} +7418 -4943
  67. package/dist/esm/internals.mjs +7418 -4943
  68. package/dist/esm/previewEntry.mjs +7426 -4951
  69. package/dist/esm/renderEntry.mjs +1 -1
  70. package/dist/helpers/colors.d.ts +0 -1
  71. package/dist/helpers/colors.js +1 -2
  72. package/dist/state/modals.d.ts +2 -1
  73. 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;