@readymadeit/mcp 0.0.0-stage → 0.1.0

package/bundle/hkp-frontend/src/runtime/browser/services/Canvas.ts

@@ -0,0 +1,139 @@
+import { AppInstance, ServiceClass } from "hkp-frontend/src/types";
+import CanvasUI from "./CanvasUI";
+import ServiceBase from "./ServiceBase";
+
+/**
+ * Service Documentation
+ * Service ID: hookup.to/service/canvas
+ * Service Name: Canvas
+ * Modes: render pass-through | capture
+ * Key Config: size, resizable, clearOnRedraw, fullscreen, capture, reportSizeUpdate
+ * Input: draw payload object/array
+ * Output: input payload pass-through by default; Blob when capture is enabled
+ * Arrays: pass-through
+ * Binary: emits Blob in capture mode
+ * MixedData: not native in browser runtime
+ */
+
+const serviceId = "hookup.to/service/canvas";
+const serviceName = "Canvas";
+
+type P = { resolve: (blob: Blob) => void; reject: (frameID: number) => void };
+
+class Canvas extends ServiceBase<any> {
+  _frameID = 0;
+  _pending: { [frameID: number]: P } = {};
+
+  constructor(
+    app: AppInstance,
+    board: string,
+    descriptor: ServiceClass,
+    id: string,
+  ) {
+    super(app, board, descriptor, id, {
+      fullscreen: false,
+      clearOnRedraw: true,
+      resizable: true,
+      size: undefined,
+      reportSizeUpdate: true,
+      noToggleFullscreenOnDblClick: false,
+      capture: false,
+    });
+  }
+
+  configure(config: any) {
+    const {
+      fullscreen,
+      clearOnRedraw,
+      noToggleFullscreenOnDblClick,
+      capture,
+      capturedFrame,
+      resizable,
+      size,
+      reportSizeUpdate,
+    } = config || {};
+    if (fullscreen !== undefined) {
+      this.state.fullscreen = fullscreen;
+    }
+
+    if (clearOnRedraw !== undefined) {
+      this.state.clearOnRedraw = clearOnRedraw;
+    }
+
+    if (noToggleFullscreenOnDblClick !== undefined) {
+      this.state.noToggleFullscreenOnDblClick = noToggleFullscreenOnDblClick;
+    }
+
+    if (capture !== undefined) {
+      this.state.capture = capture;
+      this.app.notify(this, { capture });
+    }
+
+    if (capturedFrame !== undefined) {
+      this.resolveCapturedFrame(capturedFrame);
+    }
+
+    if (resizable !== undefined) {
+      this.state.resizable = resizable;
+    }
+
+    if (size !== undefined) {
+      this.state.size = size;
+      this.app.notify(this, { size });
+      if (this.state.reportSizeUpdate) {
+        const [updatedWidth, updatedHeight] = size;
+        this.app.next(this, { updatedWidth, updatedHeight });
+      }
+    }
+
+    if (reportSizeUpdate !== undefined) {
+      this.state.reportSizeUpdate = reportSizeUpdate;
+    }
+  }
+
+  resolveCapturedFrame({ blob, frameID }: any) {
+    const { resolve, reject } = this._pending[frameID];
+    delete this._pending[frameID];
+    if (this._pending[frameID + 1]) {
+      reject(frameID); // next frame already scheduled
+    } else {
+      resolve(blob);
+    }
+  }
+
+  waitForCapturedFrame(frameID: number) {
+    return new Promise((resolve, reject) => {
+      this._pending[frameID] = { resolve, reject };
+    });
+  }
+
+  async process(params: any) {
+    const frameID = this._frameID++;
+    this.app.notify(this, {
+      render: params,
+      frameID,
+      captureMime: this.state.capture,
+    });
+    if (this.state.capture) {
+      return await this.waitForCapturedFrame(frameID).catch(
+        (/*rejectFrameID*/) => null,
+      ); // null stops further propagation of droppped frames
+    }
+
+    return params;
+  }
+}
+
+const descriptor = {
+  serviceName,
+  serviceId,
+  create: (
+    app: AppInstance,
+    board: string,
+    descriptor: ServiceClass,
+    id: string,
+  ) => new Canvas(app, board, descriptor, id),
+  createUI: CanvasUI,
+};
+
+export default descriptor;

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

