leafer-draw 1.0.0 → 1.0.1

package/dist/web.js

@@ -51,6 +51,8 @@ var LeaferUI = (function (exports) {
     const { round, pow: pow$1, PI: PI$4 } = Math;
     const MathHelper = {
         within(value, min, max) {
+            if (typeof min === 'object')
+                max = min.max, min = min.min;
             if (min !== undefined && value < min)
                 value = min;
             if (max !== undefined && value > max)
@@ -153,10 +155,10 @@ var LeaferUI = (function (exports) {
             t.e += x;
             t.f += y;
         },
-        translateInner(t, x, y, isMoveOrigin) {
+        translateInner(t, x, y, hasOrigin) {
             t.e += t.a * x + t.c * y;
             t.f += t.b * x + t.d * y;
-            if (isMoveOrigin)
+            if (hasOrigin)
                 t.e -= x, t.f -= y;
         },
         scale(t, scaleX, scaleY = scaleX) {
@@ -315,7 +317,7 @@ var LeaferUI = (function (exports) {
                 to.y -= (f * a - e * b) * s;
             }
         },
-        setLayout(t, layout, origin, bcChanged) {
+        setLayout(t, layout, origin, around, bcChanged) {
             const { x, y, scaleX, scaleY } = layout;
             if (bcChanged === undefined)
                 bcChanged = layout.rotation || layout.skewX || layout.skewY;
@@ -347,10 +349,10 @@ var LeaferUI = (function (exports) {
             }
             t.e = x;
             t.f = y;
-            if (origin)
-                M$6.translateInner(t, -origin.x, -origin.y, true);
+            if (origin = origin || around)
+                M$6.translateInner(t, -origin.x, -origin.y, !around);
         },
-        getLayout(t, origin, firstSkewY) {
+        getLayout(t, origin, around, firstSkewY) {
             const { a, b, c, d, e, f } = t;
             let x = e, y = f, scaleX, scaleY, rotation, skewX, skewY;
             if (b || c) {
@@ -379,9 +381,11 @@ var LeaferUI = (function (exports) {
                 scaleY = d;
                 rotation = skewX = skewY = 0;
             }
-            if (origin) {
+            if (origin = around || origin) {
                 x += origin.x * a + origin.y * c;
                 y += origin.x * b + origin.y * d;
+                if (!around)
+                    x -= origin.x, y -= origin.y;
             }
             return { x, y, scaleX, scaleY, rotation, skewX, skewY };
         },
@@ -709,12 +713,12 @@ var LeaferUI = (function (exports) {
         toInnerPoint(outer, to, distance) {
             MatrixHelper.toInnerPoint(this, outer, to, distance);
         }
-        setLayout(data, origin) {
-            MatrixHelper.setLayout(this, data, origin);
+        setLayout(data, origin, around) {
+            MatrixHelper.setLayout(this, data, origin, around);
             return this;
         }
-        getLayout(origin, firstSkewY) {
-            return MatrixHelper.getLayout(this, origin, firstSkewY);
+        getLayout(origin, around, firstSkewY) {
+            return MatrixHelper.getLayout(this, origin, around, firstSkewY);
         }
         withScale(scaleX, scaleY) {
             return MatrixHelper.withScale(this, scaleX, scaleY);
@@ -2002,7 +2006,7 @@ var LeaferUI = (function (exports) {
             DataHelper.copyAttrs(this.size, size, canvasSizeAttrs);
             this.size.pixelRatio || (this.size.pixelRatio = 1);
             this.bounds = new Bounds(0, 0, this.width, this.height);
-            if (!this.unreal) {
+            if (this.context && !this.unreal) {
                 this.updateViewSize();
                 this.smooth = this.config.smooth;
             }
@@ -2175,7 +2179,7 @@ var LeaferUI = (function (exports) {
                 this.manager ? this.manager.recycle(this) : this.destroy();
             }
         }
-        updateRender() { }
+        updateRender(_bounds) { }
         unrealCanvas() { }
         destroy() {
             this.manager = this.view = this.parentView = null;
@@ -4069,8 +4073,13 @@ var LeaferUI = (function (exports) {
         zoomOfLocal(t, origin, scaleX, scaleY = scaleX, resize) {
             copy$6(matrix, t.__localMatrix);
             scaleOfOuter$2(matrix, origin, scaleX, scaleY);
-            moveByMatrix(t, matrix);
-            t.scaleResize(scaleX, scaleY, resize !== true);
+            if (t.origin || t.around) {
+                L.setTransform(t, matrix, resize);
+            }
+            else {
+                moveByMatrix(t, matrix);
+                t.scaleResize(scaleX, scaleY, resize !== true);
+            }
         },
         rotateOfWorld(t, origin, angle) {
             L.rotateOfLocal(t, getTempLocal(t, origin), angle);
@@ -4078,8 +4087,13 @@ var LeaferUI = (function (exports) {
         rotateOfLocal(t, origin, angle) {
             copy$6(matrix, t.__localMatrix);
             rotateOfOuter$2(matrix, origin, angle);
-            moveByMatrix(t, matrix);
-            t.rotation = MathHelper.formatRotation(t.rotation + angle);
+            if (t.origin || t.around) {
+                L.setTransform(t, matrix);
+            }
+            else {
+                moveByMatrix(t, matrix);
+                t.rotation = MathHelper.formatRotation(t.rotation + angle);
+            }
         },
         skewOfWorld(t, origin, skewX, skewY, resize) {
             L.skewOfLocal(t, getTempLocal(t, origin), skewX, skewY, resize);
@@ -4102,7 +4116,7 @@ var LeaferUI = (function (exports) {
             L.setTransform(t, matrix, resize);
         },
         setTransform(t, transform, resize) {
-            const layout = getLayout(transform);
+            const layout = getLayout(transform, t.origin && L.getInnerOrigin(t, t.origin), t.around && L.getInnerOrigin(t, t.around));
             if (resize) {
                 const scaleX = layout.scaleX / t.scaleX;
                 const scaleY = layout.scaleY / t.scaleY;
@@ -4115,13 +4129,19 @@ var LeaferUI = (function (exports) {
                 t.set(layout);
             }
         },
+        getFlipTransform(t, axis) {
+            const m = getMatrixData();
+            const sign = axis === 'x' ? 1 : -1;
+            scaleOfOuter$2(m, L.getLocalOrigin(t, 'center'), -1 * sign, 1 * sign);
+            return m;
+        },
         getLocalOrigin(t, origin) {
             return PointHelper.tempToOuterOf(L.getInnerOrigin(t, origin), t.localTransform);
         },
         getInnerOrigin(t, origin) {
-            if (typeof origin === 'string')
-                AroundHelper.toPoint(origin, t.boxBounds, origin = {});
-            return origin;
+            const innerOrigin = {};
+            AroundHelper.toPoint(origin, t.boxBounds, innerOrigin);
+            return innerOrigin;
         },
         getRelativeWorld(t, relative, temp) {
             copy$6(matrix, t.worldTransform);
@@ -4548,7 +4568,10 @@ var LeaferUI = (function (exports) {
         on(type, listener, options) {
             let capture, once;
             if (options) {
-                if (typeof options === 'boolean') {
+                if (options === 'once') {
+                    once = true;
+                }
+                else if (typeof options === 'boolean') {
                     capture = options;
                 }
                 else {
@@ -4579,7 +4602,7 @@ var LeaferUI = (function (exports) {
                 if (listener) {
                     let capture;
                     if (options)
-                        capture = typeof options === 'boolean' ? options : options.capture;
+                        capture = typeof options === 'boolean' ? options : (options === 'once' ? false : options.capture);
                     let events, index;
                     const map = __getListenerMap(this, capture);
                     typeList.forEach(type => {
@@ -4881,7 +4904,7 @@ var LeaferUI = (function (exports) {
                 const layout = this.__layout, local = this.__local, data = this.__;
                 if (layout.affectScaleOrRotation) {
                     if (layout.scaleChanged || layout.rotationChanged) {
-                        setLayout(local, data, null, layout.affectRotation);
+                        setLayout(local, data, null, null, layout.affectRotation);
                         layout.scaleChanged = layout.rotationChanged = false;
                     }
                 }
@@ -4889,7 +4912,7 @@ var LeaferUI = (function (exports) {
                 local.f = data.y + data.offsetY;
                 if (data.around || data.origin) {
                     toPoint$3(data.around || data.origin, layout.boxBounds, tempPoint$1);
-                    translateInner(local, -tempPoint$1.x, -tempPoint$1.y, data.origin);
+                    translateInner(local, -tempPoint$1.x, -tempPoint$1.y, !data.around);
                 }
             }
             this.__layout.matrixChanged = false;
@@ -5118,7 +5141,7 @@ var LeaferUI = (function (exports) {
     const { toInnerPoint, toOuterPoint, multiplyParent } = MatrixHelper;
     const { toOuterOf } = BoundsHelper;
     const { copy: copy$3 } = PointHelper;
-    const { moveLocal, zoomOfLocal, rotateOfLocal, skewOfLocal, moveWorld, zoomOfWorld, rotateOfWorld, skewOfWorld, transform, transformWorld, setTransform, getLocalOrigin, getRelativeWorld, drop } = LeafHelper;
+    const { moveLocal, zoomOfLocal, rotateOfLocal, skewOfLocal, moveWorld, zoomOfWorld, rotateOfWorld, skewOfWorld, transform, transformWorld, setTransform, getFlipTransform, getLocalOrigin, getRelativeWorld, drop } = LeafHelper;
     exports.Leaf = class Leaf {
         get tag() { return this.__tag; }
         set tag(_value) { }
@@ -5144,6 +5167,8 @@ var LeaferUI = (function (exports) {
         get __ignoreHitWorld() { return (this.__hasMask || this.__hasEraser) && this.__.hitChildren; }
         get __inLazyBounds() { const { leafer } = this; return leafer && leafer.created && leafer.lazyBounds.hit(this.__world); }
         get pathInputed() { return this.__.__pathInputed; }
+        set event(map) { let event; for (let key in map)
+            event = map[key], event instanceof Array ? this.on(key, event[0], event[1]) : this.on(key, event); }
         constructor(data) {
             this.innerId = create(LEAF);
             this.reset(data);
@@ -5403,6 +5428,9 @@ var LeaferUI = (function (exports) {
         skewOfWorld(worldOrigin, skewX, skewY, resize) {
             skewOfWorld(this, worldOrigin, skewX, skewY, resize);
         }
+        flip(axis) {
+            transform(this, getFlipTransform(this, axis));
+        }
         scaleResize(scaleX, scaleY = scaleX, _noResize) {
             this.scaleX *= scaleX;
             this.scaleY *= scaleY;
@@ -5760,7 +5788,7 @@ var LeaferUI = (function (exports) {
         }
     }
 
-    const version = "1.0.0-rc.30";
+    const version = "1.0.1";
     const inviteCode = {};
 
     const debug$5 = Debug.get('LeaferCanvas');
@@ -5784,7 +5812,8 @@ var LeaferUI = (function (exports) {
             }
         }
         init() {
-            const { view } = this.config;
+            const { config } = this;
+            const view = config.view || config.canvas;
             view ? this.__createViewFrom(view) : this.__createView();
             const { style } = this.view;
             style.display || (style.display = 'block');
@@ -5799,7 +5828,7 @@ var LeaferUI = (function (exports) {
             }
             this.__createContext();
             if (!this.autoLayout)
-                this.resize(this.config);
+                this.resize(config);
         }
         set backgroundColor(color) { this.view.style.backgroundColor = color; }
         get backgroundColor() { return this.view.style.backgroundColor; }
@@ -5855,26 +5884,37 @@ var LeaferUI = (function (exports) {
             this.clientBounds = this.view.getBoundingClientRect();
         }
         startAutoLayout(autoBounds, listener) {
-            this.autoBounds = autoBounds;
             this.resizeListener = listener;
-            try {
-                this.resizeObserver = new ResizeObserver((entries) => {
-                    this.updateClientBounds();
-                    for (const entry of entries)
-                        this.checkAutoBounds(entry.contentRect);
-                });
-                const parent = this.parentView;
-                if (parent) {
-                    this.resizeObserver.observe(parent);
-                    this.checkAutoBounds(parent.getBoundingClientRect());
+            if (autoBounds) {
+                this.autoBounds = autoBounds;
+                try {
+                    this.resizeObserver = new ResizeObserver((entries) => {
+                        this.updateClientBounds();
+                        for (const entry of entries)
+                            this.checkAutoBounds(entry.contentRect);
+                    });
+                    const parent = this.parentView;
+                    if (parent) {
+                        this.resizeObserver.observe(parent);
+                        this.checkAutoBounds(parent.getBoundingClientRect());
+                    }
+                    else {
+                        this.checkAutoBounds(this.view);
+                        debug$5.warn('no parent');
+                    }
                 }
-                else {
-                    this.checkAutoBounds(this.view);
-                    debug$5.warn('no parent');
+                catch (_a) {
+                    this.imitateResizeObserver();
                 }
             }
-            catch (_a) {
-                this.imitateResizeObserver();
+            else {
+                window.addEventListener('resize', () => {
+                    const pixelRatio = Platform.devicePixelRatio;
+                    if (this.pixelRatio !== pixelRatio) {
+                        const { width, height } = this;
+                        this.emitResize({ width, height, pixelRatio });
+                    }
+                });
             }
         }
         imitateResizeObserver() {
@@ -5887,17 +5927,12 @@ var LeaferUI = (function (exports) {
         checkAutoBounds(parentSize) {
             const view = this.view;
             const { x, y, width, height } = this.autoBounds.getBoundsFrom(parentSize);
-            if (width !== this.width || height !== this.height) {
+            const size = { width, height, pixelRatio: Platform.devicePixelRatio };
+            if (!this.isSameSize(size)) {
                 const { style } = view;
-                const { pixelRatio } = this;
                 style.marginLeft = x + 'px';
                 style.marginTop = y + 'px';
-                const size = { width, height, pixelRatio };
-                const oldSize = {};
-                DataHelper.copyAttrs(oldSize, this, canvasSizeAttrs);
-                this.resize(size);
-                if (this.width !== undefined)
-                    this.resizeListener(new ResizeEvent(size, oldSize));
+                this.emitResize(size);
             }
         }
         stopAutoLayout() {
@@ -5908,6 +5943,13 @@ var LeaferUI = (function (exports) {
                 this.resizeObserver = null;
             }
         }
+        emitResize(size) {
+            const oldSize = {};
+            DataHelper.copyAttrs(oldSize, this, canvasSizeAttrs);
+            this.resize(size);
+            if (this.width !== undefined)
+                this.resizeListener(new ResizeEvent(size, oldSize));
+        }
         unrealCanvas() {
             if (!this.unreal && this.parentView) {
                 const view = this.view;
@@ -5988,7 +6030,7 @@ var LeaferUI = (function (exports) {
     Platform.name = 'web';
     Platform.isMobile = 'ontouchstart' in window;
     Platform.requestRender = function (render) { window.requestAnimationFrame(render); };
-    Platform.devicePixelRatio = Math.max(1, devicePixelRatio);
+    defineKey(Platform, 'devicePixelRatio', { get() { return Math.max(1, devicePixelRatio); } });
     const { userAgent } = navigator;
     if (userAgent.indexOf("Firefox") > -1) {
         Platform.conicGradientRotate90 = true;
@@ -6485,14 +6527,14 @@ var LeaferUI = (function (exports) {
             if (Debug.showRepaint)
                 this.canvas.strokeWorld(bounds, 'red');
             this.target.__render(this.canvas, options);
-            this.renderBounds = realBounds || bounds;
+            this.renderBounds = realBounds = realBounds || bounds;
             this.renderOptions = options;
-            this.totalBounds.isEmpty() ? this.totalBounds = this.renderBounds : this.totalBounds.add(this.renderBounds);
+            this.totalBounds.isEmpty() ? this.totalBounds = realBounds : this.totalBounds.add(realBounds);
             if (Debug.showHitView)
                 this.renderHitView(options);
             if (Debug.showBoundsView)
                 this.renderBoundsView(options);
-            this.canvas.updateRender();
+            this.canvas.updateRender(realBounds);
         }
         renderHitView(_options) { }
         renderBoundsView(_options) { }
@@ -7543,7 +7585,7 @@ var LeaferUI = (function (exports) {
             this.__controllers.push(this.renderer = Creator.renderer(this, canvas, config), this.watcher = Creator.watcher(this, config), this.layouter = Creator.layouter(this, config));
             if (this.isApp)
                 this.__setApp();
-            this.__checkAutoLayout(config);
+            this.__checkAutoLayout(config, parentApp);
             this.view = canvas.view;
             if (parentApp) {
                 this.__bindApp(parentApp);
@@ -7644,9 +7686,10 @@ var LeaferUI = (function (exports) {
             this.leafer = leafer;
             this.__level = 1;
         }
-        __checkAutoLayout(config) {
-            if (!config.width || !config.height) {
-                this.autoLayout = new AutoBounds(config);
+        __checkAutoLayout(config, parentApp) {
+            if (!parentApp) {
+                if (!config.width || !config.height)
+                    this.autoLayout = new AutoBounds(config);
                 this.canvas.startAutoLayout(this.autoLayout, this.__onResize.bind(this));
             }
         }
@@ -7781,7 +7824,9 @@ var LeaferUI = (function (exports) {
                 list.push(item);
             }
         }
-        zoom(_zoomType, _padding, _fixedScale) { return undefined; }
+        zoom(_zoomType, _padding, _fixedScale) {
+            return debug$1.error('need @leafer-in/view');
+        }
         getValidMove(moveX, moveY) { return { x: moveX, y: moveY }; }
         getValidScale(changeScale) { return changeScale; }
         getWorldPointByClient(clientPoint, updateClient) {
@@ -8308,8 +8353,7 @@ var LeaferUI = (function (exports) {
         destroy() {
             if (this.canvas) {
                 this.canvas.destroy();
-                this.canvas = null;
-                this.context = null;
+                this.canvas = this.context = null;
             }
             super.destroy();
         }
@@ -9153,7 +9197,7 @@ var LeaferUI = (function (exports) {
     const { abs } = Math;
     function checkImage(ui, canvas, paint, allowPaint) {
         const { scaleX, scaleY } = ImageManager.patternLocked ? ui.__world : ui.__nowWorld;
-        if (!paint.data || paint.patternId === scaleX + '-' + scaleY) {
+        if (!paint.data || (paint.patternId === scaleX + '-' + scaleY && !Export.running)) {
             return false;
         }
         else {
@@ -10131,7 +10175,10 @@ var LeaferUI = (function (exports) {
                         const { x, y, width, height } = new Bounds(renderBounds).scale(scale);
                         let canvas = Creator.canvas({ width: Math.round(width), height: Math.round(height), pixelRatio, smooth, contextSettings });
                         const renderOptions = { matrix: matrix.scale(1 / scale).invert().translate(-x, -y).withScale(1 / scaleX * scale, 1 / scaleY * scale) };
+                        let sliceLeaf;
                         if (slice) {
+                            sliceLeaf = leaf;
+                            sliceLeaf.__worldOpacity = 0;
                             leaf = leafer;
                             renderOptions.bounds = canvas.bounds;
                         }
@@ -10146,6 +10193,8 @@ var LeaferUI = (function (exports) {
                             leaf.__render(canvas, renderOptions);
                         }
                         canvas.restore();
+                        if (sliceLeaf)
+                            sliceLeaf.__updateWorldOpacity();
                         if (trim) {
                             trimBounds = getTrimBounds(canvas);
                             const old = canvas, { width, height } = trimBounds;