heitu 1.0.2

package/dist/canvas/instance/rect.d.ts

@@ -0,0 +1,16 @@
+import { Shape, ShapeData } from './shape';
+export interface RectData extends ShapeData {
+    x?: number;
+    y?: number;
+    width?: number;
+    height?: number;
+    cornerRadius?: number;
+}
+export declare const defaultRectData: {
+    cornerRadius: number;
+    lineWidth: number;
+};
+export declare class Rect extends Shape<RectData> {
+    constructor(data: RectData);
+    data: RectData;
+}

package/dist/canvas/instance/rect.js

@@ -0,0 +1,28 @@
+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 _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 _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); }
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+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); }
+import { Shape } from "./shape";
+export var defaultRectData = {
+  cornerRadius: 0,
+  lineWidth: 1
+};
+// @
+export var Rect = /*#__PURE__*/function (_Shape) {
+  _inherits(Rect, _Shape);
+  var _super = _createSuper(Rect);
+  function Rect(data) {
+    _classCallCheck(this, Rect);
+    return _super.call(this, 'Rect', data, defaultRectData);
+  }
+  return _createClass(Rect);
+}(Shape);

package/dist/canvas/instance/shape.d.ts

@@ -0,0 +1,42 @@
+import { ICursor, IShapeType } from '../type';
+import { Stage } from './stage';
+export interface ShapeData {
+    name?: string;
+    x?: number;
+    y?: number;
+    shadowColor?: string;
+    shadowBlur?: number;
+    shadowOffsetX?: number;
+    shadowOffsetY?: number;
+    lineWidth?: number;
+    opacity?: number;
+    zIndex?: number;
+    fillStyle?: CanvasFillStrokeStyles['fillStyle'];
+    strokeStyle?: CanvasFillStrokeStyles['strokeStyle'];
+    lineCap?: CanvasLineCap;
+    lineJoin?: CanvasLineJoin;
+    lineDash?: number[];
+    draggable?: boolean | 'horizontal' | 'vertical';
+    cursor?: ICursor;
+    pointerEvents?: 'none' | 'all';
+    transform?: number[];
+    scale?: {
+        x: number;
+        y: number;
+    };
+    translate?: {
+        x: number;
+        y: number;
+    };
+    extraData?: any;
+}
+export declare const defaultShapeData: ShapeData;
+export declare abstract class Shape<T = object> {
+    type: IShapeType;
+    data: ShapeData;
+    path2D: Path2D;
+    stage: Stage;
+    constructor(type: IShapeType, shapeData: ShapeData, defaultShapeData?: ShapeData);
+    attr(...args: any): void;
+    remove(): void;
+}

package/dist/canvas/instance/shape.js

@@ -0,0 +1,70 @@
+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); }
+export var defaultShapeData = {
+  lineWidth: 1,
+  opacity: 1,
+  shadowBlur: 0,
+  shadowColor: 'orange',
+  shadowOffsetX: 0,
+  shadowOffsetY: 0,
+  lineCap: 'butt',
+  lineJoin: 'miter',
+  lineDash: [],
+  pointerEvents: 'all',
+  // transform: [1, 0, 0, 1, 0, 0],
+  zIndex: 0
+};
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export var Shape = /*#__PURE__*/function () {
+  // extraData;
+  function Shape(type, shapeData, defaultShapeData) {
+    _classCallCheck(this, Shape);
+    _defineProperty(this, "type", void 0);
+    // @ts-ignore
+    _defineProperty(this, "stage", void 0);
+    this.type = type;
+    this.data = _objectSpread(_objectSpread(_objectSpread({}, defaultShapeData), defaultShapeData), shapeData);
+  }
+  _createClass(Shape, [{
+    key: "attr",
+    value: function attr() {
+      if (this.stage) {
+        var _this$stage;
+        for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+          args[_key] = arguments[_key];
+        }
+        switch (args.length) {
+          case 1:
+            {
+              var data = args[0];
+              this.data = _objectSpread(_objectSpread({}, this.data), data);
+              break;
+            }
+          default:
+            console.log('未实现的参数数量');
+            break;
+        }
+        (_this$stage = this.stage) === null || _this$stage === void 0 || _this$stage.renderStage();
+      }
+    }
+  }, {
+    key: "remove",
+    value: function remove() {
+      // const parentChildren = this.parent.children as IShape[];
+      // const index = parentChildren.indexOf(this);
+      // if (index !== -1) {
+      //   parentChildren.splice(index, 1);
+      // }
+
+      // this.stage.renderStage();
+    }
+  }]);
+  return Shape;
+}();

