@leafer-ui/draw 1.6.7 → 1.8.0

package/lib/draw.cjs

@@ -64,6 +64,11 @@ function zoomLayerType() {
         });
     };
 }
+function createAttr(defaultValue) {
+    return (target, key) => {
+        core.defineKey(target, key, core.createDescriptor(key, defaultValue));
+    };
+}
 
 function hasTransparent$1(color) {
     if (!color || color.length === 7 || color.length === 4)
@@ -121,26 +126,9 @@ 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) {
-            const ui = this.__leaf;
-            let { scaleX } = ui.__nowWorld || ui.__world;
-            if (scaleX < 0)
-                scaleX = -scaleX;
-            return scaleX > 1 ? strokeWidth / scaleX : strokeWidth;
-        }
-        else
-            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)
-            return true;
-        return t.fill && this.__hasStroke;
-    }
+    get __strokeWidth() { return this.__getRealStrokeWidth(); }
+    get __maxStrokeWidth() { const t = this; return t.__hasMultiStrokeStyle ? Math.max(t.__hasMultiStrokeStyle, t.strokeWidth) : t.strokeWidth; }
+    get __hasMultiPaint() { const t = this; return (t.fill && this.__useStroke) || (t.__isFills && t.fill.length > 1) || (t.__isStrokes && t.stroke.length > 1) || t.__useEffect; }
     get __clipAfterFill() { const t = this; return (t.cornerRadius || t.innerShadow || t.__pathInputed); }
     get __hasSurface() { const t = this; return (t.fill || t.stroke); }
     get __autoWidth() { return !this._width; }
@@ -222,6 +210,21 @@ class UIData extends core.LeafData {
             Paint.compute('stroke', this.__leaf);
         this.__needComputePaint = undefined;
     }
+    __getRealStrokeWidth(childStyle) {
+        let { strokeWidth, strokeWidthFixed } = this;
+        if (childStyle) {
+            if (childStyle.strokeWidth)
+                strokeWidth = childStyle.strokeWidth;
+            if (childStyle.strokeWidthFixed !== undefined)
+                strokeWidthFixed = childStyle.strokeWidthFixed;
+        }
+        if (strokeWidthFixed) {
+            const scale = this.__leaf.getClampRenderScale();
+            return scale > 1 ? strokeWidth / scale : strokeWidth;
+        }
+        else
+            return strokeWidth;
+    }
     __setPaint(attrName, value) {
         this.__setInput(attrName, value);
         const layout = this.__leaf.__layout;
@@ -246,6 +249,7 @@ class UIData extends core.LeafData {
         }
         else {
             stintSet$1(this, '__isAlphaPixelStroke', undefined);
+            stintSet$1(this, '__hasMultiStrokeStyle', undefined);
             this._stroke = this.__isStrokes = undefined;
         }
     }
