@pretty-chitty/core 1.1.1

package/src/library/utilities/CanvasStack/CanvasStack.ts

@@ -0,0 +1,191 @@
+import {
+  Texture,
+  UVMapping,
+  ClampToEdgeWrapping,
+  LinearFilter,
+  MeshPhongMaterial,
+  Material,
+  SRGBColorSpace,
+  BufferGeometry,
+} from "three";
+import { IUpdatingCanvas } from "../IUpdatingCanvas";
+import { CanvasOperation } from "./CanvasOperations";
+import { ImageResult, ImageCache } from "./ImageCache";
+import { ThreeDisposer } from "../ThreeDisposer";
+
+export type RenderBounds = {
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+};
+
+type Coord = {
+  x: number;
+  y: number;
+};
+
+let _NOTHING_CANVAS: HTMLCanvasElement | undefined;
+export class CanvasStack implements IUpdatingCanvas {
+  public canvas: HTMLCanvasElement | undefined;
+  private context: CanvasRenderingContext2D | undefined;
+  private _texture?: Texture;
+  private cbs: Array<() => void> = [];
+
+  private loadedUrls = new Set<string>();
+
+  private static imageCache = new ImageCache(50); // 50? Is that good? No idea.
+  private _outlets: { [id: string]: Coord } = {};
+
+  public createdAt = Date.now();
+
+  public get hasBuiltTexture(): boolean {
+    return !!this._texture;
+  }
+
+  onUpdate(cb: () => void): () => void {
+    this.cbs.push(cb);
+    return () => {
+      this.cbs = this.cbs.filter((c) => c !== cb);
+    };
+  }
+
+  /** @internal */
+  loadUrl(url: string): ImageResult | undefined {
+    const result = CanvasStack.imageCache.getImage(url);
+    if (!result.isLoaded.value) {
+      if (!this.loadedUrls.has(url)) {
+        this.loadedUrls.add(url);
+        const unsub = result.isLoaded.on(() => {
+          if (result.isLoaded.value) {
+            unsub();
+            this.render();
+            if (this._texture) {
+              this._texture.needsUpdate = true;
+              CanvasStack.disposer.notifyChange(this._texture.uuid);
+            }
+          }
+        });
+      }
+      return undefined;
+    }
+    return result;
+  }
+
+  /** @internal */
+  render(): void {
+    if (!this.context) {
+      return;
+    }
+
+    this._outlets = {};
+    this.context.clearRect(0, 0, this.width, this.height);
+    this.operation.render(
+      this.context,
+      { x: 0, y: 0, w: this.width, h: this.height },
+      this.loadUrl.bind(this),
+      (id: string, coords: Coord) => {
+        this._outlets[id] = coords;
+      },
+    );
+    this.cbs.forEach((cb) => cb());
+  }
+
+  dispose() {
+    this.cbs = [];
+    this.canvas!.title = `Disposed, mat ${this._material?.uuid} texture ${this._texture?.uuid}`;
+    this.canvas = undefined;
+    this.context = undefined;
+
+    if (this._material) {
+      this._material.dispose();
+      this._material = undefined;
+    }
+    if (this._texture) {
+      this._texture.dispose();
+      this._texture = undefined;
+    }
+  }
+
+  constructor(
+    public width: number,
+    public height: number,
+    public operation: CanvasOperation,
+  ) {
+    this.canvas = document.createElement("canvas");
+    this.canvas.width = width;
+    this.canvas.height = height;
+
+    const context = this.canvas.getContext("2d");
+    if (context === null) {
+      throw "Invalid Context";
+    }
+    this.context = context;
+
+    this.render();
+  }
+
+  get outlets() {
+    return this._outlets;
+  }
+
+  private _material: Material | undefined;
+  get material(): Material {
+    if (!this._material) {
+      this._material = new MeshPhongMaterial({
+        map: this.texture,
+        alphaTest: 0.5,
+      });
+    }
+    return this._material;
+  }
+
+  get texture(): Texture {
+    if (!this.canvas) {
+      throw new Error("CanvasStack has been disposed");
+    }
+
+    if (!this._texture) {
+      this._texture = new Texture(
+        this.canvas,
+        UVMapping,
+        ClampToEdgeWrapping,
+        ClampToEdgeWrapping,
+        LinearFilter,
+        LinearFilter,
+      );
+      this._texture.needsUpdate = true;
+      this._texture.colorSpace = SRGBColorSpace;
+
+      CanvasStack.disposer.register(this._texture.uuid, this);
+    }
+    return this._texture;
+  }
+
+  public static disposer = new ThreeDisposer<CanvasStack>((canvasStack) => {
+    if (canvasStack._material) {
+      canvasStack._material.dispose();
+      canvasStack._material = undefined;
+    }
+    if (canvasStack._texture) {
+      canvasStack._texture.dispose();
+
+      if (!_NOTHING_CANVAS) {
+        _NOTHING_CANVAS = document.createElement("canvas");
+        _NOTHING_CANVAS.width = 1;
+        _NOTHING_CANVAS.height = 1;
+      }
+
+      canvasStack._texture.source.data = _NOTHING_CANVAS; // prevent memory leaks! somehow it holding this reference stops the GC from cleaning anything up
+      canvasStack._texture = undefined;
+    }
+  });
+
+  public static materialDisposer = new ThreeDisposer<Material>((material) => {
+    material.dispose();
+  });
+
+  public static geoDisposer = new ThreeDisposer<BufferGeometry>((geometry) => {
+    geometry.dispose();
+  });
+}

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

