leafer-game 1.3.1 → 1.3.2

package/dist/web.js

@@ -6010,7 +6010,7 @@ var LeaferUI = (function (exports) {
         }
     }
 
-    const version = "1.3.1";
+    const version = "1.3.2";
 
     const debug$5 = Debug.get('LeaferCanvas');
     class LeaferCanvas extends LeaferCanvasBase {
@@ -6229,7 +6229,7 @@ var LeaferUI = (function (exports) {
             },
             loadImage(src) {
                 return new Promise((resolve, reject) => {
-                    const img = new Image();
+                    const img = new Platform.origin.Image();
                     const { crossOrigin } = Platform.image;
                     if (crossOrigin) {
                         img.setAttribute('crossOrigin', crossOrigin);
@@ -6239,7 +6239,10 @@ var LeaferUI = (function (exports) {
                     img.onerror = (e) => { reject(e); };
                     img.src = Platform.image.getRealURL(src);
                 });
-            }
+            },
+            Image,
+            PointerEvent,
+            DragEvent
         };
         Platform.event = {
             stopDefault(origin) { origin.preventDefault(); },
@@ -6715,7 +6718,7 @@ var LeaferUI = (function (exports) {
         partRender() {
             const { canvas, updateBlocks: list } = this;
             if (!list)
-                return debug$3.warn('PartRender: need update attr');
+                return;
             this.mergeBlocks();
             list.forEach(block => { if (canvas.bounds.hit(block) && !block.isEmpty())
                 this.clipRender(block); });
@@ -7571,7 +7574,7 @@ var LeaferUI = (function (exports) {
         animate(_keyframe, _options, _type, _isTemp) {
             return Plugin.need('animate');
         }
-        killAnimate(_type, _killStyle) { }
+        killAnimate(_type, _nextStyle) { }
         export(_filename, _options) {
             return Plugin.need('export');
         }
@@ -8067,8 +8070,6 @@ var LeaferUI = (function (exports) {
             this.created = true;
         }
         __onReady() {
-            if (this.ready)
-                return;
             this.ready = true;
             this.emitLeafer(LeaferEvent.BEFORE_READY);
             this.emitLeafer(LeaferEvent.READY);
@@ -8082,6 +8083,20 @@ var LeaferUI = (function (exports) {
             this.emitLeafer(LeaferEvent.VIEW_READY);
             WaitHelper.run(this.__viewReadyWait);
         }
+        __onLayoutEnd() {
+            const { grow, growWidth, growHeight } = this.config;
+            if (grow) {
+                let { width, height, pixelRatio } = this;
+                const bounds = grow === 'box' ? this.worldBoxBounds : this.__world;
+                if (growWidth !== false)
+                    width = Math.max(1, bounds.x + bounds.width);
+                if (growHeight !== false)
+                    height = Math.max(1, bounds.y + bounds.height);
+                this.__doResize({ width, height, pixelRatio });
+            }
+            if (!this.ready)
+                this.__onReady();
+        }
         __onNextRender() {
             if (this.viewReady) {
                 WaitHelper.run(this.__nextRenderWait);
@@ -8175,10 +8190,9 @@ var LeaferUI = (function (exports) {
             const runId = Run.start('FirstCreate ' + this.innerName);
             this.once(LeaferEvent.START, () => Run.end(runId));
             this.once(LayoutEvent.START, () => this.updateLazyBounds());
-            this.once(LayoutEvent.END, () => this.__onReady());
             this.once(RenderEvent.START, () => this.__onCreated());
             this.once(RenderEvent.END, () => this.__onViewReady());
-            this.__eventIds.push(this.on_(WatchEvent.DATA, this.__onWatchData, this), this.on_(RenderEvent.NEXT, this.__onNextRender, this));
+            this.__eventIds.push(this.on_(WatchEvent.DATA, this.__onWatchData, this), this.on_(LayoutEvent.END, this.__onLayoutEnd, this), this.on_(RenderEvent.NEXT, this.__onNextRender, this));
         }
         __removeListenEvents() {
             this.off_(this.__eventIds);
@@ -11729,7 +11743,7 @@ var LeaferUI = (function (exports) {
         rows.forEach(row => {
             if (row.words) {
                 indentWidth = paraIndent && row.paraStart ? paraIndent : 0;
-                addWordWidth = (width && textAlign === 'justify' && row.words.length > 1) ? (width - row.width - indentWidth) / (row.words.length - 1) : 0;
+                addWordWidth = (width && (textAlign === 'justify' || textAlign === 'both') && row.words.length > 1) ? (width - row.width - indentWidth) / (row.words.length - 1) : 0;
                 mode = (letterSpacing || row.isOverflow) ? CharMode : (addWordWidth > 0.01 ? WordMode : TextMode);
                 if (row.isOverflow && !letterSpacing)
                     row.textMode = true;
@@ -11751,7 +11765,7 @@ var LeaferUI = (function (exports) {
                         else {
                             charX = toChar(word.data, charX, row.data, row.isOverflow);
                         }
-                        if (!row.paraEnd && addWordWidth) {
+                        if (addWordWidth && (!row.paraEnd || textAlign === 'both')) {
                             charX += addWordWidth;
                             row.width += addWordWidth;
                         }
@@ -12226,7 +12240,9 @@ var LeaferUI = (function (exports) {
             type = null;
         let transition = type ? getTransition(type, style, leaf) : false;
         const fromStyle = transition ? getFromStyle(leaf, style) : undefined;
-        leaf.killAnimate('transition');
+        const nextStyle = State.canAnimate && getStyle(leaf);
+        if (nextStyle)
+            leaf.killAnimate('transition');
         if (normalStyle)
             leaf.set(normalStyle, 'temp');
         const statesStyle = getStyle(leaf);
@@ -12599,8 +12615,11 @@ var LeaferUI = (function (exports) {
         return decorateLeafAttr(defaultValue, (key) => attr({
             set(value) {
                 this.__setAttr(key, value);
-                if (this.leafer)
-                    value ? this.animate(value, undefined, 'animation') : this.killAnimate('animation');
+                if (this.leafer) {
+                    this.killAnimate('animation');
+                    if (value)
+                        this.animate(value, undefined, 'animation');
+                }
             }
         }));
     }
@@ -12637,6 +12656,7 @@ var LeaferUI = (function (exports) {
         get completed() { return this.time >= this.duration && !this.started; }
         get frame() { return this.frames[this.nowIndex]; }
         get frameTotalTime() { return this.frame.totalTime || this.frame.duration || 0; }
+        get nowReverse() { return (this.mainReverse ? 1 : 0) + (this.frameReverse ? 1 : 0) === 1; }
         get realEnding() {
             let count;
             const { ending, reverse, loop } = this;
@@ -12653,6 +12673,12 @@ var LeaferUI = (function (exports) {
         }
         constructor(target, keyframe, options, isTemp) {
             super();
+            if (keyframe) {
+                if (keyframe.keyframes)
+                    options = keyframe, keyframe = keyframe.keyframes;
+                else if (keyframe.style)
+                    options = keyframe, keyframe = keyframe.style;
+            }
             this.init(target, keyframe, options, isTemp);
         }
         init(target, keyframe, options, isTemp) {
@@ -12668,16 +12694,14 @@ var LeaferUI = (function (exports) {
                     break;
                 case 'object': this.config = options, options.event && (this.event = options.event);
             }
-            if (!keyframe)
-                return;
-            this.keyframes = keyframe instanceof Array ? keyframe : [keyframe];
+            this.keyframes = keyframe instanceof Array ? keyframe : (keyframe ? [keyframe] : []);
             const { easing, attrs } = this;
             this.easingFn = AnimateEasing.get(easing);
             if (attrs || this.attrsMap)
                 this.attrsMap = attrs ? attrs.reduce((map, value) => { map[value] = true; return map; }, {}) : undefined;
             this.frames = [];
             this.create();
-            if (this.autoplay)
+            if (this.autoplay && this.frames.length)
                 this.timer = setTimeout(() => {
                     this.timer = 0;
                     this.play();
@@ -12726,7 +12750,7 @@ var LeaferUI = (function (exports) {
         }
         create() {
             const { target, frames, keyframes, config } = this, { length } = keyframes, joinBefore = length > 1 ? this.join : true;
-            let addedDuration = 0, totalAutoDuration = 0, before, keyframe, item, style;
+            let totalTime = 0, totalAutoTime = 0, before, keyframe, item, style, times;
             if (length > 1)
                 this.fromStyle = {}, this.toStyle = {};
             for (let i = 0; i < length; i++) {
@@ -12735,27 +12759,32 @@ var LeaferUI = (function (exports) {
                 if (!before)
                     before = joinBefore ? target : style;
                 item = { style, beforeStyle: {} };
+                times = 1;
                 if (keyframe.style) {
-                    const { duration, autoDuration, delay, autoDelay, easing } = keyframe;
+                    const { duration, autoDuration, delay, autoDelay, easing, swing, loop } = keyframe;
+                    if (swing)
+                        item.swing = typeof swing === 'number' ? swing : 2, times = item.swing * 2 - 1;
+                    if (loop)
+                        item.loop = times = typeof loop === 'number' ? loop : 2;
                     if (duration) {
-                        item.duration = duration, addedDuration += duration;
+                        item.duration = duration, totalTime += duration * times;
                         if (delay)
                             item.totalTime = duration + delay;
                     }
                     else {
                         if (autoDuration)
-                            item.autoDuration = autoDuration, totalAutoDuration += autoDuration;
+                            item.autoDuration = autoDuration, totalAutoTime += autoDuration * times;
                     }
                     if (delay)
-                        item.delay = delay, addedDuration += delay;
+                        item.delay = delay, totalTime += delay * times;
                     else if (autoDelay)
-                        item.autoDelay = autoDelay, totalAutoDuration += autoDelay;
+                        item.autoDelay = autoDelay, totalAutoTime += autoDelay * times;
                     if (easing)
                         item.easingFn = AnimateEasing.get(easing);
                 }
                 if (!item.autoDuration && item.duration === undefined) {
                     if (length > 1)
-                        (i > 0 || joinBefore) ? totalAutoDuration++ : item.duration = 0;
+                        (i > 0 || joinBefore) ? totalAutoTime += times : item.duration = 0;
                     else
                         item.duration = this.duration;
                 }
@@ -12771,14 +12800,14 @@ var LeaferUI = (function (exports) {
                 before = style;
                 frames.push(item);
             }
-            if (totalAutoDuration) {
-                if (this.duration <= addedDuration || !(config && config.duration))
-                    this.changeDuration(addedDuration + frameDuration * totalAutoDuration);
-                this.allocateTime((this.duration - addedDuration) / totalAutoDuration);
+            if (totalAutoTime) {
+                if (this.duration <= totalTime || !(config && config.duration))
+                    this.changeDuration(totalTime + frameDuration * totalAutoTime);
+                this.allocateTime((this.duration - totalTime) / totalAutoTime);
             }
             else {
-                if (addedDuration)
-                    this.changeDuration(addedDuration);
+                if (totalTime)
+                    this.changeDuration(totalTime);
             }
             this.emit(AnimateEvent.CREATED, this);
         }
@@ -12805,7 +12834,7 @@ var LeaferUI = (function (exports) {
                     if (frame.autoDelay)
                         frame.delay = frame.autoDelay * partTime;
                     if (frame.delay)
-                        frame.totalTime = frame.duration, frame.totalTime += frame.delay;
+                        frame.totalTime = frame.duration + frame.delay;
                 }
             }
         }
@@ -12823,7 +12852,7 @@ var LeaferUI = (function (exports) {
             if (realTime < duration) {
                 while (realTime - this.playedTotalTime > this.frameTotalTime) {
                     this.transition(1);
-                    this.nowReverse ? this.reverseNextFrame() : this.nextFrame();
+                    this.mainReverse ? this.reverseNextFrame() : this.nextFrame();
                 }
                 const itemDelay = this.nowReverse ? 0 : (this.frame.delay || 0);
                 const itemPlayedTime = realTime - this.playedTotalTime - itemDelay;
@@ -12847,9 +12876,9 @@ var LeaferUI = (function (exports) {
                     const { loop, loopDelay, swing } = this;
                     if (loop !== false || swing) {
                         this.looped ? this.looped++ : this.looped = 1;
-                        if (!(typeof loop === 'number' && (!loop || this.looped >= loop))) {
+                        if (this.needLoop(this.looped, loop, swing)) {
                             if (swing)
-                                this.nowReverse = !this.nowReverse;
+                                this.mainReverse = !this.mainReverse;
                             if (loopDelay)
                                 this.timer = setTimeout(() => { this.timer = 0, this.begin(); }, loopDelay / this.speed * 1000);
                             else
@@ -12864,8 +12893,8 @@ var LeaferUI = (function (exports) {
         start(seek) {
             this.requestAnimateTime = 1;
             const { reverse } = this;
-            if (reverse || this.nowReverse)
-                this.nowReverse = reverse;
+            if (reverse || this.mainReverse)
+                this.mainReverse = reverse;
             if (this.looped)
                 this.looped = 0;
             if (seek)
@@ -12883,12 +12912,12 @@ var LeaferUI = (function (exports) {
         }
         begin(seek) {
             this.playedTotalTime = this.time = 0;
-            this.nowReverse ? this.setTo() : this.setFrom();
+            this.mainReverse ? this.setTo() : this.setFrom();
             if (!seek)
                 this.requestAnimate();
         }
         end() {
-            this.nowReverse ? this.setFrom() : this.setTo();
+            this.mainReverse ? this.setFrom() : this.setTo();
         }
         complete() {
             this.requestAnimateTime = 0;
@@ -12911,15 +12940,19 @@ var LeaferUI = (function (exports) {
             this.setStyle(this.toStyle);
         }
         nextFrame() {
+            if (this.needLoopFrame())
+                return this.increaseTime();
             if (this.nowIndex + 1 >= this.frames.length)
                 return;
-            this.playedTotalTime += this.frameTotalTime;
+            this.increaseTime();
             this.nowIndex++;
         }
         reverseNextFrame() {
+            if (this.needLoopFrame())
+                return this.increaseTime();
             if (this.nowIndex - 1 < 0)
                 return;
-            this.playedTotalTime += this.frameTotalTime;
+            this.increaseTime();
             this.nowIndex--;
         }
         transition(t) {
@@ -12955,6 +12988,27 @@ var LeaferUI = (function (exports) {
                 target.__ ? target.set(style, this.isTemp ? 'temp' : false) : Object.assign(target, style);
             }
         }
+        increaseTime() {
+            this.playedTotalTime += this.frameTotalTime;
+        }
+        needLoop(looped, loop, swing) {
+            return !(this.needStopLoop(looped, loop) || this.needStopLoop(looped, swing, true));
+        }
+        needStopLoop(looped, times, swing) {
+            return typeof times === 'number' && (!times || looped >= (swing ? times * 2 - 1 : times));
+        }
+        needLoopFrame() {
+            const { loop, swing } = this.frame;
+            if (loop || swing) {
+                this.frameLooped ? this.frameLooped++ : this.frameLooped = 1;
+                if (swing)
+                    this.frameReverse = !this.frameReverse;
+                if (this.needLoop(this.frameLooped, loop, swing))
+                    return true;
+                this.frameLooped = this.frameReverse = undefined;
+            }
+            return false;
+        }
         clearTimer(fn) {
             if (this.timer) {
                 clearTimeout(this.timer), this.timer = 0;
@@ -13014,6 +13068,64 @@ var LeaferUI = (function (exports) {
         useModule(LeafEventer)
     ], exports.Animate);
 
+    exports.AnimateList = class AnimateList extends exports.Animate {
+        get completed() { return this.list.every(item => item.completed); }
+        get endingStyle() { return this._endingStyle; }
+        constructor(target, animation, isTemp) {
+            super(target, null);
+            this.list = [];
+            this.updateList(animation, isTemp);
+        }
+        updateList(animation, isTemp) {
+            this.fromStyle = {};
+            this.toStyle = {};
+            this._endingStyle = {};
+            if (!animation)
+                animation = this.list.filter(item => {
+                    const { completed } = item;
+                    if (completed)
+                        item.destroy();
+                    return !completed;
+                });
+            this.list = animation.map(item => {
+                const animate = item.target ? item : new exports.Animate(this.target, item, isTemp);
+                Object.assign(this.fromStyle, animate.fromStyle);
+                Object.assign(this.toStyle, animate.toStyle);
+                Object.assign(this._endingStyle, animate.endingStyle);
+                return animate;
+            });
+        }
+        play() {
+            this.each(item => item.play());
+        }
+        pause() {
+            this.each(item => item.pause());
+        }
+        stop() {
+            this.each(item => item.stop());
+        }
+        seek(time) {
+            this.each(item => item.seek(time));
+        }
+        kill(complete, killStyle) {
+            this.each(item => item.kill(complete, killStyle));
+            this.destroy();
+        }
+        each(func) {
+            this.list.forEach(func);
+        }
+        destroy(complete) {
+            const { list } = this;
+            if (list.length) {
+                this.each(item => item.destroy(complete));
+                list.length = 0;
+            }
+        }
+    };
+    exports.AnimateList = __decorate([
+        useModule(LeafEventer)
+    ], exports.AnimateList);
+
     const colorNames = {
         transparent: 'FFF0',
         aliceblue: 'F0F8FF',
@@ -13394,23 +13506,40 @@ var LeaferUI = (function (exports) {
     ui$2.animate = function (keyframe, options, kill, isTemp) {
         if (keyframe === undefined)
             return this.__animate;
-        if (typeof keyframe === 'object') {
-            if (keyframe.keyframes)
-                options = keyframe, keyframe = keyframe.keyframes;
-            else if (keyframe.style)
-                options = keyframe, keyframe = keyframe.style;
-        }
-        const animate = new exports.Animate(this, keyframe, options, isTemp);
-        this.killAnimate(kill, animate.toStyle);
-        return this.__animate = animate;
+        const isAnimationList = keyframe instanceof Array && !options && kill;
+        let nextAnimate = isAnimationList ? new exports.AnimateList(this, keyframe, isTemp) : new exports.Animate(this, keyframe, options, isTemp);
+        this.killAnimate(kill, nextAnimate.toStyle);
+        const animate = this.__animate;
+        if (animate) {
+            if (nextAnimate instanceof exports.AnimateList)
+                nextAnimate.list.unshift(animate);
+            else
+                nextAnimate = new exports.AnimateList(this, [animate, nextAnimate]);
+        }
+        return this.__animate = nextAnimate;
     };
-    ui$2.killAnimate = function (_type, killStyle) {
+    ui$2.killAnimate = function (_type, nextStyle) {
         const animate = this.__animate;
-        if (animate)
-            animate.kill(true, killStyle), this.__animate = null;
+        if (animate) {
+            let kill = false;
+            if (nextStyle && !animate.completed) {
+                if (animate instanceof exports.AnimateList)
+                    animate.updateList();
+                const { toStyle } = animate;
+                for (let key in nextStyle)
+                    if (key in toStyle) {
+                        kill = true;
+                        break;
+                    }
+            }
+            else
+                kill = true;
+            if (kill)
+                animate.kill(true, nextStyle), this.__animate = null;
+        }
     };
     ui$2.__runAnimation = function (type, complete) {
-        this.animate(type === 'in' ? this.animation : this.animationOut);
+        this.animate(type === 'in' ? this.animation : this.animationOut, undefined, 'animation');
         if (complete)
             this.__animate.on(AnimateEvent.COMPLETED, complete);
     };