leafer-ui 1.0.0-rc.26 → 1.0.0-rc.27

package/README.md

@@ -4,14 +4,18 @@ Leafer UI 是基于 [Leafer](https://github.com/leaferjs/leafer) 开发的一套
 
 提供了常用的 UI 绘图组件，和开箱即用的功能，方便与 Figma、Sketch 等产品进行数据交换，并为跨平台开发提供了统一、丰富的交互事件，如拖拽、旋转、缩放手势等。
 
-1.0.0-rc.26 已发布 🎉🎉🎉，查看 [更新日志](https://leaferjs.com/ui/update/)。
+1.0.0-rc.27 已发布 🎉🎉🎉，查看 [更新日志](https://leaferjs.com/ui/update/)。
 
 目前产品已经逐步稳定，正式版即将到来，感谢所有参与的朋友们～
 
-想马上开始使用，请查看 [快速安装](https://leaferjs.com/ui/guide/start.html)， 有问题、建议可以 [提交到这里](https://github.com/leaferjs/ui/issues)，或加入[技术交流群](https://leaferjs.com/ui/guide/)。
-
 如果您仅需绘图功能，推荐更轻量的 [leafer-draw](https://leaferjs.com/ui/guide/type/draw/start.html) （46KB min+gzip）。
 
+如果您想编辑控制图形，需安装 [图形编辑器](https://leaferjs.com/guide/plugin/editor/index.md) 插件。
+
+## 互动交流
+
+想马上开始使用，请查看 [快速安装](https://leaferjs.com/ui/guide/start.html)， 有问题、建议可以 [提交到这里](https://github.com/leaferjs/ui/issues)，或加入 [技术交流群](https://leaferjs.com/#contact)。
+
 🌟 记得前往 [GitHub](https://github.com/leaferjs/ui) / [Gitee](https://gitee.com/leaferjs/ui) 点亮你的 [小星星](https://github.com/leaferjs/ui) ✨ ✨ ✨
 
 ## 使命与愿景

package/dist/web.js

@@ -5192,6 +5192,9 @@ var LeaferUI = (function (exports) {
         }
         set(_data) { }
         get(_name) { return undefined; }
+        setAttr(name, value) { this[name] = value; }
+        getAttr(name) { return this[name]; }
+        getComputedAttr(name) { return this.__[name]; }
         toJSON() {
             return this.__.__getInputData();
         }
@@ -5752,7 +5755,7 @@ var LeaferUI = (function (exports) {
         }
     }
 
-    const version = "1.0.0-rc.26";
+    const version = "1.0.0-rc.27";
     const inviteCode = {};
 
     const debug$7 = Debug.get('LeaferCanvas');
@@ -7227,6 +7230,8 @@ var LeaferUI = (function (exports) {
                 this.__drawRenderPath(canvas);
                 if (fill && !ignoreFill)
                     this.__.__pixelFill ? 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);
             }
@@ -7649,6 +7654,9 @@ var LeaferUI = (function (exports) {
     __decorate([
         dataType()
     ], exports.UI.prototype, "disabledStyle", void 0);
+    __decorate([
+        dataType({})
+    ], exports.UI.prototype, "data", void 0);
     __decorate([
         rewrite(exports.Leaf.prototype.reset)
     ], exports.UI.prototype, "reset", null);
@@ -8491,7 +8499,7 @@ var LeaferUI = (function (exports) {
             super(data);
             this.canvas = Creator.canvas(this.__);
             this.context = this.canvas.context;
-            this.__.__drawAfterFill = true;
+            this.__.__isCanvas = this.__.__drawAfterFill = true;
         }
         draw(ui, offset, scale, rotation) {
             ui.__layout.update();
@@ -8559,9 +8567,6 @@ var LeaferUI = (function (exports) {
     __decorate([
         resizeType()
     ], exports.Canvas.prototype, "contextSettings", void 0);
-    __decorate([
-        hitType('all')
-    ], exports.Canvas.prototype, "hitFill", void 0);
     exports.Canvas = __decorate([
         registerUI()
     ], exports.Canvas);
@@ -9028,20 +9033,32 @@ var LeaferUI = (function (exports) {
                 move.x = 0;
             return move;
         }
-        static getMoveInDragBounds(box, dragBounds, move, change) {
-            const x = box.x + move.x, y = box.y + move.y;
-            const right = x + box.width, bottom = y + box.height;
+        static getMoveInDragBounds(childBox, dragBounds, move, change) {
+            const x = childBox.x + move.x, y = childBox.y + move.y;
+            const right = x + childBox.width, bottom = y + childBox.height;
             const boundsRight = dragBounds.x + dragBounds.width, boundsBottom = dragBounds.y + dragBounds.height;
             if (!change)
                 move = Object.assign({}, move);
-            if (x < dragBounds.x)
-                move.x += dragBounds.x - x;
-            else if (right > boundsRight)
-                move.x += boundsRight - right;
-            if (y < dragBounds.y)
-                move.y += dragBounds.y - y;
-            else if (bottom > boundsBottom)
-                move.y += boundsBottom - bottom;
+            if (BoundsHelper.includes(childBox, dragBounds)) {
+                if (x > dragBounds.x)
+                    move.x += dragBounds.x - x;
+                else if (right < boundsRight)
+                    move.x += boundsRight - right;
+                if (y > dragBounds.y)
+                    move.y += dragBounds.y - y;
+                else if (bottom < boundsBottom)
+                    move.y += boundsBottom - bottom;
+            }
+            else {
+                if (x < dragBounds.x)
+                    move.x += dragBounds.x - x;
+                else if (right > boundsRight)
+                    move.x += boundsRight - right;
+                if (y < dragBounds.y)
+                    move.y += dragBounds.y - y;
+                else if (bottom > boundsBottom)
+                    move.y += boundsBottom - bottom;
+            }
             return move;
         }
         getPageMove(total) {
@@ -10161,27 +10178,6 @@ var LeaferUI = (function (exports) {
         }
     }
 
-    const canvas$1 = LeaferCanvasBase.prototype;
-    canvas$1.hitFill = function (point, fillRule) {
-        return fillRule ? this.context.isPointInPath(point.x, point.y, fillRule) : this.context.isPointInPath(point.x, point.y);
-    };
-    canvas$1.hitStroke = function (point, strokeWidth) {
-        this.strokeWidth = strokeWidth;
-        return this.context.isPointInStroke(point.x, point.y);
-    };
-    canvas$1.hitPixel = function (radiusPoint, offset, scale = 1) {
-        let { x, y, radiusX, radiusY } = radiusPoint;
-        if (offset)
-            x -= offset.x, y -= offset.y;
-        tempBounds$1.set(x - radiusX, y - radiusY, radiusX * 2, radiusY * 2).scale(scale).ceil();
-        const { data } = this.context.getImageData(tempBounds$1.x, tempBounds$1.y, tempBounds$1.width, tempBounds$1.height);
-        for (let i = 0, len = data.length; i < len; i += 4) {
-            if (data[i + 3] > 0)
-                return true;
-        }
-        return data[3] > 0;
-    };
-
     const { toInnerRadiusPointOf, copy: copy$2, setRadius } = PointHelper;
     const inner = {};
     const leaf = exports.Leaf.prototype;
@@ -10218,7 +10214,7 @@ var LeaferUI = (function (exports) {
     const ui$2 = exports.UI.prototype;
     ui$2.__updateHitCanvas = function () {
         const data = this.__, { hitCanvasManager } = this.leafer;
-        const isHitPixelFill = data.__pixelFill && data.hitFill === 'pixel';
+        const isHitPixelFill = (data.__pixelFill || data.__isCanvas) && data.hitFill === 'pixel';
         const isHitPixelStroke = data.__pixelStroke && data.hitStroke === 'pixel';
         const isHitPixel = isHitPixelFill || isHitPixelStroke;
         if (!this.__hitCanvas)
@@ -10250,11 +10246,11 @@ var LeaferUI = (function (exports) {
         if (data.__isHitPixel && this.__hitPixel(inner))
             return true;
         const { hitFill } = data;
-        const needHitFillPath = (data.fill && hitFill && hitFill !== 'none') || hitFill === 'all';
+        const needHitFillPath = ((data.fill || data.__isCanvas) && (hitFill === 'path' || (hitFill === 'pixel' && !(data.__pixelFill || data.__isCanvas)))) || hitFill === 'all';
         if (needHitFillPath && this.__hitFill(inner))
             return true;
         const { hitStroke, __strokeWidth } = data;
-        const needHitStrokePath = (data.stroke && hitFill && hitStroke !== 'none') || hitStroke === 'all';
+        const needHitStrokePath = (data.stroke && (hitStroke === 'path' || (hitStroke === 'pixel' && !data.__pixelStroke))) || hitStroke === 'all';
         if (!needHitFillPath && !needHitStrokePath)
             return false;
         const radiusWidth = inner.radiusX * 2;
@@ -10286,7 +10282,7 @@ var LeaferUI = (function (exports) {
     const ui$1 = new exports.UI();
     const rect = exports.Rect.prototype;
     rect.__updateHitCanvas = function () {
-        if (this.stroke || this.cornerRadius || (this.fill && this.hitFill === 'pixel') || this.hitStroke === 'all')
+        if (this.stroke || this.cornerRadius || ((this.fill || this.__.__isCanvas) && this.hitFill === 'pixel') || this.hitStroke === 'all')
             ui$1.__updateHitCanvas.call(this);
         else if (this.__hitCanvas)
             this.__hitCanvas = null;
@@ -10309,6 +10305,27 @@ var LeaferUI = (function (exports) {
         return this.leafer ? this.leafer.selector.getByPoint(hitPoint, options.hitRadius || 0, Object.assign(Object.assign({}, options), { target: this })) : null;
     };
 
+    const canvas$1 = LeaferCanvasBase.prototype;
+    canvas$1.hitFill = function (point, fillRule) {
+        return fillRule ? this.context.isPointInPath(point.x, point.y, fillRule) : this.context.isPointInPath(point.x, point.y);
+    };
+    canvas$1.hitStroke = function (point, strokeWidth) {
+        this.strokeWidth = strokeWidth;
+        return this.context.isPointInStroke(point.x, point.y);
+    };
+    canvas$1.hitPixel = function (radiusPoint, offset, scale = 1) {
+        let { x, y, radiusX, radiusY } = radiusPoint;
+        if (offset)
+            x -= offset.x, y -= offset.y;
+        tempBounds$1.set(x - radiusX, y - radiusY, radiusX * 2, radiusY * 2).scale(scale).ceil();
+        const { data } = this.context.getImageData(tempBounds$1.x, tempBounds$1.y, tempBounds$1.width || 1, tempBounds$1.height || 1);
+        for (let i = 0, len = data.length; i < len; i += 4) {
+            if (data[i + 3] > 0)
+                return true;
+        }
+        return data[3] > 0;
+    };
+
     const PointerEventHelper = {
         convert(e, local) {
             const base = InteractionHelper.getBase(e);