heitu 1.0.6 → 1.0.8

package/dist/canvas/core/shapes/animate.d.ts

@@ -1,5 +1,5 @@
 export type AnimateCartoonConfig = {
-    duration?: number;
+    duration: number;
     delay?: number;
     during?: (percent: number, newState: Record<string, string | number>) => void;
     done?: () => void;
@@ -11,10 +11,18 @@ export type AnimateCartoonConfig = {
     easing?: any;
     iterationCount?: number;
 };
-declare abstract class Animate {
+declare class Animate {
     rafTimer: number | null;
+    startTime: number | null;
+    startProp: Record<string, any>;
+    targetProp: Record<string, any>;
+    cfg: AnimateCartoonConfig;
+    constructor(startProp?: Record<string, any>, targetProp?: Record<string, any>, cfg?: Partial<AnimateCartoonConfig>);
+    forward: boolean;
+    queue: any;
     start(): void;
     checkEdge(): void;
     stop(): void;
+    pushQueue(callback: any): void;
 }
 export default Animate;

package/dist/canvas/core/shapes/animate.js

@@ -1,31 +1,104 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
 function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { calcTargetValue, easingFuncs } from "../../utils";
+var defaultCfg = {
+  duration: 1000,
+  easing: 'linear',
+  iterationCount: 1
+};
 var Animate = /*#__PURE__*/function () {
   function Animate() {
+    var startProp = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    var targetProp = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    var cfg = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
     _classCallCheck(this, Animate);
     _defineProperty(this, "rafTimer", null);
+    _defineProperty(this, "startTime", null);
+    _defineProperty(this, "startProp", void 0);
+    _defineProperty(this, "targetProp", void 0);
+    _defineProperty(this, "cfg", void 0);
+    _defineProperty(this, "forward", true);
+    // 正向动画
+    _defineProperty(this, "queue", []);
+    this.startProp = startProp;
+    this.targetProp = targetProp;
+    this.cfg = _objectSpread(_objectSpread({}, defaultCfg), cfg);
   }
   _createClass(Animate, [{
     key: "start",
     value:
     // 开始
-    function start() {}
+    function start() {
+      var _this = this;
+      var _this$cfg = this.cfg,
+        duration = _this$cfg.duration,
+        easing = _this$cfg.easing,
+        during = _this$cfg.during,
+        iterationCount = _this$cfg.iterationCount;
+      var keys = Object.keys(this.targetProp);
+      var rafCb = function rafCb(timestamp) {
+        if (!_this.startTime) {
+          _this.startTime = timestamp;
+        }
+        var elapsedTimeRatio = easingFuncs[easing](Math.min((timestamp - _this.startTime) / duration, 1));
+        if (_this.forward === false) {
+          elapsedTimeRatio = 1 - elapsedTimeRatio;
+        }
+        var currentProp = {};
+        keys.forEach(function (propKey) {
+          var targetValue = calcTargetValue(_this.startProp[propKey], _this.targetProp[propKey], elapsedTimeRatio);
+          currentProp[propKey] = targetValue;
+        });
+        if (during) {
+          during(elapsedTimeRatio, currentProp);
+        }
+        var nextCondition = _this.forward ? elapsedTimeRatio < 1 : 0 < elapsedTimeRatio;
+        if (nextCondition) {
+          _this.rafTimer = requestAnimationFrame(rafCb);
+        } else {
+          _this.queue = [];
+          _this.stop();
+        }
+        if (_this.queue.length > 0) {
+          _this.queue.forEach(function (item) {
+            item(currentProp, elapsedTimeRatio);
+          });
+        }
+        var endCondition = _this.forward ? elapsedTimeRatio === 1 : elapsedTimeRatio === 0;
+        if (endCondition) {
+          if (iterationCount === Infinity) {
+            _this.forward = !_this.forward;
+            _this.startTime = null;
+            _this.start();
+          }
+        }
+      };
+      this.rafTimer = requestAnimationFrame(rafCb);
+    }
     // 检查边缘
   }, {
     key: "checkEdge",
     value: function checkEdge() {}
     // 更新
+    // @ts-ignore
     // onUpdate(currentProp, elapsedTimeRatio: number) {}
     // 停止
   }, {
     key: "stop",
     value: function stop() {
-      // cancelAnimationFrame(this.rafTimer);
+      if (this.rafTimer) cancelAnimationFrame(this.rafTimer);
+    }
+  }, {
+    key: "pushQueue",
+    value: function pushQueue(callback) {
+      this.queue.push(callback);
     }
   }]);
   return Animate;

package/dist/canvas/core/shapes/circle.d.ts

@@ -33,6 +33,10 @@ declare class Circle extends Node {
     index: number;
     path2D: Path2D | null;
     border: 0 | 1 | 2;
+    shadowColor: string;
+    shadowBlur: number;
+    shadowOffsetY: number;
+    shadowOffsetX: number;
     constructor(config: ICircle);
     deg2rad(deg: number): number;
     getPointOnArc(x0: number, y0: number, r: number, deg: number): {

package/dist/canvas/core/shapes/circle.js

@@ -19,7 +19,6 @@ import Node from "./node";
 var Circle = /*#__PURE__*/function (_Node) {
   _inherits(Circle, _Node);
   var _super = _createSuper(Circle);
-  // 0 填充 1  只有边框  2 边框和填充
   function Circle(config) {
     var _this;
     _classCallCheck(this, Circle);
@@ -41,6 +40,11 @@ var Circle = /*#__PURE__*/function (_Node) {
     _defineProperty(_assertThisInitialized(_this), "index", void 0);
     _defineProperty(_assertThisInitialized(_this), "path2D", void 0);
     _defineProperty(_assertThisInitialized(_this), "border", void 0);
+    // 0 填充 1  只有边框  2 边框和填充
+    _defineProperty(_assertThisInitialized(_this), "shadowColor", void 0);
+    _defineProperty(_assertThisInitialized(_this), "shadowBlur", 0);
+    _defineProperty(_assertThisInitialized(_this), "shadowOffsetY", 0);
+    _defineProperty(_assertThisInitialized(_this), "shadowOffsetX", 0);
     _this.x = 10;
     _this.y = 10;
     _this.radius = 8;
@@ -54,6 +58,7 @@ var Circle = /*#__PURE__*/function (_Node) {
     _this.arc = false;
     _this.index = 0;
     _this.path2D = null;
+    _this.shadowColor = 'transparent';
     forIn(config, function (value, key) {
       if (value) _assertThisInitialized(_this)[key] = value;
     });
@@ -79,7 +84,7 @@ var Circle = /*#__PURE__*/function (_Node) {
   }, {
     key: "calcWholeRingD",
     value: function calcWholeRingD() {
-      var outerM_y = this.x - this.radius;
+      var outerM_y = this.y - this.radius;
       var outerM = "M ".concat(this.x, " ").concat(outerM_y);
       var outerA = "A ".concat(this.radius, " ").concat(this.radius, " 0 1 1 ").concat(this.x - 0.01, " ").concat(outerM_y);
       var innerM_y = this.y - this.innerRadius;
@@ -111,6 +116,15 @@ var Circle = /*#__PURE__*/function (_Node) {
     value: function draw(ctx) {
       var isWholeArc = this.startAngle === 0 && this.endAngle === 360; // 是否是整圆
       var circlePath;
+      if (this.shadowColor) {
+        // 设置阴影属性
+        ctx.shadowColor = this.shadowColor; // 阴影颜色
+        ctx.shadowBlur = this.shadowBlur; // 阴影模糊程度
+        ctx.shadowOffsetX = this.shadowOffsetX; // 阴影的水平偏移
+        ctx.shadowOffsetY = this.shadowOffsetY; // 阴影的垂直偏移
+      } else {
+        ctx.shadowColor = 'transparent'; // 取消阴影效果
+      }
       switch (this.border) {
         case 0:
           circlePath = new Path2D(this.calcRingD(isWholeArc));

package/dist/canvas/core/shapes/custom.d.ts

@@ -19,6 +19,10 @@ declare class Custom extends Node {
     index: number;
     path2D: Path2D | null;
     parent: null;
+    shadowColor: string;
+    shadowBlur: number;
+    shadowOffsetY: number;
+    shadowOffsetX: number;
     constructor(config: ICustom);
     draw(ctx: CanvasRenderingContext2D): this | undefined;
     inScope(evt: MouseEvent, ctx: CanvasRenderingContext2D): boolean | undefined;

package/dist/canvas/core/shapes/custom.js

@@ -34,6 +34,10 @@ var Custom = /*#__PURE__*/function (_Node) {
     _defineProperty(_assertThisInitialized(_this), "index", void 0);
     _defineProperty(_assertThisInitialized(_this), "path2D", void 0);
     _defineProperty(_assertThisInitialized(_this), "parent", null);
+    _defineProperty(_assertThisInitialized(_this), "shadowColor", void 0);
+    _defineProperty(_assertThisInitialized(_this), "shadowBlur", 0);
+    _defineProperty(_assertThisInitialized(_this), "shadowOffsetY", 0);
+    _defineProperty(_assertThisInitialized(_this), "shadowOffsetX", 0);
     if (!config.path2D) {
       throw new Error('Mast has key of path2D');
     }
@@ -46,6 +50,7 @@ var Custom = /*#__PURE__*/function (_Node) {
     _this.lineWidth = 1;
     _this.path2D = null;
     _this.index = 0;
+    _this.shadowColor = 'transparent';
     forIn(config, function (value, key) {
       if (value) _assertThisInitialized(_this)[key] = value;
     });
@@ -60,6 +65,15 @@ var Custom = /*#__PURE__*/function (_Node) {
       if (this.lineWidth) ctx.lineWidth = this.lineWidth;
       if (this.lineWidth) ctx.stroke(this.path2D);
       if (this.fillStyle) ctx.fill(this.path2D);
+      if (this.shadowColor) {
+        // 设置阴影属性
+        ctx.shadowColor = this.shadowColor; // 阴影颜色
+        ctx.shadowBlur = this.shadowBlur; // 阴影模糊程度
+        ctx.shadowOffsetX = this.shadowOffsetX; // 阴影的水平偏移
+        ctx.shadowOffsetY = this.shadowOffsetY; // 阴影的垂直偏移
+      } else {
+        ctx.shadowColor = 'transparent'; // 取消阴影效果
+      }
       return this;
     }
   }, {

package/dist/canvas/core/shapes/group.d.ts

@@ -0,0 +1,12 @@
+import Container from '../stage/container';
+declare class Group extends Container {
+    parent: any;
+    name: string;
+    draggable: boolean;
+    constructor(config: {
+        draggable: boolean;
+    });
+    draw(ctx: CanvasRenderingContext2D): this | undefined;
+    inScope(evt: MouseEvent, ctx: CanvasRenderingContext2D): boolean;
+}
+export default Group;

package/dist/canvas/core/shapes/group.js

@@ -0,0 +1,65 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { forIn } from 'lodash-es';
+import Container from "../stage/container";
+var Group = /*#__PURE__*/function (_Container) {
+  _inherits(Group, _Container);
+  var _super = _createSuper(Group);
+  function Group(config) {
+    var _this;
+    _classCallCheck(this, Group);
+    _this = _super.call(this);
+    _defineProperty(_assertThisInitialized(_this), "parent", void 0);
+    _defineProperty(_assertThisInitialized(_this), "name", 'Group');
+    _defineProperty(_assertThisInitialized(_this), "draggable", false);
+    _this.parent = null;
+    forIn(config, function (value, key) {
+      if (value) _assertThisInitialized(_this)[key] = value;
+    });
+    return _this;
+  }
+  _createClass(Group, [{
+    key: "draw",
+    value: function draw(ctx) {
+      if (!ctx) return;
+      // 排序
+      this.sortChildren(function (a, b) {
+        return a.index - b.index;
+      });
+      // 去重 （后面覆盖前面的）
+      this.deduplication();
+      // 绘制
+      this.getChildren().forEach(function (child) {
+        if (ctx && 'draw' in child && typeof child.draw === 'function') {
+          child.draw(ctx);
+        }
+      });
+      return this;
+    }
+  }, {
+    key: "inScope",
+    value: function inScope(evt, ctx) {
+      // 绘制
+      return this.getChildren().some(function (child) {
+        if ('inScope' in child && typeof child.inScope === 'function') {
+          return child.inScope(evt, ctx);
+        }
+        return false;
+      });
+    }
+  }]);
+  return Group;
+}(Container);
+export default Group;

package/dist/canvas/core/shapes/line.d.ts

@@ -11,11 +11,12 @@ interface ILine {
     };
     points?: number[];
     smooth?: boolean;
-    strokeStyle: string;
-    lineWidth: number;
-    lineCap: 'butt' | 'round' | 'square';
-    lineJoin: 'miter' | 'round' | 'miter';
-    index: number;
+    strokeStyle?: string;
+    lineWidth?: number;
+    lineCap?: 'butt' | 'round' | 'square';
+    lineJoin?: 'miter' | 'round' | 'miter';
+    index?: number;
+    lineDash?: [number, number] | [];
 }
 declare class Line extends Node {
     name: string;
@@ -36,6 +37,11 @@ declare class Line extends Node {
     index: number;
     path2D: Path2D | null;
     parent: null;
+    shadowColor: string;
+    shadowBlur: number;
+    shadowOffsetY: number;
+    shadowOffsetX: number;
+    lineDash: [number, number] | [];
     constructor(config: ILine);
     convertToNormalPoints(points: number[]): Vector2d[];
     calcSmoothPath2D(): Path2D;

package/dist/canvas/core/shapes/line.js

@@ -45,6 +45,11 @@ var Line = /*#__PURE__*/function (_Node) {
     _defineProperty(_assertThisInitialized(_this), "index", void 0);
     _defineProperty(_assertThisInitialized(_this), "path2D", void 0);
     _defineProperty(_assertThisInitialized(_this), "parent", null);
+    _defineProperty(_assertThisInitialized(_this), "shadowColor", void 0);
+    _defineProperty(_assertThisInitialized(_this), "shadowBlur", 0);
+    _defineProperty(_assertThisInitialized(_this), "shadowOffsetY", 0);
+    _defineProperty(_assertThisInitialized(_this), "shadowOffsetX", 0);
+    _defineProperty(_assertThisInitialized(_this), "lineDash", []);
     _this.start = {
       x: 10,
       y: 10
@@ -61,6 +66,7 @@ var Line = /*#__PURE__*/function (_Node) {
     _this.smooth = false;
     _this.index = 0;
     _this.path2D = null;
+    _this.shadowColor = 'transparent';
     forIn(config, function (value, key) {
       if (value) _assertThisInitialized(_this)[key] = value;
     });
@@ -122,6 +128,20 @@ var Line = /*#__PURE__*/function (_Node) {
       var path2D = this.smooth ? this.calcSmoothPath2D() : this.calcStraightPath2D();
       if (this.strokeStyle) ctx.strokeStyle = this.strokeStyle;
       if (this.lineWidth) ctx.lineWidth = this.lineWidth;
+      if (this.shadowColor) {
+        // 设置阴影属性
+        ctx.shadowColor = this.shadowColor; // 阴影颜色
+        ctx.shadowBlur = this.shadowBlur; // 阴影模糊程度
+        ctx.shadowOffsetX = this.shadowOffsetX; // 阴影的水平偏移
+        ctx.shadowOffsetY = this.shadowOffsetY; // 阴影的垂直偏移
+      } else {
+        ctx.shadowColor = 'transparent'; // 取消阴影效果
+      }
+      if (this.lineDash.length <= 0) {
+        ctx.setLineDash([]);
+      } else {
+        ctx.setLineDash(this.lineDash);
+      }
       ctx.stroke(path2D);
       return this;
     }

package/dist/canvas/core/shapes/node.d.ts

@@ -23,12 +23,6 @@ declare abstract class Node {
             handler: any;
         }>;
     };
-    shapeEventListeners: {
-        [index: string]: Array<{
-            name: string;
-            handler: any;
-        }>;
-    };
     abstract parent?: Stage | null;
     on<K extends keyof NodeEventMap>(evtStr: K, handler: EventListener<this, NodeEventMap[K]>): this;
     _off(type: string, name?: string, callback?: (params: any) => void): void;
@@ -39,5 +33,6 @@ declare abstract class Node {
         target: Stage;
         currentTarget: any;
     }): void;
+    attr(props: any): void;
 }
 export default Node;

package/dist/canvas/core/shapes/node.js

@@ -12,11 +12,12 @@ function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key i
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 import { isStage } from "../../utils";
+import { isFunction } from "../../../utils/is";
+import { forIn, isEmpty } from 'lodash-es';
 var Node = /*#__PURE__*/function () {
   function Node() {
     _classCallCheck(this, Node);
     _defineProperty(this, "eventListeners", {});
-    _defineProperty(this, "shapeEventListeners", {});
   }
   _createClass(Node, [{
     key: "on",
@@ -35,18 +36,19 @@ var Node = /*#__PURE__*/function () {
           this.eventListeners[baseEvent] = [];
         }
         this.eventListeners[baseEvent].push({
-          name: handler.name || '',
+          name: (handler === null || handler === void 0 ? void 0 : handler.name) || '',
           handler: handler
         });
-        if (this !== null && this !== void 0 && this.parent && isStage(this === null || this === void 0 ? void 0 : this.parent)) {
-          if (!(this !== null && this !== void 0 && this.parent.shapeEventListeners[baseEvent])) {
-            this.parent.shapeEventListeners[baseEvent] = [];
-          }
-          this.parent.shapeEventListeners[baseEvent].push({
-            name: handler.name || '',
-            handler: handler
-          });
-        }
+        // if (this?.parent && isStage(this?.parent)) {
+        //   if (!this?.parent.shapeEventListeners[baseEvent]) {
+        //     this.parent.shapeEventListeners[baseEvent] = [];
+        //   }
+
+        //   this.parent.shapeEventListeners[baseEvent].push({
+        //     name: handler.name || '',
+        //     handler: handler,
+        //   });
+        // }
       }
       return this;
     }
@@ -107,9 +109,19 @@ var Node = /*#__PURE__*/function () {
           item.handler(evt);
         });
       } else {
-        this.shapeEventListeners[eventType].forEach(function (item) {
-          item.handler(evt);
-        });
+        var _currentTarget$eventL;
+        if ((currentTarget === null || currentTarget === void 0 || (_currentTarget$eventL = currentTarget.eventListeners) === null || _currentTarget$eventL === void 0 || (_currentTarget$eventL = _currentTarget$eventL[eventType]) === null || _currentTarget$eventL === void 0 ? void 0 : _currentTarget$eventL.length) > 0) {
+          currentTarget.eventListeners[eventType].forEach(function (item) {
+            item.handler(evt, currentTarget);
+          });
+        }
+        if (currentTarget !== null && currentTarget !== void 0 && currentTarget.draggable) {
+          var _currentTarget$eventL2;
+          if (isFunction(currentTarget === null || currentTarget === void 0 ? void 0 : currentTarget.draggable) && currentTarget.dragging) currentTarget === null || currentTarget === void 0 || currentTarget.draggable(evt, currentTarget);
+          (_currentTarget$eventL2 = currentTarget.eventListeners) === null || _currentTarget$eventL2 === void 0 || (_currentTarget$eventL2 = _currentTarget$eventL2[eventType]) === null || _currentTarget$eventL2 === void 0 || _currentTarget$eventL2.forEach(function (item) {
+            item.handler(evt, currentTarget);
+          });
+        }
       }
     }
   }, {
@@ -126,11 +138,7 @@ var Node = /*#__PURE__*/function () {
         // 将时间推送到最顶层中
         var children = target === null || target === void 0 ? void 0 : target.children;
         for (var i = 0; i < children.length; i++) {
-          if (!this.shapeEventListeners[eventType] || this.shapeEventListeners[eventType].length < 1) {
-            this.shapeEventListeners[eventType] = [];
-          }
-          // @ts-ignore
-          var dragShapes = _toConsumableArray(this.children.filter(function (item) {
+          var dragShapes = _toConsumableArray(children.filter(function (item) {
             return item.draggable;
           }));
           // 拖拽 按下
@@ -143,16 +151,34 @@ var Node = /*#__PURE__*/function () {
               return b.index - a.index;
             })[0];
             if (topInScopeDragShape) {
-              topInScopeDragShape.dragging = true;
-              topInScopeDragShape.offsetX = topInScopeDragShape !== null && topInScopeDragShape !== void 0 && topInScopeDragShape.x ? evt.offsetX - (topInScopeDragShape === null || topInScopeDragShape === void 0 ? void 0 : topInScopeDragShape.x) : evt.offsetX;
-              topInScopeDragShape.offsetY = topInScopeDragShape !== null && topInScopeDragShape !== void 0 && topInScopeDragShape.y ? evt.offsetY - (topInScopeDragShape === null || topInScopeDragShape === void 0 ? void 0 : topInScopeDragShape.y) : evt.offsetY;
+              if (topInScopeDragShape.name === 'Group') {
+                topInScopeDragShape.dragging = true;
+                topInScopeDragShape.children.forEach(function (child) {
+                  // child.dragging = true;
+                  child.offsetX = child !== null && child !== void 0 && child.x ? evt.offsetX - (child === null || child === void 0 ? void 0 : child.x) : evt.offsetX;
+                  // @ts-ignore
+                  child.offsetY = child !== null && child !== void 0 && child.y ?
+                  // @ts-ignore
+                  evt.offsetY - (child === null || child === void 0 ? void 0 : child.y) : evt.offsetY;
+                });
+              } else {
+                topInScopeDragShape.dragging = true;
+                topInScopeDragShape.offsetX = topInScopeDragShape !== null && topInScopeDragShape !== void 0 && topInScopeDragShape.x ? evt.offsetX - (topInScopeDragShape === null || topInScopeDragShape === void 0 ? void 0 : topInScopeDragShape.x) : evt.offsetX;
+                // @ts-ignore
+                topInScopeDragShape.offsetY = topInScopeDragShape !== null && topInScopeDragShape !== void 0 && topInScopeDragShape.y ?
+                // @ts-ignore
+                evt.offsetY - (topInScopeDragShape === null || topInScopeDragShape === void 0 ? void 0 : topInScopeDragShape.y) : evt.offsetY;
+              }
             }
           }
-          this.fire(eventType, {
-            evt: evt,
-            target: target,
-            currentTarget: children[i]
-          });
+          var currentChild = children[i];
+          if (!isEmpty(currentChild === null || currentChild === void 0 ? void 0 : currentChild.eventListeners) || currentChild !== null && currentChild !== void 0 && currentChild.draggable) {
+            this.fire(eventType, {
+              evt: evt,
+              target: target,
+              currentTarget: currentChild
+            });
+          }
         }
       } else {
         var _target$canvas2;
@@ -171,11 +197,26 @@ var Node = /*#__PURE__*/function () {
             var y = rect !== null && rect !== void 0 && rect.top ? evt.clientY - (rect === null || rect === void 0 ? void 0 : rect.top) : evt.clientY;
             currentTarget.x = currentTarget !== null && currentTarget !== void 0 && currentTarget.offsetX ? x - (currentTarget === null || currentTarget === void 0 ? void 0 : currentTarget.offsetX) : x;
             currentTarget.y = currentTarget !== null && currentTarget !== void 0 && currentTarget.offsetY ? y - (currentTarget === null || currentTarget === void 0 ? void 0 : currentTarget.offsetY) : y;
-          } else {
+          } else if (currentTarget.name === 'Group') {
             var _x = rect !== null && rect !== void 0 && rect.left ? evt.clientX - (rect === null || rect === void 0 ? void 0 : rect.left) : evt.clientX;
             var _y = rect !== null && rect !== void 0 && rect.top ? evt.clientY - (rect === null || rect === void 0 ? void 0 : rect.top) : evt.clientY;
-            currentTarget.x = currentTarget !== null && currentTarget !== void 0 && currentTarget.offsetX ? _x - (currentTarget === null || currentTarget === void 0 ? void 0 : currentTarget.offsetX) : _x;
-            currentTarget.y = currentTarget !== null && currentTarget !== void 0 && currentTarget.offsetY ? _y - (currentTarget === null || currentTarget === void 0 ? void 0 : currentTarget.offsetY) : _y;
+            currentTarget.children.forEach(function (child) {
+              if (child.name === 'Text') {
+                // @ts-ignore
+                var _x2 = rect !== null && rect !== void 0 && rect.left ? evt.clientX - (rect === null || rect === void 0 ? void 0 : rect.left) : evt.clientX;
+                var _y2 = rect !== null && rect !== void 0 && rect.top ? evt.clientY - (rect === null || rect === void 0 ? void 0 : rect.top) : evt.clientY;
+                child.x = child !== null && child !== void 0 && child.offsetX ? _x2 - (child === null || child === void 0 ? void 0 : child.offsetX) : _x2;
+                child.y = child !== null && child !== void 0 && child.offsetY ? _y2 - (child === null || child === void 0 ? void 0 : child.offsetY) : _y2;
+              } else {
+                child.x = child !== null && child !== void 0 && child.offsetX ? _x - (child === null || child === void 0 ? void 0 : child.offsetX) : _x;
+                child.y = child !== null && child !== void 0 && child.offsetY ? _y - (child === null || child === void 0 ? void 0 : child.offsetY) : _y;
+              }
+            });
+          } else {
+            var _x3 = rect !== null && rect !== void 0 && rect.left ? evt.clientX - (rect === null || rect === void 0 ? void 0 : rect.left) : evt.clientX;
+            var _y3 = rect !== null && rect !== void 0 && rect.top ? evt.clientY - (rect === null || rect === void 0 ? void 0 : rect.top) : evt.clientY;
+            currentTarget.x = currentTarget !== null && currentTarget !== void 0 && currentTarget.offsetX ? _x3 - (currentTarget === null || currentTarget === void 0 ? void 0 : currentTarget.offsetX) : _x3;
+            currentTarget.y = currentTarget !== null && currentTarget !== void 0 && currentTarget.offsetY ? _y3 - (currentTarget === null || currentTarget === void 0 ? void 0 : currentTarget.offsetY) : _y3;
           }
 
           // @ts-ignore
@@ -185,21 +226,21 @@ var Node = /*#__PURE__*/function () {
         if (currentTarget !== null && currentTarget !== void 0 && currentTarget.inScope && (_target$canvas2 = target.canvas) !== null && _target$canvas2 !== void 0 && _target$canvas2.context) {
           var _target$canvas3;
           if (currentTarget !== null && currentTarget !== void 0 && currentTarget.inScope(evt, (_target$canvas3 = target.canvas) === null || _target$canvas3 === void 0 ? void 0 : _target$canvas3.context)) {
-            var _target$shapeEventLis;
+            var _currentTarget$eventL3;
             if (eventType !== 'mouseenter' && eventType !== 'mouseleave' && eventType !== 'mouseout' && eventType !== 'mouseover') {
               this._fire(eventType, evt, currentTarget);
             }
             // 首先判断 stage 是否是 move 事件中 处理图形的 mouseenter mouseleave
-            if (eventType === 'mousemove' && !currentTarget.mouseInScope && ((_target$shapeEventLis = target.shapeEventListeners.mouseenter) === null || _target$shapeEventLis === void 0 ? void 0 : _target$shapeEventLis.length) > 0) {
+            if (eventType === 'mousemove' && !currentTarget.mouseInScope && ((_currentTarget$eventL3 = currentTarget.eventListeners.mouseenter) === null || _currentTarget$eventL3 === void 0 ? void 0 : _currentTarget$eventL3.length) > 0) {
               currentTarget.mouseInScope = true;
               target._fire('mouseenter', evt, currentTarget);
             }
           } else {
             // 处理 除了移出 鼠标事件
             if (eventType === 'mousemove') {
-              var _target$shapeEventLis2;
+              var _target$eventListener;
               currentTarget.mouseInScope = false;
-              if (((_target$shapeEventLis2 = target.shapeEventListeners['mouseleave']) === null || _target$shapeEventLis2 === void 0 ? void 0 : _target$shapeEventLis2.length) > 0) {
+              if (((_target$eventListener = target.eventListeners['mouseleave']) === null || _target$eventListener === void 0 ? void 0 : _target$eventListener.length) > 0) {
                 target._fire('mouseleave', evt, currentTarget);
               }
             }
@@ -207,6 +248,17 @@ var Node = /*#__PURE__*/function () {
         }
       }
     }
+  }, {
+    key: "attr",
+    value: function attr(props) {
+      var _this = this,
+        _this$parent;
+      if (!this.parent) return;
+      forIn(props, function (value, key) {
+        if (value) _this[key] = value;
+      });
+      (_this$parent = this.parent) === null || _this$parent === void 0 || _this$parent.batchDraw(this.parent);
+    }
   }]);
   return Node;
 }();

package/dist/canvas/core/shapes/rect.d.ts

@@ -7,6 +7,7 @@ interface IRect {
     fillStyle?: string;
     strokeStyle?: string;
     lineWidth?: number;
+    shadowColor?: string;
 }
 declare class Rect extends Node {
     name: string;
@@ -20,8 +21,13 @@ declare class Rect extends Node {
     index: number;
     path2D: Path2D | null;
     parent: null;
+    shadowColor: string;
+    shadowBlur: number;
+    shadowOffsetY: number;
+    shadowOffsetX: number;
+    radius: number;
     constructor(config: IRect);
-    draw(ctx: CanvasRenderingContext2D): this;
+    draw(ctx: CanvasRenderingContext2D): void;
     inScope(evt: MouseEvent, ctx: CanvasRenderingContext2D): boolean | undefined;
 }
 export default Rect;