feat: allow text truncation with ellipsis

src/display/components/Text.js

@@ -9,7 +9,7 @@ import { Tintable } from '../mixins/Tintable';
 import { mixins } from '../mixins/utils';
 
 const EXTRA_KEYS = {
-  PLACEMENT: ['text', 'split'],
+  PLACEMENT: ['text', 'style', 'split'],
 };
 
 const ComposedText = mixins(

src/display/data-schema/data.d.ts

@@ -532,6 +532,15 @@ export interface TextStyle {
    */
   wordWrapWidth?: number | 'auto';
 
+  /**
+   * Determines how to handle text that overflows its content area.
+   * - 'visible': Text flows outside the bounds (default).
+   * - 'hidden': Text exceeding the bounds is clipped.
+   * - 'ellipsis': Text exceeding the bounds is replaced with '...'.
+   * @default 'visible'
+   */
+  overflow?: 'visible' | 'hidden' | 'ellipsis';
+
   /**
    * Allows any other properties, similar to PIXI.TextStyleOptions.
    * This provides flexibility for standard text styling.

src/display/data-schema/primitive-schema.js

@@ -6,13 +6,13 @@ import {
   DEFAULT_TEXTSTYLE,
 } from '../mixins/constants';
 import {
-  HslColor,
   HslaColor,
-  HsvColor,
+  HslColor,
   HsvaColor,
+  HsvColor,
   Color as PixiColor,
-  RgbColor,
   RgbaColor,
+  RgbColor,
 } from './color-schema';
 
 /**
@@ -244,6 +244,7 @@ export const TextStyle = z
     fontWeight: z.any().default(DEFAULT_TEXTSTYLE.fontWeight),
     fill: z.any().default(DEFAULT_TEXTSTYLE.fill),
     wordWrapWidth: z.union([z.number(), z.literal('auto')]).optional(),
+    overflow: z.enum(['visible', 'hidden', 'ellipsis']).default('visible'),
   })
   .passthrough()
   .default({});

src/display/data-schema/primitive-schema.test.js

@@ -8,11 +8,11 @@ import {
   Margin,
   Placement,
   PxOrPercentSize,
+  pxOrPercentSchema,
   RelationsStyle,
   Size,
   TextStyle,
   TextureStyle,
-  pxOrPercentSchema,
 } from './primitive-schema';
 
 vi.mock('../../utils/uuid');
@@ -359,6 +359,7 @@ describe('Primitive Schema Tests', () => {
         fontFamily: 'FiraCode',
         fontSize: 16,
         fontWeight: 400,
+        overflow: 'visible',
       });
     });
 
@@ -369,6 +370,7 @@ describe('Primitive Schema Tests', () => {
         fontFamily: 'Arial',
         fontWeight: 'bold',
         fill: 'red',
+        overflow: 'visible',
       });
     });
   });

src/display/mixins/Base.js

@@ -49,7 +49,7 @@ export const Base = (superClass) => {
     }
 
     static registerHandler(keys, handler, stage) {
-      if (!Object.prototype.hasOwnProperty.call(this, '_handlerRegistry')) {
+      if (!Object.hasOwn(this, '_handlerRegistry')) {
         this._handlerRegistry = new Map(this._handlerRegistry);
         this._handlerMap = new Map(this._handlerMap);
       }
@@ -58,7 +58,9 @@ export const Base = (superClass) => {
         keys: new Set(),
         stage: stage ?? 99,
       };
-      keys.forEach((key) => registration.keys.add(key));
+      keys.forEach((key) => {
+        registration.keys.add(key);
+      });
       this._handlerRegistry.set(handler, registration);
       registration.keys.forEach((key) => {
         if (!this._handlerMap.has(key)) this._handlerMap.set(key, new Set());
@@ -116,7 +118,7 @@ export const Base = (superClass) => {
           this.constructor._handlerRegistry.get(handler).keys;
         const fullPayload = {};
         keysForHandler.forEach((key) => {
-          if (Object.prototype.hasOwnProperty.call(this.props, key)) {
+          if (Object.hasOwn(this.props, key)) {
             fullPayload[key] = this.props[key];
           }
         });

src/display/mixins/Textable.js

@@ -1,12 +1,15 @@
 import { UPDATE_STAGES } from './constants';
+import { splitText } from './utils';
 
 const KEYS = ['text', 'split'];
 
 export const Textable = (superClass) => {
   const MixedClass = class extends superClass {
     _applyText(relevantChanges) {
       const { text, split } = relevantChanges;
-      this.text = splitText(text, split);
+      this._fullText = splitText(text, split);
+      this.text = this._fullText;
+      this._isTruncated = false;
     }
   };
   MixedClass.registerHandler(
@@ -16,14 +19,3 @@ export const Textable = (superClass) => {
   );
   return MixedClass;
 };
-
-const splitText = (text, split) => {
-  if (split === 0) {
-    return text;
-  }
-  let result = '';
-  for (let i = 0; i < text.length; i += split) {
-    result += `${text.slice(i, i + split)}\n`;
-  }
-  return result.trim();
-};

src/display/mixins/Textstyleable.js

@@ -5,7 +5,7 @@ import {
   FONT_WEIGHT,
   UPDATE_STAGES,
 } from './constants';
-import { getLayoutContext } from './utils';
+import { getLayoutContext, splitText } from './utils';
 
 const KEYS = ['text', 'split', 'style', 'margin'];
 
@@ -19,6 +19,13 @@ export const Textstyleable = (superClass) => {
         this.style = new TextStyle();
       }
 
+      if (this._isTruncated) {
+        this.text =
+          this._fullText ??
+          splitText(this.props.text || '', this.props.split || 0);
+        this._isTruncated = false;
+      }
+
       for (const key in style) {
         if (
           (key === 'fontSize' || key === 'wordWrapWidth') &&
@@ -45,6 +52,10 @@ export const Textstyleable = (superClass) => {
         const range = style.autoFont ?? DEFAULT_AUTO_FONT_RANGE;
         setAutoFontSize(this, margin, range);
       }
+
+      if (style.overflow && style.overflow !== 'visible') {
+        applyOverflow(this, margin, style.overflow, this.text);
+      }
     }
 
     _getFontFamily(value) {
@@ -88,6 +99,41 @@ const setAutoWordWrapWidth = (object, margin) => {
   object.style.wordWrapWidth = contentWidth;
 };
 
+const applyOverflow = (object, margin, overflowType, fullText) => {
+  const { contentWidth, contentHeight } = getContentSize(object, margin);
+  const bounds = object.getLocalBounds();
+
+  if (bounds.width <= contentWidth && bounds.height <= contentHeight) {
+    return;
+  }
+
+  const suffix = overflowType === 'ellipsis' ? '…' : '';
+  let low = 0;
+  let high = fullText.length;
+  let bestFitText = '';
+
+  while (low <= high) {
+    const mid = Math.floor((low + high) / 2);
+    const sliced = fullText.slice(0, mid);
+    const candidate = mid === fullText.length ? sliced : sliced + suffix;
+
+    if (doesFit(candidate)) {
+      bestFitText = candidate;
+      low = mid + 1;
+    } else {
+      high = mid - 1;
+    }
+  }
+  object.text = bestFitText;
+  object._isTruncated = bestFitText !== fullText;
+
+  function doesFit(text) {
+    object.text = text;
+    const b = object.getLocalBounds();
+    return b.width <= contentWidth && b.height <= contentHeight;
+  }
+};
+
 const getContentSize = (object, margin) => {
   const { contentWidth, contentHeight } = getLayoutContext(object);
   return {

src/display/mixins/utils.js

@@ -149,3 +149,14 @@ export const getLayoutContext = (component) => {
     parentPadding,
   };
 };
+
+export const splitText = (text, split) => {
+  if (!split || split === 0) {
+    return text;
+  }
+  let result = '';
+  for (let i = 0; i < text.length; i += split) {
+    result += `${text.slice(i, i + split)}\n`;
+  }
+  return result.trim();
+};