make label dynamic

Im-Beast · Nov 11, 2021 · 71a152d · 71a152d
1 parent f149e75
commit 71a152d
Showing 1 changed file with 48 additions and 39 deletions.
diff --git a/src/components/label.ts b/src/components/label.ts
@@ -52,61 +52,70 @@ export function createLabel(
 ) {
   const { row, column, width, height } = options.rectangle;
 
-  const drawFuncs: (() => void)[] = [];
-
+  let drawFuncs: (() => void)[] = [];
+  let lastText = "";
   const label = createComponent(object, {
     name: "label",
     interactive: false,
     ...options,
     draw() {
+      const currentText = typeof options.text === "function"
+        ? options.text()
+        : options.text;
+
+      if (currentText !== lastText) {
+        updateDrawFuncs(currentText);
+        lastText = currentText;
+      }
+
       for (const draw of drawFuncs) {
         draw();
       }
     },
   });
 
-  const text = typeof options.text === "function"
-    ? options.text()
-    : options.text;
+  const updateDrawFuncs = (text: string) => {
+    drawFuncs = [];
 
-  const lines = text.split("\n");
-  for (let [i, line] of lines.entries()) {
-    let textWidth = textPixelWidth(line);
-    while (textWidth > width) {
-      line = line.slice(0, width);
-      textWidth = textPixelWidth(line);
-    }
+    const lines = text.split("\n");
+    for (let [i, line] of lines.entries()) {
+      let textWidth = textPixelWidth(line);
+      while (textWidth > width) {
+        line = line.slice(0, width);
+        textWidth = textPixelWidth(line);
+      }
 
-    let c = column;
-    let r = row;
+      let c = column;
+      let r = row;
 
-    switch (options.textAlign.horizontal) {
-      case "center":
-        c = Math.floor(column + (width / 2 - textWidth / 2));
-        break;
-      case "right":
-        r = column + width;
-        break;
-    }
+      switch (options.textAlign.horizontal) {
+        case "center":
+          c = Math.floor(column + (width / 2 - textWidth / 2));
+          break;
+        case "right":
+          r = column + width;
+          break;
+      }
 
-    switch (options.textAlign.vertical) {
-      case "center":
-        r = Math.floor(row + height / 2 - lines.length / 2);
-        break;
-      case "bottom":
-        r = row + height;
-        break;
-    }
+      switch (options.textAlign.vertical) {
+        case "center":
+          r = Math.floor(row + height / 2 - lines.length / 2);
+          break;
+        case "bottom":
+          r = row + height;
+          break;
+      }
 
-    drawFuncs.push(() =>
-      drawText(object.canvas, {
-        column: c,
-        row: r + i,
-        text: line,
-        styler: getCurrentStyler(label),
-      })
-    );
-  }
+      drawFuncs.push(() =>
+        drawText(object.canvas, {
+          column: c,
+          row: r + i,
+          text: line,
+          styler: getCurrentStyler(label),
+        })
+      );
+    }
+  };
 
   return label;
 }