@leafer/miniapp 1.6.1 → 1.6.2

package/dist/miniapp.cjs

@@ -115,4 +115,3 @@ Object.keys(resize).forEach(function (k) {
 		get: function () { return resize[k]; }
 	});
 });
-//# sourceMappingURL=miniapp.cjs.map

package/dist/miniapp.esm.js

@@ -14,4 +14,3 @@ export * from '@leafer-in/export';
 export * from '@leafer-in/filter';
 export * from '@leafer-in/color';
 export * from '@leafer-in/resize';
-//# sourceMappingURL=miniapp.esm.js.map

package/dist/miniapp.module.js

@@ -2589,7 +2589,11 @@ const BezierHelper = {
         const point = {};
         getPointAndSet(t, fromX, fromY, x1, y1, x2, y2, toX, toY, point);
         return point;
-    }
+    },
+    getDerivative(t, fromV, v1, v2, toV) {
+        const o = 1 - t;
+        return 3 * o * o * (v1 - fromV) + 6 * o * t * (v2 - v1) + 3 * t * t * (toV - v2);
+    },
 };
 const { getPointAndSet, toTwoPointBounds: toTwoPointBounds$1, ellipse: ellipse$6 } = BezierHelper;
 
@@ -3770,8 +3774,11 @@ class LeaferImage {
     load(onSuccess, onError) {
         if (!this.loading) {
             this.loading = true;
+            let { loadImage, loadImageWithProgress } = Platform.origin, onProgress = this.config.showProgress && loadImageWithProgress && this.onProgress.bind(this);
+            if (onProgress)
+                loadImage = loadImageWithProgress;
             Resource.tasker.add(() => __awaiter(this, void 0, void 0, function* () {
-                return yield Platform.origin.loadImage(this.url).then(img => this.setView(img)).catch((e) => {
+                return yield loadImage(this.url, onProgress).then(img => this.setView(img)).catch((e) => {
                     this.error = e;
                     this.onComplete(false);
                 });
@@ -3796,6 +3803,9 @@ class LeaferImage {
         this.view = img;
         this.onComplete(true);
     }
+    onProgress(progress) {
+        this.progress = progress;
+    }
     onComplete(isSuccess) {
         let odd;
         this.waitComplete.forEach((item, index) => {
@@ -4261,13 +4271,20 @@ const LeafHelper = {
         if (leaf.isBranch) {
             const { children } = leaf;
             for (let i = 0, len = children.length; i < len; i++) {
-                updateAllWorldOpacity$1(children[i]);
+                updateAllWorldOpacity(children[i]);
             }
         }
     },
-    updateAllChange(leaf) {
-        updateAllWorldOpacity$1(leaf);
+    updateChange(leaf) {
+        const layout = leaf.__layout;
+        if (layout.stateStyleChanged)
+            leaf.updateState();
+        if (layout.opacityChanged)
+            updateAllWorldOpacity(leaf);
         leaf.__updateChange();
+    },
+    updateAllChange(leaf) {
+        updateChange$1(leaf);
         if (leaf.isBranch) {
             const { children } = leaf;
             for (let i = 0, len = children.length; i < len; i++) {
@@ -4403,7 +4420,7 @@ const LeafHelper = {
     }
 };
 const L$4 = LeafHelper;
-const { updateAllMatrix: updateAllMatrix$4, updateMatrix: updateMatrix$4, updateAllWorldOpacity: updateAllWorldOpacity$1, updateAllChange: updateAllChange$1 } = L$4;
+const { updateAllMatrix: updateAllMatrix$4, updateMatrix: updateMatrix$4, updateAllWorldOpacity, updateAllChange: updateAllChange$1, updateChange: updateChange$1 } = L$4;
 function getTempLocal(t, world) {
     t.__layout.update();
     return t.parent ? PointHelper.tempToInnerOf(world, t.parent.__world) : world;
@@ -6125,7 +6142,7 @@ class LeafLevelList {
     }
 }
 
-const version = "1.6.1";
+const version = "1.6.2";
 
 class LeaferCanvas extends LeaferCanvasBase {
     get allowBackgroundColor() { return false; }
@@ -6449,7 +6466,7 @@ class Watcher {
     }
 }
 
-const { updateAllMatrix: updateAllMatrix$2, updateBounds: updateOneBounds, updateAllWorldOpacity } = LeafHelper;
+const { updateAllMatrix: updateAllMatrix$2, updateBounds: updateOneBounds, updateChange: updateOneChange } = LeafHelper;
 const { pushAllChildBranch, pushAllParent } = BranchHelper;
 function updateMatrix$2(updateList, levelList) {
     let layout;
@@ -6492,15 +6509,7 @@ function updateBounds$1(boundsList) {
     });
 }
 function updateChange(updateList) {
-    let layout;
-    updateList.list.forEach(leaf => {
-        layout = leaf.__layout;
-        if (layout.opacityChanged)
-            updateAllWorldOpacity(leaf);
-        if (layout.stateStyleChanged)
-            setTimeout(() => layout.stateStyleChanged && leaf.updateState());
-        leaf.__updateChange();
-    });
+    updateList.list.forEach(updateOneChange);
 }
 
 const { worldBounds: worldBounds$1 } = LeafBoundsHelper;
@@ -7345,13 +7354,11 @@ class TextData extends UIData {
     setFontWeight(value) {
         if (typeof value === 'string') {
             this.__setInput('fontWeight', value);
-            this._fontWeight = fontWeightMap[value] || 400;
-        }
-        else {
-            if (this.__input)
-                this.__removeInput('fontWeight');
-            this._fontWeight = value;
+            value = fontWeightMap[value] || 400;
         }
+        else if (this.__input)
+            this.__removeInput('fontWeight');
+        this._fontWeight = value;
     }
     setBoxStyle(value) {
         let t = this.__leaf, box = t.__box;
@@ -7678,6 +7685,9 @@ let UI = UI_1 = class UI extends Leaf {
         else
             drawer.rect(x, y, width, height);
     }
+    drawImagePlaceholder(canvas, _image) {
+        Paint.fill(this.__.placeholderColor, this, canvas);
+    }
     animate(_keyframe, _options, _type, _isTemp) {
         return Plugin.need('animate');
     }
@@ -7914,6 +7924,9 @@ __decorate([
 __decorate([
     effectType()
 ], UI.prototype, "filter", void 0);
+__decorate([
+    surfaceType()
+], UI.prototype, "placeholderColor", void 0);
 __decorate([
     dataType({})
 ], UI.prototype, "data", void 0);
@@ -8744,10 +8757,11 @@ let Image = class Image extends Rect {
     get ready() { return this.image ? this.image.ready : false; }
     constructor(data) {
         super(data);
-        this.on(ImageEvent.LOADED, (e) => {
-            if (e.attrName === 'fill' && e.attrValue.url === this.url)
-                this.image = e.image;
-        });
+        this.on_(ImageEvent.LOADED, this.__onLoaded, this);
+    }
+    __onLoaded(e) {
+        if (e.attrName === 'fill' && e.attrValue.url === this.url)
+            this.image = e.image;
     }
     destroy() {
         this.image = null;
@@ -8861,7 +8875,7 @@ let Text = class Text extends UI {
         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.__);
+        data.__textDrawData = TextConvert.getDrawData((data.__isPlacehold = data.placeholder && data.text === '') ? data.placeholder : data.text, this.__);
     }
     __updateBoxBounds() {
         const data = this.__;
@@ -8959,6 +8973,9 @@ __decorate([
 __decorate([
     boundsType('')
 ], Text.prototype, "text", void 0);
+__decorate([
+    boundsType('')
+], Text.prototype, "placeholder", void 0);
 __decorate([
     boundsType('caption')
 ], Text.prototype, "fontFamily", void 0);
@@ -10489,8 +10506,10 @@ class Interaction extends InteractionBase {
 }
 
 function fillText(ui, canvas) {
-    let row, data = ui.__.__textDrawData;
-    const { rows, decorationY } = data;
+    const data = ui.__, { rows, decorationY } = data.__textDrawData;
+    if (data.__isPlacehold && data.placeholderColor)
+        canvas.fillStyle = data.placeholderColor;
+    let row;
     for (let i = 0, len = rows.length; i < len; i++) {
         row = rows[i];
         if (row.text)
@@ -10499,7 +10518,7 @@ function fillText(ui, canvas) {
             row.data.forEach(charData => { canvas.fillText(charData.char, charData.x, row.y); });
     }
     if (decorationY) {
-        const { decorationColor, decorationHeight } = data;
+        const { decorationColor, decorationHeight } = data.__textDrawData;
         if (decorationColor)
             canvas.fillStyle = decorationColor;
         rows.forEach(row => decorationY.forEach(value => canvas.fillRect(row.x, row.y + value, row.width, decorationHeight)));
@@ -10508,38 +10527,44 @@ function fillText(ui, canvas) {
 
 function fill(fill, ui, canvas) {
     canvas.fillStyle = fill;
-    ui.__.__font ? fillText(ui, canvas) : (ui.__.windingRule ? canvas.fill(ui.__.windingRule) : canvas.fill());
+    fillPathOrText(ui, canvas);
 }
 function fills(fills, ui, canvas) {
     let item;
-    const { windingRule, __font } = ui.__;
     for (let i = 0, len = fills.length; i < len; i++) {
         item = fills[i];
-        if (item.image && PaintImage.checkImage(ui, canvas, item, !__font))
-            continue;
-        if (item.style) {
-            canvas.fillStyle = item.style;
-            if (item.transform) {
-                canvas.save();
-                canvas.transform(item.transform);
-                if (item.blendMode)
-                    canvas.blendMode = item.blendMode;
-                __font ? fillText(ui, canvas) : (windingRule ? canvas.fill(windingRule) : canvas.fill());
-                canvas.restore();
+        if (item.image) {
+            if (PaintImage.checkImage(ui, canvas, item, !ui.__.__font))
+                continue;
+            if (!item.style) {
+                if (!i && item.image.isPlacehold)
+                    ui.drawImagePlaceholder(canvas, item.image);
+                continue;
             }
-            else {
-                if (item.blendMode) {
-                    canvas.saveBlendMode(item.blendMode);
-                    __font ? fillText(ui, canvas) : (windingRule ? canvas.fill(windingRule) : canvas.fill());
-                    canvas.restoreBlendMode();
-                }
-                else {
-                    __font ? fillText(ui, canvas) : (windingRule ? canvas.fill(windingRule) : canvas.fill());
-                }
+        }
+        canvas.fillStyle = item.style;
+        if (item.transform) {
+            canvas.save();
+            canvas.transform(item.transform);
+            if (item.blendMode)
+                canvas.blendMode = item.blendMode;
+            fillPathOrText(ui, canvas);
+            canvas.restore();
+        }
+        else {
+            if (item.blendMode) {
+                canvas.saveBlendMode(item.blendMode);
+                fillPathOrText(ui, canvas);
+                canvas.restoreBlendMode();
             }
+            else
+                fillPathOrText(ui, canvas);
         }
     }
 }
+function fillPathOrText(ui, canvas) {
+    ui.__.__font ? fillText(ui, canvas) : (ui.__.windingRule ? canvas.fill(ui.__.windingRule) : canvas.fill());
+}
 
 function strokeText(stroke, ui, canvas) {
     const { strokeAlign } = ui.__;
@@ -10779,6 +10804,7 @@ const PaintModule = {
     compute,
     fill,
     fills,
+    fillPathOrText,
     fillText,
     stroke,
     strokes,
@@ -10971,6 +10997,13 @@ function image(ui, attrName, paint, boxBounds, firstUse) {
             onLoadError(ui, event, error);
             leafPaint.loadId = null;
         });
+        if (ui.placeholderColor)
+            setTimeout(() => {
+                if (!(image.ready || image.isPlacehold)) {
+                    image.isPlacehold = true;
+                    ui.forceUpdate('surface');
+                }
+            }, 100);
     }
     return leafPaint;
 }
@@ -12531,8 +12564,10 @@ const EditDataHelper = {
                 align = 'top-right';
         }
         if (lockRatio) {
-            const unlockSide = lockRatio === 'corner' && direction % 2;
-            if (!unlockSide) {
+            if (lockRatio === 'corner' && direction % 2) {
+                lockRatio = false;
+            }
+            else {
                 let scale;
                 switch (direction) {
                     case top$1:
@@ -16692,6 +16727,7 @@ ui$3.__runAnimation = function (type, complete) {
 const gaussNodes = [0.1488743389, 0.4333953941, 0.6794095682, 0.8650633666, 0.9739065285];
 const gaussWeights = [0.2955242247, 0.2692667193, 0.2190863625, 0.1494513491, 0.0666713443];
 const { sqrt } = Math;
+const { getDerivative } = BezierHelper;
 const HighBezierHelper = {
     getDistance(fromX, fromY, x1, y1, x2, y2, toX, toY, t = 1) {
         let distance = 0, t1, t2, d1X, d1Y, d2X, d2Y, half = t / 2;
@@ -16706,10 +16742,6 @@ const HighBezierHelper = {
         }
         return distance * half;
     },
-    getDerivative(t, fromV, v1, v2, toV) {
-        const o = 1 - t;
-        return 3 * o * o * (v1 - fromV) + 6 * o * t * (v2 - v1) + 3 * t * t * (toV - v2);
-    },
     getRotation(t, fromX, fromY, x1, y1, x2, y2, toX, toY) {
         const dx = getDerivative(t, fromX, x1, x2, toX);
         const dy = getDerivative(t, fromY, y1, y2, toY);
@@ -16738,7 +16770,7 @@ const HighBezierHelper = {
         data.push(PathCommandMap.C, ax, ay, bx, by, cx, cy);
     }
 };
-const { getDerivative, getDistance } = HighBezierHelper;
+const { getDistance } = HighBezierHelper;
 
 const { M, L, C, Z } = PathCommandMap;
 const tempPoint = {}, tempFrom = {};
@@ -17036,7 +17068,10 @@ function stateType(defaultValue, styleName) {
     return decorateLeafAttr(defaultValue, (key) => attr({
         set(value) {
             this.__setAttr(key, value);
-            this.waitLeafer(() => styleName ? State.setStyleName(this, styleName, value) : State.set(this, value));
+            if (this.leaferIsReady)
+                styleName ? State.setStyleName(this, styleName, value) : State.set(this, value);
+            else
+                this.__layout.stateStyleChanged = true;
         }
     }));
 }
@@ -17133,6 +17168,9 @@ function getStyle(leaf) {
     const selectedStyle = style.selectedStyle || leaf.selectedStyle;
     if (selectedStyle && State.isSelected(leaf, button))
         exist = assign(style, selectedStyle);
+    const placeholderStyle = style.placeholderStyle || leaf.placeholderStyle;
+    if (placeholderStyle && State.isPlacehold(leaf, button))
+        exist = assign(style, placeholderStyle);
     if (State.isDisabled(leaf, button)) {
         const disabledStyle = style.disabledStyle || leaf.disabledStyle;
         if (disabledStyle)
@@ -17312,12 +17350,14 @@ State.animateExcludes = {
     transitionOut: 1,
     states: 1,
     state: 1,
+    placeholder: 1,
     normalStyle: 1,
     hoverStyle: 1,
     pressStyle: 1,
     focusStyle: 1,
     selectedStyle: 1,
-    disabledStyle: 1
+    disabledStyle: 1,
+    placeholderStyle: 1
 };
 State.isState = function (state, leaf, button) { return checkState(state, leaf, button); };
 State.isSelected = function (leaf, button) { return checkFixedState('selected', leaf, button); };
@@ -17325,6 +17365,7 @@ State.isDisabled = function (leaf, button) { return checkFixedState('disabled',
 State.isFocus = function (leaf, button) { return checkPointerState('isFocus', leaf, button); };
 State.isHover = function (leaf, button) { return checkPointerState('isHover', leaf, button); };
 State.isPress = function (leaf, button) { return checkPointerState('isPress', leaf, button); };
+State.isPlacehold = function (leaf, _button) { return leaf.__.__isPlacehold; };
 State.isDrag = function (leaf, button) { return checkPointerState('isDrag', leaf, button); };
 State.setStyleName = function (leaf, stateType, value) { value ? setState(leaf, stateType, leaf[stateType]) : unsetState(leaf, stateType, leaf[stateType]); };
 State.set = function (leaf, stateName) { const style = leaf.states[stateName]; style ? setState(leaf, stateName, style) : unsetState(leaf, stateName, style); };
@@ -17342,6 +17383,7 @@ UI.addAttr('pressStyle', undefined, stateStyleType);
 UI.addAttr('focusStyle', undefined, stateStyleType);
 UI.addAttr('selectedStyle', undefined, stateStyleType);
 UI.addAttr('disabledStyle', undefined, stateStyleType);
+UI.addAttr('placeholderStyle', undefined, stateStyleType);
 UI.addAttr('button', false, dataType);
 ui$1.focus = function (value = true) {
     this.waitLeafer(() => {
@@ -17360,6 +17402,15 @@ ui$1.focus = function (value = true) {
 ui$1.updateState = function () {
     State.updateStyle(this, undefined, 'in');
 };
+const text = Text.prototype, textKey = 'text';
+defineKey(text, textKey, Object.assign(Object.assign({}, getDescriptor(text, textKey)), { set(value) {
+        const t = this, oldValue = t.text;
+        if (t.__setAttr(textKey, value)) {
+            doBoundsType(t);
+            if (t.placeholderStyle && t.placeholder && (oldValue === '' || value === ''))
+                t.__layout.stateStyleChanged = true;
+        }
+    } }));
 
 class RobotData extends UIData {
     get __drawAfterFill() { return true; }
@@ -17703,7 +17754,7 @@ const ExportModule = {
         else {
             let renderBounds, trimBounds, scaleX = 1, scaleY = 1;
             const { worldTransform, isLeafer, leafer, isFrame } = leaf;
-            const { slice, trim, padding, onCanvas } = options;
+            const { slice, clip, trim, padding, onCanvas } = options;
             const smooth = options.smooth === undefined ? (leafer ? leafer.config.smooth : true) : options.smooth;
             const contextSettings = options.contextSettings || (leafer ? leafer.config.contextSettings : undefined);
             const screenshot = options.screenshot || leaf.isApp;
@@ -17747,7 +17798,9 @@ const ExportModule = {
                 scaleData.scaleY *= pixelRatio;
                 pixelRatio = leaf.app.pixelRatio;
             }
-            const { x, y, width, height } = new Bounds(renderBounds).scale(scaleData.scaleX, scaleData.scaleY);
+            let { x, y, width, height } = new Bounds(renderBounds).scale(scaleData.scaleX, scaleData.scaleY);
+            if (clip)
+                x += clip.x, y += clip.y, width = clip.width, height = clip.height;
             const renderOptions = { matrix: matrix.scale(1 / scaleData.scaleX, 1 / scaleData.scaleY).invert().translate(-x, -y).withScale(1 / scaleX * scaleData.scaleX, 1 / scaleY * scaleData.scaleY) };
             let canvas = Creator.canvas({ width: Math.floor(width), height: Math.floor(height), pixelRatio, smooth, contextSettings });
             let sliceLeaf;
@@ -17900,4 +17953,3 @@ Object.assign(Filter, {
 });
 
 export { AlignHelper, Animate, AnimateEasing, AnimateEvent, AnimateList, Answer, App, AroundHelper, Arrow, ArrowData, AutoBounds, BezierHelper, Bounds, BoundsHelper, Box, BoxData, Branch, BranchHelper, BranchRender, Canvas, CanvasData, CanvasManager, ChildEvent, ColorConvert, Creator, Cursor, DataHelper, Debug, Direction4, Direction9, DragEvent, Dragger, DropEvent, EditBox, EditDataHelper, EditPoint, EditSelect, EditSelectHelper, EditTool, EditToolCreator, Editor, EditorEvent, EditorGroupEvent, EditorHelper, EditorMoveEvent, EditorRotateEvent, EditorScaleEvent, EditorSkewEvent, Effect, Ellipse, EllipseData, EllipseHelper, Event, EventCreator, Eventer, Export, FileHelper, Filter, Finder, Flow, Frame, FrameData, Group, GroupData, HighBezierHelper, HighCurveHelper, HitCanvasManager, Image, ImageData, ImageEvent, ImageManager, IncrementId, InnerEditor, InnerEditorEvent, 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, LineEditTool, MathHelper, Matrix, MatrixHelper, MoveEvent, MultiTouchHelper, MyDragEvent, MyImage, MyPointerEvent, NeedConvertToCanvasCommandMap, OneRadian, PI2, PI_2, Paint, PaintGradient, PaintImage, Path, PathArrow, PathArrowModule, PathBounds, PathCommandDataHelper, PathCommandMap, PathConvert, PathCorner, PathCreator, PathData, PathDrawer, PathHelper, PathMatrixHelper, PathNumberCommandLengthMap, PathNumberCommandMap, PathScaler, Pen, PenData, Picker, Platform, Plugin, Point, PointHelper, PointerButton, PointerEvent, Polygon, PolygonData, PropertyEvent, Rect, RectData, RectHelper, RectRender, RenderEvent, Renderer, ResizeEvent, Resource, Robot, RobotData, RotateEvent, Run, ScrollBar, SelectArea, Selector, Star, StarData, State, StringNumberMap, Stroker, SwipeEvent, TaskItem, TaskProcessor, Text, TextConvert, TextData, Transformer, Transition, TwoPointBoundsHelper, UI, UIBounds, UICreator, UIData, UIEvent, UIRender, UnitConvert, WaitHelper, WatchEvent, Watcher, WheelEventHelper, ZoomEvent, addViewport, addViewportConfig, 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, isEmptyData, isNull, layoutProcessor, maskType, motionPathType, naturalBoundsType, opacityType, pathInputType, pathType, pen, positionType, registerEditTool, registerInnerEditor, registerUI, registerUIEvent, resizeType, rewrite, rewriteAble, rotationType, scaleResize, scaleResizeFontSize, scaleResizeGroup, scaleResizePath, scaleResizePoints, scaleType, sortType, stateStyleType, stateType, strokeType, surfaceType, tempBounds$1 as tempBounds, tempMatrix, tempPoint$4 as tempPoint, useCanvas, useModule, version, visibleType, zoomLayerType };
-//# sourceMappingURL=miniapp.module.js.map