@@ -0,0 +1,543 @@
+import { toAbsolute, applyTextTransform, maxArrayElem, minArrayElem } from "./canvasUtils";
+import { createObjectURL, revokeObjectURL } from "../helpers";
+
+const TWO_PI = 2 * Math.PI;
+
+export type DrawContext = {
+  width: number;
+  height: number;
+  imageCache: Record<string, HTMLImageElement>;
+  registerClickHandler: (
+    rect: { x: number; y: number; width: number; height: number },
+    action: any,
+  ) => void;
+};
+
+export function fetchImage(
+  cache: Record<string, HTMLImageElement>,
+  url: string,
+): Promise<HTMLImageElement> {
+  return new Promise((resolve) => {
+    const image = cache[url];
+    if (!image) {
+      const img = new Image();
+      img.onload = () => {
+        cache[url] = img;
+        resolve(img);
+      };
+      img.src = url;
+    } else {
+      resolve(image);
+    }
+  });
+}
+
+export function createImage(
+  blob: Blob | HTMLImageElement,
+): Promise<HTMLImageElement> {
+  if (blob instanceof window.Image) {
+    return Promise.resolve(blob); // already an image
+  }
+  return new Promise((resolve, reject) => {
+    const imageUrl = createObjectURL(blob as Blob);
+    if (imageUrl) {
+      const img = new Image();
+      img.addEventListener("load", () => {
+        revokeObjectURL(imageUrl);
+        resolve(img);
+      });
+      img.addEventListener("error", () => {
+        revokeObjectURL(imageUrl);
+        reject(new Error("Could not load image from blob"));
+      });
+      img.src = imageUrl;
+    } else {
+      reject(new Error("Could not create image URL"));
+    }
+  });
+}
+
+export function drawText(
+  ctx: CanvasRenderingContext2D,
+  data: any,
+  dim: DrawContext,
+): void {
+  const { width: canvasWidth, height: canvasHeight } = dim;
+  const centerX = canvasWidth / 2;
+  const centerY = canvasHeight / 2;
+
+  const {
+    font = "30px Arial",
+    text,
+    x: dx,
+    y: dy,
+    onClick: onClickHandler,
+    contour,
+    color,
+    textTransform,
+  } = data;
+
+  ctx.save();
+  ctx.fillStyle = color || "#000";
+  ctx.strokeStyle = contour ? contour.color : ctx.fillStyle;
+  ctx.lineWidth = contour ? contour.lineWidth : 1;
+
+  const isFontString = typeof font === "string";
+  const {
+    style = "normal",
+    weight = "normal",
+    size = "10px",
+    family = "Arial",
+  } = isFontString ? {} : font;
+  const isRelative = size[size.length - 1] === "%";
+
+  if (isFontString) {
+    // relative font size not supported in this notation
+    ctx.font = font;
+  } else {
+    // font is an object
+    ctx.font = `${style} ${weight} ${isRelative ? "10px" : size} ${family}`;
+  }
+
+  const t = textTransform ? applyTextTransform(text, textTransform) : text;
+  let textWidth = ctx.measureText(t).width;
+  if (isRelative) {
+    const targetRelativeWidth = Number(size.substr(0, size.length - 1)) / 100;
+    const currentRelativeWidth = textWidth / canvasWidth;
+    const correctionRatio = targetRelativeWidth / currentRelativeWidth;
+    const correctedSize = Math.floor(correctionRatio * 10);
+    ctx.font = `${style} ${weight} ${correctedSize}px ${family}`;
+    textWidth = ctx.measureText(t).width;
+  }
+  const x =
+    dx === undefined ? centerX - textWidth / 2 : toAbsolute(dx, canvasWidth);
+  const y = dy === undefined ? centerY : toAbsolute(dy, canvasHeight);
+  ctx.fillText(t, x, y);
+  // ctx.strokeText(t, x, y);
+
+  if (onClickHandler) {
+    const rect = {
+      x,
+      y: y - textWidth,
+      width: textWidth,
+      height: textWidth + 4,
+    };
+    dim.registerClickHandler(rect, onClickHandler);
+  }
+
+  ctx.restore();
+}
+
+export function drawCircle(
+  ctx: CanvasRenderingContext2D,
+  data: any,
+  dim: Pick<DrawContext, "width" | "height">,
+): void {
+  const { width, height } = dim;
+  const { radius = 100, color, contour, gradient } = data || {};
+  ctx.save();
+  const drawPath = (ctx: CanvasRenderingContext2D) => {
+    ctx.beginPath();
+    ctx.arc(
+      toAbsolute(data.x, width),
+      toAbsolute(data.y, height),
+      toAbsolute(radius, height),
+      0,
+      TWO_PI,
+    );
+  };
+
+  if (contour) {
+    ctx.strokeStyle = contour.color;
+    ctx.lineWidth = contour.lineWidth || 1;
+    drawPath(ctx);
+    ctx.stroke();
+  }
+
+  if (color) {
+    ctx.fillStyle = color;
+    drawPath(ctx);
+    ctx.fill();
+  }
+
+  if (gradient) {
+    const r = toAbsolute(gradient.radius, height);
+    const gx = toAbsolute(gradient.centerX, width);
+    const gy = toAbsolute(gradient.centerY, height);
+    const grd = ctx.createRadialGradient(gx, gy, r * 0.2, gx, gy, r * 1.5);
+    const nColors = gradient.colors.length;
+    gradient.colors.forEach((c: string, i: number) =>
+      grd.addColorStop(i / nColors, c),
+    );
+    ctx.fillStyle = grd;
+
+    drawPath(ctx);
+    ctx.fill();
+  }
+  ctx.restore();
+}
+
+export function drawRect(
+  ctx: CanvasRenderingContext2D,
+  data: any,
+  dim: Pick<DrawContext, "width" | "height">,
+): void {
+  const { width: cW, height: cH } = dim;
+  const length = (data || {}).length;
+  const { x, y, width = length, height = length, color, contour } = data || {};
+
+  ctx.save();
+  const drawPath = (ctx: CanvasRenderingContext2D) => {
+    ctx.beginPath();
+    ctx.rect(
+      toAbsolute(x, cW),
+      toAbsolute(y, cH),
+      toAbsolute(width, cW),
+      toAbsolute(height, length !== undefined ? cW : cH),
+    );
+  };
+
+  if (contour) {
+    ctx.strokeStyle = contour.color;
+    ctx.lineWidth = contour.lineWidth || 1;
+    drawPath(ctx);
+    ctx.stroke();
+  }
+
+  if (color) {
+    ctx.fillStyle = color;
+    drawPath(ctx);
+    ctx.fill();
+  }
+
+  ctx.restore();
+}
+
+/**
+ * The axis-aligned box around a rect turned (in degrees) and scaled about its
+ * own centre: exact for a scale alone, the box enclosing the turned rect
+ * otherwise.
+ */
+export function transformedBounds(
+  rect: { x: number; y: number; width: number; height: number },
+  rotate: number,
+  scale: number,
+): { x: number; y: number; width: number; height: number } {
+  if (!rotate && scale === 1) {
+    return rect;
+  }
+  const radians = (rotate * Math.PI) / 180;
+  const cos = Math.abs(Math.cos(radians));
+  const sin = Math.abs(Math.sin(radians));
+  const s = Math.abs(scale);
+  const width = (rect.width * cos + rect.height * sin) * s;
+  const height = (rect.width * sin + rect.height * cos) * s;
+  const centerX = rect.x + rect.width / 2;
+  const centerY = rect.y + rect.height / 2;
+  return { x: centerX - width / 2, y: centerY - height / 2, width, height };
+}
+
+export async function drawImage(
+  ctx: CanvasRenderingContext2D,
+  data: any,
+  dim: DrawContext,
+): Promise<void> {
+  const { width: canvasWidth, height: canvasHeight } = dim;
+  const canvasCenterX = canvasWidth / 2;
+  const canvasCenterY = canvasHeight / 2;
+
+  const {
+    url,
+    data: blob,
+    opacity,
+    height = "100%",
+    unscaled,
+    onClick: onClickHandler,
+    centerX,
+    centerY,
+    x,
+    y,
+    rotate = 0,
+    scale = 1,
+  } = data;
+  const img = (
+    url
+      ? await fetchImage(dim.imageCache, url)
+      : await createImage(blob)
+  ) as HTMLImageElement;
+  const scaledHeight =
+    height === undefined ? canvasHeight : toAbsolute(height, canvasHeight);
+  const aspectRatio = img.width / img.height;
+  const scaledWidth = scaledHeight * aspectRatio;
+  const cx = centerX
+    ? toAbsolute(centerX, canvasWidth) - scaledWidth / 2
+    : canvasCenterX - scaledWidth / 2;
+  const cy = centerY
+    ? toAbsolute(centerY, canvasHeight) - scaledHeight / 2
+    : canvasCenterY - scaledHeight / 2;
+
+  const imgX = x === undefined ? cx : toAbsolute(x, canvasWidth);
+  const imgY = y === undefined ? cy : toAbsolute(y, canvasHeight);
+  const rect = {
+    x: imgX,
+    y: imgY,
+    width: unscaled ? img.width : scaledWidth,
+    height: unscaled ? img.height : scaledHeight,
+  };
+  if (onClickHandler) {
+    dim.registerClickHandler(transformedBounds(rect, Number(rotate), Number(scale)), onClickHandler);
+  }
+  ctx.save();
+  if (opacity !== undefined) {
+    ctx.globalAlpha = opacity;
+  }
+  if (rotate || scale !== 1) {
+    // Turned (in degrees) and scaled about the image's own centre, so that
+    // animating either leaves the image where it is.
+    ctx.translate(rect.x + rect.width / 2, rect.y + rect.height / 2);
+    ctx.rotate((Number(rotate) * Math.PI) / 180);
+    ctx.scale(Number(scale), Number(scale));
+    ctx.drawImage(img, -rect.width / 2, -rect.height / 2, rect.width, rect.height);
+  } else {
+    ctx.drawImage(img, rect.x, rect.y, rect.width, rect.height);
+  }
+  ctx.restore();
+}
+
+export function drawVideo(ctx: CanvasRenderingContext2D, data: any): void {
+  const {
+    x = 0,
+    y = 0,
+    width = 100,
+    height = 100,
+    fps = 10,
+    looped = false,
+    data: blob,
+  } = data;
+  const video = document.createElement("video");
+  if (looped) {
+    video.setAttribute("loop", "");
+  }
+  const url = createObjectURL(blob);
+  if (url) {
+    video.src = url;
+  }
+
+  const looper = () => {
+    if (video && !video.paused && !video.ended) {
+      ctx.drawImage(video, x, y, width, height);
+    }
+    setTimeout(looper, 1000 / fps);
+  };
+  video.addEventListener("loadeddata", () => {
+    if (video.src && video.src !== url) {
+      revokeObjectURL(video.src); // cleanup the old
+    }
+    video.play();
+    setImmediate(looper);
+  });
+}
+
+export function drawArray(
+  ctx: CanvasRenderingContext2D,
+  params: any,
+  dim: Pick<DrawContext, "width" | "height">,
+): void {
+  const { data }: { data: Array<number> } = params;
+  const n = data.length;
+
+  const min = minArrayElem(data);
+  const max = maxArrayElem(data);
+
+  const halfHeight = dim.height / 2;
+
+  const binWidth = dim.width / n;
+  ctx.strokeStyle = `gray`;
+  for (let i = 0; i < n; ++i) {
+    const v = data[i];
+    ctx.beginPath();
+    ctx.moveTo(i * binWidth, halfHeight);
+    if (v > 0) {
+      ctx.lineTo(i * binWidth, halfHeight - halfHeight * (v / max));
+    } else {
+      ctx.lineTo(i * binWidth, halfHeight + halfHeight * (v / min));
+    }
+    ctx.stroke();
+  }
+}
+
+export function drawArray2d(
+  ctx: CanvasRenderingContext2D,
+  params: any,
+  dim: Pick<DrawContext, "width" | "height">,
+): void {
+  const { data, cols: nCols, rows: nRows } = params;
+  const n = Math.min(data.length, nRows * nCols);
+
+  const normaliseValues = false;
+  const slice: Array<number> = data.slice(0, n);
+  const min = normaliseValues ? minArrayElem(slice) : undefined;
+  const max = normaliseValues ? maxArrayElem(slice) : undefined;
+  const range =
+    normaliseValues && max !== undefined && min !== undefined
+      ? max - min
+      : undefined;
+
+  const cellWidth = dim.width / nCols;
+  const cellHeight = dim.height / nRows;
+  for (let i = 0; i < n; ++i) {
+    const value = data[i];
+    const valueHex = value.toString(16);
+    const row = Math.floor(i / nCols);
+    const col = i % nCols;
+    if (normaliseValues) {
+      ctx.fillStyle =
+        range && min !== undefined
+          ? `rgb(${((value - min) / range) * 255}, 0, 0)`
+          : "";
+      ctx.strokeStyle =
+        range && min !== undefined
+          ? `rgb(${((value - min) / range) * 255}, 0, 0)`
+          : "";
+    } else {
+      ctx.fillStyle = `#${valueHex}${valueHex}${valueHex}`;
+      ctx.strokeStyle = `#${valueHex}${valueHex}${valueHex}`;
+    }
+    const x = col * cellWidth;
+    const y = row * cellHeight;
+    ctx.beginPath();
+    ctx.rect(x, y, cellWidth, cellHeight);
+    ctx.stroke();
+    ctx.fillRect(x, y, cellWidth, cellHeight);
+  }
+}
+
+export function drawExplainer(
+  ctx: CanvasRenderingContext2D,
+  data: any,
+  dim: DrawContext,
+): void {
+  const {
+    pointer = { x: "50%", y: "50%", length: "1%" },
+    text,
+    font,
+    color,
+    textTransform,
+    direction = "left-to-right",
+  } = data;
+  const ltr = direction === "left-to-right";
+  const { width: canvasWidth, height: canvasHeight } = dim;
+
+  const pointerX = toAbsolute(pointer.x, canvasWidth);
+  const pointerY = toAbsolute(pointer.y, canvasHeight);
+  const pointerLength = toAbsolute(pointer.length, canvasWidth);
+
+  const strokeDestX = ltr
+    ? pointerX + pointerLength
+    : pointerX - pointerLength;
+  const strokeDestY = ltr
+    ? pointerY + pointerLength
+    : pointerY - pointerLength;
+
+  ctx.strokeStyle = color || "#ff0000";
+  ctx.beginPath();
+  ctx.moveTo(pointerX, pointerY);
+  ctx.lineTo(strokeDestX, strokeDestY);
+  ctx.stroke();
+
+  const l = 100;
+  const destX = ltr ? strokeDestX + l : strokeDestX - l;
+  const destY = strokeDestY;
+  ctx.beginPath();
+  ctx.moveTo(strokeDestX, strokeDestY);
+  ctx.lineTo(destX, destY);
+  ctx.stroke();
+
+  const textData = {
+    text,
+    font,
+    x: destX + 10,
+    y: destY - 10,
+    textTransform,
+    color,
+  };
+  if (ltr) {
+    textData.x -= pointerLength;
+  } else {
+    textData.x -= pointerLength * 1.5; // TODO: HACK the text width is not taken into consideration
+  }
+  drawText(ctx, textData, dim);
+}
+
+export async function update(
+  canvas: HTMLCanvasElement,
+  objectOrArray: any,
+  clearOnRedraw: boolean,
+  imageCache: Record<string, HTMLImageElement>,
+  registerClickHandler: DrawContext["registerClickHandler"],
+): Promise<void> {
+  if (!canvas || !objectOrArray) {
+    // nothing to render, or nowhere to render to
+    return;
+  }
+
+  // Nested lists are drawn as one, in order: several pipelines answering
+  // together (e.g. Tracks) answer with a list of their lists.
+  const dataArray = Array.isArray(objectOrArray)
+    ? objectOrArray.flat(Infinity)
+    : ArrayBuffer.isView(objectOrArray)
+      ? objectOrArray
+      : [objectOrArray];
+  const ctx = canvas.getContext("2d");
+  if (!ctx) {
+    return;
+  }
+
+  const dim: DrawContext = {
+    width: canvas.width,
+    height: canvas.height,
+    imageCache,
+    registerClickHandler,
+  };
+
+  if (clearOnRedraw) {
+    ctx.fillStyle = "#FFF";
+    ctx.strokeStyle = "#FFF";
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+  }
+
+  for (const data of dataArray as any) {
+    // TODO: any
+    if (data) {
+      switch (data.type) {
+        case "image":
+          await drawImage(ctx, data, dim);
+          break;
+        case "text":
+          drawText(ctx, data, dim);
+          break;
+        case "circle":
+          drawCircle(ctx, data, dim);
+          break;
+        case "rect":
+        case "square":
+          drawRect(ctx, data, dim);
+          break;
+        case "video":
+          drawVideo(ctx, data);
+          break;
+        case "explainer":
+          drawExplainer(ctx, data, dim);
+          break;
+        case "array2d":
+          drawArray2d(ctx, data, dim);
+          break;
+        case "array":
+          drawArray(ctx, data, dim);
+          break;
+        default:
+          break;
+      }
+    }
+  }
+}

