@leafer-ui/draw 1.9.4 → 1.9.5

package/lib/draw.cjs

@@ -304,7 +304,11 @@ class LeaferData extends GroupData {
 
 class FrameData extends BoxData {}
 
-class LineData extends UIData {}
+class LineData extends UIData {
+    get __usePathBox() {
+        return this.points || this.__pathInputed;
+    }
+}
 
 class RectData extends UIData {
     get __boxStroke() {
@@ -318,7 +322,7 @@ class EllipseData extends UIData {
     }
 }
 
-class PolygonData extends UIData {}
+class PolygonData extends LineData {}
 
 class StarData extends UIData {}
 
@@ -628,20 +632,9 @@ exports.UI = UI_1 = class UI extends core.Leaf {
         if (!path) this.__drawPathByBox(core.pen);
         return core.pen;
     }
-    constructor(data) {
-        super(data);
-    }
     reset(_data) {}
-    set(data, transition) {
-        if (data) {
-            if (transition) {
-                if (transition === "temp") {
-                    this.lockNormalStyle = true;
-                    Object.assign(this, data);
-                    this.lockNormalStyle = false;
-                } else this.animate(data, transition);
-            } else Object.assign(this, data);
-        }
+    set(data, _transition) {
+        if (data) Object.assign(this, data);
     }
     get(name) {
         return core.isString(name) ? this.__.__getInput(name) : this.__.__getInputData(name);
@@ -687,7 +680,7 @@ exports.UI = UI_1 = class UI extends core.Leaf {
         const data = this.__;
         if (data.path) {
             data.__pathForRender = data.cornerRadius ? core.PathCorner.smooth(data.path, data.cornerRadius, data.cornerSmoothing) : data.path;
-            if (data.__useArrow) PathArrow.addArrows(this, !data.cornerRadius);
+            if (data.__useArrow) PathArrow.addArrows(this);
         } else data.__pathForRender && (data.__pathForRender = undefined);
     }
     __drawRenderPath(canvas) {
@@ -711,7 +704,8 @@ exports.UI = UI_1 = class UI extends core.Leaf {
     drawImagePlaceholder(canvas, _image) {
         Paint.fill(this.__.placeholderColor, this, canvas);
     }
-    animate(_keyframe, _options, _type, _isTemp) {
+    animate(keyframe, _options, _type, _isTemp) {
+        this.set(keyframe);
         return core.Plugin.need("animate");
     }
     killAnimate(_type, _nextStyle) {}
@@ -900,9 +894,6 @@ exports.Group = class Group extends exports.UI {
     get isBranch() {
         return true;
     }
-    constructor(data) {
-        super(data);
-    }
     reset(data) {
         this.__setBranch();
         super.reset(data);
@@ -1027,7 +1018,7 @@ exports.Leafer = Leafer_1 = class Leafer extends exports.Group {
         const canvas = this.canvas = core.Creator.canvas(config);
         this.__controllers.push(this.renderer = core.Creator.renderer(this, canvas, config), this.watcher = core.Creator.watcher(this, config), this.layouter = core.Creator.layouter(this, config));
         if (this.isApp) this.__setApp();
-        this.__checkAutoLayout(config, parentApp);
+        this.__checkAutoLayout();
         this.view = canvas.view;
         if (!parentApp) {
             this.selector = core.Creator.selector(this);
@@ -1126,7 +1117,8 @@ exports.Leafer = Leafer_1 = class Leafer extends exports.Group {
         this.leafer = leafer;
         this.__level = 1;
     }
-    __checkAutoLayout(config, parentApp) {
+    __checkAutoLayout() {
+        const {config: config, parentApp: parentApp} = this;
         if (!parentApp) {
             if (!config.width || !config.height) this.autoLayout = new core.AutoBounds(config);
             this.canvas.startAutoLayout(this.autoLayout, this.__onResize.bind(this));
@@ -1152,9 +1144,10 @@ exports.Leafer = Leafer_1 = class Leafer extends exports.Group {
         return super.__getAttr(attrName);
     }
     __changeCanvasSize(attrName, newValue) {
-        const data = core.DataHelper.copyAttrs({}, this.canvas, core.canvasSizeAttrs);
-        data[attrName] = this.config[attrName] = newValue;
-        if (newValue) this.canvas.stopAutoLayout();
+        const {config: config, canvas: canvas} = this;
+        const data = core.DataHelper.copyAttrs({}, canvas, core.canvasSizeAttrs);
+        data[attrName] = config[attrName] = newValue;
+        config.width && config.height ? canvas.stopAutoLayout() : this.__checkAutoLayout();
         this.__doResize(data);
     }
     __changeFill(newValue) {
@@ -1301,9 +1294,9 @@ exports.Leafer = Leafer_1 = class Leafer extends exports.Group {
                     if (!this.parent) {
                         if (this.selector) this.selector.destroy();
                         if (this.hitCanvasManager) this.hitCanvasManager.destroy();
-                        this.canvasManager.destroy();
+                        if (this.canvasManager) this.canvasManager.destroy();
                     }
-                    this.canvas.destroy();
+                    if (this.canvas) this.canvas.destroy();
                     this.config.view = this.view = this.parentApp = null;
                     if (this.userConfig) this.userConfig.view = null;
                     super.destroy();
@@ -1331,9 +1324,6 @@ exports.Rect = class Rect extends exports.UI {
     get __tag() {
         return "Rect";
     }
-    constructor(data) {
-        super(data);
-    }
 };
 
 __decorate([ core.dataProcessor(RectData) ], exports.Rect.prototype, "__", void 0);
@@ -1465,9 +1455,6 @@ exports.Frame = class Frame extends exports.Box {
     get isFrame() {
         return true;
     }
-    constructor(data) {
-        super(data);
-    }
 };
 
 __decorate([ core.dataProcessor(FrameData) ], exports.Frame.prototype, "__", void 0);
@@ -1484,9 +1471,6 @@ exports.Ellipse = class Ellipse extends exports.UI {
     get __tag() {
         return "Ellipse";
     }
-    constructor(data) {
-        super(data);
-    }
     __updatePath() {
         const {width: width, height: height, innerRadius: innerRadius, startAngle: startAngle, endAngle: endAngle} = this.__;
         const rx = width / 2, ry = height / 2;
@@ -1530,8 +1514,6 @@ const {moveTo: moveTo$2, lineTo: lineTo$2, drawPoints: drawPoints$1} = core.Path
 
 const {rotate: rotate, getAngle: getAngle, getDistance: getDistance, defaultPoint: defaultPoint} = core.PointHelper;
 
-const {toBounds: toBounds} = core.PathBounds;
-
 exports.Line = class Line extends exports.UI {
     get __tag() {
         return "Line";
@@ -1548,31 +1530,16 @@ exports.Line = class Line extends exports.UI {
         this.rotation = getAngle(defaultPoint, value);
         if (this.height) this.height = 0;
     }
-    constructor(data) {
-        super(data);
-    }
     __updatePath() {
         const data = this.__;
         const path = data.path = [];
         if (data.points) {
-            drawPoints$1(path, data.points, false, data.closed);
+            drawPoints$1(path, data.points, data.curve, data.closed);
         } else {
             moveTo$2(path, 0, 0);
             lineTo$2(path, this.width, 0);
         }
     }
-    __updateRenderPath() {
-        const data = this.__;
-        if (!this.pathInputed && data.points && data.curve) {
-            drawPoints$1(data.__pathForRender = [], data.points, data.curve, data.closed);
-            if (data.__useArrow) PathArrow.addArrows(this, false);
-        } else super.__updateRenderPath();
-    }
-    __updateBoxBounds() {
-        if (this.points) {
-            toBounds(this.__.__pathForRender, this.__layout.boxBounds);
-        } else super.__updateBoxBounds();
-    }
 };
 
 __decorate([ core.dataProcessor(LineData) ], exports.Line.prototype, "__", void 0);
@@ -1599,15 +1566,13 @@ exports.Polygon = class Polygon extends exports.UI {
     get __tag() {
         return "Polygon";
     }
-    constructor(data) {
-        super(data);
-    }
     __updatePath() {
-        const path = this.__.path = [];
-        if (this.__.points) {
-            drawPoints(path, this.__.points, false, true);
+        const data = this.__;
+        const path = data.path = [];
+        if (data.points) {
+            drawPoints(path, data.points, data.curve, true);
         } else {
-            const {width: width, height: height, sides: sides} = this.__;
+            const {width: width, height: height, sides: sides} = data;
             const rx = width / 2, ry = height / 2;
             moveTo$1(path, rx, 0);
             for (let i = 1; i < sides; i++) {
@@ -1642,9 +1607,6 @@ exports.Star = class Star extends exports.UI {
     get __tag() {
         return "Star";
     }
-    constructor(data) {
-        super(data);
-    }
     __updatePath() {
         const {width: width, height: height, corners: corners, innerRadius: innerRadius} = this.__;
         const rx = width / 2, ry = height / 2;
@@ -1677,9 +1639,6 @@ exports.Image = class Image extends exports.Rect {
         const {fill: fill} = this.__;
         return core.isArray(fill) && fill[0].image;
     }
-    constructor(data) {
-        super(data);
-    }
 };
 
 __decorate([ core.dataProcessor(ImageData) ], exports.Image.prototype, "__", void 0);
@@ -1779,9 +1738,6 @@ exports.Text = class Text extends exports.UI {
         this.updateLayout();
         return this.__.__textDrawData;
     }
-    constructor(data) {
-        super(data);
-    }
     __updateTextDrawData() {
         const data = this.__;
         const {lineHeight: lineHeight, letterSpacing: letterSpacing, fontFamily: fontFamily, fontSize: fontSize, fontWeight: fontWeight, italic: italic, textCase: textCase, textOverflow: textOverflow, padding: padding} = data;
@@ -1914,9 +1870,6 @@ exports.Path = class Path extends exports.UI {
     get __tag() {
         return "Path";
     }
-    constructor(data) {
-        super(data);
-    }
 };
 
 __decorate([ core.dataProcessor(PathData) ], exports.Path.prototype, "__", void 0);
@@ -1929,9 +1882,6 @@ exports.Pen = class Pen extends exports.Group {
     get __tag() {
         return "Pen";
     }
-    constructor(data) {
-        super(data);
-    }
     setStyle(data) {
         const path = this.pathElement = new exports.Path(data);
         this.pathStyle = data;

package/lib/draw.esm.js

@@ -1,4 +1,4 @@
-import { defineKey, decorateLeafAttr, attr, createDescriptor, Plugin, isObject, PathConvert, DataHelper, Debug, LeafData, isString, isUndefined, isArray, canvasSizeAttrs, UICreator, MathHelper, dataProcessor, dataType, surfaceType, opacityType, visibleType, sortType, maskType, eraserType, positionType, boundsType, scaleType, rotationType, scrollType, autoLayoutType, naturalBoundsType, affectRenderBoundsType, pathInputType, pathType, hitType, strokeType, cursorType, rewrite, Leaf, useModule, rewriteAble, pen, PathCorner, PathDrawer, isNumber, registerUI, Branch, LeafList, Resource, getBoundsData, Creator, CanvasManager, WaitHelper, LeaferEvent, Bounds, ResizeEvent, AutoBounds, Run, LayoutEvent, RenderEvent, WatchEvent, ImageManager, BoundsHelper, PathCommandDataHelper, Platform, PointHelper, PathBounds, affectStrokeBoundsType, getPointData, LeaferImage, ImageEvent, Matrix, PathCreator } from "@leafer/core";
+import { defineKey, decorateLeafAttr, attr, createDescriptor, Plugin, isObject, PathConvert, DataHelper, Debug, LeafData, isString, isUndefined, isArray, canvasSizeAttrs, UICreator, MathHelper, dataProcessor, dataType, surfaceType, opacityType, visibleType, sortType, maskType, eraserType, positionType, boundsType, scaleType, rotationType, scrollType, autoLayoutType, naturalBoundsType, affectRenderBoundsType, pathInputType, pathType, hitType, strokeType, cursorType, rewrite, Leaf, useModule, rewriteAble, pen, PathCorner, PathDrawer, isNumber, registerUI, Branch, LeafList, Resource, getBoundsData, Creator, CanvasManager, WaitHelper, LeaferEvent, Bounds, ResizeEvent, AutoBounds, Run, LayoutEvent, RenderEvent, WatchEvent, ImageManager, BoundsHelper, PathCommandDataHelper, Platform, PointHelper, affectStrokeBoundsType, getPointData, LeaferImage, ImageEvent, Matrix, PathCreator } from "@leafer/core";
 
 export * from "@leafer/core";
 
@@ -304,7 +304,11 @@ class LeaferData extends GroupData {
 
 class FrameData extends BoxData {}
 
-class LineData extends UIData {}
+class LineData extends UIData {
+    get __usePathBox() {
+        return this.points || this.__pathInputed;
+    }
+}
 
 class RectData extends UIData {
     get __boxStroke() {
@@ -318,7 +322,7 @@ class EllipseData extends UIData {
     }
 }
 
-class PolygonData extends UIData {}
+class PolygonData extends LineData {}
 
 class StarData extends UIData {}
 
@@ -628,20 +632,9 @@ let UI = UI_1 = class UI extends Leaf {
         if (!path) this.__drawPathByBox(pen);
         return pen;
     }
-    constructor(data) {
-        super(data);
-    }
     reset(_data) {}
-    set(data, transition) {
-        if (data) {
-            if (transition) {
-                if (transition === "temp") {
-                    this.lockNormalStyle = true;
-                    Object.assign(this, data);
-                    this.lockNormalStyle = false;
-                } else this.animate(data, transition);
-            } else Object.assign(this, data);
-        }
+    set(data, _transition) {
+        if (data) Object.assign(this, data);
     }
     get(name) {
         return isString(name) ? this.__.__getInput(name) : this.__.__getInputData(name);
@@ -687,7 +680,7 @@ let UI = UI_1 = class UI extends Leaf {
         const data = this.__;
         if (data.path) {
             data.__pathForRender = data.cornerRadius ? PathCorner.smooth(data.path, data.cornerRadius, data.cornerSmoothing) : data.path;
-            if (data.__useArrow) PathArrow.addArrows(this, !data.cornerRadius);
+            if (data.__useArrow) PathArrow.addArrows(this);
         } else data.__pathForRender && (data.__pathForRender = undefined);
     }
     __drawRenderPath(canvas) {
@@ -711,7 +704,8 @@ let UI = UI_1 = class UI extends Leaf {
     drawImagePlaceholder(canvas, _image) {
         Paint.fill(this.__.placeholderColor, this, canvas);
     }
-    animate(_keyframe, _options, _type, _isTemp) {
+    animate(keyframe, _options, _type, _isTemp) {
+        this.set(keyframe);
         return Plugin.need("animate");
     }
     killAnimate(_type, _nextStyle) {}
@@ -900,9 +894,6 @@ let Group = class Group extends UI {
     get isBranch() {
         return true;
     }
-    constructor(data) {
-        super(data);
-    }
     reset(data) {
         this.__setBranch();
         super.reset(data);
@@ -1027,7 +1018,7 @@ let Leafer = Leafer_1 = class Leafer extends Group {
         const canvas = this.canvas = Creator.canvas(config);
         this.__controllers.push(this.renderer = Creator.renderer(this, canvas, config), this.watcher = Creator.watcher(this, config), this.layouter = Creator.layouter(this, config));
         if (this.isApp) this.__setApp();
-        this.__checkAutoLayout(config, parentApp);
+        this.__checkAutoLayout();
         this.view = canvas.view;
         if (!parentApp) {
             this.selector = Creator.selector(this);
@@ -1126,7 +1117,8 @@ let Leafer = Leafer_1 = class Leafer extends Group {
         this.leafer = leafer;
         this.__level = 1;
     }
-    __checkAutoLayout(config, parentApp) {
+    __checkAutoLayout() {
+        const {config: config, parentApp: parentApp} = this;
         if (!parentApp) {
             if (!config.width || !config.height) this.autoLayout = new AutoBounds(config);
             this.canvas.startAutoLayout(this.autoLayout, this.__onResize.bind(this));
@@ -1152,9 +1144,10 @@ let Leafer = Leafer_1 = class Leafer extends Group {
         return super.__getAttr(attrName);
     }
     __changeCanvasSize(attrName, newValue) {
-        const data = DataHelper.copyAttrs({}, this.canvas, canvasSizeAttrs);
-        data[attrName] = this.config[attrName] = newValue;
-        if (newValue) this.canvas.stopAutoLayout();
+        const {config: config, canvas: canvas} = this;
+        const data = DataHelper.copyAttrs({}, canvas, canvasSizeAttrs);
+        data[attrName] = config[attrName] = newValue;
+        config.width && config.height ? canvas.stopAutoLayout() : this.__checkAutoLayout();
         this.__doResize(data);
     }
     __changeFill(newValue) {
@@ -1301,9 +1294,9 @@ let Leafer = Leafer_1 = class Leafer extends Group {
                     if (!this.parent) {
                         if (this.selector) this.selector.destroy();
                         if (this.hitCanvasManager) this.hitCanvasManager.destroy();
-                        this.canvasManager.destroy();
+                        if (this.canvasManager) this.canvasManager.destroy();
                     }
-                    this.canvas.destroy();
+                    if (this.canvas) this.canvas.destroy();
                     this.config.view = this.view = this.parentApp = null;
                     if (this.userConfig) this.userConfig.view = null;
                     super.destroy();
@@ -1331,9 +1324,6 @@ let Rect = class Rect extends UI {
     get __tag() {
         return "Rect";
     }
-    constructor(data) {
-        super(data);
-    }
 };
 
 __decorate([ dataProcessor(RectData) ], Rect.prototype, "__", void 0);
@@ -1465,9 +1455,6 @@ let Frame = class Frame extends Box {
     get isFrame() {
         return true;
     }
-    constructor(data) {
-        super(data);
-    }
 };
 
 __decorate([ dataProcessor(FrameData) ], Frame.prototype, "__", void 0);
@@ -1484,9 +1471,6 @@ let Ellipse = class Ellipse extends UI {
     get __tag() {
         return "Ellipse";
     }
-    constructor(data) {
-        super(data);
-    }
     __updatePath() {
         const {width: width, height: height, innerRadius: innerRadius, startAngle: startAngle, endAngle: endAngle} = this.__;
         const rx = width / 2, ry = height / 2;
@@ -1530,8 +1514,6 @@ const {moveTo: moveTo$2, lineTo: lineTo$2, drawPoints: drawPoints$1} = PathComma
 
 const {rotate: rotate, getAngle: getAngle, getDistance: getDistance, defaultPoint: defaultPoint} = PointHelper;
 
-const {toBounds: toBounds} = PathBounds;
-
 let Line = class Line extends UI {
     get __tag() {
         return "Line";
@@ -1548,31 +1530,16 @@ let Line = class Line extends UI {
         this.rotation = getAngle(defaultPoint, value);
         if (this.height) this.height = 0;
     }
-    constructor(data) {
-        super(data);
-    }
     __updatePath() {
         const data = this.__;
         const path = data.path = [];
         if (data.points) {
-            drawPoints$1(path, data.points, false, data.closed);
+            drawPoints$1(path, data.points, data.curve, data.closed);
         } else {
             moveTo$2(path, 0, 0);
             lineTo$2(path, this.width, 0);
         }
     }
-    __updateRenderPath() {
-        const data = this.__;
-        if (!this.pathInputed && data.points && data.curve) {
-            drawPoints$1(data.__pathForRender = [], data.points, data.curve, data.closed);
-            if (data.__useArrow) PathArrow.addArrows(this, false);
-        } else super.__updateRenderPath();
-    }
-    __updateBoxBounds() {
-        if (this.points) {
-            toBounds(this.__.__pathForRender, this.__layout.boxBounds);
-        } else super.__updateBoxBounds();
-    }
 };
 
 __decorate([ dataProcessor(LineData) ], Line.prototype, "__", void 0);
@@ -1599,15 +1566,13 @@ let Polygon = class Polygon extends UI {
     get __tag() {
         return "Polygon";
     }
-    constructor(data) {
-        super(data);
-    }
     __updatePath() {
-        const path = this.__.path = [];
-        if (this.__.points) {
-            drawPoints(path, this.__.points, false, true);
+        const data = this.__;
+        const path = data.path = [];
+        if (data.points) {
+            drawPoints(path, data.points, data.curve, true);
         } else {
-            const {width: width, height: height, sides: sides} = this.__;
+            const {width: width, height: height, sides: sides} = data;
             const rx = width / 2, ry = height / 2;
             moveTo$1(path, rx, 0);
             for (let i = 1; i < sides; i++) {
@@ -1642,9 +1607,6 @@ let Star = class Star extends UI {
     get __tag() {
         return "Star";
     }
-    constructor(data) {
-        super(data);
-    }
     __updatePath() {
         const {width: width, height: height, corners: corners, innerRadius: innerRadius} = this.__;
         const rx = width / 2, ry = height / 2;
@@ -1677,9 +1639,6 @@ let Image = class Image extends Rect {
         const {fill: fill} = this.__;
         return isArray(fill) && fill[0].image;
     }
-    constructor(data) {
-        super(data);
-    }
 };
 
 __decorate([ dataProcessor(ImageData) ], Image.prototype, "__", void 0);
@@ -1779,9 +1738,6 @@ let Text = class Text extends UI {
         this.updateLayout();
         return this.__.__textDrawData;
     }
-    constructor(data) {
-        super(data);
-    }
     __updateTextDrawData() {
         const data = this.__;
         const {lineHeight: lineHeight, letterSpacing: letterSpacing, fontFamily: fontFamily, fontSize: fontSize, fontWeight: fontWeight, italic: italic, textCase: textCase, textOverflow: textOverflow, padding: padding} = data;
@@ -1914,9 +1870,6 @@ let Path = class Path extends UI {
     get __tag() {
         return "Path";
     }
-    constructor(data) {
-        super(data);
-    }
 };
 
 __decorate([ dataProcessor(PathData) ], Path.prototype, "__", void 0);
@@ -1929,9 +1882,6 @@ let Pen = class Pen extends Group {
     get __tag() {
         return "Pen";
     }
-    constructor(data) {
-        super(data);
-    }
     setStyle(data) {
         const path = this.pathElement = new Path(data);
         this.pathStyle = data;