refactor: alignment to use string literals instead of magic numbers

Author: dreyfus92

examples/inline-regions/index.ts

@@ -89,7 +89,7 @@ function box(msg: string, fg: number, border: number): Op[] {
         height: grow(),
         direction: "ttb",
         padding: { left: 1 },
-        alignY: 2,
+        alignY: "center",
       },
       border: {
         color: border,

examples/keyboard/index.ts

@@ -71,8 +71,8 @@ function key(ops: Op[], k: KeyDef, ctx: AppContext): void {
         width: fixed(w),
         height: grow(),
         padding: { left: 1, right: 1 },
-        alignX: 2,
-        alignY: 2,
+        alignX: "center",
+        alignY: "center",
       },
       bg,
       border: hover
@@ -435,8 +435,8 @@ function keyboard(ctx: AppContext): Op[] {
         width: grow(),
         height: grow(),
         direction: "ttb",
-        alignX: 2,
-        alignY: 2,
+        alignX: "center",
+        alignY: "center",
         padding: { left: 2, top: 1 },
       },
     }),
@@ -453,7 +453,7 @@ function keyboard(ctx: AppContext): Op[] {
       layout: {
         width: grow(),
         direction: "ltr",
-        alignY: 0,
+        alignY: "top",
         padding: { bottom: 1 },
       },
     }),
@@ -504,7 +504,7 @@ function keyboard(ctx: AppContext): Op[] {
 
   // config panel (right)
   ops.push(
-    open("", { layout: { width: grow(), direction: "ltr", alignX: 1 } }),
+    open("", { layout: { width: grow(), direction: "ltr", alignX: "right" } }),
   );
   configPanel(ops, ctx);
   ops.push(close());
@@ -518,7 +518,7 @@ function keyboard(ctx: AppContext): Op[] {
       layout: {
         direction: "ltr",
         gap: 3,
-        alignY: 1,
+        alignY: "bottom",
         padding: { left: 1, right: 1, top: 1, bottom: 1 },
       },
       border: { color: kbColor, left: 1, right: 1, top: 1, bottom: 1 },

ops.ts

@@ -132,7 +132,19 @@ export function pack(
           );
           o += 4;
 
-          view.setUint32(o, (l.alignX ?? 0) | ((l.alignY ?? 0) << 8), true);
+          const alignX = l.alignX === "right"
+            ? 1
+            : l.alignX === "center"
+            ? 2
+            : 0;
+
+          const alignY = l.alignY === "bottom"
+            ? 1
+            : l.alignY === "center"
+            ? 2
+            : 0;
+
+          view.setUint32(o, alignX | (alignY << 8), true);
           o += 4;
         }
 
@@ -271,8 +283,8 @@ export interface OpenElement {
     padding?: { left?: number; right?: number; top?: number; bottom?: number };
     gap?: number;
     direction?: "ltr" | "ttb";
-    alignX?: number;
-    alignY?: number;
+    alignX?: "left" | "center" | "right";
+    alignY?: "top" | "center" | "bottom";
   };
   bg?: number;
   cornerRadius?: { tl?: number; tr?: number; bl?: number; br?: number };

validate.ts

@@ -56,8 +56,20 @@ const Layout = Type.Object({
   direction: Type.Optional(
     Type.Union([Type.Literal("ltr"), Type.Literal("ttb")]),
   ),
-  alignX: Type.Optional(u8),
-  alignY: Type.Optional(u8),
+  alignX: Type.Optional(
+    Type.Union([
+      Type.Literal("left"),
+      Type.Literal("center"),
+      Type.Literal("right"),
+    ]),
+  ),
+  alignY: Type.Optional(
+    Type.Union([
+      Type.Literal("top"),
+      Type.Literal("center"),
+      Type.Literal("bottom"),
+    ]),
+  ),
 });
 
 const CornerRadius = Type.Object({