package/bundle/hkp-frontend/src/runtime/browser/services/CanvasUI/canvasUtils.ts

@@ -0,0 +1,39 @@
+export function toAbsolute(
+  value: string | number | undefined,
+  upper: number,
+): number {
+  if (value === undefined || upper === undefined) {
+    return 0;
+  }
+  if (typeof value === "string") {
+    const components = value.split("%");
+    if (components.length > 1) {
+      return (Number(components[0]) / 100) * upper;
+    }
+  }
+  return Number(value);
+}
+
+export function applyTextTransform(input: string, operation: string): string {
+  switch (operation) {
+    case "lowercase":
+      return input.toLowerCase();
+    case "lowercase-spacing-1":
+      return input.toLowerCase().split("").join(" ");
+    case "uppercase":
+      return input.toUpperCase();
+    case "uppercase-spacing-1":
+      return input.toUpperCase().split("").join(" ");
+    default:
+      console.warn(`Unknown transform operation: ${operation}`);
+      return input;
+  }
+}
+
+export function maxArrayElem<T>(arr: Array<T>): T {
+  return arr.reduce((max, cur) => (cur > max ? cur : max), arr[0]);
+}
+
+export function minArrayElem<T>(arr: Array<T>): T {
+  return arr.reduce((min, cur) => (cur < min ? cur : min), arr[0]);
+}