@leafer-ui/draw 1.5.2 → 1.6.0

package/lib/draw.esm.js

@@ -1,4 +1,4 @@
-import { defineKey, decorateLeafAttr, attr, Plugin, PathConvert, Debug, LeafData, canvasSizeAttrs, dataProcessor, dataType, surfaceType, opacityType, visibleType, sortType, maskType, eraserType, positionType, boundsType, scaleType, rotationType, autoLayoutType, naturalBoundsType, pathInputType, pathType, hitType, strokeType, cursorType, rewrite, Leaf, useModule, rewriteAble, MathHelper, pen, PathCorner, PathDrawer, DataHelper, UICreator, registerUI, Branch, LeafList, Resource, getBoundsData, Creator, CanvasManager, WaitHelper, LeaferEvent, Bounds, ResizeEvent, AutoBounds, Run, LayoutEvent, RenderEvent, WatchEvent, ImageManager, BoundsHelper, affectRenderBoundsType, PathCommandDataHelper, Platform, PointHelper, PathBounds, affectStrokeBoundsType, getPointData, ImageEvent, LeaferImage, Matrix, PathCreator } from '@leafer/core';
+import { defineKey, decorateLeafAttr, attr, Plugin, PathConvert, Debug, LeafData, canvasSizeAttrs, UICreator, dataProcessor, dataType, surfaceType, opacityType, visibleType, sortType, maskType, eraserType, positionType, boundsType, scaleType, rotationType, autoLayoutType, naturalBoundsType, pathInputType, pathType, hitType, strokeType, cursorType, rewrite, Leaf, useModule, rewriteAble, MathHelper, pen, PathCorner, PathDrawer, DataHelper, registerUI, Branch, LeafList, Resource, getBoundsData, Creator, CanvasManager, WaitHelper, LeaferEvent, Bounds, ResizeEvent, AutoBounds, Run, LayoutEvent, RenderEvent, WatchEvent, ImageManager, BoundsHelper, affectRenderBoundsType, PathCommandDataHelper, Platform, PointHelper, PathBounds, affectStrokeBoundsType, getPointData, ImageEvent, LeaferImage, Matrix, PathCreator } from '@leafer/core';
 export * from '@leafer/core';
 
 /******************************************************************************
@@ -108,6 +108,7 @@ class UIData extends LeafData {
             return strokeWidth;
     }
     get __hasStroke() { return this.stroke && this.strokeWidth; }
+    get __hasHalf() { const t = this; return (t.stroke && t.strokeAlign === 'center' && t.strokeWidth % 2) || undefined; }
     get __hasMultiPaint() {
         const t = this;
         if ((t.__isFills && t.fill.length > 1) || (t.__isStrokes && t.stroke.length > 1) || t.__useEffect)
@@ -152,14 +153,14 @@ class UIData extends LeafData {
                 this.__removeInput('fill');
                 PaintImage.recycleImage('fill', this);
                 this.__isFills = false;
-                if (this.__pixelFill)
-                    this.__pixelFill = false;
+                this.__pixelFill && (this.__pixelFill = false);
             }
             this._fill = value;
         }
         else if (typeof value === 'object') {
             this.__setInput('fill', value);
-            this.__leaf.__layout.boxChanged || this.__leaf.__layout.boxChange();
+            const layout = this.__leaf.__layout;
+            layout.boxChanged || layout.boxChange();
             this.__isFills = true;
             this._fill || (this._fill = emptyPaint);
         }
@@ -170,14 +171,14 @@ class UIData extends LeafData {
                 this.__removeInput('stroke');
                 PaintImage.recycleImage('stroke', this);
                 this.__isStrokes = false;
-                if (this.__pixelStroke)
-                    this.__pixelStroke = false;
+                this.__pixelStroke && (this.__pixelStroke = false);
             }
             this._stroke = value;
         }
         else if (typeof value === 'object') {
             this.__setInput('stroke', value);
-            this.__leaf.__layout.boxChanged || this.__leaf.__layout.boxChange();
+            const layout = this.__leaf.__layout;
+            layout.boxChanged || layout.boxChange();
             this.__isStrokes = true;
             this._stroke || (this._stroke = emptyPaint);
         }
@@ -292,6 +293,31 @@ class TextData extends UIData {
             this._fontWeight = value;
         }
     }
+    setBoxStyle(value) {
+        let t = this.__leaf, box = t.__box;
+        if (value) {
+            const { boxStyle } = this;
+            if (box)
+                for (let key in boxStyle)
+                    box[key] = undefined;
+            else
+                box = t.__box = UICreator.get('Rect', 0);
+            const layout = t.__layout, boxLayout = box.__layout;
+            if (!boxStyle)
+                box.parent = t, box.__world = t.__world, boxLayout.boxBounds = layout.boxBounds;
+            box.set(value);
+            if (boxLayout.strokeChanged)
+                layout.strokeChange();
+            if (boxLayout.renderChanged)
+                layout.renderChange();
+            box.__updateChange();
+        }
+        else if (box) {
+            t.__box = box.parent = null;
+            box.destroy();
+        }
+        this._boxStyle = value;
+    }
 }
 
 class ImageData extends RectData {
@@ -329,7 +355,7 @@ class CanvasData extends RectData {
 const UIBounds = {
     __updateStrokeSpread() {
         let width = 0, boxWidth = 0;
-        const data = this.__, { strokeAlign, strokeWidth } = data;
+        const data = this.__, { strokeAlign, strokeWidth } = data, box = this.__box;
         if ((data.stroke || data.hitStroke === 'all') && strokeWidth && strokeAlign !== 'inside') {
             boxWidth = width = strokeAlign === 'center' ? strokeWidth / 2 : strokeWidth;
             if (!data.__boxStroke) {
@@ -340,6 +366,10 @@ const UIBounds = {
         }
         if (data.__useArrow)
             width += strokeWidth * 5;
+        if (box) {
+            width = Math.max(box.__layout.strokeSpread = box.__updateStrokeSpread(), width);
+            boxWidth = box.__layout.strokeBoxSpread;
+        }
         this.__layout.strokeBoxSpread = boxWidth;
         return width;
     },
@@ -358,25 +388,26 @@ const UIBounds = {
         if (backgroundBlur)
             shapeWidth = Math.max(shapeWidth, backgroundBlur);
         this.__layout.renderShapeSpread = shapeWidth;
-        return width + (this.__layout.strokeSpread || 0);
+        width += this.__layout.strokeSpread || 0;
+        return this.__box ? Math.max(this.__box.__updateRenderSpread(), width) : width;
     }
 };
 
 const UIRender = {
     __updateChange() {
-        const data = this.__;
+        const data = this.__, w = this.__world;
         if (data.__useEffect) {
             const { shadow, innerShadow, blur, backgroundBlur, filter } = this.__;
             data.__useEffect = !!(shadow || innerShadow || blur || backgroundBlur || filter);
         }
+        const half = data.__hasHalf;
+        w.half !== half && (w.half = half);
         data.__checkSingle();
         const complex = data.__isFills || data.__isStrokes || data.cornerRadius || data.__useEffect;
-        if (complex) {
+        if (complex)
             data.__complex = true;
-        }
-        else {
+        else
             data.__complex && (data.__complex = false);
-        }
     },
     __drawFast(canvas, options) {
         drawFast(this, canvas, options);
@@ -463,10 +494,11 @@ function drawFast(ui, canvas, options) {
 
 const RectRender = {
     __drawFast(canvas, options) {
-        let { width, height, fill, stroke, __drawAfterFill } = this.__;
+        let { x, y, width, height } = this.__layout.boxBounds;
+        const { fill, stroke, __drawAfterFill } = this.__;
         if (fill) {
             canvas.fillStyle = fill;
-            canvas.fillRect(0, 0, width, height);
+            canvas.fillRect(x, y, width, height);
         }
         if (__drawAfterFill)
             this.__drawAfterFill(canvas, options);
@@ -485,14 +517,14 @@ const RectRender = {
                     if (width < 0 || height < 0) {
                         canvas.save();
                         this.__clip(canvas, options);
-                        canvas.strokeRect(half, half, width, height);
+                        canvas.strokeRect(x + half, y + half, width, height);
                         canvas.restore();
                     }
                     else
-                        canvas.strokeRect(half, half, width, height);
+                        canvas.strokeRect(x + half, y + half, width, height);
                     break;
                 case 'outside':
-                    canvas.strokeRect(-half, -half, width + __strokeWidth, height + __strokeWidth);
+                    canvas.strokeRect(x - half, y - half, width + __strokeWidth, height + __strokeWidth);
                     break;
             }
         }
@@ -648,6 +680,12 @@ __decorate([
 __decorate([
     surfaceType(false)
 ], UI.prototype, "locked", void 0);
+__decorate([
+    surfaceType(false)
+], UI.prototype, "dim", void 0);
+__decorate([
+    surfaceType(false)
+], UI.prototype, "dimskip", void 0);
 __decorate([
     sortType(0)
 ], UI.prototype, "zIndex", void 0);
@@ -909,7 +947,7 @@ let Leafer = Leafer_1 = class Leafer extends Group {
             start: true,
             hittable: true,
             smooth: true,
-            lazySpeard: 100
+            lazySpeard: 100,
         };
         this.leafs = 0;
         this.__eventIds = [];
@@ -1333,13 +1371,13 @@ let Box = class Box extends Group {
             super.__updateRenderBounds();
             copy(childrenRenderBounds, renderBounds);
             this.__updateRectRenderBounds();
-            isOverflow = !includes$1(renderBounds, childrenRenderBounds);
+            isOverflow = !includes$1(renderBounds, childrenRenderBounds) || undefined;
             if (isOverflow && this.__.overflow !== 'hide')
                 add(renderBounds, childrenRenderBounds);
         }
         else
             this.__updateRectRenderBounds();
-        !this.isOverflow !== !isOverflow && (this.isOverflow = isOverflow);
+        this.isOverflow !== isOverflow && (this.isOverflow = isOverflow);
     }
     __updateRectRenderBounds() { }
     __updateRectChange() { }
@@ -1747,33 +1785,13 @@ Canvas = __decorate([
     registerUI()
 ], Canvas);
 
-const { copyAndSpread, includes, isSame, spread, setList } = BoundsHelper;
+const { copyAndSpread, includes, spread, setList } = BoundsHelper;
 let Text = class Text extends UI {
     get __tag() { return 'Text'; }
-    get textDrawData() {
-        this.__layout.update();
-        return this.__.__textDrawData;
-    }
+    get textDrawData() { this.updateLayout(); return this.__.__textDrawData; }
     constructor(data) {
         super(data);
     }
-    __drawHitPath(canvas) {
-        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 < fontSize ? fontSize : __lineHeight));
-        }
-    }
-    __drawPathByData(drawer, _data) {
-        const { x, y, width, height } = this.__layout.boxBounds;
-        drawer.rect(x, y, width, height);
-    }
-    __drawRenderPath(canvas) {
-        canvas.font = this.__.__font;
-    }
     __updateTextDrawData() {
         const data = this.__;
         const { lineHeight, letterSpacing, fontFamily, fontSize, fontWeight, italic, textCase, textOverflow, padding } = data;
@@ -1790,15 +1808,16 @@ let Text = class Text extends UI {
         const layout = this.__layout;
         const { fontSize, italic, padding, __autoWidth: autoWidth, __autoHeight: autoHeight } = data;
         this.__updateTextDrawData();
-        const { bounds } = data.__textDrawData;
+        const { bounds: contentBounds } = data.__textDrawData;
         const b = layout.boxBounds;
+        layout.contentBounds = contentBounds;
         if (data.__lineHeight < fontSize)
-            spread(bounds, fontSize / 2);
+            spread(contentBounds, fontSize / 2);
         if (autoWidth || autoHeight) {
-            b.x = autoWidth ? bounds.x : 0;
-            b.y = autoHeight ? bounds.y : 0;
-            b.width = autoWidth ? bounds.width : data.width;
-            b.height = autoHeight ? bounds.height : data.height;
+            b.x = autoWidth ? contentBounds.x : 0;
+            b.y = autoHeight ? contentBounds.y : 0;
+            b.width = autoWidth ? contentBounds.width : data.width;
+            b.height = autoHeight ? contentBounds.height : data.height;
             if (padding) {
                 const [top, right, bottom, left] = data.__padding;
                 if (autoWidth)
@@ -1812,23 +1831,45 @@ let Text = class Text extends UI {
             super.__updateBoxBounds();
         if (italic)
             b.width += fontSize * 0.16;
-        const contentBounds = includes(b, bounds) ? b : bounds;
-        if (!isSame(contentBounds, layout.contentBounds)) {
-            layout.contentBounds = contentBounds;
-            layout.renderChanged = true;
-            setList(data.__textBoxBounds = {}, [b, bounds]);
-        }
+        const isOverflow = !includes(b, contentBounds) || undefined;
+        if (isOverflow)
+            setList(data.__textBoxBounds = {}, [b, contentBounds]), layout.renderChanged = true;
         else
-            data.__textBoxBounds = contentBounds;
+            data.__textBoxBounds = b;
+        this.isOverflow !== isOverflow && (this.isOverflow = isOverflow);
+    }
+    __onUpdateSize() {
+        if (this.__box)
+            this.__box.__onUpdateSize();
+        super.__onUpdateSize();
     }
     __updateRenderSpread() {
         let width = super.__updateRenderSpread();
         if (!width)
-            width = this.__layout.boxBounds === this.__layout.contentBounds ? 0 : 1;
+            width = this.isOverflow ? 1 : 0;
         return width;
     }
     __updateRenderBounds() {
-        copyAndSpread(this.__layout.renderBounds, this.__.__textBoxBounds, this.__layout.renderSpread);
+        const { renderBounds, renderSpread } = this.__layout;
+        copyAndSpread(renderBounds, this.__.__textBoxBounds, renderSpread);
+        if (this.__box)
+            this.__box.__layout.renderBounds = renderBounds;
+    }
+    __drawRenderPath(canvas) {
+        canvas.font = this.__.__font;
+    }
+    __draw(canvas, options, originCanvas) {
+        const box = this.__box;
+        if (box)
+            box.__nowWorld = this.__nowWorld, box.__draw(canvas, options, originCanvas);
+        if (this.textEditing && !Export.running)
+            return;
+        super.__draw(canvas, options, originCanvas);
+    }
+    destroy() {
+        if (this.boxStyle)
+            this.boxStyle = null;
+        super.destroy();
     }
 };
 __decorate([
@@ -1840,6 +1881,9 @@ __decorate([
 __decorate([
     boundsType(0)
 ], Text.prototype, "height", void 0);
+__decorate([
+    surfaceType()
+], Text.prototype, "boxStyle", void 0);
 __decorate([
     dataType(false)
 ], Text.prototype, "resizeFontSize", void 0);