@pixel-point/toolcraft 0.0.2

package/templates/runtime/react/media-file.ts

@@ -0,0 +1,82 @@
+import type { ToolcraftCanvasSize } from "../schema/types";
+
+export type ToolcraftImportedImageFile = {
+  dataUrl: string;
+  size: ToolcraftCanvasSize;
+};
+
+function readFileDataUrl(file: File): Promise<string | null> {
+  return new Promise((resolve) => {
+    const reader = new FileReader();
+
+    reader.addEventListener("load", () => {
+      resolve(typeof reader.result === "string" ? reader.result : null);
+    });
+    reader.addEventListener("error", () => resolve(null));
+    reader.readAsDataURL(file);
+  });
+}
+
+function readImageDataUrlSize(dataUrl: string): Promise<ToolcraftCanvasSize | null> {
+  if (typeof Image === "undefined") {
+    return Promise.resolve(null);
+  }
+
+  return new Promise((resolve) => {
+    const image = new Image();
+    let resolved = false;
+    let fallbackTimeout: number | undefined;
+    const jsdomFallback =
+      typeof navigator !== "undefined" &&
+      navigator.userAgent.toLowerCase().includes("jsdom");
+    const finish = (size: ToolcraftCanvasSize | null): void => {
+      if (resolved) {
+        return;
+      }
+
+      resolved = true;
+      if (fallbackTimeout !== undefined) {
+        window.clearTimeout(fallbackTimeout);
+      }
+      resolve(size);
+    };
+
+    fallbackTimeout = window.setTimeout(
+      () => finish(null),
+      jsdomFallback ? 0 : 5000,
+    );
+
+    image.addEventListener("load", () => {
+      const width = Math.round(image.naturalWidth || image.width);
+      const height = Math.round(image.naturalHeight || image.height);
+
+      finish(
+        width > 0 && height > 0
+          ? {
+              height,
+              unit: "px",
+              width,
+            }
+          : null,
+      );
+    });
+    image.addEventListener("error", () => finish(null));
+    image.src = dataUrl;
+  });
+}
+
+export async function readImportedImageFile(
+  file: File,
+  fallbackSize: ToolcraftCanvasSize,
+): Promise<ToolcraftImportedImageFile | null> {
+  const dataUrl = await readFileDataUrl(file);
+
+  if (!dataUrl) {
+    return null;
+  }
+
+  return {
+    dataUrl,
+    size: (await readImageDataUrlSize(dataUrl)) ?? fallbackSize,
+  };
+}

package/templates/runtime/react/panel-host-config.ts

@@ -0,0 +1,80 @@
+import type { ToolcraftPanelType, PanelDragMode, PanelSnapEdge } from "./panel-host-types";
+
+type PanelTypeConfig = {
+  dragMode: PanelDragMode;
+  panelId: ToolcraftPanelType;
+  snapEdges: readonly PanelSnapEdge[];
+  stageClassName: string;
+  wrapperClassName: string;
+};
+
+export const panelHostConfig = {
+  controls: {
+    dragMode: "handle",
+    panelId: "controls",
+    snapEdges: ["left", "right"],
+    stageClassName: "min-h-[560px]",
+    wrapperClassName: "absolute top-2.5 right-2.5 z-30",
+  },
+  layers: {
+    dragMode: "handle",
+    panelId: "layers",
+    snapEdges: ["left", "right"],
+    stageClassName: "min-h-[560px]",
+    wrapperClassName: "absolute top-2.5 left-2.5 z-30",
+  },
+  timeline: {
+    dragMode: "panel",
+    panelId: "timeline",
+    snapEdges: ["top", "bottom"],
+    stageClassName: "min-h-[320px]",
+    wrapperClassName: "absolute top-2.5 left-1/2 z-40 -translate-x-1/2",
+  },
+  toolbar: {
+    dragMode: "panel",
+    panelId: "toolbar",
+    snapEdges: ["top", "bottom"],
+    stageClassName: "min-h-[180px]",
+    wrapperClassName: "absolute bottom-2.5 left-1/2 z-[70] -translate-x-1/2",
+  },
+} satisfies Record<ToolcraftPanelType, PanelTypeConfig>;
+
+export const panelSnapMarginPx = 10;
+export const panelSnapZonePx = 40;
+export const panelVelocityMultiplierMs = 150;
+export const panelDragHandleSelector = "[data-panel-drag-handle]";
+
+export const panelDragTransition = {
+  bounceDamping: 90,
+  bounceStiffness: 1200,
+  power: 0,
+} as const;
+
+export const panelSnapAnimation = {
+  duration: 0.3,
+  ease: [0.22, 1, 0.36, 1],
+} as const;
+
+export const panelDragIgnoredTargetSelector = [
+  ".app-no-drag",
+  "a[href]",
+  "button",
+  "input",
+  "label",
+  "select",
+  "textarea",
+  "[contenteditable='true']",
+  "[data-panel-drag-ignore]",
+  "[data-slot='input-group']",
+  "[data-slot='select-trigger']",
+  "[data-slot='slider']",
+  "[role='button']",
+  "[role='checkbox']",
+  "[role='combobox']",
+  "[role='menuitem']",
+  "[role='option']",
+  "[role='radio']",
+  "[role='slider']",
+  "[role='switch']",
+  "[role='textbox']",
+].join(",");

