@twick/2d 0.14.18 → 0.14.19

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2022 motion-canvas
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2022 motion-canvas
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@twick/2d",
-  "version": "0.14.18",
+  "version": "0.14.19",
   "description": "A 2D renderer for twick",
   "author": "twick",
   "bugs": "https://github.com/ncounterspecialist/twick-base/issues",
@@ -30,7 +30,7 @@
     "@preact/signals": "^1.2.1",
     "@rollup/plugin-node-resolve": "^15.2.4",
     "@rollup/plugin-typescript": "^12.1.0",
-    "@twick/ui": "0.14.4",
+    "@twick/ui": "0.14.19",
     "clsx": "^2.0.0",
     "jsdom": "^22.1.0",
     "preact": "^10.19.2",
@@ -41,12 +41,12 @@
     "@lezer/common": "^1.2.1",
     "@lezer/highlight": "^1.2.0",
     "@rive-app/canvas-advanced": "2.7.3",
-    "@twick/core": "0.14.4",
+    "@twick/core": "0.14.19",
     "code-fns": "^0.8.2",
     "hls.js": "^1.5.11",
     "mathjax-full": "^3.2.2",
     "mp4box": "^0.5.2",
     "parse-svg-path": "^0.1.2"
   },
-  "gitHead": "3f5c0a7cbc6f1c5e46f5e7beb725efbf8193a030"
+  "gitHead": "9740b15c74da0a2ebdb1ad2f3dd023bd0bbc65d4"
 }

package/src/editor/NodeInspectorConfig.tsx

@@ -1,76 +1,76 @@
-import {useComputed} from '@preact/signals';
-import type {PluginInspectorConfig} from '@twick/ui';
-import {
-  AutoField,
-  Button,
-  Group,
-  Label,
-  Pane,
-  Separator,
-  UnknownField,
-  findAndOpenFirstUserFile,
-  useApplication,
-} from '@twick/ui';
-import {NodeInspectorKey, usePluginState} from './Provider';
-
-function Component() {
-  const {inspection} = useApplication();
-  const {scene, afterRender} = usePluginState();
-  const node = useComputed(() => {
-    afterRender.value;
-    const {payload} = inspection.value;
-    return scene.value?.getNode(payload as string);
-  });
-
-  const attributes = useComputed(() => {
-    afterRender.value;
-    const currentNode = node.value;
-    const attributes: [string, unknown][] = [];
-
-    if (currentNode) {
-      for (const {key, meta, signal} of currentNode) {
-        if (!meta.inspectable) continue;
-        attributes.push([key, signal()]);
-      }
-    }
-
-    return attributes;
-  });
-
-  const stack = node.value?.creationStack;
-
-  return (
-    <Pane title="Node Inspector" id="node-inspector-pane">
-      <Separator size={1} />
-      {stack && (
-        <Group>
-          <Label />
-          <Button onClick={() => findAndOpenFirstUserFile(stack)} main>
-            GO TO SOURCE
-          </Button>
-        </Group>
-      )}
-      <Group>
-        <Label>key</Label>
-        <UnknownField value={inspection.value.payload} />
-      </Group>
-      {!node.value && (
-        <Group>
-          <Label />
-          Couldn't find the node. It may have been deleted or doesn't exist yet.
-        </Group>
-      )}
-      {attributes.value.map(([key, value]) => (
-        <Group key={key}>
-          <Label>{key}</Label>
-          <AutoField value={value} />
-        </Group>
-      ))}
-    </Pane>
-  );
-}
-
-export const NodeInspectorConfig: PluginInspectorConfig = {
-  key: NodeInspectorKey,
-  component: Component,
-};
+import {useComputed} from '@preact/signals';
+import type {PluginInspectorConfig} from '@twick/ui';
+import {
+  AutoField,
+  Button,
+  Group,
+  Label,
+  Pane,
+  Separator,
+  UnknownField,
+  findAndOpenFirstUserFile,
+  useApplication,
+} from '@twick/ui';
+import {NodeInspectorKey, usePluginState} from './Provider';
+
+function Component() {
+  const {inspection} = useApplication();
+  const {scene, afterRender} = usePluginState();
+  const node = useComputed(() => {
+    afterRender.value;
+    const {payload} = inspection.value;
+    return scene.value?.getNode(payload as string);
+  });
+
+  const attributes = useComputed(() => {
+    afterRender.value;
+    const currentNode = node.value;
+    const attributes: [string, unknown][] = [];
+
+    if (currentNode) {
+      for (const {key, meta, signal} of currentNode) {
+        if (!meta.inspectable) continue;
+        attributes.push([key, signal()]);
+      }
+    }
+
+    return attributes;
+  });
+
+  const stack = node.value?.creationStack;
+
+  return (
+    <Pane title="Node Inspector" id="node-inspector-pane">
+      <Separator size={1} />
+      {stack && (
+        <Group>
+          <Label />
+          <Button onClick={() => findAndOpenFirstUserFile(stack)} main>
+            GO TO SOURCE
+          </Button>
+        </Group>
+      )}
+      <Group>
+        <Label>key</Label>
+        <UnknownField value={inspection.value.payload} />
+      </Group>
+      {!node.value && (
+        <Group>
+          <Label />
+          Couldn't find the node. It may have been deleted or doesn't exist yet.
+        </Group>
+      )}
+      {attributes.value.map(([key, value]) => (
+        <Group key={key}>
+          <Label>{key}</Label>
+          <AutoField value={value} />
+        </Group>
+      ))}
+    </Pane>
+  );
+}
+
+export const NodeInspectorConfig: PluginInspectorConfig = {
+  key: NodeInspectorKey,
+  component: Component,
+};

