@babylonjs/gui - npm Package Compare versions

Comparing version 7.15.1 to 7.15.2

2D/controls/image.js

@@ -588,2 +588,3 @@ import { __decorate } from "@babylonjs/core/tslib.es6.js";
         this._stretch = Image.STRETCH_FILL;
+        this._source = null;
         this._autoScale = false;
@@ -590,0 +591,0 @@ this._sourceLeft = 0;

2D/controls/textBlock.d.ts

@@ -25,3 +25,7 @@ import { Observable } from "@babylonjs/core/Misc/observable.js";
      */
-    WordWrapEllipsis = 3
+    WordWrapEllipsis = 3,
+    /**
+     * Use HTML to wrap the text. This is the only mode that supports east-asian languages.
+     */
+    HTML = 4
 }
@@ -63,2 +67,12 @@ /**
     /**
+     * This function will be called when a new HTML element is generated to be used for word wrapping.
+     * This is only used when wrapping mode HTML is selected.
+     * Using this function you can adjust word-break, overflow-wrap, hyphens, or any other CSS properties of the HTML element, language-dependent.
+     */
+    adjustWordWrappingHTMLElement: Nullable<(element: HTMLElement) => void>;
+    /**
+     * Gets or sets a boolean indicating if the HTML element generated for word wrapping should be reused or removed after each wrapping.
+     */
+    reuseHTMLForWordWrapping: boolean;
+    /**
      * Return the line list (you may need to use the onLinesReadyObservable to make sure the list is ready)
@@ -190,2 +204,4 @@ */
     protected _breakLines(refWidth: number, refHeight: number, context: ICanvasRenderingContext): object[];
+    private _htmlElement;
+    protected _parseHTMLText(refWidth: number, refHeight: number, context: ICanvasRenderingContext): string[];
     protected _parseLine(line: string | undefined, context: ICanvasRenderingContext): object;
@@ -192,0 +208,0 @@ private _getCharsToRemove;

2D/controls/textBlock.js

@@ -29,2 +29,6 @@ import { __decorate } from "@babylonjs/core/tslib.es6.js";
     TextWrapping[TextWrapping["WordWrapEllipsis"] = 3] = "WordWrapEllipsis";
+    /**
+     * Use HTML to wrap the text. This is the only mode that supports east-asian languages.
+     */
+    TextWrapping[TextWrapping["HTML"] = 4] = "HTML";
 })(TextWrapping || (TextWrapping = {}));
@@ -283,3 +287,8 @@ /**
         this.onLinesReadyObservable = new Observable();
+        /**
+         * Gets or sets a boolean indicating if the HTML element generated for word wrapping should be reused or removed after each wrapping.
+         */
+        this.reuseHTMLForWordWrapping = false;
         this._linesTemp = [];
+        this._htmlElement = null;
         this.text = text;
@@ -399,24 +408,65 @@ }
         this._linesTemp.length = 0;
-        const _lines = this.text.split("\n");
-        if (this._textWrapping === 2 /* TextWrapping.Ellipsis */) {
-            for (const _line of _lines) {
-                this._linesTemp.push(this._parseLineEllipsis(_line, refWidth, context));
-            }
+        const _lines = this._textWrapping === 4 /* TextWrapping.HTML */ ? this._parseHTMLText(refWidth, refHeight, context) : this.text.split("\n");
+        switch (this._textWrapping) {
+            case 1 /* TextWrapping.WordWrap */:
+                for (const _line of _lines) {
+                    this._linesTemp.push(...this._parseLineWordWrap(_line, refWidth, context));
+                }
+                break;
+            case 2 /* TextWrapping.Ellipsis */:
+                for (const _line of _lines) {
+                    this._linesTemp.push(this._parseLineEllipsis(_line, refWidth, context));
+                }
+                break;
+            case 3 /* TextWrapping.WordWrapEllipsis */:
+                for (const _line of _lines) {
+                    this._linesTemp.push(...this._parseLineWordWrapEllipsis(_line, refWidth, refHeight, context));
+                }
+                break;
+            case 4 /* TextWrapping.HTML */:
+            default:
+                for (const _line of _lines) {
+                    this._linesTemp.push(this._parseLine(_line, context));
+                }
+                break;
         }
-        else if (this._textWrapping === 1 /* TextWrapping.WordWrap */) {
-            for (const _line of _lines) {
-                this._linesTemp.push(...this._parseLineWordWrap(_line, refWidth, context));
-            }
+        return this._linesTemp;
+    }
+    _parseHTMLText(refWidth, refHeight, context) {
+        const lines = [];
+        if (!this._htmlElement) {
+            this._htmlElement = document.createElement("div");
+            document.body.appendChild(this._htmlElement);
         }
-        else if (this._textWrapping === 3 /* TextWrapping.WordWrapEllipsis */) {
-            for (const _line of _lines) {
-                this._linesTemp.push(...this._parseLineWordWrapEllipsis(_line, refWidth, refHeight, context));
-            }
+        const htmlElement = this._htmlElement;
+        htmlElement.textContent = this.text;
+        htmlElement.style.font = context.font;
+        htmlElement.style.position = "absolute";
+        htmlElement.style.visibility = "hidden";
+        htmlElement.style.top = "-1000px";
+        htmlElement.style.left = "-1000px";
+        this.adjustWordWrappingHTMLElement?.(htmlElement);
+        htmlElement.style.width = refWidth + "px";
+        htmlElement.style.height = refHeight + "px";
+        const textContent = htmlElement.textContent;
+        if (!textContent) {
+            return lines;
         }
-        else {
-            for (const _line of _lines) {
-                this._linesTemp.push(this._parseLine(_line, context));
-            }
+        // get the text node
+        const textNode = htmlElement.childNodes[0];
+        const range = document.createRange();
+        let idx = 0;
+        for (const c of textContent) {
+            range.setStart(textNode, 0);
+            range.setEnd(textNode, idx + 1);
+            // "select" text from beginning to this position to determine the line
+            const lineIndex = range.getClientRects().length - 1;
+            lines[lineIndex] = (lines[lineIndex] || "") + c;
+            idx++;
         }
-        return this._linesTemp;
+        if (!this.reuseHTMLForWordWrapping) {
+            htmlElement.remove();
+            this._htmlElement = null;
+        }
+        return lines;
     }
@@ -579,2 +629,4 @@ _parseLine(line = "", context) {
         this.onTextChangedObservable.clear();
+        this._htmlElement?.remove();
+        this._htmlElement = null;
     }
@@ -581,0 +633,0 @@ }

package.json

 {
     "name": "@babylonjs/gui",
-    "version": "7.15.1",
+    "version": "7.15.2",
     "main": "index.js",
@@ -21,3 +21,3 @@ "module": "index.js",
     "devDependencies": {
-        "@babylonjs/core": "^7.15.1",
+        "@babylonjs/core": "^7.15.2",
         "@dev/build-tools": "^1.0.0",
@@ -24,0 +24,0 @@ "@lts/gui": "1.0.0"

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

3539654

increased by0.22%

Lines of code

36624

increased by0.19%

No dependency changes