From bfaf8ea7d8ead0164852054d6dcd1d4241fd4132 Mon Sep 17 00:00:00 2001
From: ival <610568032@qq.com>
Date: Thu, 8 Apr 2021 18:40:12 +0800
Subject: [PATCH 1/2] =?UTF-8?q?iscs=E5=89=8D=E7=AB=AF=E7=BB=98=E5=88=B6?=
 =?UTF-8?q?=E5=A2=9E=E5=8A=A0indexDb=E5=AD=98=E5=82=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/iscs_new/factory/index.js              |  1 -
 src/utils/indexedDb.js                     |  1 +
 src/views/iscs_new/iscsDraw/index.vue      | 22 +++---
 src/views/iscs_new/iscsDraw/iscsCanvas.vue | 28 +++++--
 src/views/iscs_new/utils/indexedDb.js      | 85 ++++++++++++++--------
 5 files changed, 91 insertions(+), 46 deletions(-)

diff --git a/src/iscs_new/factory/index.js b/src/iscs_new/factory/index.js
index 07bed7656..e866d4ed3 100644
--- a/src/iscs_new/factory/index.js
+++ b/src/iscs_new/factory/index.js
@@ -105,7 +105,6 @@ class ShapeFactory extends Eventful {
 		list.forEach(el => {
 			this.mapTemplate[el.type] = templateParser.parse(el);
 		})
-		console.log(this.mapTemplate);
 	}
 
 	parse(source={}, take=None) {
diff --git a/src/utils/indexedDb.js b/src/utils/indexedDb.js
index 2a882c8a3..3cffc3021 100644
--- a/src/utils/indexedDb.js
+++ b/src/utils/indexedDb.js
@@ -18,6 +18,7 @@ export function openIndexedDB() {
         Vue.prototype.$db = event.target.result;
         Vue.prototype.$db.createObjectStore('mapData', { keyPath: 'id' });
         Vue.prototype.$db.createObjectStore('runPlan', { keyPath: 'templateId' });
+		Vue.prototype.$db.createObjectStore('composeList', { keyPath: 'id' });
     };
 }
 // 新增数据
diff --git a/src/views/iscs_new/iscsDraw/index.vue b/src/views/iscs_new/iscsDraw/index.vue
index 450dcb3c3..3f1fa5035 100644
--- a/src/views/iscs_new/iscsDraw/index.vue
+++ b/src/views/iscs_new/iscsDraw/index.vue
@@ -36,7 +36,7 @@ import BuilderFactory from '@/iscs_new/core/form/builderFactory';
 import DataForm from '../components/dataForm';
 import orders from '@/iscs_new/utils/orders';
 import * as utils from '@/iscs_new/utils/utils';
