leafer-ui 2.2.9 → 2.2.11

package/dist/web.module.js

@@ -4607,39 +4607,44 @@ function doVisible(leaf, key, value, oldValue) {
     }
 }
 
+function sortParentChange(parent) {
+    parent.__layout.childrenSortChange();
+    if (parent.__.flow) parent.__layout.boxChange();
+}
+
 function sortType(defaultValue) {
     return decorateLeafAttr(defaultValue, key => attr({
         set(value) {
             if (this.__setAttr(key, value)) {
-                this.waitParent(() => {
-                    const {parent: parent} = this;
-                    parent.__layout.childrenSortChange();
-                    if (parent.__.flow) parent.__layout.boxChange();
-                });
+                this.waitParentChange(sortParentChange);
             }
         }
     }));
 }
 
+function maskParentChange(parent) {
+    parent.__updateMask();
+}
+
 function maskType(defaultValue, updateSelf) {
     return decorateLeafAttr(defaultValue, key => attr({
         set(value) {
             if (this.__setAttr(key, value)) {
                 this.__layout.boxChanged || this.__layout.boxChange();
-                updateSelf ? this.__updateMask() : this.waitParent(() => {
-                    this.parent.__updateMask(value);
-                });
+                updateSelf ? this.__updateMask() : this.waitParentChange(maskParentChange);
             }
         }
     }));
 }
 
+function eraserParentChange(parent) {
+    parent.__updateEraser();
+}
+
 function eraserType(defaultValue) {
     return decorateLeafAttr(defaultValue, key => attr({
         set(value) {
-            this.__setAttr(key, value) && this.waitParent(() => {
-                this.parent.__updateEraser(value);
-            });
+            this.__setAttr(key, value) && this.waitParentChange(eraserParentChange);
         }
     }));
 }
@@ -6473,6 +6478,11 @@ let Leaf = class Leaf {
         this.__hasMask = this.__hasEraser = null;
         this.forceUpdate();
     }
+    waitParentChange(item) {
+        this.__parentChange || (this.__parentChange = []);
+        if (!this.__parentChange.includes(item)) this.__parentChange.push(item);
+        if (this.parent) item(this.parent, this);
+    }
     waitParent(item, bind) {
         if (bind) item = item.bind(bind);
         this.parent ? item() : this.on(ChildEvent.ADD, item, "once");
@@ -6560,8 +6570,8 @@ let Leaf = class Leaf {
     __extraUpdate() {
         if (this.leaferIsReady) this.leafer.layouter.addExtra(this);
     }
-    __updateEraser(value) {
-        this.__hasEraser = value ? true : this.children.some(item => item.__.eraser);
+    __updateEraser() {
+        this.__hasEraser = this.children.some(item => item.__.eraser);
     }
     __renderEraser(canvas, options) {
         canvas.save();
@@ -6570,7 +6580,7 @@ let Leaf = class Leaf {
         canvas.clearRect(r.x, r.y, r.width, r.height);
         canvas.restore();
     }
-    __updateMask(_value) {
+    __updateMask() {
         const hasMask = this.children.some(item => item.__.mask && item.__.visible && item.__.opacity);
         this.__hasMask = this.__.maskskip ? hasMask && 0 : hasMask;
     }
@@ -6824,6 +6834,7 @@ let Branch = class Branch extends Leaf {
         const childLayout = child.__layout;
         childLayout.boxChanged || childLayout.boxChange();
         childLayout.matrixChanged || childLayout.matrixChange();
+        if (child.__parentChange) child.__parentChange.forEach(item => item(this, child));
         if (child.__bubbleMap) child.__emitLifeEvent(ChildEvent.ADD);
         if (this.isFrame) child.__bindFrame(this);
         if (this.leafer) {
@@ -7046,7 +7057,7 @@ class LeafLevelList {
     }
 }
 
-const version = "2.2.9";
+const version = "2.2.11";
 
 const debug$5 = Debug.get("LeaferCanvas");
 
@@ -8785,7 +8796,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 +8834,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 +9919,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 +10025,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 +11989,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 +12001,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 +13160,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 +13259,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 +13286,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 +13309,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 +13349,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 +13397,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 +13410,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 +13430,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) {