refactor: cleanup and simplify a lot of logic related to blocks (#3)

This PR streamlines `Block`-related logic making it much easier to understand and to work with. Additionally it fixes some issues with render logic.
tui-js · Sep 21, 2024 · c5fbaae · c5fbaae
2 parents 20ef743 + d02025a
commit c5fbaae
Show file tree

Hide file tree

Showing 22 changed files with 541 additions and 393 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,2 +1,3 @@
 ~*
-.vscode/
+.vscode/
+.DS_Store
diff --git a/deno.jsonc b/deno.jsonc
@@ -19,8 +19,8 @@
     "@tui/signals": "jsr:@tui/signals@^0",
     // tests
     "@std/assert": "jsr:@std/assert@^0.218",
-    "@crayon/crayon": "jsr:@crayon/crayon@4.0.0-alpha.3",
-    "@crayon/literal": "jsr:@crayon/literal@1.0.0-alpha.2"
+    "@crayon/crayon": "jsr:@crayon/crayon@4.0.0-alpha.4",
+    "@crayon/literal": "jsr:@crayon/literal@1.0.0-alpha.4"
   },
   "fmt": {
     "lineWidth": 120

diff --git a/deno.lock b/deno.lock
diff --git a/examples/demo.ts b/examples/demo.ts
@@ -1,16 +1,18 @@
 // Copyright 2024 Im-Beast. All rights reserved. MIT license.
-import crayon from "@crayon/crayon";
+import { crayon } from "@crayon/crayon";
 import { Style } from "../src/style_block.ts";
 import { VerticalBlock } from "../src/layout/vertical_block.ts";
 import { HorizontalBlock } from "../src/layout/horizontal_block.ts";
 import { calc } from "../src/unit.ts";
+import { OverlayBlock } from "../src/layout/mod.ts";
 
 let h = 1;
 const color = () => crayon.bgHsl(((++h) * 40) % 360, 60, 40);
 
 const style = new Style({
   string: crayon.bgMagenta,
   text: {
+    overflow: "ellipsis",
     horizontalAlign: "center",
   },
   padding: { all: 1 },
@@ -33,76 +35,81 @@ const style2 = style.derive({
 export function render() {
   const start = performance.now();
 
-  const root = new HorizontalBlock(
-    {
-      string: crayon.bgBlack,
-      width: "100%",
-      height: "80%",
+  const root = new OverlayBlock({
+    bg: new HorizontalBlock(
+      {
+        string: crayon.bgBlack,
+        width: "100%",
+        height: "80%",
 
-      gap: 2,
+        gap: 2,
 
-      x: "50%",
-      y: "50%",
-    },
-    new VerticalBlock(
-      { width: calc("50% - 1"), gap: 2, string: crayon.bgLightBlack, x: "50%" },
-      style.create(
-        "Nice 🔥\n（╯°□°）╯︵┻━┻\ndevanagari आआॠऋॲपॉ\nﾊﾊﾊThis text should get wrapped because widthəəə is explicit as日本verylongstringthaəə💩twillwrapnomatterwhat\nwowə\nلعربيةا",
-        { string: color() },
-      ),
-      new HorizontalBlock(
-        { gap: 2, string: color(), y: "50%" },
+        x: "50%",
+        y: "50%",
+      },
+      new VerticalBlock(
+        { width: calc("50% - 1"), gap: 2, string: crayon.bgLightBlack, x: "50%" },
         style.create(
-          "This gets justified\nAlone\none two three four five six\nlonger words come here\nbig spacing now",
-          {
+          "Nice 🔥\n（╯°□°）╯︵┻━┻\ndevanagari आआॠऋॲपॉ\nﾊﾊﾊThis text should get wrapped because widthəəə is explicit as日本verylongstringthaəə💩twillwrapnomatterwhat\nwowə\nلعربيةا",
+          { height: 15, string: color() },
+        ),
+        new HorizontalBlock(
+          { gap: 2, string: color(), y: "50%" },
+          style.create(
+            "This gets justified\nAlone\none two three four five six\nlonger words come here\nbig spacing now",
+            {
+              string: color(),
+              text: { horizontalAlign: "justify" },
+            },
+          ),
+          style2.create("ISBN: 978-0-1234-5678-7\n\nCSS: הרפתקה חדשה!", {
             string: color(),
-            text: { horizontalAlign: "justify" },
-          },
+          }),
+          style2.create("ISBN: 978-0-1234-5678-7\n\nCSS: הרפתקה חדשה!", {
+            string: color(),
+            text: { overflow: "clip" },
+          }),
+          style2.create("ISBN: 978-0-1234-5678-7\n\nCSS: הרפתקה חדשה!", {
+            string: color(),
+            text: { ellipsisString: "..." },
+          }),
         ),
-        style2.create("ISBN: 978-0-1234-5678-7\n\nCSS: הרפתקה חדשה!", {
-          string: color(),
-        }),
-        style2.create("ISBN: 978-0-1234-5678-7\n\nCSS: הרפתקה חדשה!", {
-          string: color(),
-          text: { overflow: "clip" },
-        }),
-        style2.create("ISBN: 978-0-1234-5678-7\n\nCSS: הרפתקה חדשה!", {
-          string: color(),
-          text: { ellipsisString: "..." },
-        }),
       ),
-    ),
-    new VerticalBlock(
-      {
-        width: calc("50% - 1"),
-        height: "100%",
-        string: crayon.bgBlack,
-        gap: 1,
-      },
       new VerticalBlock(
-        { width: "100%", height: "50%", string: color() },
-        style.create("Second column", { string: color() }),
-        style.create("Test 2", { string: color() }),
-      ),
-      new HorizontalBlock(
         {
-          width: "100%",
-          height: calc("50% - 2"),
-          string: color(),
-          gap: 4,
-          x: "50%",
-          y: "50%",
-        },
-        style.create("Test 3", { string: color(), width: calc("33.3% - 4%") }),
-        style.create("Test 4", { string: color(), width: calc("33.3% - 4%") }),
-        style.create("Test 5", {
-          string: color(),
-          width: calc("33.3% - 4%"),
+          width: calc("50% - 1"),
           height: "100%",
-        }),
+          string: crayon.bgBlack,
+          gap: 1,
+        },
+        new VerticalBlock(
+          { width: "100%", height: "50%", string: color() },
+          style.create("Second column", { string: color() }),
+          style.create("Test 2", { string: color() }),
+        ),
+        new HorizontalBlock(
+          {
+            width: "100%",
+            height: calc("50% - 2"),
+            string: color(),
+            gap: 4,
+            x: "50%",
+            y: "50%",
+          },
+          style.create("Test 3", { string: color(), width: calc("33.3% - 4%") }),
+          style.create("Test 4", { string: color(), width: calc("33.3% - 4%") }),
+          style.create("Test 5", {
+            string: color(),
+            width: calc("33.3% - 4%"),
+            height: "100%",
+          }),
+        ),
       ),
     ),
-  );
+    fg: style.create("Hi"),
+    x: "50%",
+    y: "50%",
+  });
 
   const rendered = root.render();
 

diff --git a/examples/signals.ts b/examples/signals.ts
@@ -1,4 +1,4 @@
-import crayon from "@crayon/crayon";
+import { crayon } from "@crayon/crayon";
 import { computed, signal } from "@tui/signals";
 
 import { HorizontalBlock, Style } from "../mod.ts";