leafer-ui 2.2.8 → 2.2.10

package/dist/web.module.js

@@ -2992,7 +2992,7 @@ const PathCommandNodeHelper = {
     toCommand(_nodes) {
         return [];
     },
-    toNode(_data) {
+    toNode(_data, _filterSamePoint) {
         return [];
     }
 };
@@ -7046,7 +7046,7 @@ class LeafLevelList {
     }
 }
 
-const version = "2.2.8";
+const version = "2.2.10";
 
 const debug$5 = Debug.get("LeaferCanvas");
 
@@ -8785,7 +8785,7 @@ let UI = UI_1 = class UI extends Leaf {
     getPath(curve, pathForRender) {
         this.__layout.update();
         let path = pathForRender ? this.__.__pathForRender : this.__.path;
-        if (!path) pen.set(path = []), this.__drawPathByBox(pen, !pathForRender);
+        if (!path) pen.set(path = []), this.__drawPathByBox(pen, "box", !pathForRender);
         return curve ? PathConvert.toCanvasData(path, true) : path;
     }
     getPathString(curve, pathForRender, floatLength) {
@@ -8823,10 +8823,10 @@ let UI = UI_1 = class UI extends Leaf {
         data.__usePointsMode ? PathDrawer.drawPathByPoints(canvas, data.points, data.closed) : this.__drawPathByData(canvas, data.path, true);
     }
     __drawPathByData(drawer, data, ignoreCornerRadius) {
-        data ? PathDrawer.drawPathByData(drawer, data) : this.__drawPathByBox(drawer, ignoreCornerRadius);
+        data ? PathDrawer.drawPathByData(drawer, data) : this.__drawPathByBox(drawer, "box", ignoreCornerRadius);
     }
-    __drawPathByBox(drawer, ignoreCornerRadius) {
-        const {x: x, y: y, width: width, height: height} = this.__layout.boxBounds;
+    __drawPathByBox(drawer, boundsType = "box", ignoreCornerRadius) {
+        const {x: x, y: y, width: width, height: height} = this.__layout[boundsType + "Bounds"];
         if (this.__.cornerRadius && !ignoreCornerRadius) {
             const {cornerRadius: cornerRadius} = this.__;
             drawer.roundRect(x, y, width, height, isNumber(cornerRadius) ? [ cornerRadius ] : cornerRadius);
@@ -9908,14 +9908,15 @@ let Text = class Text extends UI {
     }
     __updateTextDrawData() {
         const data = this.__;
-        const {lineHeight: lineHeight, letterSpacing: letterSpacing, fontFamily: fontFamily, fontSize: fontSize, fontWeight: fontWeight, italic: italic, textCase: textCase, textOverflow: textOverflow, padding: padding, width: width, height: height} = data;
+        const {lineHeight: lineHeight, letterSpacing: letterSpacing, wordSpacing: wordSpacing, fontFamily: fontFamily, fontSize: fontSize, fontWeight: fontWeight, italic: italic, textCase: textCase, textOverflow: textOverflow, padding: padding, width: width, height: height} = data;
         data.__lineHeight = UnitConvert.number(lineHeight, fontSize);
         data.__letterSpacing = UnitConvert.number(letterSpacing, fontSize);
+        data.__wordSpacing = UnitConvert.number(wordSpacing, fontSize);
         data.__baseLine = data.__lineHeight - (data.__lineHeight - fontSize * .7) / 2;
         data.__font = `${italic ? "italic " : ""}${textCase === "small-caps" ? "small-caps " : ""}${fontWeight !== "normal" ? fontWeight + " " : ""}${fontSize || 12}px ${fontFamily || "caption"}`;
         stintSet$1(data, "__padding", padding && MathHelper.fourNumber(padding));
         stintSet$1(data, "__clipText", textOverflow !== "show" && !data.__autoSize);
-        stintSet$1(data, "__isCharMode", width || height || data.__letterSpacing || data.motionText || textCase !== "none");
+        stintSet$1(data, "__isCharMode", width || height || data.__letterSpacing || data.__wordSpacing || data.motionText || textCase !== "none");
         data.__textDrawData = TextConvert.getDrawData((data.__isPlacehold = data.placeholder && data.text === "") ? data.placeholder : data.text, this.__);
     }
     __updateBoxBounds() {
@@ -10013,6 +10014,8 @@ __decorate([ boundsType("none") ], Text.prototype, "textDecoration", void 0);
 
 __decorate([ boundsType(0) ], Text.prototype, "letterSpacing", void 0);
 
+__decorate([ boundsType(0) ], Text.prototype, "wordSpacing", void 0);
+
 __decorate([ boundsType({
     type: "percent",
     value: 1.5
@@ -11975,7 +11978,7 @@ function fills(fills, ui, canvas, renderOptions) {
                 if (scaleX !== 1) canvas.scale(scaleX, scaleY);
             }
             if (originPaint.blendMode) canvas.blendMode = originPaint.blendMode;
-            fillPathOrText(ui, canvas, renderOptions);
+            fillPathOrText(ui, canvas, renderOptions, true);
             canvas.restore();
         } else {
             if (originPaint.blendMode) {
@@ -11987,25 +11990,46 @@ function fills(fills, ui, canvas, renderOptions) {
     }
 }
 
-function fillPathOrText(ui, canvas, renderOptions) {
-    ui.__.__font ? Paint.fillText(ui, canvas, renderOptions) : ui.__.windingRule ? canvas.fill(ui.__.windingRule) : canvas.fill();
+function fillPathOrText(ui, canvas, renderOptions, complexPaint) {
+    ui.__.__font ? Paint.fillText(ui, canvas, renderOptions, complexPaint) : ui.__.windingRule ? canvas.fill(ui.__.windingRule) : canvas.fill();
 }
 
-function fillText(ui, canvas, renderOptions) {
-    if (ui.motionText) return Paint.fillMotionText(ui, canvas, renderOptions);
-    const data = ui.__, {rows: rows, decorationY: decorationY} = data.__textDrawData;
+function fillText(ui, canvas, renderOptions, complexPaint) {
+    const data = ui.__;
     if (data.__isPlacehold && data.placeholderColor) canvas.fillStyle = data.placeholderColor;
-    let row;
-    for (let i = 0, len = rows.length; i < len; i++) {
-        row = rows[i];
-        if (row.text) canvas.fillText(row.text, row.x, row.y); else if (row.data) row.data.forEach(charData => {
-            canvas.fillText(charData.char, charData.x, row.y);
-        });
+    let originCanvas;
+    if (complexPaint) {
+        originCanvas = canvas;
+        canvas = canvas.getSameCanvas(true, true);
+        canvas.font = ui.__.__font;
+        canvas.fillStyle = "#000";
+    }
+    if (ui.motionText) {
+        Paint.fillMotionText(ui, canvas, renderOptions);
+    } else {
+        let row;
+        const {rows: rows, decorationY: decorationY} = data.__textDrawData;
+        for (let i = 0, len = rows.length; i < len; i++) {
+            row = rows[i];
+            if (row.text) canvas.fillText(row.text, row.x, row.y); else if (row.data) row.data.forEach(charData => {
+                canvas.fillText(charData.char, charData.x, row.y);
+            });
+        }
+        if (decorationY) {
+            const {decorationColor: decorationColor, decorationHeight: decorationHeight} = data.__textDrawData;
+            if (decorationColor) canvas.fillStyle = decorationColor;
+            rows.forEach(row => decorationY.forEach(value => canvas.fillRect(row.x, row.y + value, row.width, decorationHeight)));
+        }
     }
-    if (decorationY) {
-        const {decorationColor: decorationColor, decorationHeight: decorationHeight} = data.__textDrawData;
-        if (decorationColor) canvas.fillStyle = decorationColor;
-        rows.forEach(row => decorationY.forEach(value => canvas.fillRect(row.x, row.y + value, row.width, decorationHeight)));
+    if (complexPaint) {
+        canvas.beginPath();
+        ui.__drawPathByBox(canvas, "render");
+        canvas.fillStyle = originCanvas.fillStyle;
+        canvas.setTransform(originCanvas.getTransform());
+        canvas.blendMode = "source-in";
+        canvas.fill();
+        originCanvas.copyWorldByReset(canvas, ui.__nowWorld);
+        canvas.recycle(ui.__nowWorld);
     }
 }
 
@@ -13125,9 +13149,9 @@ const symbolChar = afterChar + "_#~&*+\\=|" + langSymbol;
 
 const breakChar = "- " + langBreak$1;
 
-const cjkRangeList = [ [ 19968, 40959 ], [ 13312, 19903 ], [ 131072, 173791 ], [ 173824, 177983 ], [ 177984, 178207 ], [ 178208, 183983 ], [ 183984, 191471 ], [ 196608, 201551 ], [ 201552, 205743 ], [ 11904, 12031 ], [ 12032, 12255 ], [ 12272, 12287 ], [ 12288, 12351 ], [ 12736, 12783 ], [ 12800, 13055 ], [ 13056, 13311 ], [ 63744, 64255 ], [ 65072, 65103 ], [ 127488, 127743 ], [ 194560, 195103 ] ];
+const cjkRangeList = [ [ 19968, 40959 ], [ 13312, 19903 ], [ 131072, 173791 ], [ 173824, 177983 ], [ 177984, 178207 ], [ 178208, 183983 ], [ 183984, 191471 ], [ 196608, 201551 ], [ 201552, 205743 ], [ 11904, 12031 ], [ 12032, 12255 ], [ 12272, 12287 ], [ 12288, 12351 ], [ 4352, 4607 ], [ 12352, 12447 ], [ 12448, 12543 ], [ 12544, 12591 ], [ 12592, 12687 ], [ 12688, 12703 ], [ 12704, 12735 ], [ 12784, 12799 ], [ 12736, 12783 ], [ 12800, 13055 ], [ 13056, 13311 ], [ 63744, 64255 ], [ 65072, 65103 ], [ 127488, 127743 ], [ 194560, 195103 ] ];
 
-const cjkReg = new RegExp(cjkRangeList.map(([start, end]) => `[\\u${start.toString(16)}-\\u${end.toString(16)}]`).join("|"));
+const cjkReg = new RegExp(cjkRangeList.map(([start, end]) => `[\\u{${start.toString(16)}}-\\u{${end.toString(16)}}]`).join("|"), "u");
 
 function mapChar(str) {
     const map = {};
@@ -13224,11 +13248,13 @@ function createRows(drawData, content, style) {
     rows = drawData.rows;
     bounds = drawData.bounds;
     findMaxWidth = !bounds.width && !style.autoSizeAlign;
-    const {__letterSpacing: __letterSpacing, paraIndent: paraIndent, textCase: textCase} = style;
+    const {paraIndent: paraIndent, textCase: textCase} = style;
     const {canvas: canvas} = Platform, {width: width} = bounds;
     if (style.__isCharMode) {
         const wrap = style.textWrap !== "none";
         const breakAll = style.textWrap === "break";
+        const letterSpacing = style.__letterSpacing;
+        const wordSpacing = style.__wordSpacing;
         paraStart = true;
         lastCharType = null;
         startCharSize = charWidth = charSize = wordWidth = rowWidth = 0;
@@ -13249,9 +13275,9 @@ function createRows(drawData, content, style) {
                 charType = getCharType(char);
                 if (charType === Letter && textCase !== "none") char = getTextCase(char, textCase, !wordWidth);
                 charWidth = canvas.measureText(char).width;
-                if (__letterSpacing) {
-                    if (__letterSpacing < 0) charSize = charWidth;
-                    charWidth += __letterSpacing;
+                if (letterSpacing) {
+                    if (letterSpacing < 0) charSize = charWidth;
+                    charWidth += letterSpacing;
                 }
                 langBreak = charType === Single && (lastCharType === Single || lastCharType === Letter) || lastCharType === Single && charType !== After;
                 afterBreak = (charType === Before || charType === Single) && (lastCharType === Symbol || lastCharType === After);
@@ -13272,11 +13298,11 @@ function createRows(drawData, content, style) {
                 }
                 if (char === " " && paraStart !== true && rowWidth + wordWidth === 0) ; else {
                     if (charType === Break) {
-                        if (char === " " && wordWidth) addWord();
+                        if (char === " " && wordWidth) addWord(wordSpacing);
                         addChar(char, charWidth);
                         addWord();
                     } else if (langBreak || afterBreak) {
-                        if (wordWidth) addWord();
+                        if (wordWidth) addWord(wordSpacing);
                         addChar(char, charWidth);
                     } else {
                         addChar(char, charWidth);
@@ -13312,7 +13338,11 @@ function addChar(char, width) {
     wordWidth += width;
 }
 
-function addWord() {
+function addWord(wordSpacing) {
+    if (wordSpacing) {
+        rowWidth += wordSpacing;
+        word.addWidth = wordSpacing;
+    }
     rowWidth += wordWidth;
     word.width = wordWidth;
     row.words.push(word);
@@ -13356,6 +13386,7 @@ function layoutChar(drawData, style, width, _height) {
     const {rows: rows} = drawData;
     const {textAlign: textAlign, paraIndent: paraIndent} = style;
     const useLetter = style.__letterSpacing || style.motionText;
+    const wordSpacing = style.__wordSpacing;
     const justifyLast = width && textAlign.includes("both");
     const justify = justifyLast || width && textAlign.includes("justify");
     const justifyLetter = justify && textAlign.includes("letter");
@@ -13368,7 +13399,7 @@ function layoutChar(drawData, style, width, _height) {
                 remainingWidth = width - row.width - indentWidth;
                 if (justifyLetter) addLetterWidth = remainingWidth / (row.words.reduce((total, item) => total + item.data.length, 0) - 1); else addWordWidth = wordsLength > 1 ? remainingWidth / (wordsLength - 1) : 0;
             }
-            mode = useLetter || row.isOverflow || justifyLetter ? CharMode : addWordWidth ? WordMode : TextMode;
+            mode = useLetter || row.isOverflow || justifyLetter ? CharMode : addWordWidth || wordSpacing ? WordMode : TextMode;
             if (row.isOverflow && !useLetter) row.textMode = true;
             if (mode === TextMode) {
                 row.x += indentWidth;
@@ -13388,6 +13419,7 @@ function layoutChar(drawData, style, width, _height) {
                     } else {
                         charX = toChar(word.data, charX, row.data, row.isOverflow, canJustify && addLetterWidth);
                     }
+                    if (word.addWidth) charX += word.addWidth;
                     if (canJustify) {
                         isLastWord = index === wordsLength - 1;
                         if (addWordWidth) {