@pixel-point/toolcraft 0.0.13 → 0.0.15

package/templates/runtime/react/layers/layers-panel-row.tsx

@@ -0,0 +1,475 @@
+"use client";
+
+import * as React from "react";
+import { StackSimpleIcon } from "@phosphor-icons/react";
+import { Button, ScrollFade } from "@repo/ui";
+import { Eye, EyeOff, Trash2 } from "lucide-react";
+
+import type { ToolcraftLayer } from "../../state/types";
+import {
+  getLayerDisplayName,
+  isGroupLayer,
+  layerDepthIndentPx,
+  type LayerDropPlacement,
+} from "./layers-panel-model";
+
+type LayerRowProps = {
+  depth: number;
+  hasMedia: boolean;
+  insertIndicatorDepth?: number;
+  insertPlacement?: LayerDropPlacement;
+  isDragging: boolean;
+  isDropTarget: boolean;
+  isGroupDropAvailable: boolean;
+  isGroupHighlighted: boolean;
+  isReorderDragging: boolean;
+  isSelected: boolean;
+  isVisible: boolean;
+  layer: ToolcraftLayer;
+  onDelete: () => void;
+  onPointerCancel: React.PointerEventHandler<HTMLElement>;
+  onPointerDown: React.PointerEventHandler<HTMLElement>;
+  onPointerMove: React.PointerEventHandler<HTMLElement>;
+  onPointerUp: React.PointerEventHandler<HTMLElement>;
+  onRename: (displayName: string) => void;
+  onSelect: () => void;
+  onToggleCollapsed: () => void;
+  onToggleVisibility: () => void;
+};
+
+const selectedLayerSurfaceClassName =
+  "bg-[color:color-mix(in_oklab,var(--accent)_20%,transparent)]";
+const hoveredLayerSurfaceClassName =
+  "hover:bg-[color:color-mix(in_oklab,var(--foreground)_10%,transparent)]";
+
+function cn(...classNames: Array<string | false | null | undefined>): string {
+  return classNames.filter(Boolean).join(" ");
+}
+
+function LayerNameEditor({
+  displayName,
+  draftName,
+  onCancel,
+  onCommit,
+  onDraftNameChange,
+}: {
+  displayName: string;
+  draftName: string;
+  onCancel: () => void;
+  onCommit: () => void;
+  onDraftNameChange: (value: string) => void;
+}): React.JSX.Element {
+  const inputRef = React.useRef<HTMLInputElement | null>(null);
+
+  React.useEffect(() => {
+    const input = inputRef.current;
+
+    if (!input) {
+      return;
+    }
+
+    input.focus();
+    input.select();
+  }, []);
+
+  return (
+    <div className="flex w-full min-w-0 cursor-text items-center text-left select-text">
+      <input
+        aria-label={`Layer name for ${displayName}`}
+        className="min-w-0 flex-1 cursor-text border-0 bg-transparent p-0 text-xs leading-normal font-medium text-[color:var(--foreground)] outline-none select-text"
+        onBlur={onCommit}
+        onChange={(event) => onDraftNameChange(event.currentTarget.value)}
+        onClick={(event) => event.stopPropagation()}
+        onKeyDown={(event) => {
+          if (event.key === "Enter") {
+            event.preventDefault();
+            onCommit();
+          }
+
+          if (event.key === "Escape") {
+            event.preventDefault();
+            onCancel();
+          }
+        }}
+        onPointerDown={(event) => event.stopPropagation()}
+        ref={inputRef}
+        value={draftName}
+      />
+    </div>
+  );
+}
+
+function LayerNameContent({
+  displayName,
+  isVisible,
+}: {
+  displayName: string;
+  isVisible: boolean;
+}): React.JSX.Element {
+  return (
+    <div className="flex w-full min-w-0 cursor-default items-center text-left select-none">
+      <ScrollFade
+        className="no-scrollbar min-w-0"
+        containerClassName="min-w-0 flex-1"
+        preset="compact"
+        side="right"
+        watch={[displayName]}
+      >
+        <span
+          className={cn(
+            "block min-w-max pr-2 text-xs font-medium whitespace-nowrap text-[color:var(--foreground)] transition-opacity duration-150 ease-out select-none",
+            !isVisible && "opacity-30",
+          )}
+          title={displayName}
+        >
+          {displayName}
+        </span>
+      </ScrollFade>
+    </div>
+  );
+}
+
+function LayerRowIcon({
+  collapsed,
+  displayName,
+  hasMedia,
+  isGroup,
+  isVisible,
+  onToggleCollapsed,
+}: {
+  collapsed?: boolean;
+  displayName: string;
+  hasMedia: boolean;
+  isGroup: boolean;
+  isVisible: boolean;
+  onToggleCollapsed?: () => void;
+}): React.JSX.Element {
+  const iconClassName = cn(
+    "size-3 shrink-0 text-[color:var(--foreground)] transition-opacity duration-150 ease-out",
+    isVisible ? "opacity-60" : "opacity-30",
+  );
+
+  return (
+    <span
+      aria-hidden="true"
+      className="group/layer-row-icon-hit flex h-8 w-3 shrink-0 cursor-default items-center justify-center"
+      data-layer-row-icon-hit-area={isGroup ? "group" : undefined}
+      data-layer-row-icon-label={
+        isGroup ? (collapsed ? `Expand ${displayName}` : `Collapse ${displayName}`) : undefined
+      }
+      onClick={
+        isGroup
+          ? (event) => {
+              event.stopPropagation();
+              onToggleCollapsed?.();
+            }
+          : undefined
+      }
+      onDoubleClick={isGroup ? (event) => event.stopPropagation() : undefined}
+      onPointerDown={isGroup ? (event) => event.stopPropagation() : undefined}
+    >
+      {isGroup ? (
+        <svg
+          className={cn(
+            iconClassName,
+            "transition-[opacity,transform] duration-150 ease-out",
+            isVisible && "group-hover/layer-row-icon-hit:opacity-100",
+            collapsed && "-rotate-90",
+          )}
+          data-layer-row-icon="group"
+          fill="none"
+          viewBox="0 0 256 256"
+        >
+          <path
+            d="M58 93L125.879 160.879C127.05 162.05 128.95 162.05 130.121 160.879L198 93"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeWidth="24"
+          />
+        </svg>
+      ) : hasMedia ? (
+        <svg
+          aria-hidden="true"
+          className={iconClassName}
+          data-layer-row-icon="image"
+          fill="none"
+          viewBox="0 0 256 256"
+        >
+          <rect
+            height="196"
+            rx="20"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeWidth="16"
+            width="196"
+            x="30"
+            y="30"
+          />
+          <path
+            d="M60 162.719L88.809 123.726C90.2597 121.762 93.1154 121.545 94.8465 123.266L168 196"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeWidth="16"
+          />
+          <circle cx="164" cy="92" fill="currentColor" r="22" />
+        </svg>
+      ) : (
+        <StackSimpleIcon aria-hidden="true" className={iconClassName} data-layer-row-icon="layer" />
+      )}
+    </span>
+  );
+}
+
+function LayerActionButtons({
+  displayName,
+  isEditingName,
+  isDragging,
+  isReorderDragging,
+  isVisible,
+  layer,
+  onDelete,
+  onToggleVisibility,
+}: {
+  displayName: string;
+  isEditingName: boolean;
+  isDragging: boolean;
+  isReorderDragging: boolean;
+  isVisible: boolean;
+  layer: ToolcraftLayer;
+  onDelete: () => void;
+  onToggleVisibility: () => void;
+}): React.JSX.Element | null {
+  if (isEditingName) {
+    return null;
+  }
+
+  const mutedIconStyle = isVisible ? undefined : { opacity: 0.3 };
+
+  return (
+    <div
+      className={cn(
+        "inline-flex w-0 translate-x-[7px] shrink-0 items-center self-center gap-px overflow-hidden opacity-0",
+        isDragging && "pointer-events-none w-auto overflow-visible opacity-100 transition-none",
+        !isDragging &&
+          (isReorderDragging
+            ? "pointer-events-none transition-none"
+            : "transition-none group-hover/layer:w-auto group-hover/layer:overflow-visible group-hover/layer:opacity-100"),
+      )}
+      data-layer-actions=""
+      data-visible={isVisible ? "true" : "false"}
+    >
+      <Button
+        aria-label={layer.visible ? `Hide ${displayName}` : `Show ${displayName}`}
+        className="cursor-default!"
+        onClick={(event) => {
+          event.stopPropagation();
+          onToggleVisibility();
+        }}
+        onDoubleClick={(event) => event.stopPropagation()}
+        onPointerDown={(event) => event.stopPropagation()}
+        size="icon-sm"
+        type="button"
+        variant="ghost"
+      >
+        {layer.visible ? <Eye style={mutedIconStyle} /> : <EyeOff style={mutedIconStyle} />}
+      </Button>
+      <Button
+        aria-label={`Delete ${displayName}`}
+        className="cursor-default!"
+        onClick={(event) => {
+          event.stopPropagation();
+          onDelete();
+        }}
+        onDoubleClick={(event) => event.stopPropagation()}
+        onPointerDown={(event) => event.stopPropagation()}
+        size="icon-sm"
+        type="button"
+        variant="ghost"
+      >
+        <Trash2 style={mutedIconStyle} />
+      </Button>
+    </div>
+  );
+}
+
+function useLayerNameEditing({
+  displayName,
+  onRename,
+}: {
+  displayName: string;
+  onRename: (displayName: string) => void;
+}) {
+  const [isEditingName, setIsEditingName] = React.useState(false);
+  const [draftName, setDraftName] = React.useState(displayName);
+  const skipNextBlurCommitRef = React.useRef(false);
+
+  const startEditingName = (): void => {
+    setDraftName(displayName);
+    setIsEditingName(true);
+  };
+
+  const commitEditingName = (): void => {
+    if (skipNextBlurCommitRef.current) {
+      skipNextBlurCommitRef.current = false;
+      return;
+    }
+
+    const nextDisplayName = draftName.trim().replace(/\s+/g, " ");
+
+    if (nextDisplayName && nextDisplayName !== displayName) {
+      onRename(nextDisplayName);
+    }
+
+    setIsEditingName(false);
+  };
+
+  const cancelEditingName = (): void => {
+    skipNextBlurCommitRef.current = true;
+    setDraftName(displayName);
+    setIsEditingName(false);
+  };
+
+  return {
+    cancelEditingName,
+    commitEditingName,
+    draftName,
+    isEditingName,
+    setDraftName,
+    startEditingName,
+  };
+}
+
+export function LayerRow({
+  depth,
+  hasMedia,
+  insertIndicatorDepth,
+  insertPlacement,
+  isDragging,
+  isDropTarget,
+  isGroupDropAvailable,
+  isGroupHighlighted,
+  isReorderDragging,
+  isSelected,
+  isVisible,
+  layer,
+  onDelete,
+  onPointerCancel,
+  onPointerDown,
+  onPointerMove,
+  onPointerUp,
+  onRename,
+  onSelect,
+  onToggleCollapsed,
+  onToggleVisibility,
+}: LayerRowProps): React.JSX.Element {
+  const displayName = getLayerDisplayName(layer);
+  const isGroup = isGroupLayer(layer);
+  const nameEditing = useLayerNameEditing({ displayName, onRename });
+
+  return (
+    <li
+      aria-label={displayName}
+      aria-selected={isSelected}
+      className={cn(
+        "group/layer relative flex h-8 cursor-default! touch-none select-none items-center gap-px",
+        isDragging && "cursor-grabbing",
+      )}
+      data-dragging={isDragging ? "true" : undefined}
+      data-drop-indicator={insertPlacement}
+      data-drop-target={isDropTarget ? "true" : undefined}
+      data-layer-id={layer.id}
+      data-reorder-dragging={isReorderDragging ? "true" : undefined}
+      data-selected={isSelected}
+      data-visible={isVisible ? "true" : "false"}
+      data-template-layer-depth={depth}
+      data-template-layer-kind={isGroup ? "group" : "layer"}
+      data-template-layer-name={layer.id}
+      data-template-layer-parent={layer.parentGroupId}
+      onClick={onSelect}
+      onDoubleClick={(event) => {
+        event.preventDefault();
+        nameEditing.startEditingName();
+      }}
+      onKeyDown={(event) => {
+        if (
+          nameEditing.isEditingName ||
+          !(event.key === "Enter" || event.key === " ") ||
+          (event.target instanceof Element && event.target.closest("button,input,select,textarea"))
+        ) {
+          return;
+        }
+
+        event.preventDefault();
+        onSelect();
+      }}
+      onPointerCancel={onPointerCancel}
+      onPointerDown={onPointerDown}
+      onPointerMove={onPointerMove}
+      onPointerUp={onPointerUp}
+      role="option"
+      tabIndex={0}
+    >
+      {insertPlacement ? (
+        <span
+          aria-hidden="true"
+          className={cn(
+            "pointer-events-none absolute right-2 z-20 h-px rounded-full bg-[color:var(--foreground)]",
+            insertPlacement === "before" ? "-top-px" : isGroup ? "bottom-0" : "-bottom-px",
+          )}
+          data-layer-drop-indicator={insertPlacement}
+          style={{
+            left: `${8 + Math.max(0, insertIndicatorDepth ?? depth) * layerDepthIndentPx}px`,
+          }}
+        />
+      ) : null}
+      <div
+        className={cn(
+          "grid h-8 min-w-0 flex-1 cursor-default! grid-cols-[minmax(0,1fr)_auto] grid-rows-[minmax(0,1fr)] items-center gap-1.5 rounded-lg border pr-2.5 pl-[7px]",
+          "border-transparent transition-none",
+          !isSelected && !isReorderDragging && hoveredLayerSurfaceClassName,
+          isSelected && selectedLayerSurfaceClassName,
+          isGroupDropAvailable && "border-[color:var(--accent)]",
+          isDropTarget && "bg-[color:color-mix(in_oklab,var(--accent)_10%,transparent)]",
+          isGroupHighlighted &&
+            "border-[color:var(--accent)] bg-[color:color-mix(in_oklab,var(--accent)_15%,transparent)]",
+        )}
+        data-layer-row-surface=""
+      >
+        <div
+          className="flex min-w-0 items-center gap-2"
+          style={depth > 0 ? { marginLeft: `${depth * layerDepthIndentPx}px` } : undefined}
+        >
+          <LayerRowIcon
+            collapsed={isGroup ? layer.collapsed === true : undefined}
+            displayName={displayName}
+            hasMedia={hasMedia}
+            isGroup={isGroup}
+            isVisible={isVisible}
+            onToggleCollapsed={isGroup ? onToggleCollapsed : undefined}
+          />
+          {nameEditing.isEditingName ? (
+            <LayerNameEditor
+              displayName={displayName}
+              draftName={nameEditing.draftName}
+              onCancel={nameEditing.cancelEditingName}
+              onCommit={nameEditing.commitEditingName}
+              onDraftNameChange={nameEditing.setDraftName}
+            />
+          ) : (
+            <LayerNameContent displayName={displayName} isVisible={isVisible} />
+          )}
+        </div>
+        <LayerActionButtons
+          displayName={displayName}
+          isEditingName={nameEditing.isEditingName}
+          isDragging={isDragging}
+          isReorderDragging={isReorderDragging}
+          isVisible={isVisible}
+          layer={layer}
+          onDelete={onDelete}
+          onToggleVisibility={onToggleVisibility}
+        />
+      </div>
+    </li>
+  );
+}

