@revideo/2d 0.2.4-alpha.894 → 0.2.4-alpha.897

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 (3) hide show
  1. package/editor/index.css +1 -1
  2. package/editor/index.js +245 -529
  3. package/package.json +4 -4
package/editor/index.css CHANGED
@@ -30,4 +30,4 @@
30
30
  background-color: var(--background-color);
31
31
  border-radius: var(--radius);
32
32
  margin-right: 8px;
33
- }
33
+ }
package/editor/index.js CHANGED
@@ -1,624 +1,340 @@
1
- import {
2
- computed,
3
- signal,
4
- useComputed,
5
- useSignal,
6
- useSignalEffect,
7
- } from '@preact/signals';
8
- import {NODE_NAME} from '@revideo/2d';
9
- import {SceneRenderEvent, Vector2} from '@revideo/core';
10
- import {
11
- AccountTree,
12
- AutoField,
13
- Button,
14
- Collapse,
15
- Group,
16
- Label,
17
- MouseButton,
18
- OverlayWrapper,
19
- Pane,
20
- Separator,
21
- Tab,
22
- Toggle,
23
- UnknownField,
24
- emphasize,
25
- findAndOpenFirstUserFile,
26
- makeEditorPlugin,
27
- useApplication,
28
- useCurrentScene,
29
- usePanels,
30
- useReducedMotion,
31
- useViewportContext,
32
- useViewportMatrix,
33
- } from '@revideo/ui';
34
- import {createContext} from 'preact';
35
- import {useContext, useEffect, useMemo, useRef} from 'preact/hooks';
36
- import {Fragment, jsx, jsxs} from 'preact/jsx-runtime';
37
1
  import './index.css';
2
+ import { useApplication, useCurrentScene, Pane, Separator, Group, Label, Button, findAndOpenFirstUserFile, UnknownField, AutoField, useViewportContext, useViewportMatrix, OverlayWrapper, MouseButton, Toggle, Collapse, usePanels, useReducedMotion, emphasize, Tab, AccountTree, makeEditorPlugin } from '@revideo/ui';
3
+ import { jsx, jsxs, Fragment } from 'preact/jsx-runtime';
4
+ import { signal, computed, useSignalEffect, useComputed, useSignal } from '@preact/signals';
5
+ import { SceneRenderEvent, Vector2 } from '@revideo/core';
6
+ import { createContext } from 'preact';
7
+ import { useMemo, useContext, useRef, useEffect } from 'preact/hooks';
8
+ import { NODE_NAME } from '@revideo/2d';
38
9
 
39
10
  const PluginContext = createContext(null);
40
11
  const NodeInspectorKey = '@revideo/2d/node-inspector';
41
12
  function usePluginState() {
42
- return useContext(PluginContext);
13
+ return useContext(PluginContext);
43
14
  }