@@ -0,0 +1,17 @@
+import React from "react";
+import { ParameterizedCanvas } from "../ParameterizedCanvas";
+import { ImageSpec } from "./CanvasOperations";
+import { Image } from "./ReactCanvas";
+
+export class IconCanvas extends ParameterizedCanvas {
+  width = 50;
+  height = 50;
+
+  constructor(private image: ImageSpec) {
+    super();
+  }
+
+  protected render() {
+    return <Image fill image={this.image} />;
+  }
+}

package/src/library/utilities/CanvasStack/ImageCache.ts

@@ -0,0 +1,38 @@
+import QuickLRU from "quick-lru";
+import { EventChannel } from "../EventChannel";
+
+export class ImageResult {
+  /** @internal */
+  image: HTMLImageElement;
+
+  /** @internal */
+  isLoaded = new EventChannel<boolean>(false);
+
+  constructor(url: string) {
+    this.image = new Image();
+    this.image.crossOrigin = "anonymous";
+    this.image.src = "";
+    this.image.onload = () => {
+      this.isLoaded.value = true;
+    };
+    this.image.src = url;
+  }
+}
+
+export class ImageCache {
+  /** @internal */
+  lru: QuickLRU<string, ImageResult>;
+
+  constructor(maxSize: number) {
+    this.lru = new QuickLRU<string, ImageResult>({ maxSize });
+  }
+
+  getImage(url: string) {
+    let result = this.lru.get(url);
+    if (!result) {
+      result = new ImageResult(url);
+      this.lru.set(url, result);
+    }
+    return result;
+  }
+}

package/src/library/utilities/CanvasStack/ImageColorOverlayer.ts

@@ -0,0 +1,36 @@
+export default function imageColorOverlayer(image: HTMLImageElement, color: string) {
+  if (!image.width && !image.height) {
+    return image;
+  }
+
+  let offCanvas = (image as any).__offCanvas as HTMLCanvasElement;
+  if (!offCanvas) {
+    // --- Offscreen canvas ---
+    offCanvas = document.createElement("canvas");
+    offCanvas.width = image.width;
+    offCanvas.height = image.height;
+    (image as any).__offCanvas = offCanvas;
+  }
+
+  const offCtx = offCanvas.getContext("2d");
+  if (!offCtx) {
+    throw "could not create context";
+  }
+
+  // Clear the context first
+  offCtx.clearRect(0, 0, offCanvas.width, offCanvas.height);
+  // a) Draw the black icon onto the offscreen
+  offCtx.drawImage(image, 0, 0);
+
+  // b) Switch to "source-in"
+  //    which means: keep only the existing pixels (the icon),
+  //    and color them in the new fill style
+  offCtx.globalCompositeOperation = "source-in";
+  offCtx.fillStyle = color;
+  offCtx.fillRect(0, 0, image.width, image.height);
+
+  // c) Reset the offscreen context if you like
+  offCtx.globalCompositeOperation = "source-over";
+
+  return offCanvas;
+}

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

@@ -0,0 +1,17 @@
+import React from "react";
+import { PlayerChit } from "../../game/PlayerChit";
+import { ParameterizedCanvas } from "../ParameterizedCanvas";
+import { Player } from "./ReactCanvas";
+
+export class PlayerCanvas extends ParameterizedCanvas {
+  width = 50;
+  height = 50;
+
+  constructor(private player: PlayerChit) {
+    super();
+  }
+
+  protected render() {
+    return <Player player={this.player} />;
+  }
+}

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

