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

package/dist/web.module.js

@@ -5189,6 +5189,9 @@ let Leaf = class Leaf {
     }
     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();
     }
@@ -5749,7 +5752,7 @@ class LeafLevelList {
     }
 }
 
-const version = "1.0.0-rc.26";
+const version = "1.0.0-rc.27";
 const inviteCode = {};
 
 const debug$7 = Debug.get('LeaferCanvas');
@@ -7224,6 +7227,8 @@ const UIRender = {
             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);
         }
@@ -7646,6 +7651,9 @@ __decorate([
 __decorate([
     dataType()
 ], UI.prototype, "disabledStyle", void 0);
+__decorate([
+    dataType({})
+], UI.prototype, "data", void 0);
 __decorate([
     rewrite(Leaf.prototype.reset)
 ], UI.prototype, "reset", null);
@@ -8488,7 +8496,7 @@ let Canvas = class Canvas extends Rect {
         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();
@@ -8556,9 +8564,6 @@ __decorate([
 __decorate([
     resizeType()
 ], Canvas.prototype, "contextSettings", void 0);
-__decorate([
-    hitType('all')
-], Canvas.prototype, "hitFill", void 0);
 Canvas = __decorate([
     registerUI()
 ], Canvas);
@@ -9025,20 +9030,32 @@ let DragEvent = class DragEvent extends PointerEvent {
             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) {
@@ -10158,27 +10175,6 @@ class HitCanvasManager extends CanvasManager {
     }
 }
 
-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 = Leaf.prototype;
@@ -10215,7 +10211,7 @@ const matrix = new Matrix();
 const ui$2 = 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)
@@ -10247,11 +10243,11 @@ ui$2.__hit = function (inner) {
     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;
@@ -10283,7 +10279,7 @@ ui$2.__hit = function (inner) {
 const ui$1 = new UI();
 const rect = 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;
@@ -10306,6 +10302,27 @@ group.pick = function (hitPoint, options) {
     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);