@@ -267,8 +271,8 @@ class GroupData extends UIData {
 
 class BoxData extends GroupData {
     get __boxStroke() { return !this.__pathInputed; }
-    get __drawAfterFill() { const t = this; return (t.overflow === 'hide' && (t.__clipAfterFill || t.innerShadow) && t.__leaf.children.length); }
-    get __clipAfterFill() { return this.__leaf.isOverflow || super.__clipAfterFill; }
+    get __drawAfterFill() { const t = this; return t.__single || t.__clipAfterFill; }
+    get __clipAfterFill() { const t = this; return t.overflow === 'hide' && t.__leaf.children.length && (t.__leaf.isOverflow || super.__clipAfterFill); }
 }
 
 class LeaferData extends GroupData {
@@ -388,7 +392,7 @@ class CanvasData extends RectData {
 const UIBounds = {
     __updateStrokeSpread() {
         let width = 0, boxWidth = 0;
-        const data = this.__, { strokeAlign, strokeWidth } = data, box = this.__box;
+        const data = this.__, { strokeAlign, __maxStrokeWidth: strokeWidth } = data, box = this.__box;
         if ((data.stroke || data.hitStroke === 'all') && strokeWidth && strokeAlign !== 'inside') {
             boxWidth = width = strokeAlign === 'center' ? strokeWidth / 2 : strokeWidth;
             if (!data.__boxStroke) {
@@ -408,13 +412,15 @@ const UIBounds = {
     },
     __updateRenderSpread() {
         let width = 0;
-        const { shadow, innerShadow, blur, backgroundBlur, filter } = this.__;
+        const { shadow, innerShadow, blur, backgroundBlur, filter, renderSpread } = this.__;
         if (shadow)
             shadow.forEach(item => width = Math.max(width, Math.max(Math.abs(item.y), Math.abs(item.x)) + (item.spread > 0 ? item.spread : 0) + item.blur * 1.5));
         if (blur)
             width = Math.max(width, blur);
         if (filter)
             width += Filter.getSpread(filter);
+        if (renderSpread)
+            width += renderSpread;
         let shapeWidth = width = Math.ceil(width);
         if (innerShadow)
             innerShadow.forEach(item => shapeWidth = Math.max(shapeWidth, Math.max(Math.abs(item.y), Math.abs(item.x)) + (item.spread < 0 ? -item.spread : 0) + item.blur * 1.5));
@@ -430,15 +436,18 @@ const { stintSet } = core.DataHelper;
 const UIRender = {
     __updateChange() {
         const data = this.__;
+        if (data.__useStroke) {
+            const useStroke = data.__useStroke = !!(data.stroke && data.strokeWidth);
+            stintSet(this.__world, 'half', useStroke && data.strokeAlign === 'center' && data.strokeWidth % 2);
+            stintSet(data, '__fillAfterStroke', useStroke && data.strokeAlign === 'outside' && data.fill && !data.__isTransparentFill);
+        }
         if (data.__useEffect) {
             const { shadow, fill, stroke } = data, otherEffect = data.innerShadow || data.blur || data.backgroundBlur || data.filter;
-            stintSet(data, '__isFastShadow', shadow && !otherEffect && shadow.length < 2 && !shadow[0].spread && !(shadow[0].box && data.__isTransparentFill) && fill && !(fill instanceof Array && fill.length > 1) && (this.useFastShadow || !stroke || (stroke && data.strokeAlign === 'inside')));
+            stintSet(data, '__isFastShadow', shadow && !otherEffect && shadow.length < 2 && !shadow[0].spread && fill && !data.__isTransparentFill && !(fill instanceof Array && fill.length > 1) && (this.useFastShadow || !stroke || (stroke && data.strokeAlign === 'inside')));
             data.__useEffect = !!(shadow || otherEffect);
         }
-        stintSet(this.__world, 'half', data.__hasHalf);
-        stintSet(data, '__fillAfterStroke', data.stroke && data.strokeAlign === 'outside' && data.fill && !data.__isTransparentFill);
         data.__checkSingle();
-        stintSet(data, '__complex', data.__isFills || data.__isStrokes || data.cornerRadius || data.__useEffect);
+        stintSet(data, '__complex', (data.__isFills || data.__isStrokes || data.cornerRadius || data.__useEffect));
     },
     __drawFast(canvas, options) {
         drawFast(this, canvas, options);
@@ -496,18 +505,15 @@ const UIRender = {
                 this.__drawFast(canvas, options);
         }
     },
-    __renderShape(canvas, options, ignoreFill, ignoreStroke) {
-        if (this.__worldOpacity) {
-            canvas.setWorld(this.__nowWorld = this.__getNowWorld(options));
-            const { fill, stroke } = this.__;
-            this.__drawRenderPath(canvas);
-            if (fill && !ignoreFill)
-                this.__.__isAlphaPixelFill ? Paint.fills(fill, this, canvas) : Paint.fill('#000000', this, canvas);
-            if (this.__.__isCanvas)
-                this.__drawAfterFill(canvas, options);
-            if (stroke && !ignoreStroke)
-                this.__.__isAlphaPixelStroke ? Paint.strokes(stroke, this, canvas) : Paint.stroke('#000000', this, canvas);
-        }
+    __drawShape(canvas, options) {
+        this.__drawRenderPath(canvas);
+        const data = this.__, { fill, stroke } = data;
+        if (fill && !options.ignoreFill)
+            data.__isAlphaPixelFill ? Paint.fills(fill, this, canvas) : Paint.fill('#000000', this, canvas);
+        if (data.__isCanvas)
+            this.__drawAfterFill(canvas, options);
+        if (stroke && !options.ignoreStroke)
+            data.__isAlphaPixelStroke ? Paint.strokes(stroke, this, canvas) : Paint.stroke('#000000', this, canvas);
     },
     __drawAfterFill(canvas, options) {
         if (this.__.__clipAfterFill) {
@@ -544,17 +550,17 @@ const RectRender = {
         if (__drawAfterFill)
             this.__drawAfterFill(canvas, options);
         if (stroke) {
-            const { strokeAlign, __strokeWidth } = this.__;
-            if (!__strokeWidth)
+            const { strokeAlign, __strokeWidth: strokeWidth } = this.__;
+            if (!strokeWidth)
                 return;
-            canvas.setStroke(stroke, __strokeWidth, this.__);
-            const half = __strokeWidth / 2;
+            canvas.setStroke(stroke, strokeWidth, this.__);
+            const half = strokeWidth / 2;
             switch (strokeAlign) {
                 case 'center':
                     canvas.strokeRect(0, 0, width, height);
                     break;
                 case 'inside':
-                    width -= __strokeWidth, height -= __strokeWidth;
+                    width -= strokeWidth, height -= strokeWidth;
                     if (width < 0 || height < 0) {
                         canvas.save();
                         this.__clip(canvas, options);
@@ -565,7 +571,7 @@ const RectRender = {
                         canvas.strokeRect(x + half, y + half, width, height);
                     break;
                 case 'outside':
-                    canvas.strokeRect(x - half, y - half, width + __strokeWidth, height + __strokeWidth);
+                    canvas.strokeRect(x - half, y - half, width + strokeWidth, height + strokeWidth);
                     break;
             }
         }
@@ -578,6 +584,8 @@ exports.UI = UI_1 = class UI extends core.Leaf {
     get isFrame() { return false; }
     set scale(value) { core.MathHelper.assignScale(this, value); }
     get scale() { return this.__.scale; }
+    get isAutoWidth() { const t = this.__; return t.__autoWidth || t.autoWidth; }
+    get isAutoHeight() { const t = this.__; return t.__autoHeight || t.autoHeight; }
     get pen() {
         const { path } = this.__;
         core.pen.set(this.path = path || []);
@@ -632,12 +640,14 @@ exports.UI = UI_1 = class UI extends core.Leaf {
         }
     }
     __updateRenderPath() {
-        if (this.__.path) {
-            const data = this.__;
+        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);
         }
+        else
+            data.__pathForRender && (data.__pathForRender = undefined);
     }
     __drawRenderPath(canvas) {
         canvas.beginPath();
@@ -790,6 +800,9 @@ __decorate([
 __decorate([
     core.naturalBoundsType(1)
 ], exports.UI.prototype, "pixelRatio", void 0);
+__decorate([
+    core.affectRenderBoundsType(0)
+], exports.UI.prototype, "renderSpread", void 0);
 __decorate([
     core.pathInputType()
 ], exports.UI.prototype, "path", void 0);
@@ -848,13 +861,13 @@ __decorate([
     core.surfaceType()
 ], exports.UI.prototype, "fill", void 0);
 __decorate([
-    core.strokeType()
+    core.strokeType(undefined, true)
 ], exports.UI.prototype, "stroke", void 0);
 __decorate([
     core.strokeType('inside')
 ], exports.UI.prototype, "strokeAlign", void 0);
 __decorate([
-    core.strokeType(1)
+    core.strokeType(1, true)
 ], exports.UI.prototype, "strokeWidth", void 0);
 __decorate([
     core.strokeType(false)
@@ -946,7 +959,8 @@ exports.Group = class Group extends exports.UI {
     }
     toJSON(options) {
         const data = super.toJSON(options);
-        data.children = this.children.map(child => child.toJSON(options));
+        if (!this.childlessJSON)
+            data.children = this.children.map(child => child.toJSON(options));
         return data;
     }
     pick(_hitPoint, _options) { return undefined; }
@@ -1281,7 +1295,7 @@ exports.Leafer = Leafer_1 = class Leafer extends exports.Group {
             list.push(item);
         this.requestRender();
     }
-    zoom(_zoomType, _padding, _fixedScale, _transition) {
+    zoom(_zoomType, _optionsOrPadding, _scroll, _transition) {
         return core.Plugin.need('view');
     }
     getValidMove(moveX, moveY) { return { x: moveX, y: moveY }; }
@@ -1326,7 +1340,7 @@ exports.Leafer = Leafer_1 = class Leafer extends exports.Group {
                 Leafer_1.list.remove(this);
                 try {
                     this.stop();
-                    this.emitEvent(new core.LeaferEvent(core.LeaferEvent.END, this));
+                    this.emitLeafer(core.LeaferEvent.END);
                     this.__removeListenEvents();
                     this.__controllers.forEach(item => !(this.parent && item === this.interaction) && item.destroy());
                     this.__controllers.length = 0;
@@ -1393,8 +1407,8 @@ exports.Box = class Box extends exports.Group {
     __updateRenderSpread() { return this.__updateRectRenderSpread() || -1; }
     __updateRectBoxBounds() { }
     __updateBoxBounds(_secondLayout) {
-        const data = this.__;
         if (this.children.length && !this.pathInputed) {
+            const data = this.__;
             if (data.__autoSide) {
                 if (data.__hasSurface)
                     this.__extraUpdate();
@@ -1421,20 +1435,26 @@ exports.Box = class Box extends exports.Group {
     __updateStrokeBounds() { }
     __updateRenderBounds() {
         let isOverflow;
-        const { renderBounds } = this.__layout;
         if (this.children.length) {
+            const data = this.__, { renderBounds, boxBounds } = this.__layout;
             super.__updateRenderBounds();
             copy(childrenRenderBounds, renderBounds);
             this.__updateRectRenderBounds();
-            isOverflow = !includes$1(renderBounds, childrenRenderBounds);
-            if (isOverflow && this.__.overflow !== 'hide')
+            if (data.scrollY || data.scrollX) {
+                childrenRenderBounds.x += data.scrollX;
+                childrenRenderBounds.y += data.scrollY;
+            }
+            isOverflow = !includes$1(boxBounds, childrenRenderBounds);
+            if (isOverflow && data.overflow !== 'hide')
                 add(renderBounds, childrenRenderBounds);
         }
         else
             this.__updateRectRenderBounds();
         core.DataHelper.stintSet(this, 'isOverflow', isOverflow);
+        this.__updateScrollBar();
     }
     __updateRectRenderBounds() { }
+    __updateScrollBar() { }
     __updateRectChange() { }
     __updateChange() {
         super.__updateChange();
@@ -1451,10 +1471,12 @@ exports.Box = class Box extends exports.Group {
             if (this.children.length)
                 this.__renderGroup(canvas, options);
         }
+        if (this.scrollBar)
+            this.scrollBar.__render(canvas, options);
     }
     __drawContent(canvas, options) {
         this.__renderGroup(canvas, options);
-        if (this.__.__hasStroke) {
+        if (this.__.__useStroke || this.__.__useEffect) {
             canvas.setWorld(this.__nowWorld);
             this.__drawRenderPath(canvas);
         }
@@ -1674,8 +1696,8 @@ exports.Polygon = class Polygon extends exports.UI {
             for (let i = 1; i < sides; i++) {
                 lineTo$1(path, rx + rx * sin$1((i * 2 * PI$1) / sides), ry - ry * cos$1((i * 2 * PI$1) / sides));
             }
+            closePath$1(path);
         }
-        closePath$1(path);
     }
     __updateRenderPath() { }
     __updateBoxBounds() { }
@@ -1913,6 +1935,11 @@ exports.Text = class Text extends exports.UI {
             return;
         super.__draw(canvas, options, originCanvas);
     }
+    __drawShape(canvas, options) {
+        if (options.shape)
+            this.__box && this.__box.__drawShape(canvas, options);
+        super.__drawShape(canvas, options);
+    }
     destroy() {
         if (this.boxStyle)
             this.boxStyle = null;
@@ -2101,6 +2128,7 @@ exports.UIBounds = UIBounds;
 exports.UIData = UIData;
 exports.UIRender = UIRender;
 exports.UnitConvert = UnitConvert;
+exports.createAttr = createAttr;
 exports.effectType = effectType;
 exports.resizeType = resizeType;
 exports.zoomLayerType = zoomLayerType;