@@ -0,0 +1,293 @@
+import * as Colors from "color";
+import React, { ReactNode, ReactElement } from "react";
+import {
+  CallbackCanvasOperation,
+  CanvasOperation,
+  ColorCanvasOperation,
+  HorizontalStackCanvasOperation,
+  IconMap,
+  ImageCanvasOperation,
+  ImageSpec,
+  LayeredCanvasOperation,
+  MarkdownCanvasOperation,
+  OutletCanvasOperation,
+  PadCanvasOperation,
+  PlayerCanvasOperation,
+  RenderCallback,
+  RoundedRectCanvasOperation,
+  StackItem,
+  TextCanvasOperation,
+  VerticalStackCanvasOperation,
+} from "./CanvasOperations";
+import { PlayerChit } from "../../game/PlayerChit";
+import { RichTextRenderOptionsParameters } from "./RichTextRenderer";
+
+export interface DefaultProps {
+  size?: number;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+function WrappedCanvasOperation({ operation }: { operation: CanvasOperation }): ReactNode {
+  return <></>;
+}
+
+/** @internal */
+export function unwrapCanvasNode(node: ReactNode): CanvasOperation {
+  if (Array.isArray(node)) {
+    return new LayeredCanvasOperation(node.map(unwrapCanvasNode));
+  }
+
+  const reactElement = node as ReactElement;
+  if (reactElement) {
+    if (reactElement.type === WrappedCanvasOperation) {
+      return reactElement.props.operation;
+    }
+
+    if (typeof reactElement.type === "function") {
+      // eslint-disable-next-line no-empty-pattern
+      const Element = reactElement.type as ({}) => ReactNode;
+      if (Element) {
+        const results = Element(reactElement.props);
+        return unwrapCanvasNode(results);
+      }
+    } else if (typeof reactElement.type === "symbol") {
+      return new LayeredCanvasOperation([].concat(reactElement.props.children ?? []).map(unwrapCanvasNode));
+    }
+  }
+  return new LayeredCanvasOperation([]);
+}
+function unwrapStackItem(node: ReactNode): StackItem {
+  const reactElement = node as ReactElement;
+  if (reactElement) {
+    const size = reactElement.props?.size;
+    return { size, layer: unwrapCanvasNode(reactElement) };
+  }
+  return { size: 0 };
+}
+
+/**
+ * Renders all children literally on top of each other.
+ * @param args
+ * @returns
+ */
+export function Layered({ children }: { children: ReactNode | ReactNode[] } & DefaultProps): ReactNode {
+  const layers = Array.isArray(children) ? children : [children];
+  return <WrappedCanvasOperation operation={new LayeredCanvasOperation(layers.map(unwrapCanvasNode))} />;
+}
+
+/**
+ * A spacer is useful for Horizontal or Vertical stacks and when you want gaps in rendering
+ * @param args
+ * @returns
+ */
+// eslint-disable-next-line no-empty-pattern
+export function Spacer({}: DefaultProps): ReactNode {
+  return <></>;
+}
+
+/**
+ * Creates a named outlet for a region on the canvas
+ * @param args
+ * @returns
+ */
+export function Outlet({ name, children }: { name: string; children: ReactNode } & DefaultProps): ReactNode {
+  return <WrappedCanvasOperation operation={new OutletCanvasOperation(name, unwrapCanvasNode(children))} />;
+}
+
+/**
+ * Pads the render context, either by "amount" or by whatever top/left/right/bottom amount you set
+ * @param args
+ * @returns
+ */
+export function Pad({
+  amount,
+  left,
+  top,
+  bottom,
+  right,
+  children,
+}: {
+  amount?: number;
+  left?: number;
+  top?: number;
+  bottom?: number;
+  right?: number;
+  children: ReactNode;
+} & DefaultProps): ReactNode {
+  return (
+    <WrappedCanvasOperation
+      operation={
+        new PadCanvasOperation(
+          {
+            top: top ?? amount,
+            left: left ?? amount,
+            right: right ?? amount,
+            bottom: bottom ?? amount,
+          },
+          unwrapCanvasNode(children),
+        )
+      }
+    />
+  );
+}
+
+/**
+ * Fills the render context with a solid color
+ * @param args
+ * @returns
+ */
+export function Color({ hex, val }: { hex?: string; val?: number } & DefaultProps): ReactNode {
+  return <WrappedCanvasOperation operation={new ColorCanvasOperation(hex ? hex : Colors.default(val).hex())} />;
+}
+
+/**
+ * Creates a vertical stack of elements.  Any elements with defined sizes will be that tall.
+ * The remaining elements will fill the remaining space equally
+ * @param args
+ * @returns
+ */
+export function Vertical({ children }: { children: ReactNode[] | ReactNode } & DefaultProps): ReactNode {
+  return (
+    <WrappedCanvasOperation
+      operation={
+        new VerticalStackCanvasOperation((Array.isArray(children) ? children : [children]).flat().map(unwrapStackItem))
+      }
+    />
+  );
+}
+
+/**
+ * Creates a horizontal stack of elements.  Any elements with defined sizes will be that wide.
+ * The remaining elements will fill the remaining space equally
+ * @param args
+ * @returns
+ */
+export function Horizontal({ children }: { children: ReactNode[] | ReactNode } & DefaultProps): ReactNode {
+  return (
+    <WrappedCanvasOperation
+      operation={
+        new HorizontalStackCanvasOperation(
+          (Array.isArray(children) ? children : [children]).flat().map(unwrapStackItem),
+        )
+      }
+    />
+  );
+}
+
+/**
+ * Renders an image from a spritemap.  Can either fill the allocated area or fit within it.
+ * @param args
+ * @returns
+ */
+export function Image({
+  image,
+  fill,
+  overlayColor,
+}: { image: ImageSpec; fill?: boolean; overlayColor?: string } & DefaultProps): ReactNode {
+  return <WrappedCanvasOperation operation={new ImageCanvasOperation(image, { fill, overlayColor })} />;
+}
+
+/**
+ * Renders a player's image and color
+ * @param args
+ * @returns
+ */
+export function Player({ player }: { player: PlayerChit }) {
+  return <WrappedCanvasOperation operation={new PlayerCanvasOperation(player)} />;
+}
+
+/**
+ * Renders text in an area.  The body of this tag should be the text you want rendered.
+ * @param args
+ * @returns
+ */
+export function Text({
+  children = "",
+  align = "center",
+  fill,
+  stroke,
+  font,
+  offsetX,
+  offsetY,
+  shadowBlur,
+  shadowColor,
+  before,
+  after,
+}: {
+  children?: string | any[] | any;
+  align?: "center" | "left" | "right";
+  fill?: string;
+  stroke?: string;
+  font?: string;
+  shadowBlur?: number;
+  shadowColor?: string;
+  offsetX?: number;
+  offsetY?: number;
+  before?: ReactNode;
+  after?: ReactNode;
+} & DefaultProps): ReactNode {
+  return (
+    <WrappedCanvasOperation
+      operation={
+        new TextCanvasOperation(Array.isArray(children) ? children.join("") : String(children), {
+          align,
+          before: before ? unwrapCanvasNode(before) : undefined,
+          after: after ? unwrapCanvasNode(after) : undefined,
+          offsetX,
+          offsetY,
+          contextOptions: { fillStyle: fill, strokeStyle: stroke, font, shadowBlur, shadowColor },
+        })
+      }
+    />
+  );
+}
+
+/**
+ * Renders text in an area.  The body of this tag should be the text you want rendered.
+ * @param args
+ * @returns
+ */
+export function MultiLineText(
+  params: {
+    children?: string | any[] | any;
+    icons?: IconMap;
+  } & DefaultProps &
+    RichTextRenderOptionsParameters,
+): ReactNode {
+  return (
+    <WrappedCanvasOperation
+      operation={
+        new MarkdownCanvasOperation(
+          Array.isArray(params.children) ? params.children.join("") : String(params.children),
+          params.icons ?? {},
+          params,
+        )
+      }
+    />
+  );
+}
+
+/**
+ * Perform your own canvas rendering operations
+ * @param args
+ * @returns
+ */
+export function Raw({ cb }: { cb: RenderCallback } & DefaultProps): ReactNode {
+  return <WrappedCanvasOperation operation={new CallbackCanvasOperation(cb)} />;
+}
+
+/**
+ * Renders children into a rounded rectangle mask.
+ * @param args
+ * @returns
+ */
+export function RoundedRect({
+  radius,
+  children,
+}: {
+  radius: number;
+  children: ReactNode | ReactNode[];
+} & DefaultProps): ReactNode {
+  const childOps = Array.isArray(children) ? children.map(unwrapCanvasNode) : [unwrapCanvasNode(children)];
+  return <WrappedCanvasOperation operation={new RoundedRectCanvasOperation(childOps, radius)} />;
+}