@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.
Files changed (94) hide show
  1. package/dist/components/Canvas.js +6 -0
  2. package/dist/components/ColorPicker/ColorPicker.js +4 -31
  3. package/dist/components/ColorPicker/ColorPickerPopup.d.ts +6 -0
  4. package/dist/components/ColorPicker/ColorPickerPopup.js +11 -6
  5. package/dist/components/CompositionSelectorItem.js +4 -4
  6. package/dist/components/Editor.js +4 -1
  7. package/dist/components/GlobalKeybindings.js +12 -0
  8. package/dist/components/KeyboardShortcutsExplainer.js +24 -0
  9. package/dist/components/Modals.js +2 -1
  10. package/dist/components/NewComposition/ComboBox.js +1 -0
  11. package/dist/components/NewComposition/InputDragger.d.ts +6 -0
  12. package/dist/components/NewComposition/InputDragger.js +40 -14
  13. package/dist/components/NewComposition/RenameComposition.js +8 -1
  14. package/dist/components/NewComposition/RenameFolder.js +8 -1
  15. package/dist/components/NewComposition/RenameStaticFile.js +11 -1
  16. package/dist/components/Notifications/Notification.js +5 -4
  17. package/dist/components/Notifications/NotificationCenter.js +1 -1
  18. package/dist/components/ObserveDefaultPropsContext.js +6 -2
  19. package/dist/components/PlayPause.js +22 -66
  20. package/dist/components/PreviewToolbar.js +17 -3
  21. package/dist/components/RenderModal/RenderModalJSONPropsEditor.js +2 -1
  22. package/dist/components/SelectedOutlineOverlay.d.ts +104 -42
  23. package/dist/components/SelectedOutlineOverlay.js +1278 -336
  24. package/dist/components/SelectedOutlineUvControls.d.ts +17 -0
  25. package/dist/components/SelectedOutlineUvControls.js +167 -0
  26. package/dist/components/StudioCanvasCapture.d.ts +5 -0
  27. package/dist/components/StudioCanvasCapture.js +40 -0
  28. package/dist/components/Timeline/EasingEditorModal.d.ts +11 -0
  29. package/dist/components/Timeline/EasingEditorModal.js +247 -0
  30. package/dist/components/Timeline/KeyframeSettingsModal.js +1 -0
  31. package/dist/components/Timeline/Timeline.js +10 -7
  32. package/dist/components/Timeline/TimelineDeleteKeybindings.js +64 -35
  33. package/dist/components/Timeline/TimelineDragHandler.js +2 -2
  34. package/dist/components/Timeline/TimelineEffectItem.js +1 -2
  35. package/dist/components/Timeline/TimelineEffectPropItem.js +1 -1
  36. package/dist/components/Timeline/TimelineExpandedKeyframeRow.d.ts +1 -0
  37. package/dist/components/Timeline/TimelineExpandedKeyframeRow.js +2 -2
  38. package/dist/components/Timeline/TimelineExpandedTrackKeyframes.js +1 -1
  39. package/dist/components/Timeline/TimelineHeightContainer.js +2 -0
  40. package/dist/components/Timeline/TimelineItemStack.js +3 -56
  41. package/dist/components/Timeline/TimelineKeyframeControls.d.ts +7 -0
  42. package/dist/components/Timeline/TimelineKeyframeControls.js +259 -62
  43. package/dist/components/Timeline/TimelineKeyframeDiamond.js +4 -2
  44. package/dist/components/Timeline/TimelineKeyframeEasingLine.js +128 -3
  45. package/dist/components/Timeline/TimelineKeyframeTracksContext.d.ts +7 -0
  46. package/dist/components/Timeline/TimelineKeyframeTracksContext.js +17 -0
  47. package/dist/components/Timeline/TimelineMediaInfo.js +4 -24
  48. package/dist/components/Timeline/TimelinePrimitiveFieldValue.js +4 -0
  49. package/dist/components/Timeline/TimelineRotationField.js +21 -39
  50. package/dist/components/Timeline/TimelineScaleField.js +1 -1
  51. package/dist/components/Timeline/TimelineScrollable.js +19 -3
  52. package/dist/components/Timeline/TimelineSelection.d.ts +67 -3
  53. package/dist/components/Timeline/TimelineSelection.js +289 -32
  54. package/dist/components/Timeline/TimelineSequence.js +17 -9
  55. package/dist/components/Timeline/TimelineSequenceItem.js +328 -168
  56. package/dist/components/Timeline/TimelineSequenceName.d.ts +4 -2
  57. package/dist/components/Timeline/TimelineSequenceName.js +70 -19
  58. package/dist/components/Timeline/TimelineSequencePropItem.js +1 -1
  59. package/dist/components/Timeline/TimelineTimeIndicators.js +4 -2
  60. package/dist/components/Timeline/TimelineTransformOriginField.d.ts +11 -0
  61. package/dist/components/Timeline/TimelineTransformOriginField.js +138 -0
  62. package/dist/components/Timeline/TimelineTranslateField.js +1 -1
  63. package/dist/components/Timeline/TimelineUvCoordinateField.js +1 -1
  64. package/dist/components/Timeline/call-add-keyframe.d.ts +17 -0
  65. package/dist/components/Timeline/call-add-keyframe.js +65 -1
  66. package/dist/components/Timeline/delete-selected-timeline-item.js +23 -13
  67. package/dist/components/Timeline/disable-sequence-interactivity.d.ts +8 -0
  68. package/dist/components/Timeline/disable-sequence-interactivity.js +24 -0
  69. package/dist/components/Timeline/reset-selected-timeline-props.js +15 -7
  70. package/dist/components/Timeline/timeline-rotation-utils.d.ts +2 -0
  71. package/dist/components/Timeline/timeline-rotation-utils.js +34 -0
  72. package/dist/components/Timeline/transform-origin-utils.d.ts +24 -0
  73. package/dist/components/Timeline/transform-origin-utils.js +170 -0
  74. package/dist/components/Timeline/update-selected-easing.d.ts +35 -0
  75. package/dist/components/Timeline/update-selected-easing.js +133 -0
  76. package/dist/components/Timeline/use-expanded-track-keyframe-rows.d.ts +1 -0
  77. package/dist/components/Timeline/use-expanded-track-keyframe-rows.js +28 -0
  78. package/dist/components/Timeline/use-timeline-keyframe-drag.js +8 -13
  79. package/dist/components/canvas-capture-enabled.d.ts +1 -0
  80. package/dist/components/canvas-capture-enabled.js +4 -0
  81. package/dist/components/effect-drag-and-drop.d.ts +11 -0
  82. package/dist/components/effect-drag-and-drop.js +73 -0
  83. package/dist/components/selected-outline-geometry.d.ts +20 -0
  84. package/dist/components/selected-outline-geometry.js +18 -0
  85. package/dist/components/selected-outline-uv.d.ts +46 -0
  86. package/dist/components/selected-outline-uv.js +240 -0
  87. package/dist/esm/{chunk-xjvc8qen.js → chunk-0atarw3p.js} +8779 -5352
  88. package/dist/esm/internals.mjs +8779 -5352
  89. package/dist/esm/previewEntry.mjs +8789 -5362
  90. package/dist/esm/renderEntry.mjs +1 -1
  91. package/dist/helpers/colors.d.ts +0 -1
  92. package/dist/helpers/colors.js +1 -2
  93. package/dist/state/modals.d.ts +2 -1
  94. 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;