@twick/2d 0.14.18 → 0.14.19

package/src/editor/tree/NodeElement.tsx

@@ -1,74 +1,74 @@
-import {useComputed, useSignal, useSignalEffect} from '@preact/signals';
-import type {Node} from '@twick/2d';
-import {NODE_NAME} from '@twick/2d';
-import {useRef} from 'preact/hooks';
-import {usePluginState} from '../Provider';
-import {IconMap} from '../icons/IconMap';
-import {TreeElement} from './TreeElement';
-
-interface NodeElementProps {
-  node: Node;
-  depth?: number;
-}
-
-export function NodeElement({node, depth = 0}: NodeElementProps) {
-  const {selectedKey, hoveredKey, openNodes, selectedChain, afterRender} =
-    usePluginState();
-  const ref = useRef<HTMLDivElement>(null);
-  const open = useSignal(
-    selectedChain.peek().has(node.key) || (openNodes.get(node.key) ?? false),
-  );
-  const nodeSignal = useSignal(node);
-  nodeSignal.value = node;
-
-  const children = useComputed(() => {
-    afterRender.value;
-    return nodeSignal.value.peekChildren();
-  });
-
-  useSignalEffect(() => {
-    open.value = openNodes.get(nodeSignal.value.key) ?? false;
-  });
-
-  useSignalEffect(() => {
-    const chain = selectedChain.value;
-    if (chain.has(nodeSignal.value.key)) {
-      open.value = true;
-    }
-  });
-
-  useSignalEffect(() => {
-    openNodes.set(nodeSignal.value.key, open.value);
-  });
-
-  useSignalEffect(() => {
-    const key = selectedKey.value;
-    if (node.key === key) {
-      ref.current?.scrollIntoView({block: 'nearest', behavior: 'instant'});
-    }
-  });
-
-  const Icon = IconMap[node[NODE_NAME]] ?? IconMap.Node;
-
-  return (
-    <TreeElement
-      forwardRef={ref}
-      open={open}
-      depth={depth}
-      icon={<Icon />}
-      label={node.key}
-      selected={selectedKey.value === node.key}
-      onClick={event => {
-        selectedKey.value = node.key;
-        event.stopPropagation();
-      }}
-      onPointerEnter={() => (hoveredKey.value = node.key)}
-      onPointerLeave={() => (hoveredKey.value = null)}
-    >
-      {children.value.length > 0 &&
-        children.value.map(child => (
-          <NodeElement node={child} depth={depth + 1} />
-        ))}
-    </TreeElement>
-  );
-}
+import {useComputed, useSignal, useSignalEffect} from '@preact/signals';
+import type {Node} from '@twick/2d';
+import {NODE_NAME} from '@twick/2d';
+import {useRef} from 'preact/hooks';
+import {usePluginState} from '../Provider';
+import {IconMap} from '../icons/IconMap';
+import {TreeElement} from './TreeElement';
+
+interface NodeElementProps {
+  node: Node;
+  depth?: number;
+}
+
+export function NodeElement({node, depth = 0}: NodeElementProps) {
+  const {selectedKey, hoveredKey, openNodes, selectedChain, afterRender} =
+    usePluginState();
+  const ref = useRef<HTMLDivElement>(null);
+  const open = useSignal(
+    selectedChain.peek().has(node.key) || (openNodes.get(node.key) ?? false),
+  );
+  const nodeSignal = useSignal(node);
+  nodeSignal.value = node;
+
+  const children = useComputed(() => {
+    afterRender.value;
+    return nodeSignal.value.peekChildren();
+  });
+
+  useSignalEffect(() => {
+    open.value = openNodes.get(nodeSignal.value.key) ?? false;
+  });
+
+  useSignalEffect(() => {
+    const chain = selectedChain.value;
+    if (chain.has(nodeSignal.value.key)) {
+      open.value = true;
+    }
+  });
+
+  useSignalEffect(() => {
+    openNodes.set(nodeSignal.value.key, open.value);
+  });
+
+  useSignalEffect(() => {
+    const key = selectedKey.value;
+    if (node.key === key) {
+      ref.current?.scrollIntoView({block: 'nearest', behavior: 'instant'});
+    }
+  });
+
+  const Icon = IconMap[node[NODE_NAME]] ?? IconMap.Node;
+
+  return (
+    <TreeElement
+      forwardRef={ref}
+      open={open}
+      depth={depth}
+      icon={<Icon />}
+      label={node.key}
+      selected={selectedKey.value === node.key}
+      onClick={event => {
+        selectedKey.value = node.key;
+        event.stopPropagation();
+      }}
+      onPointerEnter={() => (hoveredKey.value = node.key)}
+      onPointerLeave={() => (hoveredKey.value = null)}
+    >
+      {children.value.length > 0 &&
+        children.value.map(child => (
+          <NodeElement node={child} depth={depth + 1} />
+        ))}
+    </TreeElement>
+  );
+}

