chore: update

package.json

@@ -16,15 +16,18 @@
     "clean": "rimraf -rf lib esm dist",
     "lint-staged": "lint-staged",
     "test": "jest",
-    "build:umd": "rimraf ./dist && rollup -c && npm run size",
+    "build:umd": "rimraf ./dist && webpack --config webpack.config.js --mode production && npm run size",
     "build:cjs": "rimraf ./lib && tsc --module commonjs --outDir lib",
     "build:esm": "rimraf ./esm && tsc --module ESNext --outDir esm",
     "build": "npm run build:cjs && npm run build:esm && npm run build:umd",
     "size": "limit-size",
     "prepublishOnly": "npm run build"
   },
   "dependencies": {
-    "onfire.js": "^2.0.0"
+    "@antv/event-emitter": "^0.1.2"
+  },
+  "peerDependencies": {
+    "lodash": "^4.17.20"
   },
   "keywords": [
     "visualization",
@@ -33,14 +36,20 @@
     "@antplot/graphics"
   ],
   "devDependencies": {
+    "@babel/core": "^7.12.16",
+    "@babel/plugin-transform-runtime": "^7.12.15",
+    "@babel/preset-env": "^7.12.16",
+    "@babel/runtime": "^7.12.13",
     "@commitlint/cli": "^11.0.0",
     "@types/jest": "^26.0.20",
-    "benchmark": "^2.1.4",
+    "@types/lodash": "^4.14.168",
+    "babel-loader": "^8.2.2",
     "husky": "^5.0.9",
     "jest": "^26.6.3",
     "jest-electron": "^0.1.11",
     "limit-size": "^0.1.4",
     "lint-staged": "^10.5.4",
+    "lodash": "^4.17.20",
     "prettier": "^2.2.1",
     "rimraf": "^3.0.2",
     "rollup": "^2.39.0",
@@ -49,8 +58,12 @@
     "rollup-plugin-typescript": "^1.0.1",
     "rollup-plugin-uglify": "^6.0.4",
     "ts-jest": "^26.5.1",
+    "ts-loader": "^8.0.17",
     "ts-node": "^9.1.1",
-    "typescript": "^4.1.5"
+    "typescript": "^4.1.5",
+    "webpack": "^5.22.0",
+    "webpack-bundle-analyzer": "^4.4.0",
+    "webpack-cli": "^4.5.0"
   },
   "jest": {
     "runner": "jest-electron/runner",

src/core/group.ts

@@ -0,0 +1,149 @@
+import * as _ from 'lodash';
+import EventEmitter from '@antv/event-emitter';
+import { uuid } from '../utils/uuid';
+import { MATRIX } from '../utils/const';
+import { IElement, IEventEmitter, IMatrixValue, IMaxtrix } from '../types';
+
+/**
+ * 图形画布中的容器元素，可以包含有子元素
+ */
+export class Group extends EventEmitter implements IEventEmitter, IElement, IMaxtrix {
+
+  /**
+   * 元素的 id，自动生成
+   */
+  public id: string = uuid();
+
+  /**
+   * 元素的 tag，自动根据元素类型设置
+   */
+  public tag: string = 'group';
+
+  /**
+   * 类型，用于查找元素
+   */
+  public className: string = '';
+
+  /**
+   * 元素的 attributes 配置
+   */
+  public attributes: Record<string, any> = {};
+
+  /**
+   * 当前的 matrix 数据，默认设置为初始的矩阵
+   */
+  public matrix: IMatrixValue = MATRIX;
+
+  /**
+   * 子元素
+   */
+  public children: IElement[];
+
+  /**
+   * 获取属性
+   * @param key 
+   */
+  public getAttribute(key: string) {
+    return _.get(this.attributes, key);
+  }
+
+  /**
+   * 设置属性
+   * @param key 
+   * @param value 
+   */
+  public setAttribute(key: string, value: any) {
+    return _.set(this.attributes, key, value);
+  }
+
+  /**
+   * 删除属性
+   * @param key 
+   */
+  public removeAttribute(key: string) {
+    return _.unset(this.attributes, key);
+  }
+
+  /**
+   * 通过 id 查找
+   */
+  public getElementById(id: string) {
+    return this as any as IElement;
+  }
+
+  /**
+   * 通过 class name 查找数组
+   */
+  public getEelementsByClassName(className: string) {
+    return []
+  }
+
+  /**
+   * 通过 tag 查找
+   */
+  public getEelementsByTag(tag: string) {
+    return [];
+  }
+
+  /**
+   * 添加子元素
+   */
+  public add() {}
+
+  /**
+   * 删除子元素
+   */
+  public remove() {}
+
+  /**
+   * 移动到 x y 位置
+   * @param x 
+   * @param y 
+   */
+  public moveTo(x: number, y: number) {
+    return this.matrix;
+  }
+
+  /**
+   * 移动 x y 位移
+   * @param x 
+   * @param y 
+   */
+  public moveBy(x: number, y: number) {
+    return this.matrix;
+  }
+
+  /**
+   * 放大缩小到 x y
+   * @param x 
+   * @param y 
+   */
+  public scaleTo(x: number, y: number) {
+    return this.matrix;
+  }
+
+  /**
+   * 放大缩小 x y 比例
+   * @param x 
+   * @param y 
+   */
+  public scaleBy(x: number, y: number) {
+    return this.matrix;
+  }
+
+  /**
+   * 旋转到 angle 角度
+   * @param angle 
+   */
+  public rotateTo(angle: number) {
+    return this.matrix;
+  }
+
+  /**
+   * 旋转 angle 角度
+   * @param angle 
+   */
+  public rotateBy(angle: number) {
+    return this.matrix;
+  }
+}

src/core/index.ts

@@ -6,6 +6,5 @@
  * 4. 构建画布的 virtual DOM，本质是一个 group + shape 构建的树形结构
  */
 
-export { Graph } from './graph';
 export { Group } from './group';
 export { Shape } from './shape';

src/core/shape.ts

@@ -0,0 +1,3 @@
+export class Shape {
+
+}

src/graph.ts

@@ -0,0 +1,2 @@
+
+export class Graph {}

src/index.ts

@@ -1,5 +1,7 @@
 export const VERSION = '0.1.0';
 
+export { Graph } from './graph';
+
 export * from './core';
 
 // 辅助函数

src/types/element.ts

@@ -0,0 +1,78 @@
+import * as _ from 'lodash';
+import { uuid } from '../utils/uuid';
+
+/**
+ * 提供类似 HTML Element 的 API 方法
+ */
+
+ export interface IElement {
+
+  /**
+   * id
+   */
+  readonly id: string;
+
+  /**
+   * 类型 tag
+   */
+  readonly tag: string;
+
+  /**
+   * class name
+   */
+  readonly className?: string;
+
+  /**
+   * 属性配置
+   */
+  readonly attributes: Record<string, any>;
+
+  /**
+   * 子元素
+   */
+  readonly children: IElement[];
+
+  /**
+   * 获取属性
+   * @param key 
+   */
+  readonly getAttribute: (key: string) => any;
+
+  /**
+   * 设置属性
+   * @param key 
+   * @param value 
+   */
+  readonly setAttribute: (key: string, value: any) => void;
+
+  /**
+   * 删除属性
+   * @param key 
+   */
+  readonly removeAttribute: (key: string) => void;
+
+  /**
+   * 通过 id 查找
+   */
+  readonly getElementById: (id: string) => IElement;
+
+  /**
+   * 通过 class name 查找数组
+   */
+  readonly getEelementsByClassName: (className: string) => IElement[];
+
+  /**
+   * 通过 tag 查找
+   */
+  readonly getEelementsByTag: (tag: string) => IElement[];
+
+  /**
+   * 添加子元素
+   */
+  readonly add: (element: IElement) => void;
+
+  /**
+   * 删除子元素
+   */
+  readonly remove: (element: IElement) => void;
+ }

src/types/event-emitter.ts

@@ -0,0 +1,31 @@
+/**
+ * 提供事件 event emitter 能力接口
+ */
+export interface IEventEmitter {
+  /**
+   * 监听事件
+   * @param eventName 
+   * @param cb 
+   * @param once 
+   */
+  on(eventName: string, cb: Function, once?: boolean): void;
+
+  /**
+   * 监听一次事件
+   * @param eventName 
+   * @param cb 
+   */
+  once(eventName: string, cb: Function): void;
+
+  /**
+   * 取消监听事件
+   * @param eventName 
+   * @param cb 
+   */
+  off(eventName?: string, cb?: Function): void;
+
+  /**
+   * 触发事件
+   */
+  emit: (eventName: string, ...params: any[]) => void;
+}

src/types/index.ts

@@ -0,0 +1,4 @@
+export { IElement } from './element';
+export { IEventEmitter } from './event-emitter';
+export { IMaxtrix, IMatrixValue } from './matrix';
+export { IRenderable } from './renderable';