@pixel-point/toolcraft 0.0.7 → 0.0.8

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

@@ -3,9 +3,22 @@
 import * as React from "react";
 
 import { clampToolcraftCanvasZoom } from "../state/canvas-zoom";
-import type { ToolcraftPoint } from "../state/types";
+import type {
+  ToolcraftMediaAsset,
+  ToolcraftPoint,
+  ToolcraftState,
+} from "../state/types";
+import type { ToolcraftControlSchema } from "../schema/types";
+import {
+  isToolcraftControlVisible,
+  isToolcraftSectionVisible,
+} from "./control-conditions";
 import { isToolcraftLayerVisibleInTree } from "./layer-tree";
-import { readImportedImageFile } from "./media-file";
+import {
+  isToolcraftImageFile,
+  readImportedFile,
+  readImportedImageFile,
+} from "./media-file";
 import { useToolcraft } from "./use-toolcraft";
 
 export type CanvasShellProps = {
@@ -20,6 +33,9 @@ type CanvasDragState = {
   startX: number;
   startY: number;
 };
+type ToolcraftCanvasImageAsset = ToolcraftMediaAsset & {
+  size: NonNullable<ToolcraftMediaAsset["size"]>;
+};
 
 const wheelZoomSensitivity = 0.12;
 const wheelPinchZoomSensitivity = 0.5;
@@ -28,13 +44,6 @@ function cn(...classNames: Array<string | false | null | undefined>): string {
   return classNames.filter(Boolean).join(" ");
 }
 
-function isImageFile(file: File): boolean {
-  return (
-    file.type.startsWith("image/") ||
-    /\.(avif|gif|jpe?g|png|svg|webp)$/i.test(file.name)
-  );
-}
-
 function isDragLeavingCurrentTarget(
   event: React.DragEvent<HTMLElement>,
 ): boolean {
@@ -79,6 +88,94 @@ function getNextWheelZoom(
   return clampToolcraftCanvasZoom(currentZoom + zoomDelta);
 }
 
+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;
+  });
+}
+
+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),
+    );
+  });
+}
+
+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;
+}
+
+function isDefaultCanvasImageAsset(
+  state: ToolcraftState,
+  mediaAsset: ToolcraftMediaAsset,
+): mediaAsset is ToolcraftCanvasImageAsset {
+  return (
+    (mediaAsset.assetKind ?? "image") === "image" &&
+    mediaAsset.size !== undefined &&
+    isToolcraftLayerVisibleInTree(state.layers, mediaAsset.layerId)
+  );
+}
+
 function getZoomedCanvasOffset({
   clientX,
   clientY,
@@ -122,7 +219,7 @@ export function CanvasShell({
   const visibleMediaAssets = React.useMemo(
     () =>
       state.mediaAssets.filter((mediaAsset) =>
-        isToolcraftLayerVisibleInTree(state.layers, mediaAsset.layerId),
+        isDefaultCanvasImageAsset(state, mediaAsset),
       ),
     [state.layers, state.mediaAssets],
   );
@@ -279,28 +376,86 @@ export function CanvasShell({
     event.preventDefault();
     setDragOver(false);
 
-    const uploadedFile = Array.from(event.dataTransfer?.files ?? [])[0];
+    const uploadedFiles = Array.from(event.dataTransfer?.files ?? []);
 
-    if (!uploadedFile || !isImageFile(uploadedFile)) {
+    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);
 
-    void readImportedImageFile(uploadedFile, size).then((importedImage) => {
-      if (!importedImage) {
+      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;
       }
 
-      dispatch({
-        asset: {
-          dataUrl: importedImage.dataUrl,
-          fileName: uploadedFile.name,
-          mimeType: uploadedFile.type || "image/*",
-          position,
-          size: importedImage.size,
-        },
-        type: "media.import",
+      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",
+        });
       });
     });
   };

package/templates/runtime/react/control-conditions.ts

@@ -0,0 +1,166 @@
+import {
+  getToolcraftCanvasSizeTargetDimension,
+} from "../schema/runtime-targets";
+import type {
+  ToolcraftControlConditionSchema,
+  ToolcraftControlSchema,
+  ToolcraftControlSectionSchema,
+} from "../schema/types";
+import type { ToolcraftState } from "../state/types";
+
+function valuesEqual(first: unknown, second: unknown): boolean {
+  if (Object.is(first, second)) {
+    return true;
+  }
+
+  if (
+    (typeof first !== "object" || first === null) &&
+    (typeof second !== "object" || second === null)
+  ) {
+    return false;
+  }
+
+  try {
+    return JSON.stringify(first) === JSON.stringify(second);
+  } catch {
+    return false;
+  }
+}
+
+function valuesInclude(value: unknown, options: readonly unknown[]): boolean {
+  return options.some((option) => valuesEqual(value, option));
+}
+
+function readComparableNumber(value: unknown): number | null {
+  if (typeof value === "number" && Number.isFinite(value)) {
+    return value;
+  }
+
+  if (typeof value === "string") {
+    const numberValue = Number(value.trim());
+
+    return Number.isFinite(numberValue) ? numberValue : null;
+  }
+
+  return null;
+}
+
+function compareConditionNumbers(
+  value: unknown,
+  expected: number | undefined,
+  comparator: (value: number, expected: number) => boolean,
+): boolean | null {
+  if (typeof expected !== "number" || !Number.isFinite(expected)) {
+    return null;
+  }
+
+  const numberValue = readComparableNumber(value);
+
+  return numberValue === null ? false : comparator(numberValue, expected);
+}
+
+function getControlDefaultValueByTarget(
+  sections: readonly ToolcraftControlSectionSchema[],
+  target: string,
+): unknown {
+  for (const section of sections) {
+    for (const control of Object.values(section.controls)) {
+      if (control.target === target) {
+        return control.defaultValue;
+      }
+    }
+  }
+
+  return undefined;
+}
+
+export function getToolcraftTargetValue(
+  state: ToolcraftState,
+  target: string,
+): unknown {
+  const canvasSizeDimension = getToolcraftCanvasSizeTargetDimension(target);
+
+  return canvasSizeDimension
+    ? state.canvas.size[canvasSizeDimension]
+    : (state.values[target] ??
+        getControlDefaultValueByTarget(
+          state.schema.panels.controls?.sections ?? [],
+          target,
+        ));
+}
+
+export function toolcraftConditionMatches(
+  state: ToolcraftState,
+  condition: ToolcraftControlConditionSchema,
+): boolean {
+  const value = getToolcraftTargetValue(state, condition.target);
+  const matches: boolean[] = [];
+
+  if ("equals" in condition) {
+    matches.push(valuesEqual(value, condition.equals));
+  }
+
+  if ("notEquals" in condition) {
+    matches.push(!valuesEqual(value, condition.notEquals));
+  }
+
+  if (Array.isArray(condition.oneOf)) {
+    matches.push(valuesInclude(value, condition.oneOf));
+  }
+
+  if (Array.isArray(condition.notOneOf)) {
+    matches.push(!valuesInclude(value, condition.notOneOf));
+  }
+
+  const greaterThan = compareConditionNumbers(
+    value,
+    condition.greaterThan,
+    (numberValue, expected) => numberValue > expected,
+  );
+  const greaterThanOrEqual = compareConditionNumbers(
+    value,
+    condition.greaterThanOrEqual,
+    (numberValue, expected) => numberValue >= expected,
+  );
+  const lessThan = compareConditionNumbers(
+    value,
+    condition.lessThan,
+    (numberValue, expected) => numberValue < expected,
+  );
+  const lessThanOrEqual = compareConditionNumbers(
+    value,
+    condition.lessThanOrEqual,
+    (numberValue, expected) => numberValue <= expected,
+  );
+
+  for (const match of [
+    greaterThan,
+    greaterThanOrEqual,
+    lessThan,
+    lessThanOrEqual,
+  ]) {
+    if (match !== null) {
+      matches.push(match);
+    }
+  }
+
+  return matches.length > 0 && matches.every(Boolean);
+}
+
+export function isToolcraftSectionVisible(
+  state: ToolcraftState,
+  section: ToolcraftControlSectionSchema,
+): boolean {
+  return section.visibleWhen
+    ? toolcraftConditionMatches(state, section.visibleWhen)
+    : true;
+}
+
+export function isToolcraftControlVisible(
+  state: ToolcraftState,
+  control: ToolcraftControlSchema,
+): boolean {
+  return control.visibleWhen
+    ? toolcraftConditionMatches(state, control.visibleWhen)
+    : true;
+}

package/templates/runtime/react/controls-panel-filedrop-reorder.test.tsx

@@ -0,0 +1,176 @@
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import * as React from "react";
+import { afterEach, beforeAll, describe, expect, it, vi } from "vitest";
+
+import { defineToolcraft } from "../schema/define-toolcraft";
+import type { FileDropPreview } from "@repo/ui";
+import { ControlsPanel } from "./controls-panel";
+import { ToolcraftRoot } from "./toolcraft-root";
+import { useToolcraft } from "./use-toolcraft";
+
+vi.mock("@repo/ui", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("@repo/ui")>();
+
+  return {
+    ...actual,
+    FileDrop: ({
+      assetKind = "image",
+      onPreviewReorder,
+      previews = [],
+    }: {
+      assetKind?: "file" | "image";
+      onPreviewReorder?: (previews: FileDropPreview[]) => void;
+      previews?: readonly FileDropPreview[];
+    }) => (
+      <button
+        onClick={() => {
+          onPreviewReorder?.([...previews].reverse());
+        }}
+        type="button"
+      >
+        Reorder {assetKind}
+      </button>
+    ),
+  };
+});
+
+beforeAll(() => {
+  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,
+  });
+});
+
+afterEach(() => {
+  cleanup();
+});
+
+function StateProbe() {
+  const { state } = useToolcraft();
+
+  return (
+    <span data-testid="media-ids">
+      {state.mediaAssets.map((asset) => asset.id).join(",")}
+    </span>
+  );
+}
+
+describe("ControlsPanel fileDrop reorder integration", () => {
+  it("commits image and file preview sorting back to runtime media order separately", async () => {
+    const schema = defineToolcraft({
+      canvas: { enabled: true, upload: true },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                images: {
+                  label: "Images",
+                  multiple: true,
+                  target: "input.images",
+                  type: "fileDrop",
+                },
+                files: {
+                  assetKind: "file",
+                  label: "Files",
+                  multiple: true,
+                  target: "input.files",
+                  type: "fileDrop",
+                },
+              },
+              title: "Sources",
+            },
+          ],
+          title: "Controls",
+        },
+      },
+    });
+
+    render(
+      <ToolcraftRoot
+        initialState={{
+          layers: [
+            { id: "layer-img-1", kind: "layer", name: "Image 1", visible: true },
+            { id: "layer-file-1", kind: "layer", name: "File 1", visible: true },
+            { id: "layer-img-2", kind: "layer", name: "Image 2", visible: true },
+            { id: "layer-file-2", kind: "layer", name: "File 2", visible: true },
+          ],
+          mediaAssets: [
+            {
+              assetKind: "image",
+              dataUrl: "data:image/png;base64,aW1nMQ==",
+              fileName: "one.png",
+              id: "img-1",
+              layerId: "layer-img-1",
+              mimeType: "image/png",
+              position: { x: 0, y: 0 },
+              size: { height: 64, unit: "px", width: 64 },
+              sourceTarget: "input.images",
+            },
+            {
+              assetKind: "file",
+              dataUrl: "data:text/plain;base64,ZmlsZTE=",
+              fileName: "one.txt",
+              id: "file-1",
+              layerId: "layer-file-1",
+              mimeType: "text/plain",
+              position: { x: 0, y: 0 },
+              sourceTarget: "input.files",
+            },
+            {
+              assetKind: "image",
+              dataUrl: "data:image/png;base64,aW1nMg==",
+              fileName: "two.png",
+              id: "img-2",
+              layerId: "layer-img-2",
+              mimeType: "image/png",
+              position: { x: 0, y: 0 },
+              size: { height: 64, unit: "px", width: 64 },
+              sourceTarget: "input.images",
+            },
+            {
+              assetKind: "file",
+              dataUrl: "data:application/json;base64,e30=",
+              fileName: "two.json",
+              id: "file-2",
+              layerId: "layer-file-2",
+              mimeType: "application/json",
+              position: { x: 0, y: 0 },
+              sourceTarget: "input.files",
+            },
+          ],
+          selectedLayerId: "layer-file-2",
+        }}
+        schema={schema}
+      >
+        <ControlsPanel framed={false} />
+        <StateProbe />
+      </ToolcraftRoot>,
+    );
+
+    expect(screen.getByTestId("media-ids").textContent).toBe(
+      "img-1,file-1,img-2,file-2",
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: "Reorder image" }));
+
+    expect(screen.getByTestId("media-ids").textContent).toBe(
+      "img-2,file-1,img-1,file-2",
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: "Reorder file" }));
+
+    expect(screen.getByTestId("media-ids").textContent).toBe(
+      "img-2,file-2,img-1,file-1",
+    );
+  });
+});