leafer-ui 1.9.8 → 1.9.10

package/dist/web.cjs

@@ -876,7 +876,7 @@ class Picker {
             children: [ target ]
         } : target);
         const {list: list} = this.findList;
-        const leaf = this.getBestMatchLeaf(list, options.bottomList, ignoreHittable);
+        const leaf = this.getBestMatchLeaf(list, options.bottomList, ignoreHittable, !!options.findList);
         const path = ignoreHittable ? this.getPath(leaf) : this.getHitablePath(leaf);
         this.clear();
         return through ? {
@@ -891,7 +891,7 @@ class Picker {
     hitPoint(hitPoint, hitRadius, options) {
         return !!this.getByPoint(hitPoint, hitRadius, options).target;
     }
-    getBestMatchLeaf(list, bottomList, ignoreHittable) {
+    getBestMatchLeaf(list, bottomList, ignoreHittable, allowNull) {
         const findList = this.findList = new core.LeafList;
         if (list.length) {
             let find;
@@ -922,15 +922,27 @@ class Picker {
                 if (findList.length) return findList.list[0];
             }
         }
+        if (allowNull) return null;
         return ignoreHittable ? list[0] : list.find(item => core.LeafHelper.worldHittable(item));
     }
     getPath(leaf) {
-        const path = new core.LeafList;
+        const path = new core.LeafList, syncList = [], {target: target} = this;
         while (leaf) {
+            if (leaf.syncEventer) syncList.push(leaf.syncEventer);
             path.add(leaf);
             leaf = leaf.parent;
+            if (leaf === target) break;
+        }
+        if (syncList.length) {
+            syncList.forEach(item => {
+                while (item) {
+                    if (item.__.hittable) path.add(item);
+                    item = item.parent;
+                    if (item === target) break;
+                }
+            });
         }
-        if (this.target) path.add(this.target);
+        if (target) path.add(target);
         return path;
     }
     getHitablePath(leaf) {
@@ -1734,7 +1746,14 @@ const PaintModule = {
 
 let origin = {}, tempMatrix$1 = core.getMatrixData();
 
-const {get: get$3, rotateOfOuter: rotateOfOuter$1, translate: translate$1, scaleOfOuter: scaleOfOuter$1, multiplyParent: multiplyParent, scale: scaleHelper, rotate: rotate, skew: skewHelper} = core.MatrixHelper;
+const {get: get$3, set: set, rotateOfOuter: rotateOfOuter$1, translate: translate$1, scaleOfOuter: scaleOfOuter$1, multiplyParent: multiplyParent, scale: scaleHelper, rotate: rotate, skew: skewHelper} = core.MatrixHelper;
+
+function stretchMode(data, box, scaleX, scaleY) {
+    const transform = get$3();
+    translate$1(transform, box.x, box.y);
+    if (scaleX) scaleHelper(transform, scaleX, scaleY);
+    data.transform = transform;
+}
 
 function fillOrFitMode(data, box, x, y, scaleX, scaleY, rotation) {
     const transform = get$3();
@@ -1751,8 +1770,11 @@ function clipMode(data, box, x, y, scaleX, scaleY, rotation, skew, clipScaleX, c
     const transform = get$3();
     layout(transform, box, x, y, scaleX, scaleY, rotation, skew);
     if (clipScaleX) {
-        tempMatrix$1.a = clipScaleX, tempMatrix$1.d = clipScaleY;
-        multiplyParent(transform, tempMatrix$1);
+        if (rotation || skew) {
+            set(tempMatrix$1);
+            scaleOfOuter$1(tempMatrix$1, box, clipScaleX, clipScaleY);
+            multiplyParent(transform, tempMatrix$1);
+        } else scaleOfOuter$1(transform, box, clipScaleX, clipScaleY);
     }
     data.transform = transform;
 }
@@ -1848,7 +1870,10 @@ function getPatternData(paint, box, image) {
     if (offset) core.PointHelper.move(tempImage, offset);
     switch (mode) {
       case "stretch":
-        if (!sameBox) width = box.width, height = box.height;
+        if (!sameBox) {
+            scaleX = box.width / width, scaleY = box.height / height;
+            stretchMode(data, box, scaleX, scaleY);
+        }
         break;
 
       case "normal":
@@ -1857,7 +1882,7 @@ function getPatternData(paint, box, image) {
             let clipScaleX, clipScaleY;
             if (clipSize) clipScaleX = box.width / clipSize.width, clipScaleY = box.height / clipSize.height;
             clipMode(data, box, tempImage.x, tempImage.y, scaleX, scaleY, rotation, skew, clipScaleX, clipScaleY);
-            if (clipScaleX) scaleX = scaleX ? scaleX * clipScaleX : scaleX, scaleY = scaleY ? scaleY * clipScaleY : clipScaleY;
+            if (clipScaleX) scaleX = scaleX ? scaleX * clipScaleX : clipScaleX, scaleY = scaleY ? scaleY * clipScaleY : clipScaleY;
         }
         break;
 
@@ -1874,17 +1899,14 @@ function getPatternData(paint, box, image) {
         if (scaleX) fillOrFitMode(data, box, tempImage.x, tempImage.y, scaleX, scaleY, rotation);
     }
     if (!data.transform) {
-        if (box.x || box.y) {
-            data.transform = get$2();
-            translate(data.transform, box.x, box.y);
-        }
+        if (box.x || box.y) translate(data.transform = get$2(), box.x, box.y);
     }
-    if (scaleX && mode !== "stretch") {
+    data.width = width;
+    data.height = height;
+    if (scaleX) {
         data.scaleX = scaleX;
         data.scaleY = scaleY;
     }
-    data.width = width;
-    data.height = height;
     if (opacity) data.opacity = opacity;
     if (filters) data.filters = filters;
     if (repeat) data.repeat = core.isString(repeat) ? repeat === "x" ? "repeat-x" : "repeat-y" : "repeat";
@@ -2016,7 +2038,7 @@ function ignoreRender(ui, value) {
 
 const {get: get$1, scale: scale, copy: copy$1} = core.MatrixHelper;
 
-const {floor: floor, ceil: ceil, max: max$1, abs: abs} = Math;
+const {floor: floor, ceil: ceil, max: max$1, abs: abs$1} = Math;
 
 function createPattern(ui, paint, pixelRatio) {
     let {scaleX: scaleX, scaleY: scaleY} = ui.getRenderScaleData(true, paint.scaleFixed);
@@ -2027,8 +2049,8 @@ function createPattern(ui, paint, pixelRatio) {
         scaleX *= pixelRatio;
         scaleY *= pixelRatio;
         if (sx) {
-            sx = abs(sx);
-            sy = abs(sy);
+            sx = abs$1(sx);
+            sy = abs$1(sy);
             imageMatrix = get$1();
             copy$1(imageMatrix, transform);
             scale(imageMatrix, 1 / sx, 1 / sy);
@@ -2203,6 +2225,7 @@ const PaintImageModule = {
     recycleImage: recycleImage,
     createData: createData,
     getPatternData: getPatternData,
+    stretchMode: stretchMode,
     fillOrFitMode: fillOrFitMode,
     clipMode: clipMode,
     repeatMode: repeatMode
@@ -2313,7 +2336,7 @@ const PaintGradientModule = {
     getTransform: getTransform
 };
 
-const {copy: copy, move: move, toOffsetOutBounds: toOffsetOutBounds$1} = core.BoundsHelper, {max: max} = Math;
+const {copy: copy, move: move, toOffsetOutBounds: toOffsetOutBounds$1} = core.BoundsHelper, {max: max, abs: abs} = Math;
 
 const tempBounds = {}, tempMatrix = new core.Matrix;
 
@@ -2333,8 +2356,8 @@ function shadow(ui, current, shape) {
             const sx = Math.abs(nowWorld.scaleX);
             if (sx > 1) otherScale = 1 / sx;
         }
-        other.setWorldShadow(offsetOutBounds$1.offsetX + item.x * scaleX * otherScale, offsetOutBounds$1.offsetY + item.y * scaleY * otherScale, item.blur * scaleX * otherScale, draw.ColorConvert.string(item.color));
-        transform = getShadowTransform(ui, other, shape, item, offsetOutBounds$1, otherScale);
+        other.setWorldShadow(offsetOutBounds$1.offsetX + (item.x || 0) * scaleX * otherScale, offsetOutBounds$1.offsetY + (item.y || 0) * scaleY * otherScale, (item.blur || 0) * scaleX * otherScale, draw.ColorConvert.string(item.color));
+        transform = draw.Effect.getShadowTransform(ui, other, shape, item, offsetOutBounds$1, otherScale);
         if (transform) other.setTransform(transform);
         drawWorldShadow(other, offsetOutBounds$1, shape);
         if (transform) other.resetTransform();
@@ -2357,7 +2380,7 @@ function shadow(ui, current, shape) {
 function getShadowRenderSpread(_ui, shadow) {
     let top = 0, right = 0, bottom = 0, left = 0, x, y, spread, blur;
     shadow.forEach(item => {
-        x = item.x || 0, y = item.y || 0, spread = item.spread || 0, blur = (item.blur || 0) * 1.5;
+        x = item.x || 0, y = item.y || 0, blur = (item.blur || 0) * 1.5, spread = abs(item.spread || 0);
         top = max(top, spread + blur - y);
         right = max(right, spread + blur + x);
         bottom = max(bottom, spread + blur + y);
@@ -2410,8 +2433,8 @@ function innerShadow(ui, current, shape) {
             if (sx > 1) otherScale = 1 / sx;
         }
         other.save();
-        other.setWorldShadow(offsetOutBounds.offsetX + item.x * scaleX * otherScale, offsetOutBounds.offsetY + item.y * scaleY * otherScale, item.blur * scaleX * otherScale);
-        transform = getShadowTransform(ui, other, shape, item, offsetOutBounds, otherScale, true);
+        other.setWorldShadow(offsetOutBounds.offsetX + (item.x || 0) * scaleX * otherScale, offsetOutBounds.offsetY + (item.y || 0) * scaleY * otherScale, (item.blur || 0) * scaleX * otherScale);
+        transform = draw.Effect.getShadowTransform(ui, other, shape, item, offsetOutBounds, otherScale, true);
         if (transform) other.setTransform(transform);
         drawWorldShadow(other, offsetOutBounds, shape);
         other.restore();
@@ -3047,6 +3070,7 @@ const TextConvertModule = {
 };
 
 function string(color, opacity) {
+    if (!color) return "#000";
     const doOpacity = core.isNumber(opacity) && opacity < 1;
     if (core.isString(color)) {
         if (doOpacity && draw.ColorConvert.object) color = draw.ColorConvert.object(color); else return color;

package/dist/web.esm.js

@@ -8,7 +8,7 @@ import { InteractionHelper, InteractionBase, Cursor, HitCanvasManager } from "@l
 
 export * from "@leafer-ui/core";
 
-import { PaintImage, Paint, ColorConvert, PaintGradient, Export, Group, TextConvert, Effect } from "@leafer-ui/draw";
+import { PaintImage, Paint, ColorConvert, PaintGradient, Export, Effect, Group, TextConvert } from "@leafer-ui/draw";
 
 const debug$2 = Debug.get("LeaferCanvas");
 
@@ -880,7 +880,7 @@ class Picker {
             children: [ target ]
         } : target);
         const {list: list} = this.findList;
-        const leaf = this.getBestMatchLeaf(list, options.bottomList, ignoreHittable);
+        const leaf = this.getBestMatchLeaf(list, options.bottomList, ignoreHittable, !!options.findList);
         const path = ignoreHittable ? this.getPath(leaf) : this.getHitablePath(leaf);
         this.clear();
         return through ? {
@@ -895,7 +895,7 @@ class Picker {
     hitPoint(hitPoint, hitRadius, options) {
         return !!this.getByPoint(hitPoint, hitRadius, options).target;
     }
-    getBestMatchLeaf(list, bottomList, ignoreHittable) {
+    getBestMatchLeaf(list, bottomList, ignoreHittable, allowNull) {
         const findList = this.findList = new LeafList;
         if (list.length) {
             let find;
@@ -926,15 +926,27 @@ class Picker {
                 if (findList.length) return findList.list[0];
             }
         }
+        if (allowNull) return null;
         return ignoreHittable ? list[0] : list.find(item => LeafHelper.worldHittable(item));
     }
     getPath(leaf) {
-        const path = new LeafList;
+        const path = new LeafList, syncList = [], {target: target} = this;
         while (leaf) {
+            if (leaf.syncEventer) syncList.push(leaf.syncEventer);
             path.add(leaf);
             leaf = leaf.parent;
+            if (leaf === target) break;
+        }
+        if (syncList.length) {
+            syncList.forEach(item => {
+                while (item) {
+                    if (item.__.hittable) path.add(item);
+                    item = item.parent;
+                    if (item === target) break;
+                }
+            });
         }
-        if (this.target) path.add(this.target);
+        if (target) path.add(target);
         return path;
     }
     getHitablePath(leaf) {
@@ -1738,7 +1750,14 @@ const PaintModule = {
 
 let origin = {}, tempMatrix$1 = getMatrixData();
 
-const {get: get$3, rotateOfOuter: rotateOfOuter$1, translate: translate$1, scaleOfOuter: scaleOfOuter$1, multiplyParent: multiplyParent, scale: scaleHelper, rotate: rotate, skew: skewHelper} = MatrixHelper;
+const {get: get$3, set: set, rotateOfOuter: rotateOfOuter$1, translate: translate$1, scaleOfOuter: scaleOfOuter$1, multiplyParent: multiplyParent, scale: scaleHelper, rotate: rotate, skew: skewHelper} = MatrixHelper;
+
+function stretchMode(data, box, scaleX, scaleY) {
+    const transform = get$3();
+    translate$1(transform, box.x, box.y);
+    if (scaleX) scaleHelper(transform, scaleX, scaleY);
+    data.transform = transform;
+}
 
 function fillOrFitMode(data, box, x, y, scaleX, scaleY, rotation) {
     const transform = get$3();
@@ -1755,8 +1774,11 @@ function clipMode(data, box, x, y, scaleX, scaleY, rotation, skew, clipScaleX, c
     const transform = get$3();
     layout(transform, box, x, y, scaleX, scaleY, rotation, skew);
     if (clipScaleX) {
-        tempMatrix$1.a = clipScaleX, tempMatrix$1.d = clipScaleY;
-        multiplyParent(transform, tempMatrix$1);
+        if (rotation || skew) {
+            set(tempMatrix$1);
+            scaleOfOuter$1(tempMatrix$1, box, clipScaleX, clipScaleY);
+            multiplyParent(transform, tempMatrix$1);
+        } else scaleOfOuter$1(transform, box, clipScaleX, clipScaleY);
     }
     data.transform = transform;
 }
@@ -1852,7 +1874,10 @@ function getPatternData(paint, box, image) {
     if (offset) PointHelper.move(tempImage, offset);
     switch (mode) {
       case "stretch":
-        if (!sameBox) width = box.width, height = box.height;
+        if (!sameBox) {
+            scaleX = box.width / width, scaleY = box.height / height;
+            stretchMode(data, box, scaleX, scaleY);
+        }
         break;
 
       case "normal":
@@ -1861,7 +1886,7 @@ function getPatternData(paint, box, image) {
             let clipScaleX, clipScaleY;
             if (clipSize) clipScaleX = box.width / clipSize.width, clipScaleY = box.height / clipSize.height;
             clipMode(data, box, tempImage.x, tempImage.y, scaleX, scaleY, rotation, skew, clipScaleX, clipScaleY);
-            if (clipScaleX) scaleX = scaleX ? scaleX * clipScaleX : scaleX, scaleY = scaleY ? scaleY * clipScaleY : clipScaleY;
+            if (clipScaleX) scaleX = scaleX ? scaleX * clipScaleX : clipScaleX, scaleY = scaleY ? scaleY * clipScaleY : clipScaleY;
         }
         break;
 
@@ -1878,17 +1903,14 @@ function getPatternData(paint, box, image) {
         if (scaleX) fillOrFitMode(data, box, tempImage.x, tempImage.y, scaleX, scaleY, rotation);
     }
     if (!data.transform) {
-        if (box.x || box.y) {
-            data.transform = get$2();
-            translate(data.transform, box.x, box.y);
-        }
+        if (box.x || box.y) translate(data.transform = get$2(), box.x, box.y);
     }
-    if (scaleX && mode !== "stretch") {
+    data.width = width;
+    data.height = height;
+    if (scaleX) {
         data.scaleX = scaleX;
         data.scaleY = scaleY;
     }
-    data.width = width;
-    data.height = height;
     if (opacity) data.opacity = opacity;
     if (filters) data.filters = filters;
     if (repeat) data.repeat = isString(repeat) ? repeat === "x" ? "repeat-x" : "repeat-y" : "repeat";
@@ -2020,7 +2042,7 @@ function ignoreRender(ui, value) {
 
 const {get: get$1, scale: scale, copy: copy$1} = MatrixHelper;
 
-const {floor: floor, ceil: ceil, max: max$1, abs: abs} = Math;
+const {floor: floor, ceil: ceil, max: max$1, abs: abs$1} = Math;
 
 function createPattern(ui, paint, pixelRatio) {
     let {scaleX: scaleX, scaleY: scaleY} = ui.getRenderScaleData(true, paint.scaleFixed);
@@ -2031,8 +2053,8 @@ function createPattern(ui, paint, pixelRatio) {
         scaleX *= pixelRatio;
         scaleY *= pixelRatio;
         if (sx) {
-            sx = abs(sx);
-            sy = abs(sy);
+            sx = abs$1(sx);
+            sy = abs$1(sy);
             imageMatrix = get$1();
             copy$1(imageMatrix, transform);
             scale(imageMatrix, 1 / sx, 1 / sy);
@@ -2207,6 +2229,7 @@ const PaintImageModule = {
     recycleImage: recycleImage,
     createData: createData,
     getPatternData: getPatternData,
+    stretchMode: stretchMode,
     fillOrFitMode: fillOrFitMode,
     clipMode: clipMode,
     repeatMode: repeatMode
@@ -2317,7 +2340,7 @@ const PaintGradientModule = {
     getTransform: getTransform
 };
 
-const {copy: copy, move: move, toOffsetOutBounds: toOffsetOutBounds$1} = BoundsHelper, {max: max} = Math;
+const {copy: copy, move: move, toOffsetOutBounds: toOffsetOutBounds$1} = BoundsHelper, {max: max, abs: abs} = Math;
 
 const tempBounds = {}, tempMatrix = new Matrix;
 
@@ -2337,8 +2360,8 @@ function shadow(ui, current, shape) {
             const sx = Math.abs(nowWorld.scaleX);
             if (sx > 1) otherScale = 1 / sx;
         }
-        other.setWorldShadow(offsetOutBounds$1.offsetX + item.x * scaleX * otherScale, offsetOutBounds$1.offsetY + item.y * scaleY * otherScale, item.blur * scaleX * otherScale, ColorConvert.string(item.color));
-        transform = getShadowTransform(ui, other, shape, item, offsetOutBounds$1, otherScale);
+        other.setWorldShadow(offsetOutBounds$1.offsetX + (item.x || 0) * scaleX * otherScale, offsetOutBounds$1.offsetY + (item.y || 0) * scaleY * otherScale, (item.blur || 0) * scaleX * otherScale, ColorConvert.string(item.color));
+        transform = Effect.getShadowTransform(ui, other, shape, item, offsetOutBounds$1, otherScale);
         if (transform) other.setTransform(transform);
         drawWorldShadow(other, offsetOutBounds$1, shape);
         if (transform) other.resetTransform();
@@ -2361,7 +2384,7 @@ function shadow(ui, current, shape) {
 function getShadowRenderSpread(_ui, shadow) {
     let top = 0, right = 0, bottom = 0, left = 0, x, y, spread, blur;
     shadow.forEach(item => {
-        x = item.x || 0, y = item.y || 0, spread = item.spread || 0, blur = (item.blur || 0) * 1.5;
+        x = item.x || 0, y = item.y || 0, blur = (item.blur || 0) * 1.5, spread = abs(item.spread || 0);
         top = max(top, spread + blur - y);
         right = max(right, spread + blur + x);
         bottom = max(bottom, spread + blur + y);
@@ -2414,8 +2437,8 @@ function innerShadow(ui, current, shape) {
             if (sx > 1) otherScale = 1 / sx;
         }
         other.save();
-        other.setWorldShadow(offsetOutBounds.offsetX + item.x * scaleX * otherScale, offsetOutBounds.offsetY + item.y * scaleY * otherScale, item.blur * scaleX * otherScale);
-        transform = getShadowTransform(ui, other, shape, item, offsetOutBounds, otherScale, true);
+        other.setWorldShadow(offsetOutBounds.offsetX + (item.x || 0) * scaleX * otherScale, offsetOutBounds.offsetY + (item.y || 0) * scaleY * otherScale, (item.blur || 0) * scaleX * otherScale);
+        transform = Effect.getShadowTransform(ui, other, shape, item, offsetOutBounds, otherScale, true);
         if (transform) other.setTransform(transform);
         drawWorldShadow(other, offsetOutBounds, shape);
         other.restore();
@@ -3051,6 +3074,7 @@ const TextConvertModule = {
 };
 
 function string(color, opacity) {
+    if (!color) return "#000";
     const doOpacity = isNumber(opacity) && opacity < 1;
     if (isString(color)) {
         if (doOpacity && ColorConvert.object) color = ColorConvert.object(color); else return color;