package/src/editor/tree/TreeElement.tsx

@@ -1,72 +1,72 @@
-import type {Signal} from '@preact/signals';
-import {Collapse, Toggle} from '@twick/ui';
-import {clsx} from 'clsx';
-import type {ComponentChildren, JSX} from 'preact';
-import type {Ref} from 'preact/hooks';
-import styles from './index.module.scss';
-
-const DEPTH_VAR = '--depth';
-
-interface TreeElementProps
-  extends Omit<JSX.HTMLAttributes<HTMLDivElement>, 'label' | 'icon'> {
-  icon?: ComponentChildren;
-  label: ComponentChildren;
-  children?: ComponentChildren;
-  selected?: boolean;
-  open: Signal<boolean>;
-  depth?: number;
-  forwardRef?: Ref<HTMLDivElement>;
-}
-
-export function TreeElement({
-  label,
-  children,
-  selected,
-  depth = 0,
-  open,
-  icon,
-  forwardRef,
-  ...props
-}: TreeElementProps) {
-  const hasChildren = !!children;
-
-  return (
-    <>
-      <div
-        ref={forwardRef}
-        className={clsx(
-          styles.label,
-          selected && styles.active,
-          hasChildren && styles.parent,
-        )}
-        onDblClick={() => {
-          if (hasChildren) {
-            open.value = !open.value;
-          }
-        }}
-        {...props}
-        style={{[DEPTH_VAR]: `${depth}`}}
-      >
-        {hasChildren && (
-          <Toggle
-            animated={false}
-            open={open.value}
-            onToggle={value => {
-              open.value = value;
-            }}
-            onDblClick={e => {
-              e.stopPropagation();
-            }}
-          />
-        )}
-        {icon}
-        {label}
-      </div>
-      {hasChildren && (
-        <Collapse open={open.value} animated={false}>
-          {children}
-        </Collapse>
-      )}
-    </>
-  );
-}
+import type {Signal} from '@preact/signals';
+import {Collapse, Toggle} from '@twick/ui';
+import {clsx} from 'clsx';
+import type {ComponentChildren, JSX} from 'preact';
+import type {Ref} from 'preact/hooks';
+import styles from './index.module.scss';
+
+const DEPTH_VAR = '--depth';
+
+interface TreeElementProps
+  extends Omit<JSX.HTMLAttributes<HTMLDivElement>, 'label' | 'icon'> {
+  icon?: ComponentChildren;
+  label: ComponentChildren;
+  children?: ComponentChildren;
+  selected?: boolean;
+  open: Signal<boolean>;
+  depth?: number;
+  forwardRef?: Ref<HTMLDivElement>;
+}
+
+export function TreeElement({
+  label,
+  children,
+  selected,
+  depth = 0,
+  open,
+  icon,
+  forwardRef,
+  ...props
+}: TreeElementProps) {
+  const hasChildren = !!children;
+
+  return (
+    <>
+      <div
+        ref={forwardRef}
+        className={clsx(
+          styles.label,
+          selected && styles.active,
+          hasChildren && styles.parent,
+        )}
+        onDblClick={() => {
+          if (hasChildren) {
+            open.value = !open.value;
+          }
+        }}
+        {...props}
+        style={{[DEPTH_VAR]: `${depth}`}}
+      >
+        {hasChildren && (
+          <Toggle
+            animated={false}
+            open={open.value}
+            onToggle={value => {
+              open.value = value;
+            }}
+            onDblClick={e => {
+              e.stopPropagation();
+            }}
+          />
+        )}
+        {icon}
+        {label}
+      </div>
+      {hasChildren && (
+        <Collapse open={open.value} animated={false}>
+          {children}
+        </Collapse>
+      )}
+    </>
+  );
+}

package/src/editor/tree/TreeRoot.tsx

@@ -1,10 +1,10 @@
-import {clsx} from 'clsx';
-import type {JSX} from 'preact';
-import styles from './index.module.scss';
-
-export function TreeRoot({
-  className,
-  ...props
-}: JSX.HTMLAttributes<HTMLDivElement>) {
-  return <div className={clsx(styles.root, className)} {...props} />;
-}
+import {clsx} from 'clsx';
+import type {JSX} from 'preact';
+import styles from './index.module.scss';
+
+export function TreeRoot({
+  className,
+  ...props
+}: JSX.HTMLAttributes<HTMLDivElement>) {
+  return <div className={clsx(styles.root, className)} {...props} />;
+}

package/src/editor/tree/ViewRoot.tsx

