leafer-game 1.6.1 → 1.6.2

package/dist/web.cjs

@@ -45,4 +45,3 @@ Object.keys(find).forEach(function (k) {
 		get: function () { return find[k]; }
 	});
 });
-//# sourceMappingURL=web.cjs.map

package/dist/web.esm.js

@@ -4,4 +4,3 @@ export * from '@leafer-in/state';
 export * from '@leafer-in/animate';
 export * from '@leafer-in/motion-path';
 export * from '@leafer-in/find';
-//# sourceMappingURL=web.esm.js.map

package/dist/web.js

@@ -2592,7 +2592,11 @@ var LeaferUI = (function (exports) {
             const point = {};
             getPointAndSet(t, fromX, fromY, x1, y1, x2, y2, toX, toY, point);
             return point;
-        }
+        },
+        getDerivative(t, fromV, v1, v2, toV) {
+            const o = 1 - t;
+            return 3 * o * o * (v1 - fromV) + 6 * o * t * (v2 - v1) + 3 * t * t * (toV - v2);
+        },
     };
     const { getPointAndSet, toTwoPointBounds: toTwoPointBounds$1, ellipse: ellipse$6 } = BezierHelper;
 
@@ -3773,8 +3777,11 @@ var LeaferUI = (function (exports) {
         load(onSuccess, onError) {
             if (!this.loading) {
                 this.loading = true;
+                let { loadImage, loadImageWithProgress } = Platform.origin, onProgress = this.config.showProgress && loadImageWithProgress && this.onProgress.bind(this);
+                if (onProgress)
+                    loadImage = loadImageWithProgress;
                 Resource.tasker.add(() => __awaiter(this, void 0, void 0, function* () {
-                    return yield Platform.origin.loadImage(this.url).then(img => this.setView(img)).catch((e) => {
+                    return yield loadImage(this.url, onProgress).then(img => this.setView(img)).catch((e) => {
                         this.error = e;
                         this.onComplete(false);
                     });
@@ -3799,6 +3806,9 @@ var LeaferUI = (function (exports) {
             this.view = img;
             this.onComplete(true);
         }
+        onProgress(progress) {
+            this.progress = progress;
+        }
         onComplete(isSuccess) {
             let odd;
             this.waitComplete.forEach((item, index) => {
@@ -4264,13 +4274,20 @@ var LeaferUI = (function (exports) {
             if (leaf.isBranch) {
                 const { children } = leaf;
                 for (let i = 0, len = children.length; i < len; i++) {
-                    updateAllWorldOpacity$1(children[i]);
+                    updateAllWorldOpacity(children[i]);
                 }
             }
         },
-        updateAllChange(leaf) {
-            updateAllWorldOpacity$1(leaf);
+        updateChange(leaf) {
+            const layout = leaf.__layout;
+            if (layout.stateStyleChanged)
+                leaf.updateState();
+            if (layout.opacityChanged)
+                updateAllWorldOpacity(leaf);
             leaf.__updateChange();
+        },
+        updateAllChange(leaf) {
+            updateChange$1(leaf);
             if (leaf.isBranch) {
                 const { children } = leaf;
                 for (let i = 0, len = children.length; i < len; i++) {
@@ -4406,7 +4423,7 @@ var LeaferUI = (function (exports) {
         }
     };
     const L$1 = LeafHelper;
-    const { updateAllMatrix: updateAllMatrix$4, updateMatrix: updateMatrix$3, updateAllWorldOpacity: updateAllWorldOpacity$1, updateAllChange: updateAllChange$1 } = L$1;
+    const { updateAllMatrix: updateAllMatrix$4, updateMatrix: updateMatrix$3, updateAllWorldOpacity, updateAllChange: updateAllChange$1, updateChange: updateChange$1 } = L$1;
     function getTempLocal(t, world) {
         t.__layout.update();
         return t.parent ? PointHelper.tempToInnerOf(world, t.parent.__world) : world;
@@ -6128,7 +6145,7 @@ var LeaferUI = (function (exports) {
         }
     }
 
-    const version = "1.6.1";
+    const version = "1.6.2";
 
     const debug$5 = Debug.get('LeaferCanvas');
     class LeaferCanvas extends LeaferCanvasBase {
@@ -6494,7 +6511,7 @@ var LeaferUI = (function (exports) {
         }
     }
 
-    const { updateAllMatrix: updateAllMatrix$2, updateBounds: updateOneBounds, updateAllWorldOpacity } = LeafHelper;
+    const { updateAllMatrix: updateAllMatrix$2, updateBounds: updateOneBounds, updateChange: updateOneChange } = LeafHelper;
     const { pushAllChildBranch, pushAllParent } = BranchHelper;
     function updateMatrix$1(updateList, levelList) {
         let layout;
@@ -6537,15 +6554,7 @@ var LeaferUI = (function (exports) {
         });
     }
     function updateChange(updateList) {
-        let layout;
-        updateList.list.forEach(leaf => {
-            layout = leaf.__layout;
-            if (layout.opacityChanged)
-                updateAllWorldOpacity(leaf);
-            if (layout.stateStyleChanged)
-                setTimeout(() => layout.stateStyleChanged && leaf.updateState());
-            leaf.__updateChange();
-        });
+        updateList.list.forEach(updateOneChange);
     }
 
     const { worldBounds } = LeafBoundsHelper;
@@ -7390,13 +7399,11 @@ var LeaferUI = (function (exports) {
         setFontWeight(value) {
             if (typeof value === 'string') {
                 this.__setInput('fontWeight', value);
-                this._fontWeight = fontWeightMap[value] || 400;
-            }
-            else {
-                if (this.__input)
-                    this.__removeInput('fontWeight');
-                this._fontWeight = value;
+                value = fontWeightMap[value] || 400;
             }
+            else if (this.__input)
+                this.__removeInput('fontWeight');
+            this._fontWeight = value;
         }
         setBoxStyle(value) {
             let t = this.__leaf, box = t.__box;
@@ -7723,6 +7730,9 @@ var LeaferUI = (function (exports) {
             else
                 drawer.rect(x, y, width, height);
         }
+        drawImagePlaceholder(canvas, _image) {
+            Paint.fill(this.__.placeholderColor, this, canvas);
+        }
         animate(_keyframe, _options, _type, _isTemp) {
             return Plugin.need('animate');
         }
@@ -7959,6 +7969,9 @@ var LeaferUI = (function (exports) {
     __decorate([
         effectType()
     ], exports.UI.prototype, "filter", void 0);
+    __decorate([
+        surfaceType()
+    ], exports.UI.prototype, "placeholderColor", void 0);
     __decorate([
         dataType({})
     ], exports.UI.prototype, "data", void 0);
@@ -8789,10 +8802,11 @@ var LeaferUI = (function (exports) {
         get ready() { return this.image ? this.image.ready : false; }
         constructor(data) {
             super(data);
-            this.on(ImageEvent.LOADED, (e) => {
-                if (e.attrName === 'fill' && e.attrValue.url === this.url)
-                    this.image = e.image;
-            });
+            this.on_(ImageEvent.LOADED, this.__onLoaded, this);
+        }
+        __onLoaded(e) {
+            if (e.attrName === 'fill' && e.attrValue.url === this.url)
+                this.image = e.image;
         }
         destroy() {
             this.image = null;
@@ -8906,7 +8920,7 @@ var LeaferUI = (function (exports) {
             data.__baseLine = data.__lineHeight - (data.__lineHeight - fontSize * 0.7) / 2;
             data.__font = `${italic ? 'italic ' : ''}${textCase === 'small-caps' ? 'small-caps ' : ''}${fontWeight !== 'normal' ? fontWeight + ' ' : ''}${fontSize}px ${fontFamily}`;
             data.__clipText = textOverflow !== 'show' && !data.__autoSize;
-            data.__textDrawData = TextConvert.getDrawData(data.text, this.__);
+            data.__textDrawData = TextConvert.getDrawData((data.__isPlacehold = data.placeholder && data.text === '') ? data.placeholder : data.text, this.__);
         }
         __updateBoxBounds() {
             const data = this.__;
@@ -9004,6 +9018,9 @@ var LeaferUI = (function (exports) {
     __decorate([
         boundsType('')
     ], exports.Text.prototype, "text", void 0);
+    __decorate([
+        boundsType('')
+    ], exports.Text.prototype, "placeholder", void 0);
     __decorate([
         boundsType('caption')
     ], exports.Text.prototype, "fontFamily", void 0);
@@ -10738,8 +10755,10 @@ var LeaferUI = (function (exports) {
     }
 
     function fillText(ui, canvas) {
-        let row, data = ui.__.__textDrawData;
-        const { rows, decorationY } = data;
+        const data = ui.__, { rows, decorationY } = data.__textDrawData;
+        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)
@@ -10748,7 +10767,7 @@ var LeaferUI = (function (exports) {
                 row.data.forEach(charData => { canvas.fillText(charData.char, charData.x, row.y); });
         }
         if (decorationY) {
-            const { decorationColor, decorationHeight } = data;
+            const { decorationColor, decorationHeight } = data.__textDrawData;
             if (decorationColor)
                 canvas.fillStyle = decorationColor;
             rows.forEach(row => decorationY.forEach(value => canvas.fillRect(row.x, row.y + value, row.width, decorationHeight)));
@@ -10757,38 +10776,44 @@ var LeaferUI = (function (exports) {
 
     function fill(fill, ui, canvas) {
         canvas.fillStyle = fill;
-        ui.__.__font ? fillText(ui, canvas) : (ui.__.windingRule ? canvas.fill(ui.__.windingRule) : canvas.fill());
+        fillPathOrText(ui, canvas);
     }
     function fills(fills, ui, canvas) {
         let item;
-        const { windingRule, __font } = ui.__;
         for (let i = 0, len = fills.length; i < len; i++) {
             item = fills[i];
-            if (item.image && PaintImage.checkImage(ui, canvas, item, !__font))
-                continue;
-            if (item.style) {
-                canvas.fillStyle = item.style;
-                if (item.transform) {
-                    canvas.save();
-                    canvas.transform(item.transform);
-                    if (item.blendMode)
-                        canvas.blendMode = item.blendMode;
-                    __font ? fillText(ui, canvas) : (windingRule ? canvas.fill(windingRule) : canvas.fill());
-                    canvas.restore();
+            if (item.image) {
+                if (PaintImage.checkImage(ui, canvas, item, !ui.__.__font))
+                    continue;
+                if (!item.style) {
+                    if (!i && item.image.isPlacehold)
+                        ui.drawImagePlaceholder(canvas, item.image);
+                    continue;
                 }
-                else {
-                    if (item.blendMode) {
-                        canvas.saveBlendMode(item.blendMode);
-                        __font ? fillText(ui, canvas) : (windingRule ? canvas.fill(windingRule) : canvas.fill());
-                        canvas.restoreBlendMode();
-                    }
-                    else {
-                        __font ? fillText(ui, canvas) : (windingRule ? canvas.fill(windingRule) : canvas.fill());
-                    }
+            }
+            canvas.fillStyle = item.style;
+            if (item.transform) {
+                canvas.save();
+                canvas.transform(item.transform);
+                if (item.blendMode)
+                    canvas.blendMode = item.blendMode;
+                fillPathOrText(ui, canvas);
+                canvas.restore();
+            }
+            else {
+                if (item.blendMode) {
+                    canvas.saveBlendMode(item.blendMode);
+                    fillPathOrText(ui, canvas);
+                    canvas.restoreBlendMode();
                 }
+                else
+                    fillPathOrText(ui, canvas);
             }
         }
     }
+    function fillPathOrText(ui, canvas) {
+        ui.__.__font ? fillText(ui, canvas) : (ui.__.windingRule ? canvas.fill(ui.__.windingRule) : canvas.fill());
+    }
 
     function strokeText(stroke, ui, canvas) {
         const { strokeAlign } = ui.__;
@@ -11028,6 +11053,7 @@ var LeaferUI = (function (exports) {
         compute,
         fill,
         fills,
+        fillPathOrText,
         fillText,
         stroke,
         strokes,
@@ -11220,6 +11246,13 @@ var LeaferUI = (function (exports) {
                 onLoadError(ui, event, error);
                 leafPaint.loadId = null;
             });
+            if (ui.placeholderColor)
+                setTimeout(() => {
+                    if (!(image.ready || image.isPlacehold)) {
+                        image.isPlacehold = true;
+                        ui.forceUpdate('surface');
+                    }
+                }, 100);
         }
         return leafPaint;
     }
@@ -12419,7 +12452,10 @@ var LeaferUI = (function (exports) {
         return decorateLeafAttr(defaultValue, (key) => attr({
             set(value) {
                 this.__setAttr(key, value);
-                this.waitLeafer(() => styleName ? State.setStyleName(this, styleName, value) : State.set(this, value));
+                if (this.leaferIsReady)
+                    styleName ? State.setStyleName(this, styleName, value) : State.set(this, value);
+                else
+                    this.__layout.stateStyleChanged = true;
             }
         }));
     }
@@ -12516,6 +12552,9 @@ var LeaferUI = (function (exports) {
         const selectedStyle = style.selectedStyle || leaf.selectedStyle;
         if (selectedStyle && State.isSelected(leaf, button))
             exist = assign(style, selectedStyle);
+        const placeholderStyle = style.placeholderStyle || leaf.placeholderStyle;
+        if (placeholderStyle && State.isPlacehold(leaf, button))
+            exist = assign(style, placeholderStyle);
         if (State.isDisabled(leaf, button)) {
             const disabledStyle = style.disabledStyle || leaf.disabledStyle;
             if (disabledStyle)
@@ -12695,12 +12734,14 @@ var LeaferUI = (function (exports) {
         transitionOut: 1,
         states: 1,
         state: 1,
+        placeholder: 1,
         normalStyle: 1,
         hoverStyle: 1,
         pressStyle: 1,
         focusStyle: 1,
         selectedStyle: 1,
-        disabledStyle: 1
+        disabledStyle: 1,
+        placeholderStyle: 1
     };
     State.isState = function (state, leaf, button) { return checkState(state, leaf, button); };
     State.isSelected = function (leaf, button) { return checkFixedState('selected', leaf, button); };
@@ -12708,6 +12749,7 @@ var LeaferUI = (function (exports) {
     State.isFocus = function (leaf, button) { return checkPointerState('isFocus', leaf, button); };
     State.isHover = function (leaf, button) { return checkPointerState('isHover', leaf, button); };
     State.isPress = function (leaf, button) { return checkPointerState('isPress', leaf, button); };
+    State.isPlacehold = function (leaf, _button) { return leaf.__.__isPlacehold; };
     State.isDrag = function (leaf, button) { return checkPointerState('isDrag', leaf, button); };
     State.setStyleName = function (leaf, stateType, value) { value ? setState(leaf, stateType, leaf[stateType]) : unsetState(leaf, stateType, leaf[stateType]); };
     State.set = function (leaf, stateName) { const style = leaf.states[stateName]; style ? setState(leaf, stateName, style) : unsetState(leaf, stateName, style); };
@@ -12725,6 +12767,7 @@ var LeaferUI = (function (exports) {
     exports.UI.addAttr('focusStyle', undefined, stateStyleType);
     exports.UI.addAttr('selectedStyle', undefined, stateStyleType);
     exports.UI.addAttr('disabledStyle', undefined, stateStyleType);
+    exports.UI.addAttr('placeholderStyle', undefined, stateStyleType);
     exports.UI.addAttr('button', false, dataType);
     ui$3.focus = function (value = true) {
         this.waitLeafer(() => {
@@ -12743,6 +12786,15 @@ var LeaferUI = (function (exports) {
     ui$3.updateState = function () {
         State.updateStyle(this, undefined, 'in');
     };
+    const text = exports.Text.prototype, textKey = 'text';
+    defineKey(text, textKey, Object.assign(Object.assign({}, getDescriptor(text, textKey)), { set(value) {
+            const t = this, oldValue = t.text;
+            if (t.__setAttr(textKey, value)) {
+                doBoundsType(t);
+                if (t.placeholderStyle && t.placeholder && (oldValue === '' || value === ''))
+                    t.__layout.stateStyleChanged = true;
+            }
+        } }));
 
     const { cos, sin, pow, sqrt: sqrt$1, abs, ceil, floor, round: round$2, PI } = Math;
     const PIx5 = PI * 5;
@@ -13797,6 +13849,7 @@ var LeaferUI = (function (exports) {
     const gaussNodes = [0.1488743389, 0.4333953941, 0.6794095682, 0.8650633666, 0.9739065285];
     const gaussWeights = [0.2955242247, 0.2692667193, 0.2190863625, 0.1494513491, 0.0666713443];
     const { sqrt } = Math;
+    const { getDerivative } = BezierHelper;
     const HighBezierHelper = {
         getDistance(fromX, fromY, x1, y1, x2, y2, toX, toY, t = 1) {
             let distance = 0, t1, t2, d1X, d1Y, d2X, d2Y, half = t / 2;
@@ -13811,10 +13864,6 @@ var LeaferUI = (function (exports) {
             }
             return distance * half;
         },
-        getDerivative(t, fromV, v1, v2, toV) {
-            const o = 1 - t;
-            return 3 * o * o * (v1 - fromV) + 6 * o * t * (v2 - v1) + 3 * t * t * (toV - v2);
-        },
         getRotation(t, fromX, fromY, x1, y1, x2, y2, toX, toY) {
             const dx = getDerivative(t, fromX, x1, x2, toX);
             const dy = getDerivative(t, fromY, y1, y2, toY);
@@ -13843,7 +13892,7 @@ var LeaferUI = (function (exports) {
             data.push(PathCommandMap.C, ax, ay, bx, by, cx, cy);
         }
     };
-    const { getDerivative, getDistance } = HighBezierHelper;
+    const { getDistance } = HighBezierHelper;
 
     const { M, L, C, Z } = PathCommandMap;
     const tempPoint = {}, tempFrom = {};
@@ -14466,4 +14515,7 @@ var LeaferUI = (function (exports) {
     return exports;
 
 })({});
-//# sourceMappingURL=web.js.map
+
+function Leafer(opt) { return new LeaferUI.Leafer(opt); }
+Object.setPrototypeOf(Leafer, LeaferUI);
+Leafer.prototype = LeaferUI.Leafer.prototype;