@canvas-commons/2d 0.2.0

package/src/editor/shortcuts.ts

@@ -0,0 +1,27 @@
+import {makeShortcuts} from '@canvas-commons/editor';
+export const SCENE_GRAPH_SHORTCUTS = makeShortcuts('scene-graph', {
+  moveUp: {
+    display: '↑',
+    description: 'Go up',
+    key: 'ArrowUp',
+    modifiers: {},
+  },
+  modeDown: {
+    display: '↓',
+    description: 'Go down',
+    key: 'ArrowDown',
+    modifiers: {},
+  },
+  expandOrMoveDown: {
+    display: '→',
+    description: 'Expand / Enter',
+    key: 'ArrowRight',
+    modifiers: {},
+  },
+  collapseOrMoveUp: {
+    display: '←',
+    description: 'Collapse / Leave',
+    key: 'ArrowLeft',
+    modifiers: {},
+  },
+});

package/src/editor/tree/DetachedRoot.tsx

@@ -0,0 +1,27 @@
+import {usePluginState} from '../Provider';
+import {NodeElement} from './NodeElement';
+import {TreeElement} from './TreeElement';
+import {TreeRoot} from './TreeRoot';
+
+export function DetachedRoot() {
+  const {afterRender, openDetached, scene} = usePluginState();
+  const currentScene = scene.value;
+  const children = currentScene ? [...currentScene.getDetachedNodes()] : [];
+  afterRender.value;
+
+  return children.length > 0 ? (
+    <TreeRoot>
+      <TreeElement
+        open={openDetached.value}
+        hasChildren
+        onToggle={value => {
+          openDetached.value = value;
+        }}
+        label="Detached nodes"
+      >
+        {openDetached.value &&
+          children.map(child => <NodeElement node={child} depth={1} />)}
+      </TreeElement>
+    </TreeRoot>
+  ) : null;
+}

package/src/editor/tree/NodeElement.tsx

@@ -0,0 +1,72 @@
+import {NODE_NAME, Node} from '@canvas-commons/2d';
+import {useComputed, useSignal, useSignalEffect} from '@preact/signals';
+import {useEffect, 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 {
+    selectedNode,
+    visibleNodes,
+    selectNode,
+    hoveredKey,
+    openNodes,
+    afterRender,
+  } = usePluginState();
+  const ref = useRef<HTMLDivElement>(null);
+  const nodeSignal = useSignal(node);
+  nodeSignal.value = node;
+
+  const open = useComputed(() => openNodes.has(nodeSignal.value.key));
+
+  useEffect(() => {
+    visibleNodes.add(node.key);
+    return () => {
+      visibleNodes.delete(node.key);
+    };
+  }, [node.key]);
+
+  const children = useComputed(() => {
+    afterRender.value;
+    return nodeSignal.value.peekChildren();
+  });
+
+  useSignalEffect(() => {
+    if (node.key === selectedNode.value?.key) {
+      ref.current?.scrollIntoView({block: 'nearest', behavior: 'instant'});
+    }
+  });
+
+  const Icon = IconMap[node[NODE_NAME]] ?? IconMap.Node;
+
+  return (
+    <TreeElement
+      forwardRef={ref}
+      open={open.value}
+      hasChildren={children.value.length > 0}
+      onToggle={value => openNodes.toggle(node.key, value)}
+      depth={depth}
+      icon={<Icon />}
+      label={node.key}
+      selected={selectedNode.value === node}
+      onClick={event => {
+        selectNode(node.key);
+        event.stopPropagation();
+      }}
+      onPointerEnter={() => (hoveredKey.value = node.key)}
+      onPointerLeave={() => (hoveredKey.value = null)}
+    >
+      {open.value &&
+        children.value.length > 0 &&
+        children.value.map(child => (
+          <NodeElement node={child} depth={depth + 1} />
+        ))}
+    </TreeElement>
+  );
+}

package/src/editor/tree/TreeElement.tsx

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

package/src/editor/tree/TreeRoot.tsx

@@ -0,0 +1,10 @@
+import {clsx} from 'clsx';
+import {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

@@ -0,0 +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;
+}

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