package/templates/runtime/react/panel-host-geometry.test.ts

@@ -0,0 +1,66 @@
+import { describe, expect, it } from "vitest";
+
+import { resolvePanelSnapPosition } from "./panel-host-geometry";
+import type { PanelViewport } from "./panel-host-types";
+
+const viewport = {
+  height: 500,
+  offsetLeft: 0,
+  offsetTop: 0,
+  width: 800,
+} satisfies PanelViewport;
+
+const dimensions = {
+  height: 100,
+  width: 200,
+};
+
+describe("resolvePanelSnapPosition", () => {
+  it("snaps a side panel to the left edge", () => {
+    expect(
+      resolvePanelSnapPosition({
+        dimensions,
+        edges: ["left", "right"],
+        position: { x: 12, y: 80 },
+        velocity: { x: 0, y: 0 },
+        viewport,
+      }),
+    ).toEqual({ x: 10, y: 80 });
+  });
+
+  it("snaps a top or bottom panel to the bottom edge", () => {
+    expect(
+      resolvePanelSnapPosition({
+        dimensions,
+        edges: ["top", "bottom"],
+        position: { x: 160, y: 360 },
+        velocity: { x: 0, y: 0 },
+        viewport,
+      }),
+    ).toEqual({ x: 160, y: 390 });
+  });
+
+  it("returns null when the panel is outside the snap zone", () => {
+    expect(
+      resolvePanelSnapPosition({
+        dimensions,
+        edges: ["left"],
+        position: { x: 120, y: 80 },
+        velocity: { x: 0, y: 0 },
+        viewport,
+      }),
+    ).toBeNull();
+  });
+
+  it("clamps snapped panel positions inside the viewport", () => {
+    expect(
+      resolvePanelSnapPosition({
+        dimensions,
+        edges: ["top"],
+        position: { x: -100, y: 4 },
+        velocity: { x: 0, y: 0 },
+        viewport,
+      }),
+    ).toEqual({ x: 10, y: 10 });
+  });
+});

package/templates/runtime/react/panel-host-geometry.ts

