leafer-ui 1.6.1 → 1.6.2

package/dist/web.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 = LeafHelper;
-const { updateAllMatrix: updateAllMatrix$3, updateMatrix: updateMatrix$2, updateAllWorldOpacity: updateAllWorldOpacity$1, updateAllChange: updateAllChange$1 } = L;
+const { updateAllMatrix: updateAllMatrix$3, updateMatrix: updateMatrix$2, updateAllWorldOpacity, updateAllChange: updateAllChange$1, updateChange: updateChange$1 } = L;
 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";
 
 const debug$5 = Debug.get('LeaferCanvas');
 class LeaferCanvas extends LeaferCanvasBase {
@@ -6491,7 +6508,7 @@ class Watcher {
     }
 }
 
-const { updateAllMatrix: updateAllMatrix$1, updateBounds: updateOneBounds, updateAllWorldOpacity } = LeafHelper;
+const { updateAllMatrix: updateAllMatrix$1, updateBounds: updateOneBounds, updateChange: updateOneChange } = LeafHelper;
 const { pushAllChildBranch, pushAllParent } = BranchHelper;
 function updateMatrix(updateList, levelList) {
     let layout;
@@ -6534,15 +6551,7 @@ function updateBounds(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 } = LeafBoundsHelper;
@@ -7387,13 +7396,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;
@@ -7720,6 +7727,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');
     }
@@ -7956,6 +7966,9 @@ __decorate([
 __decorate([
     effectType()
 ], UI.prototype, "filter", void 0);
+__decorate([
+    surfaceType()
+], UI.prototype, "placeholderColor", void 0);
 __decorate([
     dataType({})
 ], UI.prototype, "data", void 0);
@@ -8786,10 +8799,11 @@ let Image$1 = 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;
@@ -8903,7 +8917,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.__;
@@ -9001,6 +9015,9 @@ __decorate([
 __decorate([
     boundsType('')
 ], Text.prototype, "text", void 0);
+__decorate([
+    boundsType('')
+], Text.prototype, "placeholder", void 0);
 __decorate([
     boundsType('caption')
 ], Text.prototype, "fontFamily", void 0);
@@ -10735,8 +10752,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)
@@ -10745,7 +10764,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)));
@@ -10754,38 +10773,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.__;
@@ -11025,6 +11050,7 @@ const PaintModule = {
     compute,
     fill,
     fills,
+    fillPathOrText,
     fillText,
     stroke,
     strokes,
@@ -11217,6 +11243,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;
 }
@@ -12255,4 +12288,3 @@ Object.assign(Creator, {
 useCanvas();
 
 export { AlignHelper, Answer, App, AroundHelper, AutoBounds, BezierHelper, Bounds, BoundsHelper, Box, BoxData, Branch, BranchHelper, BranchRender, Canvas, CanvasData, CanvasManager, ChildEvent, ColorConvert, Creator, Cursor, DataHelper, Debug, Direction4, Direction9, DragEvent$1 as DragEvent, Dragger, DropEvent, Effect, Ellipse, EllipseData, EllipseHelper, Event, EventCreator, Eventer, Export, FileHelper, Filter, 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, Line, LineData, MathHelper, Matrix, MatrixHelper, MoveEvent, MyDragEvent, MyImage, MyPointerEvent, NeedConvertToCanvasCommandMap, OneRadian, PI2, PI_2, Paint, PaintGradient, PaintImage, Path, PathArrow, PathBounds, PathCommandDataHelper, PathCommandMap, PathConvert, PathCorner, PathCreator, PathData, PathDrawer, PathHelper, PathNumberCommandLengthMap, PathNumberCommandMap, Pen, PenData, Picker, Platform, Plugin, Point, PointHelper, PointerButton, PointerEvent$1 as PointerEvent, Polygon, PolygonData, PropertyEvent, Rect, RectData, RectHelper, RectRender, RenderEvent, Renderer, ResizeEvent, Resource, RotateEvent, Run, Selector, Star, StarData, State, StringNumberMap, SwipeEvent, TaskItem, TaskProcessor, Text, TextConvert, TextData, Transition, TwoPointBoundsHelper, UI, UIBounds, UICreator, UIData, UIEvent, UIRender, UnitConvert, WaitHelper, WatchEvent, Watcher, ZoomEvent, affectRenderBoundsType, affectStrokeBoundsType, 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, naturalBoundsType, opacityType, pathInputType, pathType, pen, positionType, registerUI, registerUIEvent, resizeType, rewrite, rewriteAble, rotationType, scaleType, sortType, strokeType, surfaceType, tempBounds$1 as tempBounds, tempMatrix, tempPoint$3 as tempPoint, useCanvas, useModule, version, visibleType, zoomLayerType };
-//# sourceMappingURL=web.module.js.map