@leafer-ui/draw 1.0.1 → 1.0.3

package/lib/draw.cjs

@@ -31,36 +31,6 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
     return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
-const TextConvert = {};
-const ColorConvert = {};
-const PathArrow = {};
-const Paint = {};
-const PaintImage = {};
-const PaintGradient = {};
-const Effect = {};
-const Export = {};
-const State = {};
-
-function stateType(defaultValue) {
-    return core.decorateLeafAttr(defaultValue, (key) => core.attr({
-        set(value) {
-            this.__setAttr(key, value);
-            this.waitLeafer(() => { if (State.setStyle)
-                State.setStyle(this, key + 'Style', value); });
-        }
-    }));
-}
-function arrowType(defaultValue) {
-    return core.decorateLeafAttr(defaultValue, (key) => core.attr({
-        set(value) {
-            if (this.__setAttr(key, value)) {
-                const data = this.__;
-                data.__useArrow = data.startArrow !== 'none' || data.endArrow !== 'none';
-                core.doStrokeType(this);
-            }
-        }
-    }));
-}
 function effectType(defaultValue) {
     return core.decorateLeafAttr(defaultValue, (key) => core.attr({
         set(value) {
@@ -95,10 +65,33 @@ function zoomLayerType() {
     };
 }
 
+const TextConvert = {};
+const ColorConvert = {};
+const PathArrow = {};
+const Paint = {};
+const PaintImage = {};
+const PaintGradient = {};
+const Effect = {};
+const Export = {};
+const State = {
+    setStyleName(_leaf, _styleName, _value) { return core.needPlugin('state'); },
+    set(_leaf, _stateName) { return core.needPlugin('state'); }
+};
+const Transition = {
+    list: {},
+    register(attrName, fn) {
+        Transition.list[attrName] = fn;
+    },
+    get(attrName) {
+        return Transition.list[attrName];
+    }
+};
+
 const { parse } = core.PathConvert;
 const emptyPaint = {};
 const debug$1 = core.Debug.get('UIData');
 class UIData extends core.LeafData {
+    get scale() { const { scaleX, scaleY } = this; return scaleX !== scaleY ? { x: scaleX, y: scaleY } : scaleX; }
     get __strokeWidth() {
         const { strokeWidth, strokeWidthFixed } = this;
         if (strokeWidthFixed) {
@@ -117,9 +110,10 @@ class UIData extends core.LeafData {
     get __autoSide() { return !this._width || !this._height; }
     get __autoSize() { return !this._width && !this._height; }
     setVisible(value) {
-        if (this.__leaf.leafer)
-            this.__leaf.leafer.watcher.hasVisible = true;
         this._visible = value;
+        const { leafer } = this.__leaf;
+        if (leafer)
+            leafer.watcher.hasVisible = true;
     }
     setWidth(value) {
         if (value < 0) {
@@ -243,6 +237,11 @@ class BoxData extends GroupData {
 }
 
 class LeaferData extends GroupData {
+    __getInputData() {
+        const data = super.__getInputData();
+        core.canvasSizeAttrs.forEach(key => delete data[key]);
+        return data;
+    }
 }
 
 class FrameData extends BoxData {
@@ -305,7 +304,7 @@ class ImageData extends RectData {
     __setImageFill(value) {
         if (this.__leaf.image)
             this.__leaf.image = null;
-        this.fill = value ? { type: 'image', mode: 'strench', url: value } : undefined;
+        this.fill = value ? { type: 'image', mode: 'stretch', url: value } : undefined;
     }
     __getData() {
         const data = super.__getData();
@@ -320,6 +319,11 @@ class ImageData extends RectData {
 }
 
 class CanvasData extends RectData {
+    __getInputData() {
+        const data = super.__getInputData();
+        data.url = this.__leaf.canvas.toDataURL('image/png');
+        return data;
+    }
 }
 
 const UIBounds = {
@@ -490,19 +494,8 @@ var UI_1;
 exports.UI = UI_1 = class UI extends core.Leaf {
     get app() { return this.leafer && this.leafer.app; }
     get isFrame() { return false; }
-    set scale(value) {
-        if (typeof value === 'number') {
-            this.scaleX = this.scaleY = value;
-        }
-        else {
-            this.scaleX = value.x;
-            this.scaleY = value.y;
-        }
-    }
-    get scale() {
-        const { scaleX, scaleY } = this;
-        return scaleX !== scaleY ? { x: scaleX, y: scaleY } : scaleX;
-    }
+    set scale(value) { core.MathHelper.assignScale(this, value); }
+    get scale() { return this.__.scale; }
     get pen() {
         const { path } = this.__;
         core.pen.set(this.path = path || []);
@@ -517,8 +510,15 @@ exports.UI = UI_1 = class UI extends core.Leaf {
         super(data);
     }
     reset(_data) { }
-    set(data) {
-        Object.assign(this, data);
+    set(data, isTemp) {
+        if (isTemp) {
+            this.lockNormalStyle = true;
+            Object.assign(this, data);
+            this.lockNormalStyle = false;
+        }
+        else {
+            Object.assign(this, data);
+        }
     }
     get(name) {
         return typeof name === 'string' ? this.__.__getInput(name) : this.__.__getInputData(name);
@@ -581,11 +581,18 @@ exports.UI = UI_1 = class UI extends core.Leaf {
             drawer.rect(x, y, width, height);
         }
     }
+    animate(_keyframe, _options, _type, _isTemp) {
+        return core.needPlugin('animate');
+    }
+    killAnimate(_type) { }
     export(filename, options) {
         return Export.export(this, filename, options);
     }
-    clone() {
-        return UI_1.one(this.toJSON());
+    clone(newData) {
+        const json = this.toJSON();
+        if (newData)
+            Object.assign(json, newData);
+        return UI_1.one(json);
     }
     static one(data, x, y, width, height) {
         return core.UICreator.get(data.tag || this.prototype.__tag, data, x, y, width, height);
@@ -601,6 +608,8 @@ exports.UI = UI_1 = class UI extends core.Leaf {
     static setEditInner(_editorName) { }
     destroy() {
         this.fill = this.stroke = null;
+        if (this.__animate)
+            this.killAnimate();
         super.destroy();
     }
 };
@@ -628,12 +637,6 @@ __decorate([
 __decorate([
     core.visibleType(true)
 ], exports.UI.prototype, "visible", void 0);
-__decorate([
-    stateType(false)
-], exports.UI.prototype, "selected", void 0);
-__decorate([
-    stateType(false)
-], exports.UI.prototype, "disabled", void 0);
 __decorate([
     core.surfaceType(false)
 ], exports.UI.prototype, "locked", void 0);
@@ -706,45 +709,9 @@ __decorate([
 __decorate([
     core.pathType(true)
 ], exports.UI.prototype, "closed", void 0);
-__decorate([
-    core.autoLayoutType(false)
-], exports.UI.prototype, "flow", void 0);
 __decorate([
     core.boundsType(0)
 ], exports.UI.prototype, "padding", void 0);
-__decorate([
-    core.boundsType(0)
-], exports.UI.prototype, "gap", void 0);
-__decorate([
-    core.boundsType('top-left')
-], exports.UI.prototype, "flowAlign", void 0);
-__decorate([
-    core.boundsType(false)
-], exports.UI.prototype, "flowWrap", void 0);
-__decorate([
-    core.boundsType('box')
-], exports.UI.prototype, "itemBox", void 0);
-__decorate([
-    core.boundsType(true)
-], exports.UI.prototype, "inFlow", void 0);
-__decorate([
-    core.boundsType()
-], exports.UI.prototype, "autoWidth", void 0);
-__decorate([
-    core.boundsType()
-], exports.UI.prototype, "autoHeight", void 0);
-__decorate([
-    core.boundsType()
-], exports.UI.prototype, "lockRatio", void 0);
-__decorate([
-    core.boundsType()
-], exports.UI.prototype, "autoBox", void 0);
-__decorate([
-    core.boundsType()
-], exports.UI.prototype, "widthRange", void 0);
-__decorate([
-    core.boundsType()
-], exports.UI.prototype, "heightRange", void 0);
 __decorate([
     core.dataType(false)
 ], exports.UI.prototype, "draggable", void 0);
@@ -808,12 +775,6 @@ __decorate([
 __decorate([
     core.strokeType(10)
 ], exports.UI.prototype, "miterLimit", void 0);
-__decorate([
-    arrowType('none')
-], exports.UI.prototype, "startArrow", void 0);
-__decorate([
-    arrowType('none')
-], exports.UI.prototype, "endArrow", void 0);
 __decorate([
     core.pathType(0)
 ], exports.UI.prototype, "cornerRadius", void 0);
@@ -835,24 +796,6 @@ __decorate([
 __decorate([
     effectType()
 ], exports.UI.prototype, "grayscale", void 0);
-__decorate([
-    core.dataType()
-], exports.UI.prototype, "normalStyle", void 0);
-__decorate([
-    core.dataType()
-], exports.UI.prototype, "hoverStyle", void 0);
-__decorate([
-    core.dataType()
-], exports.UI.prototype, "pressStyle", void 0);
-__decorate([
-    core.dataType()
-], exports.UI.prototype, "focusStyle", void 0);
-__decorate([
-    core.dataType()
-], exports.UI.prototype, "selectedStyle", void 0);
-__decorate([
-    core.dataType()
-], exports.UI.prototype, "disabledStyle", void 0);
 __decorate([
     core.dataType({})
 ], exports.UI.prototype, "data", void 0);
@@ -879,7 +822,7 @@ exports.Group = class Group extends exports.UI {
         if (!this.children)
             this.children = [];
     }
-    set(data) {
+    set(data, isTemp) {
         if (data.children) {
             const { children } = data;
             delete data.children;
@@ -889,7 +832,7 @@ exports.Group = class Group extends exports.UI {
             else {
                 this.clear();
             }
-            super.set(data);
+            super.set(data, isTemp);
             let child;
             children.forEach(childData => {
                 child = childData.__ ? childData : core.UICreator.get(childData.tag, childData);
@@ -898,7 +841,7 @@ exports.Group = class Group extends exports.UI {
             data.children = children;
         }
         else {
-            super.set(data);
+            super.set(data, isTemp);
         }
     }
     toJSON(options) {
@@ -1225,13 +1168,20 @@ exports.Leafer = Leafer_1 = class Leafer extends exports.Group {
         }
     }
     zoom(_zoomType, _padding, _fixedScale) {
-        return debug.error('need @leafer-in/view');
+        return core.needPlugin('view');
     }
     getValidMove(moveX, moveY) { return { x: moveX, y: moveY }; }
     getValidScale(changeScale) { return changeScale; }
     getWorldPointByClient(clientPoint, updateClient) {
         return this.interaction && this.interaction.getLocal(clientPoint, updateClient);
     }
+    getPagePointByClient(clientPoint, updateClient) {
+        return this.getPagePoint(this.getWorldPointByClient(clientPoint, updateClient));
+    }
+    updateClientBounds() {
+        this.canvas && this.canvas.updateClientBounds();
+    }
+    receiveEvent(_event) { }
     __checkUpdateLayout() {
         this.__layout.update();
     }
@@ -1315,7 +1265,7 @@ exports.Rect = __decorate([
 const rect = exports.Rect.prototype;
 const group = exports.Group.prototype;
 const childrenRenderBounds = {};
-const { copy, add, includes: includes$1 } = core.BoundsHelper;
+const { copy, add, includes: includes$1, copyAndSpread: copyAndSpread$1 } = core.BoundsHelper;
 exports.Box = class Box extends exports.Group {
     get __tag() { return 'Box'; }
     get isBranchLeaf() { return true; }
@@ -1329,20 +1279,23 @@ exports.Box = class Box extends exports.Group {
         return this.__updateRectRenderSpread() || -1;
     }
     __updateRectBoxBounds() { }
-    __updateBoxBounds() {
+    __updateBoxBounds(secondLayout) {
         const data = this.__;
         if (this.children.length) {
             if (data.__autoSide) {
                 if (this.leafer && this.leafer.ready)
                     this.leafer.layouter.addExtra(this);
                 super.__updateBoxBounds();
+                const { boxBounds } = this.__layout;
                 if (!data.__autoSize) {
-                    const b = this.__layout.boxBounds;
-                    if (!data.__autoWidth)
-                        b.height += b.y, b.width = data.width, b.x = b.y = 0;
-                    if (!data.__autoHeight)
-                        b.width += b.x, b.height = data.height, b.y = b.x = 0;
+                    if (data.__autoWidth)
+                        boxBounds.width += boxBounds.x, boxBounds.height = data.height, boxBounds.y = boxBounds.x = 0;
+                    else
+                        boxBounds.height += boxBounds.y, boxBounds.width = data.width, boxBounds.x = boxBounds.y = 0;
                 }
+                if (secondLayout && data.flow && data.padding)
+                    copyAndSpread$1(boxBounds, boxBounds, data.padding, false, data.__autoSize ? null : (data.__autoWidth ? 'width' : 'height'));
+                this.__updateNaturalSize();
             }
             else {
                 this.__updateRectBoxBounds();
@@ -1362,13 +1315,13 @@ exports.Box = class Box extends exports.Group {
             super.__updateRenderBounds();
             copy(childrenRenderBounds, renderBounds);
             this.__updateRectRenderBounds();
-            isOverflow = !includes$1(renderBounds, childrenRenderBounds) || undefined;
+            isOverflow = !includes$1(renderBounds, childrenRenderBounds) || !this.pathInputed || !this.__.cornerRadius;
         }
         else {
             this.__updateRectRenderBounds();
         }
         this.isOverflow !== isOverflow && (this.isOverflow = isOverflow);
-        if (isOverflow && !(this.__.__drawAfterFill = this.__.overflow === 'hide'))
+        if (!(this.__.__drawAfterFill = this.__.overflow === 'hide') && isOverflow)
             add(renderBounds, childrenRenderBounds);
     }
     __updateRectRenderBounds() { }
@@ -1702,14 +1655,26 @@ __decorate([
 exports.Image = __decorate([
     core.registerUI()
 ], exports.Image);
+const MyImage = exports.Image;
 
 exports.Canvas = class Canvas extends exports.Rect {
     get __tag() { return 'Canvas'; }
+    get ready() { return !this.url; }
     constructor(data) {
         super(data);
         this.canvas = core.Creator.canvas(this.__);
         this.context = this.canvas.context;
         this.__.__isCanvas = this.__.__drawAfterFill = true;
+        if (data && data.url)
+            this.drawImage(data.url);
+    }
+    drawImage(url) {
+        new core.LeaferImage({ url }).load((image) => {
+            this.context.drawImage(image.view, 0, 0);
+            this.url = undefined;
+            this.paint();
+            this.emitEvent(new core.ImageEvent(core.ImageEvent.LOADED, { image }));
+        });
     }
     draw(ui, offset, scale, rotation) {
         ui.__layout.update();
@@ -1726,19 +1691,18 @@ exports.Canvas = class Canvas extends exports.Rect {
         this.paint();
     }
     paint() {
-        this.forceUpdate('fill');
+        this.forceRender();
     }
     __drawAfterFill(canvas, _options) {
-        const origin = this.canvas.view;
-        const { width, height } = this;
-        if (this.__.cornerRadius || this.pathInputed) {
+        const { width, height, cornerRadius } = this.__, { view } = this.canvas;
+        if (cornerRadius || this.pathInputed) {
             canvas.save();
             canvas.clip();
-            canvas.drawImage(this.canvas.view, 0, 0, origin.width, origin.height, 0, 0, width, height);
+            canvas.drawImage(view, 0, 0, view.width, view.height, 0, 0, width, height);
             canvas.restore();
         }
         else {
-            canvas.drawImage(this.canvas.view, 0, 0, origin.width, origin.height, 0, 0, width, height);
+            canvas.drawImage(view, 0, 0, view.width, view.height, 0, 0, width, height);
         }
     }
     __updateSize() {
@@ -1768,7 +1732,7 @@ __decorate([
     resizeType(100)
 ], exports.Canvas.prototype, "height", void 0);
 __decorate([
-    resizeType(core.Platform.devicePixelRatio)
+    resizeType(1)
 ], exports.Canvas.prototype, "pixelRatio", void 0);
 __decorate([
     resizeType(true)
@@ -1792,13 +1756,13 @@ exports.Text = class Text extends exports.UI {
         super(data);
     }
     __drawHitPath(canvas) {
-        const { __lineHeight, __baseLine, __textDrawData: data } = this.__;
+        const { __lineHeight, fontSize, __baseLine, __textDrawData: data } = this.__;
         canvas.beginPath();
         if (this.__.__letterSpacing < 0) {
             this.__drawPathByData(canvas);
         }
         else {
-            data.rows.forEach(row => canvas.rect(row.x, row.y - __baseLine, row.width, __lineHeight));
+            data.rows.forEach(row => canvas.rect(row.x, row.y - __baseLine, row.width, __lineHeight < fontSize ? fontSize : __lineHeight));
         }
     }
     __drawPathByData(drawer, _data) {
@@ -1991,7 +1955,8 @@ exports.Pen = class Pen extends exports.Group {
     drawPoints(_points, _curve, _close) { return this; }
     clearPath() { return this; }
     paint() {
-        this.pathElement.forceUpdate('path');
+        if (!this.pathElement.__layout.boxChanged)
+            this.pathElement.forceUpdate('path');
     }
 };
 __decorate([
@@ -2001,7 +1966,7 @@ __decorate([
     penPathType()
 ], exports.Pen.prototype, "path", void 0);
 exports.Pen = __decorate([
-    core.useModule(core.PathCreator, ['set', 'beginPath', 'path']),
+    core.useModule(core.PathCreator, ['set', 'beginPath', 'path', 'paint']),
     core.registerUI()
 ], exports.Pen);
 function penPathType() {
@@ -2023,6 +1988,7 @@ exports.GroupData = GroupData;
 exports.ImageData = ImageData;
 exports.LeaferData = LeaferData;
 exports.LineData = LineData;
+exports.MyImage = MyImage;
 exports.Paint = Paint;
 exports.PaintGradient = PaintGradient;
 exports.PaintImage = PaintImage;
@@ -2036,14 +2002,13 @@ exports.StarData = StarData;
 exports.State = State;
 exports.TextConvert = TextConvert;
 exports.TextData = TextData;
+exports.Transition = Transition;
 exports.UIBounds = UIBounds;
 exports.UIData = UIData;
 exports.UIRender = UIRender;
 exports.UnitConvert = UnitConvert;
-exports.arrowType = arrowType;
 exports.effectType = effectType;
 exports.resizeType = resizeType;
-exports.stateType = stateType;
 exports.zoomLayerType = zoomLayerType;
 Object.keys(core).forEach(function (k) {
     if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {