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

package/dist/web.module.js

@@ -11,8 +11,15 @@ const Platform = {
         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;
+        }
     }
 };
 
@@ -5126,6 +5133,7 @@ let Leaf = class Leaf {
     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);
@@ -5210,6 +5218,9 @@ let Leaf = class Leaf {
     findOne(_condition, _options) { return undefined; }
     findId(_id) { return undefined; }
     focus(_value) { }
+    updateLayout() {
+        this.__layout.update();
+    }
     forceUpdate(attrName) {
         if (attrName === undefined)
             attrName = 'width';
@@ -5219,8 +5230,8 @@ let Leaf = class Leaf {
         this.__[attrName] = value === undefined ? null : undefined;
         this[attrName] = value;
     }
-    updateLayout() {
-        this.__layout.update();
+    forceRender(_bounds) {
+        this.forceUpdate('surface');
     }
     __updateWorldMatrix() { }
     __updateLocalMatrix() { }
@@ -5757,6 +5768,24 @@ 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 +5830,7 @@ class LeaferCanvas extends LeaferCanvasBase {
                 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 +5841,11 @@ class LeaferCanvas extends LeaferCanvasBase {
             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 +5965,14 @@ function useCanvas(_canvasType, _power) {
         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);
             });
         }
     };
@@ -7342,7 +7372,7 @@ let UI = UI_1 = class UI extends Leaf {
     __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() {
@@ -7900,6 +7930,10 @@ let Leafer = Leafer_1 = class Leafer extends Group {
                 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);
     }
@@ -8518,7 +8552,7 @@ let Canvas = class Canvas extends Rect {
     __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);
@@ -8860,15 +8894,17 @@ let App = class App extends Leafer {
         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() {
@@ -9215,13 +9251,15 @@ const LeaferTypeCreator = {
 };
 const { list, register } = LeaferTypeCreator;
 register('draw', () => { });
+register('custom', () => { });
 register('design', addInteractionWindow);
 register('document', document$1);
 
-Leafer.prototype.initType = function (type) {
+const leafer = Leafer.prototype;
+leafer.initType = function (type) {
     LeaferTypeCreator.run(type, this);
 };
-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))
@@ -9251,7 +9289,7 @@ Leafer.prototype.getValidMove = function (moveX, moveY) {
     }
     return { x: disabled ? 0 : moveX, y: disabled ? 0 : moveY };
 };
-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;
@@ -9707,7 +9745,7 @@ const config = {
         swipeDistance: 20,
         preventDefaultMenu: true
     },
-    cursor: {},
+    cursor: true,
     keyEvent: true
 };
 
@@ -10020,7 +10058,7 @@ class InteractionBase {
         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();
@@ -11269,7 +11307,7 @@ function checkImage(ui, canvas, paint, allowPaint) {
                     width *= data.scaleX;
                     height *= data.scaleY;
                 }
-                allowPaint = width * height > Platform.image.maxCacheSize;
+                allowPaint = (width * height > Platform.image.maxCacheSize) || Export.running;
             }
             else {
                 allowPaint = false;
@@ -11781,7 +11819,8 @@ function createRows(drawData, content, style) {
                     if (breakAll) {
                         if (wordWidth)
                             addWord();
-                        addRow();
+                        if (rowWidth)
+                            addRow();
                     }
                     else {
                         if (!afterBreak)
@@ -11789,10 +11828,12 @@ function createRows(drawData, content, style) {
                         if (langBreak || afterBreak || charType === Break || charType === Before || charType === Single || (wordWidth + charWidth > realWidth)) {
                             if (wordWidth)
                                 addWord();
-                            addRow();
+                            if (rowWidth)
+                                addRow();
                         }
                         else {
-                            addRow();
+                            if (rowWidth)
+                                addRow();
                         }
                     }
                 }
@@ -12178,6 +12219,7 @@ const ExportModule = {
             }
             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;
@@ -12185,6 +12227,8 @@ const ExportModule = {
                     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;
@@ -12223,7 +12267,7 @@ const ExportModule = {
                         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;
@@ -12269,6 +12313,12 @@ function addTask(task) {
         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');
@@ -12323,4 +12373,4 @@ Object.assign(Creator, {
 });
 useCanvas();
 
-export { AlignHelper, AnimateEvent, Answer, App, AroundHelper, AutoBounds, BezierHelper, Bounds, BoundsHelper, Box, BoxData, Branch, BranchHelper, BranchRender, Canvas, CanvasData, CanvasManager, ChildEvent, ColorConvert, Creator, Cursor, DataHelper, Debug, Direction4, Direction9, DragEvent, DropEvent, Effect, Ellipse, EllipseData, EllipseHelper, Event, EventCreator, Export, FileHelper, Frame, FrameData, Group, GroupData, 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, LeaferTypeCreator, Line, LineData, MathHelper, Matrix, MatrixHelper, MoveEvent, MultiTouchHelper, NeedConvertToCanvasCommandMap, OneRadian, PI2, PI_2, Paint, PaintGradient, PaintImage, Path, PathArrow, PathBounds, PathCommandDataHelper, PathCommandMap, PathConvert, PathCorner, PathCreator, PathData, PathDrawer, PathHelper, PathNumberCommandLengthMap, PathNumberCommandMap, Pen, PenData, Platform, Point, PointHelper, PointerButton, PointerEvent, Polygon, PolygonData, PropertyEvent, Rect, RectData, RectHelper, RectRender, RenderEvent, Renderer, ResizeEvent, RotateEvent, Run, Selector, Star, StarData, State, StringNumberMap, SwipeEvent, TaskItem, TaskProcessor, Text, TextConvert, TextData, TwoPointBoundsHelper, UI, UIBounds, UICreator, UIData, UIEvent, UIRender, UnitConvert, WaitHelper, WatchEvent, Watcher, ZoomEvent, affectRenderBoundsType, affectStrokeBoundsType, arrowType, attr, autoLayoutType, boundsType, canvasPatch, canvasSizeAttrs, cursorType, dataProcessor, dataType, decorateLeafAttr, defineDataProcessor, defineKey, defineLeafAttr, doBoundsType, doStrokeType, effectType, emptyData, eraserType, getBoundsData, getDescriptor, getMatrixData, getPointData, hitType, inviteCode, layoutProcessor, maskType, naturalBoundsType, opacityType, pathInputType, pathType, pen, positionType, registerUI, registerUIEvent, resizeType, rewrite, rewriteAble, rotationType, scaleType, sortType, stateType, strokeType, surfaceType, tempBounds$1 as tempBounds, tempMatrix, tempPoint$3 as tempPoint, useCanvas, useModule, version, visibleType, zoomLayerType };
+export { AlignHelper, AnimateEvent, Answer, App, AroundHelper, AutoBounds, BezierHelper, Bounds, BoundsHelper, Box, BoxData, Branch, BranchHelper, BranchRender, Canvas, CanvasData, CanvasManager, ChildEvent, ColorConvert, Creator, Cursor, DataHelper, Debug, Direction4, Direction9, DragEvent, DropEvent, Effect, Ellipse, EllipseData, EllipseHelper, Event, EventCreator, Export, FileHelper, Frame, FrameData, Group, GroupData, 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, LeaferTypeCreator, Line, LineData, MathHelper, Matrix, MatrixHelper, MoveEvent, MultiTouchHelper, NeedConvertToCanvasCommandMap, OneRadian, PI2, PI_2, Paint, PaintGradient, PaintImage, Path, PathArrow, PathBounds, PathCommandDataHelper, PathCommandMap, PathConvert, PathCorner, PathCreator, PathData, PathDrawer, PathHelper, PathNumberCommandLengthMap, PathNumberCommandMap, Pen, PenData, Platform, Point, PointHelper, PointerButton, PointerEvent, Polygon, PolygonData, PropertyEvent, Rect, RectData, RectHelper, RectRender, RenderEvent, Renderer, ResizeEvent, RotateEvent, Run, Selector, Star, StarData, State, StringNumberMap, SwipeEvent, TaskItem, TaskProcessor, Text, TextConvert, TextData, TwoPointBoundsHelper, UI, UIBounds, UICreator, UIData, UIEvent, UIRender, UnitConvert, WaitHelper, WatchEvent, Watcher, ZoomEvent, addInteractionWindow, affectRenderBoundsType, affectStrokeBoundsType, arrowType, attr, autoLayoutType, boundsType, canvasPatch, canvasSizeAttrs, cursorType, dataProcessor, dataType, decorateLeafAttr, defineDataProcessor, defineKey, defineLeafAttr, doBoundsType, doStrokeType, effectType, emptyData, eraserType, getBoundsData, getDescriptor, getMatrixData, getPointData, hitType, inviteCode, layoutProcessor, maskType, naturalBoundsType, opacityType, pathInputType, pathType, pen, positionType, registerUI, registerUIEvent, resizeType, rewrite, rewriteAble, rotationType, scaleType, sortType, stateType, strokeType, surfaceType, tempBounds$1 as tempBounds, tempMatrix, tempPoint$3 as tempPoint, useCanvas, useModule, version, visibleType, zoomLayerType };