(WIP) feat!: rework DrawObjects

examples/demo.ts

@@ -19,7 +19,7 @@ import { ProgressBar } from "../src/components/progressbar.ts";
 
 import { Theme } from "../src/theme.ts";
 import { View } from "../src/view.ts";
-import { Component, Rectangle } from "../mod.ts";
+import { Component, HorizontalAlign, Rectangle, VerticalAlign } from "../mod.ts";
 import { TextBox } from "../src/components/textbox.ts";
 import { Computed, Signal } from "../src/signals/mod.ts";
 
@@ -205,8 +205,8 @@ new ProgressBar({
 new Label({
   parent: tui,
   align: {
-    horizontal: "center",
-    vertical: "center",
+    horizontal: HorizontalAlign.Center,
+    vertical: VerticalAlign.Middle,
   },
   rectangle: {
     column: 17,
@@ -303,6 +303,7 @@ new TextBox({
       base: crayon.bgLightBlue,
     },
   },
+  placeholder: "hello\nasdasd\nworld!",
   lineNumbering: true,
   lineHighlighting: true,
   rectangle: {
@@ -443,19 +444,45 @@ const moveButton = new Button({
   zIndex: 2,
 });
 
+const moveButton2 = new Button({
+  parent: tui,
+  rectangle: {
+    column: 2,
+    row: 16,
+    width: 18,
+    height: 2,
+  },
+  label: { text: "ｈｅｌｌｏ\nｔｈｅｒｅ" },
+  theme: {
+    base: crayon.bgGreen,
+    focused: crayon.bgLightGreen,
+    active: crayon.bgMagenta,
+  },
+  zIndex: 2,
+});
+
 moveButton.on("mousePress", (event) => {
   if (!event.drag) return;
   const rectangle = moveButton.rectangle.value;
   rectangle.column += event.movementX;
   rectangle.row += event.movementY;
 });
 
+moveButton2.on("mousePress", (event) => {
+  if (!event.drag) return;
+  const rectangle = moveButton2.rectangle.value;
+  rectangle.column += event.movementX;
+  rectangle.row += event.movementY;
+});
+
 new Text({
   parent: tui,
   view,
   rectangle: {
     column: 2,
     row: 13,
+    width: 0,
+    height: 0,
   },
   theme: baseTheme,
   text: "wopa",
@@ -499,17 +526,16 @@ tui.canvas.on("render", () => {
 const fps = new Signal(60);
 let lastRender = 0;
 
-const performanceStats = new Text({
+const performanceStats = new Label({
   parent: tui,
-  rectangle: { column: 0, row: 0 },
-  theme: baseTheme,
+  rectangle: { column: 0, row: 0, width: 0, height: 0 },
   text: new Computed(() =>
     `\
-FPS: ${fps.value.toFixed(2)}\
- | Components: ${tui.components.size}\
- | Drawn objects: ${tui.canvas.drawnObjects.length}\
+${crayon.bgRed.green(`FPS: ${fps.value.toFixed(2)}`)}\
+ | ${crayon.yellow(`Components: ${tui.components.size}`)}\
+ | Drawn objects: ${tui.canvas.painters.length}\
  | Updated objects: ${tui.canvas.rerenderedObjects}\
- | Press CTRL+F to toggle Frame/Label visibility`
+ | Press ${crayon.lightBlue.bold("CTRL+F")} to toggle Frame/Label visibility`
   ),
   zIndex: 0,
 });

src/canvas/canvas.ts

@@ -8,8 +8,8 @@ import { SortedArray } from "../utils/sorted_array.ts";
 import { rectangleIntersection } from "../utils/numbers.ts";
 
 import type { ConsoleSize, Stdout } from "../types.ts";
-import { DrawObject } from "./draw_object.ts";
-import { Signal, SignalOfObject } from "../signals/mod.ts";
+import { Painter } from "./painter.ts";
+import { Signal } from "../signals/mod.ts";
 import { signalify } from "../utils/signals.ts";
 
 const textEncoder = new TextEncoder();
@@ -18,27 +18,31 @@ const textEncoder = new TextEncoder();
 export interface CanvasOptions {
   /** Stdout to which canvas will render frameBuffer */
   stdout: Stdout;
-  size: ConsoleSize | SignalOfObject<ConsoleSize>;
+  size: ConsoleSize | Signal<ConsoleSize>;
 }
 
 /** Map that contains events that {Canvas} can dispatch */
 export type CanvasEventMap = {
   render: EmitterEvent<[]>;
 };
 
+interface Drawable {
+  draw(row: number, column: number, data: string): void;
+}
+
 /**
  * Object, which stores data about currently rendered objects.
  *
  * It is responsible for outputting to stdout.
  */
-export class Canvas extends EventEmitter<CanvasEventMap> {
+export class Canvas extends EventEmitter<CanvasEventMap> implements Drawable {
   stdout: Stdout;
   size: Signal<ConsoleSize>;
   rerenderedObjects?: number;
-  frameBuffer: (string | Uint8Array)[][];
+  frameBuffer: string[][];
   rerenderQueue: Set<number>[];
-  drawnObjects: SortedArray<DrawObject>;
-  updateObjects: DrawObject[];
+  painters: SortedArray<Painter>;
+  updateObjects: Painter[];
   resizeNeeded: boolean;
 
   constructor(options: CanvasOptions) {
@@ -47,7 +51,7 @@ export class Canvas extends EventEmitter<CanvasEventMap> {
     this.frameBuffer = [];
     this.rerenderQueue = [];
     this.stdout = options.stdout;
-    this.drawnObjects = new SortedArray((a, b) => a.zIndex.peek() - b.zIndex.peek() || a.id - b.id);
+    this.painters = new SortedArray((a, b) => a.zIndex.peek() - b.zIndex.peek() || a.id - b.id);
     this.updateObjects = [];
     this.resizeNeeded = false;
 
@@ -58,20 +62,28 @@ export class Canvas extends EventEmitter<CanvasEventMap> {
     });
   }
 
+  draw(row: number, column: number, data: string): void {
+    this.frameBuffer[row] ??= [];
+    this.rerenderQueue[row] ??= new Set();
+
+    this.frameBuffer[row][column] = data;
+    this.rerenderQueue[row].add(column);
+  }
+
   resize() {
     const { columns, rows } = this.size.peek();
 
-    for (const drawObject of this.drawnObjects) {
+    for (const drawObject of this.painters) {
       const { column, row } = drawObject.rectangle.peek();
       if (column >= columns || row >= rows) continue;
 
-      drawObject.rendered = false;
+      drawObject.painted = false;
       drawObject.updated = false;
       this.updateObjects.push(drawObject);
     }
   }
 
-  updateIntersections(object: DrawObject): void {
+  updateIntersections(object: Painter): void {
     const { omitCells, objectsUnder } = object;
 
     const zIndex = object.zIndex.peek();
@@ -83,7 +95,7 @@ export class Canvas extends EventEmitter<CanvasEventMap> {
 
     objectsUnder.clear();
 
-    for (const object2 of this.drawnObjects) {
+    for (const object2 of this.painters) {
       if (object === object2 || object2.outOfBounds) continue;
 
       const zIndex2 = object2.zIndex.peek();
@@ -99,12 +111,14 @@ export class Canvas extends EventEmitter<CanvasEventMap> {
 
       if (!intersection) continue;
 
+      const rowStart = intersection.row;
       const rowRange = intersection.row + intersection.height;
+      const columnStart = intersection.column;
       const columnRange = intersection.column + intersection.width;
-      for (let row = intersection.row; row < rowRange; ++row) {
+      for (let row = rowStart; row < rowRange; ++row) {
         const omitColumns = omitCells[row] ??= new Set();
 
-        for (let column = intersection.column; column < columnRange; ++column) {
+        for (let column = columnStart; column < columnRange; ++column) {
           omitColumns.add(column);
         }
       }
@@ -130,7 +144,6 @@ export class Canvas extends EventEmitter<CanvasEventMap> {
       if (object.updated) continue;
       object.updated = true;
       ++i;
-      object.update();
 
       object.updateMovement();
       object.updatePreviousRectangle();
@@ -146,12 +159,7 @@ export class Canvas extends EventEmitter<CanvasEventMap> {
         object.moved = false;
       }
 
-      if (object.rendered) {
-        object.rerender();
-      } else {
-        object.render();
-        object.rendered = true;
-      }
+      object.paint();
     }
 
     this.rerenderedObjects = i;
@@ -165,9 +173,10 @@ export class Canvas extends EventEmitter<CanvasEventMap> {
     let lastColumn = -1;
 
     const { rerenderQueue } = this;
-    const size = this.size.peek();
+    const { rows } = this.size.peek();
 
-    for (let row = 0; row < size.rows; ++row) {
+    // TODO: try to attach moveCursor while rendering in Painter instead of there
+    for (let row = 0; row < rows; ++row) {
       const columns = rerenderQueue[row];
       if (!columns?.size) continue;
 

src/canvas/mod.ts

@@ -1,5 +1,5 @@
 // Copyright 2023 Im-Beast. All rights reserved. MIT license.
-export * from "./box.ts";
-export * from "./text.ts";
 export * from "./canvas.ts";
-export * from "./draw_object.ts";
+export * from "./painter.ts";
+
+export * from "./painters/mod.ts";