package/src/editor/PreviewOverlayConfig.tsx

@@ -1,67 +1,67 @@
-import {transformVectorAsPoint, Vector2} from '@twick/core';
-import type {PluginOverlayConfig} from '@twick/ui';
-import {
-  MouseButton,
-  OverlayWrapper,
-  useViewportContext,
-  useViewportMatrix,
-} from '@twick/ui';
-import type {ComponentChildren} from 'preact';
-import {usePluginState} from './Provider';
-
-function Component({children}: {children?: ComponentChildren}) {
-  const state = useViewportContext();
-  const {scene, selectedKey} = usePluginState();
-  const matrix = useViewportMatrix();
-
-  return (
-    <OverlayWrapper
-      onPointerDown={event => {
-        if (event.button !== MouseButton.Left || event.shiftKey) return;
-        if (!scene.value) return;
-        event.stopPropagation();
-
-        const diff = new Vector2(
-          event.x - state.rect.x,
-          event.y - state.rect.y,
-        );
-        const position = transformVectorAsPoint(diff, matrix.inverse());
-
-        selectedKey.value = scene.value.inspectPosition(
-          position.x,
-          position.y,
-        ) as string;
-      }}
-    >
-      {children}
-    </OverlayWrapper>
-  );
-}
-
-function drawHook() {
-  const {selectedKey, hoveredKey, afterRender, scene} = usePluginState();
-  selectedKey.value;
-  hoveredKey.value;
-  afterRender.value;
-
-  return (ctx: CanvasRenderingContext2D, matrix: DOMMatrix) => {
-    const currentScene = scene.peek();
-    if (!currentScene) return;
-
-    let node = currentScene.getNode(selectedKey.value);
-    if (node) {
-      currentScene.drawOverlay(node.key, matrix, ctx);
-    }
-
-    node = currentScene.getNode(hoveredKey.value);
-    if (node && hoveredKey.value !== selectedKey.value) {
-      ctx.globalAlpha = 0.5;
-      currentScene.drawOverlay(hoveredKey.value, matrix, ctx);
-    }
-  };
-}
-
-export const PreviewOverlayConfig: PluginOverlayConfig = {
-  drawHook,
-  component: Component,
-};
+import {transformVectorAsPoint, Vector2} from '@twick/core';
+import type {PluginOverlayConfig} from '@twick/ui';
+import {
+  MouseButton,
+  OverlayWrapper,
+  useViewportContext,
+  useViewportMatrix,
+} from '@twick/ui';
+import type {ComponentChildren} from 'preact';
+import {usePluginState} from './Provider';
+
+function Component({children}: {children?: ComponentChildren}) {
+  const state = useViewportContext();
+  const {scene, selectedKey} = usePluginState();
+  const matrix = useViewportMatrix();
+
+  return (
+    <OverlayWrapper
+      onPointerDown={event => {
+        if (event.button !== MouseButton.Left || event.shiftKey) return;
+        if (!scene.value) return;
+        event.stopPropagation();
+
+        const diff = new Vector2(
+          event.x - state.rect.x,
+          event.y - state.rect.y,
+        );
+        const position = transformVectorAsPoint(diff, matrix.inverse());
+
+        selectedKey.value = scene.value.inspectPosition(
+          position.x,
+          position.y,
+        ) as string;
+      }}
+    >
+      {children}
+    </OverlayWrapper>
+  );
+}
+
+function drawHook() {
+  const {selectedKey, hoveredKey, afterRender, scene} = usePluginState();
+  selectedKey.value;
+  hoveredKey.value;
+  afterRender.value;
+
+  return (ctx: CanvasRenderingContext2D, matrix: DOMMatrix) => {
+    const currentScene = scene.peek();
+    if (!currentScene) return;
+
+    let node = currentScene.getNode(selectedKey.value);
+    if (node) {
+      currentScene.drawOverlay(node.key, matrix, ctx);
+    }
+
+    node = currentScene.getNode(hoveredKey.value);
+    if (node && hoveredKey.value !== selectedKey.value) {
+      ctx.globalAlpha = 0.5;
+      currentScene.drawOverlay(hoveredKey.value, matrix, ctx);
+    }
+  };
+}
+
+export const PreviewOverlayConfig: PluginOverlayConfig = {
+  drawHook,
+  component: Component,
+};