package/templates/runtime/react/layers/layers-panel-test-utils.tsx

@@ -0,0 +1,135 @@
+import { cleanup, render } from "@testing-library/react";
+import type * as React from "react";
+import { vi } from "vitest";
+
+import { defineToolcraft } from "../../schema/define-toolcraft";
+import type { ToolcraftLayer, ToolcraftMediaAsset } from "../../state/types";
+import { ToolcraftRoot } from "../app-shell/toolcraft-root";
+import { useToolcraft } from "../app-shell/use-toolcraft";
+import { LayersPanel } from "./layers-panel";
+
+export function installLayersPanelMatchMedia() {
+  Object.defineProperty(window, "matchMedia", {
+    value: (query: string) => ({
+      addEventListener: () => undefined,
+      addListener: () => undefined,
+      dispatchEvent: () => false,
+      matches: query === "(prefers-reduced-motion: reduce)",
+      media: query,
+      onchange: null,
+      removeEventListener: () => undefined,
+      removeListener: () => undefined,
+    }),
+    writable: true,
+  });
+}
+
+export function cleanupLayersPanelTestEnv() {
+  cleanup();
+  document.documentElement.classList.remove("dark");
+  document.documentElement.style.colorScheme = "";
+  window.localStorage.clear();
+  vi.restoreAllMocks();
+  Reflect.deleteProperty(document, "elementFromPoint");
+}
+
+export function createSchema() {
+  return defineToolcraft({
+    canvas: { enabled: true },
+    panels: {
+      layers: true,
+    },
+  });
+}
+
+export const seededLayers: ToolcraftLayer[] = [
+  {
+    collapsed: false,
+    displayName: "Scene Group",
+    id: "group-1",
+    kind: "group",
+    name: "scene-group",
+    visible: true,
+  },
+  {
+    displayName: "Layer 1",
+    id: "layer-1",
+    kind: "layer",
+    name: "layer-1",
+    parentGroupId: "group-1",
+    visible: true,
+  },
+  {
+    displayName: "Layer 2",
+    id: "layer-2",
+    kind: "layer",
+    name: "layer-2",
+    visible: true,
+  },
+];
+
+function StateProbe() {
+  const { state } = useToolcraft();
+
+  return (
+    <>
+      <span data-testid="selected-layer">{state.selectedLayerId}</span>
+      <span data-testid="layer-count">{state.layers.length}</span>
+      <span data-testid="layer-1-visible">
+        {String(state.layers.find((layer) => layer.id === "layer-1")?.visible)}
+      </span>
+      <span data-testid="group-collapsed">
+        {String(state.layers.find((layer) => layer.id === "group-1")?.collapsed)}
+      </span>
+      <span data-testid="layer-tree">
+        {state.layers
+          .map((layer) => `${layer.id}:${layer.parentGroupId ?? "root"}`)
+          .join("|")}
+      </span>
+    </>
+  );
+}
+
+export function renderLayersPanel(
+  props: Partial<React.ComponentProps<typeof LayersPanel>> = {},
+  layers = seededLayers,
+  mediaAssets: ToolcraftMediaAsset[] = [
+    {
+      dataUrl: "data:image/png;base64,test",
+      fileName: "layer-1.png",
+      id: "media-1",
+      layerId: "layer-1",
+      mimeType: "image/png",
+      position: { x: 0, y: 0 },
+      size: { height: 768, unit: "px", width: 1024 },
+    },
+  ],
+) {
+  return render(
+    <ToolcraftRoot
+      initialState={{
+        layers,
+        mediaAssets,
+        selectedLayerId: "layer-1",
+      }}
+      schema={createSchema()}
+    >
+      <LayersPanel framed={false} {...props} />
+      <StateProbe />
+    </ToolcraftRoot>,
+  );
+}
+
+export function mockLayerRowRect(row: HTMLElement, top = 0) {
+  vi.spyOn(row, "getBoundingClientRect").mockReturnValue({
+    bottom: top + 32,
+    height: 32,
+    left: 0,
+    right: 240,
+    toJSON: () => ({}),
+    top,
+    width: 240,
+    x: 0,
+    y: top,
+  });
+}