重构

drawing-panel/package-lock.json

@@ -2148,6 +2148,11 @@
       "integrity": "sha1-ftGxQQxqDg94z5XTuEQMY/eLhhQ=",
       "dev": true
     },
+    "inversify": {
+      "version": "4.13.0",
+      "resolved": "http://registry.npm.taobao.org/inversify/download/inversify-4.13.0.tgz",
+      "integrity": "sha1-CrQFcL+kR0sE1bkZu6s6T2gqcvU="
+    },
     "invert-kv": {
       "version": "2.0.0",
       "resolved": "http://registry.npm.taobao.org/invert-kv/download/invert-kv-2.0.0.tgz",
@@ -3076,6 +3081,11 @@
         "set-immediate-shim": "^1.0.1"
       }
     },
+    "reflect-metadata": {
+      "version": "0.1.12",
+      "resolved": "http://registry.npm.taobao.org/reflect-metadata/download/reflect-metadata-0.1.12.tgz",
+      "integrity": "sha1-MRvwxrY814LyKKgavhRqK/qcVvI="
+    },
     "regex-not": {
       "version": "1.0.2",
       "resolved": "http://registry.npm.taobao.org/regex-not/download/regex-not-1.0.2.tgz",

drawing-panel/package.json

@@ -17,6 +17,8 @@
   },
   "dependencies": {
     "@types/jquery": "^3.3.6",
-    "jquery": "^3.3.1"
+    "inversify": "^4.13.0",
+    "jquery": "^3.3.1",
+    "reflect-metadata": "^0.1.12"
   }
 }

