@opentui/core 0.1.19-snapshot5-5ed8b651 → 0.1.19

package/index.js

@@ -1,6 +1,7 @@
 // @bun
 import {
   ASCIIFontSelectionHelper,
+  BaseRenderable,
   BorderCharArrays,
   BorderChars,
   CliRenderEvents,
@@ -113,12 +114,11 @@ import {
   strikethrough,
   stringToStyledText,
   t,
-  tn,
   underline,
   white,
   wrapWithDelegates,
   yellow
-} from "./index-grak7z0n.js";
+} from "./index-0h2r5adk.js";
 // src/post/filters.ts
 function applyScanlines(buffer, strength = 0.8, step = 2) {
   const width = buffer.width;
@@ -1444,6 +1444,158 @@ class FrameBufferRenderable extends Renderable {
     super.destroySelf();
   }
 }
+// src/renderables/TextNode.ts
+var BrandedTextNodeRenderable = Symbol.for("@opentui/core/TextNodeRenderable");
+function isTextNodeRenderable(obj) {
+  return !!obj?.[BrandedTextNodeRenderable];
+}
+
+class TextNodeRenderable extends BaseRenderable {
+  [BrandedTextNodeRenderable] = true;
+  fg;
+  bg;
+  attributes;
+  _children = [];
+  parent = null;
+  constructor(options) {
+    super(options);
+    this.fg = options.fg ? parseColor(options.fg) : undefined;
+    this.bg = options.bg ? parseColor(options.bg) : undefined;
+    this.attributes = options.attributes ?? 0;
+  }
+  get children() {
+    return this._children;
+  }
+  set children(children) {
+    this._children = children;
+    this.requestRender();
+  }
+  requestRender() {
+    this.markDirty();
+    this.parent?.requestRender();
+  }
+  add(obj, index) {
+    if (typeof obj === "string") {
+      if (index !== undefined) {
+        this._children.splice(index, 0, obj);
+        this.requestRender();
+        return index;
+      } else {
+        const insertIndex = this._children.length;
+        this._children.push(obj);
+        this.requestRender();
+        return insertIndex;
+      }
+    }
+    if (isTextNodeRenderable(obj)) {
+      if (index !== undefined) {
+        this._children.splice(index, 0, obj);
+        obj.parent = this;
+        this.requestRender();
+        return index;
+      } else {
+        const insertIndex = this._children.length;
+        this._children.push(obj);
+        obj.parent = this;
+        this.requestRender();
+        return insertIndex;
+      }
+    }
+    throw new Error("TextNodeRenderable only accepts strings or other TextNodeRenderable instances");
+  }
+  insertBefore(child, anchorNode) {
+    const anchorIndex = this._children.indexOf(anchorNode);
+    if (anchorIndex === -1) {
+      throw new Error("Anchor node not found in children");
+    }
+    this._children.splice(anchorIndex, 0, child);
+    if (typeof child !== "string") {
+      child.parent = this;
+    }
+    this.requestRender();
+    return this;
+  }
+  remove(child) {
+    const childIndex = this._children.indexOf(child);
+    if (childIndex === -1) {
+      throw new Error("Child not found in children");
+    }
+    this._children.splice(childIndex, 1);
+    if (typeof child !== "string") {
+      child.parent = null;
+    }
+    this.requestRender();
+    return this;
+  }
+  clear() {
+    this._children = [];
+    this.requestRender();
+  }
+  mergeStyles(parentStyle) {
+    return {
+      fg: this.fg ?? parentStyle.fg,
+      bg: this.bg ?? parentStyle.bg,
+      attributes: this.attributes | parentStyle.attributes
+    };
+  }
+  gatherWithInheritedStyle(parentStyle = { fg: undefined, bg: undefined, attributes: 0 }) {
+    const currentStyle = this.mergeStyles(parentStyle);
+    const chunks = [];
+    for (const child of this._children) {
+      if (typeof child === "string") {
+        chunks.push({
+          __isChunk: true,
+          text: child,
+          fg: currentStyle.fg,
+          bg: currentStyle.bg,
+          attributes: currentStyle.attributes
+        });
+      } else {
+        const childChunks = child.gatherWithInheritedStyle(currentStyle);
+        chunks.push(...childChunks);
+      }
+    }
+    this.markClean();
+    return chunks;
+  }
+  static fromString(text, options = {}) {
+    const node = new TextNodeRenderable(options);
+    node.add(text);
+    return node;
+  }
+  static fromNodes(nodes, options = {}) {
+    const node = new TextNodeRenderable(options);
+    for (const childNode of nodes) {
+      node.add(childNode);
+    }
+    return node;
+  }
+  toChunks(parentStyle = { fg: undefined, bg: undefined, attributes: 0 }) {
+    return this.gatherWithInheritedStyle(parentStyle);
+  }
+  getChildren() {
+    return this._children.filter((child) => typeof child !== "string");
+  }
+  getChildrenCount() {
+    return this._children.length;
+  }
+  getRenderable(id) {
+    return this._children.find((child) => typeof child !== "string" && child.id === id);
+  }
+}
+
+class RootTextNodeRenderable extends TextNodeRenderable {
+  ctx;
+  constructor(ctx, options) {
+    super(options);
+    this.ctx = ctx;
+  }
+  requestRender() {
+    this.markDirty();
+    this.ctx.requestRender();
+  }
+}
+
 // src/renderables/Text.ts
 class TextRenderable extends Renderable {
   selectable = true;
@@ -1456,6 +1608,7 @@ class TextRenderable extends Renderable {
   lastLocalSelection = null;
   textBuffer;
   _lineInfo = { lineStarts: [], lineWidths: [] };
+  rootTextNode;
   _defaultOptions = {
     content: "",
     fg: RGBA.fromValues(1, 1, 1, 1),
@@ -1481,15 +1634,41 @@ class TextRenderable extends Renderable {
     this.textBuffer.setDefaultBg(this._defaultBg);
     this.textBuffer.setDefaultAttributes(this._defaultAttributes);
     this.setupMeasureFunc();
-    this.updateTextInfo(styledText);
+    this.rootTextNode = new RootTextNodeRenderable(ctx, {
+      id: `${this.id}-root`,
+      fg: this._defaultFg,
+      bg: this._defaultBg,
+      attributes: this._defaultAttributes
+    });
+    this.updateTextBuffer(styledText);
+    this._text.mount(this);
+    this.updateTextInfo();
+  }
+  updateTextBuffer(styledText) {
+    this.textBuffer.setStyledText(styledText);
+    this.clearChunks(styledText);
   }
+  clearChunks(styledText) {}
   get content() {
     return this._text;
   }
+  get plainText() {
+    return this.textBuffer.getPlainText();
+  }
+  get textLength() {
+    return this.textBuffer.length;
+  }
+  get chunks() {
+    return this._text.chunks;
+  }
   set content(value) {
     const styledText = typeof value === "string" ? stringToStyledText(value) : value;
-    this._text = styledText;
-    this.updateTextInfo(styledText);
+    if (this._text !== styledText) {
+      this._text = styledText;
+      styledText.mount(this);
+      this.updateTextBuffer(styledText);
+      this.updateTextInfo();
+    }
   }
   get fg() {
     return this._defaultFg;
@@ -1564,8 +1743,7 @@ class TextRenderable extends Renderable {
     }
     return this.textBuffer.setLocalSelection(localSelection.anchorX, localSelection.anchorY, localSelection.focusX, localSelection.focusY, this._selectionBg, this._selectionFg);
   }
-  updateTextInfo(styledText) {
-    this.updateTextBuffer(styledText);
+  updateTextInfo() {
     const lineInfo = this.textBuffer.lineInfo;
     this._lineInfo.lineStarts = lineInfo.lineStarts;
     this._lineInfo.lineWidths = lineInfo.lineWidths;
@@ -1601,6 +1779,72 @@ class TextRenderable extends Renderable {
     };
     this.layoutNode.yogaNode.setMeasureFunc(measureFunc);
   }
+  insertChunk(chunk, index) {
+    this.textBuffer.insertChunkGroup(index ?? this.textBuffer.chunkGroupCount, chunk.text, chunk.fg, chunk.bg, chunk.attributes);
+    this.updateTextInfo();
+    this.clearChunks(this._text);
+  }
+  removeChunk(chunk) {
+    const index = this._text.chunks.indexOf(chunk);
+    if (index === -1)
+      return;
+    this.textBuffer.removeChunkGroup(index);
+    this.updateTextInfo();
+    this.clearChunks(this._text);
+  }
+  replaceChunk(chunk, oldChunk) {
+    const index = this._text.chunks.indexOf(oldChunk);
+    if (index === -1)
+      return;
+    this.textBuffer.replaceChunkGroup(index, chunk.text, chunk.fg, chunk.bg, chunk.attributes);
+    this.updateTextInfo();
+    this.clearChunks(this._text);
+  }
+  updateTextFromNodes() {
+    if (this.rootTextNode.isDirty) {
+      const startTime = performance.now();
+      const chunks = this.rootTextNode.gatherWithInheritedStyle({
+        fg: this._defaultFg,
+        bg: this._defaultBg,
+        attributes: this._defaultAttributes
+      });
+      this.textBuffer.setStyledText(new StyledText(chunks));
+      this.updateTextInfo();
+      const endTime = performance.now();
+      console.log(`updateTextFromNodes took ${endTime - startTime}ms`);
+    }
+  }
+  add(obj, index) {
+    if (!isTextNodeRenderable(obj)) {
+      throw new Error("TextRenderable only accepts TextNodeRenderables. Use add() method.");
+    }
+    return this.rootTextNode.add(obj, index);
+  }
+  remove(id) {
+    const child = this.rootTextNode.getRenderable(id);
+    if (child && isTextNodeRenderable(child)) {
+      this.rootTextNode.remove(child);
+    }
+  }
+  insertBefore(obj, anchor) {
+    if (!isTextNodeRenderable(obj)) {
+      throw new Error("TextRenderable insertBefore only accepts TextNodeRenderables");
+    }
+    if (!anchor || !isTextNodeRenderable(anchor)) {
+      throw new Error("Anchor must be a TextNodeRenderable");
+    }
+    this.rootTextNode.insertBefore(obj, anchor);
+    return this.rootTextNode.children.indexOf(obj);
+  }
+  clear() {
+    this.rootTextNode.clear();
+    const emptyStyledText = stringToStyledText("");
+    this._text = emptyStyledText;
+    emptyStyledText.mount(this);
+    this.updateTextBuffer(emptyStyledText);
+    this.updateTextInfo();
+    this.requestRender();
+  }
   shouldStartSelection(x, y) {
     if (!this.selectable)
       return false;
@@ -1626,8 +1870,15 @@ class TextRenderable extends Renderable {
   getSelection() {
     return this.textBuffer.getSelection();
   }
-  updateTextBuffer(styledText) {
-    this.textBuffer.setStyledText(styledText);
+  render(buffer, deltaTime) {
+    if (!this.visible)
+      return;
+    this.onUpdate(deltaTime);
+    this.updateFromLayout();
+    this.updateTextFromNodes();
+    this.markClean();
+    this._ctx.addToHitGrid(this.x, this.y, this.width, this.height, this.num);
+    this.renderSelf(buffer);
   }
   renderSelf(buffer) {
     if (this.textBuffer.ptr) {
@@ -1642,6 +1893,7 @@ class TextRenderable extends Renderable {
   }
   destroy() {
     this.textBuffer.destroy();
+    this.rootTextNode.children.length = 0;
     super.destroy();
   }
 }
@@ -3509,6 +3761,37 @@ function TabSelect(props, ...children) {
 function FrameBuffer(props, ...children) {
   return h(FrameBufferRenderable, props, ...children);
 }
+function StyledText2(props, ...children) {
+  const styledProps = props;
+  const textNodeOptions = {
+    ...styledProps,
+    attributes: styledProps?.attributes ?? 0
+  };
+  const textNode = new TextNodeRenderable(textNodeOptions);
+  for (const child of children) {
+    textNode.add(child);
+  }
+  return textNode;
+}
+var vstyles = {
+  bold: (...children) => StyledText2({ attributes: TextAttributes.BOLD }, ...children),
+  italic: (...children) => StyledText2({ attributes: TextAttributes.ITALIC }, ...children),
+  underline: (...children) => StyledText2({ attributes: TextAttributes.UNDERLINE }, ...children),
+  dim: (...children) => StyledText2({ attributes: TextAttributes.DIM }, ...children),
+  blink: (...children) => StyledText2({ attributes: TextAttributes.BLINK }, ...children),
+  inverse: (...children) => StyledText2({ attributes: TextAttributes.INVERSE }, ...children),
+  hidden: (...children) => StyledText2({ attributes: TextAttributes.HIDDEN }, ...children),
+  strikethrough: (...children) => StyledText2({ attributes: TextAttributes.STRIKETHROUGH }, ...children),
+  boldItalic: (...children) => StyledText2({ attributes: TextAttributes.BOLD | TextAttributes.ITALIC }, ...children),
+  boldUnderline: (...children) => StyledText2({ attributes: TextAttributes.BOLD | TextAttributes.UNDERLINE }, ...children),
+  italicUnderline: (...children) => StyledText2({ attributes: TextAttributes.ITALIC | TextAttributes.UNDERLINE }, ...children),
+  boldItalicUnderline: (...children) => StyledText2({ attributes: TextAttributes.BOLD | TextAttributes.ITALIC | TextAttributes.UNDERLINE }, ...children),
+  color: (color, ...children) => StyledText2({ fg: color }, ...children),
+  bgColor: (bgColor, ...children) => StyledText2({ bg: bgColor }, ...children),
+  fg: (color, ...children) => StyledText2({ fg: color }, ...children),
+  bg: (bgColor, ...children) => StyledText2({ bg: bgColor }, ...children),
+  styled: (attributes = 0, ...children) => StyledText2({ attributes }, ...children)
+};
 // src/renderables/composition/VRenderable.ts
 class VRenderable extends Renderable {
   options;
@@ -3526,8 +3809,8 @@ export {
   yellow,
   wrapWithDelegates,
   white,
+  vstyles,
   underline,
-  tn,
   t,
   stringToStyledText,
   strikethrough,
@@ -3561,6 +3844,7 @@ export {
   italic,
   isValidPercentage,
   isVNode,
+  isTextNodeRenderable,
   isSizeType,
   isRenderable,
   isPositionTypeType,
@@ -3627,6 +3911,7 @@ export {
   TrackedNode,
   Timeline,
   TextRenderable,
+  TextNodeRenderable,
   TextBuffer,
   TextAttributes,
   Text,
@@ -3642,6 +3927,7 @@ export {
   Select,
   ScrollBoxRenderable,
   ScrollBarRenderable,
+  RootTextNodeRenderable,
   RootRenderable,
   RenderableEvents,
   Renderable,
@@ -3671,11 +3957,12 @@ export {
   BorderCharArrays,
   BlurEffect,
   BloomEffect,
+  BaseRenderable,
   ArrowRenderable,
   ASCIIFontSelectionHelper,
   ASCIIFontRenderable,
   ASCIIFont
 };
 
-//# debugId=288AEFAF1D35CBD764756E2164756E21
+//# debugId=AFF1AC494BCD215264756E2164756E21
 //# sourceMappingURL=index.js.map