@leafer/core 1.9.1 → 1.9.2

package/lib/core.cjs

@@ -478,9 +478,8 @@ const MatrixHelper = {
         t.e = child.e * a + child.f * c + e;
         t.f = child.e * b + child.f * d + f;
     },
-    multiplyParent(t, parent, to, abcdChanged, childScaleData, scrollData) {
-        let {e: e, f: f} = t;
-        if (scrollData) e += scrollData.scrollX, f += scrollData.scrollY;
+    multiplyParent(t, parent, to, abcdChanged, childScaleData) {
+        const {e: e, f: f} = t;
         to || (to = t);
         if (isUndefined(abcdChanged)) abcdChanged = t.a !== 1 || t.b || t.c || t.d !== 1;
         if (abcdChanged) {
@@ -1193,6 +1192,12 @@ const BoundsHelper = {
         t.x += x;
         t.y += y;
     },
+    scroll(t, data) {
+        if (data.scrollY || data.scrollX) {
+            t.x += data.scrollX;
+            t.y += data.scrollY;
+        }
+    },
     getByMove(t, x, y) {
         t = Object.assign({}, t);
         B.move(t, x, y);
@@ -2139,7 +2144,7 @@ __decorate([ contextMethod() ], Canvas.prototype, "measureText", null);
 
 __decorate([ contextMethod() ], Canvas.prototype, "strokeText", null);
 
-const {copy: copy$5, multiplyParent: multiplyParent$3} = MatrixHelper, {round: round$1} = Math;
+const {copy: copy$5, multiplyParent: multiplyParent$3} = MatrixHelper, {round: round$1} = Math, tempPixelBounds = new Bounds, tempPixelBounds2 = new Bounds;
 
 const minSize = {
     width: 1,
@@ -2304,44 +2309,44 @@ class LeaferCanvasBase extends Canvas {
         const {pixelRatio: pixelRatio} = this;
         this.filter = `blur(${blur * pixelRatio}px)`;
     }
-    copyWorld(canvas, from, to, blendMode) {
+    copyWorld(canvas, from, to, blendMode, ceilPixel = true) {
         if (blendMode) this.blendMode = blendMode;
         if (from) {
-            const {pixelRatio: pixelRatio} = this;
-            if (!to) to = from;
-            this.drawImage(canvas.view, from.x * pixelRatio, from.y * pixelRatio, from.width * pixelRatio, from.height * pixelRatio, to.x * pixelRatio, to.y * pixelRatio, to.width * pixelRatio, to.height * pixelRatio);
+            this.setTempPixelBounds(from, ceilPixel);
+            if (!to) to = tempPixelBounds; else this.setTempPixelBounds2(to, ceilPixel), to = tempPixelBounds2;
+            this.drawImage(canvas.view, tempPixelBounds.x, tempPixelBounds.y, tempPixelBounds.width, tempPixelBounds.height, to.x, to.y, to.width, to.height);
         } else {
             this.drawImage(canvas.view, 0, 0);
         }
         if (blendMode) this.blendMode = "source-over";
     }
-    copyWorldToInner(canvas, fromWorld, toInnerBounds, blendMode) {
-        if (blendMode) this.blendMode = blendMode;
+    copyWorldToInner(canvas, fromWorld, toInnerBounds, blendMode, ceilPixel = true) {
         if (fromWorld.b || fromWorld.c) {
             this.save();
             this.resetTransform();
-            this.copyWorld(canvas, fromWorld, BoundsHelper.tempToOuterOf(toInnerBounds, fromWorld));
+            this.copyWorld(canvas, fromWorld, BoundsHelper.tempToOuterOf(toInnerBounds, fromWorld), blendMode, ceilPixel);
             this.restore();
         } else {
-            const {pixelRatio: pixelRatio} = this;
-            this.drawImage(canvas.view, fromWorld.x * pixelRatio, fromWorld.y * pixelRatio, fromWorld.width * pixelRatio, fromWorld.height * pixelRatio, toInnerBounds.x, toInnerBounds.y, toInnerBounds.width, toInnerBounds.height);
+            if (blendMode) this.blendMode = blendMode;
+            this.setTempPixelBounds(fromWorld, ceilPixel);
+            this.drawImage(canvas.view, tempPixelBounds.x, tempPixelBounds.y, tempPixelBounds.width, tempPixelBounds.height, toInnerBounds.x, toInnerBounds.y, toInnerBounds.width, toInnerBounds.height);
+            if (blendMode) this.blendMode = "source-over";
         }
-        if (blendMode) this.blendMode = "source-over";
     }
-    copyWorldByReset(canvas, from, to, blendMode, onlyResetTransform) {
+    copyWorldByReset(canvas, from, to, blendMode, onlyResetTransform, ceilPixel = true) {
         this.resetTransform();
-        this.copyWorld(canvas, from, to, blendMode);
+        this.copyWorld(canvas, from, to, blendMode, ceilPixel);
         if (!onlyResetTransform) this.useWorldTransform();
     }
     useGrayscaleAlpha(bounds) {
-        this.setTempBounds(bounds, true, true);
+        this.setTempPixelBounds(bounds, true, true);
         let alpha, pixel;
-        const {context: context} = this, imageData = context.getImageData(tempBounds.x, tempBounds.y, tempBounds.width, tempBounds.height), {data: data} = imageData;
+        const {context: context} = this, imageData = context.getImageData(tempPixelBounds.x, tempPixelBounds.y, tempPixelBounds.width, tempPixelBounds.height), {data: data} = imageData;
         for (let i = 0, len = data.length; i < len; i += 4) {
             pixel = data[i] * .299 + data[i + 1] * .587 + data[i + 2] * .114;
             if (alpha = data[i + 3]) data[i + 3] = alpha === 255 ? pixel : alpha * (pixel / 255);
         }
-        context.putImageData(imageData, tempBounds.x, tempBounds.y);
+        context.putImageData(imageData, tempPixelBounds.x, tempPixelBounds.y);
     }
     useMask(maskCanvas, fromBounds, toBounds) {
         this.copyWorld(maskCanvas, fromBounds, toBounds, "destination-in");
@@ -2349,42 +2354,48 @@ class LeaferCanvasBase extends Canvas {
     useEraser(eraserCanvas, fromBounds, toBounds) {
         this.copyWorld(eraserCanvas, fromBounds, toBounds, "destination-out");
     }
-    fillWorld(bounds, color, blendMode) {
+    fillWorld(bounds, color, blendMode, ceilPixel) {
         if (blendMode) this.blendMode = blendMode;
         this.fillStyle = color;
-        this.setTempBounds(bounds);
-        this.fillRect(tempBounds.x, tempBounds.y, tempBounds.width, tempBounds.height);
+        this.setTempPixelBounds(bounds, ceilPixel);
+        this.fillRect(tempPixelBounds.x, tempPixelBounds.y, tempPixelBounds.width, tempPixelBounds.height);
         if (blendMode) this.blendMode = "source-over";
     }
-    strokeWorld(bounds, color, blendMode) {
+    strokeWorld(bounds, color, blendMode, ceilPixel) {
         if (blendMode) this.blendMode = blendMode;
         this.strokeStyle = color;
-        this.setTempBounds(bounds);
-        this.strokeRect(tempBounds.x, tempBounds.y, tempBounds.width, tempBounds.height);
+        this.setTempPixelBounds(bounds, ceilPixel);
+        this.strokeRect(tempPixelBounds.x, tempPixelBounds.y, tempPixelBounds.width, tempPixelBounds.height);
         if (blendMode) this.blendMode = "source-over";
     }
-    clipWorld(bounds, ceilPixel) {
+    clipWorld(bounds, ceilPixel = true) {
         this.beginPath();
-        this.setTempBounds(bounds, ceilPixel);
-        this.rect(tempBounds.x, tempBounds.y, tempBounds.width, tempBounds.height);
+        this.setTempPixelBounds(bounds, ceilPixel);
+        this.rect(tempPixelBounds.x, tempPixelBounds.y, tempPixelBounds.width, tempPixelBounds.height);
         this.clip();
     }
     clipUI(ruleData) {
         ruleData.windingRule ? this.clip(ruleData.windingRule) : this.clip();
     }
-    clearWorld(bounds, ceilPixel) {
-        this.setTempBounds(bounds, ceilPixel);
-        this.clearRect(tempBounds.x, tempBounds.y, tempBounds.width, tempBounds.height);
+    clearWorld(bounds, ceilPixel = true) {
+        this.setTempPixelBounds(bounds, ceilPixel);
+        this.clearRect(tempPixelBounds.x, tempPixelBounds.y, tempPixelBounds.width, tempPixelBounds.height);
     }
     clear() {
         const {pixelRatio: pixelRatio} = this;
         this.clearRect(0, 0, this.width * pixelRatio + 2, this.height * pixelRatio + 2);
     }
-    setTempBounds(bounds, ceil, intersect) {
-        tempBounds.set(bounds);
-        if (intersect) tempBounds.intersect(this.bounds);
-        tempBounds.scale(this.pixelRatio);
-        if (ceil) tempBounds.ceil();
+    setTempPixelBounds(bounds, ceil, intersect) {
+        this.copyToPixelBounds(tempPixelBounds, bounds, ceil, intersect);
+    }
+    setTempPixelBounds2(bounds, ceil, intersect) {
+        this.copyToPixelBounds(tempPixelBounds2, bounds, ceil, intersect);
+    }
+    copyToPixelBounds(pixelBounds, bounds, ceil, intersect) {
+        pixelBounds.set(bounds);
+        if (intersect) pixelBounds.intersect(this.bounds);
+        pixelBounds.scale(this.pixelRatio);
+        if (ceil) pixelBounds.ceil();
     }
     isSameSize(size) {
         return this.width === size.width && this.height === size.height && (!size.pixelRatio || this.pixelRatio === size.pixelRatio);
@@ -2400,7 +2411,7 @@ class LeaferCanvasBase extends Canvas {
     recycle(clearBounds) {
         if (!this.recycled) {
             this.restore();
-            clearBounds ? this.clearWorld(clearBounds, true) : this.clear();
+            clearBounds ? this.clearWorld(clearBounds) : this.clear();
             this.manager ? this.manager.recycle(this) : this.destroy();
         }
     }
@@ -4140,6 +4151,17 @@ function positionType(defaultValue, checkFiniteNumber) {
     }));
 }
 
+function scrollType(defaultValue, checkFiniteNumber) {
+    return decorateLeafAttr(defaultValue, key => attr({
+        set(value) {
+            if (this.__setAttr(key, value, checkFiniteNumber)) {
+                this.__layout.matrixChanged || this.__layout.matrixChange();
+                this.__scrollWorld || (this.__scrollWorld = {});
+            }
+        }
+    }));
+}
+
 function autoLayoutType(defaultValue) {
     return decorateLeafAttr(defaultValue, key => attr({
         set(value) {
@@ -4554,7 +4576,7 @@ const LeafHelper = {
             x: x,
             y: y
         };
-        isInnerPoint ? toOuterPoint$1(t.localTransform, local, local, true) : t.parent && toInnerPoint$1(t.parent.worldTransform, local, local, true);
+        isInnerPoint ? toOuterPoint$1(t.localTransform, local, local, true) : t.parent && toInnerPoint$1(t.parent.scrollWorldTransform, local, local, true);
         L.moveLocal(t, local.x, local.y, transition);
     },
     moveLocal(t, x, y = 0, transition) {
@@ -4578,7 +4600,7 @@ const LeafHelper = {
         }
         copy$3(matrix, o);
         scaleOfOuter(matrix, origin, scaleX, scaleY);
-        if (t.origin || t.around) {
+        if (L.hasHighPosition(t)) {
             L.setTransform(t, matrix, resize, transition);
         } else {
             const x = t.x + matrix.e - o.e, y = t.y + matrix.f - o.f;
@@ -4597,7 +4619,7 @@ const LeafHelper = {
         const o = t.__localMatrix;
         copy$3(matrix, o);
         rotateOfOuter(matrix, origin, angle);
-        if (t.origin || t.around) L.setTransform(t, matrix, false, transition); else t.set({
+        if (L.hasHighPosition(t)) L.setTransform(t, matrix, false, transition); else t.set({
             x: t.x + matrix.e - o.e,
             y: t.y + matrix.f - o.f,
             rotation: MathHelper.formatRotation(t.rotation + angle)
@@ -4614,7 +4636,7 @@ const LeafHelper = {
     transformWorld(t, transform, resize, transition) {
         copy$3(matrix, t.worldTransform);
         multiplyParent$2(matrix, transform);
-        if (t.parent) divideParent(matrix, t.parent.worldTransform);
+        if (t.parent) divideParent(matrix, t.parent.scrollWorldTransform);
         L.setTransform(t, matrix, resize, transition);
     },
     transform(t, transform, resize, transition) {
@@ -4625,6 +4647,10 @@ const LeafHelper = {
     setTransform(t, transform, resize, transition) {
         const data = t.__, originPoint = data.origin && L.getInnerOrigin(t, data.origin);
         const layout = getLayout(transform, originPoint, data.around && L.getInnerOrigin(t, data.around));
+        if (L.hasOffset(t)) {
+            layout.x -= data.offsetX;
+            layout.y -= data.offsetY;
+        }
         if (resize) {
             const scaleX = layout.scaleX / t.scaleX, scaleY = layout.scaleY / t.scaleY;
             delete layout.scaleX, delete layout.scaleY;
@@ -4653,13 +4679,19 @@ const LeafHelper = {
     },
     getRelativeWorld(t, relative, temp) {
         copy$3(matrix, t.worldTransform);
-        divideParent(matrix, relative.worldTransform);
+        divideParent(matrix, relative.scrollWorldTransform);
         return temp ? matrix : Object.assign({}, matrix);
     },
     drop(t, parent, index, resize) {
         t.setTransform(L.getRelativeWorld(t, parent, true), resize);
         parent.add(t, index);
     },
+    hasHighPosition(t) {
+        return t.origin || t.around || L.hasOffset(t);
+    },
+    hasOffset(t) {
+        return t.offsetX || t.offsetY;
+    },
     hasParent(p, parent) {
         if (!parent) return false;
         while (p) {
@@ -4685,8 +4717,7 @@ const L = LeafHelper;
 const {updateAllMatrix: updateAllMatrix$1, updateMatrix: updateMatrix$1, updateAllWorldOpacity: updateAllWorldOpacity, updateAllChange: updateAllChange, updateChange: updateChange} = L;
 
 function getTempLocal(t, world) {
-    t.__layout.update();
-    return t.parent ? PointHelper.tempToInnerOf(world, t.parent.__world) : world;
+    return t.parent ? PointHelper.tempToInnerOf(world, t.parent.scrollWorldTransform) : world;
 }
 
 const LeafBoundsHelper = {
@@ -5238,6 +5269,8 @@ ChildEvent.UNMOUNTED = "unmounted";
 
 ChildEvent.DESTROY = "destroy";
 
+const SCROLL = "property.scroll";
+
 class PropertyEvent extends Event {
     constructor(type, target, attrName, oldValue, newValue) {
         super(type, target);
@@ -5251,6 +5284,13 @@ PropertyEvent.CHANGE = "property.change";
 
 PropertyEvent.LEAFER_CHANGE = "property.leafer_change";
 
+PropertyEvent.SCROLL = SCROLL;
+
+const extraPropertyEventMap = {
+    scrollX: SCROLL,
+    scrollY: SCROLL
+};
+
 class ImageEvent extends Event {
     constructor(type, data) {
         super(type);
@@ -5526,7 +5566,9 @@ class Eventer {
         if (!id) return;
         const list = isArray(id) ? id : [ id ];
         list.forEach(item => {
-            if (!item.listener) isArray(item.type) && item.type.forEach(v => item.current.off(v[0], v[1], v[3])); else item.current.off(item.type, item.listener, item.options);
+            if (item) {
+                if (!item.listener) isArray(item.type) && item.type.forEach(v => item.current.off(v[0], v[1], v[3])); else item.current.off(item.type, item.listener, item.options);
+            }
         });
         list.length = 0;
     }
@@ -5620,8 +5662,6 @@ const LeafDataProxy = {
             }
             if (isObject(newValue) || oldValue !== newValue) {
                 this.__realSetAttr(name, newValue);
-                const {CHANGE: CHANGE} = PropertyEvent;
-                const event = new PropertyEvent(CHANGE, this, name, oldValue, newValue);
                 if (this.isLeafer) {
                     this.emitEvent(new PropertyEvent(PropertyEvent.LEAFER_CHANGE, this, name, oldValue, newValue));
                     const transformEventName = leaferTransformAttrMap[name];
@@ -5629,10 +5669,10 @@ const LeafDataProxy = {
                         this.emitEvent(new LeaferEvent(transformEventName, this));
                         this.emitEvent(new LeaferEvent(LeaferEvent.TRANSFORM, this));
                     }
-                } else {
-                    if (this.hasEvent(CHANGE)) this.emitEvent(event);
                 }
-                this.leafer.emitEvent(event);
+                this.emitPropertyEvent(PropertyEvent.CHANGE, name, oldValue, newValue);
+                const extraPropertyEvent = extraPropertyEventMap[name];
+                if (extraPropertyEvent) this.emitPropertyEvent(extraPropertyEvent, name, oldValue, newValue);
                 return true;
             } else {
                 return false;
@@ -5642,6 +5682,11 @@ const LeafDataProxy = {
             return true;
         }
     },
+    emitPropertyEvent(type, name, oldValue, newValue) {
+        const event = new PropertyEvent(type, this, name, oldValue, newValue);
+        this.isLeafer || this.hasEvent(type) && this.emitEvent(event);
+        this.leafer.emitEvent(event);
+    },
     __realSetAttr(name, newValue) {
         const data = this.__;
         data[name] = newValue;
@@ -5660,8 +5705,9 @@ const {toPoint: toPoint, tempPoint: tempPoint} = AroundHelper;
 
 const LeafMatrix = {
     __updateWorldMatrix() {
-        const {parent: parent, __layout: __layout} = this;
-        multiplyParent$1(this.__local || __layout, parent ? parent.__world : defaultWorld, this.__world, !!__layout.affectScaleOrRotation, this.__, parent && (parent.scrollY || parent.scrollX) && parent.__);
+        const {parent: parent, __layout: __layout, __world: __world, __scrollWorld: __scrollWorld, __: __} = this;
+        multiplyParent$1(this.__local || __layout, parent ? parent.__scrollWorld || parent.__world : defaultWorld, __world, !!__layout.affectScaleOrRotation, __);
+        if (__scrollWorld) translateInner(Object.assign(__scrollWorld, __world), __.scrollX, __.scrollY);
     },
     __updateLocalMatrix() {
         if (this.__local) {
@@ -5758,7 +5804,7 @@ const LeafBounds = {
     __updateLocalRenderBounds() {
         toOuterOf$1(this.__layout.renderBounds, this.__localMatrix, this.__layout.localRenderBounds);
     },
-    __updateBoxBounds() {
+    __updateBoxBounds(_secondLayout, _bounds) {
         const b = this.__layout.boxBounds;
         const data = this.__;
         if (data.__pathInputed) {
@@ -5792,11 +5838,11 @@ const LeafBounds = {
         data.__naturalWidth = layout.boxBounds.width;
         data.__naturalHeight = layout.boxBounds.height;
     },
-    __updateStrokeBounds() {
+    __updateStrokeBounds(_bounds) {
         const layout = this.__layout;
         copyAndSpread(layout.strokeBounds, layout.boxBounds, layout.strokeBoxSpread);
     },
-    __updateRenderBounds() {
+    __updateRenderBounds(_bounds) {
         const layout = this.__layout;
         layout.renderSpread > 0 ? copyAndSpread(layout.renderBounds, layout.boxBounds, layout.renderSpread) : copy$1(layout.renderBounds, layout.strokeBounds);
     }
@@ -5945,6 +5991,10 @@ exports.Leaf = class Leaf {
     get localTransform() {
         return this.__layout.getTransform("local");
     }
+    get scrollWorldTransform() {
+        this.updateLayout();
+        return this.__scrollWorld || this.__world;
+    }
     get boxBounds() {
         return this.getBounds("box", "inner");
     }
@@ -5961,7 +6011,7 @@ exports.Leaf = class Leaf {
         return this.getBounds("render");
     }
     get worldOpacity() {
-        this.__layout.update();
+        this.updateLayout();
         return this.__worldOpacity;
     }
     get __worldFlipped() {
@@ -6136,10 +6186,10 @@ exports.Leaf = class Leaf {
     __updateLocalBoxBounds() {}
     __updateLocalStrokeBounds() {}
     __updateLocalRenderBounds() {}
-    __updateBoxBounds() {}
+    __updateBoxBounds(_secondLayout, _bounds) {}
     __updateContentBounds() {}
-    __updateStrokeBounds() {}
-    __updateRenderBounds() {}
+    __updateStrokeBounds(_bounds) {}
+    __updateRenderBounds(_bounds) {}
     __updateAutoLayout() {}
     __updateFlowLayout() {}
     __updateNaturalSize() {}
@@ -6439,14 +6489,14 @@ exports.Branch = class Branch extends exports.Leaf {
         }
         return 0;
     }
-    __updateBoxBounds() {
-        setListWithFn(this.__layout.boxBounds, this.children, this.__hasMask ? maskLocalBoxBounds : localBoxBounds);
+    __updateBoxBounds(_secondLayout, bounds) {
+        setListWithFn(bounds || this.__layout.boxBounds, this.children, this.__hasMask ? maskLocalBoxBounds : localBoxBounds);
     }
-    __updateStrokeBounds() {
-        setListWithFn(this.__layout.strokeBounds, this.children, this.__hasMask ? maskLocalStrokeBounds : localStrokeBounds);
+    __updateStrokeBounds(bounds) {
+        setListWithFn(bounds || this.__layout.strokeBounds, this.children, this.__hasMask ? maskLocalStrokeBounds : localStrokeBounds);
     }
-    __updateRenderBounds() {
-        setListWithFn(this.__layout.renderBounds, this.children, this.__hasMask ? maskLocalRenderBounds : localRenderBounds);
+    __updateRenderBounds(bounds) {
+        setListWithFn(bounds || this.__layout.renderBounds, this.children, this.__hasMask ? maskLocalRenderBounds : localRenderBounds);
     }
     __updateSortChildren() {
         let affectSort;
@@ -6693,7 +6743,7 @@ class LeafLevelList {
     }
 }
 
-const version = "1.9.1";
+const version = "1.9.2";
 
 exports.AlignHelper = AlignHelper;
 
@@ -6875,6 +6925,8 @@ exports.emptyData = emptyData;
 
 exports.eraserType = eraserType;
 
+exports.extraPropertyEventMap = extraPropertyEventMap;
+
 exports.getBoundsData = getBoundsData;
 
 exports.getDescriptor = getDescriptor;
@@ -6933,6 +6985,8 @@ exports.rotationType = rotationType;
 
 exports.scaleType = scaleType;
 
+exports.scrollType = scrollType;
+
 exports.sortType = sortType;
 
 exports.strokeType = strokeType;