package/dist/canvas/instance/stage.d.ts

@@ -0,0 +1,21 @@
+export interface BoundingRect {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+interface IOption {
+    container: HTMLElement;
+}
+export declare class Stage {
+    canvasElement: HTMLCanvasElement | null;
+    ctx: CanvasRenderingContext2D | null;
+    children: any[];
+    private isAsyncRenderTask;
+    constructor();
+    mount(option: IOption): void;
+    appendChild(...args: any[]): void;
+    renderStage(): void;
+    private addStageEventListener;
+}
+export {};

package/dist/canvas/instance/stage.js

@@ -0,0 +1,88 @@
+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 _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 { drawStageShapes, initStage, mountStage } from "./api/api";
+import { resetSchedulerCount } from "./api/scheduler";
+export var Stage = /*#__PURE__*/function () {
+  function Stage() {
+    _classCallCheck(this, Stage);
+    _defineProperty(this, "canvasElement", void 0);
+    _defineProperty(this, "ctx", void 0);
+    // todo Ts
+    _defineProperty(this, "children", []);
+    _defineProperty(this, "isAsyncRenderTask", false);
+    this.canvasElement = null;
+    this.ctx = null;
+  }
+  // 初始化 canvas
+  _createClass(Stage, [{
+    key: "mount",
+    value: function mount(option) {
+      var container = option.container;
+      var stage = initStage(container);
+      // 画布的 context 用于绘制等
+      this.ctx = stage === null || stage === void 0 ? void 0 : stage.ctx;
+      // 画布元素 用于操作 dom
+      this.canvasElement = stage === null || stage === void 0 ? void 0 : stage.canvasElement;
+      // 绘制 canvas 内部数据
+      this.renderStage();
+      // 添加事件监听
+      // this.addStageEventListener();
+    }
+    // 添加子元素
+  }, {
+    key: "appendChild",
+    value: function appendChild() {
+      var _this = this;
+      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+      var elements = args.flat(1);
+      this.children = this.children.concat(elements);
+      this.children = this.children.map(function (item) {
+        return Object.assign(item, {
+          parent: _this
+        });
+      });
+      mountStage(this.children, this);
+    }
+  }, {
+    key: "renderStage",
+    value: function renderStage() {
+      var _this2 = this;
+      if (this.isAsyncRenderTask) {
+        return;
+      }
+      this.isAsyncRenderTask = true;
+      requestAnimationFrame(function () {
+        resetSchedulerCount();
+        drawStageShapes(_this2);
+        _this2.isAsyncRenderTask = false;
+      });
+    }
+    // canvas 添加时间监听
+  }, {
+    key: "addStageEventListener",
+    value: function addStageEventListener() {
+      if (!this.canvasElement) return;
+      // 鼠标移动
+      this.canvasElement.onmousemove = function (evt) {
+        {
+          // 触发舞台(canvas Element)的事件
+          var eventParameter = {
+            target: null,
+            x: evt.offsetX,
+            y: evt.offsetY,
+            nativeEvent: evt
+          };
+          console.log(eventParameter, 'onmousemove_eventParameter');
+        }
+      };
+    }
+  }]);
+  return Stage;
+}();

package/dist/canvas/instance/trapezoid.d.ts

@@ -0,0 +1,12 @@
+import { Shape, ShapeData } from './shape';
+export interface TrapezoidData extends ShapeData {
+    x?: number;
+    y?: number;
+    width?: number;
+    height?: number;
+    shortLength?: number | string;
+}
+export declare class Trapezoid extends Shape<TrapezoidData> {
+    constructor(data: TrapezoidData);
+    data: TrapezoidData;
+}

package/dist/canvas/instance/trapezoid.js

@@ -0,0 +1,24 @@
+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 _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 _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); }
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+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); }
+import { Shape } from "./shape";
+// @
+export var Trapezoid = /*#__PURE__*/function (_Shape) {
+  _inherits(Trapezoid, _Shape);
+  var _super = _createSuper(Trapezoid);
+  function Trapezoid(data) {
+    _classCallCheck(this, Trapezoid);
+    return _super.call(this, 'Trapezoid', data);
+  }
+  return _createClass(Trapezoid);
+}(Shape);

package/dist/canvas/store/index.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { Stage as _Stage } from '../instance/stage';
+export declare const Context: import("react").Context<_Stage>;

