@pixel-point/toolcraft 0.0.14 → 0.0.15

package/templates/runtime/react/canvas/canvas-shell-test-utils.tsx

@@ -0,0 +1,108 @@
+import { render } from "@testing-library/react";
+import type * as React from "react";
+import { vi } from "vitest";
+
+import { defineToolcraft } from "../../schema/define-toolcraft";
+import type { ToolcraftInitialState } from "../../state/types";
+import { ToolcraftRoot } from "../app-shell/toolcraft-root";
+import { useToolcraft } from "../app-shell/use-toolcraft";
+import { CanvasShell } from "./canvas-shell";
+
+export function createSchema() {
+  return defineToolcraft({
+    canvas: {
+      enabled: true,
+      size: { width: 300, height: 200, unit: "px" },
+      upload: true,
+    },
+    panels: {},
+  });
+}
+
+export function createIntrinsicMediaSchema() {
+  return defineToolcraft({
+    canvas: {
+      enabled: true,
+      sizing: { mode: "intrinsic-media" },
+      upload: true,
+    },
+    panels: {},
+  });
+}
+
+export function createUploadDefaultSchema() {
+  return defineToolcraft({
+    canvas: {
+      enabled: true,
+      upload: true,
+    },
+    panels: {},
+  });
+}
+
+export function CanvasStateProbe() {
+  const { state } = useToolcraft();
+
+  return (
+    <>
+      <span data-testid="canvas-offset">
+        {state.canvas.offset.x},{state.canvas.offset.y}
+      </span>
+      <span data-testid="canvas-zoom">{state.canvas.zoom}</span>
+      <span data-testid="media-count">{state.mediaAssets.length}</span>
+      <span data-testid="media-size">
+        {state.mediaAssets[0]?.size?.width ?? 0},{state.mediaAssets[0]?.size?.height ?? 0}
+      </span>
+      <span data-testid="media-targets">
+        {state.mediaAssets.map((asset) => asset.sourceTarget ?? "none").join(",")}
+      </span>
+      <span data-testid="media-kinds">
+        {state.mediaAssets.map((asset) => asset.assetKind ?? "image").join(",")}
+      </span>
+    </>
+  );
+}
+
+export function mockCanvasRect(canvas: HTMLElement): void {
+  vi.spyOn(canvas, "getBoundingClientRect").mockReturnValue({
+    bottom: 600,
+    height: 600,
+    left: 0,
+    right: 800,
+    toJSON: () => ({}),
+    top: 0,
+    width: 800,
+    x: 0,
+    y: 0,
+  });
+}
+
+type RenderCanvasShellOptions = {
+  afterCanvas?: React.ReactNode;
+  children?: React.ReactNode;
+  frameProps?: React.HTMLAttributes<HTMLDivElement>;
+  initialState?: ToolcraftInitialState;
+  schema?: ReturnType<typeof defineToolcraft>;
+};
+
+export function renderCanvasShell({
+  afterCanvas,
+  children,
+  frameProps,
+  initialState,
+  schema = createSchema(),
+}: RenderCanvasShellOptions = {}) {
+  const { style, ...restFrameProps } = frameProps ?? {};
+
+  return render(
+    <ToolcraftRoot initialState={initialState} schema={schema}>
+      <div
+        {...restFrameProps}
+        style={{ height: 640, position: "relative", width: 640, ...style }}
+      >
+        <CanvasShell>{children}</CanvasShell>
+        {afterCanvas}
+      </div>
+    </ToolcraftRoot>,
+  );
+}

package/templates/runtime/react/canvas/canvas-shell-upload.test.tsx

