@readymadeit/mcp 0.0.0-stage → 0.1.0

package/bundle/hkp-frontend/src/runtime/browser/services/CanvasUI/index.tsx

@@ -0,0 +1,287 @@
+import { useState, useRef, useEffect, useCallback, MouseEvent } from "react";
+import { createPortal } from "react-dom";
+import ResizeObserver from "resize-observer-polyfill";
+
+import { zLayers } from "../../../../styles";
+import ServiceUI from "hkp-frontend/src/ui-components/service/ServiceUI";
+import {
+  ServiceAction,
+  ServiceInstance,
+  ServiceUIProps,
+} from "hkp-frontend/src/types";
+import { Rect, Size } from "hkp-frontend/src/common";
+import { BinaryIcon, ToggleLeft, ToggleRight } from "lucide-react";
+import MenuIcon from "hkp-frontend/src/ui-components/MenuIcon";
+import { update } from "./canvasDraw";
+
+export default function CanvasUI(props: ServiceUIProps) {
+  const [fullWidth, setFullWidth] = useState<number>(document.body.clientWidth);
+  const [fullHeight, setFullHeight] = useState<number>(
+    document.body.clientHeight,
+  );
+  const [fullscreen, setFullscreen] = useState<boolean>(false);
+  const [clearOnRedraw, setClearOnRedraw] = useState<boolean>(true);
+  const [canvasWidth, setCanvasWidth] = useState<number>(400);
+  const [canvasHeight, setCanvasHeight] = useState<number>(250);
+  const [resizable, setResizable] = useState<boolean>(true);
+  const [capture, setCapture] = useState<boolean>(false);
+
+  const imageCacheRef = useRef<{ [key: string]: any }>({});
+  const clickHandlersRef = useRef<{
+    [key: string]: { rect: Rect; action: ServiceAction };
+  }>({});
+  const canvasRef = useRef<HTMLCanvasElement | null>(null);
+  const recentDataRef = useRef<any>(undefined);
+
+  // Use refs for state values needed in async callbacks
+  const clearOnRedrawRef = useRef<boolean>(true);
+  const fullWidthRef = useRef<number>(document.body.clientWidth);
+  const fullHeightRef = useRef<number>(document.body.clientHeight);
+  const fullscreenRef = useRef<boolean>(false);
+  const canvasWidthRef = useRef<number>(400);
+  const canvasHeightRef = useRef<number>(250);
+  const captureRef = useRef<boolean>(false);
+
+  useEffect(() => {
+    clearOnRedrawRef.current = clearOnRedraw;
+  }, [clearOnRedraw]);
+  useEffect(() => {
+    fullWidthRef.current = fullWidth;
+  }, [fullWidth]);
+  useEffect(() => {
+    fullHeightRef.current = fullHeight;
+  }, [fullHeight]);
+  useEffect(() => {
+    fullscreenRef.current = fullscreen;
+  }, [fullscreen]);
+  useEffect(() => {
+    canvasWidthRef.current = canvasWidth;
+  }, [canvasWidth]);
+  useEffect(() => {
+    canvasHeightRef.current = canvasHeight;
+  }, [canvasHeight]);
+  useEffect(() => {
+    captureRef.current = capture;
+  }, [capture]);
+
+  useEffect(() => {
+    const resizeBodyObserver = new ResizeObserver(onResizeBodyEvent);
+    resizeBodyObserver.observe(document.body);
+    return () => {
+      resizeBodyObserver.disconnect();
+    };
+  }, []);
+
+  const onResizeBodyEvent = (entries: ResizeObserverEntry[]) => {
+    const entry = entries && entries[0];
+    if (entry) {
+      const newFullWidth = document.body.clientWidth;
+      const newFullHeight = document.body.clientHeight;
+      setFullWidth(newFullWidth);
+      setFullHeight(newFullHeight);
+      fullWidthRef.current = newFullWidth;
+      fullHeightRef.current = newFullHeight;
+      triggerUpdate(recentDataRef.current || {});
+    }
+  };
+
+  const registerClickHandler = useCallback((
+    rect: { x: number; y: number; width: number; height: number },
+    action: any,
+  ) => {
+    const id = `${rect.x}${rect.y}`;
+    clickHandlersRef.current[id] = { rect: rect as Rect, action };
+  }, []);
+
+  const triggerUpdate = useCallback((objectOrArray: any) => {
+    recentDataRef.current = objectOrArray;
+    if (!canvasRef.current) {
+      return;
+    }
+    // Clear click handlers before each redraw so stale handlers don't accumulate
+    clickHandlersRef.current = {};
+    update(
+      canvasRef.current,
+      objectOrArray,
+      clearOnRedrawRef.current,
+      imageCacheRef.current,
+      registerClickHandler,
+    );
+  }, [registerClickHandler]);
+
+  const attachCanvas = useCallback((canvas: HTMLCanvasElement | null) => {
+    canvasRef.current = canvas;
+    // Entering or leaving fullscreen mounts a new canvas in the other tree.
+    if (canvas && recentDataRef.current !== undefined) {
+      triggerUpdate(recentDataRef.current);
+    }
+  }, [triggerUpdate]);
+
+  const onClick = (service: ServiceInstance, ev: MouseEvent) => {
+    const { clientX: x, clientY: y } = ev;
+    for (const id in clickHandlersRef.current) {
+      const { rect, action } = clickHandlersRef.current[id];
+      if (
+        x >= rect.x &&
+        x <= rect.x + (Number(rect.width) || 0) &&
+        y >= rect.y &&
+        y <= rect.y + (Number(rect.height) || 0)
+      ) {
+        return invokeClickAction(service, action);
+      }
+    }
+  };
+
+  const invokeClickAction = (service: ServiceInstance, action: any) => {
+    if (action.internal) {
+      // internal dispatch event
+      service.app.next(service, action.internal);
+    } else {
+      // external action
+      service.app.sendAction(action);
+    }
+  };
+
+  const renderMain = (service: ServiceInstance) => {
+    const fullscreenVal = fullscreen || service.fullscreen;
+    const w = fullscreenVal ? fullWidth : canvasWidth;
+    const h = fullscreenVal ? fullHeight : canvasHeight - 4; // TODO: could not figure out why we grows otherwise
+    const canvas = (
+      <canvas
+        ref={attachCanvas}
+        style={{
+          position: fullscreenVal ? "fixed" : undefined,
+          top: fullscreenVal ? 0 : undefined,
+          left: fullscreenVal ? 0 : undefined,
+          zIndex: fullscreenVal ? zLayers.foreground : undefined,
+          width: w,
+          height: h,
+        }}
+        onDoubleClick={() => {
+          if (resizable && !service.noToggleFullscreenOnDblClick) {
+            const toggled = !fullscreenVal;
+            service.fullscreen = toggled;
+            setFullscreen(toggled);
+            fullscreenRef.current = toggled;
+            triggerUpdate(recentDataRef.current);
+          }
+        }}
+        onClick={(ev) => onClick(service, ev)}
+        width={w}
+        height={h}
+      />
+    );
+    // The runtime may be zoomed. A fixed canvas inside it inherits that zoom,
+    // so render fullscreen at the document level instead.
+    return fullscreenVal ? createPortal(canvas, document.body) : canvas;
+  };
+
+  const onNotification = (notification: any) => {
+    const { render, size, capture: newCapture } = notification;
+    if (size !== undefined) {
+      const [newCanvasWidth, newCanvasHeight] = size;
+      setCanvasWidth(newCanvasWidth);
+      setCanvasHeight(newCanvasHeight);
+      canvasWidthRef.current = newCanvasWidth;
+      canvasHeightRef.current = newCanvasHeight;
+      triggerUpdate(recentDataRef.current);
+    }
+
+    if (newCapture !== undefined) {
+      setCapture(newCapture);
+      captureRef.current = newCapture;
+    }
+    if (render) {
+      const { captureMime, frameID } = notification;
+      triggerUpdate(render);
+      if (captureMime && canvasRef.current) {
+        canvasRef.current.toBlob(
+          (blob) =>
+            props.service.configure({
+              capturedFrame: {
+                frameID,
+                blob,
+              },
+            }),
+          captureMime,
+        );
+      }
+    }
+  };
+
+  const onInit = (initialState: any) => {
+    const {
+      size,
+      resizable: newResizable,
+      fullscreen: newFullscreen,
+      clearOnRedraw: newClearOnRedraw = true,
+    } = initialState;
+
+    setClearOnRedraw(newClearOnRedraw);
+    clearOnRedrawRef.current = newClearOnRedraw;
+    setResizable(!!newResizable);
+    if (newFullscreen !== undefined) {
+      setFullscreen(newFullscreen);
+      fullscreenRef.current = newFullscreen;
+    }
+    if (size) {
+      setCanvasWidth(size[0]);
+      setCanvasHeight(size[1]);
+      canvasWidthRef.current = size[0];
+      canvasHeightRef.current = size[1];
+    }
+  };
+
+  const onResize = (service: ServiceInstance, { width, height }: Size) => {
+    service.configure({ size: [width, height] });
+  };
+
+  const { service } = props;
+
+  const onCopyDataURL = () => {
+    if (canvasRef.current) {
+      const dataUrl = canvasRef.current.toDataURL();
+      navigator.clipboard.writeText(dataUrl);
+    }
+  };
+
+  const onToggleOutputImage = () =>
+    service.configure({ capture: !captureRef.current });
+  const customMenuEntries = [
+    {
+      name: "Copy Data URL",
+      icon: <MenuIcon icon={BinaryIcon} />,
+      onClick: onCopyDataURL,
+    },
+    {
+      name: `Output Blob ${capture ? "[is on]" : "[is off]"}`,
+      icon: (
+        <MenuIcon
+          icon={capture ? ToggleRight : ToggleLeft}
+          className={capture ? "stroke-sky-600" : ""}
+        />
+      ),
+      onClick: onToggleOutputImage,
+    },
+  ];
+  return (
+    <ServiceUI
+      {...props}
+      onInit={onInit}
+      onNotification={onNotification}
+      onResize={onResize}
+      resizable={resizable}
+      customMenuEntries={customMenuEntries}
+    >
+      <div
+        style={{
+          overflow: "hidden",
+          padding: resizable ? 5 : 0,
+          margin: 0,
+        }}
+      >
+        {renderMain(service)}
+      </div>
+    </ServiceUI>
+  );
+}

