chore: add eslint

.eslintrc.js

@@ -0,0 +1,25 @@
+module.exports = {
+  "parser": "@typescript-eslint/parser",
+  "plugins": ["@typescript-eslint"],
+  "extends": ["plugin:@typescript-eslint/recommended"],
+  "parserOptions": {
+    "sourceType": "module"
+  },
+  "rules": {
+    "@typescript-eslint/rule-name": "off",
+    "indent": ["error", 2, {
+      "SwitchCase": 1,
+      "VariableDeclarator": 1,
+      "outerIIFEBody": 1,
+      "MemberExpression": 1,
+      "FunctionDeclaration": { "parameters": 1, "body": 1 },
+      "FunctionExpression": { "parameters": 1, "body": 1 },
+      "CallExpression": { "arguments": 1 },
+      "ArrayExpression": 1,
+      "ObjectExpression": 1,
+      "ImportDeclaration": 1,
+      "flatTernaryExpressions": false,
+      "ignoreComments": false
+    }],
+  }
+}

package.json

@@ -10,7 +10,8 @@
     "clear": "rm -rf ./packages/*/dist/ & rm -rf ./packages/*/node_modules/",
     "jest": "jest --config jest.config.js",
     "test": "lerna bootstrap --no-ci && npm run build && npm run jest && npm run e2e",
