Display/Backend refactor

.gitignore

@@ -2,3 +2,4 @@ node_modules
 .ts.flag
 .idea
 .DS_Store
+*.tsbuildinfo

src/display/backend.ts

@@ -1,18 +1,43 @@
-import { DisplayOptions, DisplayData } from "./types.js";
+import { DEFAULT_HEIGHT, DEFAULT_WIDTH } from "../constants.js";
+import { DisplayOptions, DisplayData, IDisplayBackend, DefaultsFor, Frozen, BaseDisplayOptions } from "./types.js";
 
 /**
  * @class Abstract display backend module
  * @private
  */
-export default abstract class Backend {
-	_options!: DisplayOptions;
+export default abstract class Backend<TOptions extends BaseDisplayOptions = BaseDisplayOptions,
+									  TChar = string, TFGColor = string, TBGColor = string,
+									  TData extends DisplayData<TChar, TFGColor, TBGColor> = DisplayData<TChar, TFGColor, TBGColor>,
+									 >
+							implements IDisplayBackend<TOptions, TData> {
+	protected get DEFAULTS() {
+		return {
+			width: DEFAULT_WIDTH,
+			height: DEFAULT_HEIGHT,
+			layout: "rect",
+			fg: "#ccc",
+			bg: "#000",
+		} satisfies DefaultsFor<BaseDisplayOptions>;
+	}
+	_options!: Frozen<TOptions>;
 
 	getContainer(): HTMLElement | null { return null; }
-	setOptions(options: DisplayOptions) { this._options = options; }
+
+	abstract checkOptions(options: DisplayOptions): options is DisplayOptions & TOptions;
+	setOptions(options: TOptions) {
+		// return true if this change dirties the whole display
+		const { width, height, layout } = this._options ?? {};
+		this._options = this.defaultedOptions(options);
+		return width !== options.width || height !== options.height || layout !== options.layout;
+	}
+	protected abstract defaultedOptions(options: TOptions): Frozen<TOptions>;
+	getOptions(): Frozen<TOptions> {
+		return this._options as Frozen<TOptions>;
+	}
 
 	abstract schedule(cb: ()=>void): void;
 	abstract clear(): void;
-	abstract draw(data: DisplayData, clearBefore: boolean): void;
+	abstract draw(data: TData, clearBefore: boolean): void;
 	abstract computeSize(availWidth: number, availHeight: number): [number, number];
 	abstract computeFontSize(availWidth: number, availHeight: number): number;
 	abstract eventToPosition(x:number, y:number): [number, number];

src/display/canvas.ts

@@ -1,36 +1,40 @@
 import Backend from "./backend.js";
-import { DisplayOptions } from "./types.js";
+import { BaseDisplayOptions, DisplayData, TextDisplayOptions, UnknownBackend, DefaultsFor } from "./types.js";
 
-export default abstract class Canvas extends Backend {
+/**
+ * Base class for any backend that uses a `<canvas>` element as its display surface
+ */
+export abstract class BaseCanvas<TOptions extends BaseDisplayOptions,
+								 TData extends DisplayData = DisplayData<string[], string, string>,
+								 TChar = string[], TFGColor = string, TBGColor = string,
+								>
+						extends Backend<TOptions, TChar, TFGColor, TBGColor, TData extends DisplayData<TChar, TFGColor, TBGColor> ? TData : never> {
 	_ctx: CanvasRenderingContext2D;
 
-	constructor() {
+	constructor(oldBackend?: UnknownBackend) {
 		super();
-		this._ctx = document.createElement("canvas").getContext("2d") as CanvasRenderingContext2D;
+		this._ctx = oldBackend instanceof BaseCanvas ? oldBackend._ctx : document.createElement("canvas").getContext("2d")!;
 	}
 
 	schedule(cb: () => void) { requestAnimationFrame(cb); }
 	getContainer() { return this._ctx.canvas; }
 
-	setOptions(opts: DisplayOptions) {
-		super.setOptions(opts);
+	setOptions(opts: TOptions) {
+		let needsRepaint = super.setOptions(opts);
 
-		const style = (opts.fontStyle ? `${opts.fontStyle} ` : ``);
-		const font = `${style} ${opts.fontSize}px ${opts.fontFamily}`;
-		this._ctx.font = font;
-		this._updateSize();
+		if (needsRepaint) {
+			this._updateSize();
+		}
 
-		this._ctx.font = font;
-		this._ctx.textAlign = "center";
-		this._ctx.textBaseline = "middle";
+		return needsRepaint;
 	}
 
 	clear() {
-		const oldComposite = this._ctx.globalCompositeOperation;
+		this._ctx.save();
 		this._ctx.globalCompositeOperation = "copy"
 		this._ctx.fillStyle = this._options.bg;
 		this._ctx.fillRect(0, 0, this._ctx.canvas.width, this._ctx.canvas.height);
-		this._ctx.globalCompositeOperation = oldComposite;
+		this._ctx.restore();
 	}
 
 	eventToPosition(x: number, y: number): [number, number] {
@@ -50,3 +54,42 @@
 	abstract _normalizedEventToPosition(x: number, y: number): [number, number];
 	abstract _updateSize(): void;
 }
+
+export type CanvasDisplayData = DisplayData<string[], string, string>;
+/**
+ * Base class for text canvases, which can display one or more text characters with a single foreground and a background color in each cell.
+ */
+export default abstract class Canvas<TOptions extends TextDisplayOptions,
+									 TData extends DisplayData = CanvasDisplayData,
+									 TChar = string[], TFGColor = string, TBGColor = string,
+									>
+							extends BaseCanvas<TOptions, TData, TChar, TFGColor, TBGColor> {
+	protected get DEFAULTS() {
+		return {
+			...super.DEFAULTS,
+			fontSize: 15,
+			spacing: 1,
+			border: 0,
+			fontFamily: "monospace",
+			fontStyle: "",
+		} satisfies DefaultsFor<TextDisplayOptions>;
+	}
+	setOptions(opts: TOptions) {
+		const { fontSize, fontFamily, spacing } = this._options;
+		let needsRepaint = super.setOptions(opts) || fontSize !== opts.fontSize || fontFamily !== opts.fontFamily || spacing !== opts.spacing;
+
+		if (needsRepaint) {
+			opts = this._options;
+			const style = (opts.fontStyle ? `${opts.fontStyle} ` : ``);
+			const font = `${style} ${opts.fontSize}px ${opts.fontFamily}`;
+			this._ctx.font = font;
+			this._updateSize();
+
+			this._ctx.font = font;
+			this._ctx.textAlign = "center";
+			this._ctx.textBaseline = "middle";
+		}
+
+		return needsRepaint;
+	}
+}