i don't even know anymore

src/lib/ui/Dimensions.hx

@@ -0,0 +1,8 @@
+package lib.ui;
+
+typedef Dimensions = {
+	public var ?top:Int;
+	public var ?bottom:Int;
+	public var ?left:Int;
+	public var ?right:Int;
+}

src/lib/ui/reactive/TextElement.hx

@@ -1,40 +1,77 @@
 package lib.ui.reactive;
 
+import lib.ui.Dimensions;
+import util.ObjMerge;
 import util.Pos;
 import util.Observable;
-using tink.CoreApi;
-
 import util.Color;
 import util.Vec.Vec2;
-import util.MathI;
+
+using tink.CoreApi;
+
+typedef TextElementArgs = {
+	public var ?text:Observable<String>;
+	public var ?simpleText: String;
+	public var ?bg:Color;
+	public var ?fg:Color;
+	public var ?padding: Dimensions;
+	public var ?margin: Dimensions;
+}
 
 class TextElement extends UIElement {
-	private final text:Observable<String>;
-	private final bg:Color;
-	private final fg:Color;
+	private var args:TextElementArgs;
 
-	public function new(text:Observable<String>, ?background:Color = Black, ?textColor:Color = White, events: UIEvents = null) {
+	public function new(args: TextElementArgs,events: UIEvents = null) {
 		super(events);
+		this.args = args;
 
-		this.text = text;
-		this.bg = background;
-		this.fg = textColor;
+		if (args.text != null) {
+			args.text.subscribe(value -> {
+				this.changedTrigger.trigger(null);
+			});
+		}else if (args.simpleText == null) {
+			throw new Error("text or simpleText must be set");
+		}
+	}
 
-		this.text.subscribe(value -> {
-			this.changedTrigger.trigger(null);
-		});
+	private function getText() {
+		if (args.text != null) {
+			return args.text.get();
+		} else {
+			return args.simpleText;
+		}
 	}
 
 	public function render(bounds:Vec2<Int>,offset: Pos):Canvas {
 		var rtn = new Canvas();
 
-		for (i in 0...MathI.min(Math.floor(text.get().length / bounds.x) + 1, bounds.y)) {
-			var line = (text.get().substr(i * bounds.x, bounds.x));
-			for (char in 0...line.length) {
-				rtn.set({x: char, y: i}, {textColor: fg, char: line.charAt(char), bg: bg});
+		var fullText = getText();
+
+		var writePoint: Pos = {x: 0,y: 0};
+
+		for (pos in 0...fullText.length) {
+			var char = fullText.charAt(pos);
+
+			if (char == "\n"){
+				writePoint = {x: 0, y: writePoint.y + 1};
+				continue;
 			}
+
+			if (writePoint.y >= bounds.y) {
+				break;
+			}
+
+			if (writePoint.x >= bounds.x) {
+				writePoint = {x: 0, y: writePoint.y + 1};
+			}
+
+			rtn.set(writePoint, {char: char,textColor: this.args.fg, bg: this.args.bg});
+
+			writePoint = {x: writePoint.x + 1, y: writePoint.y};
 		}
 
-		return rtn;
+
+
+		return UIElement.applyPaddignAndMargin(rtn, this.args.padding, this.args.margin);
 	}
 }

src/lib/ui/reactive/TurtleController.hx

@@ -0,0 +1,62 @@
+package lib.ui.reactive;
+
+import util.Debug;
+import util.Vec.Vec2;
+import util.Pos;
+
+class TurtleController extends UIElement {
+
+	public function new() {
+		super();
+	}
+
+	private function addButton(label:String): Canvas {
+		var txt = new TextElement({simpleText: '$label', fg: Red,bg: Orange});
+		return txt.render({x:3,y:3},{x:0,y:0});
+	}
+
+	public function render(bounds:Vec2<Int>, offset:Pos):Canvas {
+		var canvas: Canvas = new Canvas();
+
+		canvas.combine(addButton("F"),{x:1,y:1});
+		canvas.combine(addButton("F"),{x:5,y:2});
+
+		Debug.printCanvasToConsole(canvas);
+
+		return canvas;
+
+	}
+}
+
+// var innerText = switch (sqr) {
+// 	case 0: "D";
+// 	case 1: "F";
+// 	case 2: "U";
+// 	case 3: "L";
+// 	case 4: "B";
+// 	case 5: "R";
+// 	case 6: "D";
+// 	case 7: "D";
+// 	case 8: "D";
+// 	default: "?";
+// };
+
+			// canvas.set({x: offsetX + 0, y: offsetY + 0}, {char: borderChar,bg: bgColor,textColor: textColor});
+			// canvas.set({x: offsetX + 1, y: offsetY + 0}, {char: borderChar,bg: bgColor,textColor: textColor});
+			// canvas.set({x: offsetX + 2, y: offsetY + 0}, {char: borderChar,bg: bgColor,textColor: textColor});
+			// canvas.set({x: offsetX + 3, y: offsetY + 0}, {char: " ",bg: spaceColor,textColor: textColor});
+
+			// canvas.set({x: offsetX + 0, y: offsetY + 1}, {char: borderChar,bg: bgColor,textColor: textColor});
+			// canvas.set({x: offsetX + 1, y: offsetY + 1}, {char: innerText,bg: bgColor,textColor: textColor});
+			// canvas.set({x: offsetX + 2, y: offsetY + 1}, {char: borderChar,bg: bgColor,textColor: textColor});
+			// canvas.set({x: offsetX + 3, y: offsetY + 1}, {char: " ",bg: spaceColor,textColor: textColor});
+
+			// canvas.set({x: offsetX + 0, y: offsetY + 2}, {char: borderChar,bg: bgColor,textColor: textColor});
+			// canvas.set({x: offsetX + 1, y: offsetY + 2}, {char: borderChar,bg: bgColor,textColor: textColor});
+			// canvas.set({x: offsetX + 2, y: offsetY + 2}, {char: borderChar,bg: bgColor,textColor: textColor});
+			// canvas.set({x: offsetX + 3, y: offsetY + 2}, {char: " ",bg: spaceColor,textColor: textColor});
+
+			// canvas.set({x: offsetX + 0, y: offsetY + 3}, {char: " ",bg: spaceColor,textColor: textColor});
+			// canvas.set({x: offsetX + 1, y: offsetY + 3}, {char: " ",bg: spaceColor,textColor: textColor});
+			// canvas.set({x: offsetX + 2, y: offsetY + 3}, {char: " ",bg: spaceColor,textColor: textColor});
+			// canvas.set({x: offsetX + 3, y: offsetY + 3}, {char: " ",bg: spaceColor,textColor: textColor});

src/lib/ui/reactive/UIElement.hx

@@ -1,5 +1,6 @@
 package lib.ui.reactive;
 
+import util.ObjMerge;
 import util.Pos;
 import util.Rect;
 import util.Vec.Vec2;
@@ -33,4 +34,14 @@ abstract class UIElement {
 
 		return null;
 	};
+
+	public static function applyPaddignAndMargin(canvas:Canvas,padding: Dimensions, margin: Dimensions):Canvas{
+		var passing = ObjMerge.merge(padding, {top: 0, left: 0, bottom: 0, right: 0});
+		var margin = ObjMerge.merge(margin, {top: 0, left: 0, bottom: 0, right: 0});
+		var rtn = new Canvas();
+
+		rtn.combine(canvas,{x:margin.left + padding.left,y: margin.top + padding.top});
+
+		return rtn;
+	}
 }