@@ -0,0 +1,106 @@
+import { cleanup, fireEvent, screen, waitFor } from "@testing-library/react";
+import { afterEach, describe, expect, it } from "vitest";
+
+import { defineToolcraft } from "../../schema/define-toolcraft";
+import {
+  CanvasStateProbe,
+  createSchema,
+  renderCanvasShell,
+} from "./canvas-shell-test-utils";
+
+afterEach(() => {
+  cleanup();
+});
+
+describe("CanvasShell upload routing", () => {
+  it("imports dropped images using editable canvas size", async () => {
+    renderCanvasShell({
+      afterCanvas: <CanvasStateProbe />,
+      schema: createSchema(),
+    });
+
+    const canvas = screen.getByRole("application", { name: "Canvas viewport" });
+    const file = new File(["image"], "material.png", { type: "image/png" });
+
+    fireEvent.drop(canvas, {
+      clientX: 0,
+      clientY: 0,
+      dataTransfer: {
+        files: [file],
+      },
+    });
+
+    await waitFor(() => {
+      expect(screen.getByTestId("media-count").textContent).toBe("1");
+    });
+
+    expect(screen.getByTestId("media-size").textContent).toBe("300,200");
+    expect(screen.getByRole("button", { name: "Select material.png" })).toBeTruthy();
+  });
+
+  it("routes canvas drops to image and file upload targets by asset kind", async () => {
+    const schema = defineToolcraft({
+      canvas: {
+        enabled: true,
+        size: { width: 300, height: 200, unit: "px" },
+        upload: true,
+      },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                files: {
+                  assetKind: "file",
+                  label: "Files",
+                  multiple: true,
+                  target: "source.files",
+                  type: "fileDrop",
+                },
+                image: {
+                  label: "Image",
+                  target: "source.image",
+                  type: "fileDrop",
+                },
+              },
+              title: "Sources",
+            },
+          ],
+          title: "Controls",
+        },
+      },
+    });
+
+    renderCanvasShell({
+      afterCanvas: <CanvasStateProbe />,
+      schema,
+    });
+
+    const canvas = screen.getByRole("application", { name: "Canvas viewport" });
+    const imageFile = new File(["image"], "material.png", { type: "image/png" });
+    const textFile = new File(["notes"], "notes.txt", { type: "text/plain" });
+
+    fireEvent.drop(canvas, {
+      clientX: 0,
+      clientY: 0,
+      dataTransfer: {
+        files: [imageFile, textFile],
+      },
+    });
+
+    await waitFor(() => {
+      expect(screen.getByTestId("media-count").textContent).toBe("2");
+    });
+
+    expect(screen.getByTestId("media-targets").textContent?.split(",").sort()).toEqual([
+      "source.files",
+      "source.image",
+    ]);
+    expect(screen.getByTestId("media-kinds").textContent?.split(",").sort()).toEqual([
+      "file",
+      "image",
+    ]);
+    expect(screen.getByRole("button", { name: "Select material.png" })).toBeTruthy();
+    expect(screen.queryByRole("button", { name: "Select notes.txt" })).toBeNull();
+  });
+});

package/templates/runtime/react/canvas/canvas-shell.tsx

@@ -0,0 +1,146 @@
+"use client";
+
+import * as React from "react";
+
+import {
+  CanvasDefaultMediaLayer,
+  getVisibleCanvasImageAssets,
+} from "./canvas-default-media-layer";
+import { useCanvasDropImport } from "./use-canvas-drop-import";
+import { useCanvasViewportInteractions } from "./use-canvas-viewport-interactions";
+import { useToolcraft } from "../app-shell/use-toolcraft";
+
+export type CanvasShellProps = {
+  children?: React.ReactNode;
+  renderDefaultMedia?: boolean;
+};
+
+function isDragLeavingCurrentTarget(
+  event: React.DragEvent<HTMLElement>,
+): boolean {
+  const nextTarget = event.relatedTarget;
+
+  return !(
+    nextTarget instanceof Node && event.currentTarget.contains(nextTarget)
+  );
+}
+
+export function CanvasShell({
+  children,
+  renderDefaultMedia = true,
+}: CanvasShellProps): React.JSX.Element {
+  const { dispatch, state } = useToolcraft();
+  const [dragOver, setDragOver] = React.useState(false);
+  const uploadEnabled = state.schema.canvas.upload;
+  const { offset, size, zoom } = state.canvas;
+  const scale = zoom / 100;
+  const {
+    handlePointerDown,
+    handlePointerMove,
+    handlePointerUp,
+    viewportRef,
+  } = useCanvasViewportInteractions({
+    dispatch,
+    draggable: state.schema.canvas.draggable,
+    offset,
+    zoom,
+  });
+  const handleDrop = useCanvasDropImport({
+    dispatch,
+    offset,
+    setDragOver,
+    size,
+    state,
+    uploadEnabled,
+    zoom,
+  });
+  const visibleMediaAssets = React.useMemo(
+    () => getVisibleCanvasImageAssets(state),
+    [state.layers, state.mediaAssets],
+  );
+  const hasCanvasContent = visibleMediaAssets.length > 0;
+  const hasCanvasSlot = React.Children.count(children) > 0;
+  const renderEditableCanvas =
+    state.schema.canvas.sizing.mode !== "intrinsic-media" ||
+    state.schema.canvas.sizeSource === "app" ||
+    hasCanvasContent ||
+    hasCanvasSlot;
+
+  const beginDragOver = (event: React.DragEvent<HTMLDivElement>): void => {
+    if (!uploadEnabled) {
+      return;
+    }
+
+    event.preventDefault();
+    setDragOver(true);
+  };
+
+  return (
+    <div
+      aria-label="Canvas viewport"
+      className="group/canvas absolute inset-0 cursor-grab touch-none overflow-hidden bg-[color:var(--background)] active:cursor-grabbing"
+      data-drag-over={dragOver}
+      data-slot="toolcraft-runtime-canvas"
+      onDragEnter={beginDragOver}
+      onDragLeave={(event) => {
+        if (isDragLeavingCurrentTarget(event)) {
+          setDragOver(false);
+        }
+      }}
+      onDragOver={beginDragOver}
+      onDrop={handleDrop}
+      onPointerCancel={handlePointerUp}
+      onPointerDown={handlePointerDown}
+      onPointerMove={handlePointerMove}
+      onPointerUp={handlePointerUp}
+      ref={viewportRef}
+      role="application"
+    >
+      <div
+        className="absolute top-1/2 left-1/2"
+        data-toolcraft-canvas-world=""
+        style={{
+          transform: `translate(-50%, -50%) translate(${offset.x}px, ${offset.y}px) scale(${scale})`,
+          transformOrigin: "center",
+        }}
+      >
+        {renderEditableCanvas ? (
+          <div
+            className="relative z-10 overflow-hidden"
+            data-toolcraft-canvas-content=""
+            data-toolcraft-editable-canvas=""
+            style={{
+              height: size.height,
+              width: size.width,
+            }}
+          >
+            {renderDefaultMedia
+              ? visibleMediaAssets.map((mediaAsset) => (
+                  <CanvasDefaultMediaLayer
+                    canvasSize={size}
+                    dispatch={dispatch}
+                    key={mediaAsset.id}
+                    mediaAsset={mediaAsset}
+                    selected={state.selectedLayerId === mediaAsset.layerId}
+                  />
+                ))
+              : null}
+            {children ? (
+              <div
+                className="absolute inset-0 z-20"
+                data-toolcraft-canvas-slot=""
+              >
+                {children}
+              </div>
+            ) : null}
+          </div>
+        ) : null}
+      </div>
+      <div
+        aria-hidden="true"
+        className="pointer-events-none absolute inset-0 z-10 bg-[color:color-mix(in_oklab,var(--link)_8%,transparent)] opacity-0 transition-opacity duration-150 ease-out group-data-[drag-over=true]/canvas:opacity-100"
+        data-canvas-drag-highlight=""
+      />
+    </div>
+  );
+}