44
- function Provider({children}) {
45
- const {inspection} = useApplication();
46
- const currentScene = useCurrentScene();
47
- const state = useMemo(() => {
48
- const scene = signal(currentScene);
49
- const selectedKey = signal(null);
50
- const afterRender = signal(0);
51
- const hoveredKey = signal(null);
52
- const openNodes = new Map();
53
- const selectedChain = computed(() => {
54
- const chain = new Set();
55
- const key = selectedKey.value;
56
- const selectedNode = scene.value?.getNode(key);
57
- if (selectedNode) {
58
- let node = selectedNode.parent() ?? null;
59
- while (node) {
60
- chain.add(node.key);
61
- node = node.parent();
15
+ function Provider({ children }) {
16
+ const { inspection } = useApplication();
17
+ const currentScene = useCurrentScene();
18
+ const state = useMemo(() => {
19
+ const scene = signal(currentScene);
20
+ const selectedKey = signal(null);
21
+ const afterRender = signal(0);
22
+ const hoveredKey = signal(null);
23
+ const openNodes = new Map();
24
+ const selectedChain = computed(() => {
25
+ const chain = new Set();
26
+ const key = selectedKey.value;
27
+ const selectedNode = scene.value?.getNode(key);
28
+ if (selectedNode) {
29
+ let node = selectedNode.parent() ?? null;
30
+ while (node) {
31
+ chain.add(node.key);
32
+ node = node.parent();
33
+ }
34
+ }
35
+ return chain;
36
+ });
37
+ return {
38
+ selectedKey,
39
+ hoveredKey,
40
+ afterRender,
41
+ openNodes,
42
+ selectedChain,
43
+ scene,
44
+ };
45
+ }, []);
46
+ state.scene.value = currentScene;
47
+ useSignalEffect(() => state.scene.value?.onRenderLifecycle.subscribe(([event]) => {
48
+ if (event === SceneRenderEvent.AfterRender) {
49
+ state.afterRender.value++;
50
+ }
51
+ }));
52
+ useSignalEffect(() => {
53
+ const { key, payload } = inspection.value;
54
+ if (key === NodeInspectorKey) {
55
+ state.selectedKey.value = payload;
62
56
  }
63
- }
64
- return chain;
65
57
  });
66
- return {
67
- selectedKey,
68
- hoveredKey,
69
- afterRender,
70
- openNodes,
71
- selectedChain,
72
- scene,
73
- };
74
- }, []);
75
- state.scene.value = currentScene;
76
- useSignalEffect(() =>
77
- state.scene.value?.onRenderLifecycle.subscribe(([event]) => {
78
- if (event === SceneRenderEvent.AfterRender) {
79
- state.afterRender.value++;
80
- }
81
- }),
82
- );
83
- useSignalEffect(() => {
84
- const {key, payload} = inspection.value;
85
- if (key === NodeInspectorKey) {
86
- state.selectedKey.value = payload;
87
- }
88
- });
89
- useSignalEffect(() => {
90
- const nodeKey = state.selectedKey.value;
91
- const {key, payload} = inspection.peek();
92
- if (key === NodeInspectorKey && !nodeKey) {
93
- inspection.value = {key: '', payload: null};
94
- } else if (payload !== nodeKey) {
95
- inspection.value = {key: NodeInspectorKey, payload: nodeKey};
96
- }
97
- });
98
- return jsx(PluginContext.Provider, {value: state, children: children});
58
+ useSignalEffect(() => {
59
+ const nodeKey = state.selectedKey.value;
60
+ const { key, payload } = inspection.peek();
61
+ if (key === NodeInspectorKey && !nodeKey) {
62
+ inspection.value = { key: '', payload: null };
63
+ }
64
+ else if (payload !== nodeKey) {
65
+ inspection.value = { key: NodeInspectorKey, payload: nodeKey };
66
+ }
67
+ });
68
+ return (jsx(PluginContext.Provider, { value: state, children: children }));
99
69
  }
100
70
 
101
71
  function Component$1() {
102
- const {inspection} = useApplication();
103
- const {scene, afterRender} = usePluginState();
104
- const node = useComputed(() => {
105
- afterRender.value;
106
- const {payload} = inspection.value;
107
- return scene.value?.getNode(payload);
108
- });
109
- const attributes = useComputed(() => {
110
- afterRender.value;
111
- const currentNode = node.value;
112
- const attributes = [];
113
- if (currentNode) {
114
- for (const {key, meta, signal} of currentNode) {
115
- if (!meta.inspectable) continue;
116
- attributes.push([key, signal()]);
117
- }
118
- }
119
- return attributes;
120
- });
121
- const stack = node.value?.creationStack;
122
- return jsxs(Pane, {
123
- title: 'Node Inspector',
124
- id: 'node-inspector-pane',
125
- children: [
126
- jsx(Separator, {size: 1}),
127
- stack &&
128
- jsxs(Group, {
129
- children: [
130
- jsx(Label, {}),
131
- jsx(Button, {
132
- onClick: () => findAndOpenFirstUserFile(stack),
133
- main: true,
134
- children: 'GO TO SOURCE',
135
- }),
136
- ],
137
- }),
138
- jsxs(Group, {
139
- children: [
140
- jsx(Label, {children: 'key'}),
141
- jsx(UnknownField, {value: inspection.value.payload}),
142
- ],
143
- }),
144
- !node.value &&
145
- jsxs(Group, {
146
- children: [
147
- jsx(Label, {}),
148
- "Couldn't find the node. It may have been deleted or doesn't exist yet.",
149
- ],
150
- }),
151
- attributes.value.map(([key, value]) =>
152
- jsxs(
153
- Group,
154
- {
155
- children: [
156
- jsx(Label, {children: key}),
157
- jsx(AutoField, {value: value}),
158
- ],
159
- },
160
- key,
161
- ),
162
- ),
163
- ],
164
- });
72
+ const { inspection } = useApplication();
73
+ const { scene, afterRender } = usePluginState();
74
+ const node = useComputed(() => {
75
+ afterRender.value;
76
+ const { payload } = inspection.value;
77
+ return scene.value?.getNode(payload);
78
+ });
79
+ const attributes = useComputed(() => {
80
+ afterRender.value;
81
+ const currentNode = node.value;
82
+ const attributes = [];
83
+ if (currentNode) {
84
+ for (const { key, meta, signal } of currentNode) {
85
+ if (!meta.inspectable)
86
+ continue;
87
+ attributes.push([key, signal()]);
88
+ }
89
+ }
90
+ return attributes;
91
+ });
92
+ const stack = node.value?.creationStack;
93
+ return (jsxs(Pane, { title: "Node Inspector", id: "node-inspector-pane", children: [jsx(Separator, { size: 1 }), stack && (jsxs(Group, { children: [jsx(Label, {}), jsx(Button, { onClick: () => findAndOpenFirstUserFile(stack), main: true, children: "GO TO SOURCE" })] })), jsxs(Group, { children: [jsx(Label, { children: "key" }), jsx(UnknownField, { value: inspection.value.payload })] }), !node.value && (jsxs(Group, { children: [jsx(Label, {}), "Couldn't find the node. It may have been deleted or doesn't exist yet."] })), attributes.value.map(([key, value]) => (jsxs(Group, { children: [jsx(Label, { children: key }), jsx(AutoField, { value: value })] }, key)))] }));
165
94
  }
166
95
  const NodeInspectorConfig = {
167
- key: NodeInspectorKey,
168
- component: Component$1,
96
+ key: NodeInspectorKey,
97
+ component: Component$1,
169
98
  };
170
99
 
171
- function Component({children}) {
172
- const state = useViewportContext();
173
- const {scene, selectedKey} = usePluginState();
174
- const matrix = useViewportMatrix();
175
- return jsx(OverlayWrapper, {
176
- onPointerDown: event => {
177
- if (event.button !== MouseButton.Left || event.shiftKey) return;
178
- if (!scene.value) return;
179
- event.stopPropagation();
180
- const position = new Vector2(
181
- event.x - state.rect.x,
182
- event.y - state.rect.y,
183
- ).transformAsPoint(matrix.inverse());
184
- selectedKey.value = scene.value.inspectPosition(position.x, position.y);
185
- },
186
- children: children,
187
- });
100
+ function Component({ children }) {
101
+ const state = useViewportContext();
102
+ const { scene, selectedKey } = usePluginState();
103
+ const matrix = useViewportMatrix();
104
+ return (jsx(OverlayWrapper, { onPointerDown: event => {
105
+ if (event.button !== MouseButton.Left || event.shiftKey)
106
+ return;
107
+ if (!scene.value)
108
+ return;
109
+ event.stopPropagation();
110
+ const position = new Vector2(event.x - state.rect.x, event.y - state.rect.y).transformAsPoint(matrix.inverse());
111
+ selectedKey.value = scene.value.inspectPosition(position.x, position.y);
112
+ }, children: children }));
188
113
  }
189
114
  function drawHook() {
190
- const {selectedKey, hoveredKey, afterRender, scene} = usePluginState();
191
- selectedKey.value;
192
- hoveredKey.value;
193
- afterRender.value;
194
- return (ctx, matrix) => {
195
- const currentScene = scene.peek();
196
- if (!currentScene) return;
197
- let node = currentScene.getNode(selectedKey.value);
198
- if (node) {
199
- currentScene.drawOverlay(node.key, matrix, ctx);
200
- }
201
- node = currentScene.getNode(hoveredKey.value);
202
- if (node && hoveredKey.value !== selectedKey.value) {
203
- ctx.globalAlpha = 0.5;
204
- currentScene.drawOverlay(hoveredKey.value, matrix, ctx);
205
- }
206
- };
115
+ const { selectedKey, hoveredKey, afterRender, scene } = usePluginState();
116
+ selectedKey.value;
117
+ hoveredKey.value;
118
+ afterRender.value;
119
+ return (ctx, matrix) => {
120
+ const currentScene = scene.peek();
121
+ if (!currentScene)
122
+ return;
123
+ let node = currentScene.getNode(selectedKey.value);
124
+ if (node) {
125
+ currentScene.drawOverlay(node.key, matrix, ctx);
126
+ }
127
+ node = currentScene.getNode(hoveredKey.value);
128
+ if (node && hoveredKey.value !== selectedKey.value) {
129
+ ctx.globalAlpha = 0.5;
130
+ currentScene.drawOverlay(hoveredKey.value, matrix, ctx);
131
+ }
132
+ };
207
133
  }
208
134
  const PreviewOverlayConfig = {
209
- drawHook,
210
- component: Component,
135
+ drawHook,
136
+ component: Component,
211
137
  };
212
138
 
213
139
  function CircleIcon() {
214
- return jsx('svg', {
215
- viewBox: '0 0 20 20',
216
- fill: 'currentColor',
217
- children: jsx('path', {
218
- d: 'M10,5C12.76,5 15,7.24 15,10C15,12.76 12.76,15 10,15C7.24,15 5,12.76 5,10C5,7.24 7.24,5 10,5ZM10,7C8.344,7 7,8.344 7,10C7,11.656 8.344,13 10,13C11.656,13 13,11.656 13,10C13,8.344 11.656,7 10,7Z',
219
- }),
220
- });
140
+ return (jsx("svg", { viewBox: "0 0 20 20", fill: "currentColor", children: jsx("path", { d: "M10,5C12.76,5 15,7.24 15,10C15,12.76 12.76,15 10,15C7.24,15 5,12.76 5,10C5,7.24 7.24,5 10,5ZM10,7C8.344,7 7,8.344 7,10C7,11.656 8.344,13 10,13C11.656,13 13,11.656 13,10C13,8.344 11.656,7 10,7Z" }) }));
221
141
  }
222
142
 
223
143
  function CodeBlockIcon() {
224
- return jsxs('svg', {
225
- viewBox: '0 0 20 20',
226
- fill: 'currentColor',
227
- children: [
228
- jsx('path', {
229
- d: 'M5,9L5,6.999C5,6.469 5.211,5.96 5.585,5.586C5.96,5.211 6.469,5 6.999,5L9,5L9,7L6.999,7L7,9L7,11L7,13L8.985,13L9,15L7,15C5.895,15 5,14.105 5,13L5,11L4,11L4,9L5,9Z',
230
- }),
231
- jsx('path', {
232
- d: 'M15,11L15,13.001C15,13.531 14.789,14.04 14.415,14.414C14.04,14.789 13.531,15 13.001,15L11,15L11,13L13,13L13,11L13,9L13,7L11.015,7L11,5L13,5C14.105,5 15,5.895 15,7L15,9L16,9L16,11L15,11Z',
233
- }),
234
- ],
235
- });
144
+ return (jsxs("svg", { viewBox: "0 0 20 20", fill: "currentColor", children: [jsx("path", { d: "M5,9L5,6.999C5,6.469 5.211,5.96 5.585,5.586C5.96,5.211 6.469,5 6.999,5L9,5L9,7L6.999,7L7,9L7,11L7,13L8.985,13L9,15L7,15C5.895,15 5,14.105 5,13L5,11L4,11L4,9L5,9Z" }), jsx("path", { d: "M15,11L15,13.001C15,13.531 14.789,14.04 14.415,14.414C14.04,14.789 13.531,15 13.001,15L11,15L11,13L13,13L13,11L13,9L13,7L11.015,7L11,5L13,5C14.105,5 15,5.895 15,7L15,9L16,9L16,11L15,11Z" })] }));
236
145
  }
237
146
 
238
147
  function CurveIcon() {
239
- return jsx('svg', {
240
- viewBox: '0 0 20 20',
241
- fill: 'currentColor',
242
- children: jsx('path', {
243
- d: 'M12.19,6.47L13.595,5.047C15.519,6.947 15.187,8.932 14.229,9.951C13.675,10.541 12.879,10.861 12.016,10.767C11.261,10.685 10.426,10.278 9.708,9.348C9.292,8.809 8.878,8.441 8.471,8.249C8.217,8.13 7.979,8.084 7.77,8.154C7.565,8.222 7.409,8.394 7.287,8.621C7.097,8.975 7.001,9.444 7,10.003C6.996,11.584 7.848,12.746 8.91,12.946C9.535,13.064 10.185,12.783 10.687,12.082L12.313,13.247C11,15.079 9.118,15.344 7.581,14.591C6.161,13.896 4.994,12.246 5,9.997C5.005,7.945 5.963,6.649 7.136,6.257C8.281,5.874 9.866,6.278 11.292,8.126C11.81,8.799 12.421,8.954 12.772,8.581C13.196,8.13 13.042,7.312 12.19,6.47Z',
244
- }),
245
- });
148
+ return (jsx("svg", { viewBox: "0 0 20 20", fill: "currentColor", children: jsx("path", { d: "M12.19,6.47L13.595,5.047C15.519,6.947 15.187,8.932 14.229,9.951C13.675,10.541 12.879,10.861 12.016,10.767C11.261,10.685 10.426,10.278 9.708,9.348C9.292,8.809 8.878,8.441 8.471,8.249C8.217,8.13 7.979,8.084 7.77,8.154C7.565,8.222 7.409,8.394 7.287,8.621C7.097,8.975 7.001,9.444 7,10.003C6.996,11.584 7.848,12.746 8.91,12.946C9.535,13.064 10.185,12.783 10.687,12.082L12.313,13.247C11,15.079 9.118,15.344 7.581,14.591C6.161,13.896 4.994,12.246 5,9.997C5.005,7.945 5.963,6.649 7.136,6.257C8.281,5.874 9.866,6.278 11.292,8.126C11.81,8.799 12.421,8.954 12.772,8.581C13.196,8.13 13.042,7.312 12.19,6.47Z" }) }));
246
149
  }
247
150
 
248
151
  function GridIcon() {
249
- return jsx('svg', {
250
- viewBox: '0 0 20 20',
251
- fill: 'currentColor',
252
- children: jsx('path', {
253
- d: 'M6,8L4,8L4,6L6,6L6,4L8,4L8,6L12,6L12,4L14,4L14,6L16,6L16,8L14,8L14,12L16,12L16,14L14,14L14,16L12,16L12,14L8,14L8,16L6,16L6,14L4,14L4,12L6,12L6,8ZM8,12L12,12L12,8L8,8L8,12Z',
254
- }),
255
- });
152
+ return (jsx("svg", { viewBox: "0 0 20 20", fill: "currentColor", children: jsx("path", { d: "M6,8L4,8L4,6L6,6L6,4L8,4L8,6L12,6L12,4L14,4L14,6L16,6L16,8L14,8L14,12L16,12L16,14L14,14L14,16L12,16L12,14L8,14L8,16L6,16L6,14L4,14L4,12L6,12L6,8ZM8,12L12,12L12,8L8,8L8,12Z" }) }));
256
153
  }
257
154
 
258
155
  function ImgIcon() {
259
- return jsxs('svg', {
260
- viewBox: '0 0 20 20',
261
- fill: 'currentColor',
262
- children: [
263
- jsx('path', {d: 'M5,15L15,15L15,10L13,8L8,13L5,10L5,15Z'}),
264
- jsx('circle', {cx: '8', cy: '7', r: '2'}),
265
- ],
266
- });
156
+ return (jsxs("svg", { viewBox: "0 0 20 20", fill: "currentColor", children: [jsx("path", { d: "M5,15L15,15L15,10L13,8L8,13L5,10L5,15Z" }), jsx("circle", { cx: "8", cy: "7", r: "2" })] }));
267
157
  }
268
158
 
269
159
  function LayoutIcon() {
270
- return jsxs('svg', {
271
- viewBox: '0 0 20 20',
272
- fill: 'currentColor',
273
- children: [
274
- jsx('path', {
275
- d: 'M14,5C14.552,5 15,5.448 15,6C15,7.916 15,12.084 15,14C15,14.552 14.552,15 14,15C12.815,15 11,15 11,15L11,5L14,5Z',
276
- }),
277
- jsx('path', {d: 'M9,5L9,9L5,9L5,6C5,5.448 5.448,5 6,5L9,5Z'}),
278
- jsx('path', {d: 'M9,11L9,15L6,15C5.448,15 5,14.552 5,14L5,11L9,11Z'}),
279
- ],
280
- });
160
+ return (jsxs("svg", { viewBox: "0 0 20 20", fill: "currentColor", children: [jsx("path", { d: "M14,5C14.552,5 15,5.448 15,6C15,7.916 15,12.084 15,14C15,14.552 14.552,15 14,15C12.815,15 11,15 11,15L11,5L14,5Z" }), jsx("path", { d: "M9,5L9,9L5,9L5,6C5,5.448 5.448,5 6,5L9,5Z" }), jsx("path", { d: "M9,11L9,15L6,15C5.448,15 5,14.552 5,14L5,11L9,11Z" })] }));
281
161
  }
282
162
 
283
163
  function LineIcon() {
284
- return jsx('svg', {
285
- viewBox: '0 0 20 20',
286
- fill: 'currentColor',
287
- children: jsx('path', {
288
- d: 'M9.906,4.589L11.411,5.906L8.529,9.2L13.859,8.439C14.273,8.379 14.68,8.584 14.879,8.952C15.078,9.319 15.028,9.772 14.753,10.087L10.094,15.411L8.589,14.094L11.471,10.8L6.141,11.561C5.727,11.621 5.32,11.416 5.121,11.048C4.922,10.681 4.972,10.228 5.247,9.913L9.906,4.589Z',
289
- }),
290
- });
164
+ return (jsx("svg", { viewBox: "0 0 20 20", fill: "currentColor", children: jsx("path", { d: "M9.906,4.589L11.411,5.906L8.529,9.2L13.859,8.439C14.273,8.379 14.68,8.584 14.879,8.952C15.078,9.319 15.028,9.772 14.753,10.087L10.094,15.411L8.589,14.094L11.471,10.8L6.141,11.561C5.727,11.621 5.32,11.416 5.121,11.048C4.922,10.681 4.972,10.228 5.247,9.913L9.906,4.589Z" }) }));
291
165
  }
292
166
 
293
167
  function NodeIcon() {
294
- return jsx('svg', {
295
- viewBox: '0 0 20 20',
296
- fill: 'currentColor',
297
- children: jsx('path', {
298
- d: 'M7,9L5,9L5,7L7,7L7,5L9,5L9,7L12,7L12,5L15,8L12,11L12,9L9,9L9,12L11,12L8,15L5,12L7,12L7,9Z',
299
- }),
300
- });
168
+ return (jsx("svg", { viewBox: "0 0 20 20", fill: "currentColor", children: jsx("path", { d: "M7,9L5,9L5,7L7,7L7,5L9,5L9,7L12,7L12,5L15,8L12,11L12,9L9,9L9,12L11,12L8,15L5,12L7,12L7,9Z" }) }));
301
169
  }
302
170
 
303
171
  function RayIcon() {
304
- return jsx('svg', {
305
- viewBox: '0 0 20 20',
306
- fill: 'currentColor',
307
- children: jsx('path', {
308
- d: 'M12,9.414L6.707,14.707L5.293,13.293L10.586,8L8,8L8,6L13,6C13.552,6 14,6.448 14,7L14,12L12,12L12,9.414Z',
309
- }),
310
- });
172
+ return (jsx("svg", { viewBox: "0 0 20 20", fill: "currentColor", children: jsx("path", { d: "M12,9.414L6.707,14.707L5.293,13.293L10.586,8L8,8L8,6L13,6C13.552,6 14,6.448 14,7L14,12L12,12L12,9.414Z" }) }));
311
173
  }
312
174
 
313
175
  function RectIcon() {
314
- return jsx('svg', {
315
- viewBox: '0 0 20 20',
316
- fill: 'currentColor',
317
- children: jsx('path', {
318
- d: 'M15,6L15,14C15,14.552 14.552,15 14,15L6,15C5.448,15 5,14.552 5,14L5,6C5,5.448 5.448,5 6,5L14,5C14.552,5 15,5.448 15,6ZM13,7L7,7L7,13L13,13L13,7Z',
319
- }),
320
- });
176
+ return (jsx("svg", { viewBox: "0 0 20 20", fill: "currentColor", children: jsx("path", { d: "M15,6L15,14C15,14.552 14.552,15 14,15L6,15C5.448,15 5,14.552 5,14L5,6C5,5.448 5.448,5 6,5L14,5C14.552,5 15,5.448 15,6ZM13,7L7,7L7,13L13,13L13,7Z" }) }));
321
177
  }
322
178
 
323
179
  function ShapeIcon() {
324
- return jsx('svg', {
325
- viewBox: '0 0 20 20',
326
- fill: 'currentColor',
327
- children: jsx('path', {
328
- d: 'M11.746,10.93C12.637,12.664 11.973,14.504 10.611,15.244C9.692,15.743 8.385,15.804 6.94,14.829C5.555,13.893 4.689,12.16 4.544,10.388C4.395,8.572 5,6.752 6.399,5.701C8.069,4.445 10.793,4.271 12.765,4.921C14.324,5.436 15.374,6.473 15.495,7.691C15.651,9.262 14.613,10.061 13.26,10.5C12.847,10.634 12.41,10.735 12.02,10.841C11.936,10.864 11.838,10.897 11.746,10.93ZM7.601,7.299C6.737,7.949 6.445,9.103 6.537,10.224C6.633,11.389 7.149,12.556 8.06,13.171C8.696,13.601 9.251,13.706 9.656,13.486C10.207,13.187 10.315,12.395 9.886,11.701C9.48,11.044 9.513,10.523 9.68,10.122C9.835,9.75 10.164,9.417 10.678,9.187C11.243,8.935 12.157,8.8 12.908,8.503C13.216,8.381 13.542,8.264 13.505,7.888C13.485,7.691 13.359,7.53 13.197,7.384C12.928,7.143 12.558,6.959 12.138,6.821C10.736,6.358 8.789,6.406 7.601,7.299Z',
329
- }),
330
- });
180
+ return (jsx("svg", { viewBox: "0 0 20 20", fill: "currentColor", children: jsx("path", { d: "M11.746,10.93C12.637,12.664 11.973,14.504 10.611,15.244C9.692,15.743 8.385,15.804 6.94,14.829C5.555,13.893 4.689,12.16 4.544,10.388C4.395,8.572 5,6.752 6.399,5.701C8.069,4.445 10.793,4.271 12.765,4.921C14.324,5.436 15.374,6.473 15.495,7.691C15.651,9.262 14.613,10.061 13.26,10.5C12.847,10.634 12.41,10.735 12.02,10.841C11.936,10.864 11.838,10.897 11.746,10.93ZM7.601,7.299C6.737,7.949 6.445,9.103 6.537,10.224C6.633,11.389 7.149,12.556 8.06,13.171C8.696,13.601 9.251,13.706 9.656,13.486C10.207,13.187 10.315,12.395 9.886,11.701C9.48,11.044 9.513,10.523 9.68,10.122C9.835,9.75 10.164,9.417 10.678,9.187C11.243,8.935 12.157,8.8 12.908,8.503C13.216,8.381 13.542,8.264 13.505,7.888C13.485,7.691 13.359,7.53 13.197,7.384C12.928,7.143 12.558,6.959 12.138,6.821C10.736,6.358 8.789,6.406 7.601,7.299Z" }) }));
331
181
  }
332
182
 
333
183
  function TxtIcon() {
334
- return jsxs('svg', {
335
- viewBox: '0 0 20 20',
336
- fill: 'currentColor',
337
- children: [
338
- jsx('path', {d: 'M9,13L9,6L11,6L11,13L12,13L12,15L8,15L8,13L9,13Z'}),
339
- jsx('path', {
340
- d: 'M7,8L5,8L5,6C5,5.448 5.448,5 6,5L14,5C14.552,5 15,5.448 15,6L15,8L13,8L13,7L7,7L7,8Z',
341
- }),
342
- ],
343
- });
184
+ return (jsxs("svg", { viewBox: "0 0 20 20", fill: "currentColor", children: [jsx("path", { d: "M9,13L9,6L11,6L11,13L12,13L12,15L8,15L8,13L9,13Z" }), jsx("path", { d: "M7,8L5,8L5,6C5,5.448 5.448,5 6,5L14,5C14.552,5 15,5.448 15,6L15,8L13,8L13,7L7,7L7,8Z" })] }));
344
185
  }
345
186
 
346
187
  function VideoIcon() {
347
- return jsx('svg', {
348
- viewBox: '0 0 20 20',
349
- fill: 'currentColor',
350
- children: jsx('path', {
351
- d: 'M14,10.866L7.25,14.763C6.941,14.942 6.559,14.942 6.25,14.763C5.941,14.585 5.75,14.254 5.75,13.897L5.75,6.103C5.75,5.746 5.941,5.415 6.25,5.237C6.559,5.058 6.941,5.058 7.25,5.237L14,9.134C14.309,9.313 14.5,9.643 14.5,10C14.5,10.357 14.309,10.687 14,10.866ZM11.5,10L7.75,7.835L7.75,12.165L11.5,10Z',
352
- }),
353
- });
188
+ return (jsx("svg", { viewBox: "0 0 20 20", fill: "currentColor", children: jsx("path", { d: "M14,10.866L7.25,14.763C6.941,14.942 6.559,14.942 6.25,14.763C5.941,14.585 5.75,14.254 5.75,13.897L5.75,6.103C5.75,5.746 5.941,5.415 6.25,5.237C6.559,5.058 6.941,5.058 7.25,5.237L14,9.134C14.309,9.313 14.5,9.643 14.5,10C14.5,10.357 14.309,10.687 14,10.866ZM11.5,10L7.75,7.835L7.75,12.165L11.5,10Z" }) }));
354
189
  }
355
190
 
356
191
  function View2DIcon() {
357
- return jsxs('svg', {
358
- viewBox: '0 0 20 20',
359
- fill: 'currentColor',
360
- children: [
361
- jsx('path', {d: 'M9,5L9,7L7,7L7,9L5,9L5,6C5,5.448 5.448,5 6,5L9,5Z'}),
362
- jsx('path', {
363
- d: 'M5,11L7,11L7,13L9,13L9,15L6,15C5.448,15 5,14.552 5,14L5,11Z',
364
- }),
365
- jsx('path', {
366
- d: 'M11,15L11,13L13,13L13,11L15,11L15,14C15,14.552 14.552,15 14,15L11,15Z',
367
- }),
368
- jsx('path', {
369
- d: 'M15,9L13,9L13,7L11,7L11,5L14,5C14.552,5 15,5.448 15,6L15,9Z',
370
- }),
371
- ],
372
- });
192
+ return (jsxs("svg", { viewBox: "0 0 20 20", fill: "currentColor", children: [jsx("path", { d: "M9,5L9,7L7,7L7,9L5,9L5,6C5,5.448 5.448,5 6,5L9,5Z" }), jsx("path", { d: "M5,11L7,11L7,13L9,13L9,15L6,15C5.448,15 5,14.552 5,14L5,11Z" }), jsx("path", { d: "M11,15L11,13L13,13L13,11L15,11L15,14C15,14.552 14.552,15 14,15L11,15Z" }), jsx("path", { d: "M15,9L13,9L13,7L11,7L11,5L14,5C14.552,5 15,5.448 15,6L15,9Z" })] }));
373
193
  }
374
194
 
375
195
  /* eslint-disable @typescript-eslint/naming-convention */
376
196
  const IconMap = {
377
- Circle: CircleIcon,
378
- CodeBlock: CodeBlockIcon,
379
- Curve: CurveIcon,
380
- Grid: GridIcon,
381
- Img: ImgIcon,
382
- Layout: LayoutIcon,
383
- Line: LineIcon,
384
- Node: NodeIcon,
385
- Ray: RayIcon,
386
- Rect: RectIcon,
387
- Shape: ShapeIcon,
388
- Txt: TxtIcon,
389
- TxtLeaf: TxtIcon,
390
- Video: VideoIcon,
391
- View2D: View2DIcon,
197
+ Circle: CircleIcon,
198
+ CodeBlock: CodeBlockIcon,
199
+ Curve: CurveIcon,
200
+ Grid: GridIcon,
201
+ Img: ImgIcon,
202
+ Layout: LayoutIcon,
203
+ Line: LineIcon,
204
+ Node: NodeIcon,
205
+ Ray: RayIcon,
206
+ Rect: RectIcon,
207
+ Shape: ShapeIcon,
208
+ Txt: TxtIcon,
209
+ TxtLeaf: TxtIcon,
210
+ Video: VideoIcon,
211
+ View2D: View2DIcon,
392
212
  };
393
213
 
394
- function r(e) {
395
- var t,
396
- f,
397
- n = '';
398
- if ('string' == typeof e || 'number' == typeof e) n += e;
399
- else if ('object' == typeof e)
400
- if (Array.isArray(e)) {
401
- var o = e.length;
402
- for (t = 0; t < o; t++)
403
- e[t] && (f = r(e[t])) && (n && (n += ' '), (n += f));
404
- } else for (f in e) e[f] && (n && (n += ' '), (n += f));
405
- return n;
406
- }
407
- function clsx() {
408
- for (var e, t, f = 0, n = '', o = arguments.length; f < o; f++)
409
- (e = arguments[f]) && (t = r(e)) && (n && (n += ' '), (n += t));
410
- return n;
411
- }
214
+ function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
412
215
 
413
- var styles = {
414
- root: 'index-module_root__omEd0',
415
- label: 'index-module_label__9BJvW',
416
- active: 'index-module_active__KevXv',
417
- parent: 'index-module_parent__5nc9I',
418
- };
216
+ var styles = {"root":"index-module_root__omEd0","label":"index-module_label__9BJvW","active":"index-module_active__KevXv","parent":"index-module_parent__5nc9I"};
419
217
 
420
218
  const DEPTH_VAR = '--depth';
421
- function TreeElement({
422
- label,
423
- children,
424
- selected,
425
- depth = 0,
426
- open,
427
- icon,
428
- forwardRef,
429
- ...props
430
- }) {
431
- const hasChildren = !!children;
432
- return jsxs(Fragment, {
433
- children: [
434
- jsxs('div', {
435
- ref: forwardRef,
436
- className: clsx(
437
- styles.label,
438
- selected && styles.active,
439
- hasChildren && styles.parent,
440
- ),
441
- onDblClick: () => {
442
- if (hasChildren) {
443
- open.value = !open.value;
444
- }
445
- },
446
- ...props,
447
- style: {[DEPTH_VAR]: `${depth}`},
448
- children: [
449
- hasChildren &&
450
- jsx(Toggle, {
451
- animated: false,
452
- open: open.value,
453
- onToggle: value => {
454
- open.value = value;
455
- },
456
- onDblClick: e => {
457
- e.stopPropagation();
458
- },
459
- }),
460
- icon,
461
- label,
462
- ],
463
- }),
464
- hasChildren &&
465
- jsx(Collapse, {open: open.value, animated: false, children: children}),
466
- ],
467
- });
219
+ function TreeElement({ label, children, selected, depth = 0, open, icon, forwardRef, ...props }) {
220
+ const hasChildren = !!children;
221
+ return (jsxs(Fragment, { children: [jsxs("div", { ref: forwardRef, className: clsx(styles.label, selected && styles.active, hasChildren && styles.parent), onDblClick: () => {
222
+ if (hasChildren) {
223
+ open.value = !open.value;
224
+ }
225
+ }, ...props, style: { [DEPTH_VAR]: `${depth}` }, children: [hasChildren && (jsx(Toggle, { animated: false, open: open.value, onToggle: value => {
226
+ open.value = value;
227
+ }, onDblClick: e => {
228
+ e.stopPropagation();
229
+ } })), icon, label] }), hasChildren && (jsx(Collapse, { open: open.value, animated: false, children: children }))] }));
468
230
  }
469
231
 
470
- function NodeElement({node, depth = 0}) {
471
- const {selectedKey, hoveredKey, openNodes, selectedChain, afterRender} =
472
- usePluginState();
473
- const ref = useRef(null);
474
- const open = useSignal(
475
- selectedChain.peek().has(node.key) || (openNodes.get(node.key) ?? false),
476
- );
477
- const nodeSignal = useSignal(node);
478
- nodeSignal.value = node;
479
- const children = useComputed(() => {
480
- afterRender.value;
481
- return nodeSignal.value.peekChildren();
482
- });
483
- useSignalEffect(() => {
484
- open.value = openNodes.get(nodeSignal.value.key) ?? false;
485
- });
486
- useSignalEffect(() => {
487
- const chain = selectedChain.value;
488
- if (chain.has(nodeSignal.value.key)) {
489
- open.value = true;
490
- }
491
- });
492
- useSignalEffect(() => {
493
- openNodes.set(nodeSignal.value.key, open.value);
494
- });
495
- useSignalEffect(() => {
496
- const key = selectedKey.value;
497
- if (node.key === key) {
498
- ref.current?.scrollIntoView({block: 'nearest', behavior: 'instant'});
499
- }
500
- });
501
- const Icon = IconMap[node[NODE_NAME]] ?? IconMap.Node;
502
- return jsx(TreeElement, {
503
- forwardRef: ref,
504
- open: open,
505
- depth: depth,
506
- icon: jsx(Icon, {}),
507
- label: node.key,
508
- selected: selectedKey.value === node.key,
509
- onClick: event => {
510
- selectedKey.value = node.key;
511
- event.stopPropagation();
512
- },
513
- onPointerEnter: () => (hoveredKey.value = node.key),
514
- onPointerLeave: () => (hoveredKey.value = null),
515
- children:
516
- children.value.length > 0 &&
517
- children.value.map(child =>
518
- jsx(NodeElement, {node: child, depth: depth + 1}),
519
- ),
520
- });
232
+ function NodeElement({ node, depth = 0 }) {
233
+ const { selectedKey, hoveredKey, openNodes, selectedChain, afterRender } = usePluginState();
234
+ const ref = useRef(null);
235
+ const open = useSignal(selectedChain.peek().has(node.key) || (openNodes.get(node.key) ?? false));
236
+ const nodeSignal = useSignal(node);
237
+ nodeSignal.value = node;
238
+ const children = useComputed(() => {
239
+ afterRender.value;
240
+ return nodeSignal.value.peekChildren();
241
+ });
242
+ useSignalEffect(() => {
243
+ open.value = openNodes.get(nodeSignal.value.key) ?? false;
244
+ });
245
+ useSignalEffect(() => {
246
+ const chain = selectedChain.value;
247
+ if (chain.has(nodeSignal.value.key)) {
248
+ open.value = true;
249
+ }
250
+ });
251
+ useSignalEffect(() => {
252
+ openNodes.set(nodeSignal.value.key, open.value);
253
+ });
254
+ useSignalEffect(() => {
255
+ const key = selectedKey.value;
256
+ if (node.key === key) {
257
+ ref.current?.scrollIntoView({ block: 'nearest', behavior: 'instant' });
258
+ }
259
+ });
260
+ const Icon = IconMap[node[NODE_NAME]] ?? IconMap.Node;
261
+ return (jsx(TreeElement, { forwardRef: ref, open: open, depth: depth, icon: jsx(Icon, {}), label: node.key, selected: selectedKey.value === node.key, onClick: event => {
262
+ selectedKey.value = node.key;
263
+ event.stopPropagation();
264
+ }, onPointerEnter: () => (hoveredKey.value = node.key), onPointerLeave: () => (hoveredKey.value = null), children: children.value.length > 0 &&
265
+ children.value.map(child => (jsx(NodeElement, { node: child, depth: depth + 1 }))) }));
521
266
  }
522
267
 
523
- function TreeRoot({className, ...props}) {
524
- return jsx('div', {className: clsx(styles.root, className), ...props});
268
+ function TreeRoot({ className, ...props }) {
269
+ return jsx("div", { className: clsx(styles.root, className), ...props });
525
270
  }
526
271
 
527
272
  function DetachedRoot() {
528
- const {afterRender, scene} = usePluginState();
529
- const open = useSignal(false);
530
- const currentScene = scene.value;
531
- const children = currentScene ? [...currentScene.getDetachedNodes()] : [];
532
- afterRender.value;
533
- return children.length > 0
534
- ? jsx(TreeRoot, {
535
- children: jsx(TreeElement, {
536
- open: open,
537
- label: 'Detached nodes',
538
- children: children.map(child =>
539
- jsx(NodeElement, {node: child, depth: 1}),
540
- ),
541
- }),
542
- })
543
- : null;
273
+ const { afterRender, scene } = usePluginState();
274
+ const open = useSignal(false);
275
+ const currentScene = scene.value;
276
+ const children = currentScene ? [...currentScene.getDetachedNodes()] : [];
277
+ afterRender.value;
278
+ return children.length > 0 ? (jsx(TreeRoot, { children: jsx(TreeElement, { open: open, label: "Detached nodes", children: children.map(child => (jsx(NodeElement, { node: child, depth: 1 }))) }) })) : null;
544
279
  }
545
280
 
546
281
  function ViewRoot() {
547
- const {scene} = usePluginState();
548
- const view = useSignal(scene.value?.getView());
549
- useSignalEffect(() => {
550
- view.value = scene.value?.getView();
551
- return scene.value?.onReset.subscribe(() => {
552
- view.value = scene.value?.getView();
282
+ const { scene } = usePluginState();
283
+ const view = useSignal(scene.value?.getView());
284
+ useSignalEffect(() => {
285
+ view.value = scene.value?.getView();
286
+ return scene.value?.onReset.subscribe(() => {
287
+ view.value = scene.value?.getView();
288
+ });
553
289
  });
554
- });
555
- return view.value
556
- ? jsx(TreeRoot, {children: jsx(NodeElement, {node: view.value})})
557
- : null;
290
+ return view.value ? (jsx(TreeRoot, { children: jsx(NodeElement, { node: view.value }) })) : null;
558
291
  }
559
292
 
560
- function TabComponent({tab}) {
561
- const {sidebar} = usePanels();
562
- const inspectorTab = useRef(null);
563
- const reducedMotion = useReducedMotion();
564
- const {selectedKey} = usePluginState();
565
- const {logger} = useApplication();
566
- useEffect(
567
- () =>
568
- logger.onInspected.subscribe(key => {
293
+ function TabComponent({ tab }) {
294
+ const { sidebar } = usePanels();
295
+ const inspectorTab = useRef(null);
296
+ const reducedMotion = useReducedMotion();
297
+ const { selectedKey } = usePluginState();
298
+ const { logger } = useApplication();
299
+ useEffect(() => logger.onInspected.subscribe(key => {
569
300
  sidebar.set(tab);
570
301
  selectedKey.value = key;
571
- }),
572
- [tab],
573
- );
574
- useSignalEffect(() => {
575
- if (
576
- selectedKey.value &&
577
- sidebar.current.peek() !== tab &&
578
- !reducedMotion &&
579
- inspectorTab.current &&
580
- inspectorTab.current.getAnimations().length < 2
581
- ) {
582
- inspectorTab.current.animate(emphasize(), {duration: 400});
583
- inspectorTab.current.animate([{color: 'white'}, {color: ''}], {
584
- duration: 800,
585
- });
586
- }
587
- });
588
- return jsx(Tab, {
589
- forwardRef: inspectorTab,
590
- title: 'Scene Graph',
591
- id: 'scene-graph-tab',
592
- tab: tab,
593
- children: jsx(AccountTree, {}),
594
- });
302
+ }), [tab]);
303
+ useSignalEffect(() => {
304
+ if (selectedKey.value &&
305
+ sidebar.current.peek() !== tab &&
306
+ !reducedMotion &&
307
+ inspectorTab.current &&
308
+ inspectorTab.current.getAnimations().length < 2) {
309
+ inspectorTab.current.animate(emphasize(), { duration: 400 });
310
+ inspectorTab.current.animate([{ color: 'white' }, { color: '' }], {
311
+ duration: 800,
312
+ });
313
+ }
314
+ });
315
+ return (jsx(Tab, { forwardRef: inspectorTab, title: "Scene Graph", id: "scene-graph-tab", tab: tab, children: jsx(AccountTree, {}) }));
595
316
  }
596
317
  function PaneComponent() {
597
- const {selectedKey} = usePluginState();
598
- return jsxs(Pane, {
599
- title: 'Scene Graph',
600
- id: 'scene-graph-pane',
601
- onClick: () => {
602
- selectedKey.value = null;
603
- },
604
- children: [jsx(ViewRoot, {}), jsx(DetachedRoot, {})],
605
- });
318
+ const { selectedKey } = usePluginState();
319
+ return (jsxs(Pane, { title: "Scene Graph", id: "scene-graph-pane", onClick: () => {
320
+ selectedKey.value = null;
321
+ }, children: [jsx(ViewRoot, {}), jsx(DetachedRoot, {})] }));
606
322
  }
607
323
  const SceneGraphTabConfig = {
608
- name: 'scene-graph',
609
- tabComponent: TabComponent,
610
- paneComponent: PaneComponent,
324
+ name: 'scene-graph',
325
+ tabComponent: TabComponent,
326
+ paneComponent: PaneComponent,
611
327
  };
612
328
 
613
329
  var index = makeEditorPlugin(() => {
614
- return {
615
- name: '@revideo/2d',
616
- provider: Provider,
617
- previewOverlay: PreviewOverlayConfig,
618
- tabs: [SceneGraphTabConfig],
619
- inspectors: [NodeInspectorConfig],
620
- };
330
+ return {
331
+ name: '@revideo/2d',
332
+ provider: Provider,
333
+ previewOverlay: PreviewOverlayConfig,
334
+ tabs: [SceneGraphTabConfig],
335
+ inspectors: [NodeInspectorConfig],
336
+ };
621
337
  });
622
338
 
623
- export {index as default};
339
+ export { index as default };
624
340
  //# sourceMappingURL=index.js.map
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@revideo/2d",
3
- "version": "0.2.4-alpha.894+1d33331",
3
+ "version": "0.2.4-alpha.897+cb3d253",
4
4
  "description": "A 2D renderer for revideo",
5
5
  "author": "revideo",
6
6
  "homepage": "https://re.video/",
@@ -30,7 +30,7 @@
30
30
  "devDependencies": {
31
31
  "@preact/signals": "^1.2.1",
32
32
  "@revideo/internal": "^0.0.0",
33
- "@revideo/ui": "^0.2.4-alpha.894+1d33331",
33
+ "@revideo/ui": "^0.2.4-alpha.897+cb3d253",
34
34
  "clsx": "^2.0.0",
35
35
  "jsdom": "^22.1.0",
36
36
  "preact": "^10.19.2",
@@ -40,10 +40,10 @@
40
40
  "@codemirror/language": "^6.10.1",
41
41
  "@lezer/common": "^1.2.1",
42
42
  "@lezer/highlight": "^1.2.0",
43
- "@revideo/core": "^0.2.4-alpha.894+1d33331",
43
+ "@revideo/core": "^0.2.4-alpha.897+cb3d253",
44
44
  "code-fns": "^0.8.2",
45
45
  "mathjax-full": "^3.2.2",
46
46
  "parse-svg-path": "^0.1.2"
47
47
  },
48
- "gitHead": "1d33331ab697434bac6acb926243f641e4106b18"
48
+ "gitHead": "cb3d25346b3173eaa55a0174e7256e00b4c101b5"
49
49
  }