package/dist/canvas/store/index.js

@@ -0,0 +1,2 @@
+import { createContext } from 'react';
+export var Context = /*#__PURE__*/createContext({});

package/dist/canvas/type.d.ts

@@ -0,0 +1,25 @@
+// import { BoxHidden, Circle, Group, Line, Rect, Text } from './shape'
+
+// export type IShape = Group | BoxHidden | Circle | Rect | Line | Text
+export type IShapeType = 'Line' | 'Rect' | 'Trapezoid' | 'Circle' | 'Text' | 'Group' | 'BoxHidden' | 'Stage'
+
+export type ICursor =
+  | 'url'
+  | 'default'
+  | 'auto'
+  | 'crosshair'
+  | 'pointer'
+  | 'move'
+  | 'e-resize'
+  | 'ne-resize'
+  | 'nw-resize'
+  | 'n-resize'
+  | 'se-resize'
+  | 'sw-resize'
+  | 's-resize'
+  | 'w-resize'
+  | 'text'
+  | 'wait'
+  | 'help'
+
+export type ICoord = { x: number; y: number }

package/dist/canvas/utils/hooks/usePropertyChange.d.ts

@@ -0,0 +1 @@
+export declare const usePropertyChange: (props: any, property: any, shape: any) => void;

package/dist/canvas/utils/hooks/usePropertyChange.js

@@ -0,0 +1,23 @@
+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 _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 { useLayoutEffect } from 'react';
+export var usePropertyChange = function usePropertyChange(props, property, shape) {
+  useLayoutEffect(function () {
+    // if (props.animation?.duration > 16.7) {
+    //   shape
+    //     .animateCartoon({ [property]: props[property] }, { ...props.animation })
+    //     .then(() => {
+    //       props.animation.animationEnd?.();
+    //     });
+    // } else {
+    //   if (props[property] !== undefined) {
+    //     shape.attr({ [property]: props[property] });
+    //   }
+    // }
+    if (props[property] !== undefined) {
+      shape.attr(_defineProperty({}, property, props[property]));
+    }
+  }, [props[property]]);
+};

package/dist/canvas/utils/index.d.ts

@@ -0,0 +1 @@
+export declare const sortChildren: (children: any) => any;

package/dist/canvas/utils/index.js

@@ -0,0 +1,7 @@
+export var sortChildren = function sortChildren(children) {
+  return children.toSorted(function (a, b) {
+    var a_zIndex = a.data.zIndex;
+    var b_zIndex = b.data.zIndex;
+    return a_zIndex - b_zIndex;
+  });
+};

package/dist/canvas/utils/renderShape/common.d.ts

@@ -0,0 +1,3 @@
+export declare const hasStroke: (lineWidth: number, strokeStyle: CanvasFillStrokeStyles['strokeStyle']) => string | false | CanvasGradient | CanvasPattern;
+export declare const fillOrStroke: (ctx: CanvasRenderingContext2D, elementItem: any) => void;
+export declare function setCtxStyleProp(ctx: CanvasRenderingContext2D, elementItem: any): void;

package/dist/canvas/utils/renderShape/common.js

@@ -0,0 +1,55 @@
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+export var hasStroke = function hasStroke(lineWidth, strokeStyle) {
+  return lineWidth > 0 && lineWidth !== Infinity && strokeStyle;
+};
+export var fillOrStroke = function fillOrStroke(ctx, elementItem) {
+  if (elementItem.data.fillStyle) {
+    ctx.fill(elementItem.path2D);
+  }
+  if (hasStroke(elementItem.data.lineWidth, elementItem.data.strokeStyle)) {
+    ctx.stroke(elementItem.path2D);
+  }
+};
+export function setCtxStyleProp(ctx, elementItem) {
+  var data = elementItem.data;
+  var lineWidth = data.lineWidth,
+    lineCap = data.lineCap,
+    lineJoin = data.lineJoin,
+    strokeStyle = data.strokeStyle,
+    fillStyle = data.fillStyle,
+    opacity = data.opacity;
+  var shadowBlur = data.shadowBlur,
+    shadowColor = data.shadowColor,
+    shadowOffsetX = data.shadowOffsetX,
+    shadowOffsetY = data.shadowOffsetY;
+  var transform = elementItem.transform,
+    scale = elementItem.scale,
+    translate = elementItem.translate;
+  ctx.lineWidth = lineWidth;
+  ctx.lineCap = lineCap;
+  ctx.lineJoin = lineJoin;
+  ctx.strokeStyle = strokeStyle;
+  ctx.fillStyle = fillStyle;
+
+  // ctx.setLineDash(lineDash);
+
+  ctx.globalAlpha = opacity;
+  ctx.shadowOffsetX = shadowOffsetX;
+  ctx.shadowOffsetY = shadowOffsetY;
+  ctx.shadowColor = shadowColor;
+  ctx.shadowBlur = shadowBlur;
+  if (transform) {
+    ctx.setTransform.apply(ctx, _toConsumableArray(transform));
+  }
+  if (scale) {
+    ctx.scale(scale.x, scale.y);
+  }
+  if (translate) {
+    ctx.translate(translate.x, translate.y);
+  }
+}