package/templates/runtime/react/canvas/canvas-upload-routing.ts

@@ -0,0 +1,84 @@
+import type { ToolcraftControlSchema } from "../../schema/types";
+import type { ToolcraftState } from "../../state/types";
+import {
+  isToolcraftControlVisible,
+  isToolcraftSectionVisible,
+} from "../controls-panel/conditions/control-conditions";
+import { isToolcraftImageFile } from "./media-file";
+
+function getFileExtension(file: File): string {
+  const match = /\.([a-z0-9]+)$/iu.exec(file.name);
+
+  return match?.[1]?.toLowerCase() ?? "";
+}
+
+function controlAcceptsFile(control: ToolcraftControlSchema, file: File): boolean {
+  const accept = control.accept?.trim();
+
+  if (!accept) {
+    return control.assetKind === "file" || isToolcraftImageFile(file);
+  }
+
+  const fileExtension = getFileExtension(file);
+  const mimeType = file.type.toLowerCase();
+
+  return accept.split(",").some((rawToken) => {
+    const token = rawToken.trim().toLowerCase();
+
+    if (!token) {
+      return false;
+    }
+
+    if (token.startsWith(".")) {
+      return token.slice(1) === fileExtension;
+    }
+
+    if (token.endsWith("/*")) {
+      const prefix = token.slice(0, -1);
+
+      return mimeType.startsWith(prefix);
+    }
+
+    if (token.includes("/")) {
+      return mimeType === token;
+    }
+
+    return token === fileExtension;
+  });
+}
+
+export function getVisibleFileDropControls(state: ToolcraftState): ToolcraftControlSchema[] {
+  return (state.schema.panels.controls?.sections ?? []).flatMap((section) => {
+    if (!isToolcraftSectionVisible(state, section)) {
+      return [];
+    }
+
+    return Object.values(section.controls).filter(
+      (control) =>
+        control.type === "fileDrop" && isToolcraftControlVisible(state, control),
+    );
+  });
+}
+
+export function getCanvasDropTarget(
+  state: ToolcraftState,
+  file: File,
+): ToolcraftControlSchema | null {
+  const isImage = isToolcraftImageFile(file);
+  const controls = getVisibleFileDropControls(state).filter((control) =>
+    controlAcceptsFile(control, file),
+  );
+  const preferredAssetKind = isImage ? "image" : "file";
+  const exactMatch = controls.find(
+    (control) =>
+      (control.assetKind === "file" ? "file" : "image") === preferredAssetKind,
+  );
+
+  if (exactMatch) {
+    return exactMatch;
+  }
+
+  return isImage
+    ? (controls.find((control) => control.assetKind === "file") ?? null)
+    : null;
+}