-import IndexedDb from '../utils/indexedDb.js';
+import idb from '../utils/indexedDb.js';
 import shapeType from '@/iscs_new/constant/shapeType.js';
 
 export default {
@@ -70,14 +70,9 @@ export default {
         }
     },
     mounted() {
-		this.db = new IndexedDb(['composeList']);
-		console.log(this.db, 11111111111);
         this.composeName = this.$route.query.composeName;
         this.elementList = new BuilderFactory().getFormList();
         this.enabledTab = this.elementList[0].code;
-    },
-    beforeDestroy() {
-
     },
     methods: {
         onIscsChange(mode, system, part) {
@@ -90,14 +85,19 @@ export default {
 			const type = this.$route.query.type||"<模型类型>";
 			const source = this.$iscs.getSource();
 			if (id && source) {
-				const shapeList = source.elementList.map(el => {
+				const elementList = source.elementList.map(el => {
 					return this.$iscs.getShapeByCode(el.code);
 				});
-				const rect = shapeList.reduce(
+				const shapeList = elementList.map(el => el.model);
+				const rect = elementList.reduce(
 					(temp,el) => el&&temp? temp.union(el.getBoundingRect().clone()): el.getBoundingRect(), null);
-				const position = [(rect.x + rect.width)/2, (rect.y + rect.height)/2];
+				const position = rect? [(rect.x + rect.width)/2, (rect.y + rect.height)/2]: [0,0];
 				const model = { id, name, type, shapeList, position };
-				console.log(model)
+				idb.remove('composeList', model.id);
+				idb.add('composeList', model);
+				idb.list('composeList').then(list => {
+					console.log(list)
+				})
 			}
         },
         onSelectTab() {
@@ -116,7 +116,7 @@ export default {
 			}
 		},
         onSubmit(){
-          this.$refs['dataform'+this.enabledTab][0].$refs['form'].validate((valid) => {
+          	this.$refs['dataform'+this.enabledTab][0].$refs['form'].validate((valid) => {
                 if (valid) {
                     const formModel = this.$refs['dataform' + this.enabledTab][0].formModel;
                     const newModel = JSON.parse(JSON.stringify(formModel));
diff --git a/src/views/iscs_new/iscsDraw/iscsCanvas.vue b/src/views/iscs_new/iscsDraw/iscsCanvas.vue
index b8c3a600d..077d92cd4 100644
--- a/src/views/iscs_new/iscsDraw/iscsCanvas.vue
+++ b/src/views/iscs_new/iscsDraw/iscsCanvas.vue
@@ -7,6 +7,7 @@
 <script>
 import Vue from 'vue';
 import Iscs from '@/iscs_new/map';
+import idb from '../utils/indexedDb.js';
 import { mapGetters } from 'vuex';
 
 export default {
@@ -79,10 +80,7 @@ export default {
                 }
             });
 
-			this.$iscs.setMap([], {
-				elementList: [],
-				composeList: []
-			}, {
+			const option = {
 				panEnable: true,
 				zoomEnable: true,
 				keyEnable: true,
@@ -90,7 +88,27 @@ export default {
 				selecting: true,
 				selectable: true,
 				reflect: true
-			});
+			}
+			if (this.$route.query.id) {
+				setTimeout(_ => {
+					idb.query('composeList', this.$route.query.id).then(resp => {
+						this.$iscs.setMap([], {
+							elementList: resp.shapeList||[],
+							composeList: []
+						}, option);
+					}).catch(error => {
+						this.$iscs.setMap([], {
+							elementList: [],
+							composeList: []
+						}, option);
+					})
+				}, 1000)
+			} else {
+				this.$iscs.setMap([], {
+					elementList: [],
+					composeList: []
+				}, option);
+			}
 
             Vue.prototype.$iscs = this.$iscs;
             this.$iscs.on('viewLoaded', this.onViewLoaded, this);
diff --git a/src/views/iscs_new/utils/indexedDb.js b/src/views/iscs_new/utils/indexedDb.js
index e17a78dc7..0c256df63 100644
--- a/src/views/iscs_new/utils/indexedDb.js
+++ b/src/views/iscs_new/utils/indexedDb.js
@@ -2,13 +2,12 @@
 import { getBaseUrl } from '@/utils/baseUrl'
 
 let db = null;
-
 class IndexedDb {
-	constructor(tableList) {
-		this.open(tableList);
+	constructor(nameList) {
+		this.open(nameList);
 	}
 
-	open(tableList) {
+	open(nameList) {
 		const baseUrl = getBaseUrl();
 		const indexedDBName = baseUrl.replace(/http.?:\/\/(.*)[\/|:].*/, "$1");
 		const request = window.indexedDB.open(indexedDBName, 1);
@@ -18,13 +17,14 @@ class IndexedDb {
 
 		request.onsuccess = function (e) {
 			db = request.result;
+			console.log('数据库打开成功');
 		};
+
 		request.onupgradeneeded = function (e) {
-			if (db) {
-				tableList.forEach(name => {
-					db.createObjectStore(name, { keyPath: 'id' });
-				})
-			}
+			db = e.target.result;
+			nameList.forEach(name => {
+				db.createObjectStore(name, { keyPath: 'id' });
+			})
 		};
 	}
 
@@ -47,6 +47,25 @@ class IndexedDb {
 		});
 	}
 
+	remove(tableName, key) {
+		return new Promise((resolve, reject) => {
+			if (db) {
+				const request = db.transaction([tableName], 'readwrite').objectStore(tableName).delete(key);
+				request.onsuccess = function(event) {
+					console.log('数据删除成功');
+					resolve(request.result);
+				};
+				request.onerror = function(event) {
+					console.log('数据删除失败');
+					reject(event);
+				};
+			} else {
+				this.open();
+				reject({message: '数据库未打开！'});
+			}
+		});
+	}
+
 	modify(tableName, data) {
 		return new Promise((resolve, reject) => {
 			if (db) {
@@ -66,25 +85,6 @@ class IndexedDb {
 		});
 	}
 
-	delete(tableName, key) {
-		return new Promise((resolve, reject) => {
-			if (db) {
-				const request = db.transaction([tableName], 'readwrite').objectStore(tableName).delete(key);
-				request.onsuccess = function(event) {
-					console.log('数据删除成功');
-					resolve(request.result);
-				};
-				request.onerror = function(event) {
-					console.log('数据删除失败');
-					reject(event);
-				};
-			} else {
-				this.open();
-				reject({message: '数据库未打开！'});
-			}
-		});
-	}
-
 	query(tableName, key) {
 		return new Promise((resolve, reject) => {
 			if (db) {
@@ -104,9 +104,36 @@ class IndexedDb {
 		});
 	}
 
+	list(tableName) {
+		return new Promise((resolve, reject) => {
+			if (db) {
+				const store = db.transaction([tableName]).objectStore(tableName);
+
+				var request = store.openCursor();
+				var list = [];
+				request.onsuccess = function(e) {
+					var c = e.target.result;
+					if (c) {
+						list.push(c.value);
+						c.continue();
+					} else {
+						resolve(list);
+					}
+				};
+				request.onerror = function(e) {
+					console.log('数据读取失败');
+					reject(e);
+				};
+			} else {
+				this.open();
+				reject({message: '数据库未打开！'});
+			}
+		});
+	}
+
 	destroy() {
 	}
 }
 
-export default IndexedDb;
+export default new IndexedDb(['composeList']);
 

From 1be38bdb76d07ff1504600b4cde12e1ea2b3f946 Mon Sep 17 00:00:00 2001
From: ival <610568032@qq.com>
Date: Fri, 9 Apr 2021 09:39:57 +0800
Subject: [PATCH 2/2] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/iscs_new/controller.js                 |   4 +-
 src/iscs_new/draggable/Image.js            | 132 ---------------------
 src/iscs_new/draggable/Line.js             | 126 --------------------
 src/iscs_new/factory/index.js              | 111 ++++++++++-------
 src/iscs_new/selectingHandle.js            |  35 ++----
 src/views/iscs_new/iscsDraw/index.vue      |   4 +-
 src/views/iscs_new/iscsDraw/iscsCanvas.vue |   2 +-
 src/views/iscs_new/utils/indexedDb.js      |  15 +--
 8 files changed, 91 insertions(+), 338 deletions(-)
 delete mode 100644 src/iscs_new/draggable/Image.js
 delete mode 100644 src/iscs_new/draggable/Line.js

diff --git a/src/iscs_new/controller.js b/src/iscs_new/controller.js
index 35ea580e6..71adfb7ca 100644
--- a/src/iscs_new/controller.js
+++ b/src/iscs_new/controller.js
@@ -14,7 +14,7 @@ class MouseEvent {
 		this.clientX = e.event.clientX;
 		this.clientY = e.event.clientY;
 
-		if (shape && !['@selecting', '@border', '@drag'].includes(shape.subType)) {
+		if (shape && !['@ignore', '@selecting', '@border', '@drag'].includes(shape.subType)) {
 			if (shape.code) {
 				let composeCode = shape.composeCode;
 				let compose = null;
@@ -143,7 +143,7 @@ export default class Controller extends Eventful {
 	}
 
 	isSpecialSubType(e) {
-		return ['@drag', '@border', '@selecting'].includes(e.subType);
+		return ['@ignore', '@selecting', '@drag', '@border'].includes(e.subType);
 	}
 
 	isSelected(code) {
diff --git a/src/iscs_new/draggable/Image.js b/src/iscs_new/draggable/Image.js
deleted file mode 100644
index 209e23d49..000000000
--- a/src/iscs_new/draggable/Image.js
+++ /dev/null
@@ -1,132 +0,0 @@
-
-import _ from 'lodash';
-import * as graphic from '../core/graphic';
-import * as eventTool from 'zrender/src/core/event';
-import Group from 'zrender/src/container/Group';
-import shapeRender from  '../constant/shapeRender';
-
-function shapeStyleBuilder({subType, shape}) {
-	return {
-		...shapeRender,
-		subType,
-		z: 9998,
-		draggable: false,
-		cursor: 'crosshair',
-		shape,
-		style: {
-			fill: `rgba(200,200,200,0.5)`
-		}
-	}
-}
-export default class ImageDraggable extends Group {
-	constructor(handle, draggle=false) {
-		super();
-		this.draggle = draggle;
-		this.handle = handle;
-		this.style = handle.$map.getDefaultStyleDict();
-		this.invTransform = [1, 0, 0, 1, 0, 0];
-		this.target = null;
-		this.shapes = [];
-		this.offset = null;
-		this.r = 2;
-
-		if (this.draggle &&
-			this.handle.e.target &&
-			this.handle.e.target.instance) {
-			const bound = this.handle.e.target.instance.getBoundingRect();
-			const r = (this.handle.e.target.model.width||this.r)+3;
-			this.shapes.push(this.createShape({ cx: bound.x, cy: bound.y, r}));
-			this.shapes.push(this.createShape({ cx: bound.x+bound.width, cy: bound.y, r}));
-			this.shapes.push(this.createShape({ cx: bound.x+bound.width, cy: bound.y+bound.height, r}));
-			this.shapes.push(this.createShape({ cx: bound.x, cy: bound.y+bound.height, r}));
-			this.shapes.forEach(shape => { this.add(shape); });
-		}
-	}
-
-	createShape(shape) {
-		return new graphic.Circle({
-			...shapeStyleBuilder({subType: '@drag', shape}),
-			onmousedown: this.mousedown.bind(this),
-			onmousemove: _.throttle(this.mousemove.bind(this), 100),
-			onmouseup: this.mouseup.bind(this)
-		});
-	}
-
-	updateShapeRect(dx, dy) {
-		const index = this.shapes.indexOf(this.target);
-		if (index >= 0) {
-			this.shapes[(3-index)%4].setShape({cx: this.shapes[(3-index)%4].shape.cx+dx});
-			this.shapes[(5-index)%4].setShape({cy: this.shapes[(5-index)%4].shape.cy+dy});
-		}
-
-		return this.getBoundingRect().clone();
-	}
-
-	updateModel(target, bound) {
-		target.model.width = bound.width-this.r*2;
-		target.model.height = bound.height-this.r*2;
-	}
-
-	setShape(dx, dy) {
-		const bound = this.updateShapeRect(dx, dy);
-
-		if (this.handle.e.target &&
-			this.handle.e.target.instance) {
-			this.handle.e.target.model.point = { x: bound.x+this.r, y: bound.y+this.r };
-
-			this.handle.e.target.instance.inactive(this.handle.$zr);
-			this.handle.e.target.instance.setShape(this.handle.e.target.model);
-			this.handle.e.target.instance.active(this.handle.$zr);
-		}
-	}
-
-	mousedown(e) {
-		if (e.target && ['@selecting', '@border', '@drag'].includes(e.target.subType)) {
-			if (!eventTool.isMiddleOrRightButtonOnMouseUpDown(e)) {
-				this.target = e.target;
-				this.offset = {x: e.offsetX, y: e.offsetY};
-				this.setDraggable(true);
-			}
-		}
-	}
-
-	mousemove(e) {
-		eventTool.stop(e.event);
-		if (this.target &&
-			this.handle.e.target &&
-			this.offset) {
-			if (!eventTool.isMiddleOrRightButtonOnMouseUpDown(e)) {
-				const type = this.handle.e.target.type;
-				const dx = Math.round(e.offsetX-this.offset.x);
-				const dy = Math.round(e.offsetY-this.offset.y);
-
-				this.setShape(...this.handle.normalizedDiff(dx, dy));
-				this.handle.$controller.trigger(this.handle.$controller.events.Reflect, {dx, dy});
-
-				this.offset = {x: e.offsetX, y: e.offsetY};
-			}
-		}
-	}
-
-	mouseup(e) {
-		if (this.target &&
-			this.handle.e.target &&
-			this.offset) {
-			const type = this.handle.e.target.type;
-			const dx = Math.round(e.offsetX-this.offset.x);
-			const dy = Math.round(e.offsetY-this.offset.y);
-			this.setShape(...this.handle.normalizedDiff(dx, dy));
-			this.handle.$controller.trigger(this.handle.$controller.events.Reflect, {dx, dy});
-
-			this.setDraggable(false);
-			this.offset = null;
-			this.target = null;
-		}
-	}
-
-	setDraggable(draggable) {
-		this.shapes.forEach(shape => {
-			shape.attr('draggable', draggable);
-		});
-	}
-}
diff --git a/src/iscs_new/draggable/Line.js b/src/iscs_new/draggable/Line.js
deleted file mode 100644
index 09ef044ad..000000000
--- a/src/iscs_new/draggable/Line.js
+++ /dev/null
@@ -1,126 +0,0 @@
-import _ from 'lodash';
-import * as graphic from '../core/graphic';
-import * as eventTool from 'zrender/src/core/event';
-import shapeRender from  '../constant/shapeRender';
-
-function lineStyleBuilder({subType}) {
-	return {
-		...shapeRender,
-		subType,
-		z: 9998,
-		shape: {x1: 0, y1: 0, x2: 0, y2: 0 },
-		style: {
-			lineWidth: 2,
-			stroke: `rgba(200,200,200,0.8)`
-		}
-	}
-}
-
-function circleStyleBuilder({subType, shape}) {
-	return {
-		...shapeRender,
-		subType,
-		z: 9999,
-		draggable: false,
-		cursor: 'crosshair',
-		shape,
-		style: {
-			opacity: 0.5,
-			fill: `rgba(200,200,200,0.3)`
-		},
-	}
-}
-export default class LineDraggable extends graphic.Group {
-	constructor(handle, draggle=true) {
-		super();
-		this.draggle = draggle;
-		this.handle = handle;
-		this.style = handle.$map.getDefaultStyleDict();
-		this.invTransform = [1, 0, 0, 1, 0, 0];
-		this.target = null;
-		this.shapes = [];
-		this.line = null;
-		this.r = 2;
-		this.offset = null;
-
-		if (this.draggle && this.handle.e.target && this.handle.e.target.model.points) {
-			this.handle.e.target.model.points.forEach((elem, index) => {
-				const r = (this.handle.e.target.model.width||this.r)+1;
-				this.shapes.push(this.createShape({ cx: elem.x, cy: elem.y, r }));
-				this.add(this.shapes[index]);
-			});
-
-			this.line = new graphic.Line(lineStyleBuilder({subType: '@drag'}));
-			this.add(this.line);
-		}
-	}
-
-	createShape(shape) {
-		return new graphic.Circle({
-			...circleStyleBuilder({subType: '@drag', shape}),
-			onmousedown: this.mousedown.bind(this),
-			onmousemove: _.throttle(this.mousemove.bind(this), 100),
-			onmouseup: this.mouseup.bind(this)
-		});
-	}
-
-	setShape(e) {
-		const dx = Math.round(e.offsetX-this.offset.x);
-		const dy = Math.round(e.offsetY-this.offset.y);
-
-		if (this.handle.e.target && this.handle.e.target.instance) {
-			this.offset = {x: e.offsetX, y: e.offsetY};
-			this.handle.e.target.instance.inactive(this.handle.$zr);
-			this.handle.e.target.instance.setShape(this.handle.e.target.model);
-			this.handle.e.target.instance.active(this.handle.$zr);
-			this.handle.$controller.trigger(this.handle.$controller.events.Reflect, {dx, dy});
-		}
-	}
-
-	mousedown(e) {
-		this.offset = {x: e.offsetX, y: e.offsetY};
-		if (e.target && ['@drag'].includes(e.target.subType)) {
-			this.target = e.target;
-			if (!eventTool.isMiddleOrRightButtonOnMouseUpDown(e)) {
-				this.setDraggable(true);
-			}
-		}
-	}
-
-	mousemove(e) {
-		eventTool.stop(e.event);
-		if (this.target && this.handle.e.target) {
-			if (!eventTool.isMiddleOrRightButtonOnMouseUpDown(e) ) {
-				this.handle.e.target.model.points = this.shapes.map(elem => {
-					const position = elem.position || [0, 0];
-					const x = elem.shape.cx + position[0];
-					const y = elem.shape.cy + position[1];
-					return {x, y};
-				});
-
-				this.setShape(e);
-			}
-		}
-	}
-
-	mouseup(e) {
-		if (this.target && this.handle.e.target) {
-			this.handle.e.target.model.points = this.shapes.map(elem => {
-				const position = elem.position || [0, 0];
-				const x = elem.shape.cx + position[0];
-				const y = elem.shape.cy + position[1];
-				return {x, y};
-			});
-			this.setShape(e);
-			this.setDraggable(false);
-			this.line.setShape({x1: 0, y1: 0, x2: 0, y2: 0 });
-			this.target = null;
-		}
-	}
-
-	setDraggable(draggable) {
-		this.shapes.forEach(shape => {
-			shape.attr('draggable', draggable);
-		});
-	}
-}
diff --git a/src/iscs_new/factory/index.js b/src/iscs_new/factory/index.js
index e866d4ed3..14faf28d9 100644
--- a/src/iscs_new/factory/index.js
+++ b/src/iscs_new/factory/index.js
@@ -17,52 +17,51 @@ const shapeBuilderMap = {
 	[shapeType.Element]: Element,
 	[shapeType.Compose]: Compose
 }
-
-function shapeStyleBuilder({subType}) {
-	return {
-		...shapeRender,
-		subType,
-		z: 9999,
-		silent: true,
-		shape: {
-			x: 0,
-			y: 0,
-			width: 0,
-			height: 0
-		},
-		style: {
-			lineDash: defaultStyle.borderDash,
-			lineWidth: defaultStyle.borderWidth,
-			stroke: defaultStyle.borderColor,
-			fill: defaultStyle.transparentColor
+const shapeSensitizeStyle = {
+	border: {
+		borderStyle: {
+			lineDash: [4, 4],
+			lineWidth: 1,
+			stroke: '#000',
+			fill: 'transparent'
 		}
 	}
 }
-
-function update2List(source, model, action, name='') {
-	const list = source[name];
-
-	if (!list) { source[name] = []; }
-
-	let updateModel = model;
-	const i = list.findIndex(elem => { return elem.code == model.code; })
-	switch(action.order) {
-		case orders.BINDING:
-		case orders.ADD:
-			list.push(model);
-			break;
-		case orders.UNBINDING:
-		case orders.DELETE:
-			i >= 0 && list.splice(i, 1);
-			break;
-		case orders.UPDATE:
-			updateModel = Object.assign(list[i]||{}, model)
-			break;
+class Perspective extends graphic.Group {
+	constructor(args) {
+		super(args);
 	}
 
-	return updateModel;
-}
+	_createBorder(rect) {
+		this._border = new graphic.Rect({
+			...shapeRender,
+			subType: '@border',
+			z: 9999,
+			silent: true,
+			shape: {
+				...rect
+			},
+			style: {
+				...shapeSensitizeStyle.border.borderStyle
+			}
+		})
+		this.add(this._border);
+	}
 
+	_createAngles() {
+
+	}
+
+	render(rect) {
+		this.removeAll();
+		this._createBorder(rect);
+		this._createAngles();
+	}
+
+	setShape(rect) {
+		this.render(rect);
+	}
+}
 class ShapeFactory extends Eventful {
 	constructor(map) {
 		super();
@@ -70,7 +69,7 @@ class ShapeFactory extends Eventful {
 		this.$painter = map.getPainter();
 		this.$controller = map.getController();
 
-		this.border = new graphic.Rect(shapeStyleBuilder({subType: '@border'}));
+		this.sensitize = new Perspective({subType: '@ignore'});
 
 		this.tipsHandle = new TipsHandle(map);
 
@@ -188,12 +187,12 @@ class ShapeFactory extends Eventful {
 	}
 
 	showBorder(shape) {
-		this.border.setShape(shape.getBoundingRect());
-		this.$painter.addToLayer(shapeLayer.HightLight)(this.border);
+		this.sensitize.setShape(shape.getBoundingRect());
+		this.$painter.addToLayer(shapeLayer.HightLight)(this.sensitize);
 	}
 
 	hideBorder(shape) {
-		this.$painter.removeFromLayer(shapeLayer.HightLight)(this.border);
+		this.$painter.removeFromLayer(shapeLayer.HightLight)(this.sensitize);
 	}
 
 	addToLayer(level) {
@@ -236,4 +235,28 @@ class ShapeFactory extends Eventful {
 	}
 }
 
+function update2List(source, model, action, name='') {
+	const list = source[name];
+
+	if (!list) { source[name] = []; }
+
+	let updateModel = model;
+	const i = list.findIndex(elem => { return elem.code == model.code; })
+	switch(action.order) {
+		case orders.BINDING:
+		case orders.ADD:
+			list.push(model);
+			break;
+		case orders.UNBINDING:
+		case orders.DELETE:
+			i >= 0 && list.splice(i, 1);
+			break;
+		case orders.UPDATE:
+			updateModel = Object.assign(list[i]||{}, model)
+			break;
+	}
+
+	return updateModel;
+}
+
 export default ShapeFactory;
diff --git a/src/iscs_new/selectingHandle.js b/src/iscs_new/selectingHandle.js
index d2300f83b..ac8943156 100644
--- a/src/iscs_new/selectingHandle.js
+++ b/src/iscs_new/selectingHandle.js
@@ -35,10 +35,13 @@ const vernierStyle = {
 			textVerticalAlign: 'center'
 		}
 	}
+
+
 }
+
 class Vernier extends graphic.Group {
-	constructor({subType}) {
-		super({subType});
+	constructor(args) {
+		super(args);
 		this._scaleRate = 1;
 		this._area = null;
 		this._axisLineX = null;
@@ -47,10 +50,13 @@ class Vernier extends graphic.Group {
 
 	_createArea(rect) {
 		this._area = new graphic.Rect({
+			subType: '@ignore',
 			...shapeRender,
 			z: 9999,
 			silent: true,
-			shape: { ...rect },
+			shape: {
+				...rect
+			},
 			style: {
 				...vernierStyle.area.areaStyle
 			}
@@ -89,7 +95,7 @@ class Vernier extends graphic.Group {
 		for(var i = 0; i in new Array(count+1).fill(0); i++) {
 			const offset = step * i * directionX;
 			const tick = i % vernierStyle.axisTick.length == 0
-			const len = tick? vernierStyle.axisTick.distance*0.7: vernierStyle.axisTick.distance*0.5;
+			const len = tick? vernierStyle.axisTick.distance*0.7: vernierStyle.axisTick.distance*0.4;
 			if (tick) {
 				this.add(new graphic.Line({
 					...shapeRender,
@@ -162,7 +168,7 @@ class Vernier extends graphic.Group {
 		for(var i = 0; i in new Array(count+1).fill(0); i++) {
 			const offset = step * i * directionY;
 			const tick = i % vernierStyle.axisTick.length == 0;
-			const len = tick? vernierStyle.axisTick.distance*0.7: vernierStyle.axisTick.distance*0.5;
+			const len = tick? vernierStyle.axisTick.distance*0.7: vernierStyle.axisTick.distance*0.4;
 			if (tick) {
 				this.add(new graphic.Line({
 					...shapeRender,
@@ -212,24 +218,6 @@ class Vernier extends graphic.Group {
 		this.render(rect);
 	}
 }
-
-// function shapeStyleBuilder({subType}) {
-// 	return {
-// 		subType,
-// 		...shapeRender,
-// 		z: 9999,
-// 		shape: {
-// 			x: 0,
-// 			y: 0,
-// 			width: 0,
-// 			height: 0
-// 		},
-// 		style: {
-// 			fill: `rgba(200,200,200,0.3)`
-// 		}
-// 	}
-// }
-
 export default class SelectingHandle {
 	constructor(map, controller) {
 		this.$map = map;
@@ -239,7 +227,6 @@ export default class SelectingHandle {
 
 		this.begPoint = null;
 		this.endPoint = null;
-		// this.selecting = new graphic.Rect(shapeStyleBuilder({subType: '@selecting'}));
 		this.selecting = new Vernier({subType: '@selecting'});
 	}
 
diff --git a/src/views/iscs_new/iscsDraw/index.vue b/src/views/iscs_new/iscsDraw/index.vue
index 5c64d073d..08544395a 100644
--- a/src/views/iscs_new/iscsDraw/index.vue
+++ b/src/views/iscs_new/iscsDraw/index.vue
@@ -93,8 +93,8 @@ export default {
 					(temp,el) => el&&temp? temp.union(el.getBoundingRect().clone()): el.getBoundingRect(), null);
 				const position = rect? [(rect.x + rect.width)/2, (rect.y + rect.height)/2]: [0,0];
 				const model = { id, name, type, shapeList, position };
-				idb.remove('composeList', model.id);
-				idb.add('composeList', model);
+				idb.delete('composeList', model.id);
+				idb.write('composeList', model);
 				idb.list('composeList').then(list => {
 					console.log(list)
 				})
diff --git a/src/views/iscs_new/iscsDraw/iscsCanvas.vue b/src/views/iscs_new/iscsDraw/iscsCanvas.vue
index 077d92cd4..c93860ef4 100644
--- a/src/views/iscs_new/iscsDraw/iscsCanvas.vue
+++ b/src/views/iscs_new/iscsDraw/iscsCanvas.vue
@@ -91,7 +91,7 @@ export default {
 			}
 			if (this.$route.query.id) {
 				setTimeout(_ => {
-					idb.query('composeList', this.$route.query.id).then(resp => {
+					idb.select('composeList', this.$route.query.id).then(resp => {
 						this.$iscs.setMap([], {
 							elementList: resp.shapeList||[],
 							composeList: []
diff --git a/src/views/iscs_new/utils/indexedDb.js b/src/views/iscs_new/utils/indexedDb.js
index 0c256df63..a285f3802 100644
--- a/src/views/iscs_new/utils/indexedDb.js
+++ b/src/views/iscs_new/utils/indexedDb.js
@@ -24,11 +24,12 @@ class IndexedDb {
 			db = e.target.result;
 			nameList.forEach(name => {
 				db.createObjectStore(name, { keyPath: 'id' });
+				console.log(name);
 			})
 		};
 	}
 
-	add(tableName, data) {
+	write(tableName, data) {
 		return new Promise((resolve, reject) => {
 			if (db) {
 				const request = db.transaction([tableName], 'readwrite').objectStore(tableName).add(data);
@@ -47,7 +48,7 @@ class IndexedDb {
 		});
 	}
 
-	remove(tableName, key) {
+	delete(tableName, key) {
 		return new Promise((resolve, reject) => {
 			if (db) {
 				const request = db.transaction([tableName], 'readwrite').objectStore(tableName).delete(key);
@@ -71,11 +72,11 @@ class IndexedDb {
 			if (db) {
 				const request = db.transaction([tableName], 'readwrite').objectStore(tableName).put(data);
 				request.onsuccess = function(e) {
-					console.log('数据更新成功');
+					console.log('数据修改成功');
 					resolve(request.result);
 				};
 				request.onerror = function(e) {
-					console.log('数据更新失败');
+					console.log('数据修改失败');
 					reject(e);
 				};
 			} else {
@@ -85,16 +86,16 @@ class IndexedDb {
 		});
 	}
 
-	query(tableName, key) {
+	select(tableName, key) {
 		return new Promise((resolve, reject) => {
 			if (db) {
 				const request = db.transaction([tableName]).objectStore(tableName).get(key);
 				request.onsuccess = function(e) {
-					console.log('数据读取成功');
+					console.log('数据查询成功');
 					resolve(request.result);
 				};
 				request.onerror = function(e) {
-					console.log('数据读取失败');
+					console.log('数据查询失败');
 					reject(e);
 				};
 			} else {