@leafer-ui/draw 1.6.1 → 1.6.3

package/lib/draw.cjs

@@ -65,8 +65,32 @@ function zoomLayerType() {
     };
 }
 
+function hasTransparent$1(color) {
+    if (!color || color.length === 7 || color.length === 4)
+        return false;
+    if (color === 'transparent')
+        return true;
+    const first = color[0];
+    if (first === '#') {
+        switch (color.length) {
+            case 5: return color[4] !== 'f' && color[4] !== 'F';
+            case 9: return (color[7] !== 'f' && color[7] !== 'F') || (color[8] !== 'f' && color[8] !== 'F');
+        }
+    }
+    else if (first === 'r' || first === 'h') {
+        if (color[3] === 'a') {
+            const i = color.lastIndexOf(',');
+            if (i > -1)
+                return parseFloat(color.slice(i + 1)) < 1;
+        }
+    }
+    return false;
+}
+
 const TextConvert = {};
-const ColorConvert = {};
+const ColorConvert = {
+    hasTransparent: hasTransparent$1
+};
 const UnitConvert = {
     number(value, percentRefer) {
         return typeof value === 'object' ? (value.type === 'percent' ? value.value * percentRefer : value.value) : value;
@@ -92,6 +116,7 @@ const Transition = {
 };
 
 const { parse, objectToCanvasData } = core.PathConvert;
+const { stintSet: stintSet$1 } = core.DataHelper, { hasTransparent } = ColorConvert;
 const emptyPaint = {};
 const debug$1 = core.Debug.get('UIData');
 class UIData extends core.LeafData {
@@ -150,38 +175,22 @@ class UIData extends core.LeafData {
         if (this.__naturalWidth)
             this.__removeNaturalSize();
         if (typeof value === 'string' || !value) {
-            if (this.__isFills) {
-                this.__removeInput('fill');
-                PaintImage.recycleImage('fill', this);
-                this.__isFills = false;
-                this.__pixelFill && (this.__pixelFill = false);
-            }
+            stintSet$1(this, '__isTransparentFill', hasTransparent(value));
+            this.__isFills && this.__removePaint('fill', true);
             this._fill = value;
         }
         else if (typeof value === 'object') {
-            this.__setInput('fill', value);
-            const layout = this.__leaf.__layout;
-            layout.boxChanged || layout.boxChange();
-            this.__isFills = true;
-            this._fill || (this._fill = emptyPaint);
+            this.__setPaint('fill', value);
         }
     }
     setStroke(value) {
         if (typeof value === 'string' || !value) {
-            if (this.__isStrokes) {
-                this.__removeInput('stroke');
-                PaintImage.recycleImage('stroke', this);
-                this.__isStrokes = false;
-                this.__pixelStroke && (this.__pixelStroke = false);
-            }
+            stintSet$1(this, '__isTransparentStroke', hasTransparent(value));
+            this.__isStrokes && this.__removePaint('stroke', true);
             this._stroke = value;
         }
         else if (typeof value === 'object') {
-            this.__setInput('stroke', value);
-            const layout = this.__leaf.__layout;
-            layout.boxChanged || layout.boxChange();
-            this.__isStrokes = true;
-            this._stroke || (this._stroke = emptyPaint);
+            this.__setPaint('stroke', value);
         }
     }
     setPath(value) {
@@ -211,7 +220,34 @@ class UIData extends core.LeafData {
             Paint.compute('fill', this.__leaf);
         if (stroke)
             Paint.compute('stroke', this.__leaf);
-        this.__needComputePaint = false;
+        this.__needComputePaint = undefined;
+    }
+    __setPaint(attrName, value) {
+        this.__setInput(attrName, value);
+        const layout = this.__leaf.__layout;
+        layout.boxChanged || layout.boxChange();
+        if (value instanceof Array && !value.length) {
+            this.__removePaint(attrName);
+        }
+        else {
+            if (attrName === 'fill')
+                this.__isFills = true, this._fill || (this._fill = emptyPaint);
+            else
+                this.__isStrokes = true, this._stroke || (this._stroke = emptyPaint);
+        }
+    }
+    __removePaint(attrName, removeInput) {
+        if (removeInput)
+            this.__removeInput(attrName);
+        PaintImage.recycleImage(attrName, this);
+        if (attrName === 'fill') {
+            stintSet$1(this, '__isAlphaPixelFill', undefined);
+            this._fill = this.__isFills = undefined;
+        }
+        else {
+            stintSet$1(this, '__isAlphaPixelStroke', undefined);
+            this._stroke = this.__isStrokes = undefined;
+        }
     }
 }
 function setArray(data, key, value) {
@@ -219,10 +255,10 @@ function setArray(data, key, value) {
     if (value instanceof Array) {
         if (value.some((item) => item.visible === false))
             value = value.filter((item) => item.visible !== false);
-        value.length || (value = null);
+        value.length || (value = undefined);
     }
     else
-        value = value && value.visible !== false ? [value] : null;
+        value = value && value.visible !== false ? [value] : undefined;
     data['_' + key] = value;
 }
 
@@ -286,13 +322,11 @@ class TextData extends UIData {
     setFontWeight(value) {
         if (typeof value === 'string') {
             this.__setInput('fontWeight', value);
-            this._fontWeight = fontWeightMap[value] || 400;
-        }
-        else {
-            if (this.__input)
-                this.__removeInput('fontWeight');
-            this._fontWeight = value;
+            value = fontWeightMap[value] || 400;
         }
+        else if (this.__input)
+            this.__removeInput('fontWeight');
+        this._fontWeight = value;
     }
     setBoxStyle(value) {
         let t = this.__leaf, box = t.__box;
@@ -327,8 +361,6 @@ class ImageData extends RectData {
         this._url = value;
     }
     __setImageFill(value) {
-        if (this.__leaf.image)
-            this.__leaf.image = null;
         this.fill = value ? { type: 'image', mode: 'stretch', url: value } : undefined;
     }
     __getData() {
@@ -394,21 +426,19 @@ const UIBounds = {
     }
 };
 
+const { stintSet } = core.DataHelper;
 const UIRender = {
     __updateChange() {
-        const data = this.__, w = this.__world;
+        const data = this.__;
         if (data.__useEffect) {
-            const { shadow, innerShadow, blur, backgroundBlur, filter } = this.__;
-            data.__useEffect = !!(shadow || innerShadow || blur || backgroundBlur || filter);
+            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')));
+            data.__useEffect = !!(shadow || otherEffect);
         }
-        const half = data.__hasHalf;
-        w.half !== half && (w.half = half);
+        stintSet(this.__world, 'half', data.__hasHalf);
+        stintSet(data, '__fillAfterStroke', data.stroke && data.strokeAlign === 'outside' && data.fill && !data.__isTransparentFill);
         data.__checkSingle();
-        const complex = data.__isFills || data.__isStrokes || data.cornerRadius || data.__useEffect;
-        if (complex)
-            data.__complex = true;
-        else
-            data.__complex && (data.__complex = false);
+        stintSet(data, '__complex', data.__isFills || data.__isStrokes || data.cornerRadius || data.__useEffect);
     },
     __drawFast(canvas, options) {
         drawFast(this, canvas, options);
@@ -418,21 +448,23 @@ const UIRender = {
         if (data.__complex) {
             if (data.__needComputePaint)
                 data.__computePaint();
-            const { fill, stroke, __drawAfterFill } = data;
+            const { fill, stroke, __drawAfterFill, __fillAfterStroke, __isFastShadow } = data;
             this.__drawRenderPath(canvas);
-            if (data.__useEffect) {
+            if (data.__useEffect && !__isFastShadow) {
                 const shape = Paint.shape(this, canvas, options);
                 this.__nowWorld = this.__getNowWorld(options);
                 const { shadow, innerShadow, filter } = data;
                 if (shadow)
                     Effect.shadow(this, canvas, shape);
+                if (__fillAfterStroke)
+                    data.__isStrokes ? Paint.strokes(stroke, this, canvas) : Paint.stroke(stroke, this, canvas);
                 if (fill)
                     data.__isFills ? Paint.fills(fill, this, canvas) : Paint.fill(fill, this, canvas);
                 if (__drawAfterFill)
                     this.__drawAfterFill(canvas, options);
                 if (innerShadow)
                     Effect.innerShadow(this, canvas, shape);
-                if (stroke)
+                if (stroke && !__fillAfterStroke)
                     data.__isStrokes ? Paint.strokes(stroke, this, canvas) : Paint.stroke(stroke, this, canvas);
                 if (filter)
                     Filter.apply(filter, this, this.__nowWorld, canvas, originCanvas, shape);
@@ -441,21 +473,27 @@ const UIRender = {
                 shape.canvas.recycle();
             }
             else {
+                if (__fillAfterStroke)
+                    data.__isStrokes ? Paint.strokes(stroke, this, canvas) : Paint.stroke(stroke, this, canvas);
+                if (__isFastShadow) {
+                    const shadow = data.shadow[0], { scaleX, scaleY } = this.__nowWorld;
+                    canvas.save(), canvas.setWorldShadow(shadow.x * scaleX, shadow.y * scaleY, shadow.blur * scaleX, ColorConvert.string(shadow.color));
+                }
                 if (fill)
                     data.__isFills ? Paint.fills(fill, this, canvas) : Paint.fill(fill, this, canvas);
+                if (__isFastShadow)
+                    canvas.restore();
                 if (__drawAfterFill)
                     this.__drawAfterFill(canvas, options);
-                if (stroke)
+                if (stroke && !__fillAfterStroke)
                     data.__isStrokes ? Paint.strokes(stroke, this, canvas) : Paint.stroke(stroke, this, canvas);
             }
         }
         else {
-            if (data.__pathInputed) {
+            if (data.__pathInputed)
                 drawFast(this, canvas, options);
-            }
-            else {
+            else
                 this.__drawFast(canvas, options);
-            }
         }
     },
     __renderShape(canvas, options, ignoreFill, ignoreStroke) {
@@ -464,11 +502,11 @@ const UIRender = {
             const { fill, stroke } = this.__;
             this.__drawRenderPath(canvas);
             if (fill && !ignoreFill)
-                this.__.__pixelFill ? Paint.fills(fill, this, canvas) : Paint.fill('#000000', this, canvas);
+                this.__.__isAlphaPixelFill ? Paint.fills(fill, this, canvas) : Paint.fill('#000000', this, canvas);
             if (this.__.__isCanvas)
                 this.__drawAfterFill(canvas, options);
             if (stroke && !ignoreStroke)
-                this.__.__pixelStroke ? Paint.strokes(stroke, this, canvas) : Paint.stroke('#000000', this, canvas);
+                this.__.__isAlphaPixelStroke ? Paint.strokes(stroke, this, canvas) : Paint.stroke('#000000', this, canvas);
         }
     },
     __drawAfterFill(canvas, options) {
@@ -483,13 +521,15 @@ const UIRender = {
     }
 };
 function drawFast(ui, canvas, options) {
-    const { fill, stroke, __drawAfterFill } = ui.__;
+    const { fill, stroke, __drawAfterFill, __fillAfterStroke } = ui.__;
     ui.__drawRenderPath(canvas);
+    if (__fillAfterStroke)
+        Paint.stroke(stroke, ui, canvas);
     if (fill)
         Paint.fill(fill, ui, canvas);
     if (__drawAfterFill)
         ui.__drawAfterFill(canvas, options);
-    if (stroke)
+    if (stroke && !__fillAfterStroke)
         Paint.stroke(stroke, ui, canvas);
 }
 
@@ -619,6 +659,9 @@ exports.UI = UI_1 = class UI extends core.Leaf {
         else
             drawer.rect(x, y, width, height);
     }
+    drawImagePlaceholder(canvas, _image) {
+        Paint.fill(this.__.placeholderColor, this, canvas);
+    }
     animate(_keyframe, _options, _type, _isTemp) {
         return core.Plugin.need('animate');
     }
@@ -855,6 +898,12 @@ __decorate([
 __decorate([
     effectType()
 ], exports.UI.prototype, "filter", void 0);
+__decorate([
+    core.surfaceType()
+], exports.UI.prototype, "placeholderColor", void 0);
+__decorate([
+    core.dataType(100)
+], exports.UI.prototype, "placeholderDelay", void 0);
 __decorate([
     core.dataType({})
 ], exports.UI.prototype, "data", void 0);
@@ -1256,15 +1305,20 @@ exports.Leafer = Leafer_1 = class Leafer extends exports.Group {
     }
     __listenEvents() {
         const runId = core.Run.start('FirstCreate ' + this.innerName);
-        this.once(core.LeaferEvent.START, () => core.Run.end(runId));
-        this.once(core.LayoutEvent.START, () => this.updateLazyBounds());
-        this.once(core.RenderEvent.START, () => this.__onCreated());
-        this.once(core.RenderEvent.END, () => this.__onViewReady());
-        this.__eventIds.push(this.on_(core.WatchEvent.DATA, this.__onWatchData, this), this.on_(core.LayoutEvent.END, this.__onLayoutEnd, this), this.on_(core.RenderEvent.NEXT, this.__onNextRender, this));
+        this.once([
+            [core.LeaferEvent.START, () => core.Run.end(runId)],
+            [core.LayoutEvent.START, this.updateLazyBounds, this],
+            [core.RenderEvent.START, this.__onCreated, this],
+            [core.RenderEvent.END, this.__onViewReady, this]
+        ]);
+        this.__eventIds.push(this.on_([
+            [core.WatchEvent.DATA, this.__onWatchData, this],
+            [core.LayoutEvent.END, this.__onLayoutEnd, this],
+            [core.RenderEvent.NEXT, this.__onNextRender, this]
+        ]));
     }
     __removeListenEvents() {
         this.off_(this.__eventIds);
-        this.__eventIds.length = 0;
     }
     destroy(sync) {
         const doDestory = () => {
@@ -1372,13 +1426,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);
             if (isOverflow && this.__.overflow !== 'hide')
                 add(renderBounds, childrenRenderBounds);
         }
         else
             this.__updateRectRenderBounds();
-        this.isOverflow !== isOverflow && (this.isOverflow = isOverflow);
+        core.DataHelper.stintSet(this, 'isOverflow', isOverflow);
     }
     __updateRectRenderBounds() { }
     __updateRectChange() { }
@@ -1682,17 +1736,10 @@ exports.Star = __decorate([
 
 exports.Image = class Image extends exports.Rect {
     get __tag() { return 'Image'; }
-    get ready() { return this.image ? this.image.ready : false; }
+    get ready() { const { image } = this; return image && image.ready; }
+    get image() { const { fill } = this.__; return fill instanceof Array && fill[0].image; }
     constructor(data) {
         super(data);
-        this.on(core.ImageEvent.LOADED, (e) => {
-            if (e.attrName === 'fill' && e.attrValue.url === this.url)
-                this.image = e.image;
-        });
-    }
-    destroy() {
-        this.image = null;
-        super.destroy();
     }
 };
 __decorate([
@@ -1708,11 +1755,11 @@ const MyImage = exports.Image;
 
 exports.Canvas = class Canvas extends exports.Rect {
     get __tag() { return 'Canvas'; }
+    get context() { return this.canvas.context; }
     get ready() { return !this.url; }
     constructor(data) {
         super(data);
         this.canvas = core.Creator.canvas(this.__);
-        this.context = this.canvas.context;
         if (data && data.url)
             this.drawImage(data.url);
     }
@@ -1756,7 +1803,7 @@ exports.Canvas = class Canvas extends exports.Rect {
     destroy() {
         if (this.canvas) {
             this.canvas.destroy();
-            this.canvas = this.context = null;
+            this.canvas = null;
         }
         super.destroy();
     }
@@ -1802,7 +1849,7 @@ exports.Text = class Text extends exports.UI {
         data.__baseLine = data.__lineHeight - (data.__lineHeight - fontSize * 0.7) / 2;
         data.__font = `${italic ? 'italic ' : ''}${textCase === 'small-caps' ? 'small-caps ' : ''}${fontWeight !== 'normal' ? fontWeight + ' ' : ''}${fontSize}px ${fontFamily}`;
         data.__clipText = textOverflow !== 'show' && !data.__autoSize;
-        data.__textDrawData = TextConvert.getDrawData(data.text, this.__);
+        data.__textDrawData = TextConvert.getDrawData((data.__isPlacehold = data.placeholder && data.text === '') ? data.placeholder : data.text, this.__);
     }
     __updateBoxBounds() {
         const data = this.__;
@@ -1832,12 +1879,11 @@ exports.Text = class Text extends exports.UI {
             super.__updateBoxBounds();
         if (italic)
             b.width += fontSize * 0.16;
-        const isOverflow = !includes(b, contentBounds) || undefined;
-        if (isOverflow)
+        core.DataHelper.stintSet(this, 'isOverflow', !includes(b, contentBounds));
+        if (this.isOverflow)
             setList(data.__textBoxBounds = {}, [b, contentBounds]), layout.renderChanged = true;
         else
             data.__textBoxBounds = b;
-        this.isOverflow !== isOverflow && (this.isOverflow = isOverflow);
     }
     __onUpdateSize() {
         if (this.__box)
@@ -1900,6 +1946,9 @@ __decorate([
 __decorate([
     core.boundsType('')
 ], exports.Text.prototype, "text", void 0);
+__decorate([
+    core.boundsType('')
+], exports.Text.prototype, "placeholder", void 0);
 __decorate([
     core.boundsType('caption')
 ], exports.Text.prototype, "fontFamily", void 0);
@@ -2058,4 +2107,3 @@ Object.keys(core).forEach(function (k) {
         get: function () { return core[k]; }
     });
 });
-//# sourceMappingURL=draw.cjs.map