package/templates/runtime/react/{media-file.ts → canvas/media-file.ts}

@@ -1,4 +1,4 @@
-import type { ToolcraftCanvasSize } from "../schema/types";
+import type { ToolcraftCanvasSize } from "../../schema/types";
 
 export type ToolcraftImportedImageFile = {
   dataUrl: string;

package/templates/runtime/react/canvas/use-canvas-drop-import.ts

@@ -0,0 +1,145 @@
+"use client";
+
+import * as React from "react";
+
+import type {
+  ToolcraftCommand,
+  ToolcraftPoint,
+  ToolcraftState,
+} from "../../state/types";
+import {
+  isToolcraftImageFile,
+  readImportedFile,
+  readImportedImageFile,
+} from "./media-file";
+import {
+  getCanvasDropTarget,
+  getVisibleFileDropControls,
+} from "./canvas-upload-routing";
+
+function getCanvasPositionFromEvent(
+  event: React.DragEvent<HTMLElement>,
+  offset: ToolcraftPoint,
+  zoom: number,
+): ToolcraftPoint {
+  const rect = event.currentTarget.getBoundingClientRect();
+  const scale = zoom / 100;
+
+  return {
+    x: (event.clientX - rect.left - rect.width / 2 - offset.x) / scale,
+    y: (event.clientY - rect.top - rect.height / 2 - offset.y) / scale,
+  };
+}
+
+export function useCanvasDropImport({
+  dispatch,
+  offset,
+  setDragOver,
+  size,
+  state,
+  uploadEnabled,
+  zoom,
+}: {
+  dispatch: React.Dispatch<ToolcraftCommand>;
+  offset: ToolcraftPoint;
+  setDragOver: React.Dispatch<React.SetStateAction<boolean>>;
+  size: ToolcraftState["canvas"]["size"];
+  state: ToolcraftState;
+  uploadEnabled: boolean;
+  zoom: number;
+}): React.DragEventHandler<HTMLDivElement> {
+  return React.useCallback(
+    (event) => {
+      if (!uploadEnabled) {
+        return;
+      }
+
+      event.preventDefault();
+      setDragOver(false);
+
+      const uploadedFiles = Array.from(event.dataTransfer?.files ?? []);
+
+      if (uploadedFiles.length === 0) {
+        return;
+      }
+
+      const position = getCanvasPositionFromEvent(event, offset, zoom);
+      const hasFileDropControls = getVisibleFileDropControls(state).length > 0;
+
+      uploadedFiles.forEach((uploadedFile) => {
+        const targetControl = getCanvasDropTarget(state, uploadedFile);
+
+        if (!targetControl) {
+          if (hasFileDropControls || !isToolcraftImageFile(uploadedFile)) {
+            return;
+          }
+
+          void readImportedImageFile(uploadedFile, size).then((importedImage) => {
+            if (!importedImage) {
+              return;
+            }
+
+            dispatch({
+              asset: {
+                assetKind: "image",
+                dataUrl: importedImage.dataUrl,
+                fileName: uploadedFile.name,
+                mimeType: uploadedFile.type || "image/*",
+                position,
+                size: importedImage.size,
+              },
+              type: "media.import",
+            });
+          });
+          return;
+        }
+
+        const assetKind = targetControl.assetKind === "file" ? "file" : "image";
+        const replaceExisting = targetControl.multiple !== true;
+
+        if (assetKind === "file") {
+          void readImportedFile(uploadedFile).then((importedFile) => {
+            if (!importedFile) {
+              return;
+            }
+
+            dispatch({
+              asset: {
+                assetKind: "file",
+                dataUrl: importedFile.dataUrl,
+                fileName: uploadedFile.name,
+                mimeType: uploadedFile.type || "application/octet-stream",
+                position: { x: 0, y: 0 },
+                sourceTarget: targetControl.target,
+              },
+              replaceExisting,
+              type: "media.import",
+            });
+          });
+          return;
+        }
+
+        void readImportedImageFile(uploadedFile, size).then((importedImage) => {
+          if (!importedImage) {
+            return;
+          }
+
+          dispatch({
+            asset: {
+              assetKind: "image",
+              dataUrl: importedImage.dataUrl,
+              fileName: uploadedFile.name,
+              mimeType: uploadedFile.type || "image/*",
+              position,
+              size: importedImage.size,
+              sourceTarget: targetControl.target,
+            },
+            replaceExisting,
+            type: "media.import",
+          });
+        });
+      });
+    },
+    [dispatch, offset, setDragOver, size, state, uploadEnabled, zoom],
+  );
+}