package/src/editor/Provider.tsx

@@ -1,93 +1,93 @@
-import type {ReadonlySignal, Signal} from '@preact/signals';
-import {computed, signal, useSignalEffect} from '@preact/signals';
-import type {Scene2D} from '@twick/2d';
-import {SceneRenderEvent} from '@twick/core';
-import {useApplication, useCurrentScene} from '@twick/ui';
-import type {ComponentChildren} from 'preact';
-import {createContext} from 'preact';
-import {useContext, useMemo} from 'preact/hooks';
-
-export interface PluginState {
-  selectedKey: Signal<string | null>;
-  hoveredKey: Signal<string | null>;
-  openNodes: Map<string, boolean>;
-  scene: ReadonlySignal<Scene2D | null>;
-  selectedChain: ReadonlySignal<Set<string>>;
-  afterRender: ReadonlySignal<number>;
-}
-
-const PluginContext = createContext<PluginState | null>(null);
-
-export const NodeInspectorKey = '@twick/2d/node-inspector';
-
-export function usePluginState() {
-  return useContext(PluginContext)!;
-}
-
-export function Provider({children}: {children?: ComponentChildren}) {
-  const {inspection} = useApplication();
-  const currentScene = useCurrentScene();
-
-  const state = useMemo(() => {
-    const scene = signal(currentScene as Scene2D);
-    const selectedKey = signal<string | null>(null);
-    const afterRender = signal(0);
-    const hoveredKey = signal<string | null>(null);
-    const openNodes = new Map<string, boolean>();
-    const selectedChain = computed(() => {
-      const chain = new Set<string>();
-      const key = selectedKey.value;
-      const selectedNode = scene.value?.getNode(key);
-      if (selectedNode) {
-        let node = selectedNode.parent() ?? null;
-        while (node) {
-          chain.add(node.key);
-          node = node.parent();
-        }
-      }
-
-      return chain;
-    });
-
-    return {
-      selectedKey,
-      hoveredKey,
-      afterRender,
-      openNodes,
-      selectedChain,
-      scene,
-    } satisfies PluginState;
-  }, []);
-
-  state.scene.value = currentScene as Scene2D;
-
-  useSignalEffect(() =>
-    state.scene.value?.onRenderLifecycle.subscribe(([event]) => {
-      if (event === SceneRenderEvent.AfterRender) {
-        state.afterRender.value++;
-      }
-    }),
-  );
-
-  useSignalEffect(() => {
-    const {key, payload} = inspection.value;
-    if (key === NodeInspectorKey) {
-      state.selectedKey.value = payload as string;
-    }
-  });
-
-  useSignalEffect(() => {
-    const nodeKey = state.selectedKey.value;
-    const {key, payload} = inspection.peek();
-
-    if (key === NodeInspectorKey && !nodeKey) {
-      inspection.value = {key: '', payload: null};
-    } else if (payload !== nodeKey) {
-      inspection.value = {key: NodeInspectorKey, payload: nodeKey};
-    }
-  });
-
-  return (
-    <PluginContext.Provider value={state}>{children}</PluginContext.Provider>
-  );
-}
+import type {ReadonlySignal, Signal} from '@preact/signals';
+import {computed, signal, useSignalEffect} from '@preact/signals';
+import type {Scene2D} from '@twick/2d';
+import {SceneRenderEvent} from '@twick/core';
+import {useApplication, useCurrentScene} from '@twick/ui';
+import type {ComponentChildren} from 'preact';
+import {createContext} from 'preact';
+import {useContext, useMemo} from 'preact/hooks';
+
+export interface PluginState {
+  selectedKey: Signal<string | null>;
+  hoveredKey: Signal<string | null>;
+  openNodes: Map<string, boolean>;
+  scene: ReadonlySignal<Scene2D | null>;
+  selectedChain: ReadonlySignal<Set<string>>;
+  afterRender: ReadonlySignal<number>;
+}
+
+const PluginContext = createContext<PluginState | null>(null);
+
+export const NodeInspectorKey = '@twick/2d/node-inspector';
+
+export function usePluginState() {
+  return useContext(PluginContext)!;
+}
+
+export function Provider({children}: {children?: ComponentChildren}) {
+  const {inspection} = useApplication();
+  const currentScene = useCurrentScene();
+
+  const state = useMemo(() => {
+    const scene = signal(currentScene as Scene2D);
+    const selectedKey = signal<string | null>(null);
+    const afterRender = signal(0);
+    const hoveredKey = signal<string | null>(null);
+    const openNodes = new Map<string, boolean>();
+    const selectedChain = computed(() => {
+      const chain = new Set<string>();
+      const key = selectedKey.value;
+      const selectedNode = scene.value?.getNode(key);
+      if (selectedNode) {
+        let node = selectedNode.parent() ?? null;
+        while (node) {
+          chain.add(node.key);
+          node = node.parent();
+        }
+      }
+
+      return chain;
+    });
+
+    return {
+      selectedKey,
+      hoveredKey,
+      afterRender,
+      openNodes,
+      selectedChain,
+      scene,
+    } satisfies PluginState;
+  }, []);
+
+  state.scene.value = currentScene as Scene2D;
+
+  useSignalEffect(() =>
+    state.scene.value?.onRenderLifecycle.subscribe(([event]) => {
+      if (event === SceneRenderEvent.AfterRender) {
+        state.afterRender.value++;
+      }
+    }),
+  );
+
+  useSignalEffect(() => {
+    const {key, payload} = inspection.value;
+    if (key === NodeInspectorKey) {
+      state.selectedKey.value = payload as string;
+    }
+  });
+
+  useSignalEffect(() => {
+    const nodeKey = state.selectedKey.value;
+    const {key, payload} = inspection.peek();
+
+    if (key === NodeInspectorKey && !nodeKey) {
+      inspection.value = {key: '', payload: null};
+    } else if (payload !== nodeKey) {
+      inspection.value = {key: NodeInspectorKey, payload: nodeKey};
+    }
+  });
+
+  return (
+    <PluginContext.Provider value={state}>{children}</PluginContext.Provider>
+  );
+}