@@ -0,0 +1,109 @@
+import {
+  panelSnapMarginPx,
+  panelSnapZonePx,
+  panelVelocityMultiplierMs,
+} from "./panel-host-config";
+import type {
+  PanelDimensions,
+  PanelPoint,
+  PanelSnapEdge,
+  PanelViewport,
+} from "./panel-host-types";
+
+export function clampPanelValue(value: number, min: number, max: number): number {
+  const safeMax = Math.max(min, max);
+
+  return Math.max(min, Math.min(value, safeMax));
+}
+
+function getProjectedPanelPosition(position: PanelPoint, velocity: PanelPoint): PanelPoint {
+  return {
+    x: position.x + velocity.x * panelVelocityMultiplierMs,
+    y: position.y + velocity.y * panelVelocityMultiplierMs,
+  };
+}
+
+function getPanelEdgeDistance(
+  edge: PanelSnapEdge,
+  position: PanelPoint,
+  dimensions: PanelDimensions,
+  viewport: PanelViewport,
+): number {
+  if (edge === "top") {
+    return position.y - viewport.offsetTop;
+  }
+
+  if (edge === "right") {
+    return viewport.offsetLeft + viewport.width - (position.x + dimensions.width);
+  }
+
+  if (edge === "bottom") {
+    return viewport.offsetTop + viewport.height - (position.y + dimensions.height);
+  }
+
+  return position.x - viewport.offsetLeft;
+}
+
+function getPanelSnapEdge(
+  projectedPosition: PanelPoint,
+  dimensions: PanelDimensions,
+  viewport: PanelViewport,
+  edges: readonly PanelSnapEdge[],
+  zone: number,
+): PanelSnapEdge | null {
+  const candidates = edges
+    .map((edge) => ({
+      edge,
+      value: getPanelEdgeDistance(edge, projectedPosition, dimensions, viewport),
+    }))
+    .filter((candidate) => candidate.value <= zone);
+
+  if (candidates.length === 0) {
+    return null;
+  }
+
+  return candidates.reduce((closest, candidate) =>
+    candidate.value < closest.value ? candidate : closest,
+  ).edge;
+}
+
+export function resolvePanelSnapPosition({
+  dimensions,
+  edges,
+  margin = panelSnapMarginPx,
+  position,
+  velocity,
+  viewport,
+  zone = panelSnapZonePx,
+}: {
+  dimensions: PanelDimensions;
+  edges: readonly PanelSnapEdge[];
+  margin?: number;
+  position: PanelPoint;
+  velocity: PanelPoint;
+  viewport: PanelViewport;
+  zone?: number;
+}): PanelPoint | null {
+  const projectedPosition = getProjectedPanelPosition(position, velocity);
+  const edge = getPanelSnapEdge(projectedPosition, dimensions, viewport, edges, zone);
+  const minX = viewport.offsetLeft + margin;
+  const maxX = viewport.offsetLeft + viewport.width - dimensions.width - margin;
+  const minY = viewport.offsetTop + margin;
+  const maxY = viewport.offsetTop + viewport.height - dimensions.height - margin;
+
+  if (!edge) {
+    return null;
+  }
+
+  if (edge === "top" || edge === "bottom") {
+    return {
+      x: clampPanelValue(projectedPosition.x, minX, maxX),
+      y: edge === "top" ? minY : maxY,
+    };
+  }
+
+  return {
+    x: edge === "left" ? minX : maxX,
+    y: clampPanelValue(projectedPosition.y, minY, maxY),
+  };
+}

package/templates/runtime/react/panel-host-types.ts

@@ -0,0 +1,74 @@
+import type * as React from "react";
+
+import type { ToolcraftPanelId, ToolcraftPanelState } from "../state/types";
+
+export type { ToolcraftPanelState } from "../state/types";
+
+export type ToolcraftPanelType = ToolcraftPanelId;
+
+export type PanelSnapEdge = "bottom" | "left" | "right" | "top";
+
+export type PanelDragMode = "handle" | "panel";
+
+export type PanelPoint = {
+  x: number;
+  y: number;
+};
+
+export type PanelDimensions = {
+  height: number;
+  width: number;
+};
+
+export type PanelViewport = PanelDimensions & {
+  offsetLeft: number;
+  offsetTop: number;
+};
+
+export type PanelSnapConfig = {
+  edges: readonly PanelSnapEdge[];
+  margin?: number;
+  zone?: number;
+};
+
+export type PanelPlacement = "floating" | "frame" | "surface";
+
+export type PanelStateChange = (state: Partial<ToolcraftPanelState>) => void;
+
+export type PanelHostProps = {
+  children: React.ReactNode;
+  className?: string;
+  dragMode?: PanelDragMode;
+  innerClassName?: string;
+  onPositionChange?: (position: PanelPoint) => void;
+  onResetPosition?: () => void;
+  panelId?: string;
+  panelType: ToolcraftPanelType;
+  position?: PanelPoint;
+  snap?: PanelSnapConfig;
+  style?: React.CSSProperties;
+};
+
+export type PanelStageProps = React.HTMLAttributes<HTMLDivElement> & {
+  children: React.ReactNode;
+};
+
+export type PanelContainerProps = {
+  children: React.ReactNode;
+  className?: string;
+  dragMode?: PanelDragMode;
+  onPanelStateChange?: PanelStateChange;
+  panelClassName?: string;
+  panelState?: ToolcraftPanelState;
+  panelType: ToolcraftPanelType;
+  placement: PanelPlacement;
+} & Omit<React.HTMLAttributes<HTMLDivElement>, "children" | "className">;
+
+export type ToolcraftPanelHostProps = Omit<
+  PanelHostProps,
+  "onPositionChange" | "onResetPosition" | "position"
+> & {
+  onPositionChange?: (position: PanelPoint) => void;
+  onResetPosition?: () => void;
+  position?: PanelPoint;
+};