package/dist/canvas/utils/renderShape/index.d.ts

@@ -0,0 +1 @@
+export declare function drawShapes(ctx: CanvasRenderingContext2D, list: any[]): void;

package/dist/canvas/utils/renderShape/index.js

@@ -0,0 +1,47 @@
+import { sortChildren } from "./..";
+import { fillOrStroke, setCtxStyleProp } from "./common";
+import { setRectPath2D } from "./renderRect";
+import { setCirclePath2D } from "./renderCircle";
+import { setTrapezoidPath2D } from "./renderTrapezoid";
+
+// 根据不同的 类型绘制
+export function drawShapes(ctx, list) {
+  var curlist = sortChildren(list);
+  curlist.forEach(function (elementItem) {
+    console.log(elementItem, 'elementItem');
+    // const { data } = elementItem;
+
+    ctx.beginPath();
+    setCtxStyleProp(ctx, elementItem);
+    switch (elementItem.type) {
+      case 'Trapezoid':
+        {
+          setTrapezoidPath2D(elementItem);
+          fillOrStroke(ctx, elementItem);
+          break;
+        }
+      case 'Rect':
+        {
+          setRectPath2D(elementItem);
+          fillOrStroke(ctx, elementItem);
+          break;
+        }
+      case 'Line':
+        {
+          console.log(elementItem, 'elementItem');
+          // const { closed, path2D } = data as Line['data'];
+
+          break;
+        }
+      case 'Circle':
+        {
+          setCirclePath2D(elementItem);
+          fillOrStroke(ctx, elementItem);
+          break;
+        }
+      default:
+        console.log(elementItem.type, '该图形 暂未实现');
+        break;
+    }
+  });
+}

package/dist/canvas/utils/renderShape/renderCircle.d.ts

@@ -0,0 +1,8 @@
+import { Circle } from "../../instance/circle";
+export declare function deg2rad(deg: number): number;
+export declare function rad2deg(radian: number): number;
+export declare function getPointOnArc(x0: number, y0: number, r: number, deg: number): {
+    x: number;
+    y: number;
+};
+export declare function setCirclePath2D(elementItem: Circle): void;

package/dist/canvas/utils/renderShape/renderCircle.js