drawing-panel/src/drawing/drawing-panel.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var logger_1 = require("../utils/logger");
-var PanelState = /** @class */ (function () {
-    function PanelState(id, data) {
-        this.id = id;
-        this.data = data;
-    }
-    return PanelState;
-}());
-exports.PanelState = PanelState;
+var panel_state_manager_1 = require("../panel-state-manager/panel-state-manager");
+var shape_recognition_tool_1 = require("../recogonition/shape-recognition-tool");
 var PanelStore = /** @class */ (function () {
     function PanelStore(states) {
         this.states = states;
@@ -18,18 +12,18 @@ var PanelStore = /** @class */ (function () {
 exports.PanelStore = PanelStore;
 var DrawingPanel = /** @class */ (function () {
     function DrawingPanel(containerID, options) {
-        if (containerID === void 0) { containerID = 'container'; }
         var _this = this;
         this.onDrawingEnd = function (shape) {
             logger_1.default.info(DrawingPanel.TAG, '画完了', shape);
+            var type = shape_recognition_tool_1.ShapeRecognitionTool.test(shape.coordinates);
+            shape.label = type;
             var ctx = _this.canvas.getContext('2d');
             ctx.save();
             ctx.fillStyle = DrawingPanel.labelColor;
             ctx.font = DrawingPanel.labelFont;
-            ctx.fillText('未定义', shape.startPoint.x, shape.startPoint.y);
+            ctx.fillText(shape.label, shape.startPoint.x, shape.startPoint.y);
             ctx.restore();
         };
-        this.container = document.getElementById(containerID);
         this.drawing = false;
         // 准备options
         options = options || {};
@@ -39,7 +33,7 @@ var DrawingPanel = /** @class */ (function () {
         for (var key in options.style) {
             options.style[key] = options.style[key] || DrawingPanel.defaultOptions.style[key];
         }
-        this.initCanvas(options);
+        this.init(containerID, options);
     }
     // 切换画图工具
     DrawingPanel.prototype.setDrawingTool = function (tool) {
@@ -49,6 +43,9 @@ var DrawingPanel = /** @class */ (function () {
         this.drawingTool = tool;
         this.drawingTool.init(this.onDrawingEnd);
     };
+    DrawingPanel.prototype.setStateManager = function (stateManager) {
+        this.stateManager = stateManager;
+    };
     DrawingPanel.prototype.getCanvas = function () {
         return this.canvas;
     };
@@ -59,12 +56,14 @@ var DrawingPanel = /** @class */ (function () {
     DrawingPanel.prototype.saveCanvas = function () {
         var ctx = this.canvas.getContext('2d');
         var data = this.canvas.toDataURL();
-        // let data = ctx.getImageData(0, 0, this.canvas.width, this.canvas.height);
-        var store = DrawingPanel.getPanelStore();
         var id = new Date().getTime().toString() + 'state';
-        store.states.push(new PanelState(id, data));
-        DrawingPanel.savePanelStore(store);
-        return store.states;
+        var state = new panel_state_manager_1.PanelState(id, data);
+        this.stateManager.save(state);
+        var stateList = [];
+        this.stateManager.forEach(function (item) {
+            stateList.push(item);
+        });
+        return stateList;
     };
     /**
      * 恢复某个画面
@@ -80,7 +79,11 @@ var DrawingPanel = /** @class */ (function () {
         };
     };
     DrawingPanel.prototype.getPanelStates = function () {
-        return DrawingPanel.getPanelStore().states;
+        var res = [];
+        this.stateManager.forEach(function (item) {
+            res.push(item);
+        });
+        return res;
     };
     /**
      * 新一个canvas
@@ -93,32 +96,7 @@ var DrawingPanel = /** @class */ (function () {
         var ctx = this.canvas.getContext('2d');
         ctx.clearRect(0, 0, this.options.width, this.options.height);
     };
-    DrawingPanel.getPanelStore = function () {
-        var store;
-        var temp = localStorage.getItem(DrawingPanel.PANEL_STORE);
-        if (temp) {
-            store = JSON.parse(temp);
-        }
-        else {
-            store = new PanelStore([]);
-        }
-        return store;
-    };
-    DrawingPanel.savePanelStore = function (store) {
-        var json = JSON.stringify(store);
-        logger_1.default.info(DrawingPanel.TAG, '存', json);
-        localStorage.setItem(DrawingPanel.PANEL_STORE, json);
-    };
     DrawingPanel.prototype.initCanvas = function (options) {
-        var container = this.container;
-        var errorMsg = '创建画板失败';
-        if (!container) {
-            throw new Error(errorMsg);
-        }
-        this.canvas = document.createElement('canvas');
-        if (!this.canvas) {
-            throw new Error(errorMsg);
-        }
         var canvas = this.canvas;
         canvas.width = options.width;
         canvas.height = options.height;
@@ -126,9 +104,16 @@ var DrawingPanel = /** @class */ (function () {
             canvas.style[key] = options.style[key];
         }
         this.options = options;
-        container.appendChild(canvas);
     };
-    DrawingPanel.PANEL_STORE = 'panel-store';
+    DrawingPanel.prototype.init = function (containerID, options) {
+        var container = document.getElementById(containerID);
+        if (!container) {
+            logger_1.default.error('没拿到容器');
+        }
+        this.canvas = document.createElement('canvas');
+        container.appendChild(this.canvas);
+        this.initCanvas(options);
+    };
     DrawingPanel.TAG = 'DrawingPanel';
     DrawingPanel.defaultOptions = { width: 500, height: 500, style: { backgroundColor: 'white', border: '1px solid #dcdee2' } };
     DrawingPanel.labelColor = 'tomato';

drawing-panel/src/drawing/drawing-panel.js.map

-{"version":3,"file":"drawing-panel.js","sourceRoot":"","sources":["drawing-panel.ts"],"names":[],"mappings":"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"}
\ No newline at end of file
+{"version":3,"file":"drawing-panel.js","sourceRoot":"","sources":["drawing-panel.ts"],"names":[],"mappings":"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"}
\ No newline at end of file

drawing-panel/src/drawing/drawing-panel.ts

 import logger from '../utils/logger';
 import { DrawingTool } from './drawing-tool';
 import { Shape } from './shape';
+import {
+  IPanelStateManager,
+  PanelState
+} from '../panel-state-manager/panel-state-manager';
+import { ShapeRecognitionTool } from '../recogonition/shape-recognition-tool';
 
 export interface DrawingPanelOptions {
   width: number;
@@ -11,12 +16,7 @@ export interface DrawingPanelOptions {
   };
 }
 
-export class PanelState {
-  constructor(
-    public id: string,
-    public data: ImageData | string
-  ) {}
-}
+
 
 export class PanelStore {
   constructor(
@@ -25,22 +25,21 @@ export class PanelStore {
 }
 
 export class DrawingPanel {
-  private static PANEL_STORE = 'panel-store';
+  private static TAG = 'DrawingPanel';
+  private static defaultOptions: DrawingPanelOptions = {width: 500, height: 500, style: {backgroundColor: 'white', border:'1px solid #dcdee2'}};
+  private static labelColor = 'tomato';
+  private static labelFont = 'bold 20px Arial';
   private canvas: HTMLCanvasElement;
-  private readonly container: HTMLElement;
   private drawingTool: DrawingTool;
   private drawing: boolean;
   private options: DrawingPanelOptions;
+  stateManager: IPanelStateManager;
+
 
-  private static TAG = 'DrawingPanel';
-  private static defaultOptions: DrawingPanelOptions = {width: 500, height: 500, style: {backgroundColor: 'white', border:'1px solid #dcdee2'}};
-  private static labelColor = 'tomato';
-  private static labelFont = 'bold 20px Arial';
 
   constructor(
-    containerID = 'container',
+    containerID: string,
     options?: DrawingPanelOptions) {
-    this.container = document.getElementById(containerID);
     this.drawing = false;
     // 准备options
     options = options || <DrawingPanelOptions>{};
@@ -50,7 +49,7 @@ export class DrawingPanel {
     for (let key in options.style) {
       options.style[key] = options.style[key] || DrawingPanel.defaultOptions.style[key];
     }
-    this.initCanvas(options);
+    this.init(containerID, options);
   }
 
   // 切换画图工具
@@ -62,6 +61,10 @@ export class DrawingPanel {
     this.drawingTool.init(this.onDrawingEnd);
   }
 
+  public setStateManager(stateManager: IPanelStateManager) {
+    this.stateManager = stateManager;
+  }
+
   public getCanvas(): HTMLCanvasElement {
     return this.canvas;
   }
@@ -73,12 +76,14 @@ export class DrawingPanel {
   public saveCanvas(): PanelState[] {
     const ctx = this.canvas.getContext('2d');
     let data = this.canvas.toDataURL();
-    // let data = ctx.getImageData(0, 0, this.canvas.width, this.canvas.height);
-    let store: PanelStore = DrawingPanel.getPanelStore();
     const id = new Date().getTime().toString() + 'state';
-    store.states.push(new PanelState(id, data));
-    DrawingPanel.savePanelStore(store);
-    return store.states;
+    let state = new PanelState(id, data);
+    this.stateManager.save(state);
+    let stateList: PanelState[] = [];
+    this.stateManager.forEach((item) => {
+      stateList.push(item);
+    });
+    return stateList;
   }
 
   /**
@@ -92,11 +97,15 @@ export class DrawingPanel {
     pic.src = state.data.toString();
     pic.onload = () => {
       ctx.drawImage(pic, 0, 0);
-    }
+    };
   }
 
   public getPanelStates(): PanelState[] {
-    return DrawingPanel.getPanelStore().states;
+    let res = [];
+    this.stateManager.forEach(item => {
+      res.push(item);
+    });
+    return res;
   }
 
   /**
@@ -111,43 +120,19 @@ export class DrawingPanel {
     ctx.clearRect(0, 0, this.options.width, this.options.height);
   }
 
-  private static getPanelStore(): PanelStore {
-    let store: PanelStore;
-    const temp = localStorage.getItem(DrawingPanel.PANEL_STORE);
-    if (temp) {
-      store = JSON.parse(temp);
-    } else {
-      store = new PanelStore([]);
-    }
-    return store;
-  }
-
-  private static savePanelStore(store: PanelStore) {
-    const json = JSON.stringify(store);
-    logger.info(DrawingPanel.TAG, '存', json);
-    localStorage.setItem(DrawingPanel.PANEL_STORE, json);
-  }
-
   private onDrawingEnd = (shape: Shape) => {
     logger.info(DrawingPanel.TAG, '画完了', shape);
+    let type = ShapeRecognitionTool.test(shape.coordinates);
+    shape.label = type;
     const ctx = this.canvas.getContext('2d');
     ctx.save();
     ctx.fillStyle = DrawingPanel.labelColor;
     ctx.font = DrawingPanel.labelFont;
-    ctx.fillText('未定义', shape.startPoint.x, shape.startPoint.y);
+    ctx.fillText(shape.label, shape.startPoint.x, shape.startPoint.y);
     ctx.restore();
-  }
+  };
 
   private initCanvas(options: DrawingPanelOptions) {
-    const container: HTMLElement = this.container;
-    const errorMsg = '创建画板失败';
-    if (!container) {
-      throw new Error(errorMsg);
-    }
-    this.canvas = document.createElement('canvas');
-    if (!this.canvas) {
-      throw new Error(errorMsg);
-    }
     const canvas = this.canvas;
     canvas.width = options.width;
     canvas.height = options.height;
@@ -155,6 +140,17 @@ export class DrawingPanel {
       canvas.style[key] = options.style[key];
     }
     this.options = options;
-    container.appendChild(canvas);
   }
+
+  private init(containerID: string, options: DrawingPanelOptions) {
+    const container = document.getElementById(containerID);
+    if (!container) {
+      logger.error('没拿到容器');
+    }
+    this.canvas = document.createElement('canvas');
+    container.appendChild(this.canvas);
+    this.initCanvas(options);
+  }
+
+
 }
\ No newline at end of file

drawing-panel/src/drawing/drawing-tool-custom.js

@@ -5,12 +5,10 @@ var DrawingToolCustom = /** @class */ (function () {
     function DrawingToolCustom(canvas) {
         this.canvas = canvas;
         this.drawing = false;
-        this.shapeStack = [];
     }
     DrawingToolCustom.prototype.init = function (onDrawingEnd) {
         var _this = this;
         var ctx = this.canvas.getContext('2d');
-        ctx.save();
         var canvas = this.canvas;
         // 监听事件
         canvas.onmousedown = function (e) {
@@ -42,8 +40,6 @@ var DrawingToolCustom = /** @class */ (function () {
                     shape.id = DrawingToolCustom.tag + DrawingToolCustom.counter;
                     DrawingToolCustom.counter++;
                     _this.drawing = false;
-                    // 推入状态栈
-                    _this.shapeStack.push(shape);
                     onDrawingEnd(shape);
                 }
             };

drawing-panel/src/drawing/drawing-tool-custom.js.map

-{"version":3,"file":"drawing-tool-custom.js","sourceRoot":"","sources":["drawing-tool-custom.ts"],"names":[],"mappings":";;AAEA,0CAAqC;AAErC;IAQE,2BAAY,MAAyB;QACnC,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;QACrB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;QACrB,IAAI,CAAC,UAAU,GAAG,EAAE,CAAC;IACvB,CAAC;IAED,gCAAI,GAAJ,UAAK,YAAqC;QAA1C,iBAwCC;QAvCC,IAAM,GAAG,GAAG,IAAI,CAAC,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;QACzC,GAAG,CAAC,IAAI,EAAE,CAAA;QACV,IAAM,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC;QAC3B,OAAO;QACP,MAAM,CAAC,WAAW,GAAG,UAAC,CAAC;YACrB,gBAAM,CAAC,IAAI,CAAC,iBAAiB,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC;YAC1C,IAAI,KAAI,CAAC,OAAO,EAAE;gBAChB,OAAO;aACR;YACD,KAAI,CAAC,OAAO,GAAG,IAAI,CAAC;YACpB,OAAO;YACP,IAAM,CAAC,GAAG,CAAC,CAAC,OAAO,GAAG,MAAM,CAAC,UAAU,CAAC;YACxC,IAAM,CAAC,GAAG,CAAC,CAAC,OAAO,GAAG,MAAM,CAAC,SAAS,CAAC;YACvC,MAAM;YACN,GAAG,CAAC,SAAS,EAAE,CAAC;YAChB,GAAG,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;YACjB,YAAY;YACZ,IAAI,KAAK,GAAU,EAAC,EAAE,EAAE,EAAE,EAAE,WAAW,EAAE,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,UAAU,EAAE,EAAC,CAAC,GAAA,EAAE,CAAC,GAAA,EAAC,EAAC,CAAC;YAC/E,YAAY;YACZ,MAAM,CAAC,WAAW,GAAG,UAAA,CAAC;gBACpB,IAAM,CAAC,GAAG,CAAC,CAAC,OAAO,GAAG,MAAM,CAAC,UAAU,CAAC;gBACxC,IAAM,CAAC,GAAG,CAAC,CAAC,OAAO,GAAG,MAAM,CAAC,SAAS,CAAC;gBACvC,GAAG,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;gBACjB,GAAG,CAAC,MAAM,EAAE,CAAC;gBACb,KAAK,CAAC,WAAW,CAAC,IAAI,CAAC,EAAC,CAAC,GAAA,EAAE,CAAC,GAAA,EAAC,CAAC,CAAC;YACjC,CAAC,CAAC;YACF,MAAM,CAAC,SAAS,GAAG,UAAA,CAAC;gBAClB,OAAO;gBACP,MAAM,CAAC,WAAW,GAAG,IAAI,CAAC;gBAC1B,IAAI,YAAY,EAAE;oBAChB,KAAK,CAAC,EAAE,GAAG,iBAAiB,CAAC,GAAG,GAAG,iBAAiB,CAAC,OAAO,CAAC;oBAC7D,iBAAiB,CAAC,OAAO,EAAE,CAAC;oBAC5B,KAAI,CAAC,OAAO,GAAG,KAAK,CAAC;oBACrB,QAAQ;oBACR,KAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;oBAC5B,YAAY,CAAC,KAAK,CAAC,CAAC;iBACrB;YACH,CAAC,CAAC;QACJ,CAAC,CAAA;IACH,CAAC;IAED,gCAAI,GAAJ;QACE,IAAI,CAAC,MAAM,CAAC,WAAW,GAAG,IAAI,CAAC;IACjC,CAAC;IAvDM,yBAAO,GAAW,CAAC,CAAC;IACpB,qBAAG,GAAG,QAAQ,CAAC;IAwDxB,wBAAC;CAAA,AA5DD,IA4DC;AA5DY,8CAAiB"}
\ No newline at end of file
+{"version":3,"file":"drawing-tool-custom.js","sourceRoot":"","sources":["drawing-tool-custom.ts"],"names":[],"mappings":";;AAEA,0CAAqC;AAErC;IAOE,2BAAY,MAAyB;QACnC,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;QACrB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;IACvB,CAAC;IAED,gCAAI,GAAJ,UAAK,YAAqC;QAA1C,iBAqCC;QApCC,IAAM,GAAG,GAAG,IAAI,CAAC,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;QACzC,IAAM,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC;QAC3B,OAAO;QACP,MAAM,CAAC,WAAW,GAAG,UAAC,CAAC;YACrB,gBAAM,CAAC,IAAI,CAAC,iBAAiB,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC;YAC1C,IAAI,KAAI,CAAC,OAAO,EAAE;gBAChB,OAAO;aACR;YACD,KAAI,CAAC,OAAO,GAAG,IAAI,CAAC;YACpB,OAAO;YACP,IAAM,CAAC,GAAG,CAAC,CAAC,OAAO,GAAG,MAAM,CAAC,UAAU,CAAC;YACxC,IAAM,CAAC,GAAG,CAAC,CAAC,OAAO,GAAG,MAAM,CAAC,SAAS,CAAC;YACvC,MAAM;YACN,GAAG,CAAC,SAAS,EAAE,CAAC;YAChB,GAAG,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;YACjB,YAAY;YACZ,IAAI,KAAK,GAAU,EAAC,EAAE,EAAE,EAAE,EAAE,WAAW,EAAE,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,UAAU,EAAE,EAAC,CAAC,GAAA,EAAE,CAAC,GAAA,EAAC,EAAC,CAAC;YAC/E,YAAY;YACZ,MAAM,CAAC,WAAW,GAAG,UAAA,CAAC;gBACpB,IAAM,CAAC,GAAG,CAAC,CAAC,OAAO,GAAG,MAAM,CAAC,UAAU,CAAC;gBACxC,IAAM,CAAC,GAAG,CAAC,CAAC,OAAO,GAAG,MAAM,CAAC,SAAS,CAAC;gBACvC,GAAG,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;gBACjB,GAAG,CAAC,MAAM,EAAE,CAAC;gBACb,KAAK,CAAC,WAAW,CAAC,IAAI,CAAC,EAAC,CAAC,GAAA,EAAE,CAAC,GAAA,EAAC,CAAC,CAAC;YACjC,CAAC,CAAC;YACF,MAAM,CAAC,SAAS,GAAG,UAAA,CAAC;gBAClB,OAAO;gBACP,MAAM,CAAC,WAAW,GAAG,IAAI,CAAC;gBAC1B,IAAI,YAAY,EAAE;oBAChB,KAAK,CAAC,EAAE,GAAG,iBAAiB,CAAC,GAAG,GAAG,iBAAiB,CAAC,OAAO,CAAC;oBAC7D,iBAAiB,CAAC,OAAO,EAAE,CAAC;oBAC5B,KAAI,CAAC,OAAO,GAAG,KAAK,CAAC;oBACrB,YAAY,CAAC,KAAK,CAAC,CAAC;iBACrB;YACH,CAAC,CAAC;QACJ,CAAC,CAAA;IACH,CAAC;IAED,gCAAI,GAAJ;QACE,IAAI,CAAC,MAAM,CAAC,WAAW,GAAG,IAAI,CAAC;IACjC,CAAC;IAlDM,yBAAO,GAAW,CAAC,CAAC;IACpB,qBAAG,GAAG,QAAQ,CAAC;IAkDxB,wBAAC;CAAA,AAtDD,IAsDC;AAtDY,8CAAiB"}
\ No newline at end of file

drawing-panel/src/drawing/drawing-tool-custom.ts

@@ -8,17 +8,14 @@ export class DrawingToolCustom implements DrawingTool{
   static counter: number = 0;
   static tag = 'custom';
   canvas: HTMLCanvasElement;
-  shapeStack: Shape[];
 
   constructor(canvas: HTMLCanvasElement) {
     this.canvas = canvas;
     this.drawing = false;
-    this.shapeStack = [];
   }
 
   init(onDrawingEnd?: (shape: Shape) => void): void {
     const ctx = this.canvas.getContext('2d');
-    ctx.save()
     const canvas = this.canvas;
     // 监听事件
     canvas.onmousedown = (e) => {
@@ -50,8 +47,6 @@ export class DrawingToolCustom implements DrawingTool{
           shape.id = DrawingToolCustom.tag + DrawingToolCustom.counter;
           DrawingToolCustom.counter++;
           this.drawing = false;
-          // 推入状态栈
-          this.shapeStack.push(shape);
           onDrawingEnd(shape);
         }
       };
@@ -61,5 +56,4 @@ export class DrawingToolCustom implements DrawingTool{
   stop() {
     this.canvas.onmousedown = null;
   }
-
 }
\ No newline at end of file

drawing-panel/src/drawing/drawing-tool.ts

@@ -3,7 +3,6 @@ import { Shape } from './shape';
 export interface DrawingTool {
   canvas: HTMLCanvasElement;
   drawing: boolean;
-  shapeStack: Shape[];
   init(onDrawingEnd?: (shape: Shape) => void): void;
   stop();
 }
\ No newline at end of file

drawing-panel/src/drawing/shape.ts

@@ -5,7 +5,7 @@ export interface Shape {
   label: string;
 }
 
-interface Point {
+export interface Point {
   x: number;
   y: number;
 }
\ No newline at end of file

drawing-panel/src/main.js

@@ -4,18 +4,20 @@ var drawing_panel_1 = require("./drawing/drawing-panel");
 var drawing_tool_custom_1 = require("./drawing/drawing-tool-custom");
 var $ = require("jquery");
 var logger_1 = require("./utils/logger");
+var panel_state_manager_1 = require("./panel-state-manager/panel-state-manager");
 var tool;
 var panel;
 var states = [];
 var SAVE_BTN_ID = 'save-btn';
 var NEW_BTN_ID = 'new-btn';
 var STATE_LIST_ID = 'state-list';
-var CONTAINER_ID = 'container';
 var TAG = 'main.ts';
+var CONTAINER_ID = 'container';
 window.onload = function (e) {
     panel = new drawing_panel_1.DrawingPanel(CONTAINER_ID, { width: 800, height: 600 });
     tool = new drawing_tool_custom_1.DrawingToolCustom(panel.getCanvas());
     panel.setDrawingTool(tool);
+    panel.setStateManager(new panel_state_manager_1.PanelStateManagerByLocalStorage());
     // 初始列表
     states = panel.getPanelStates();
     refreshList();

drawing-panel/src/main.js.map

-{"version":3,"file":"main.js","sourceRoot":"","sources":["main.ts"],"names":[],"mappings":";;AAAA,yDAAmE;AACnE,qEAAkE;AAClE,0BAA4B;AAC5B,yCAAoC;AAEpC,IAAI,IAAI,CAAC;AACT,IAAI,KAAmB,CAAC;AACxB,IAAI,MAAM,GAAiB,EAAE,CAAC;AAE9B,IAAM,WAAW,GAAG,UAAU,CAAC;AAC/B,IAAM,UAAU,GAAG,SAAS,CAAC;AAC7B,IAAM,aAAa,GAAG,YAAY,CAAC;AACnC,IAAM,YAAY,GAAG,WAAW,CAAC;AACjC,IAAM,GAAG,GAAG,SAAS,CAAC;AAEtB,MAAM,CAAC,MAAM,GAAG,UAAC,CAAC;IAChB,KAAK,GAAG,IAAI,4BAAY,CAAC,YAAY,EAAE,EAAC,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAC,CAAC,CAAC;IAClE,IAAI,GAAG,IAAI,uCAAiB,CAAC,KAAK,CAAC,SAAS,EAAE,CAAC,CAAC;IAChD,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;IAE3B,OAAO;IACP,MAAM,GAAG,KAAK,CAAC,cAAc,EAAE,CAAC;IAChC,WAAW,EAAE,CAAC;IAEd,IAAI,OAAO,GAAG,QAAQ,CAAC,cAAc,CAAC,WAAW,CAAC,CAAC;IACnD,IAAI,OAAO,EAAE;QACX,OAAO,CAAC,OAAO,GAAG,UAAU,CAAC;KAC9B;IAED,IAAI,MAAM,GAAG,QAAQ,CAAC,cAAc,CAAC,UAAU,CAAC,CAAC;IACjD,MAAM,CAAC,OAAO,GAAG,SAAS,CAAC;AAC7B,CAAC,CAAA;AAGD,IAAM,UAAU,GAAG;IACjB,MAAM,GAAG,KAAK,CAAC,UAAU,EAAE,CAAC;IAC5B,WAAW,EAAE,CAAC;AAChB,CAAC,CAAC;AACF,IAAM,SAAS,GAAG;IAChB,KAAK,CAAC,WAAW,EAAE,CAAC;AAEtB,CAAC,CAAA;AAGD,IAAM,WAAW,GAAG;IAClB,gBAAM,CAAC,IAAI,CAAC,GAAG,EAAE,QAAQ,EAAE,MAAM,CAAC,CAAC;IACnC,IAAM,IAAI,GAAG,CAAC,CAAC,GAAG,GAAG,aAAa,CAAC,CAAC;IACpC,IAAI,CAAC,KAAK,EAAE,CAAC;IACb,gBAAM,CAAC,IAAI,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,CAAC,CAAC;4BACtB,KAAK;QACZ,IAAI,EAAE,GAAG,CAAC,CAAC,WAAW,CAAC,CAAC;QACxB,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;QAClB,gBAAM,CAAC,IAAI,CAAC,GAAG,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;QAC9B,EAAE,CAAC,EAAE,CAAC,OAAO,EAAE,UAAC,CAAC;YACf,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAC7B,CAAC,CAAC,CAAC;QACH,EAAE,CAAC,QAAQ,CAAC,YAAY,CAAC,CAAC;QAC1B,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;IAClB,CAAC;IATD,KAAkB,UAAM,EAAN,iBAAM,EAAN,oBAAM,EAAN,IAAM;QAAnB,IAAI,KAAK,eAAA;gBAAL,KAAK;KASb;AACH,CAAC,CAAA"}
\ No newline at end of file
+{"version":3,"file":"main.js","sourceRoot":"","sources":["main.ts"],"names":[],"mappings":";;AAAA,yDAAuD;AACvD,qEAAkE;AAClE,0BAA4B;AAC5B,yCAAoC;AACpC,iFAAwG;AAExG,IAAI,IAAI,CAAC;AACT,IAAI,KAAmB,CAAC;AACxB,IAAI,MAAM,GAAiB,EAAE,CAAC;AAE9B,IAAM,WAAW,GAAG,UAAU,CAAC;AAC/B,IAAM,UAAU,GAAG,SAAS,CAAC;AAC7B,IAAM,aAAa,GAAG,YAAY,CAAC;AACnC,IAAM,GAAG,GAAG,SAAS,CAAC;AACtB,IAAM,YAAY,GAAG,WAAW,CAAC;AAEjC,MAAM,CAAC,MAAM,GAAG,UAAC,CAAC;IAChB,KAAK,GAAG,IAAI,4BAAY,CAAC,YAAY,EAAE,EAAC,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAC,CAAC,CAAC;IAClE,IAAI,GAAG,IAAI,uCAAiB,CAAC,KAAK,CAAC,SAAS,EAAE,CAAC,CAAC;IAChD,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;IAC3B,KAAK,CAAC,eAAe,CAAC,IAAI,qDAA+B,EAAE,CAAC,CAAC;IAE7D,OAAO;IACP,MAAM,GAAG,KAAK,CAAC,cAAc,EAAE,CAAC;IAChC,WAAW,EAAE,CAAC;IAEd,IAAI,OAAO,GAAG,QAAQ,CAAC,cAAc,CAAC,WAAW,CAAC,CAAC;IACnD,IAAI,OAAO,EAAE;QACX,OAAO,CAAC,OAAO,GAAG,UAAU,CAAC;KAC9B;IAED,IAAI,MAAM,GAAG,QAAQ,CAAC,cAAc,CAAC,UAAU,CAAC,CAAC;IACjD,MAAM,CAAC,OAAO,GAAG,SAAS,CAAC;AAC7B,CAAC,CAAA;AAGD,IAAM,UAAU,GAAG;IACjB,MAAM,GAAG,KAAK,CAAC,UAAU,EAAE,CAAC;IAC5B,WAAW,EAAE,CAAC;AAChB,CAAC,CAAC;AACF,IAAM,SAAS,GAAG;IAChB,KAAK,CAAC,WAAW,EAAE,CAAC;AAEtB,CAAC,CAAA;AAGD,IAAM,WAAW,GAAG;IAClB,gBAAM,CAAC,IAAI,CAAC,GAAG,EAAE,QAAQ,EAAE,MAAM,CAAC,CAAC;IACnC,IAAM,IAAI,GAAG,CAAC,CAAC,GAAG,GAAG,aAAa,CAAC,CAAC;IACpC,IAAI,CAAC,KAAK,EAAE,CAAC;IACb,gBAAM,CAAC,IAAI,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,CAAC,CAAC;4BACtB,KAAK;QACZ,IAAI,EAAE,GAAG,CAAC,CAAC,WAAW,CAAC,CAAC;QACxB,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;QAClB,gBAAM,CAAC,IAAI,CAAC,GAAG,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;QAC9B,EAAE,CAAC,EAAE,CAAC,OAAO,EAAE,UAAC,CAAC;YACf,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAC7B,CAAC,CAAC,CAAC;QACH,EAAE,CAAC,QAAQ,CAAC,YAAY,CAAC,CAAC;QAC1B,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;IAClB,CAAC;IATD,KAAkB,UAAM,EAAN,iBAAM,EAAN,oBAAM,EAAN,IAAM;QAAnB,IAAI,KAAK,eAAA;gBAAL,KAAK;KASb;AACH,CAAC,CAAA"}
\ No newline at end of file

drawing-panel/src/main.ts

-import { DrawingPanel, PanelState } from './drawing/drawing-panel';
+import { DrawingPanel } from './drawing/drawing-panel';
 import { DrawingToolCustom } from './drawing/drawing-tool-custom';
 import * as $ from 'jquery';
 import logger from './utils/logger';
+import { PanelState, PanelStateManagerByLocalStorage } from './panel-state-manager/panel-state-manager';
 
 var tool;
 var panel: DrawingPanel;
@@ -10,13 +11,14 @@ var states: PanelState[] = [];
 const SAVE_BTN_ID = 'save-btn';
 const NEW_BTN_ID = 'new-btn';
 const STATE_LIST_ID = 'state-list';
-const CONTAINER_ID = 'container';
 const TAG = 'main.ts';
+const CONTAINER_ID = 'container';
 
 window.onload = (e) => {
   panel = new DrawingPanel(CONTAINER_ID, {width: 800, height: 600});
   tool = new DrawingToolCustom(panel.getCanvas());
   panel.setDrawingTool(tool);
+  panel.setStateManager(new PanelStateManagerByLocalStorage());
 
   // 初始列表
   states = panel.getPanelStates();

drawing-panel/src/panel-state-manager/panel-state-manager.js

+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var logger_1 = require("../utils/logger");
+var PanelState = /** @class */ (function () {
+    function PanelState(id, data) {
+        this.id = id;
+        this.data = data;
+    }
+    return PanelState;
+}());
+exports.PanelState = PanelState;
+/**
+ * 用localStorage实现的画板状态管理
+ */
+var PanelStateManagerByLocalStorage = /** @class */ (function () {
+    function PanelStateManagerByLocalStorage() {
+        var res = window.localStorage.getItem(PanelStateManagerByLocalStorage.KEY);
+        if (res) {
+            this.states = JSON.parse(res);
+        }
+        else {
+            this.states = [];
+        }
+        logger_1.default.info(PanelStateManagerByLocalStorage.TAG, '初始得到states', this.states);
+    }
+    PanelStateManagerByLocalStorage.prototype.forEach = function (fn) {
+        this.states.forEach(fn);
+    };
+    PanelStateManagerByLocalStorage.prototype.save = function (state) {
+        logger_1.default.info(PanelStateManagerByLocalStorage.TAG, '保存', state);
+        this.states.push(state);
+        window.localStorage.setItem(PanelStateManagerByLocalStorage.KEY, JSON.stringify(this.states));
+    };
+    PanelStateManagerByLocalStorage.prototype.clearAll = function () {
+        logger_1.default.info(PanelStateManagerByLocalStorage.TAG, '清除所有');
+        this.states = [];
+        window.localStorage.removeItem(PanelStateManagerByLocalStorage.KEY);
+    };
+    PanelStateManagerByLocalStorage.TAG = 'PanelStateManagerByLocalStorage';
+    PanelStateManagerByLocalStorage.KEY = 'panel-states';
+    return PanelStateManagerByLocalStorage;
+}());
+exports.PanelStateManagerByLocalStorage = PanelStateManagerByLocalStorage;
+//# sourceMappingURL=panel-state-manager.js.map
\ No newline at end of file

drawing-panel/src/panel-state-manager/panel-state-manager.js.map

+{"version":3,"file":"panel-state-manager.js","sourceRoot":"","sources":["panel-state-manager.ts"],"names":[],"mappings":";;AAAA,0CAAqC;AAErC;IACE,oBACS,EAAU,EACV,IAAY;QADZ,OAAE,GAAF,EAAE,CAAQ;QACV,SAAI,GAAJ,IAAI,CAAQ;IAClB,CAAC;IACN,iBAAC;AAAD,CAAC,AALD,IAKC;AALY,gCAAU;AAgBvB;;GAEG;AACH;IAKE;QACE,IAAI,GAAG,GAAG,MAAM,CAAC,YAAY,CAAC,OAAO,CAAC,+BAA+B,CAAC,GAAG,CAAC,CAAC;QAC3E,IAAI,GAAG,EAAE;YACP,IAAI,CAAC,MAAM,GAAI,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;SAChC;aAAM;YACL,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC;SAClB;QACD,gBAAM,CAAC,IAAI,CAAC,+BAA+B,CAAC,GAAG,EAAE,YAAY,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;IAC9E,CAAC;IAED,iDAAO,GAAP,UAAQ,EAA+B;QACrC,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC;IAC1B,CAAC;IAED,8CAAI,GAAJ,UAAK,KAAiB;QACpB,gBAAM,CAAC,IAAI,CAAC,+BAA+B,CAAC,GAAG,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;QAC9D,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACxB,MAAM,CAAC,YAAY,CAAC,OAAO,CAAC,+BAA+B,CAAC,GAAG,EAAE,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC;IAChG,CAAC;IAED,kDAAQ,GAAR;QACE,gBAAM,CAAC,IAAI,CAAC,+BAA+B,CAAC,GAAG,EAAE,MAAM,CAAC,CAAC;QACzD,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC;QACjB,MAAM,CAAC,YAAY,CAAC,UAAU,CAAC,+BAA+B,CAAC,GAAG,CAAC,CAAC;IACtE,CAAC;IA5Bc,mCAAG,GAAG,iCAAiC,CAAC;IACxC,mCAAG,GAAG,cAAc,CAAC;IA6BtC,sCAAC;CAAA,AA/BD,IA+BC;AA/BY,0EAA+B"}
\ No newline at end of file

drawing-panel/src/panel-state-manager/panel-state-manager.ts

+import logger from '../utils/logger';
+
+export class PanelState {
+  constructor(
+    public id: string,
+    public data: string
+  ) {}
+}
+
+/**
+ * 画板状态管理，迭代器模式
+ */
+export interface IPanelStateManager {
+  save(state: PanelState);
+  forEach(fn: (state: PanelState) => void): void;
+  clearAll();
+}
+
+/**
+ * 用localStorage实现的画板状态管理
+ */
+export class PanelStateManagerByLocalStorage implements IPanelStateManager{
+  private static TAG = 'PanelStateManagerByLocalStorage';
+  private static KEY = 'panel-states';
+  private states: PanelState[];
+
+  constructor() {
+    let res = window.localStorage.getItem(PanelStateManagerByLocalStorage.KEY);
+    if (res) {
+      this.states =  JSON.parse(res);
+    } else {
+      this.states = [];
+    }
+    logger.info(PanelStateManagerByLocalStorage.TAG, '初始得到states', this.states);
+  }
+
+  forEach(fn: (state: PanelState) => void): void {
+    this.states.forEach(fn);
+  }