提交 d2ef6a5e 编辑于 作者: wenxiangdong's avatar wenxiangdong
浏览文件

重构

上级 5c0cf1ec
......@@ -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",
......
......@@ -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"
}
}
"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';
......
{"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
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
......@@ -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);
}
};
......
{"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
......@@ -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
......@@ -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
......@@ -5,7 +5,7 @@ export interface Shape {
label: string;
}
interface Point {
export interface Point {
x: number;
y: number;
}
\ No newline at end of file
......@@ -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();
......
{"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
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();
......
"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
{"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
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);
} <