修改代码

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) {

src/iscs_new/draggable/Image.js

@@ -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);
-		});
-	}
-}

src/iscs_new/draggable/Line.js

@@ -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);
-		});
-	}
-}

src/iscs_new/factory/index.js

@@ -17,52 +17,51 @@ const shapeBuilderMap = {
 	[shapeType.Element]: Element,
 	[shapeType.Compose]: Compose
 }
-
+const shapeSensitizeStyle = {
-function shapeStyleBuilder({subType}) {
+	border: {
-	return {
+		borderStyle: {
-		...shapeRender,
+			lineDash: [4, 4],
-		subType,
+			lineWidth: 1,
-		z: 9999,
+			stroke: '#000',
-		silent: true,
+			fill: 'transparent'
-		shape: {
-			x: 0,
-			y: 0,
-			width: 0,
-			height: 0
-		},
-		style: {
-			lineDash: defaultStyle.borderDash,
-			lineWidth: defaultStyle.borderWidth,
-			stroke: defaultStyle.borderColor,
-			fill: defaultStyle.transparentColor
 		}
 	}
 }
-
+class Perspective extends graphic.Group {
-function update2List(source, model, action, name='') {
+	constructor(args) {
-	const list = source[name];
+		super(args);
-
-	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;
+	_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.sensitize.setShape(shape.getBoundingRect());
-		this.$painter.addToLayer(shapeLayer.HightLight)(this.border);
+		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;

src/iscs_new/selectingHandle.js

@@ -35,10 +35,13 @@ const vernierStyle = {
 			textVerticalAlign: 'center'
 		}
 	}
+
+
 }
+
 class Vernier extends graphic.Group {
-	constructor({subType}) {
+	constructor(args) {
-		super({subType});
+		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'});
 	}
 

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.delete('composeList', model.id);
-				idb.add('composeList', model);
+				idb.write('composeList', model);
 				idb.list('composeList').then(list => {
 					console.log(list)
 				})

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: []

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 {