leafer-game 1.6.1 → 1.6.2

package/dist/web.module.js

@@ -2589,7 +2589,11 @@ const BezierHelper = {
         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;
 
@@ -3770,8 +3774,11 @@ class LeaferImage {
     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);
                 });
@@ -3796,6 +3803,9 @@ class LeaferImage {
         this.view = img;
         this.onComplete(true);
     }
+    onProgress(progress) {
+        this.progress = progress;
+    }
     onComplete(isSuccess) {
         let odd;
         this.waitComplete.forEach((item, index) => {
@@ -4261,13 +4271,20 @@ const LeafHelper = {
         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++) {
@@ -4403,7 +4420,7 @@ const LeafHelper = {
     }
 };
 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;
@@ -6125,7 +6142,7 @@ class LeafLevelList {
     }
 }
 
-const version = "1.6.1";
+const version = "1.6.2";
 
 const debug$5 = Debug.get('LeaferCanvas');
 class LeaferCanvas extends LeaferCanvasBase {
@@ -6491,7 +6508,7 @@ class Watcher {
     }
 }
 
-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;
@@ -6534,15 +6551,7 @@ function updateBounds$1(boundsList) {
     });
 }
 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;
@@ -7387,13 +7396,11 @@ class TextData extends UIData {
     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;
@@ -7720,6 +7727,9 @@ let UI = UI_1 = class UI extends Leaf {
         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');
     }
@@ -7956,6 +7966,9 @@ __decorate([
 __decorate([
     effectType()
 ], UI.prototype, "filter", void 0);
+__decorate([
+    surfaceType()
+], UI.prototype, "placeholderColor", void 0);
 __decorate([
     dataType({})
 ], UI.prototype, "data", void 0);
@@ -8786,10 +8799,11 @@ let Image$1 = class Image extends Rect {
     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;
@@ -8903,7 +8917,7 @@ let Text = class Text extends UI {
         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.__;
@@ -9001,6 +9015,9 @@ __decorate([
 __decorate([
     boundsType('')
 ], Text.prototype, "text", void 0);
+__decorate([
+    boundsType('')
+], Text.prototype, "placeholder", void 0);
 __decorate([
     boundsType('caption')
 ], Text.prototype, "fontFamily", void 0);
@@ -10735,8 +10752,10 @@ class Interaction extends InteractionBase {
 }
 
 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)
@@ -10745,7 +10764,7 @@ function fillText(ui, canvas) {
             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)));
@@ -10754,38 +10773,44 @@ function fillText(ui, canvas) {
 
 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.__;
@@ -11025,6 +11050,7 @@ const PaintModule = {
     compute,
     fill,
     fills,
+    fillPathOrText,
     fillText,
     stroke,
     strokes,
@@ -11217,6 +11243,13 @@ function image(ui, attrName, paint, boxBounds, firstUse) {
             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;
 }
@@ -12416,7 +12449,10 @@ function stateType(defaultValue, styleName) {
     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;
         }
     }));
 }
@@ -12513,6 +12549,9 @@ function getStyle(leaf) {
     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)
@@ -12692,12 +12731,14 @@ State.animateExcludes = {
     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); };
@@ -12705,6 +12746,7 @@ State.isDisabled = function (leaf, button) { return checkFixedState('disabled',
 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); };
@@ -12722,6 +12764,7 @@ UI.addAttr('pressStyle', undefined, stateStyleType);
 UI.addAttr('focusStyle', undefined, stateStyleType);
 UI.addAttr('selectedStyle', undefined, stateStyleType);
 UI.addAttr('disabledStyle', undefined, stateStyleType);
+UI.addAttr('placeholderStyle', undefined, stateStyleType);
 UI.addAttr('button', false, dataType);
 ui$3.focus = function (value = true) {
     this.waitLeafer(() => {
@@ -12740,6 +12783,15 @@ ui$3.focus = function (value = true) {
 ui$3.updateState = function () {
     State.updateStyle(this, undefined, 'in');
 };
+const text = 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;
@@ -13794,6 +13846,7 @@ ui$2.__runAnimation = function (type, complete) {
 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;
@@ -13808,10 +13861,6 @@ const HighBezierHelper = {
         }
         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);
@@ -13840,7 +13889,7 @@ const HighBezierHelper = {
         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 = {};
@@ -14281,4 +14330,3 @@ Creator.finder = function (target) {
 };
 
 export { AlignHelper, Animate, AnimateEasing, AnimateEvent, AnimateList, Answer, App, AroundHelper, AutoBounds, BezierHelper, Bounds, BoundsHelper, Box, BoxData, Branch, BranchHelper, BranchRender, Canvas, CanvasData, CanvasManager, ChildEvent, ColorConvert, Creator, Cursor, DataHelper, Debug, Direction4, Direction9, DragEvent$1 as DragEvent, Dragger, DropEvent, Effect, Ellipse, EllipseData, EllipseHelper, Event, EventCreator, Eventer, Export, FileHelper, Filter, Finder, Frame, FrameData, Group, GroupData, HighBezierHelper, HighCurveHelper, HitCanvasManager, Image$1 as Image, ImageData, ImageEvent, ImageManager, IncrementId, Interaction, InteractionBase, InteractionHelper, KeyEvent, Keyboard, LayoutEvent, Layouter, Leaf, LeafBounds, LeafBoundsHelper, LeafData, LeafDataProxy, LeafEventer, LeafHelper, LeafLayout, LeafLevelList, LeafList, LeafMatrix, LeafRender, Leafer, LeaferCanvas, LeaferCanvasBase, LeaferData, LeaferEvent, LeaferImage, Line, LineData, MathHelper, Matrix, MatrixHelper, MoveEvent, MyDragEvent, MyImage, MyPointerEvent, NeedConvertToCanvasCommandMap, OneRadian, PI2, PI_2, Paint, PaintGradient, PaintImage, Path, PathArrow, PathBounds, PathCommandDataHelper, PathCommandMap, PathConvert, PathCorner, PathCreator, PathData, PathDrawer, PathHelper, PathNumberCommandLengthMap, PathNumberCommandMap, Pen, PenData, Picker, Platform, Plugin, Point, PointHelper, PointerButton, PointerEvent$1 as PointerEvent, Polygon, PolygonData, PropertyEvent, Rect, RectData, RectHelper, RectRender, RenderEvent, Renderer, ResizeEvent, Resource, Robot, RobotData, RotateEvent, Run, Selector, Star, StarData, State, StringNumberMap, SwipeEvent, TaskItem, TaskProcessor, Text, TextConvert, TextData, Transition, TwoPointBoundsHelper, UI, UIBounds, UICreator, UIData, UIEvent, UIRender, UnitConvert, WaitHelper, WatchEvent, Watcher, ZoomEvent, affectRenderBoundsType, affectStrokeBoundsType, attr, autoLayoutType, boundsType, canvasPatch, canvasSizeAttrs, cursorType, dataProcessor, dataType, decorateLeafAttr, defineDataProcessor, defineKey, defineLeafAttr, doBoundsType, doStrokeType, effectType, emptyData, eraserType, getBoundsData, getDescriptor, getMatrixData, getPointData, hitType, isEmptyData, isNull, layoutProcessor, maskType, motionPathType, naturalBoundsType, opacityType, pathInputType, pathType, pen, positionType, registerUI, registerUIEvent, resizeType, rewrite, rewriteAble, rotationType, scaleType, sortType, stateStyleType, stateType, strokeType, surfaceType, tempBounds$1 as tempBounds, tempMatrix, tempPoint$4 as tempPoint, useCanvas, useModule, version, visibleType, zoomLayerType };
-//# sourceMappingURL=web.module.js.map