package/templates/runtime/react/panel-host.test.tsx

@@ -0,0 +1,102 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import * as React from "react";
+import { describe, expect, it, vi } from "vitest";
+
+import { defineToolcraft } from "../schema/define-toolcraft";
+import { ToolcraftRoot } from "./toolcraft-root";
+import { ToolcraftPanelHost, PanelHost } from "./panel-host";
+import { useToolcraft } from "./use-toolcraft";
+
+function PanelOffsetReader() {
+  const { dispatch, state } = useToolcraft();
+
+  return (
+    <>
+      <button
+        onClick={() =>
+          dispatch({
+            offset: { x: 40, y: 80 },
+            panelId: "toolbar",
+            type: "panels.setOffset",
+          })
+        }
+        type="button"
+      >
+        Move toolbar
+      </button>
+      <span data-testid="toolbar-offset">
+        {state.panels.toolbar.offset.x},{state.panels.toolbar.offset.y}
+      </span>
+      <ToolcraftPanelHost panelType="toolbar">
+        <div>Toolbar</div>
+      </ToolcraftPanelHost>
+    </>
+  );
+}
+
+describe("PanelHost", () => {
+  it("renders default placement attributes for a panel type", () => {
+    const { container } = render(
+      <PanelHost panelType="toolbar">
+        <div>Toolbar</div>
+      </PanelHost>,
+    );
+
+    const host = container.querySelector("[data-slot='toolcraft-runtime-panel-host']");
+
+    expect(host?.getAttribute("data-panel-type")).toBe("toolbar");
+    expect(host?.getAttribute("data-drag-mode")).toBe("panel");
+    expect(host?.getAttribute("data-snap-edges")).toBe("top bottom");
+  });
+
+  it("resets a panel on double click", () => {
+    const handleReset = vi.fn();
+    const { container } = render(
+      <PanelHost onResetPosition={handleReset} panelType="toolbar">
+        <div>Toolbar</div>
+      </PanelHost>,
+    );
+
+    const host = container.querySelector("[data-slot='toolcraft-runtime-panel-host']");
+
+    expect(host).not.toBeNull();
+    fireEvent.doubleClick(host as Element);
+
+    expect(handleReset).toHaveBeenCalledTimes(1);
+  });
+
+  it("does not reset when double clicking an ignored child control", () => {
+    const handleReset = vi.fn();
+    render(
+      <PanelHost onResetPosition={handleReset} panelType="toolbar">
+        <button type="button">Zoom</button>
+      </PanelHost>,
+    );
+
+    fireEvent.doubleClick(screen.getByRole("button", { name: "Zoom" }));
+
+    expect(handleReset).not.toHaveBeenCalled();
+  });
+
+  it("lets the runtime reset stored panel offsets", () => {
+    const schema = defineToolcraft({
+      canvas: { enabled: true },
+      panels: {},
+    });
+    const { container } = render(
+      <ToolcraftRoot schema={schema}>
+        <PanelOffsetReader />
+      </ToolcraftRoot>,
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: "Move toolbar" }));
+    expect(screen.getByTestId("toolbar-offset").textContent).toBe("40,80");
+
+    const host = container.querySelector("[data-slot='toolcraft-runtime-panel-host']");
+
+    expect(host).not.toBeNull();
+    fireEvent.doubleClick(host as Element);
+
+    expect(screen.getByTestId("toolbar-offset").textContent).toBe("0,0");
+  });
+});