leafer-ui 1.0.6 → 1.0.8

package/dist/web.module.js

@@ -2958,7 +2958,6 @@ class PathCreator {
     set path(value) { this.__path = value; }
     get path() { return this.__path; }
     constructor(path) {
-        this.clearPath = this.beginPath;
         this.set(path);
     }
     set(path) {
@@ -3040,6 +3039,9 @@ class PathCreator {
         this.paint();
         return this;
     }
+    clearPath() {
+        return this.beginPath();
+    }
     paint() { }
 }
 
@@ -3635,6 +3637,8 @@ const ImageManager = {
         else {
             if (url.includes('.' + format) || url.includes('.' + FileHelper.upperCaseTypeMap[format]))
                 return true;
+            else if (format === 'png' && !url.includes('.'))
+                return true;
         }
         return false;
     },
@@ -4426,13 +4430,10 @@ class LeafLayout {
     update() {
         const { leafer } = this.leaf;
         if (leafer) {
-            if (leafer.ready) {
-                if (leafer.watcher.changed)
-                    leafer.layouter.layout();
-            }
-            else {
+            if (leafer.ready)
+                leafer.watcher.changed && leafer.layouter.layout();
+            else
                 leafer.start();
-            }
         }
         else {
             let root = this.leaf;
@@ -5255,7 +5256,7 @@ const BranchRender = {
 const { LEAF, create } = IncrementId;
 const { toInnerPoint, toOuterPoint, multiplyParent } = MatrixHelper;
 const { toOuterOf } = BoundsHelper;
-const { copy: copy$4, move: move$1 } = PointHelper;
+const { copy: copy$4, move } = PointHelper;
 const { moveLocal, zoomOfLocal, rotateOfLocal, skewOfLocal, moveWorld, zoomOfWorld, rotateOfWorld, skewOfWorld, transform, transformWorld, setTransform, getFlipTransform, getLocalOrigin, getRelativeWorld, drop } = LeafHelper;
 let Leaf = class Leaf {
     get tag() { return this.__tag; }
@@ -5490,7 +5491,7 @@ let Leaf = class Leaf {
     }
     getBoxPointByInner(inner, _relative, _distance, change) {
         const point = change ? inner : Object.assign({}, inner), { x, y } = this.boxBounds;
-        move$1(point, -x, -y);
+        move(point, -x, -y);
         return point;
     }
     getInnerPoint(world, relative, distance, change) {
@@ -5500,7 +5501,7 @@ let Leaf = class Leaf {
     }
     getInnerPointByBox(box, _relative, _distance, change) {
         const point = change ? box : Object.assign({}, box), { x, y } = this.boxBounds;
-        move$1(point, x, y);
+        move(point, x, y);
         return point;
     }
     getInnerPointByLocal(local, _relative, distance, change) {
@@ -5641,11 +5642,10 @@ let Leaf = class Leaf {
     }
     destroy() {
         if (!this.destroyed) {
-            const { parent } = this;
-            if (parent)
+            if (this.parent)
                 this.remove();
             if (this.children)
-                this.removeAll(true);
+                this.clear();
             this.__emitLifeEvent(ChildEvent.DESTROY);
             this.__.destroy();
             this.__layout.destroy();
@@ -5959,7 +5959,7 @@ class LeafLevelList {
     }
 }
 
-const version = "1.0.6";
+const version = "1.0.8";
 
 const debug$7 = Debug.get('LeaferCanvas');
 class LeaferCanvas extends LeaferCanvasBase {
@@ -6851,7 +6851,8 @@ class Picker {
             path.add(leaf);
             leaf = leaf.parent;
         }
-        path.add(this.target);
+        if (this.target)
+            path.add(this.target);
         return path;
     }
     getHitablePath(leaf) {
@@ -6937,8 +6938,8 @@ class Selector {
         this.innerIdMap = {};
         this.idMap = {};
         this.methods = {
-            id: (leaf, name) => leaf.id === name ? (this.idMap[name] = leaf, 1) : 0,
-            innerId: (leaf, innerId) => leaf.innerId === innerId ? (this.innerIdMap[innerId] = leaf, 1) : 0,
+            id: (leaf, name) => leaf.id === name ? (this.target && (this.idMap[name] = leaf), 1) : 0,
+            innerId: (leaf, innerId) => leaf.innerId === innerId ? (this.target && (this.innerIdMap[innerId] = leaf), 1) : 0,
             className: (leaf, name) => leaf.className === name ? 1 : 0,
             tag: (leaf, name) => leaf.__tag === name ? 1 : 0,
             tags: (leaf, nameMap) => nameMap[leaf.__tag] ? 1 : 0
@@ -6947,7 +6948,8 @@ class Selector {
         if (userConfig)
             this.config = DataHelper.default(userConfig, this.config);
         this.picker = new Picker(target, this);
-        this.__listenEvents();
+        if (target)
+            this.__listenEvents();
     }
     getBy(condition, branch, one, options) {
         switch (typeof condition) {
@@ -6982,7 +6984,7 @@ class Selector {
         }
     }
     getByPoint(hitPoint, hitRadius, options) {
-        if (Platform.name === 'node')
+        if (Platform.name === 'node' && this.target)
             this.target.emit(LayoutEvent.CHECK_UPDATE);
         return this.picker.getByPoint(hitPoint, hitRadius, options);
     }
@@ -7131,12 +7133,8 @@ const State = {
 };
 const Transition = {
     list: {},
-    register(attrName, fn) {
-        Transition.list[attrName] = fn;
-    },
-    get(attrName) {
-        return Transition.list[attrName];
-    }
+    register(attrName, fn) { Transition.list[attrName] = fn; },
+    get(attrName) { return Transition.list[attrName]; }
 };
 
 const { parse, objectToCanvasData } = PathConvert;
@@ -7582,8 +7580,8 @@ let UI = UI_1 = class UI extends Leaf {
             pen.set(path = []), this.__drawPathByBox(pen);
         return curve ? PathConvert.toCanvasData(path, true) : path;
     }
-    getPathString(curve, pathForRender) {
-        return PathConvert.stringify(this.getPath(curve, pathForRender));
+    getPathString(curve, pathForRender, floatLength) {
+        return PathConvert.stringify(this.getPath(curve, pathForRender), floatLength);
     }
     load() {
         this.__.__computePaint();
@@ -7992,11 +7990,11 @@ let Leafer = Leafer_1 = class Leafer extends Group {
     start() {
         clearTimeout(this.__startTimer);
         if (!this.running && this.canvas) {
+            this.running = true;
             this.ready ? this.emitLeafer(LeaferEvent.RESTART) : this.emitLeafer(LeaferEvent.START);
             this.__controllers.forEach(item => item.start());
             if (!this.isApp)
                 this.renderer.render();
-            this.running = true;
         }
     }
     stop() {
@@ -8102,12 +8100,10 @@ let Leafer = Leafer_1 = class Leafer extends Group {
     }
     __changeFill(newValue) {
         this.config.fill = newValue;
-        if (this.canvas.allowBackgroundColor) {
+        if (this.canvas.allowBackgroundColor)
             this.canvas.backgroundColor = newValue;
-        }
-        else {
+        else
             this.forceRender();
-        }
     }
     __onCreated() {
         this.created = true;
@@ -8174,13 +8170,10 @@ let Leafer = Leafer_1 = class Leafer extends Group {
         if (bind)
             item = item.bind(bind);
         this.__viewCompletedWait.push(item);
-        if (this.viewCompleted) {
+        if (this.viewCompleted)
             this.__checkViewCompleted(false);
-        }
-        else {
-            if (!this.running)
-                this.start();
-        }
+        else if (!this.running)
+            this.start();
     }
     nextRender(item, bind, off) {
         if (bind)
@@ -8194,9 +8187,8 @@ let Leafer = Leafer_1 = class Leafer extends Group {
                 }
             }
         }
-        else {
+        else
             list.push(item);
-        }
     }
     zoom(_zoomType, _padding, _fixedScale) {
         return needPlugin('view');
@@ -8240,10 +8232,7 @@ let Leafer = Leafer_1 = class Leafer extends Group {
                     this.stop();
                     this.emitEvent(new LeaferEvent(LeaferEvent.END, this));
                     this.__removeListenEvents();
-                    this.__controllers.forEach(item => {
-                        if (!(this.parent && item === this.interaction))
-                            item.destroy();
-                    });
+                    this.__controllers.forEach(item => !(this.parent && item === this.interaction) && item.destroy());
                     this.__controllers.length = 0;
                     if (!this.parent) {
                         if (this.selector)
@@ -8776,23 +8765,23 @@ let Text = class Text extends UI {
     }
     __updateTextDrawData() {
         const data = this.__;
-        data.__textDrawData = TextConvert.getDrawData(data.text, this.__);
-    }
-    __updateBoxBounds() {
-        const data = this.__;
-        const layout = this.__layout;
         const { lineHeight, letterSpacing, fontFamily, fontSize, fontWeight, italic, textCase, textOverflow, padding } = data;
-        const autoWidth = data.__autoWidth;
-        const autoHeight = data.__autoHeight;
         data.__lineHeight = UnitConvert.number(lineHeight, fontSize);
         data.__letterSpacing = UnitConvert.number(letterSpacing, fontSize);
         data.__padding = padding ? MathHelper.fourNumber(padding) : undefined;
         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.__);
+    }
+    __updateBoxBounds() {
+        const data = this.__;
+        const layout = this.__layout;
+        const { fontSize, italic, padding, __autoWidth: autoWidth, __autoHeight: autoHeight } = data;
         this.__updateTextDrawData();
         const { bounds } = data.__textDrawData;
         const b = layout.boxBounds;
+        console.log(bounds, autoWidth, autoHeight);
         if (data.__lineHeight < fontSize)
             spread(bounds, fontSize / 2);
         if (autoWidth || autoHeight) {
@@ -8802,20 +8791,15 @@ let Text = class Text extends UI {
             b.height = autoHeight ? bounds.height : data.height;
             if (padding) {
                 const [top, right, bottom, left] = data.__padding;
-                if (autoWidth) {
-                    b.x -= left;
-                    b.width += (right + left);
-                }
-                if (autoHeight) {
-                    b.y -= top;
-                    b.height += (bottom + top);
-                }
+                if (autoWidth)
+                    b.x -= left, b.width += (right + left);
+                if (autoHeight)
+                    b.y -= top, b.height += (bottom + top);
             }
             this.__updateNaturalSize();
         }
-        else {
+        else
             super.__updateBoxBounds();
-        }
         if (italic)
             b.width += fontSize * 0.16;
         const contentBounds = includes(b, bounds) ? b : bounds;
@@ -8824,9 +8808,8 @@ let Text = class Text extends UI {
             layout.renderChanged = true;
             setList(data.__textBoxBounds = {}, [b, bounds]);
         }
-        else {
+        else
             data.__textBoxBounds = contentBounds;
-        }
     }
     __updateRenderSpread() {
         let width = super.__updateRenderSpread();
@@ -8939,11 +8922,7 @@ let Pen = class Pen extends Group {
         this.add(path);
         return this;
     }
-    beginPath() {
-        this.__path.length = 0;
-        this.paint();
-        return this;
-    }
+    beginPath() { return this; }
     moveTo(_x, _y) { return this; }
     lineTo(_x, _y) { return this; }
     bezierCurveTo(_x1, _y1, _x2, _y2, _x, _y) { return this; }
@@ -8970,7 +8949,7 @@ __decorate([
     penPathType()
 ], Pen.prototype, "path", void 0);
 Pen = __decorate([
-    useModule(PathCreator, ['set', 'beginPath', 'path', 'paint']),
+    useModule(PathCreator, ['set', 'path', 'paint']),
     registerUI()
 ], Pen);
 function penPathType() {
@@ -9072,10 +9051,9 @@ let App = class App extends Leafer {
     }
     __render(canvas, options) {
         if (canvas.context) {
-            if (options.matrix) {
-                const { a, b, c, d, e, f } = options.matrix;
-                canvas.setTransform(a, b, c, d, e, f);
-            }
+            const m = options.matrix;
+            if (m)
+                canvas.setTransform(m.a, m.b, m.c, m.d, m.e, m.f);
             this.children.forEach(leafer => canvas.copyWorld(leafer.canvas));
         }
     }
@@ -9145,9 +9123,6 @@ class UIEvent extends Event {
     constructor(params) {
         super(params.type);
         this.bubbles = true;
-        this.getInner = this.getInnerPoint;
-        this.getLocal = this.getLocalPoint;
-        this.getPage = this.getPagePoint;
         Object.assign(this, params);
     }
     getBoxPoint(relative) {
@@ -9168,6 +9143,9 @@ class UIEvent extends Event {
     getPagePoint() {
         return this.current.getPagePoint(this);
     }
+    getInner(relative) { return this.getInnerPoint(relative); }
+    getLocal(relative) { return this.getLocalPoint(relative); }
+    getPage() { return this.getPagePoint(); }
     static changeName(oldName, newName) {
         EventCreator.changeName(oldName, newName);
     }
@@ -9199,7 +9177,7 @@ PointerEvent = __decorate([
 ], PointerEvent);
 const MyPointerEvent = PointerEvent;
 
-const move = {};
+const tempMove = {};
 let DragEvent = class DragEvent extends PointerEvent {
     static setList(data) {
         this.list = data instanceof LeafList ? data : new LeafList(data);
@@ -9250,19 +9228,19 @@ let DragEvent = class DragEvent extends PointerEvent {
     }
     getPageMove(total) {
         this.assignMove(total);
-        return this.current.getPagePoint(move, null, true);
+        return this.current.getPagePoint(tempMove, null, true);
     }
     getInnerMove(relative, total) {
         if (!relative)
             relative = this.current;
         this.assignMove(total);
-        return relative.getInnerPoint(move, null, true);
+        return relative.getInnerPoint(tempMove, null, true);
     }
     getLocalMove(relative, total) {
         if (!relative)
             relative = this.current;
         this.assignMove(total);
-        return relative.getLocalPoint(move, null, true);
+        return relative.getLocalPoint(tempMove, null, true);
     }
     getPageTotal() {
         return this.getPageMove(true);
@@ -9282,8 +9260,8 @@ let DragEvent = class DragEvent extends PointerEvent {
         return bounds;
     }
     assignMove(total) {
-        move.x = total ? this.totalX : this.moveX;
-        move.y = total ? this.totalY : this.moveY;
+        tempMove.x = total ? this.totalX : this.moveX;
+        tempMove.y = total ? this.totalY : this.moveY;
     }
 };
 DragEvent.BEFORE_DRAG = 'drag.before_drag';
@@ -9697,9 +9675,8 @@ class Dragger {
                 interaction.emit(DragEvent.OVER, data, path);
             }
         }
-        else {
+        else
             interaction.emit(DragEvent.OVER, data, path);
-        }
     }
     dragEnterOrLeave(data) {
         const { interaction } = this;
@@ -9720,9 +9697,8 @@ class Dragger {
             this.drag(data);
             this.animate(() => { this.dragEnd(data, 1); });
         }
-        else {
+        else
             this.dragEndReal(data);
-        }
     }
     dragEndReal(data) {
         const { interaction, downData, dragData } = this;
@@ -9919,14 +9895,16 @@ const { pathHasEventType, getMoveEventData: getMoveEventData$1, getZoomEventData
 class InteractionBase {
     get dragging() { return this.dragger.dragging; }
     get transforming() { return this.transformer.transforming; }
-    get moveMode() { return this.config.move.drag === true || this.isHoldSpaceKey || this.isHoldMiddleKey || (this.isHoldRightKey && this.dragger.moving) || this.isDragEmpty; }
-    get canHover() { return this.config.pointer.hover && !this.config.mobile; }
-    get isDragEmpty() { return this.config.move.dragEmpty && this.isRootPath(this.hoverData) && (!this.downData || this.isRootPath(this.downData)); }
-    get isMobileDragEmpty() { return this.config.move.dragEmpty && !this.canHover && this.downData && this.isTreePath(this.downData); }
-    get isHoldMiddleKey() { return this.config.move.holdMiddleKey && this.downData && PointerButton.middle(this.downData); }
-    get isHoldRightKey() { return this.config.move.holdRightKey && this.downData && PointerButton.right(this.downData); }
-    get isHoldSpaceKey() { return this.config.move.holdSpaceKey && Keyboard.isHoldSpaceKey(); }
-    get hitRadius() { return this.config.pointer.hitRadius; }
+    get moveMode() { return this.m.drag === true || this.isHoldSpaceKey || this.isHoldMiddleKey || (this.isHoldRightKey && this.dragger.moving) || this.isDragEmpty; }
+    get canHover() { return this.p.hover && !this.config.mobile; }
+    get isDragEmpty() { return this.m.dragEmpty && this.isRootPath(this.hoverData) && (!this.downData || this.isRootPath(this.downData)); }
+    get isMobileDragEmpty() { return this.m.dragEmpty && !this.canHover && this.downData && this.isTreePath(this.downData); }
+    get isHoldMiddleKey() { return this.m.holdMiddleKey && this.downData && PointerButton.middle(this.downData); }
+    get isHoldRightKey() { return this.m.holdRightKey && this.downData && PointerButton.right(this.downData); }
+    get isHoldSpaceKey() { return this.m.holdSpaceKey && Keyboard.isHoldSpaceKey(); }
+    get m() { return this.config.move; }
+    get p() { return this.config.pointer; }
+    get hitRadius() { return this.p.hitRadius; }
     constructor(target, canvas, selector, userConfig) {
         this.config = DataHelper.clone(config);
         this.tapCount = 0;
@@ -9984,7 +9962,7 @@ class InteractionBase {
         }
     }
     pointerMoveReal(data) {
-        const { dragHover, dragDistance } = this.config.pointer;
+        const { dragHover, dragDistance } = this.p;
         this.emit(PointerEvent.BEFORE_MOVE, data, this.defaultPath);
         if (this.downData) {
             const canDrag = PointHelper.getDistance(this.downData, data) > dragDistance;
@@ -10169,7 +10147,7 @@ class InteractionBase {
         }
     }
     findPath(data, options) {
-        const { hitRadius, through } = this.config.pointer;
+        const { hitRadius, through } = this.p;
         const { bottomList } = this;
         const find = this.selector.getByPoint(data, hitRadius, Object.assign({ bottomList, name: data.type }, (options || { through })));
         if (find.throughPath)
@@ -10191,7 +10169,7 @@ class InteractionBase {
             data.path = this.defaultPath;
     }
     canMove(data) {
-        return data && (this.moveMode || (this.config.move.drag === 'auto' && !pathCanDrag$1(data.path))) && !pathHasOutside(data.path);
+        return data && (this.moveMode || (this.m.drag === 'auto' && !pathCanDrag$1(data.path))) && !pathHasOutside(data.path);
     }
     isDrag(leaf) {
         return this.dragger.getList().has(leaf);
@@ -10289,7 +10267,7 @@ class InteractionBase {
         this.longPressTimer = setTimeout(() => {
             this.longPressed = true;
             this.emit(PointerEvent.LONG_PRESS, data);
-        }, this.config.pointer.longPressTime);
+        }, this.p.longPressTime);
     }
     longTap(data) {
         let hasLong;
@@ -10500,17 +10478,20 @@ rect.__hitFill = box$1.__hitFill = function (inner) {
 };
 
 const ui = UI.prototype, group = Group.prototype;
+function getSelector(ui) {
+    return ui.leafer ? ui.leafer.selector : (Platform.selector || (Platform.selector = Creator.selector()));
+}
 ui.find = function (condition, options) {
-    return this.leafer ? this.leafer.selector.getBy(condition, this, false, options) : [];
+    return getSelector(this).getBy(condition, this, false, options);
 };
 ui.findOne = function (condition, options) {
-    return this.leafer ? this.leafer.selector.getBy(condition, this, true, options) : null;
+    return getSelector(this).getBy(condition, this, true, options);
 };
 group.pick = function (hitPoint, options) {
     this.__layout.update();
     if (!options)
         options = {};
-    return this.leafer ? this.leafer.selector.getByPoint(hitPoint, options.hitRadius || 0, Object.assign(Object.assign({}, options), { target: this })) : null;
+    return getSelector(this).getByPoint(hitPoint, options.hitRadius || 0, Object.assign(Object.assign({}, options), { target: this }));
 };
 
 const canvas$1 = LeaferCanvasBase.prototype;
@@ -10891,14 +10872,10 @@ function fillText(ui, canvas) {
     const { rows, decorationY, decorationHeight } = ui.__.__textDrawData;
     for (let i = 0, len = rows.length; i < len; i++) {
         row = rows[i];
-        if (row.text) {
+        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);
-            });
-        }
+        else if (row.data)
+            row.data.forEach(charData => { canvas.fillText(charData.char, charData.x, row.y); });
         if (decorationY)
             canvas.fillRect(row.x, row.y + decorationY, row.width, decorationHeight);
     }
@@ -10964,12 +10941,10 @@ function drawAlignStroke(align, stroke, isStrokes, ui, canvas) {
     out.blendMode = align === 'outside' ? 'destination-out' : 'destination-in';
     fillText(ui, out);
     out.blendMode = 'normal';
-    if (ui.__worldFlipped) {
+    if (ui.__worldFlipped)
         canvas.copyWorldByReset(out, ui.__nowWorld);
-    }
-    else {
+    else
         canvas.copyWorldToInner(out, ui.__nowWorld, ui.__layout.renderBounds);
-    }
     out.recycle(ui.__nowWorld);
 }
 function drawTextStroke(ui, canvas) {
@@ -10977,14 +10952,10 @@ function drawTextStroke(ui, canvas) {
     const { rows, decorationY, decorationHeight } = ui.__.__textDrawData;
     for (let i = 0, len = rows.length; i < len; i++) {
         row = rows[i];
-        if (row.text) {
+        if (row.text)
             canvas.strokeText(row.text, row.x, row.y);
-        }
-        else if (row.data) {
-            row.data.forEach(charData => {
-                canvas.strokeText(charData.char, charData.x, row.y);
-            });
-        }
+        else if (row.data)
+            row.data.forEach(charData => { canvas.strokeText(charData.char, charData.x, row.y); });
         if (decorationY)
             canvas.strokeRect(row.x, row.y + decorationY, row.width, decorationHeight);
     }
@@ -11037,12 +11008,10 @@ function stroke(stroke, ui, canvas) {
                 out.stroke();
                 options.windingRule ? out.clip(options.windingRule) : out.clip();
                 out.clearWorld(ui.__layout.renderBounds);
-                if (ui.__worldFlipped) {
+                if (ui.__worldFlipped)
                     canvas.copyWorldByReset(out, ui.__nowWorld);
-                }
-                else {
+                else
                     canvas.copyWorldToInner(out, ui.__nowWorld, ui.__layout.renderBounds);
-                }
                 out.recycle(ui.__nowWorld);
                 break;
         }
@@ -11077,12 +11046,10 @@ function strokes(strokes, ui, canvas) {
                 drawStrokesStyle(strokes, false, ui, out);
                 options.windingRule ? out.clip(options.windingRule) : out.clip();
                 out.clearWorld(renderBounds);
-                if (ui.__worldFlipped) {
+                if (ui.__worldFlipped)
                     canvas.copyWorldByReset(out, ui.__nowWorld);
-                }
-                else {
+                else
                     canvas.copyWorldToInner(out, ui.__nowWorld, renderBounds);
-                }
                 out.recycle(ui.__nowWorld);
                 break;
         }
@@ -11146,12 +11113,7 @@ function compute(attrName, ui) {
     data['_' + attrName] = leafPaints.length ? leafPaints : undefined;
     if (leafPaints.length && leafPaints[0].image)
         hasOpacityPixel = leafPaints[0].image.hasOpacityPixel;
-    if (attrName === 'fill') {
-        data.__pixelFill = hasOpacityPixel;
-    }
-    else {
-        data.__pixelStroke = hasOpacityPixel;
-    }
+    attrName === 'fill' ? data.__pixelFill = hasOpacityPixel : data.__pixelStroke = hasOpacityPixel;
 }
 function getLeafPaint(attrName, paint, ui) {
     if (typeof paint !== 'object' || paint.visible === false || paint.opacity === 0)