leafer-ui 1.0.6 → 1.0.8

package/dist/web.js

@@ -2961,7 +2961,6 @@ var LeaferUI = (function (exports) {
         set path(value) { this.__path = value; }
         get path() { return this.__path; }
         constructor(path) {
-            this.clearPath = this.beginPath;
             this.set(path);
         }
         set(path) {
@@ -3043,6 +3042,9 @@ var LeaferUI = (function (exports) {
             this.paint();
             return this;
         }
+        clearPath() {
+            return this.beginPath();
+        }
         paint() { }
     }
 
@@ -3638,6 +3640,8 @@ var LeaferUI = (function (exports) {
             else {
                 if (url.includes('.' + format) || url.includes('.' + FileHelper.upperCaseTypeMap[format]))
                     return true;
+                else if (format === 'png' && !url.includes('.'))
+                    return true;
             }
             return false;
         },
@@ -4429,13 +4433,10 @@ var LeaferUI = (function (exports) {
         update() {
             const { leafer } = this.leaf;
             if (leafer) {
-                if (leafer.ready) {
-                    if (leafer.watcher.changed)
-                        leafer.layouter.layout();
-                }
-                else {
+                if (leafer.ready)
+                    leafer.watcher.changed && leafer.layouter.layout();
+                else
                     leafer.start();
-                }
             }
             else {
                 let root = this.leaf;
@@ -5258,7 +5259,7 @@ var LeaferUI = (function (exports) {
     const { LEAF, create } = IncrementId;
     const { toInnerPoint, toOuterPoint, multiplyParent } = MatrixHelper;
     const { toOuterOf } = BoundsHelper;
-    const { copy: copy$4, move: move$1 } = PointHelper;
+    const { copy: copy$4, move } = PointHelper;
     const { moveLocal, zoomOfLocal, rotateOfLocal, skewOfLocal, moveWorld, zoomOfWorld, rotateOfWorld, skewOfWorld, transform, transformWorld, setTransform, getFlipTransform, getLocalOrigin, getRelativeWorld, drop } = LeafHelper;
     exports.Leaf = class Leaf {
         get tag() { return this.__tag; }
@@ -5493,7 +5494,7 @@ var LeaferUI = (function (exports) {
         }
         getBoxPointByInner(inner, _relative, _distance, change) {
             const point = change ? inner : Object.assign({}, inner), { x, y } = this.boxBounds;
-            move$1(point, -x, -y);
+            move(point, -x, -y);
             return point;
         }
         getInnerPoint(world, relative, distance, change) {
@@ -5503,7 +5504,7 @@ var LeaferUI = (function (exports) {
         }
         getInnerPointByBox(box, _relative, _distance, change) {
             const point = change ? box : Object.assign({}, box), { x, y } = this.boxBounds;
-            move$1(point, x, y);
+            move(point, x, y);
             return point;
         }
         getInnerPointByLocal(local, _relative, distance, change) {
@@ -5644,11 +5645,10 @@ var LeaferUI = (function (exports) {
         }
         destroy() {
             if (!this.destroyed) {
-                const { parent } = this;
-                if (parent)
+                if (this.parent)
                     this.remove();
                 if (this.children)
-                    this.removeAll(true);
+                    this.clear();
                 this.__emitLifeEvent(ChildEvent.DESTROY);
                 this.__.destroy();
                 this.__layout.destroy();
@@ -5962,7 +5962,7 @@ var LeaferUI = (function (exports) {
         }
     }
 
-    const version = "1.0.6";
+    const version = "1.0.8";
 
     const debug$7 = Debug.get('LeaferCanvas');
     class LeaferCanvas extends LeaferCanvasBase {
@@ -6854,7 +6854,8 @@ var LeaferUI = (function (exports) {
                 path.add(leaf);
                 leaf = leaf.parent;
             }
-            path.add(this.target);
+            if (this.target)
+                path.add(this.target);
             return path;
         }
         getHitablePath(leaf) {
@@ -6940,8 +6941,8 @@ var LeaferUI = (function (exports) {
             this.innerIdMap = {};
             this.idMap = {};
             this.methods = {
-                id: (leaf, name) => leaf.id === name ? (this.idMap[name] = leaf, 1) : 0,
-                innerId: (leaf, innerId) => leaf.innerId === innerId ? (this.innerIdMap[innerId] = leaf, 1) : 0,
+                id: (leaf, name) => leaf.id === name ? (this.target && (this.idMap[name] = leaf), 1) : 0,
+                innerId: (leaf, innerId) => leaf.innerId === innerId ? (this.target && (this.innerIdMap[innerId] = leaf), 1) : 0,
                 className: (leaf, name) => leaf.className === name ? 1 : 0,
                 tag: (leaf, name) => leaf.__tag === name ? 1 : 0,
                 tags: (leaf, nameMap) => nameMap[leaf.__tag] ? 1 : 0
@@ -6950,7 +6951,8 @@ var LeaferUI = (function (exports) {
             if (userConfig)
                 this.config = DataHelper.default(userConfig, this.config);
             this.picker = new Picker(target, this);
-            this.__listenEvents();
+            if (target)
+                this.__listenEvents();
         }
         getBy(condition, branch, one, options) {
             switch (typeof condition) {
@@ -6985,7 +6987,7 @@ var LeaferUI = (function (exports) {
             }
         }
         getByPoint(hitPoint, hitRadius, options) {
-            if (Platform.name === 'node')
+            if (Platform.name === 'node' && this.target)
                 this.target.emit(LayoutEvent.CHECK_UPDATE);
             return this.picker.getByPoint(hitPoint, hitRadius, options);
         }
@@ -7134,12 +7136,8 @@ var LeaferUI = (function (exports) {
     };
     const Transition = {
         list: {},
-        register(attrName, fn) {
-            Transition.list[attrName] = fn;
-        },
-        get(attrName) {
-            return Transition.list[attrName];
-        }
+        register(attrName, fn) { Transition.list[attrName] = fn; },
+        get(attrName) { return Transition.list[attrName]; }
     };
 
     const { parse, objectToCanvasData } = PathConvert;
@@ -7585,8 +7583,8 @@ var LeaferUI = (function (exports) {
                 pen.set(path = []), this.__drawPathByBox(pen);
             return curve ? PathConvert.toCanvasData(path, true) : path;
         }
-        getPathString(curve, pathForRender) {
-            return PathConvert.stringify(this.getPath(curve, pathForRender));
+        getPathString(curve, pathForRender, floatLength) {
+            return PathConvert.stringify(this.getPath(curve, pathForRender), floatLength);
         }
         load() {
             this.__.__computePaint();
@@ -7995,11 +7993,11 @@ var LeaferUI = (function (exports) {
         start() {
             clearTimeout(this.__startTimer);
             if (!this.running && this.canvas) {
+                this.running = true;
                 this.ready ? this.emitLeafer(LeaferEvent.RESTART) : this.emitLeafer(LeaferEvent.START);
                 this.__controllers.forEach(item => item.start());
                 if (!this.isApp)
                     this.renderer.render();
-                this.running = true;
             }
         }
         stop() {
@@ -8105,12 +8103,10 @@ var LeaferUI = (function (exports) {
         }
         __changeFill(newValue) {
             this.config.fill = newValue;
-            if (this.canvas.allowBackgroundColor) {
+            if (this.canvas.allowBackgroundColor)
                 this.canvas.backgroundColor = newValue;
-            }
-            else {
+            else
                 this.forceRender();
-            }
         }
         __onCreated() {
             this.created = true;
@@ -8177,13 +8173,10 @@ var LeaferUI = (function (exports) {
             if (bind)
                 item = item.bind(bind);
             this.__viewCompletedWait.push(item);
-            if (this.viewCompleted) {
+            if (this.viewCompleted)
                 this.__checkViewCompleted(false);
-            }
-            else {
-                if (!this.running)
-                    this.start();
-            }
+            else if (!this.running)
+                this.start();
         }
         nextRender(item, bind, off) {
             if (bind)
@@ -8197,9 +8190,8 @@ var LeaferUI = (function (exports) {
                     }
                 }
             }
-            else {
+            else
                 list.push(item);
-            }
         }
         zoom(_zoomType, _padding, _fixedScale) {
             return needPlugin('view');
@@ -8243,10 +8235,7 @@ var LeaferUI = (function (exports) {
                         this.stop();
                         this.emitEvent(new LeaferEvent(LeaferEvent.END, this));
                         this.__removeListenEvents();
-                        this.__controllers.forEach(item => {
-                            if (!(this.parent && item === this.interaction))
-                                item.destroy();
-                        });
+                        this.__controllers.forEach(item => !(this.parent && item === this.interaction) && item.destroy());
                         this.__controllers.length = 0;
                         if (!this.parent) {
                             if (this.selector)
@@ -8779,23 +8768,23 @@ var LeaferUI = (function (exports) {
         }
         __updateTextDrawData() {
             const data = this.__;
-            data.__textDrawData = TextConvert.getDrawData(data.text, this.__);
-        }
-        __updateBoxBounds() {
-            const data = this.__;
-            const layout = this.__layout;
             const { lineHeight, letterSpacing, fontFamily, fontSize, fontWeight, italic, textCase, textOverflow, padding } = data;
-            const autoWidth = data.__autoWidth;
-            const autoHeight = data.__autoHeight;
             data.__lineHeight = UnitConvert.number(lineHeight, fontSize);
             data.__letterSpacing = UnitConvert.number(letterSpacing, fontSize);
             data.__padding = padding ? MathHelper.fourNumber(padding) : undefined;
             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.__);
+        }
+        __updateBoxBounds() {
+            const data = this.__;
+            const layout = this.__layout;
+            const { fontSize, italic, padding, __autoWidth: autoWidth, __autoHeight: autoHeight } = data;
             this.__updateTextDrawData();
             const { bounds } = data.__textDrawData;
             const b = layout.boxBounds;
+            console.log(bounds, autoWidth, autoHeight);
             if (data.__lineHeight < fontSize)
                 spread(bounds, fontSize / 2);
             if (autoWidth || autoHeight) {
@@ -8805,20 +8794,15 @@ var LeaferUI = (function (exports) {
                 b.height = autoHeight ? bounds.height : data.height;
                 if (padding) {
                     const [top, right, bottom, left] = data.__padding;
-                    if (autoWidth) {
-                        b.x -= left;
-                        b.width += (right + left);
-                    }
-                    if (autoHeight) {
-                        b.y -= top;
-                        b.height += (bottom + top);
-                    }
+                    if (autoWidth)
+                        b.x -= left, b.width += (right + left);
+                    if (autoHeight)
+                        b.y -= top, b.height += (bottom + top);
                 }
                 this.__updateNaturalSize();
             }
-            else {
+            else
                 super.__updateBoxBounds();
-            }
             if (italic)
                 b.width += fontSize * 0.16;
             const contentBounds = includes(b, bounds) ? b : bounds;
@@ -8827,9 +8811,8 @@ var LeaferUI = (function (exports) {
                 layout.renderChanged = true;
                 setList(data.__textBoxBounds = {}, [b, bounds]);
             }
-            else {
+            else
                 data.__textBoxBounds = contentBounds;
-            }
         }
         __updateRenderSpread() {
             let width = super.__updateRenderSpread();
@@ -8942,11 +8925,7 @@ var LeaferUI = (function (exports) {
             this.add(path);
             return this;
         }
-        beginPath() {
-            this.__path.length = 0;
-            this.paint();
-            return this;
-        }
+        beginPath() { return this; }
         moveTo(_x, _y) { return this; }
         lineTo(_x, _y) { return this; }
         bezierCurveTo(_x1, _y1, _x2, _y2, _x, _y) { return this; }
@@ -8973,7 +8952,7 @@ var LeaferUI = (function (exports) {
         penPathType()
     ], exports.Pen.prototype, "path", void 0);
     exports.Pen = __decorate([
-        useModule(PathCreator, ['set', 'beginPath', 'path', 'paint']),
+        useModule(PathCreator, ['set', 'path', 'paint']),
         registerUI()
     ], exports.Pen);
     function penPathType() {
@@ -9075,10 +9054,9 @@ var LeaferUI = (function (exports) {
         }
         __render(canvas, options) {
             if (canvas.context) {
-                if (options.matrix) {
-                    const { a, b, c, d, e, f } = options.matrix;
-                    canvas.setTransform(a, b, c, d, e, f);
-                }
+                const m = options.matrix;
+                if (m)
+                    canvas.setTransform(m.a, m.b, m.c, m.d, m.e, m.f);
                 this.children.forEach(leafer => canvas.copyWorld(leafer.canvas));
             }
         }
@@ -9148,9 +9126,6 @@ var LeaferUI = (function (exports) {
         constructor(params) {
             super(params.type);
             this.bubbles = true;
-            this.getInner = this.getInnerPoint;
-            this.getLocal = this.getLocalPoint;
-            this.getPage = this.getPagePoint;
             Object.assign(this, params);
         }
         getBoxPoint(relative) {
@@ -9171,6 +9146,9 @@ var LeaferUI = (function (exports) {
         getPagePoint() {
             return this.current.getPagePoint(this);
         }
+        getInner(relative) { return this.getInnerPoint(relative); }
+        getLocal(relative) { return this.getLocalPoint(relative); }
+        getPage() { return this.getPagePoint(); }
         static changeName(oldName, newName) {
             EventCreator.changeName(oldName, newName);
         }
@@ -9202,7 +9180,7 @@ var LeaferUI = (function (exports) {
     ], exports.PointerEvent);
     const MyPointerEvent = exports.PointerEvent;
 
-    const move = {};
+    const tempMove = {};
     exports.DragEvent = class DragEvent extends exports.PointerEvent {
         static setList(data) {
             this.list = data instanceof LeafList ? data : new LeafList(data);
@@ -9253,19 +9231,19 @@ var LeaferUI = (function (exports) {
         }
         getPageMove(total) {
             this.assignMove(total);
-            return this.current.getPagePoint(move, null, true);
+            return this.current.getPagePoint(tempMove, null, true);
         }
         getInnerMove(relative, total) {
             if (!relative)
                 relative = this.current;
             this.assignMove(total);
-            return relative.getInnerPoint(move, null, true);
+            return relative.getInnerPoint(tempMove, null, true);
         }
         getLocalMove(relative, total) {
             if (!relative)
                 relative = this.current;
             this.assignMove(total);
-            return relative.getLocalPoint(move, null, true);
+            return relative.getLocalPoint(tempMove, null, true);
         }
         getPageTotal() {
             return this.getPageMove(true);
@@ -9285,8 +9263,8 @@ var LeaferUI = (function (exports) {
             return bounds;
         }
         assignMove(total) {
-            move.x = total ? this.totalX : this.moveX;
-            move.y = total ? this.totalY : this.moveY;
+            tempMove.x = total ? this.totalX : this.moveX;
+            tempMove.y = total ? this.totalY : this.moveY;
         }
     };
     exports.DragEvent.BEFORE_DRAG = 'drag.before_drag';
@@ -9700,9 +9678,8 @@ var LeaferUI = (function (exports) {
                     interaction.emit(exports.DragEvent.OVER, data, path);
                 }
             }
-            else {
+            else
                 interaction.emit(exports.DragEvent.OVER, data, path);
-            }
         }
         dragEnterOrLeave(data) {
             const { interaction } = this;
@@ -9723,9 +9700,8 @@ var LeaferUI = (function (exports) {
                 this.drag(data);
                 this.animate(() => { this.dragEnd(data, 1); });
             }
-            else {
+            else
                 this.dragEndReal(data);
-            }
         }
         dragEndReal(data) {
             const { interaction, downData, dragData } = this;
@@ -9922,14 +9898,16 @@ var LeaferUI = (function (exports) {
     class InteractionBase {
         get dragging() { return this.dragger.dragging; }
         get transforming() { return this.transformer.transforming; }
-        get moveMode() { return this.config.move.drag === true || this.isHoldSpaceKey || this.isHoldMiddleKey || (this.isHoldRightKey && this.dragger.moving) || this.isDragEmpty; }
-        get canHover() { return this.config.pointer.hover && !this.config.mobile; }
-        get isDragEmpty() { return this.config.move.dragEmpty && this.isRootPath(this.hoverData) && (!this.downData || this.isRootPath(this.downData)); }
-        get isMobileDragEmpty() { return this.config.move.dragEmpty && !this.canHover && this.downData && this.isTreePath(this.downData); }
-        get isHoldMiddleKey() { return this.config.move.holdMiddleKey && this.downData && PointerButton.middle(this.downData); }
-        get isHoldRightKey() { return this.config.move.holdRightKey && this.downData && PointerButton.right(this.downData); }
-        get isHoldSpaceKey() { return this.config.move.holdSpaceKey && Keyboard.isHoldSpaceKey(); }
-        get hitRadius() { return this.config.pointer.hitRadius; }
+        get moveMode() { return this.m.drag === true || this.isHoldSpaceKey || this.isHoldMiddleKey || (this.isHoldRightKey && this.dragger.moving) || this.isDragEmpty; }
+        get canHover() { return this.p.hover && !this.config.mobile; }
+        get isDragEmpty() { return this.m.dragEmpty && this.isRootPath(this.hoverData) && (!this.downData || this.isRootPath(this.downData)); }
+        get isMobileDragEmpty() { return this.m.dragEmpty && !this.canHover && this.downData && this.isTreePath(this.downData); }
+        get isHoldMiddleKey() { return this.m.holdMiddleKey && this.downData && PointerButton.middle(this.downData); }
+        get isHoldRightKey() { return this.m.holdRightKey && this.downData && PointerButton.right(this.downData); }
+        get isHoldSpaceKey() { return this.m.holdSpaceKey && Keyboard.isHoldSpaceKey(); }
+        get m() { return this.config.move; }
+        get p() { return this.config.pointer; }
+        get hitRadius() { return this.p.hitRadius; }
         constructor(target, canvas, selector, userConfig) {
             this.config = DataHelper.clone(config);
             this.tapCount = 0;
@@ -9987,7 +9965,7 @@ var LeaferUI = (function (exports) {
             }
         }
         pointerMoveReal(data) {
-            const { dragHover, dragDistance } = this.config.pointer;
+            const { dragHover, dragDistance } = this.p;
             this.emit(exports.PointerEvent.BEFORE_MOVE, data, this.defaultPath);
             if (this.downData) {
                 const canDrag = PointHelper.getDistance(this.downData, data) > dragDistance;
@@ -10172,7 +10150,7 @@ var LeaferUI = (function (exports) {
             }
         }
         findPath(data, options) {
-            const { hitRadius, through } = this.config.pointer;
+            const { hitRadius, through } = this.p;
             const { bottomList } = this;
             const find = this.selector.getByPoint(data, hitRadius, Object.assign({ bottomList, name: data.type }, (options || { through })));
             if (find.throughPath)
@@ -10194,7 +10172,7 @@ var LeaferUI = (function (exports) {
                 data.path = this.defaultPath;
         }
         canMove(data) {
-            return data && (this.moveMode || (this.config.move.drag === 'auto' && !pathCanDrag$1(data.path))) && !pathHasOutside(data.path);
+            return data && (this.moveMode || (this.m.drag === 'auto' && !pathCanDrag$1(data.path))) && !pathHasOutside(data.path);
         }
         isDrag(leaf) {
             return this.dragger.getList().has(leaf);
@@ -10292,7 +10270,7 @@ var LeaferUI = (function (exports) {
             this.longPressTimer = setTimeout(() => {
                 this.longPressed = true;
                 this.emit(exports.PointerEvent.LONG_PRESS, data);
-            }, this.config.pointer.longPressTime);
+            }, this.p.longPressTime);
         }
         longTap(data) {
             let hasLong;
@@ -10503,17 +10481,20 @@ var LeaferUI = (function (exports) {
     };
 
     const ui = exports.UI.prototype, group = exports.Group.prototype;
+    function getSelector(ui) {
+        return ui.leafer ? ui.leafer.selector : (Platform.selector || (Platform.selector = Creator.selector()));
+    }
     ui.find = function (condition, options) {
-        return this.leafer ? this.leafer.selector.getBy(condition, this, false, options) : [];
+        return getSelector(this).getBy(condition, this, false, options);
     };
     ui.findOne = function (condition, options) {
-        return this.leafer ? this.leafer.selector.getBy(condition, this, true, options) : null;
+        return getSelector(this).getBy(condition, this, true, options);
     };
     group.pick = function (hitPoint, options) {
         this.__layout.update();
         if (!options)
             options = {};
-        return this.leafer ? this.leafer.selector.getByPoint(hitPoint, options.hitRadius || 0, Object.assign(Object.assign({}, options), { target: this })) : null;
+        return getSelector(this).getByPoint(hitPoint, options.hitRadius || 0, Object.assign(Object.assign({}, options), { target: this }));
     };
 
     const canvas$1 = LeaferCanvasBase.prototype;
@@ -10894,14 +10875,10 @@ var LeaferUI = (function (exports) {
         const { rows, decorationY, decorationHeight } = ui.__.__textDrawData;
         for (let i = 0, len = rows.length; i < len; i++) {
             row = rows[i];
-            if (row.text) {
+            if (row.text)
                 canvas.fillText(row.text, row.x, row.y);
-            }
-            else if (row.data) {
-                row.data.forEach(charData => {
-                    canvas.fillText(charData.char, charData.x, row.y);
-                });
-            }
+            else if (row.data)
+                row.data.forEach(charData => { canvas.fillText(charData.char, charData.x, row.y); });
             if (decorationY)
                 canvas.fillRect(row.x, row.y + decorationY, row.width, decorationHeight);
         }
@@ -10967,12 +10944,10 @@ var LeaferUI = (function (exports) {
         out.blendMode = align === 'outside' ? 'destination-out' : 'destination-in';
         fillText(ui, out);
         out.blendMode = 'normal';
-        if (ui.__worldFlipped) {
+        if (ui.__worldFlipped)
             canvas.copyWorldByReset(out, ui.__nowWorld);
-        }
-        else {
+        else
             canvas.copyWorldToInner(out, ui.__nowWorld, ui.__layout.renderBounds);
-        }
         out.recycle(ui.__nowWorld);
     }
     function drawTextStroke(ui, canvas) {
@@ -10980,14 +10955,10 @@ var LeaferUI = (function (exports) {
         const { rows, decorationY, decorationHeight } = ui.__.__textDrawData;
         for (let i = 0, len = rows.length; i < len; i++) {
             row = rows[i];
-            if (row.text) {
+            if (row.text)
                 canvas.strokeText(row.text, row.x, row.y);
-            }
-            else if (row.data) {
-                row.data.forEach(charData => {
-                    canvas.strokeText(charData.char, charData.x, row.y);
-                });
-            }
+            else if (row.data)
+                row.data.forEach(charData => { canvas.strokeText(charData.char, charData.x, row.y); });
             if (decorationY)
                 canvas.strokeRect(row.x, row.y + decorationY, row.width, decorationHeight);
         }
@@ -11040,12 +11011,10 @@ var LeaferUI = (function (exports) {
                     out.stroke();
                     options.windingRule ? out.clip(options.windingRule) : out.clip();
                     out.clearWorld(ui.__layout.renderBounds);
-                    if (ui.__worldFlipped) {
+                    if (ui.__worldFlipped)
                         canvas.copyWorldByReset(out, ui.__nowWorld);
-                    }
-                    else {
+                    else
                         canvas.copyWorldToInner(out, ui.__nowWorld, ui.__layout.renderBounds);
-                    }
                     out.recycle(ui.__nowWorld);
                     break;
             }
@@ -11080,12 +11049,10 @@ var LeaferUI = (function (exports) {
                     drawStrokesStyle(strokes, false, ui, out);
                     options.windingRule ? out.clip(options.windingRule) : out.clip();
                     out.clearWorld(renderBounds);
-                    if (ui.__worldFlipped) {
+                    if (ui.__worldFlipped)
                         canvas.copyWorldByReset(out, ui.__nowWorld);
-                    }
-                    else {
+                    else
                         canvas.copyWorldToInner(out, ui.__nowWorld, renderBounds);
-                    }
                     out.recycle(ui.__nowWorld);
                     break;
             }
@@ -11149,12 +11116,7 @@ var LeaferUI = (function (exports) {
         data['_' + attrName] = leafPaints.length ? leafPaints : undefined;
         if (leafPaints.length && leafPaints[0].image)
             hasOpacityPixel = leafPaints[0].image.hasOpacityPixel;
-        if (attrName === 'fill') {
-            data.__pixelFill = hasOpacityPixel;
-        }
-        else {
-            data.__pixelStroke = hasOpacityPixel;
-        }
+        attrName === 'fill' ? data.__pixelFill = hasOpacityPixel : data.__pixelStroke = hasOpacityPixel;
     }
     function getLeafPaint(attrName, paint, ui) {
         if (typeof paint !== 'object' || paint.visible === false || paint.opacity === 0)