@pretty-chitty/core 1.1.1

package/src/library/utilities/CanvasStack/CanvasOperations.tsx

@@ -0,0 +1,630 @@
+import * as Colors from "color";
+import { RenderBounds } from "./CanvasStack";
+import { ImageResult } from "./ImageCache";
+import { PlayerChit } from "../../game/PlayerChit";
+import imageColorOverlayer from "./ImageColorOverlayer";
+import { RichTextRenderOptionsParameters, RichTextRenderer } from "./RichTextRenderer";
+
+export type GetImage = (url: string) => ImageResult | undefined;
+export type ReportOutlet = (id: string, coord: { x: number; y: number }) => void;
+
+export abstract class CanvasOperation {
+  abstract render(
+    context: CanvasRenderingContext2D,
+    bounds: RenderBounds,
+    getImage: GetImage,
+    reportOutlet: ReportOutlet,
+  ): void;
+}
+
+export type RenderCallback = (context: CanvasRenderingContext2D, x: number, y: number, w: number, h: number) => void;
+
+export class LayeredCanvasOperation extends CanvasOperation {
+  constructor(private layers: CanvasOperation[]) {
+    super();
+  }
+
+  override render(
+    context: CanvasRenderingContext2D,
+    bounds: RenderBounds,
+    getImage: GetImage,
+    reportOutlet: ReportOutlet,
+  ) {
+    this.layers.forEach((layer) => layer.render(context, { ...bounds }, getImage, reportOutlet));
+  }
+}
+
+export class ColorCanvasOperation extends CanvasOperation {
+  constructor(
+    private color: string,
+    private opacity: number = 1,
+  ) {
+    super();
+  }
+
+  override render(
+    context: CanvasRenderingContext2D,
+    bounds: RenderBounds,
+    _getImage?: GetImage,
+    _reportOutlet?: ReportOutlet,
+  ) {
+    context.fillStyle = this.color;
+    context.globalAlpha = this.opacity;
+    context.fillRect(bounds.x, bounds.y, bounds.w, bounds.h);
+    context.fillStyle = "";
+    context.globalAlpha = 1;
+  }
+}
+
+export interface StackItem {
+  size?: number;
+  layer?: CanvasOperation;
+}
+
+export class VerticalStackCanvasOperation extends CanvasOperation {
+  constructor(private items: Array<StackItem>) {
+    super();
+  }
+
+  override render(
+    context: CanvasRenderingContext2D,
+    bounds: RenderBounds,
+    getImage: GetImage,
+    reportOutlet: ReportOutlet,
+  ) {
+    const items = this.items.filter((item) => item);
+    const totalDefinedSize = items.reduce((total, item) => total + (item.size || 0), 0);
+    const itemsWithoutDefinedSize = items.filter((item) => item.size === undefined);
+    const itemSizeWithoutDefinition = Math.round((bounds.h - totalDefinedSize) / itemsWithoutDefinedSize.length);
+
+    items.forEach((item) => {
+      item.layer?.render(context, { ...bounds, h: item.size ?? itemSizeWithoutDefinition }, getImage, reportOutlet);
+      bounds.y += item.size ?? itemSizeWithoutDefinition;
+    });
+  }
+}
+
+export class HorizontalStackCanvasOperation extends CanvasOperation {
+  constructor(private items: Array<StackItem>) {
+    super();
+  }
+
+  override render(
+    context: CanvasRenderingContext2D,
+    bounds: RenderBounds,
+    getImage: GetImage,
+    reportOutlet: ReportOutlet,
+  ) {
+    const items = this.items.filter((item) => item);
+    const totalDefinedSize = items.reduce((total, item) => total + (item.size || 0), 0);
+    const itemsWithoutDefinedSize = items.filter((item) => item.size === undefined);
+    const itemSizeWithoutDefinition = Math.round((bounds.w - totalDefinedSize) / itemsWithoutDefinedSize.length);
+
+    items.forEach((item) => {
+      item.layer?.render(context, { ...bounds, w: item.size ?? itemSizeWithoutDefinition }, getImage, reportOutlet);
+      bounds.x += item.size ?? itemSizeWithoutDefinition;
+    });
+  }
+}
+
+export class OutletCanvasOperation extends CanvasOperation {
+  constructor(
+    private id: string,
+    private child: CanvasOperation,
+  ) {
+    super();
+  }
+
+  override render(
+    context: CanvasRenderingContext2D,
+    bounds: RenderBounds,
+    getImage: GetImage,
+    reportOutlet: ReportOutlet,
+  ) {
+    reportOutlet(this.id, { x: bounds.x + bounds.w / 2, y: bounds.y + bounds.h / 2 });
+    this.child.render(context, bounds, getImage, reportOutlet);
+  }
+}
+
+export interface PadAmounts {
+  left?: number;
+  right?: number;
+  top?: number;
+  bottom?: number;
+}
+
+export class PadCanvasOperation extends CanvasOperation {
+  constructor(
+    private pads: PadAmounts,
+    private item: CanvasOperation,
+  ) {
+    super();
+  }
+
+  override render(
+    context: CanvasRenderingContext2D,
+    bounds: RenderBounds,
+    getImage: GetImage,
+    reportOutlet: ReportOutlet,
+  ) {
+    this.item.render(
+      context,
+      {
+        x: bounds.x + (this.pads.left ?? 0),
+        y: bounds.y + (this.pads.top ?? 0),
+        w: bounds.w - (this.pads.left ?? 0) - (this.pads.right ?? 0),
+        h: bounds.h - (this.pads.top ?? 0) - (this.pads.bottom ?? 0),
+      },
+      getImage,
+      reportOutlet,
+    );
+  }
+}
+
+export type Alignment = "center" | "left" | "right";
+
+export interface TextOptions {
+  contextOptions?: any;
+  align?: Alignment;
+  offsetX?: number;
+  offsetY?: number;
+  before?: CanvasOperation;
+  after?: CanvasOperation;
+}
+
+export class MarkdownCanvasOperation extends CanvasOperation {
+  constructor(
+    private text: string,
+    private iconMap: IconMap,
+    private params: RichTextRenderOptionsParameters,
+  ) {
+    super();
+  }
+
+  public height = 0;
+  override render(context: CanvasRenderingContext2D, bounds: RenderBounds, getImage: GetImage) {
+    const iconMap: {
+      [iconName: string]: { image: HTMLImageElement; x: number; y: number; width: number; height: number };
+    } = {};
+
+    Object.keys(this.iconMap).forEach((icon) => {
+      const spec = this.iconMap[icon];
+      if ((spec as any as PlayerChit)?.type === "player") {
+        const p = spec as any as PlayerChit;
+        if (p.imageUrl) {
+          const image = getImage(p.imageUrl);
+          if (image) {
+            iconMap[icon] = { image: image.image, x: 0, y: 0, width: image.image.width, height: image.image.height };
+          }
+        }
+      } else {
+        const s = spec as any as ImageSpec;
+        const image = getImage(s.primary.file);
+        if (image) {
+          iconMap[icon] = {
+            image: image.image,
+            x: s.primary.bounds.x,
+            y: s.primary.bounds.y,
+            width: s.primary.bounds.width,
+            height: s.primary.bounds.height,
+          };
+        } else {
+          const micro = getImage(s.micro.file);
+          if (micro) {
+            iconMap[icon] = {
+              image: micro.image,
+              x: s.micro.bounds.x,
+              y: s.micro.bounds.y,
+              width: s.micro.bounds.width,
+              height: s.micro.bounds.height,
+            };
+          }
+        }
+      }
+    });
+
+    const result = new RichTextRenderer().render(context, this.text, {
+      maxWidth: bounds.w,
+      x: bounds.x,
+      y: bounds.y,
+      height: bounds.h,
+      ...this.params,
+      iconMap,
+    });
+    this.height = result.height;
+  }
+}
+
+export class TextCanvasOperation extends CanvasOperation {
+  constructor(
+    private text: string,
+    private options: TextOptions,
+  ) {
+    super();
+  }
+
+  override render(
+    context: CanvasRenderingContext2D,
+    bounds: RenderBounds,
+    getImage: GetImage,
+    reportOutlet: ReportOutlet,
+  ) {
+    const startX = bounds.x,
+      startY = bounds.y;
+
+    if (this.options.contextOptions) {
+      Object.keys(this.options.contextOptions).forEach(
+        // @ts-expect-error -- It's okay
+        (key) => (context[key] = this.options.contextOptions[key]),
+      );
+    }
+
+    const measured = context.measureText(this.text);
+    if (this.options.align === "center") {
+      bounds.x += bounds.w / 2 - measured.width / 2;
+    } else if (this.options.align === "right") {
+      bounds.x += bounds.w - measured.width;
+    }
+
+    bounds.y += bounds.h / 2 + measured.actualBoundingBoxAscent / 2;
+    if (this.options.offsetY) {
+      bounds.y += this.options.offsetY;
+    }
+    if (this.options.offsetX) {
+      bounds.x += this.options.offsetX;
+    }
+
+    if (this.options.contextOptions?.fillStyle) {
+      context.fillText(this.text, bounds.x, bounds.y);
+    }
+    if (this.options.contextOptions?.strokeStyle) {
+      context.strokeText(this.text, bounds.x, bounds.y);
+    }
+
+    // undo our settings
+    if (this.options.contextOptions) {
+      Object.keys(this.options.contextOptions).forEach(
+        // @ts-expect-error -- It's okay
+        (key) => (context[key] = null),
+      );
+    }
+
+    if (this.options.before) {
+      this.options.before.render(
+        context,
+        { x: startX, y: startY, w: bounds.x - startX, h: bounds.h },
+        getImage,
+        reportOutlet,
+      );
+    }
+    if (this.options.after) {
+      this.options.after.render(
+        context,
+        {
+          x: bounds.x + measured.width,
+          y: startY,
+          w: bounds.w - (bounds.x - startX + measured.width),
+          h: bounds.h,
+        },
+        getImage,
+        reportOutlet,
+      );
+    }
+  }
+}
+
+export type Bounds = {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+};
+
+export type ImageFileInfo = {
+  file: string;
+  bounds: Bounds;
+};
+
+export type ImageSpec = {
+  primary: ImageFileInfo;
+  micro: ImageFileInfo;
+} & ImageColorSpec;
+
+export type IconMap = {
+  [iconName: string]: ImageSpec | PlayerChit;
+};
+
+export type ImageColorSpec = {
+  color: number;
+  borderColor: number;
+  borderColors: {
+    top: number;
+    left: number;
+    right: number;
+    bottom: number;
+  };
+};
+
+export interface ImageOptions {
+  fill?: boolean;
+  overlayColor?: string;
+}
+
+export class ImageCanvasOperation extends CanvasOperation {
+  constructor(
+    private imageSpec: ImageSpec,
+    private options: ImageOptions,
+  ) {
+    super();
+  }
+
+  draw(
+    context: CanvasRenderingContext2D,
+    bounds: RenderBounds,
+    sourceImage: HTMLImageElement | string,
+    sourceBounds: Bounds,
+  ) {
+    if (this.options.fill) {
+      return this.drawFill(context, bounds, sourceImage, sourceBounds);
+    }
+
+    let x = bounds.x,
+      y = bounds.y,
+      w = bounds.w,
+      h = bounds.h;
+
+    const targetAspect = w / h,
+      sx = sourceBounds.x,
+      sy = sourceBounds.y,
+      sw = sourceBounds.width,
+      sh = sourceBounds.height,
+      sourceAspect = sw / sh;
+
+    if (targetAspect > sourceAspect) {
+      const newW = h * sourceAspect;
+      x += Math.floor((w - newW) / 2);
+      w = newW;
+    } else {
+      const newH = w / sourceAspect;
+      y += Math.floor((h - newH) / 2);
+      h = newH;
+    }
+
+    if (typeof sourceImage === "string") {
+      context.fillStyle = sourceImage;
+      context.globalAlpha = 1;
+      context.fillRect(x, y, w, h);
+    } else {
+      // Draw the image
+      context.globalAlpha = 1;
+      const source = this.options.overlayColor
+        ? imageColorOverlayer(sourceImage, this.options.overlayColor)
+        : sourceImage;
+      // Round and clamp source rectangle to integer texel coordinates to avoid sampling
+      // pixels from neighboring sprites when the browser does linear filtering.
+      let sxi = Math.floor(sx);
+      let syi = Math.floor(sy);
+      let swi = Math.ceil(sw);
+      let shi = Math.ceil(sh);
+      const maxW = (source as any).width ?? (source as any).naturalWidth ?? 0;
+      const maxH = (source as any).height ?? (source as any).naturalHeight ?? 0;
+      if (sxi < 0) {
+        swi += sxi;
+        sxi = 0;
+      }
+      if (syi < 0) {
+        shi += syi;
+        syi = 0;
+      }
+      if (maxW && sxi + swi > maxW) {
+        swi = Math.max(0, maxW - sxi);
+      }
+      if (maxH && syi + shi > maxH) {
+        shi = Math.max(0, maxH - syi);
+      }
+      // If sw/sh rounded to zero, skip drawing.
+      if (swi > 0 && shi > 0) {
+        context.drawImage(source as any, sxi, syi, swi, shi, x, y, w, h);
+      }
+    }
+  }
+
+  drawFill(
+    context: CanvasRenderingContext2D,
+    bounds: RenderBounds,
+    sourceImage: HTMLImageElement | string,
+    sourceBounds: Bounds,
+  ) {
+    const x = bounds.x,
+      y = bounds.y,
+      w = bounds.w,
+      h = bounds.h;
+
+    const targetAspect = w / h,
+      sourceAspect = sourceBounds.width / sourceBounds.height;
+
+    let sx = sourceBounds.x,
+      sy = sourceBounds.y,
+      sw = sourceBounds.width,
+      sh = sourceBounds.height;
+
+    if (targetAspect > sourceAspect) {
+      // Target is wider than source; adjust source height and y to maintain aspect ratio
+      sh = sw / targetAspect;
+      sy += (sourceBounds.height - sh) / 2; // Center vertically in source
+    } else {
+      // Target is taller than source; adjust source width and x to maintain aspect ratio
+      sw = sh * targetAspect;
+      sx += (sourceBounds.width - sw) / 2; // Center horizontally in source
+    }
+
+    if (typeof sourceImage === "string") {
+      context.fillStyle = sourceImage;
+      context.globalAlpha = 1;
+      context.fillRect(x, y, w, h);
+    } else {
+      context.globalAlpha = 1;
+
+      const source = this.options.overlayColor
+        ? imageColorOverlayer(sourceImage, this.options.overlayColor)
+        : sourceImage;
+      // Round and clamp source rectangle to integer texel coordinates to avoid sampling
+      // pixels from neighboring sprites when the browser does linear filtering.
+      let sxiF = Math.floor(sx);
+      let syiF = Math.floor(sy);
+      let swiF = Math.ceil(sw);
+      let shiF = Math.ceil(sh);
+      const maxWF = (source as any).width ?? (source as any).naturalWidth ?? 0;
+      const maxHF = (source as any).height ?? (source as any).naturalHeight ?? 0;
+      if (sxiF < 0) {
+        swiF += sxiF;
+        sxiF = 0;
+      }
+      if (syiF < 0) {
+        shiF += syiF;
+        syiF = 0;
+      }
+      if (maxWF && sxiF + swiF > maxWF) {
+        swiF = Math.max(0, maxWF - sxiF);
+      }
+      if (maxHF && syiF + shiF > maxHF) {
+        shiF = Math.max(0, maxHF - syiF);
+      }
+      if (swiF > 0 && shiF > 0) {
+        context.drawImage(source as any, sxiF, syiF, swiF, shiF, x, y, w, h);
+      }
+    }
+  }
+
+  override render(
+    context: CanvasRenderingContext2D,
+    bounds: RenderBounds,
+    getImage: GetImage,
+    _reportOutlet: ReportOutlet,
+  ) {
+    const image = getImage(this.imageSpec.primary.file);
+    if (image) {
+      // context.drawImage(image.image, bounds.x, bounds.y);
+      this.draw(context, bounds, image.image, this.imageSpec.primary.bounds);
+    } else {
+      const micro = getImage(this.imageSpec.micro.file);
+      if (micro) {
+        this.draw(context, bounds, micro.image, this.imageSpec.micro.bounds);
+      } else {
+        this.draw(context, bounds, Colors.default(this.imageSpec.color).hex(), this.imageSpec.primary.bounds);
+      }
+    }
+  }
+}
+
+export class PlayerCanvasOperation extends CanvasOperation {
+  constructor(private player: PlayerChit) {
+    super();
+  }
+
+  drawFill(context: CanvasRenderingContext2D, bounds: RenderBounds, sourceImage: HTMLImageElement) {
+    const x = bounds.x,
+      y = bounds.y,
+      w = bounds.w,
+      h = bounds.h;
+
+    const targetAspect = w / h,
+      sourceAspect = sourceImage.width / sourceImage.height;
+
+    let sx = 0,
+      sy = 0,
+      sw = sourceImage.width,
+      sh = sourceImage.height;
+
+    if (targetAspect > sourceAspect) {
+      // Target is wider than source; adjust source height and y to maintain aspect ratio
+      sh = sw / targetAspect;
+      sy += (sourceImage.height - sh) / 2; // Center vertically in source
+    } else {
+      // Target is taller than source; adjust source width and x to maintain aspect ratio
+      sw = sh * targetAspect;
+      sx += (sourceImage.width - sw) / 2; // Center horizontally in source
+    }
+
+    context.globalAlpha = 1;
+    context.drawImage(sourceImage, sx, sy, sw, sh, x, y, w, h);
+  }
+
+  override render(
+    context: CanvasRenderingContext2D,
+    bounds: RenderBounds,
+    getImage: GetImage,
+    _reportOutlet: ReportOutlet,
+  ) {
+    context.fillStyle = this.player.color;
+    context.globalAlpha = 1;
+    context.fillRect(bounds.x, bounds.y, bounds.w, bounds.h);
+
+    if (this.player.imageUrl) {
+      const image = getImage(this.player.imageUrl);
+      if (image) {
+        this.drawFill(context, bounds, image.image);
+      }
+    }
+  }
+}
+
+export class CallbackCanvasOperation extends CanvasOperation {
+  constructor(private cb: RenderCallback) {
+    super();
+  }
+
+  override render(
+    context: CanvasRenderingContext2D,
+    bounds: RenderBounds,
+    _getImage?: GetImage,
+    _reportOutlet?: ReportOutlet,
+  ) {
+    this.cb(context, bounds.x, bounds.y, bounds.w, bounds.h);
+  }
+}
+
+/**
+ * Renders children into a rounded rectangle mask.
+ * Any drawing outside the rounded rect is clipped.
+ */
+export class RoundedRectCanvasOperation extends CanvasOperation {
+  constructor(
+    private children: CanvasOperation[],
+    private radius: number,
+  ) {
+    super();
+  }
+
+  override render(
+    context: CanvasRenderingContext2D,
+    bounds: RenderBounds,
+    getImage: GetImage,
+    reportOutlet: ReportOutlet,
+  ) {
+    context.save();
+
+    // Create rounded rect path
+    const { x, y, w, h } = bounds;
+    const r = Math.max(0, Math.min(this.radius, Math.min(w, h) / 2));
+    context.beginPath();
+    context.moveTo(x + r, y);
+    context.lineTo(x + w - r, y);
+    context.quadraticCurveTo(x + w, y, x + w, y + r);
+    context.lineTo(x + w, y + h - r);
+    context.quadraticCurveTo(x + w, y + h, x + w - r, y + h);
+    context.lineTo(x + r, y + h);
+    context.quadraticCurveTo(x, y + h, x, y + h - r);
+    context.lineTo(x, y + r);
+    context.quadraticCurveTo(x, y, x + r, y);
+    context.closePath();
+    context.clip();
+
+    // Render children
+    for (const child of this.children) {
+      child.render(context, bounds, getImage, reportOutlet);
+    }
+
+    context.restore();
+  }
+}