package/bundle/hkp-frontend/src/runtime/browser/services/CanvasUI/tests/canvasDraw.test.ts

@@ -0,0 +1,355 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import {
+  drawText,
+  drawCircle,
+  drawRect,
+  drawImage,
+  update,
+  DrawContext,
+} from "../canvasDraw";
+
+// NOTE: fetchImage, createImage, and drawVideo are not tested here because they
+// require real browser APIs (Image constructor with network loading, URL.createObjectURL,
+// HTMLVideoElement, setImmediate) that are not reliably available in jsdom.
+
+function makeCtx() {
+  return {
+    save: vi.fn(),
+    restore: vi.fn(),
+    beginPath: vi.fn(),
+    stroke: vi.fn(),
+    fill: vi.fn(),
+    fillRect: vi.fn(),
+    moveTo: vi.fn(),
+    lineTo: vi.fn(),
+    arc: vi.fn(),
+    rect: vi.fn(),
+    fillText: vi.fn(),
+    strokeText: vi.fn(),
+    createRadialGradient: vi.fn(() => ({ addColorStop: vi.fn() })),
+    measureText: vi.fn(() => ({ width: 50 })),
+    fillStyle: "",
+    strokeStyle: "",
+    lineWidth: 1,
+    font: "",
+    globalAlpha: 1,
+    getImageData: vi.fn(),
+    putImageData: vi.fn(),
+  } as unknown as CanvasRenderingContext2D;
+}
+
+function makeDim(overrides: Partial<DrawContext> = {}): DrawContext {
+  return {
+    width: 400,
+    height: 300,
+    imageCache: {},
+    registerClickHandler: vi.fn(),
+    ...overrides,
+  };
+}
+
+function makeCanvas(width = 400, height = 300) {
+  const ctx = makeCtx();
+  return {
+    width,
+    height,
+    getContext: vi.fn(() => ctx),
+    getBoundingClientRect: vi.fn(
+      () => ({ width, height, x: 0, y: 0, top: 0, left: 0 } as DOMRect),
+    ),
+    _ctx: ctx,
+  } as unknown as HTMLCanvasElement & { _ctx: CanvasRenderingContext2D };
+}
+
+// ─── drawText ────────────────────────────────────────────────────────────────
+
+describe("drawText", () => {
+  it("calls ctx.fillText with the text value", () => {
+    const ctx = makeCtx();
+    const dim = makeDim();
+    drawText(ctx, { type: "text", text: "hello" }, dim);
+    expect(ctx.fillText).toHaveBeenCalledWith("hello", expect.any(Number), expect.any(Number));
+  });
+
+  it("centers the text when no x/y is provided", () => {
+    const ctx = makeCtx();
+    const dim = makeDim({ width: 400, height: 300 });
+    // measureText returns width: 50, so centered x = 400/2 - 50/2 = 175
+    // centered y = 300/2 = 150
+    drawText(ctx, { type: "text", text: "hi" }, dim);
+    expect(ctx.fillText).toHaveBeenCalledWith("hi", 175, 150);
+  });
+
+  it("uses explicit x/y when provided", () => {
+    const ctx = makeCtx();
+    const dim = makeDim();
+    drawText(ctx, { type: "text", text: "hi", x: 10, y: 20 }, dim);
+    expect(ctx.fillText).toHaveBeenCalledWith("hi", 10, 20);
+  });
+
+  it("calls registerClickHandler when data has an onClick", () => {
+    const ctx = makeCtx();
+    const registerClickHandler = vi.fn();
+    const dim = makeDim({ registerClickHandler });
+    const onClickAction = { action: "notification" };
+    drawText(ctx, { type: "text", text: "click me", onClick: onClickAction }, dim);
+    expect(registerClickHandler).toHaveBeenCalledWith(
+      expect.objectContaining({ x: expect.any(Number), y: expect.any(Number) }),
+      onClickAction,
+    );
+  });
+
+  it("applies textTransform when set", () => {
+    const ctx = makeCtx();
+    const dim = makeDim();
+    drawText(ctx, { type: "text", text: "hello", textTransform: "uppercase" }, dim);
+    expect(ctx.fillText).toHaveBeenCalledWith("HELLO", expect.any(Number), expect.any(Number));
+  });
+});
+
+// ─── drawCircle ──────────────────────────────────────────────────────────────
+
+describe("drawCircle", () => {
+  it("calls ctx.arc with the correct radius", () => {
+    const ctx = makeCtx();
+    const dim = makeDim({ width: 400, height: 300 });
+    drawCircle(ctx, { x: "50%", y: "50%", radius: 50, color: "red" }, dim);
+    // radius toAbsolute(50, 300) = 50 (plain number)
+    expect(ctx.arc).toHaveBeenCalledWith(200, 150, 50, 0, expect.any(Number));
+  });
+
+  it("calls ctx.fill when color is provided", () => {
+    const ctx = makeCtx();
+    const dim = makeDim();
+    drawCircle(ctx, { x: 0, y: 0, color: "blue" }, dim);
+    expect(ctx.fill).toHaveBeenCalled();
+  });
+
+  it("calls ctx.stroke when contour is provided", () => {
+    const ctx = makeCtx();
+    const dim = makeDim();
+    drawCircle(ctx, { x: 0, y: 0, contour: { color: "black", lineWidth: 2 } }, dim);
+    expect(ctx.stroke).toHaveBeenCalled();
+  });
+
+  it("creates a radial gradient when gradient data is provided", () => {
+    const ctx = makeCtx();
+    const dim = makeDim({ width: 400, height: 300 });
+    drawCircle(
+      ctx,
+      {
+        x: 0,
+        y: 0,
+        gradient: {
+          radius: 100,
+          centerX: "50%",
+          centerY: "50%",
+          colors: ["red", "blue"],
+        },
+      },
+      dim,
+    );
+    expect(ctx.createRadialGradient).toHaveBeenCalled();
+    expect(ctx.fill).toHaveBeenCalled();
+  });
+});
+
+// ─── drawRect ────────────────────────────────────────────────────────────────
+
+describe("drawRect", () => {
+  it("calls ctx.rect and ctx.fill when color is provided", () => {
+    const ctx = makeCtx();
+    const dim = makeDim();
+    drawRect(ctx, { x: 10, y: 10, width: 50, height: 50, color: "red" }, dim);
+    expect(ctx.rect).toHaveBeenCalled();
+    expect(ctx.fill).toHaveBeenCalled();
+  });
+
+  it("calls ctx.stroke when contour is provided", () => {
+    const ctx = makeCtx();
+    const dim = makeDim();
+    drawRect(
+      ctx,
+      { x: 10, y: 10, width: 50, height: 50, contour: { color: "black", lineWidth: 1 } },
+      dim,
+    );
+    expect(ctx.stroke).toHaveBeenCalled();
+  });
+});
+
+// ─── update ──────────────────────────────────────────────────────────────────
+
+describe("drawImage", () => {
+  // An image already in the cache is drawn without being loaded.
+  const img = { width: 200, height: 100 } as HTMLImageElement;
+  const withImage = () => makeDim({ imageCache: { "pic.png": img } });
+  const ctxWithTransforms = () =>
+    Object.assign(makeCtx(), {
+      drawImage: vi.fn(),
+      translate: vi.fn(),
+      rotate: vi.fn(),
+      scale: vi.fn(),
+    }) as any;
+
+  it("draws at its centre, sized by height, with no transform by default", async () => {
+    const ctx = ctxWithTransforms();
+    await drawImage(ctx, { url: "pic.png", centerX: "50%", centerY: "50%", height: "50%" }, withImage());
+    // 50% of 300 is 150 high, so 300 wide, centred on (200, 150).
+    expect(ctx.drawImage).toHaveBeenCalledWith(img, 50, 75, 300, 150);
+    expect(ctx.rotate).not.toHaveBeenCalled();
+  });
+
+  it("centres vertically by the height it is drawn at", async () => {
+    const ctx = ctxWithTransforms();
+    await drawImage(ctx, { url: "pic.png", height: "50%" }, withImage());
+    expect(ctx.drawImage).toHaveBeenCalledWith(img, 50, 75, 300, 150);
+  });
+
+  it("rotates and scales about its own centre", async () => {
+    const ctx = ctxWithTransforms();
+    await drawImage(
+      ctx,
+      { url: "pic.png", centerX: "50%", centerY: "50%", height: "50%", rotate: 90, scale: 2 },
+      withImage(),
+    );
+    expect(ctx.translate).toHaveBeenCalledWith(200, 150);
+    expect(ctx.rotate).toHaveBeenCalledWith(Math.PI / 2);
+    expect(ctx.scale).toHaveBeenCalledWith(2, 2);
+    expect(ctx.drawImage).toHaveBeenCalledWith(img, -150, -75, 300, 150);
+  });
+
+  const clickRect = async (transform: Record<string, unknown>) => {
+    const registerClickHandler = vi.fn();
+    const dim = makeDim({ imageCache: { "pic.png": img }, registerClickHandler });
+    await drawImage(
+      ctxWithTransforms(),
+      { url: "pic.png", height: "50%", onClick: { action: "x" }, ...transform },
+      dim,
+    );
+    return registerClickHandler.mock.calls[0][0];
+  };
+
+  it("is clickable where it is drawn untransformed", async () => {
+    expect(await clickRect({})).toEqual({ x: 50, y: 75, width: 300, height: 150 });
+  });
+
+  it("is clickable over the area it is scaled to, about its centre", async () => {
+    expect(await clickRect({ scale: 0.5 })).toEqual({ x: 125, y: 112.5, width: 150, height: 75 });
+  });
+
+  it("is clickable over the box enclosing it when turned", async () => {
+    const rect = await clickRect({ rotate: 90 });
+    expect(rect.x).toBeCloseTo(125);
+    expect(rect.y).toBeCloseTo(0);
+    expect(rect.width).toBeCloseTo(150);
+    expect(rect.height).toBeCloseTo(300);
+  });
+});
+
+describe("update", () => {
+  it("clears the canvas with fillRect when clearOnRedraw is true", async () => {
+    const canvas = makeCanvas();
+    await update(canvas, { type: "text", text: "hi" }, true, {}, vi.fn());
+    expect(canvas._ctx.fillRect).toHaveBeenCalledWith(0, 0, 400, 300);
+  });
+
+  it("does NOT call fillRect to clear when clearOnRedraw is false", async () => {
+    const canvas = makeCanvas();
+    await update(canvas, { type: "text", text: "hi" }, false, {}, vi.fn());
+    expect(canvas._ctx.fillRect).not.toHaveBeenCalled();
+  });
+
+  it("returns early without error when canvas is null", async () => {
+    await expect(
+      update(null as unknown as HTMLCanvasElement, { type: "text", text: "hi" }, true, {}, vi.fn()),
+    ).resolves.toBeUndefined();
+  });
+
+  it("returns early without error when canvas is undefined", async () => {
+    await expect(
+      update(undefined as unknown as HTMLCanvasElement, { type: "text", text: "hi" }, true, {}, vi.fn()),
+    ).resolves.toBeUndefined();
+  });
+
+  it("returns early without error when data is falsy", async () => {
+    const canvas = makeCanvas();
+    await expect(update(canvas, null, true, {}, vi.fn())).resolves.toBeUndefined();
+    await expect(update(canvas, undefined, true, {}, vi.fn())).resolves.toBeUndefined();
+  });
+
+  it("draws nested lists as one, in order, skipping holes", async () => {
+    const canvas = makeCanvas();
+    await update(
+      canvas,
+      [
+        { type: "text", text: "a" },
+        [{ type: "text", text: "b" }, [{ type: "text", text: "c" }]],
+        null,
+        { type: "text", text: "d" },
+      ],
+      false,
+      {},
+      vi.fn(),
+    );
+    const drawn = (canvas._ctx.fillText as any).mock.calls.map(([t]: [string]) => t);
+    expect(drawn).toEqual(["a", "b", "c", "d"]);
+  });
+
+  it("handles a single object input by wrapping it in an array and drawing it", async () => {
+    const canvas = makeCanvas();
+    await update(canvas, { type: "text", text: "single" }, true, {}, vi.fn());
+    expect(canvas._ctx.fillText).toHaveBeenCalledWith(
+      "single",
+      expect.any(Number),
+      expect.any(Number),
+    );
+  });
+
+  it("handles array input and calls draw functions for each element", async () => {
+    const canvas = makeCanvas();
+    const data = [
+      { type: "text", text: "first" },
+      { type: "text", text: "second" },
+    ];
+    await update(canvas, data, true, {}, vi.fn());
+    expect(canvas._ctx.fillText).toHaveBeenCalledTimes(2);
+    expect(canvas._ctx.fillText).toHaveBeenNthCalledWith(
+      1,
+      "first",
+      expect.any(Number),
+      expect.any(Number),
+    );
+    expect(canvas._ctx.fillText).toHaveBeenNthCalledWith(
+      2,
+      "second",
+      expect.any(Number),
+      expect.any(Number),
+    );
+  });
+
+  it("creates a fresh DrawContext per call (registerClickHandler is provided per call)", async () => {
+    const canvas = makeCanvas();
+    const registerClickHandler1 = vi.fn();
+    const registerClickHandler2 = vi.fn();
+
+    const onClickAction = { action: "notification" };
+    await update(
+      canvas,
+      { type: "text", text: "t", onClick: onClickAction },
+      true,
+      {},
+      registerClickHandler1,
+    );
+    await update(
+      canvas,
+      { type: "text", text: "t", onClick: onClickAction },
+      true,
+      {},
+      registerClickHandler2,
+    );
+
+    // Each call's registerClickHandler should be called independently
+    expect(registerClickHandler1).toHaveBeenCalledTimes(1);
+    expect(registerClickHandler2).toHaveBeenCalledTimes(1);
+  });
+});