@next2d/text 1.17.4 → 1.18.0

package/dist/TextData.js

@@ -67,9 +67,6 @@ export class TextData {
             this._$textHeight = 0;
             for (let idx = 0; idx < this._$heightTable.length; ++idx) {
                 this._$textHeight += this._$heightTable[idx];
-                if (idx) {
-                    this._$textHeight += 1;
-                }
             }
         }
         return this._$textHeight;

package/dist/TextFormat.d.ts

@@ -191,6 +191,18 @@ export declare class TextFormat {
      */
     get underline(): boolean | null;
     set underline(underline: boolean | null);
+    /**
+     * @return {string}
+     * @method
+     * @private
+     */
+    _$toStyleString(): string;
+    /**
+     * @return {boolean}
+     * @method
+     * @private
+     */
+    _$isSame(text_format: TextFormat): boolean;
     /**
      * @return {next2d.text.TextFormat}
      * @method

package/dist/TextFormat.js

@@ -1,4 +1,4 @@
-import { $clamp, $toColorInt } from "@next2d/share";
+import { $clamp, $intToRGBA, $toColorInt } from "@next2d/share";
 /**
  * TextFormat クラスは、文字フォーマット情報を表します。
  * TextFormat クラスを使用して、テキストフィールドに特定のテキストフォーマットを作成します。
@@ -304,6 +304,93 @@ export class TextFormat {
     set underline(underline) {
         this._$underline = underline !== null ? !!underline : null;
     }
+    /**
+     * @return {string}
+     * @method
+     * @private
+     */
+    _$toStyleString() {
+        let style = "";
+        if (this._$font) {
+            style += `font-family: ${this._$font};`;
+        }
+        if (this._$size) {
+            style += `font-size: ${this._$size}px;`;
+        }
+        if (this._$color) {
+            const color = $intToRGBA($toColorInt(this._$color));
+            const R = color.R.toString(16).padStart(2, "0");
+            const G = color.G.toString(16).padStart(2, "0");
+            const B = color.B.toString(16).padStart(2, "0");
+            style += `color: #${R}${G}${B};`;
+        }
+        if (this._$bold) {
+            style += "font-weight: bold;";
+        }
+        if (this._$italic) {
+            style += "font-style: italic;";
+        }
+        if (this._$underline) {
+            style += "text-decoration: underline;";
+        }
+        if (this._$align) {
+            style += `text-align: ${this._$align};`;
+        }
+        if (this._$leftMargin) {
+            style += `margin-left: ${this._$leftMargin}px;`;
+        }
+        if (this._$rightMargin) {
+            style += `margin-right: ${this._$rightMargin}px;`;
+        }
+        if (this._$leading) {
+            style += `margin-bottom: ${this._$leading}px;`;
+        }
+        if (this._$letterSpacing) {
+            style += `letter-spacing: ${this._$letterSpacing}px;`;
+        }
+        return style;
+    }
+    /**
+     * @return {boolean}
+     * @method
+     * @private
+     */
+    _$isSame(text_format) {
+        if (this._$font !== text_format.font) {
+            return false;
+        }
+        if (this._$size !== text_format.size) {
+            return false;
+        }
+        if (this._$color !== text_format.color) {
+            return false;
+        }
+        if (this._$bold !== text_format.bold) {
+            return false;
+        }
+        if (this._$italic !== text_format.italic) {
+            return false;
+        }
+        if (this._$underline !== text_format.underline) {
+            return false;
+        }
+        if (this._$align !== text_format.align) {
+            return false;
+        }
+        if (this._$leftMargin !== text_format.leftMargin) {
+            return false;
+        }
+        if (this._$rightMargin !== text_format.rightMargin) {
+            return false;
+        }
+        if (this._$leading !== text_format.leading) {
+            return false;
+        }
+        if (this._$letterSpacing !== text_format.letterSpacing) {
+            return false;
+        }
+        return true;
+    }
     /**
      * @return {next2d.text.TextFormat}
      * @method

package/dist/TextParser.js

@@ -24,6 +24,9 @@ const _$parseText = (texts, text_format, text_data, options) => {
     let line = text_data.lineTable.length - 1;
     const maxWidth = options.width - text_format._$widthMargin() - 4;
     for (let idx = 0; idx < texts.length; ++idx) {
+        const textFormat = options.textFormats === null
+            ? text_format
+            : options.textFormats.shift();
         const text = texts[idx];
         const object = {
             "mode": "text",
@@ -33,58 +36,192 @@ const _$parseText = (texts, text_format, text_data, options) => {
             "w": 0,
             "h": 0,
             "line": line,
-            "textFormat": text_format._$clone()
+            "textFormat": textFormat._$clone()
         };
-        const breakCode = options.multiline
-            && text === "\n"
-            || text === "\r"
-            || text === "\n\r";
-        $context.font = text_format._$generateFontStyle();
+        $context.font = textFormat._$generateFontStyle();
         const mesure = $context.measureText(text || "");
         let width = mesure.width;
-        if (text_format.letterSpacing) {
-            width += text_format.letterSpacing;
+        if (textFormat.letterSpacing) {
+            width += textFormat.letterSpacing;
         }
         let height = mesure.fontBoundingBoxAscent + mesure.fontBoundingBoxDescent;
-        if (text_format.leading) {
-            height += text_format.leading;
+        if (textFormat.leading) {
+            height += textFormat.leading;
         }
         // setup
-        object.x = mesure.actualBoundingBoxLeft;
-        object.y = mesure.actualBoundingBoxAscent;
+        object.x = 0;
+        object.y = mesure.fontBoundingBoxAscent;
         object.w = width;
         object.h = height;
         $currentWidth += width;
-        if (breakCode || options.wordWrap && $currentWidth > maxWidth) {
+        if (options.wordWrap && $currentWidth > maxWidth) {
             $currentWidth = width;
             // update
             line++;
             object.line = line;
             // break object
             const wrapObject = {
-                "mode": breakCode ? "break" : "wrap",
+                "mode": "wrap",
                 "text": "",
                 "x": 0,
                 "y": 0,
                 "w": 0,
                 "h": 0,
                 "line": line,
-                "textFormat": text_format._$clone()
+                "textFormat": textFormat._$clone()
             };
+            let chunkLength = 1;
+            let isSeparated = true;
+            const pattern = /[0-9a-zA-Z?!;:.,？！。、；：〜]/g;
+            for (;;) {
+                const index = text_data.textTable.length - chunkLength;
+                if (0 >= index) {
+                    isSeparated = false;
+                    chunkLength = 0;
+                    break;
+                }
+                const prevObj = text_data.textTable[index];
+                if (!prevObj) {
+                    isSeparated = false;
+                    chunkLength = 0;
+                    break;
+                }
+                if (prevObj.mode !== "text") {
+                    isSeparated = false;
+                    break;
+                }
+                if (prevObj.text === " ") {
+                    chunkLength--;
+                    break;
+                }
+                if (!prevObj.text.match(pattern)) {
+                    chunkLength--;
+                    break;
+                }
+                chunkLength++;
+            }
             // new line
             text_data.widthTable[line] = 0;
             text_data.heightTable[line] = 0;
             text_data.ascentTable[line] = 0;
-            text_data.textTable.push(wrapObject);
-            text_data.lineTable.push(wrapObject);
+            if (chunkLength > 0 && isSeparated) {
+                const insertIdx = text_data.textTable.length - chunkLength;
+                text_data.textTable.splice(insertIdx, 0, wrapObject);
+                text_data.lineTable.push(wrapObject);
+                const prevLine = line - 1;
+                // reset
+                text_data.widthTable[prevLine] = 0;
+                text_data.heightTable[prevLine] = 0;
+                text_data.ascentTable[prevLine] = 0;
+                for (let idx = 0; idx < insertIdx; ++idx) {
+                    const textObject = text_data.textTable[idx];
+                    if (textObject.line !== prevLine) {
+                        continue;
+                    }
+                    if (textObject.mode !== "text") {
+                        continue;
+                    }
+                    text_data.widthTable[prevLine] += textObject.w;
+                    text_data.heightTable[prevLine] = Math.max(text_data.heightTable[prevLine], textObject.h);
+                    text_data.ascentTable[prevLine] = Math.max(text_data.ascentTable[prevLine], textObject.y);
+                }
+                // reset
+                $currentWidth = 0;
+                for (let idx = insertIdx + 1; idx < text_data.textTable.length; ++idx) {
+                    const textObject = text_data.textTable[idx];
+                    textObject.line = line;
+                    $currentWidth += textObject.w;
+                }
+            }
+            else {
+                text_data.textTable.push(wrapObject);
+                text_data.lineTable.push(wrapObject);
+            }
         }
-        if (!breakCode) {
-            text_data.widthTable[line] = $currentWidth;
-            text_data.heightTable[line] = Math.max(text_data.heightTable[line], height);
-            text_data.ascentTable[line] = Math.max(text_data.ascentTable[line], object.y);
-            text_data.textTable.push(object);
+        text_data.widthTable[line] = $currentWidth;
+        text_data.heightTable[line] = Math.max(text_data.heightTable[line], height);
+        text_data.ascentTable[line] = Math.max(text_data.ascentTable[line], object.y);
+        text_data.textTable.push(object);
+    }
+};
+/**
+ * @param  {string} value
+ * @param  {TextFormat} text_format
+ * @return {void}
+ * @method
+ * @private
+ */
+const _$parseStyle = (value, text_format, options) => {
+    const values = value
+        .trim()
+        .split(";");
+    const attributes = [];
+    for (let idx = 0; idx < values.length; ++idx) {
+        const styleValue = values[idx];
+        if (!styleValue) {
+            continue;
+        }
+        const styles = styleValue.split(":");
+        const name = styles[0].trim();
+        const value = styles[1].trim();
+        switch (name) {
+            case "font-size":
+                attributes.push({
+                    "name": "size",
+                    "value": parseFloat(value)
+                });
+                break;
+            case "font-family":
+                attributes.push({
+                    "name": "face",
+                    "value": value.replace(/'|"/g, "")
+                });
+                break;
+            case "letter-spacing":
+                attributes.push({
+                    "name": "letterSpacing",
+                    "value": value
+                });
+                break;
+            case "margin-bottom":
+                attributes.push({
+                    "name": "leading",
+                    "value": parseFloat(value)
+                });
+                break;
+            case "margin-left":
+                attributes.push({
+                    "name": "leftMargin",
+                    "value": parseFloat(value)
+                });
+                break;
+            case "margin-right":
+                attributes.push({
+                    "name": "rightMargin",
+                    "value": parseFloat(value)
+                });
+                break;
+            case "color":
+            case "align":
+                attributes.push({
+                    "name": name,
+                    "value": value
+                });
+                break;
+            case "text-decoration":
+            case "font-weight":
+            case "font-style":
+                attributes.push({
+                    "name": value,
+                    "value": true
+                });
+                break;
+            default:
+                break;
         }
     }
+    // eslint-disable-next-line no-use-before-define
+    _$setAttributes(attributes, text_format, options);
 };
 /**
  * @param  {array} attributes
@@ -98,6 +235,9 @@ const _$setAttributes = (attributes, text_format, options) => {
     for (let idx = 0; idx < attributes.length; ++idx) {
         const object = attributes[idx];
         switch (object.name) {
+            case "style":
+                _$parseStyle(object.value, text_format, options);
+                break;
             case "align":
                 text_format.align = object.value;
                 break;
@@ -128,6 +268,15 @@ const _$setAttributes = (attributes, text_format, options) => {
             case "rightMargin":
                 text_format.rightMargin = +object.value;
                 break;
+            case "underline":
+                text_format.underline = true;
+                break;
+            case "bold":
+                text_format.bold = true;
+                break;
+            case "italic":
+                text_format.italic = true;
+                break;
             default:
                 break;
         }
@@ -244,21 +393,28 @@ const _$adjustmentHeight = (text_data) => {
  * @public
  */
 export const parsePlainText = (text, text_format, options) => {
+    const textData = new TextData();
+    if (!text) {
+        return textData;
+    }
     const lineText = options.multiline
         ? text.split("\n")
         : [text.replace("\n", "")];
-    const textData = new TextData();
-    // clone
-    const textFormat = text_format._$clone();
-    if (options.subFontSize
-        && options.subFontSize > 0 && textFormat.size) {
-        textFormat.size -= options.subFontSize;
-        if (1 > textFormat.size) {
-            textFormat.size = 1;
-        }
-    }
     for (let idx = 0; idx < lineText.length; ++idx) {
-        if (options.wordWrap || options.multiline) {
+        let textFormat = text_format._$clone();
+        if (options.textFormats) {
+            textFormat = idx === 0
+                ? options.textFormats[0]
+                : options.textFormats.shift();
+        }
+        if (options.subFontSize
+            && options.subFontSize > 0 && textFormat.size) {
+            textFormat.size -= options.subFontSize;
+            if (1 > textFormat.size) {
+                textFormat.size = 1;
+            }
+        }
+        if (idx === 0 || options.wordWrap || options.multiline) {
             _$createNewLine(textData, textFormat);
         }
         const texts = lineText[idx];
@@ -280,11 +436,14 @@ export const parsePlainText = (text, text_format, options) => {
  * @public
  */
 export const parseHtmlText = (html_text, text_format, options) => {
+    const textData = new TextData();
+    if (!html_text) {
+        return textData;
+    }
     const htmlText = html_text
         .trim()
         .replace(/\r?\n/g, "")
         .replace(/\t/g, "");
-    const textData = new TextData();
     const textFormat = text_format._$clone();
     if (options.subFontSize && options.subFontSize > 0 && textFormat.size) {
         textFormat.size -= options.subFontSize;

package/dist/interface/OptionsImpl.d.ts

@@ -1,6 +1,8 @@
+import { TextFormat } from "../TextFormat";
 export interface OptionsImpl {
     width: number;
     multiline: boolean;
     wordWrap: boolean;
+    textFormats: TextFormat[] | null;
     subFontSize?: number;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next2d/text",
-  "version": "1.17.4",
+  "version": "1.18.0",
   "description": "Next2D Text Packages",
   "author": "Toshiyuki Ienaga<ienaga@tvon.jp> (https://github.com/ienaga/)",
   "license": "MIT",
@@ -32,6 +32,6 @@
     "url": "git+https://github.com/Next2D/Player.git"
   },
   "peerDependencies": {
-    "@next2d/share": "1.17.4"
+    "@next2d/share": "1.18.0"
   }
 }