@@ -0,0 +1,45 @@
+.root {
+  margin-top: -1px;
+  padding: 3px 0 4px;
+  border-top: 2px solid var(--background-color);
+  width: max-content;
+  min-width: 100%;
+}
+
+.entry {
+  --depth: 0;
+
+  padding: 4px 0 4px calc(var(--depth) * 22px + 24px);
+  border-radius: var(--radius);
+  user-select: none;
+  cursor: pointer;
+
+  &: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);
+  }
+}
+
+.label {
+  width: max-content;
+  display: flex;
+  padding-right: 8px;
+
+  > 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

@@ -0,0 +1,4 @@
+export * from './DetachedRoot';
+export * from './navigation';
+export * from './NodeElement';
+export * from './ViewRoot';

package/src/editor/tree/navigation.ts

@@ -0,0 +1,145 @@
+import {Node} from '@canvas-commons/2d';
+import {useShortcuts} from '@canvas-commons/editor';
+import {useComputed} from '@preact/signals';
+import {usePluginState} from '../Provider';
+import {SCENE_GRAPH_SHORTCUTS} from '../shortcuts';
+
+export function useKeyboardNavigation() {
+  const {selectedNode, scene, afterRender, openNodes, selectNode} =
+    usePluginState();
+
+  const detachedNodes = useComputed(() => {
+    afterRender.value;
+    const detachedNodes: string[] = [];
+    for (const node of scene.value?.getDetachedNodes() ?? []) {
+      detachedNodes.push(node.key);
+    }
+    return detachedNodes;
+  });
+
+  function selectView() {
+    selectNode(scene.value?.getView()?.key ?? null);
+  }
+
+  function findNextNodeUp(node: Node): string | null {
+    const detachedIndex = detachedNodes.value.indexOf(node.key);
+    if (detachedIndex > 0) {
+      return detachedNodes.value[detachedIndex - 1];
+    } else if (detachedIndex === 0) {
+      // Go back to the scene graph after reaching the top of detached nodes:
+      return findLowestNode();
+    }
+
+    const parent = node.parent();
+    if (!parent) {
+      return null;
+    }
+
+    const siblings = parent.peekChildren();
+    const index = siblings.indexOf(node);
+    if (index < 1) {
+      return parent.key;
+    }
+
+    let current = siblings[index - 1];
+    while (current) {
+      const children = current.peekChildren();
+      if (openNodes.has(current.key) && children.length > 0) {
+        current = children.at(-1)!;
+      } else {
+        return current.key;
+      }
+    }
+
+    return null;
+  }
+
+  function findNextNodeDown(node: Node): string | null {
+    if (openNodes.has(node.key)) {
+      const children = node.peekChildren();
+      if (children.length > 0) {
+        return children[0].key;
+      }
+    }
+
+    let current = node;
+    while (current) {
+      const parent = current.parent();
+      if (!parent) {
+        const detachedIndex = detachedNodes.value.indexOf(node.key);
+        if (detachedIndex >= 0) {
+          return detachedNodes.value[detachedIndex + 1] ?? null;
+        }
+
+        // Try jumping down to the detached section after reaching the bottom:
+        return detachedNodes.value[0] ?? null;
+      }
+
+      const siblings = parent.peekChildren();
+      const index = siblings.indexOf(current);
+      if (index < siblings.length - 1) {
+        return siblings[index + 1].key;
+      }
+
+      current = parent;
+    }
+
+    return null;
+  }
+
+  function findLowestNode(): string | null {
+    let current: Node | undefined = scene.value?.getView();
+    while (current) {
+      const children = current.peekChildren();
+      if (openNodes.has(current.key) && children.length > 0) {
+        current = children.at(-1)!;
+      } else {
+        return current.key;
+      }
+    }
+    return null;
+  }
+
+  useShortcuts(SCENE_GRAPH_SHORTCUTS, {
+    moveUp: () => {
+      const node = selectedNode.value;
+      if (!node) {
+        selectView();
+        return;
+      }
+
+      selectNode(findNextNodeUp(node) ?? node.key);
+    },
+    collapseOrMoveUp: () => {
+      const node = selectedNode.value;
+      if (!node) {
+        selectView();
+        return;
+      }
+
+      if (!openNodes.delete(node.key)) {
+        selectNode(node.parent()?.key ?? node.key);
+      }
+    },
+    modeDown: () => {
+      const node = selectedNode.value;
+      if (!node) {
+        selectView();
+        return;
+      }
+
+      selectNode(findNextNodeDown(node) ?? node.key);
+    },
+    expandOrMoveDown: () => {
+      const node = selectedNode.value;
+      if (!node) {
+        selectView();
+        return;
+      }
+
+      if (node.peekChildren().length === 0 || !openNodes.add(node.key)) {
+        selectNode(findNextNodeDown(node) ?? node.key);
+      }
+    },
+  });
+}

package/src/editor/tsconfig.build.json

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

package/src/editor/tsconfig.json

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

package/src/editor/tsdoc.json

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

package/src/editor/utils/SignalSet.ts

@@ -0,0 +1,37 @@
+import {signal} from '@preact/signals';
+
+export class SignalSet<T> {
+  private readonly set = new Set<T>();
+  private readonly signal = signal(0);
+
+  public has(value: T) {
+    this.signal.value;
+    return this.set.has(value);
+  }
+
+  public peekHas(value: T) {
+    return this.set.has(value);
+  }
+
+  public add(value: T): boolean {
+    if (this.set.has(value)) {
+      return false;
+    }
+
+    this.set.add(value);
+    this.signal.value++;
+    return true;
+  }
+
+  public delete(value: T): boolean {
+    const result = this.set.delete(value);
+    if (result) {
+      this.signal.value++;
+    }
+    return result;
+  }
+
+  public toggle(value: T, state: boolean): boolean {
+    return state ? this.add(value) : this.delete(value);
+  }
+}

package/src/editor/utils/index.ts

@@ -0,0 +1 @@
+export * from './SignalSet';

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

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