@@ -1,20 +1,20 @@
-import {useSignal, useSignalEffect} from '@preact/signals';
-import {usePluginState} from '../Provider';
-import {NodeElement} from './NodeElement';
-import {TreeRoot} from './TreeRoot';
-
-export function ViewRoot() {
-  const {scene} = usePluginState();
-  const view = useSignal(scene.value?.getView());
-
-  useSignalEffect(() => {
-    view.value = scene.value?.getView();
-    return scene.value?.onReset.subscribe(() => {
-      view.value = scene.value?.getView();
-    });
-  });
-
-  return view.value ? (
-    <TreeRoot>{<NodeElement node={view.value} />}</TreeRoot>
-  ) : null;
-}
+import {useSignal, useSignalEffect} from '@preact/signals';
+import {usePluginState} from '../Provider';
+import {NodeElement} from './NodeElement';
+import {TreeRoot} from './TreeRoot';
+
+export function ViewRoot() {
+  const {scene} = usePluginState();
+  const view = useSignal(scene.value?.getView());
+
+  useSignalEffect(() => {
+    view.value = scene.value?.getView();
+    return scene.value?.onReset.subscribe(() => {
+      view.value = scene.value?.getView();
+    });
+  });
+
+  return view.value ? (
+    <TreeRoot>{<NodeElement node={view.value} />}</TreeRoot>
+  ) : null;
+}

package/src/editor/tree/index.module.scss

@@ -1,38 +1,38 @@
-.root {
-  margin-top: -1px;
-  padding: 3px 0 4px;
-  border-top: 2px solid var(--background-color);
-}
-
-.label {
-  --depth: 0;
-
-  padding: 4px 0 4px calc(var(--depth) * 22px + 24px);
-  border-radius: var(--radius);
-  user-select: none;
-  cursor: pointer;
-  display: flex;
-
-  &:hover {
-    background-color: var(--surface-color-hover);
-  }
-
-  &.active {
-    --surface-color-hover: none;
-    background-color: var(--theme-overlay);
-    color: var(--theme);
-  }
-
-  &.parent {
-    padding-left: calc(var(--depth) * 22px);
-  }
-
-  > svg {
-    width: 20px;
-    height: 20px;
-    align-self: center;
-    background-color: var(--background-color);
-    border-radius: var(--radius);
-    margin-right: 8px;
-  }
-}
+.root {
+  margin-top: -1px;
+  padding: 3px 0 4px;
+  border-top: 2px solid var(--background-color);
+}
+
+.label {
+  --depth: 0;
+
+  padding: 4px 0 4px calc(var(--depth) * 22px + 24px);
+  border-radius: var(--radius);
+  user-select: none;
+  cursor: pointer;
+  display: flex;
+
+  &:hover {
+    background-color: var(--surface-color-hover);
+  }
+
+  &.active {
+    --surface-color-hover: none;
+    background-color: var(--theme-overlay);
+    color: var(--theme);
+  }
+
+  &.parent {
+    padding-left: calc(var(--depth) * 22px);
+  }
+
+  > svg {
+    width: 20px;
+    height: 20px;
+    align-self: center;
+    background-color: var(--background-color);
+    border-radius: var(--radius);
+    margin-right: 8px;
+  }
+}

package/src/editor/tree/index.ts

@@ -1,3 +1,3 @@
-export * from './DetachedRoot';
-export * from './NodeElement';
-export * from './ViewRoot';
+export * from './DetachedRoot';
+export * from './NodeElement';
+export * from './ViewRoot';

package/src/editor/tsconfig.build.json

@@ -1,5 +1,5 @@
-{
-  "extends": "./tsconfig.json",
-  "references": [{"path": "../lib/tsconfig.build.json"}],
-  "include": ["**/*"]
-}
+{
+  "extends": "./tsconfig.json",
+  "references": [{"path": "../lib/tsconfig.build.json"}],
+  "include": ["**/*"]
+}

package/src/editor/tsconfig.json

@@ -1,12 +1,12 @@
-{
-  "extends": "../tsconfig.base.json",
-  "compilerOptions": {
-    "jsx": "react-jsx",
-    "jsxImportSource": "preact",
-    "paths": {
-      "@twick/2d": ["../lib"]
-    }
-  },
-  "references": [{"path": "../lib/tsconfig.json"}],
-  "include": ["**/*"]
-}
+{
+  "extends": "../tsconfig.base.json",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "jsxImportSource": "preact",
+    "paths": {
+      "@twick/2d": ["../lib"]
+    }
+  },
+  "references": [{"path": "../lib/tsconfig.json"}],
+  "include": ["**/*"]
+}

package/src/editor/tsdoc.json

@@ -1,4 +1,4 @@
-{
-  "$schema": "https://developer.microsoft.com/json-schemas/tsdoc/v0/tsdoc.schema.json",
-  "extends": ["../../../../tsdoc.json"]
-}
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/tsdoc/v0/tsdoc.schema.json",
+  "extends": ["../../../../tsdoc.json"]
+}

package/src/editor/vite-env.d.ts

@@ -1 +1 @@
-/// <reference types="vite/client" />
+/// <reference types="vite/client" />