@leafer-ui/draw 1.0.0-rc.22 → 1.0.0-rc.24

package/lib/draw.esm.js

@@ -1,4 +1,4 @@
-import { decorateLeafAttr, attr, doStrokeType, defineKey, Debug, LeafData, PathConvert, OneRadian, dataProcessor, dataType, surfaceType, opacityType, sortType, maskType, eraserType, positionType, boundsType, scaleType, rotationType, autoLayoutType, hitType, strokeType, cursorType, naturalBoundsType, pathInputType, pathType, rewrite, Leaf, useModule, rewriteAble, pen, PathCorner, PathDrawer, UICreator, registerUI, Branch, LeafList, ImageManager, DataHelper, Creator, CanvasManager, WaitHelper, LeaferEvent, canvasSizeAttrs, Bounds, ResizeEvent, AutoBounds, Run, LayoutEvent, RenderEvent, WatchEvent, affectRenderBoundsType, BoundsHelper, Platform, PathCommandDataHelper, affectStrokeBoundsType, getPointData, PointHelper, PathBounds, ImageEvent, Matrix, MathHelper, PathCreator } from '@leafer/core';
+import { decorateLeafAttr, attr, doStrokeType, defineKey, Debug, LeafData, PathConvert, dataProcessor, dataType, surfaceType, opacityType, visibleType, sortType, maskType, eraserType, positionType, boundsType, scaleType, rotationType, autoLayoutType, naturalBoundsType, pathInputType, pathType, hitType, strokeType, cursorType, rewrite, Leaf, useModule, rewriteAble, pen, PathCorner, PathDrawer, UICreator, registerUI, Branch, LeafList, ImageManager, DataHelper, Creator, CanvasManager, WaitHelper, LeaferEvent, canvasSizeAttrs, Bounds, ResizeEvent, AutoBounds, Run, LayoutEvent, RenderEvent, WatchEvent, affectRenderBoundsType, BoundsHelper, Platform, PathCommandDataHelper, affectStrokeBoundsType, getPointData, PointHelper, PathBounds, ImageEvent, Matrix, MathHelper, PathCreator } from '@leafer/core';
 export * from '@leafer/core';
 
 /******************************************************************************
@@ -52,10 +52,11 @@ function stateType(defaultValue) {
 function arrowType(defaultValue) {
     return decorateLeafAttr(defaultValue, (key) => attr({
         set(value) {
-            this.__setAttr(key, value);
-            const data = this.__;
-            data.__useArrow = data.startArrow !== 'none' || data.endArrow !== 'none';
-            doStrokeType(this);
+            if (this.__setAttr(key, value)) {
+                const data = this.__;
+                data.__useArrow = data.startArrow !== 'none' || data.endArrow !== 'none';
+                doStrokeType(this);
+            }
         }
     }));
 }
@@ -228,7 +229,7 @@ class UIData extends LeafData {
 const UnitConvert = {
     number(value, percentRefer) {
         if (typeof value === 'object')
-            return value.type === 'percent' ? value.value / 100 * percentRefer : value.value;
+            return value.type === 'percent' ? value.value * percentRefer : value.value;
         return value;
     }
 };
@@ -237,7 +238,7 @@ class GroupData extends UIData {
 }
 
 class BoxData extends GroupData {
-    get __boxStroke() { return true; }
+    get __boxStroke() { return !this.__pathInputed; }
 }
 
 class LeaferData extends GroupData {
@@ -250,11 +251,11 @@ class LineData extends UIData {
 }
 
 class RectData extends UIData {
-    get __boxStroke() { return true; }
+    get __boxStroke() { return !this.__pathInputed; }
 }
 
 class EllipseData extends UIData {
-    get __boxStroke() { return true; }
+    get __boxStroke() { return !this.__pathInputed; }
 }
 
 class PolygonData extends UIData {
@@ -281,6 +282,7 @@ const fontWeightMap = {
     'black': 900
 };
 class TextData extends UIData {
+    get __useNaturalRatio() { return false; }
     setFontWeight(value) {
         if (typeof value === 'string') {
             this.__setInput('fontWeight', value);
@@ -322,19 +324,18 @@ class CanvasData extends RectData {
 const UIBounds = {
     __updateStrokeSpread() {
         let width = 0, boxWidth = 0;
-        const { stroke, hitStroke, strokeAlign, strokeWidth } = this.__;
-        if ((stroke || hitStroke === 'all') && strokeWidth && strokeAlign !== 'inside') {
+        const data = this.__, { strokeAlign, strokeWidth } = data;
+        if ((data.stroke || data.hitStroke === 'all') && strokeWidth && strokeAlign !== 'inside') {
             boxWidth = width = strokeAlign === 'center' ? strokeWidth / 2 : strokeWidth;
-            if (!this.__.__boxStroke) {
-                const { miterLimit, strokeCap } = this.__;
-                const miterLimitAddWidth = this.__tag !== 'Line' ? 1 / Math.sin(miterLimit * OneRadian / 2) * Math.sqrt(strokeWidth) - width : 0;
-                const storkeCapAddWidth = strokeCap === 'none' ? 0 : strokeWidth;
+            if (!data.__boxStroke) {
+                const miterLimitAddWidth = data.__isLinePath ? 0 : 10 * width;
+                const storkeCapAddWidth = data.strokeCap === 'none' ? 0 : strokeWidth;
                 width += Math.max(miterLimitAddWidth, storkeCapAddWidth);
             }
         }
-        this.__layout.strokeBoxSpread = boxWidth;
-        if (this.__.__useArrow)
+        if (data.__useArrow)
             width += strokeWidth * 5;
+        this.__layout.strokeBoxSpread = boxWidth;
         return width;
     },
     __updateRenderSpread() {
@@ -354,7 +355,7 @@ const UIBounds = {
         if (backgroundBlur)
             shapeWidth = Math.max(shapeWidth, backgroundBlur);
         this.__layout.renderShapeSpread = shapeWidth;
-        return width;
+        return width + (this.__layout.strokeSpread || 0);
     }
 };
 
@@ -445,7 +446,7 @@ function drawFast(ui, canvas, options) {
 
 const RectRender = {
     __drawFast(canvas, options) {
-        const { width, height, fill, stroke, __drawAfterFill } = this.__;
+        let { width, height, fill, stroke, __drawAfterFill } = this.__;
         if (fill) {
             canvas.fillStyle = fill;
             canvas.fillRect(0, 0, width, height);
@@ -463,7 +464,16 @@ const RectRender = {
                     canvas.strokeRect(0, 0, width, height);
                     break;
                 case 'inside':
-                    canvas.strokeRect(half, half, width - __strokeWidth, height - __strokeWidth);
+                    width -= __strokeWidth, height -= __strokeWidth;
+                    if (width < 0 || height < 0) {
+                        canvas.save();
+                        this.__clip(canvas, options);
+                        canvas.strokeRect(half, half, width, height);
+                        canvas.restore();
+                    }
+                    else {
+                        canvas.strokeRect(half, half, width, height);
+                    }
                     break;
                 case 'outside':
                     canvas.strokeRect(-half, -half, width + __strokeWidth, height + __strokeWidth);
@@ -491,11 +501,14 @@ let UI = UI_1 = class UI extends Leaf {
         return scaleX !== scaleY ? { x: scaleX, y: scaleY } : scaleX;
     }
     get pen() {
-        pen.set(this.path = this.__.path || []);
+        const { path } = this.__;
+        pen.set(this.path = path || []);
+        if (!path)
+            this.__drawPathByBox(pen);
         return pen;
     }
     get editConfig() { return undefined; }
-    get editOuter() { return 'EditTool'; }
+    get editOuter() { return this.__.__isLinePath ? 'LineEditTool' : 'EditTool'; }
     get editInner() { return 'PathEditor'; }
     constructor(data) {
         super(data);
@@ -509,22 +522,22 @@ let UI = UI_1 = class UI extends Leaf {
     }
     createProxyData() { return undefined; }
     find(_condition, _options) { return undefined; }
+    findTag(tag) { return this.find({ tag }); }
     findOne(_condition, _options) { return undefined; }
+    findId(id) { return this.findOne({ id }); }
     getPath(curve, pathForRender) {
         this.__layout.update();
         let path = pathForRender ? this.__.__pathForRender : this.__.path;
-        if (!path) {
-            const { width, height } = this.boxBounds;
-            if (width || height) {
-                pen.set(path = []);
-                this.__drawPathByBox(pen);
-            }
-        }
+        if (!path)
+            pen.set(path = []), this.__drawPathByBox(pen);
         return curve ? PathConvert.toCanvasData(path, true) : path;
     }
     getPathString(curve, pathForRender) {
         return PathConvert.stringify(this.getPath(curve, pathForRender));
     }
+    load() {
+        this.__.__computePaint();
+    }
     __onUpdateSize() {
         if (this.__.__input) {
             const data = this.__;
@@ -610,7 +623,7 @@ __decorate([
     opacityType(1)
 ], UI.prototype, "opacity", void 0);
 __decorate([
-    opacityType(true)
+    visibleType(true)
 ], UI.prototype, "visible", void 0);
 __decorate([
     stateType(false)
@@ -627,9 +640,6 @@ __decorate([
 __decorate([
     maskType(false)
 ], UI.prototype, "mask", void 0);
-__decorate([
-    surfaceType('pixel')
-], UI.prototype, "maskType", void 0);
 __decorate([
     eraserType(false)
 ], UI.prototype, "eraser", void 0);
@@ -660,9 +670,75 @@ __decorate([
 __decorate([
     rotationType(0, true)
 ], UI.prototype, "skewY", void 0);
+__decorate([
+    positionType(0, true)
+], UI.prototype, "offsetX", void 0);
+__decorate([
+    positionType(0, true)
+], UI.prototype, "offsetY", void 0);
+__decorate([
+    positionType(0, true)
+], UI.prototype, "scrollX", void 0);
+__decorate([
+    positionType(0, true)
+], UI.prototype, "scrollY", void 0);
+__decorate([
+    autoLayoutType()
+], UI.prototype, "origin", void 0);
 __decorate([
     autoLayoutType()
 ], UI.prototype, "around", void 0);
+__decorate([
+    dataType(false)
+], UI.prototype, "lazy", void 0);
+__decorate([
+    naturalBoundsType(1)
+], UI.prototype, "pixelRatio", void 0);
+__decorate([
+    pathInputType()
+], UI.prototype, "path", void 0);
+__decorate([
+    pathType()
+], UI.prototype, "windingRule", void 0);
+__decorate([
+    pathType(true)
+], UI.prototype, "closed", void 0);
+__decorate([
+    autoLayoutType(false)
+], UI.prototype, "flow", void 0);
+__decorate([
+    boundsType(0)
+], UI.prototype, "padding", void 0);
+__decorate([
+    boundsType(0)
+], UI.prototype, "gap", void 0);
+__decorate([
+    boundsType('top-left')
+], UI.prototype, "align", void 0);
+__decorate([
+    boundsType(false)
+], UI.prototype, "wrap", void 0);
+__decorate([
+    boundsType('box')
+], UI.prototype, "itemBox", void 0);
+__decorate([
+    boundsType(true)
+], UI.prototype, "inFlow", void 0);
+__decorate([
+    boundsType()
+], UI.prototype, "autoWidth", void 0);
+__decorate([
+    boundsType()
+], UI.prototype, "autoHeight", void 0);
+__decorate([
+    boundsType()
+], UI.prototype, "autoBox", void 0);
+__decorate([
+    boundsType()
+], UI.prototype, "widthRange", void 0);
+__decorate([
+    boundsType()
+], UI.prototype, "heightRange", void 0);
 __decorate([
     dataType(false)
 ], UI.prototype, "draggable", void 0);
@@ -672,9 +748,6 @@ __decorate([
 __decorate([
     dataType(false)
 ], UI.prototype, "editable", void 0);
-__decorate([
-    dataType('size')
-], UI.prototype, "editSize", void 0);
 __decorate([
     hitType(true)
 ], UI.prototype, "hittable", void 0);
@@ -729,21 +802,6 @@ __decorate([
 __decorate([
     strokeType(10)
 ], UI.prototype, "miterLimit", void 0);
-__decorate([
-    dataType(false)
-], UI.prototype, "lazy", void 0);
-__decorate([
-    naturalBoundsType(1)
-], UI.prototype, "pixelRatio", void 0);
-__decorate([
-    pathInputType()
-], UI.prototype, "path", void 0);
-__decorate([
-    pathType()
-], UI.prototype, "windingRule", void 0);
-__decorate([
-    pathType(true)
-], UI.prototype, "closed", void 0);
 __decorate([
     arrowType('none')
 ], UI.prototype, "startArrow", void 0);
@@ -874,6 +932,7 @@ let Leafer = Leafer_1 = class Leafer extends Group {
     get layoutLocked() { return !this.layouter.running; }
     get FPS() { return this.renderer ? this.renderer.FPS : 60; }
     get cursorPoint() { return (this.interaction && this.interaction.hoverData) || { x: this.width / 2, y: this.height / 2 }; }
+    get clientBounds() { return this.canvas && this.canvas.getClientBounds(); }
     constructor(userConfig, data) {
         super(data);
         this.config = {
@@ -977,9 +1036,6 @@ let Leafer = Leafer_1 = class Leafer extends Group {
         const data = DataHelper.copyAttrs({}, size, canvasSizeAttrs);
         Object.keys(data).forEach(key => this[key] = data[key]);
     }
-    forceFullRender() {
-        this.forceRender();
-    }
     forceRender(bounds) {
         this.renderer.addBlock(bounds ? new Bounds(bounds) : this.canvas.bounds);
         if (this.viewReady)
@@ -1034,7 +1090,8 @@ let Leafer = Leafer_1 = class Leafer extends Group {
                 this.__changeFill(newValue);
             }
             else if (attrName === 'hittable') {
-                this.canvas.hittable = newValue;
+                if (!this.parent)
+                    this.canvas.hittable = newValue;
             }
         }
         return super.__setAttr(attrName, newValue);
@@ -1057,7 +1114,7 @@ let Leafer = Leafer_1 = class Leafer extends Group {
             this.canvas.backgroundColor = newValue;
         }
         else {
-            this.forceFullRender();
+            this.forceRender();
         }
     }
     __onCreated() {
@@ -1152,6 +1209,9 @@ let Leafer = Leafer_1 = class Leafer extends Group {
     zoom(_zoomType, _padding, _fixedScale) { return undefined; }
     getValidMove(moveX, moveY) { return { x: moveX, y: moveY }; }
     getValidScale(changeScale) { return changeScale; }
+    getWorldPointByClient(clientPoint, updateClient) {
+        return this.interaction && this.interaction.getLocal(clientPoint, updateClient);
+    }
     __checkUpdateLayout() {
         this.__layout.update();
     }
@@ -1234,8 +1294,8 @@ Rect = __decorate([
 
 const rect = Rect.prototype;
 const group = Group.prototype;
-const bounds = {};
-const { copy, add } = BoundsHelper;
+const childrenRenderBounds = {};
+const { copy, add, includes: includes$1 } = BoundsHelper;
 let Box = class Box extends Group {
     get __tag() { return 'Box'; }
     get isBranchLeaf() { return true; }
@@ -1246,24 +1306,29 @@ let Box = class Box extends Group {
     __updateStrokeSpread() { return 0; }
     __updateRectRenderSpread() { return 0; }
     __updateRenderSpread() {
-        const width = this.__updateRectRenderSpread();
-        const hide = this.__.__drawAfterFill = this.__.overflow === 'hide';
-        return (width || hide) ? width : -1;
+        return this.__updateRectRenderSpread() || -1;
     }
     __updateRectBoxBounds() { }
     __updateBoxBounds() {
         const data = this.__;
-        if (data.__autoSide && this.children.length) {
-            if (this.leafer)
-                this.leafer.layouter.addExtra(this);
-            super.__updateBoxBounds();
-            if (!data.__autoSize) {
-                const b = this.__layout.boxBounds;
-                if (!data.__autoWidth)
-                    b.x = 0, b.width = data.width;
-                if (!data.__autoHeight)
-                    b.y = 0, b.height = data.height;
+        if (this.children.length) {
+            if (data.__autoSide) {
+                if (this.leafer && this.leafer.ready)
+                    this.leafer.layouter.addExtra(this);
+                super.__updateBoxBounds();
+                if (!data.__autoSize) {
+                    const b = this.__layout.boxBounds;
+                    if (!data.__autoWidth)
+                        b.x = 0, b.width = data.width;
+                    if (!data.__autoHeight)
+                        b.y = 0, b.height = data.height;
+                }
             }
+            else {
+                this.__updateRectBoxBounds();
+            }
+            if (data.flow)
+                this.__updateContentBounds();
         }
         else {
             this.__updateRectBoxBounds();
@@ -1271,13 +1336,20 @@ let Box = class Box extends Group {
     }
     __updateStrokeBounds() { }
     __updateRenderBounds() {
-        this.__updateRectRenderBounds();
-        if (!this.__.__drawAfterFill) {
-            const { renderBounds } = this.__layout;
-            copy(bounds, renderBounds);
+        let isOverflow;
+        const { renderBounds } = this.__layout;
+        if (this.children.length) {
             super.__updateRenderBounds();
-            add(renderBounds, bounds);
+            copy(childrenRenderBounds, renderBounds);
+            this.__updateRectRenderBounds();
+            isOverflow = !includes$1(renderBounds, childrenRenderBounds) || undefined;
+        }
+        else {
+            this.__updateRectRenderBounds();
         }
+        this.isOverflow !== isOverflow && (this.isOverflow = isOverflow);
+        if (isOverflow && !(this.__.__drawAfterFill = this.__.overflow === 'hide'))
+            add(renderBounds, childrenRenderBounds);
     }
     __updateRectRenderBounds() { }
     __updateRectChange() { }
@@ -1293,16 +1365,27 @@ let Box = class Box extends Group {
         }
         else {
             this.__renderRect(canvas, options);
-            this.__renderGroup(canvas, options);
+            if (this.children.length)
+                this.__renderGroup(canvas, options);
         }
     }
     __drawAfterFill(canvas, options) {
-        canvas.save();
-        canvas.clip();
-        this.__renderGroup(canvas, options);
-        canvas.restore();
-        if (this.__.stroke)
+        const { length } = this.children;
+        if (this.isOverflow) {
+            canvas.save();
+            canvas.clip();
+            if (length)
+                this.__renderGroup(canvas, options);
+            canvas.restore();
+        }
+        else {
+            if (length)
+                this.__renderGroup(canvas, options);
+        }
+        if (this.__.stroke && length) {
+            canvas.setWorld(this.__nowWorld);
             this.__drawRenderPath(canvas);
+        }
     }
 };
 __decorate([
@@ -1440,9 +1523,10 @@ let Line = class Line extends UI {
         super(data);
     }
     __updatePath() {
-        const path = this.__.path = [];
-        if (this.__.points) {
-            drawPoints$1(path, this.__.points, this.__.closed);
+        const data = this.__;
+        const path = data.path = [];
+        if (data.points) {
+            drawPoints$1(path, data.points, false, data.closed);
         }
         else {
             moveTo$2(path, 0, 0);
@@ -1677,7 +1761,7 @@ Canvas = __decorate([
     registerUI()
 ], Canvas);
 
-const { copyAndSpread, includes, spread, setList } = BoundsHelper;
+const { copyAndSpread, includes, isSame, spread, setList } = BoundsHelper;
 let Text = class Text extends UI {
     get __tag() { return 'Text'; }
     get editInner() { return 'TextEditor'; }
@@ -1750,7 +1834,7 @@ let Text = class Text extends UI {
         if (italic)
             b.width += fontSize * 0.16;
         const contentBounds = includes(b, bounds) ? b : bounds;
-        if (contentBounds !== layout.contentBounds) {
+        if (!isSame(contentBounds, layout.contentBounds)) {
             layout.contentBounds = contentBounds;
             layout.renderChanged = true;
             setList(data.__textBoxBounds = {}, [b, bounds]);
@@ -1778,9 +1862,6 @@ __decorate([
 __decorate([
     boundsType(0)
 ], Text.prototype, "height", void 0);
-__decorate([
-    boundsType(0)
-], Text.prototype, "padding", void 0);
 __decorate([
     surfaceType('#000000')
 ], Text.prototype, "fill", void 0);
@@ -1815,7 +1896,7 @@ __decorate([
     boundsType(0)
 ], Text.prototype, "letterSpacing", void 0);
 __decorate([
-    boundsType({ type: 'percent', value: 150 })
+    boundsType({ type: 'percent', value: 1.5 })
 ], Text.prototype, "lineHeight", void 0);
 __decorate([
     boundsType(0)
@@ -1909,6 +1990,4 @@ function penPathType() {
     };
 }
 
-const version = "1.0.0-rc.21";
-
-export { Box, BoxData, Canvas, CanvasData, ColorConvert, Effect, Ellipse, EllipseData, Export, Frame, FrameData, Group, GroupData, Image, ImageData, Leafer, LeaferData, Line, LineData, Paint, PaintGradient, PaintImage, Path, PathArrow, PathData, Pen, PenData, Polygon, PolygonData, Rect, RectData, RectRender, Star, StarData, State, Text, TextConvert, TextData, UI, UIBounds, UIData, UIRender, UnitConvert, arrowType, effectType, resizeType, stateType, version, zoomLayerType };
+export { Box, BoxData, Canvas, CanvasData, ColorConvert, Effect, Ellipse, EllipseData, Export, Frame, FrameData, Group, GroupData, Image, ImageData, Leafer, LeaferData, Line, LineData, Paint, PaintGradient, PaintImage, Path, PathArrow, PathData, Pen, PenData, Polygon, PolygonData, Rect, RectData, RectRender, Star, StarData, State, Text, TextConvert, TextData, UI, UIBounds, UIData, UIRender, UnitConvert, arrowType, effectType, resizeType, stateType, zoomLayerType };