feat(wip): progress on converting components to use TextPainter

Author: Im-Beast

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: {

src/components/input.ts

@@ -117,6 +117,7 @@ export class Input extends Box {
 
     super(options as ComponentOptions);
 
+    // FIXME: This might be signal
     this.theme.value ??= this.theme;
     this.theme.placeholder ??= this.theme.value;
 

src/components/label.ts

@@ -5,6 +5,7 @@ import { Computed, Signal, SignalOfObject } from "../signals/mod.ts";
 
 import { signalify } from "../utils/signals.ts";
 import { splitToArray } from "../utils/strings.ts";
+import { Rectangle } from "../types.ts";
 
 /**
  * Type that describes position and size of Label
@@ -19,18 +20,32 @@ export type LabelRectangle = {
 
 /** Type that describes text positioning in label */
 export interface LabelAlign {
-  vertical: "top" | "center" | "bottom";
-  horizontal: "left" | "center" | "right";
+  vertical: number;
+  horizontal: number;
 }
 
-export interface LabelOptions extends Omit<ComponentOptions, "rectangle"> {
+export interface LabelOptions<Prepared extends boolean> extends Omit<ComponentOptions, "rectangle"> {
   text: string | Signal<string>;
-  rectangle: LabelRectangle | SignalOfObject<LabelRectangle>;
+  rectangle: Prepared extends true ? (Rectangle | SignalOfObject<Rectangle>)
+    : (LabelRectangle | SignalOfObject<LabelRectangle>);
   align?: LabelAlign | SignalOfObject<LabelAlign>;
   multiCodePointSupport?: boolean | Signal<boolean>;
   overwriteRectangle?: boolean | Signal<boolean>;
 }
 
+export function prepareLabelOptions(options: LabelOptions<false>): LabelOptions<true> {
+  let rectangle = options.rectangle;
+
+  if (rectangle instanceof Signal) {
+    rectangle = rectangle.value;
+  }
+
+  rectangle.width ??= 0;
+  rectangle.height ??= 0;
+
+  return options as unknown as LabelOptions<true>;
+}
+
 /**
  * Component for creating multi-line, non interactive text
  *
@@ -91,15 +106,19 @@ export class Label extends Component {
   overwriteRectangle: Signal<boolean>;
   multiCodePointSupport: Signal<boolean>;
 
-  constructor(options: LabelOptions) {
-    super(options as ComponentOptions);
+  constructor(options: LabelOptions<false>) {
+    super(prepareLabelOptions(options));
 
     this.text = signalify(options.text);
     this.overwriteRectangle = signalify(options.overwriteRectangle ?? false);
     this.multiCodePointSupport = signalify(options.multiCodePointSupport ?? false);
-    this.align = signalify(options.align ?? { vertical: "top", horizontal: "left" }, { deepObserve: true });
-
-    // FIXME: alignment and stuff needs to be reimplemented
+    this.align = signalify(
+      options.align ?? {
+        vertical: 0,
+        horizontal: 0,
+      },
+      { deepObserve: true },
+    );
 
     const textLines: string[] = [];
     this.#textLines = new Computed(() => {
@@ -121,8 +140,8 @@ export class Label extends Component {
       text: this.#textLines,
       overwriteRectangle: this.overwriteRectangle,
       multiCodePointSupport: this.multiCodePointSupport,
-      alignHorizontally: 0.5,
-      alignVertically: 0.5,
+      alignHorizontally: new Computed(() => this.align.value.horizontal),
+      alignVertically: new Computed(() => this.align.value.vertical),
     });
 
     this.drawnObjects.text = text;