@twick/2d 0.13.0 → 0.14.2

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>
+  );
+}

package/src/editor/SceneGraphTabConfig.tsx

@@ -1,81 +1,81 @@
-import type {PluginTabConfig, PluginTabProps} from '@twick/ui';
-import {
-  AccountTree,
-  emphasize,
-  Pane,
-  Tab,
-  useApplication,
-  usePanels,
-  useReducedMotion,
-} from '@twick/ui';
-
-import {useSignalEffect} from '@preact/signals';
-import {useEffect, useRef} from 'preact/hooks';
-import {usePluginState} from './Provider';
-import {DetachedRoot, ViewRoot} from './tree';
-
-function TabComponent({tab}: PluginTabProps) {
-  const {sidebar} = usePanels();
-  const inspectorTab = useRef<HTMLButtonElement>(null);
-  const reducedMotion = useReducedMotion();
-  const {selectedKey} = usePluginState();
-  const {logger} = useApplication();
-
-  useEffect(
-    () =>
-      logger.onInspected.subscribe(key => {
-        sidebar.set(tab);
-        selectedKey.value = key;
-      }),
-    [tab],
-  );
-
-  useSignalEffect(() => {
-    if (
-      selectedKey.value &&
-      sidebar.current.peek() !== tab &&
-      !reducedMotion &&
-      inspectorTab.current &&
-      inspectorTab.current.getAnimations().length < 2
-    ) {
-      inspectorTab.current.animate(emphasize(), {duration: 400});
-      inspectorTab.current.animate([{color: 'white'}, {color: ''}], {
-        duration: 800,
-      });
-    }
-  });
-
-  return (
-    <Tab
-      forwardRef={inspectorTab}
-      title="Scene Graph"
-      id="scene-graph-tab"
-      tab={tab}
-    >
-      <AccountTree />
-    </Tab>
-  );
-}
-
-function PaneComponent() {
-  const {selectedKey} = usePluginState();
-
-  return (
-    <Pane
-      title="Scene Graph"
-      id="scene-graph-pane"
-      onClick={() => {
-        selectedKey.value = null;
-      }}
-    >
-      <ViewRoot />
-      <DetachedRoot />
-    </Pane>
-  );
-}
-
-export const SceneGraphTabConfig: PluginTabConfig = {
-  name: 'scene-graph',
-  tabComponent: TabComponent,
-  paneComponent: PaneComponent,
-};
+import type {PluginTabConfig, PluginTabProps} from '@twick/ui';
+import {
+  AccountTree,
+  emphasize,
+  Pane,
+  Tab,
+  useApplication,
+  usePanels,
+  useReducedMotion,
+} from '@twick/ui';
+
+import {useSignalEffect} from '@preact/signals';
+import {useEffect, useRef} from 'preact/hooks';
+import {usePluginState} from './Provider';
+import {DetachedRoot, ViewRoot} from './tree';
+
+function TabComponent({tab}: PluginTabProps) {
+  const {sidebar} = usePanels();
+  const inspectorTab = useRef<HTMLButtonElement>(null);
+  const reducedMotion = useReducedMotion();
+  const {selectedKey} = usePluginState();
+  const {logger} = useApplication();
+
+  useEffect(
+    () =>
+      logger.onInspected.subscribe(key => {
+        sidebar.set(tab);
+        selectedKey.value = key;
+      }),
+    [tab],
+  );
+
+  useSignalEffect(() => {
+    if (
+      selectedKey.value &&
+      sidebar.current.peek() !== tab &&
+      !reducedMotion &&
+      inspectorTab.current &&
+      inspectorTab.current.getAnimations().length < 2
+    ) {
+      inspectorTab.current.animate(emphasize(), {duration: 400});
+      inspectorTab.current.animate([{color: 'white'}, {color: ''}], {
+        duration: 800,
+      });
+    }
+  });
+
+  return (
+    <Tab
+      forwardRef={inspectorTab}
+      title="Scene Graph"
+      id="scene-graph-tab"
+      tab={tab}
+    >
+      <AccountTree />
+    </Tab>
+  );
+}
+
+function PaneComponent() {
+  const {selectedKey} = usePluginState();
+
+  return (
+    <Pane
+      title="Scene Graph"
+      id="scene-graph-pane"
+      onClick={() => {
+        selectedKey.value = null;
+      }}
+    >
+      <ViewRoot />
+      <DetachedRoot />
+    </Pane>
+  );
+}
+
+export const SceneGraphTabConfig: PluginTabConfig = {
+  name: 'scene-graph',
+  tabComponent: TabComponent,
+  paneComponent: PaneComponent,
+};

package/src/editor/icons/CircleIcon.tsx

@@ -1,7 +1,7 @@
-export function CircleIcon() {
-  return (
-    <svg viewBox="0 0 20 20" fill="currentColor">
-      <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" />
-    </svg>
-  );
-}
+export function CircleIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="currentColor">
+      <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" />
+    </svg>
+  );
+}

package/src/editor/icons/CodeBlockIcon.tsx

@@ -1,8 +1,8 @@
-export function CodeBlockIcon() {
-  return (
-    <svg viewBox="0 0 20 20" fill="currentColor">
-      <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" />
-      <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" />
-    </svg>
-  );
-}
+export function CodeBlockIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="currentColor">
+      <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" />
+      <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" />
+    </svg>
+  );
+}