@@ -0,0 +1,88 @@
+// 角度转弧度
+export function deg2rad(deg) {
+  return deg * Math.PI / 180;
+}
+
+// 弧度转角度
+export function rad2deg(radian) {
+  return radian * 180 / Math.PI;
+}
+
+// 获取圆弧上的点 圆心 半径 角度: 60°
+export function getPointOnArc(x0, y0, r, deg) {
+  var alpha = deg2rad(deg);
+  var x = x0 + r * Math.cos(alpha); // Math.cos 传入弧度
+  var y = y0 + r * Math.sin(alpha);
+  return {
+    x: x,
+    y: y
+  };
+}
+// 圆环/扇环
+var calcRingD = function calcRingD(outerRadius, innerRadius, startAngle, endAngle, centerX, centerY, isWholeArc) {
+  function calcWholeRingD() {
+    var outerM_y = centerY - outerRadius;
+    var outerM = "M ".concat(centerX, " ").concat(outerM_y);
+    var outerA = "A ".concat(outerRadius, " ").concat(outerRadius, " 0 1 1 ").concat(centerX - 0.01, " ").concat(outerM_y);
+    var innerM_y = centerY - innerRadius;
+    var innerM = "M ".concat(centerX, " ").concat(innerM_y);
+    var innerA = "A ".concat(innerRadius, " ").concat(innerRadius, " 0 1 0 ").concat(centerX + 0.01, " ").concat(innerM_y);
+    return "".concat(outerM, " ").concat(outerA, " ").concat(innerM, " ").concat(innerA, " Z");
+  }
+  function calcRingSectorD() {
+    var outerStart = getPointOnArc(centerX, centerY, outerRadius, startAngle);
+    var outerEnd = getPointOnArc(centerX, centerY, outerRadius, endAngle);
+    var largeArcFlag = endAngle - startAngle >= 180 ? 1 : 0;
+    var outerM = "M ".concat(outerStart.x, " ").concat(outerStart.y);
+    var outerA = "A ".concat(outerRadius, " ").concat(outerRadius, " 0 ").concat(largeArcFlag, " 1 ").concat(outerEnd.x, " ").concat(outerEnd.y);
+    var innerStart = getPointOnArc(centerX, centerY, innerRadius, startAngle);
+    var innerEnd = getPointOnArc(centerX, centerY, innerRadius, endAngle);
+    var moveL = "L".concat(innerEnd.x, " ").concat(innerEnd.y);
+    var innerA = "A ".concat(innerRadius, " ").concat(innerRadius, " 0 ").concat(largeArcFlag, " 0 ").concat(innerStart.x, " ").concat(innerStart.y);
+    return "".concat(outerM, " ").concat(outerA, " ").concat(moveL, " ").concat(innerA, " Z");
+  }
+  return isWholeArc ? calcWholeRingD() : calcRingSectorD();
+};
+
+// 圆形/扇形 返回 path 的 d属性 返回的是 圆弧  -起始角度遵循数学上的平面直角坐标系
+var calcD = function calcD(radius, startAngle, endAngle, centerX, centerY, isWholeArc, offsetAngle) {
+  startAngle = startAngle + offsetAngle;
+  endAngle = endAngle + offsetAngle;
+
+  // 将角度转换为弧度
+  var startAngleRad = startAngle * Math.PI / 180;
+  var endAngleRad = endAngle * Math.PI / 180;
+
+  // 计算圆弧的起点和终点坐标
+  var startX = centerX + radius * Math.cos(startAngleRad);
+  var startY = centerY + radius * Math.sin(startAngleRad);
+  var endX = centerX + radius * Math.cos(endAngleRad);
+  var endY = centerY + radius * Math.sin(endAngleRad);
+
+  // 计算扇形所需的路径命令
+  var largeArcFlag = endAngle - startAngle <= 180 ? 0 : 1;
+  var sweepFlag = 1;
+  var M_y = centerY - radius;
+  var d = isWholeArc ? "M".concat(centerX, ",").concat(M_y, " A").concat(radius, ",").concat(radius, " 0 1 1, ").concat(centerX - 0.01, ",").concat(centerY - radius, "Z") : "M".concat(centerX, ",").concat(centerY, " L").concat(startX, ",").concat(startY, " A").concat(radius, ",").concat(radius, " 0 ").concat(largeArcFlag, ",").concat(sweepFlag, " ").concat(endX, ",").concat(endY, " Z");
+  return d;
+};
+export function setCirclePath2D(elementItem) {
+  var _elementItem$data = elementItem.data,
+    _elementItem$data$x = _elementItem$data.x,
+    x = _elementItem$data$x === void 0 ? 0 : _elementItem$data$x,
+    _elementItem$data$y = _elementItem$data.y,
+    y = _elementItem$data$y === void 0 ? 0 : _elementItem$data$y,
+    _elementItem$data$rad = _elementItem$data.radius,
+    radius = _elementItem$data$rad === void 0 ? 0 : _elementItem$data$rad,
+    innerRadius = _elementItem$data.innerRadius,
+    _elementItem$data$sta = _elementItem$data.startAngle,
+    startAngle = _elementItem$data$sta === void 0 ? 0 : _elementItem$data$sta,
+    _elementItem$data$end = _elementItem$data.endAngle,
+    endAngle = _elementItem$data$end === void 0 ? 0 : _elementItem$data$end,
+    _elementItem$data$off = _elementItem$data.offsetAngle,
+    offsetAngle = _elementItem$data$off === void 0 ? 0 : _elementItem$data$off;
+  var isWholeArc = startAngle === 0 && endAngle === 360; // 是否是整圆
+
+  var d = innerRadius ? calcRingD(radius, innerRadius, startAngle, endAngle, x, y, isWholeArc) : calcD(radius, startAngle, endAngle, x, y, isWholeArc, offsetAngle);
+  elementItem.path2D = new Path2D(d);
+}