leafer-ui 1.0.0-rc.26 → 1.0.0-rc.28

package/dist/web.js

@@ -14,8 +14,15 @@ var LeaferUI = (function (exports) {
             hitCanvasSize: 100,
             maxCacheSize: 2560 * 1600,
             maxPatternSize: 4096 * 2160,
-            suffix: '',
-            crossOrigin: 'anonymous'
+            crossOrigin: 'anonymous',
+            getRealURL(url) {
+                const { prefix, suffix } = Platform.image;
+                if (suffix && !url.startsWith('data:') && !url.startsWith('blob:'))
+                    url += (url.includes("?") ? "&" : "?") + suffix;
+                if (prefix && url[0] === '/')
+                    url = prefix + url;
+                return url;
+            }
         }
     };
 
@@ -5129,6 +5136,7 @@ var LeaferUI = (function (exports) {
         get __worldFlipped() { return this.__world.scaleX < 0 || this.__world.scaleY < 0; }
         get __onlyHitMask() { return this.__hasMask && !this.__.hitChildren; }
         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; }
         constructor(data) {
             this.innerId = create(LEAF);
@@ -5192,6 +5200,9 @@ var LeaferUI = (function (exports) {
         }
         set(_data) { }
         get(_name) { return undefined; }
+        setAttr(name, value) { this[name] = value; }
+        getAttr(name) { return this[name]; }
+        getComputedAttr(name) { return this.__[name]; }
         toJSON() {
             return this.__.__getInputData();
         }
@@ -5210,6 +5221,9 @@ var LeaferUI = (function (exports) {
         findOne(_condition, _options) { return undefined; }
         findId(_id) { return undefined; }
         focus(_value) { }
+        updateLayout() {
+            this.__layout.update();
+        }
         forceUpdate(attrName) {
             if (attrName === undefined)
                 attrName = 'width';
@@ -5219,8 +5233,8 @@ var LeaferUI = (function (exports) {
             this.__[attrName] = value === undefined ? null : undefined;
             this[attrName] = value;
         }
-        updateLayout() {
-            this.__layout.update();
+        forceRender(_bounds) {
+            this.forceUpdate('surface');
         }
         __updateWorldMatrix() { }
         __updateLocalMatrix() { }
@@ -5752,11 +5766,29 @@ var LeaferUI = (function (exports) {
         }
     }
 
-    const version = "1.0.0-rc.26";
+    const version = "1.0.0-rc.27";
     const inviteCode = {};
 
     const debug$7 = Debug.get('LeaferCanvas');
     class LeaferCanvas extends LeaferCanvasBase {
+        set zIndex(zIndex) {
+            const { style } = this.view;
+            style.zIndex = zIndex;
+            this.setAbsolute(this.view);
+        }
+        set childIndex(index) {
+            const { view, parentView } = this;
+            if (view && parentView) {
+                const beforeNode = parentView.children[index];
+                if (beforeNode) {
+                    this.setAbsolute(beforeNode);
+                    parentView.insertBefore(view, beforeNode);
+                }
+                else {
+                    parentView.appendChild(beforeNode);
+                }
+            }
+        }
         init() {
             const { view } = this.config;
             view ? this.__createViewFrom(view) : this.__createView();
@@ -5801,9 +5833,7 @@ var LeaferUI = (function (exports) {
                     this.__createView();
                     const view = this.view;
                     if (parent.hasChildNodes()) {
-                        const { style } = view;
-                        style.position = 'absolute';
-                        style.top = style.left = '0px';
+                        this.setAbsolute(view);
                         parent.style.position || (parent.style.position = 'relative');
                     }
                     parent.appendChild(view);
@@ -5814,6 +5844,11 @@ var LeaferUI = (function (exports) {
                 this.__createView();
             }
         }
+        setAbsolute(view) {
+            const { style } = view;
+            style.position = 'absolute';
+            style.top = style.left = '0px';
+        }
         updateViewSize() {
             const { width, height, pixelRatio } = this;
             const { style } = this.view;
@@ -5933,16 +5968,14 @@ var LeaferUI = (function (exports) {
             loadImage(src) {
                 return new Promise((resolve, reject) => {
                     const img = new Image();
-                    const { suffix, crossOrigin } = Platform.image;
+                    const { crossOrigin } = Platform.image;
                     if (crossOrigin) {
                         img.setAttribute('crossOrigin', crossOrigin);
                         img.crossOrigin = crossOrigin;
                     }
                     img.onload = () => { resolve(img); };
                     img.onerror = (e) => { reject(e); };
-                    if (suffix && !src.startsWith('data:') && !src.startsWith('blob:'))
-                        src += (src.includes("?") ? "&" : "?") + suffix;
-                    img.src = src;
+                    img.src = Platform.image.getRealURL(src);
                 });
             }
         };
@@ -7227,6 +7260,8 @@ var LeaferUI = (function (exports) {
                 this.__drawRenderPath(canvas);
                 if (fill && !ignoreFill)
                     this.__.__pixelFill ? Paint.fills(fill, this, canvas) : Paint.fill('#000000', this, canvas);
+                if (this.__.__isCanvas)
+                    this.__drawAfterFill(canvas, options);
                 if (stroke && !ignoreStroke)
                     this.__.__pixelStroke ? Paint.strokes(stroke, this, canvas) : Paint.stroke('#000000', this, canvas);
             }
@@ -7340,7 +7375,7 @@ var LeaferUI = (function (exports) {
         __onUpdateSize() {
             if (this.__.__input) {
                 const data = this.__;
-                (data.lazy && this.leafer && this.leafer.created && !this.leafer.lazyBounds.hit(this.__world)) ? data.__needComputePaint = true : data.__computePaint();
+                (data.lazy && !this.__inLazyBounds && !Export.running) ? data.__needComputePaint = true : data.__computePaint();
             }
         }
         __updateRenderPath() {
@@ -7649,6 +7684,9 @@ var LeaferUI = (function (exports) {
     __decorate([
         dataType()
     ], exports.UI.prototype, "disabledStyle", void 0);
+    __decorate([
+        dataType({})
+    ], exports.UI.prototype, "data", void 0);
     __decorate([
         rewrite(exports.Leaf.prototype.reset)
     ], exports.UI.prototype, "reset", null);
@@ -7895,6 +7933,10 @@ var LeaferUI = (function (exports) {
                     if (!this.parent)
                         this.canvas.hittable = newValue;
                 }
+                else if (attrName === 'zIndex') {
+                    this.canvas.zIndex = newValue;
+                    setTimeout(() => this.parent && this.parent.__updateSortChildren());
+                }
             }
             return super.__setAttr(attrName, newValue);
         }
@@ -8491,7 +8533,7 @@ var LeaferUI = (function (exports) {
             super(data);
             this.canvas = Creator.canvas(this.__);
             this.context = this.canvas.context;
-            this.__.__drawAfterFill = true;
+            this.__.__isCanvas = this.__.__drawAfterFill = true;
         }
         draw(ui, offset, scale, rotation) {
             ui.__layout.update();
@@ -8513,7 +8555,7 @@ var LeaferUI = (function (exports) {
         __drawAfterFill(canvas, _options) {
             const origin = this.canvas.view;
             const { width, height } = this;
-            if (this.__.cornerRadius) {
+            if (this.__.cornerRadius || this.pathInputed) {
                 canvas.save();
                 canvas.clip();
                 canvas.drawImage(this.canvas.view, 0, 0, origin.width, origin.height, 0, 0, width, height);
@@ -8559,9 +8601,6 @@ var LeaferUI = (function (exports) {
     __decorate([
         resizeType()
     ], exports.Canvas.prototype, "contextSettings", void 0);
-    __decorate([
-        hitType('all')
-    ], exports.Canvas.prototype, "hitFill", void 0);
     exports.Canvas = __decorate([
         registerUI()
     ], exports.Canvas);
@@ -8858,15 +8897,17 @@ var LeaferUI = (function (exports) {
             this.add(leafer);
             return leafer;
         }
-        add(leafer) {
+        add(leafer, index) {
             if (!leafer.view) {
                 if (this.realCanvas && !this.canvas.bounds) {
-                    setTimeout(() => this.add(leafer), 10);
+                    setTimeout(() => this.add(leafer, index), 10);
                     return;
                 }
                 leafer.init(this.__getChildConfig(leafer.userConfig), this);
             }
-            super.add(leafer);
+            super.add(leafer, index);
+            if (index !== undefined)
+                leafer.canvas.childIndex = index;
             this.__listenChildEvents(leafer);
         }
         __onPropertyChange() {
@@ -9028,20 +9069,32 @@ var LeaferUI = (function (exports) {
                 move.x = 0;
             return move;
         }
-        static getMoveInDragBounds(box, dragBounds, move, change) {
-            const x = box.x + move.x, y = box.y + move.y;
-            const right = x + box.width, bottom = y + box.height;
+        static getMoveInDragBounds(childBox, dragBounds, move, change) {
+            const x = childBox.x + move.x, y = childBox.y + move.y;
+            const right = x + childBox.width, bottom = y + childBox.height;
             const boundsRight = dragBounds.x + dragBounds.width, boundsBottom = dragBounds.y + dragBounds.height;
             if (!change)
                 move = Object.assign({}, move);
-            if (x < dragBounds.x)
-                move.x += dragBounds.x - x;
-            else if (right > boundsRight)
-                move.x += boundsRight - right;
-            if (y < dragBounds.y)
-                move.y += dragBounds.y - y;
-            else if (bottom > boundsBottom)
-                move.y += boundsBottom - bottom;
+            if (BoundsHelper.includes(childBox, dragBounds)) {
+                if (x > dragBounds.x)
+                    move.x += dragBounds.x - x;
+                else if (right < boundsRight)
+                    move.x += boundsRight - right;
+                if (y > dragBounds.y)
+                    move.y += dragBounds.y - y;
+                else if (bottom < boundsBottom)
+                    move.y += boundsBottom - bottom;
+            }
+            else {
+                if (x < dragBounds.x)
+                    move.x += dragBounds.x - x;
+                else if (right > boundsRight)
+                    move.x += boundsRight - right;
+                if (y < dragBounds.y)
+                    move.y += dragBounds.y - y;
+                else if (bottom > boundsBottom)
+                    move.y += boundsBottom - bottom;
+            }
             return move;
         }
         getPageMove(total) {
@@ -9201,13 +9254,15 @@ var LeaferUI = (function (exports) {
     };
     const { list, register } = LeaferTypeCreator;
     register('draw', () => { });
+    register('custom', () => { });
     register('design', addInteractionWindow);
     register('document', document$1);
 
-    exports.Leafer.prototype.initType = function (type) {
+    const leafer = exports.Leafer.prototype;
+    leafer.initType = function (type) {
         LeaferTypeCreator.run(type, this);
     };
-    exports.Leafer.prototype.getValidMove = function (moveX, moveY) {
+    leafer.getValidMove = function (moveX, moveY) {
         const { scroll, disabled } = this.app.config.move;
         if (scroll) {
             if (Math.abs(moveX) > Math.abs(moveY))
@@ -9237,7 +9292,7 @@ var LeaferUI = (function (exports) {
         }
         return { x: disabled ? 0 : moveX, y: disabled ? 0 : moveY };
     };
-    exports.Leafer.prototype.getValidScale = function (changeScale) {
+    leafer.getValidScale = function (changeScale) {
         const { scaleX } = this.zoomLayer.__, { min, max, disabled } = this.app.config.zoom, absScale = Math.abs(scaleX * changeScale);
         if (absScale < min)
             changeScale = min / scaleX;
@@ -9693,7 +9748,7 @@ var LeaferUI = (function (exports) {
             swipeDistance: 20,
             preventDefaultMenu: true
         },
-        cursor: {},
+        cursor: true,
         keyEvent: true
     };
 
@@ -10006,7 +10061,7 @@ var LeaferUI = (function (exports) {
             this.hoverData = data;
         }
         updateCursor(data) {
-            if (this.config.cursor.stop || !this.config.pointer.hover)
+            if (!this.config.cursor || !this.config.pointer.hover)
                 return;
             if (!data) {
                 this.updateHoverData();
@@ -10161,27 +10216,6 @@ var LeaferUI = (function (exports) {
         }
     }
 
-    const canvas$1 = LeaferCanvasBase.prototype;
-    canvas$1.hitFill = function (point, fillRule) {
-        return fillRule ? this.context.isPointInPath(point.x, point.y, fillRule) : this.context.isPointInPath(point.x, point.y);
-    };
-    canvas$1.hitStroke = function (point, strokeWidth) {
-        this.strokeWidth = strokeWidth;
-        return this.context.isPointInStroke(point.x, point.y);
-    };
-    canvas$1.hitPixel = function (radiusPoint, offset, scale = 1) {
-        let { x, y, radiusX, radiusY } = radiusPoint;
-        if (offset)
-            x -= offset.x, y -= offset.y;
-        tempBounds$1.set(x - radiusX, y - radiusY, radiusX * 2, radiusY * 2).scale(scale).ceil();
-        const { data } = this.context.getImageData(tempBounds$1.x, tempBounds$1.y, tempBounds$1.width, tempBounds$1.height);
-        for (let i = 0, len = data.length; i < len; i += 4) {
-            if (data[i + 3] > 0)
-                return true;
-        }
-        return data[3] > 0;
-    };
-
     const { toInnerRadiusPointOf, copy: copy$2, setRadius } = PointHelper;
     const inner = {};
     const leaf = exports.Leaf.prototype;
@@ -10218,7 +10252,7 @@ var LeaferUI = (function (exports) {
     const ui$2 = exports.UI.prototype;
     ui$2.__updateHitCanvas = function () {
         const data = this.__, { hitCanvasManager } = this.leafer;
-        const isHitPixelFill = data.__pixelFill && data.hitFill === 'pixel';
+        const isHitPixelFill = (data.__pixelFill || data.__isCanvas) && data.hitFill === 'pixel';
         const isHitPixelStroke = data.__pixelStroke && data.hitStroke === 'pixel';
         const isHitPixel = isHitPixelFill || isHitPixelStroke;
         if (!this.__hitCanvas)
@@ -10250,11 +10284,11 @@ var LeaferUI = (function (exports) {
         if (data.__isHitPixel && this.__hitPixel(inner))
             return true;
         const { hitFill } = data;
-        const needHitFillPath = (data.fill && hitFill && hitFill !== 'none') || hitFill === 'all';
+        const needHitFillPath = ((data.fill || data.__isCanvas) && (hitFill === 'path' || (hitFill === 'pixel' && !(data.__pixelFill || data.__isCanvas)))) || hitFill === 'all';
         if (needHitFillPath && this.__hitFill(inner))
             return true;
         const { hitStroke, __strokeWidth } = data;
-        const needHitStrokePath = (data.stroke && hitFill && hitStroke !== 'none') || hitStroke === 'all';
+        const needHitStrokePath = (data.stroke && (hitStroke === 'path' || (hitStroke === 'pixel' && !data.__pixelStroke))) || hitStroke === 'all';
         if (!needHitFillPath && !needHitStrokePath)
             return false;
         const radiusWidth = inner.radiusX * 2;
@@ -10286,7 +10320,7 @@ var LeaferUI = (function (exports) {
     const ui$1 = new exports.UI();
     const rect = exports.Rect.prototype;
     rect.__updateHitCanvas = function () {
-        if (this.stroke || this.cornerRadius || (this.fill && this.hitFill === 'pixel') || this.hitStroke === 'all')
+        if (this.stroke || this.cornerRadius || ((this.fill || this.__.__isCanvas) && this.hitFill === 'pixel') || this.hitStroke === 'all')
             ui$1.__updateHitCanvas.call(this);
         else if (this.__hitCanvas)
             this.__hitCanvas = null;
@@ -10309,6 +10343,27 @@ var LeaferUI = (function (exports) {
         return this.leafer ? this.leafer.selector.getByPoint(hitPoint, options.hitRadius || 0, Object.assign(Object.assign({}, options), { target: this })) : null;
     };
 
+    const canvas$1 = LeaferCanvasBase.prototype;
+    canvas$1.hitFill = function (point, fillRule) {
+        return fillRule ? this.context.isPointInPath(point.x, point.y, fillRule) : this.context.isPointInPath(point.x, point.y);
+    };
+    canvas$1.hitStroke = function (point, strokeWidth) {
+        this.strokeWidth = strokeWidth;
+        return this.context.isPointInStroke(point.x, point.y);
+    };
+    canvas$1.hitPixel = function (radiusPoint, offset, scale = 1) {
+        let { x, y, radiusX, radiusY } = radiusPoint;
+        if (offset)
+            x -= offset.x, y -= offset.y;
+        tempBounds$1.set(x - radiusX, y - radiusY, radiusX * 2, radiusY * 2).scale(scale).ceil();
+        const { data } = this.context.getImageData(tempBounds$1.x, tempBounds$1.y, tempBounds$1.width || 1, tempBounds$1.height || 1);
+        for (let i = 0, len = data.length; i < len; i += 4) {
+            if (data[i + 3] > 0)
+                return true;
+        }
+        return data[3] > 0;
+    };
+
     const PointerEventHelper = {
         convert(e, local) {
             const base = InteractionHelper.getBase(e);
@@ -11255,7 +11310,7 @@ var LeaferUI = (function (exports) {
                         width *= data.scaleX;
                         height *= data.scaleY;
                     }
-                    allowPaint = width * height > Platform.image.maxCacheSize;
+                    allowPaint = (width * height > Platform.image.maxCacheSize) || Export.running;
                 }
                 else {
                     allowPaint = false;
@@ -11767,7 +11822,8 @@ var LeaferUI = (function (exports) {
                         if (breakAll) {
                             if (wordWidth)
                                 addWord();
-                            addRow();
+                            if (rowWidth)
+                                addRow();
                         }
                         else {
                             if (!afterBreak)
@@ -11775,10 +11831,12 @@ var LeaferUI = (function (exports) {
                             if (langBreak || afterBreak || charType === Break || charType === Before || charType === Single || (wordWidth + charWidth > realWidth)) {
                                 if (wordWidth)
                                     addWord();
-                                addRow();
+                                if (rowWidth)
+                                    addRow();
                             }
                             else {
-                                addRow();
+                                if (rowWidth)
+                                    addRow();
                             }
                         }
                     }
@@ -12164,6 +12222,7 @@ var LeaferUI = (function (exports) {
                 }
                 const { leafer } = leaf;
                 if (leafer) {
+                    checkLazy(leaf);
                     leafer.waitViewCompleted(() => __awaiter(this, void 0, void 0, function* () {
                         options = FileHelper.getExportOptions(options);
                         let renderBounds, trimBounds, scaleX = 1, scaleY = 1;
@@ -12171,6 +12230,8 @@ var LeaferUI = (function (exports) {
                         const { slice, trim, onCanvas } = options;
                         let scale = options.scale || 1;
                         let pixelRatio = options.pixelRatio || 1;
+                        const smooth = options.smooth === undefined ? leafer.config.smooth : options.smooth;
+                        const contextSettings = options.contextSettings || leafer.config.contextSettings;
                         if (leaf.isApp) {
                             scale *= pixelRatio;
                             pixelRatio = leaf.app.pixelRatio;
@@ -12209,7 +12270,7 @@ var LeaferUI = (function (exports) {
                             renderBounds = leaf.getBounds('render', relative);
                         }
                         const { x, y, width, height } = new Bounds(renderBounds).scale(scale);
-                        let canvas = Creator.canvas({ width: Math.round(width), height: Math.round(height), pixelRatio });
+                        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) };
                         if (slice) {
                             leaf = leafer;
@@ -12255,6 +12316,12 @@ var LeaferUI = (function (exports) {
             tasker.add(() => __awaiter(this, void 0, void 0, function* () { return yield task(resolve); }), { parallel: false });
         });
     }
+    function checkLazy(leaf) {
+        if (leaf.__.__needComputePaint)
+            leaf.__.__computePaint();
+        if (leaf.isBranch)
+            leaf.children.forEach(child => checkLazy(child));
+    }
 
     const canvas = LeaferCanvasBase.prototype;
     const debug = Debug.get('@leafer-ui/export');
@@ -12420,6 +12487,7 @@ var LeaferUI = (function (exports) {
     exports.WaitHelper = WaitHelper;
     exports.WatchEvent = WatchEvent;
     exports.Watcher = Watcher;
+    exports.addInteractionWindow = addInteractionWindow;
     exports.affectRenderBoundsType = affectRenderBoundsType;
     exports.affectStrokeBoundsType = affectStrokeBoundsType;
     exports.arrowType = arrowType;