feat(wip): start reworking Views

Author: Im-Beast

examples/demo.ts

@@ -348,6 +348,7 @@ new Table({
 });
 
 const view = new View({
+  canvas: tui.canvas,
   rectangle: {
     column: 75,
     row: 3,
@@ -456,6 +457,8 @@ new Text({
   rectangle: {
     column: 2,
     row: 13,
+    width: -1,
+    height: -1,
   },
   theme: baseTheme,
   text: "wopa",
@@ -470,7 +473,7 @@ tui.canvas.on("render", () => {
   for (const component of tui.components) {
     if (
       // @ts-expect-error NOFRAME
-      component.view.peek() || component.parent !== tui || component.NOFRAME ||
+      component.view || component.parent !== tui || component.NOFRAME ||
       component === performanceStats
     ) {
       continue;
@@ -501,7 +504,12 @@ let lastRender = 0;
 
 const performanceStats = new Text({
   parent: tui,
-  rectangle: { column: 0, row: 0 },
+  rectangle: {
+    column: 0,
+    row: 0,
+    width: -1,
+    height: -1,
+  },
   theme: baseTheme,
   text: new Computed(() =>
     `\

src/canvas/canvas.ts

@@ -26,7 +26,7 @@ export type CanvasEventMap = {
   render: EmitterEvent<[]>;
 };
 
-interface Drawable {
+export interface Drawable {
   draw(row: number, column: number, data: string): void;
 }
 

src/canvas/painter.ts

@@ -8,15 +8,14 @@ import { View } from "../view.ts";
 import { Signal, SignalOfObject } from "../signals/mod.ts";
 import { signalify } from "../utils/signals.ts";
 import { Subscription } from "../signals/types.ts";
-import { Effect } from "../signals/effect.ts";
 
 export interface PainterOptions {
+  view?: View;
   canvas: Canvas;
 
   omitCells?: number[];
   omitCellsPointer?: number;
 
-  view?: View | Signal<View | undefined>;
   style: Style | SignalOfObject<Style>;
   zIndex: number | Signal<number>;
 }
@@ -36,8 +35,8 @@ export class Painter<Type extends string = string> {
   style: Signal<Style>;
   zIndex: Signal<number>;
 
-  view: Signal<View | undefined>;
-  viewOffset: Offset;
+  view?: View;
+  viewOffset?: Offset;
 
   rectangle!: Signal<Rectangle>;
   previousRectangle?: Rectangle;
@@ -73,7 +72,7 @@ export class Painter<Type extends string = string> {
     this.updated = true;
     this.moved = true;
 
-    this.view = signalify(options.view);
+    this.view = options.view;
     this.zIndex = signalify(options.zIndex);
     this.style = signalify(options.style);
 
@@ -91,38 +90,6 @@ export class Painter<Type extends string = string> {
         updateObjects.push(objectUnder);
       } */
     };
-
-    if (this.view.value) {
-      queueMicrotask(() => {
-        new Effect(() => {
-          const view = this.view.value;
-          // FIXME: they might not get watched if view wasnt set by default
-          if (view) {
-            const viewRectangle = view?.rectangle.value;
-            const offset = view?.offset.value;
-            const _maxOffset = view?.maxOffset.value;
-
-            const rectangle = this.rectangle?.peek();
-            if (!rectangle) return;
-            const { viewOffset } = this;
-
-            rectangle.column += viewRectangle.column - offset.columns - viewOffset.columns;
-            rectangle.row += viewRectangle.row - offset.rows - viewOffset.rows;
-
-            viewOffset.columns = viewRectangle.column - offset.columns;
-            viewOffset.rows = viewRectangle.row - offset.rows;
-          }
-
-          this.updated = false;
-          updateObjects.push(this);
-
-          for (const objectUnder of this.objectsUnder) {
-            objectUnder.updated = false;
-            updateObjects.push(objectUnder);
-          }
-        });
-      });
-    }
   }
 
   draw(): void {
@@ -250,7 +217,7 @@ export class Painter<Type extends string = string> {
       column + width < 0 || row + height < 0;
 
     if (!this.outOfBounds) {
-      const viewRectangle = this.view.peek()?.rectangle?.peek();
+      const viewRectangle = this.view?.rectangle?.peek();
       if (!viewRectangle) return;
 
       if (

src/canvas/painters/box.ts

@@ -60,27 +60,12 @@ export class BoxPainter extends Painter<"box"> {
     new Effect(() => {
       const size = this.canvas.size.value;
       const rectangle = this.rectangle.value;
-      const view = this.view.value;
-      const viewRectangle = view?.rectangle.value;
 
-      let rowStart = rectangle.row;
-      let rowRange = Math.min(rectangle.row + rectangle.height, size.rows);
+      this.#rowStart = rectangle.row;
+      this.#rowRange = Math.min(rectangle.row + rectangle.height, size.rows);
 
-      let columnStart = rectangle.column;
-      let columnRange = Math.min(rectangle.column + rectangle.width, size.columns);
-
-      if (viewRectangle) {
-        rowStart = Math.max(rowStart, viewRectangle.row);
-        columnStart = Math.max(columnStart, viewRectangle.column);
-        rowRange = Math.min(rowRange, viewRectangle.row + viewRectangle.height);
-        columnRange = Math.min(columnRange, viewRectangle.column + viewRectangle.width);
-      }
-
-      this.#rowStart = rowStart;
-      this.#rowRange = rowRange;
-
-      this.#columnStart = columnStart;
-      this.#columnRange = columnRange;
+      this.#columnStart = rectangle.column;
+      this.#columnRange = Math.min(rectangle.column + rectangle.width, size.columns);
     });
   }
 
@@ -95,11 +80,13 @@ export class BoxPainter extends Painter<"box"> {
   }
 
   paint(): void {
-    const { canvas, rerenderCells, omitCells, painted } = this;
+    const { rerenderCells, omitCells, painted } = this;
 
     const rectangle = this.rectangle.peek();
     const filler = this.#filler;
 
+    const drawable = this.view ?? this.canvas;
+
     const rowStart = this.#rowStart;
     const rowRange = this.#rowRange;
 
@@ -123,7 +110,7 @@ export class BoxPainter extends Painter<"box"> {
             continue;
           }
 
-          canvas.draw(row, column, filler);
+          drawable.draw(row, column, filler);
         }
 
         rerenderColumns.clear();
@@ -133,7 +120,7 @@ export class BoxPainter extends Painter<"box"> {
             continue;
           }
 
-          canvas.draw(row, column, filler);
+          drawable.draw(row, column, filler);
         }
       }
     }

src/canvas/painters/text.ts

@@ -156,27 +156,11 @@ export class TextPainter<TextType extends string | string[]> extends Painter<"bo
       this.text.value; // FIXME: this is temporary
       const size = this.canvas.size.value;
       const rectangle = this.rectangle.value;
-      const view = this.view.value;
-      const viewRectangle = view?.rectangle.value;
 
-      let rowStart = rectangle.row;
-      let rowRange = Math.min(rectangle.row + rectangle.height, size.rows);
-
-      let columnStart = rectangle.column;
-      let columnRange = Math.min(rectangle.column + rectangle.width, size.columns);
-
-      if (viewRectangle) {
-        rowStart = Math.max(rowStart, viewRectangle.row);
-        columnStart = Math.max(columnStart, viewRectangle.column);
-        rowRange = Math.min(rowRange, viewRectangle.row + viewRectangle.height);
-        columnRange = Math.min(columnRange, viewRectangle.column + viewRectangle.width);
-      }
-
-      this.#rowStart = rowStart;
-      this.#rowRange = rowRange;
-
-      this.#columnStart = columnStart;
-      this.#columnRange = columnRange;
+      this.#rowStart = rectangle.row;
+      this.#rowRange = Math.min(rectangle.row + rectangle.height, size.rows);
+      this.#columnStart = rectangle.column;
+      this.#columnRange = Math.min(rectangle.column + rectangle.width, size.columns);
 
       this.moved = true;
       this.updated = false;
@@ -247,10 +231,13 @@ export class TextPainter<TextType extends string | string[]> extends Painter<"bo
   }
 
   paint(): void {
-    const { canvas, rerenderCells, omitCells, painted } = this;
+    const { rerenderCells, omitCells, painted } = this;
 
-    const rectangle = this.rectangle.peek();
     const style = this.style.peek();
+    const rectangle = this.rectangle.peek();
+
+    const drawable = this.view ?? this.canvas;
+
     const text = this.#text;
 
     const rowStart = this.#rowStart;
@@ -279,7 +266,7 @@ export class TextPainter<TextType extends string | string[]> extends Painter<"bo
           const char = text[column - columnStart];
           if (!char) continue;
 
-          canvas.draw(row, column, style(char));
+          drawable.draw(row, column, style(char));
         }
 
         rerenderColumns.clear();
@@ -292,7 +279,7 @@ export class TextPainter<TextType extends string | string[]> extends Painter<"bo
           const char = text[column - columnStart];
           if (!char) continue;
 
-          canvas.draw(row, column, style(char));
+          drawable.draw(row, column, style(char));
         }
       }
     } else {
@@ -319,7 +306,7 @@ export class TextPainter<TextType extends string | string[]> extends Painter<"bo
             const char = line[column - columnStart];
             if (!char) continue;
 
-            canvas.draw(row, column, style(char));
+            drawable.draw(row, column, style(char));
           }
 
           rerenderColumns.clear();
@@ -332,7 +319,7 @@ export class TextPainter<TextType extends string | string[]> extends Painter<"bo
             const char = line[column - columnStart];
             if (!char) continue;
 
-            canvas.draw(row, column, style(char));
+            drawable.draw(row, column, style(char));
           }
         }
       }

src/component.ts

@@ -18,7 +18,7 @@ export interface ComponentOptions {
   zIndex: number | Signal<number>;
   visible?: boolean | Signal<boolean>;
   rectangle: Rectangle | SignalOfObject<Rectangle>;
-  view?: View | undefined | SignalOfObject<View | undefined>;
+  view?: View;
 }
 
 /** Type defining last interaction component experienced */
@@ -40,7 +40,7 @@ export class Component extends EventEmitter<
 
   visible: Signal<boolean>;
   state: Signal<ComponentState>;
-  view: Signal<View | undefined>;
+  view?: View;
   zIndex: Signal<number>;
   rectangle: SignalOfObject<Rectangle>;
   style: Signal<Style>;
@@ -73,7 +73,7 @@ export class Component extends EventEmitter<
       method: undefined,
     };
 
-    this.view = signalify(options.view);
+    this.view = options.view;
     this.zIndex = signalify(options.zIndex);
     this.visible = signalify(options.visible ?? true);
     this.rectangle = signalify(options.rectangle, { deepObserve: true, watchObjectIndex: true });

src/view.ts

@@ -1,21 +1,47 @@
 // Copyright 2023 Im-Beast. All rights reserved. MIT license.
-import { Signal, signalify } from "../mod.ts";
+import { Canvas, Signal, signalify } from "../mod.ts";
 import { Offset, Rectangle } from "./types.ts";
+import { Drawable } from "./canvas/canvas.ts";
 
 interface ViewOptions {
+  canvas: Canvas;
   offset?: Offset;
   maxOffset?: Offset;
   rectangle: Rectangle;
 }
 
-export class View {
+export class View implements Drawable {
+  canvas: Signal<Canvas>;
   offset: Signal<Offset>;
   maxOffset: Signal<Offset>;
   rectangle: Signal<Rectangle>;
 
+  #canvas: Canvas;
+  #rectangle: Rectangle;
+
   constructor(options: ViewOptions) {
+    this.canvas = signalify(options.canvas);
     this.rectangle = signalify(options.rectangle, { deepObserve: true });
     this.offset = signalify(options.offset ?? { columns: 0, rows: 0 }, { deepObserve: true });
     this.maxOffset = signalify(options.maxOffset ?? { columns: 0, rows: 0 }, { deepObserve: true });
+
+    this.#canvas = this.canvas.peek();
+    this.canvas.subscribe((canvas) => {
+      this.#canvas = canvas;
+    });
+
+    this.#rectangle = this.rectangle.peek();
+    this.rectangle.subscribe((rectangle) => {
+      this.#rectangle = rectangle;
+    });
+  }
+
+  draw(row: number, column: number, data: string): void {
+    const canvas = this.#canvas;
+    const rectangle = this.#rectangle;
+
+    if (row > rectangle.width || row > rectangle.height) return;
+
+    canvas.draw(row + rectangle.row, column + rectangle.column, data);
   }
 }