-    "serve": "http-server ./"
+    "serve": "http-server ./",
+    "lint": "eslint  --fix --ext .ts packages/*/src/**"
   },
   "devDependencies": {
     "@babel/core": "^7.13.14",
@@ -18,11 +19,15 @@
     "@babel/preset-typescript": "^7.13.0",
     "@microsoft/api-extractor": "^7.13.2",
     "@rollup/plugin-node-resolve": "^11.2.1",
+    "@typescript-eslint/eslint-plugin": "^4.25.0",
+    "@typescript-eslint/parser": "^4.25.0",
     "babel-jest": "^26.6.3",
     "chalk": "^4.1.0",
+    "eslint": "^7.27.0",
     "execa": "^5.0.0",
     "fs-extra": "^9.1.0",
     "http-server": "^0.12.3",
+    "husky": "^6.0.0",
     "jest": "^26.6.3",
     "jimp": "^0.16.1",
     "koa-compose": "^4.1.0",

packages/board/src/index.ts

@@ -19,12 +19,12 @@ class Board {
   private _displayCanvas: HTMLCanvasElement;
   private _mount: HTMLDivElement;
   private _opts: PrivateOptions;
-  private _hasRendered: boolean = false;
+  private _hasRendered = false;
   private _ctx: Context;
   private _displayCtx: CanvasRenderingContext2D;
-  private _scaleRatio: number = 1;
-  private _scrollX: number = 0;
-  private _scrollY: number = 0;
+  private _scaleRatio = 1;
+  private _scrollX = 0;
+  private _scrollY = 0;
   private _watcher: Watcher;
 
   constructor(mount: HTMLDivElement, opts: Options) {

packages/board/src/util/event.ts

@@ -11,21 +11,21 @@ export interface TypeBoardEventArgMap {
 }
 
 export interface TypeBoardEvent {
-  on<T extends keyof TypeBoardEventArgMap >(key: T, callback: (p: TypeBoardEventArgMap[T]) => any): void
-  off<T extends keyof TypeBoardEventArgMap >(key: T, callback: (p: TypeBoardEventArgMap[T]) => any): void
+  on<T extends keyof TypeBoardEventArgMap >(key: T, callback: (p: TypeBoardEventArgMap[T]) => void): void
+  off<T extends keyof TypeBoardEventArgMap >(key: T, callback: (p: TypeBoardEventArgMap[T]) => void): void
   trigger<T extends keyof TypeBoardEventArgMap >(key: T, p: TypeBoardEventArgMap[T]): void
 }
 
 
 export class BoardEvent implements TypeBoardEvent {
 
-  private _listeners: Map<string, Function[]>;
+  private _listeners: Map<string, ((p: any) => void)[]>;
 
   constructor() {
     this._listeners = new Map();
   }
 
-  on<T extends keyof TypeBoardEventArgMap >(eventKey: T, callback: (p: TypeBoardEventArgMap[T]) => any) {
+  on<T extends keyof TypeBoardEventArgMap >(eventKey: T, callback: (p: TypeBoardEventArgMap[T]) => void) {
     if (this._listeners.has(eventKey)) {
       const callbacks = this._listeners.get(eventKey);
       callbacks?.push(callback);
@@ -35,7 +35,7 @@ export class BoardEvent implements TypeBoardEvent {
     }
   }
   
-  off<T extends keyof TypeBoardEventArgMap >(eventKey: T, callback: (p: TypeBoardEventArgMap[T]) => any) {
+  off<T extends keyof TypeBoardEventArgMap >(eventKey: T, callback: (p: TypeBoardEventArgMap[T]) => void) {
     if (this._listeners.has(eventKey)) {
       const callbacks = this._listeners.get(eventKey);
       if (Array.isArray(callbacks)) {
@@ -51,7 +51,7 @@ export class BoardEvent implements TypeBoardEvent {
   }
 
   trigger<T extends keyof TypeBoardEventArgMap >(eventKey: T, arg: TypeBoardEventArgMap[T]) {
-    let callbacks = this._listeners.get(eventKey);
+    const callbacks = this._listeners.get(eventKey);
     if (Array.isArray(callbacks)) {
       callbacks.forEach((cb) => {
         cb(arg);
@@ -62,9 +62,9 @@ export class BoardEvent implements TypeBoardEvent {
     }
   }
 
-  has(name: string) {
+  has<T extends keyof TypeBoardEventArgMap> (name: string) {
     if (this._listeners.has(name)) {
-      const list: Function[] | undefined = this._listeners.get(name);
+      const list: ((p: TypeBoardEventArgMap[T]) => void)[] | undefined = this._listeners.get(name);
       if (Array.isArray(list) && list.length > 0) {
         return true;
       }

packages/board/src/util/istype.ts

@@ -2,11 +2,11 @@ function parsePrototype (data: any) {
   const typeStr = Object.prototype.toString.call(data) || '';
   const result = typeStr.replace(/(\[object|\])/ig, '').trim();
   return result;
-};
+}
 const istype = {
 
   type(data: any, lowerCase?: boolean) {
-    let result = parsePrototype(data);
+    const result = parsePrototype(data);
     return lowerCase === true ? result.toLocaleLowerCase() : result;
   },
 

packages/board/src/util/style.ts

@@ -6,8 +6,8 @@ export const mergeCSS2StyleAttr = function(
   const cssList = [];
   if (istype.json(cssMap) === true) {
     for (const key in cssMap) {
-      let cssKey: string = `${key}`;
-      let cssVal: string = `${cssMap[key]}`;
+      let cssKey = `${key}`;
+      let cssVal = `${cssMap[key]}`;
       cssKey = cssKey.trim();
       cssVal = cssVal.trim();
       cssList.push(`${cssKey}:${cssVal}`);

packages/board/src/util/watcher.ts

@@ -5,7 +5,7 @@ import { BoardEvent, TypeBoardEventArgMap } from './event';
 export class Watcher {
 
   private _canvas: HTMLCanvasElement;
-  private _isMoving: boolean = false;
+  private _isMoving = false;
   // private _onMove?: TypeWatchCallback;
   // private _onMoveStart?: TypeWatchCallback;
   // private _onMoveEnd?: TypeWatchCallback;
@@ -36,13 +36,13 @@ export class Watcher {
     canvas.addEventListener('touchmove', this._listenMove.bind(this));
     canvas.addEventListener('touchend', this._listenMoveEnd.bind(this));
 
-    const mouseupEvent = new MouseEvent('mouseup');
-    document.querySelector('body')?.addEventListener('mousemove', (e) => {
-      // @ts-ignore
-      if (e && e.path && e.path[0] !== canvas) {
-        canvas.dispatchEvent(mouseupEvent);
-      }
-    }, false)
+    // const mouseupEvent = new MouseEvent('mouseup');
+    // document.querySelector('body')?.addEventListener('mousemove', (e) => {
+    //   // @ts-ignore
+    //   if (e && e.path && e.path[0] !== canvas) {
+    //     canvas.dispatchEvent(mouseupEvent);
+    //   }
+    // }, false)
   }
 
   _listenMoveStart(e: MouseEvent|TouchEvent) {

packages/core/src/index.ts

@@ -40,7 +40,7 @@ class Core {
   private [_renderer]: Renderer;
   private [_element]: Element;
   private [_helper]: Helper;
-  private [_hasInited]: boolean = false; 
+  private [_hasInited] = false; 
   private [_mode]: Mode = Mode.NULL;
 
   private [_selectedUUID]: string | null = null;

packages/core/src/lib/draw.ts

@@ -23,7 +23,7 @@ export function drawContext(ctx: TypeContext, data: TypeData, config: TypeHelper
     switch (ele.type) {
       case 'rect': {
         drawRect<'rect'>(ctx, ele as TypeElement<'rect'>);
-      };
+      }
       default: {
         // nothing
       }

packages/core/src/lib/element.ts

@@ -86,48 +86,48 @@ export class Element {
         elem.w -= moveX;
         elem.h -= moveY;
         break;
-      };
+      }
       case 'top': {
         elem.y += moveY;
         elem.h -= moveY;
         break;
-      };
+      }
       case 'top-right': {
         elem.y += moveY;
         elem.w += moveX;
         elem.h -= moveY;
         break;
-      };
+      }
       case 'right': {
         elem.w += moveX;
         break;
-      };
+      }
       case 'bottom-right': {
         elem.w += moveX;
         elem.h += moveY;
         break;
-      };
+      }
       case 'bottom': {
         elem.h += moveY;
         break;
-      };
+      }
       case 'bottom-left': {
         elem.x += moveX;
         elem.w -= moveX;
         elem.h += moveY;
         break;
-      };
+      }
       case 'left': {
         elem.x += moveX;
         elem.w -= moveX;
         break;
-      };
+      }
       case 'rotate': {
         const center = calcElementCenter(elem);
         const radian = calcRadian(center, prevPoint, point);
         elem.angle = (elem.angle || 0) + parseRadianToAngle(radian);
         break;
-      };
+      }
       default: {
         break;
       }

packages/core/src/util/time.ts

@@ -1,12 +1,13 @@
+type  Middleware = (ctx: any, next: Middleware) => any;
 
-export function compose (middleware: Function[]) {
-  return function (context: any, next?: Function) {
+export function compose (middleware: Middleware[]) {
+  return function (context: any, next?: Middleware) {
     // let index = -1;
     return dispatch(0);
 
     function dispatch (i: number): Promise<any> {
       // index = i
-      let fn = middleware[i]
+      let fn: Middleware = middleware[i]
       if (i === middleware.length && next) {
         fn = next;
       }
@@ -29,7 +30,7 @@ export function delay(time: number): Promise<void> {
   })
 }
 
-export function throttle(fn: Function, timeout: number) {
+export function throttle(fn: (...args: any[]) => any, timeout: number) {
   let timer: any = -1;
   return function(...args: any[]) {
     if (timer > 0) {