提交代码

src/iscs_new/controller.js

@@ -142,7 +142,7 @@ export default class Controller extends Eventful {
 	}
 
 	isSpecialSubType(e) {
-		return ['@drag', '@selecting'].includes(e.subType);
+		return ['@drag', '@border', '@selecting'].includes(e.subType);
 	}
 
 	isSelected(code) {

src/iscs_new/core/abstractShape.js

@@ -5,9 +5,9 @@ import Group from 'zrender/src/container/Group';
 import shapeRender from  '../constant/shapeRender';
 import defaultStyle from '../config/defaultStyle';
 
-function shapeStyleBuilder(model) {
+function shapeStyleBuilder({subType, model}) {
 	return {
-		subType: '__hover__',
+		subType: subType,
 		...shapeRender,
 		code: model.code,
 		z: 9998,
@@ -26,8 +26,6 @@ function shapeStyleBuilder(model) {
 	}
 }
 
-console.log(color);
-
 // 图形抽象层
 // 继承Group是为了直接获取的到包围框不需要进行坐标变化。
 class AbstractShape extends Group {
@@ -36,7 +34,7 @@ class AbstractShape extends Group {
 		this.model = model;
 		this.shapeType = shapeType;
 		this.shapeFactory = shapeFactory;
-		this.instanceHightLight = new graphic.Rect(shapeStyleBuilder(this.model));
+		this.instanceHightLight = new graphic.Rect(shapeStyleBuilder({subType: '@align', model: this.model}));
 	}
 
 	// 拖动

src/iscs_new/draggable/Image.js

@@ -5,10 +5,10 @@ import * as eventTool from 'zrender/src/core/event';
 import Group from 'zrender/src/container/Group';
 import shapeRender from  '../constant/shapeRender';
 
-function shapeStyleBuilder({shape}) {
+function shapeStyleBuilder({subType, shape}) {
 	return {
 		...shapeRender,
-		subType: '@drag',
+		subType,
 		z: 9998,
 		draggable: false,
 		cursor: 'crosshair',
@@ -45,7 +45,7 @@ export default class ImageDraggable extends Group {
 
 	createShape(shape) {
 		return new graphic.Circle({
-			...shapeStyleBuilder({shape}),
+			...shapeStyleBuilder({subType: '@drag', shape}),
 			onmousedown: this.mousedown.bind(this),
 			onmousemove: _.throttle(this.mousemove.bind(this), 100),
 			onmouseup: this.mouseup.bind(this)

src/iscs_new/draggable/Line.js

@@ -3,10 +3,10 @@ import * as graphic from '../core/graphic';
 import * as eventTool from 'zrender/src/core/event';
 import shapeRender from  '../constant/shapeRender';
 
-function lineStyleBuilder() {
+function lineStyleBuilder({subType}) {
 	return {
 		...shapeRender,
-		subType: '@drag',
+		subType,
 		z: 9998,
 		shape: {x1: 0, y1: 0, x2: 0, y2: 0 },
 		style: {
@@ -16,10 +16,10 @@ function lineStyleBuilder() {
 	}
 }
 
-function circleStyleBuilder({shape}) {
+function circleStyleBuilder({subType, shape}) {
 	return {
 		...shapeRender,
-		subType: '@drag',
+		subType,
 		z: 9999,
 		draggable: false,
 		cursor: 'crosshair',
@@ -50,14 +50,14 @@ export default class LineDraggable extends graphic.Group {
 				this.add(this.shapes[index]);
 			});
 
-			this.line = new graphic.Line(lineStyleBuilder());
+			this.line = new graphic.Line(lineStyleBuilder({subType: '@drag'}));
 			this.add(this.line);
 		}
 	}
 
 	createShape(shape) {
 		return new graphic.Circle({
-			...circleStyleBuilder({shape}),
+			...circleStyleBuilder({subType: '@drag', shape}),
 			onmousedown: this.mousedown.bind(this),
 			onmousemove: _.throttle(this.mousemove.bind(this), 100),
 			onmouseup: this.mouseup.bind(this)

src/iscs_new/factory/index.js

@@ -18,9 +18,10 @@ const shapeBuilderMap = {
 	[shapeType.Compose]: Compose
 }
 
-function shapeStyleBuilder() {
+function shapeStyleBuilder({subType}) {
 	return {
 		...shapeRender,
+		subType,
 		z: 9999,
 		silent: true,
 		shape: {

src/iscs_new/map.js

@@ -9,7 +9,6 @@ import Controller from './controller';
 import StateHandle  from './stateHandle';
 import ShapeFactory from './factory';
 import orders from './utils/orders';
-import ModelBuilder from './modelBuilder';
 
 const renderer = 'canvas';
 const devicePixelRatio = 1;
@@ -70,13 +69,15 @@ class JMap {
 		// 状态处理器
 		this.$stateHandle = new StateHandle(this);
 
-		// 绘制模块
-		this.modelBuilder = new ModelBuilder(this.getZr());
-
 		this.disable = function() {
 			this.off(this.events.Pan, optionHandler);
 			this.off(this.events.Zoom, optionHandler);
 		};
+
+		// 加载插件
+		if (opts.plugins) {
+			opts.plugins.forEach(el => { this.use(el); });
+		}
 	}
 
 	setMap(templates=[], source={}, eventOpts={}) {
@@ -269,6 +270,10 @@ class JMap {
 		this.$zr.refresh()
 	}
 
+	use(install) {
+		install(this);
+	}
+
 	destroy() {
 		this.disable();
 		this.clear();
@@ -322,6 +327,9 @@ class JMap {
 			case events.Keyup:
 				this.$controller.on(events.Keyup, cb, context);
 				break;
+			case events.BuildShape:
+				this.$controller.on(events.BuildShape, cb, context);
+				break;
 			}
 		}
 	}
@@ -370,6 +378,9 @@ class JMap {
 			case events.Keyup:
 				this.$controller.off(events.Keyup, cb);
 				break;
+			case events.BuildShape:
+				this.$controller.off(events.BuildShape, cb);
+				break;
 			}
 		}
 	}

src/iscs_new/modelBuilder.js

@@ -1,44 +0,0 @@
-class Handle {
-	constructor() {
-	}
-
-	onmousedown(e) {
-		// console.log('mousedown', e)
-	}
-
-	onmousemove(e) {
-		// console.log('mousemove', e)
-	}
-
-	onmouseup(e) {
-		// console.log('mouseup', e)
-	}
-}
-
-class ModelBuilder {
-	constructor(zr) {
-		this.zr = zr;
-		this.handle = new Handle();
-	}
-
-	addEventListener() {
-		if (this.zr) {
-			this.zr.on('mousedown', this.handle.onmousedown, this.handle);
-			this.zr.on('mousemove', this.handle.onmousemove, this.handle);
-			this.zr.on('mouseup', this.handle.onmouseup, this.handle);
-		}
-	}
-
-	removeEventListener() {
-		if (this.zr) {
-			this.zr.off('mousedown', this.handle.onmousedown);
-			this.zr.off('mousemove', this.handle.onmousemove);
-			this.zr.off('mouseup', this.handle.onmouseup);
-		}
-	}
-
-	buildModel(shapeType) {
-	}
-}
-
-export default ModelBuilder;

src/iscs_new/selectingHandle.js

@@ -1,6 +1,7 @@
 import * as graphic from './core/graphic.js';
 import shapeRender from  './constant/shapeRender';
 import shapeLayer from './constant/shapeLayer';
+import events from './utils/events.js';
 import defaultStyle from './config/defaultStyle';
 
 const vernierStyle = {
@@ -11,23 +12,24 @@ const vernierStyle = {
 	},
 	axisLine: {
 		lineStyle: {
+			strokeNoScale: true,
 			lineWidth: 30,
-			stroke: 'rgba(255,255,255,0.6)',
-			shadowBlur: 17,
-			shadowColor: 'rgba(0,255,0,0.2)',
-			strokeNoScale: true
+			stroke: 'rgba(255,255,255,0.6)'
 		}
 	},
 	axisTick: {
+		distance: 18,
 		length: 5,
 		lineStyle: {
+			strokeNoScale: true,
 			lineWidth: 2,
 			stroke: '#000000'
 		}
 	},
 	axisLabel: {
-		distance: 3,
+		distance: 5,
 		textStyle: {
+			strokeNoScale: true,
 			textStroke: '#000',
 			textAlign: 'center',
 			textVerticalAlign: 'center'
@@ -35,16 +37,16 @@ const vernierStyle = {
 	}
 }
 class Vernier extends graphic.Group {
-	constructor(args) {
-		super(args);
+	constructor({subType}) {
+		super({subType});
 		this._scaleRate = 1;
-		this.area = null;
-		this.axisLineX = null;
-		this.axisLineY = null;
+		this._area = null;
+		this._axisLineX = null;
+		this._axisLineY = null;
 	}
 
-	_area(rect) {
-		this.area = new graphic.Rect({
+	_createArea(rect) {
+		this._area = new graphic.Rect({
 			...shapeRender,
 			z: 9999,
 			silent: true,
@@ -53,20 +55,22 @@ class Vernier extends graphic.Group {
 				...vernierStyle.area.areaStyle
 			}
 		})
-		this.add(this.area);
+		this.add(this._area);
 	}
 
-	_lineAxisX(rect) {
-		const minX = Math.min(rect.x, rect.x + rect.width);
-		const minY = Math.min(rect.y, rect.y + rect.height)
-		const maxX = Math.max(rect.x, rect.x + rect.width);
+	_createLineAxisX(rect) {
+		const minX = rect.x;
+		const minY = rect.y;
+		const maxX = rect.x + rect.width;
+		const maxY = rect.y + rect.height;
+		const direction = (Math.abs(rect.width)/rect.width);
 		const axisLineWidthHalf = vernierStyle.axisLine.lineStyle.lineWidth/this._scaleRate/2;
 
-		this.axisLineX = new graphic.Line({
+		this._axisLineX = new graphic.Line({
 			...shapeRender,
 			z: 9999,
 			silent: true,
-			position: [0, -axisLineWidthHalf],
+			position: [0, -axisLineWidthHalf*direction],
 			shape: {
 				x1: minX,
 				y1: minY,
@@ -74,63 +78,69 @@ class Vernier extends graphic.Group {
 				y2: minY
 			},
 			style: {
-				...vernierStyle.axisLine.lineStyle,
-				shadowOffsetX: -5
+				...vernierStyle.axisLine.lineStyle
 			}
 		})
 
 		const step = 4/this._scaleRate;
 		const count = parseInt(Math.abs(rect.width/step));
 
-		for(var i = 0; i in new Array(count).fill(0); i++) {
-			const offset = step * i;
+		for(var i = 0; i in new Array(count+1).fill(0); i++) {
+			const offset = step * i * direction;
 			const tick = i % vernierStyle.axisTick.length == 0
-			const len = tick? axisLineWidthHalf*0.8: axisLineWidthHalf*0.5;
+			const len = tick? vernierStyle.axisTick.distance*0.7: vernierStyle.axisTick.distance*0.5;
 			if (tick) {
-				this.add(new graphic.Text({
+				this.add(new graphic.Line({
 					...shapeRender,
 					z: 10000,
 					silent: true,
-					position: [minX + offset, minY - axisLineWidthHalf - vernierStyle.axisLabel.distance],
+					shape: {
+						x1: minX + offset,
+						y1: minY,
+						x2: minX + offset,
+						y2: minY - len * direction / this._scaleRate
+					},
 					style: {
+						...vernierStyle.axisTick.lineStyle,
 						...vernierStyle.axisLabel.textStyle,
-						text: i /  vernierStyle.axisTick.length
+						text: i%2? '': i/vernierStyle.axisTick.length/2,
+						textPosition: direction > 0? 'top': 'bottom'
+					}
+				}))
+			} else {
+				this.add(new graphic.Line({
+					...shapeRender,
+					z: 10000,
+					silent: true,
+					shape: {
+						x1: minX + offset,
+						y1: minY,
+						x2: minX + offset,
+						y2: minY - len * direction / this._scaleRate
+					},
+					style: {
+						...vernierStyle.axisTick.lineStyle
 					}
 				}))
 			}
-
-			this.add(new graphic.Line({
-				...shapeRender,
-				z: 10000,
-				silent: true,
-				shape: {
-					x1: minX + offset,
-					y1: minY,
-					x2: minX + offset,
-					y2: minY - len
-				},
-				style: {
-					...vernierStyle.axisTick.lineStyle,
-					strokeNoScale: true,
-				}
-			}))
 		}
 
-		this.add(this.axisLineX);
+		this.add(this._axisLineX);
 	}
 
-	_lineAxisY(rect) {
-		const minX = Math.min(rect.x, rect.x + rect.width);
-		const minY = Math.min(rect.y, rect.y + rect.height)
-		const maxX = Math.max(rect.x, rect.x + rect.width);
-		const maxY = Math.max(rect.y, rect.y + rect.height)
+	_createLineAxisY(rect) {
+		const minX = rect.x;
+		const minY = rect.y;
+		const maxX = rect.x + rect.width;
+		const maxY = rect.y + rect.height;
+		const direction = (Math.abs(rect.width)/rect.width);
 		const axisLineWidthHalf = vernierStyle.axisLine.lineStyle.lineWidth/this._scaleRate/2;
 
-		this.axisLineY = new graphic.Line({
+		this._axisLineY = new graphic.Line({
 			...shapeRender,
 			z: 9999,
 			silent: true,
-			position: [-axisLineWidthHalf, 0],
+			position: [-axisLineWidthHalf*direction, 0],
 			shape: {
 				x1: minX,
 				y1: minY,
@@ -138,74 +148,72 @@ class Vernier extends graphic.Group {
 				y2: maxY
 			},
 			style: {
-				...vernierStyle.axisLine.lineStyle,
-				shadowOffsetY: -5
+				...vernierStyle.axisLine.lineStyle
 			}
 		})
-		this.add(this.axisLineY);
+		this.add(this._axisLineY);
 
 
 		const step = 4/this._scaleRate;
 		const count = parseInt(Math.abs(rect.height/step));
 
-		for(var i = 0; i in new Array(count).fill(0); i++) {
-			const offset = step * i;
+		for(var i = 0; i in new Array(count+1).fill(0); i++) {
+			const offset = step * i * direction;
 			const tick = i % vernierStyle.axisTick.length == 0;
-			const len = tick? axisLineWidthHalf*0.7: axisLineWidthHalf*0.5;
+			const len = tick? vernierStyle.axisTick.distance*0.7: vernierStyle.axisTick.distance*0.5;
 			if (tick) {
-				this.add(new graphic.Text({
+				this.add(new graphic.Line({
 					...shapeRender,
 					z: 10000,
 					silent: true,
-					position: [minX - axisLineWidthHalf - vernierStyle.axisLabel.distance, minY + offset],
+					shape: {
+						x1: minX,
+						y1: minY + offset,
+						x2: minX - len * direction / this._scaleRate,
+						y2: minY + offset
+					},
 					style: {
+						...vernierStyle.axisTick.lineStyle,
 						...vernierStyle.axisLabel.textStyle,
-						text: i /  vernierStyle.axisTick.length
+						text: i%2? '': i/vernierStyle.axisTick.length/2,
+						textPosition: direction > 0? 'left': 'right'
+					}
+				}))
+			} else {
+				this.add(new graphic.Line({
+					...shapeRender,
+					z: 10000,
+					silent: true,
+					shape: {
+						x1: minX,
+						y1: minY + offset,
+						x2: minX - len * direction / this._scaleRate,
+						y2: minY + offset
+					},
+					style: {
+						...vernierStyle.axisTick.lineStyle
 					}
 				}))
 			}
-
-			this.add(new graphic.Line({
-				...shapeRender,
-				z: 10000,
-				silent: true,
-				shape: {
-					x1: minX,
-					y1: minY + offset,
-					x2: minX - len,
-					y2: minY + offset
-				},
-				style: {
-					...vernierStyle.axisTick.lineStyle,
-					strokeNoScale: true,
-				}
-			}))
 		}
 	}
 
 	render(rect) {
 		this.removeAll();
 		this._scaleRate = this.parent? this.parent.transform[0]: 1;
-		this._area(rect);
-		this._lineAxisX(rect);
-		this._lineAxisY(rect);
+		this._createArea(rect);
+		this._createLineAxisX(rect);
+		this._createLineAxisY(rect);
 	}
 
 	setShape(rect) {
 		this.render(rect);
 	}
-
-	getBoundingRect() {
-		if (this.area) {
-			return this.area.getBoundingRect();
-		}
-		return super.getBoundingRect();
-	}
 }
 
-// function shapeStyleBuilder() {
+// function shapeStyleBuilder({subType}) {
 // 	return {
-// 		subType: '@selecting',
+// 		subType,
 // 		...shapeRender,
 // 		z: 9999,
 // 		shape: {
@@ -229,7 +237,7 @@ export default class SelectingHandle {
 
 		this.begPoint = null;
 		this.endPoint = null;
-		// this.selecting = new graphic.Rect(shapeStyleBuilder());
+		// this.selecting = new graphic.Rect(shapeStyleBuilder({subType: '@selecting'}));
 		this.selecting = new Vernier({subType: '@selecting'});
 	}
 
@@ -256,12 +264,17 @@ export default class SelectingHandle {
 		this.$painter.addToLayer(shapeLayer.Selecting)(this.selecting);
 
 		const selectingRect = this.selecting.getBoundingRect();
+		const keyStr = this.$controller.getKeyStr();
 		Object.values(this.$map.getMapShape()).forEach(el => {
 			if (el.model && !el.model.composeCode && this.checkSelectingRectContainShape(selectingRect, el)) {
 				this.setSelected(el);
 			}
 		});
 
+		if (['Alt'].includes(keyStr)) {
+			this.$controller.trigger(events.BuildShape, {...selectingRect, option: this.$map.getOption()});
+		}
+
 		this.clear();
 	}
 

src/iscs_new/utils/events.js

@@ -12,4 +12,5 @@ export default {
 	ViewUpdate: 'viewUpdate',
 	StateUpdate: 'stateUpdate',
 	OptionUpdate: 'optionUpdate',
+	BuildShape: 'buildShape'
 }

src/views/test/index.vue

@@ -17,6 +17,7 @@ import Vue from 'vue';
 import Iscs from '@/iscs_new/map';
 import orders from '@/iscs_new/utils/orders';
 import shapeType from '@/iscs_new/constant/shapeType';
+import shapeBuilderPlugin from '@/iscs_new/plugins/shapeBuilder';
 import { mapGetters } from 'vuex';
 import { exitFullscreen } from '@/utils/screen';
 
@@ -67,10 +68,8 @@ export default {
     },
     mounted() {
 		this.init();
-		this.$iscs.modelBuilder.addEventListener();
     },
     beforeDestroy() {
-		this.$iscs.modelBuilder.removeEventListener();
         this.destroy();
     },
     methods: {
@@ -91,7 +90,10 @@ export default {
                     scaleRate: 1,
                     offsetX: 0,
                     offsetY: 0
-                }
+                },
+				plugins: [
+					shapeBuilderPlugin
+				]
             });
 
 			Vue.prototype.$iscs = this.$iscs;