Merge branch 'master' of https://git.qcloud.com/joylink/jl-nclient

# Conflicts:
#	src/jmap/map.js
#	src/jmap/shape/Signal/index.js
#	src/views/jmap/index.vue

src/jmap/map.js

@@ -42,14 +42,13 @@ class Jmap {
 		const width = opts.dom.clientWidth;
 		const height = opts.dom.clientHeight;
 
-		this.optionsHandler = this.setOptions.bind(this);
-
 		this.$zr = zrender.init(opts.dom, Object.assign({ renderer, devicePixelRatio, width, height }, opts.config));
 
 		this.$options = new Options(Object.assign({ scaleRate: 1, offsetX: 0, offsetY: 0 }, opts.options || {})); // 缩放
+		this.$painter = new Painter(this);
+		this.$painter.updateTransform(this.$options);
 
-		this.$painter = new Painter(this); // 绘画层
-		this.$painter.updateZoomTransform(this.$options);
+		this.optionsHandler = this.setOptions.bind(this);
 
 		this.$mouseController = new MouseController(this);
 		this.$mouseController.enable();
@@ -116,8 +115,8 @@ class Jmap {
 		if (payload.type === 'zoom') {
 			const zrWidth = this.$zr.getWidth();
 			const zrHeight = this.$zr.getHeight();
-			const originX = this.$options.zoomOnMouseWheel ? payload.originX : zrWidth / 2;
-			const originY = this.$options.zoomOnMouseWheel ? payload.originY : zrHeight / 2;
+			const originX = payload.originX || zrWidth / 2;
+			const originY = payload.originY || zrHeight / 2;
 			const x = (this.$options.offsetX + originX) / this.$options.scaleRate;
 			const y = (this.$options.offsetY + originY) / this.$options.scaleRate;
 			const newScaleRate = this.$options.getScaleRate(payload.scale);
@@ -130,15 +129,19 @@ class Jmap {
 		return payload || {};
 	}
 
-	setOptions(zoom) {
-		console.log(zoom, '1111');
-		this.$options.update(this.pullBack(zoom));
-		this.$painter.updateZoomTransform(this.$options);
+	setOptions(opts) {
+		this.$options.update(this.pullBack(opts));
+		this.$painter.updateTransform(this.$options);
 		if (this.methods.optionsUpdate instanceof Function) { this.methods.optionsUpdate(); }
+		if (this.$options.disabled == true) {
+			this.$mouseController.disable();
+		} else {
+			this.$mouseController.enable(opts);
+		}
 	}
 
-	setLevelInvisible(list) {
-		this.$painter.setLevelInvisible(list);
+	setLevelVisible(list, show) {
+		this.$painter.setLevelVisible(list, show);
 	}
 
 	render(list) {
@@ -247,6 +250,11 @@ class Jmap {
 		return this.mapDevice[code];
 	}
 
+	resize(opt) {
+		this.$zr.resize(opt);
+		this.$painter.updateZrSize({width: this.$zr.getWidth(), height: this.$zr.getHeight()});
+	}
+
 	refresh() {
 		this.$painter.refresh();
 	}

src/jmap/mouseController.js

@@ -32,10 +32,10 @@ class MouseController extends Eventful {
 		super();
 		this.events = jmap.getEvents();
 		this.$zr = jmap.getZr();
-		this.initController(this.$zr);
+		this.initHandler(this.$zr);
 	}
 
-	initController(zr) {
+	initHandler(zr) {
 		if (zr) {
 			const clickHandler = this.click.bind(this);
 			const contextmenuHandler = this.contextmenu.bind(this);

src/jmap/options.js

@@ -1,6 +1,5 @@
 class Options {
-	constructor(opts, zr) {
-		this.$zr = zr;
+	constructor(opts) {
 		this.scaleIndex = 0;
 		this.scaleList = [
 			0.5, 0.6, 0.7, 0.8, 0.9,
@@ -29,7 +28,7 @@ class Options {
 
 		this.throttle = opts.throttle || 100; // 刷新频率
 
-		this.disabled = false; // 是否禁用
+		this.disabled = false;
 
 		this.moveOnMouseMove = true;
 
@@ -45,20 +44,23 @@ class Options {
 		if (Number.isFinite(payload.dy)) {
 			this.offsetY -= payload.dy;
 		}
+
 		if (Number.isFinite(payload.offsetX)) {
 			this.offsetX = payload.offsetX;
 		}
 		if (Number.isFinite(payload.offsetY)) {
 			this.offsetY = payload.offsetY;
 		}
+
 		if (Number.isFinite(payload.scale)) {
 			if (Number.isFinite(payload.scale)) {
-				if (this.scaleIndex + payload.scale >= 0 && this.scaleIndex + payload.scale < this.scaleList.length) {
+				if ((this.scaleIndex + payload.scale) >= 0 && (this.scaleIndex + payload.scale) < this.scaleList.length) {
 					this.scaleIndex = this.scaleIndex + payload.scale;
 				}
 			}
 			this.scaleRate = this.scaleList[this.scaleIndex];
 		}
+
 		if (Number.isFinite(payload.scaleRate)) {
 			const idx = this.scaleList.indexOf(payload.scaleRate);
 			if (idx < 0) {
@@ -67,12 +69,15 @@ class Options {
 			this.scaleIndex = idx;
 			this.scaleRate = payload.scaleRate;
 		}
+
 		if (payload.disabled === true || payload.disabled === false) {
 			this.disabled = payload.disabled;
 		}
+
 		if (payload.moveOnMouseMove === true || payload.moveOnMouseMove === false) {
 			this.moveOnMouseMove = payload.moveOnMouseMove;
 		}
+
 		if (payload.zoomOnMouseWheel === true || payload.zoomOnMouseWheel === false) {
 			this.zoomOnMouseWheel = payload.zoomOnMouseWheel;
 		}
@@ -80,7 +85,7 @@ class Options {
 
 	getScaleRate(scale) {
 		if (Number.isFinite(scale)) {
-			if (this.scaleIndex + scale >= 0 && this.scaleIndex + scale < this.scaleList.length) {
+			if ((this.scaleIndex + scale) >= 0 && (this.scaleIndex + scale) < this.scaleList.length) {
 				return this.scaleList[this.scaleIndex + scale];
 			}
 		}

src/jmap/painter.js

@@ -2,7 +2,7 @@ import * as zrUtil from 'zrender/src/core/util';
 import Group from 'zrender/src/container/Group';
 import deviceType from './constant/deviceType';
 import shapefactory from './shape/factory';
-import Transform from './transform';
+import TransformHandle from './transformHandle';
 
 class Painter {
 	constructor(jmap) {
@@ -11,16 +11,13 @@ class Painter {
 		this.$zr = jmap.getZr();
 
 		// 视图控制器
-		this.$transform = new Transform(this, this.$zr);
+		this.$transformHandle = new TransformHandle(this, this.$zr);
 
 		// 图层数据
 		this.mapInstanceLevel = {};
 
-		// 父级图层
-		this.parentLevel = null;
-
-		// 初始绘图实例
-		this.initPainterInstance();
+		// 初始图层
+		this.initPainterLevels();
 	}
 
 	/**
@@ -28,7 +25,7 @@ class Painter {
      * @param {*} dom
      * @param {*} config
      */
-	initPainterInstance() {
+	initPainterLevels() {
 		// 添加父级图层
 		this.parentLevel = new Group({ name: '__parent__' });
 		this.$zr.add(this.parentLevel);
@@ -63,7 +60,7 @@ class Painter {
 		const type = device._type;
 		const instance = shapefactory(type, device, this.$jmap);
 		if (instance) {
-			this.$transform.transformView(instance);
+			this.$transformHandle.transformView(instance);
 			device.instance = instance;
 			this.mapInstanceLevel[type].add(instance);
 		}
@@ -93,24 +90,32 @@ class Painter {
 	}
 
 	/**
-     * 更新图层zoom
-     * @param {*} zoom
+     * 更新transform变化
+     * @param {*} opt
      */
-	updateZoomTransform(zoom) {
-		this.$transform.updateTransform(zoom);
+	updateTransform(opt) {
+		this.$transformHandle.updateTransform(opt);
 	}
 
 	/**
-	 * 设置图层显隐
+	 * 更新zrender尺寸
+	 * @param {*} opt
+	 */
+	updateZrSize(opt) {
+		this.$transformHandle.updateZrSize(opt);
+	}
+
+	/**
+	 * 设置图层可见
 	 * @param {*} code
 	 */
-	setLevelInvisible(list) {
+	setLevelVisible(list, show) {
 		zrUtil.each(Object.values(deviceType), type => {
 			const level = this.mapInstanceLevel[type];
 			if (list.includes(type)) {
-				level.hide();
+				show ? level.show() : level.hide();
 			} else {
-				level.show();
+				show ? level.hide() : level.show();
 			}
 		});
 	}

src/jmap/shape/Section/index.js

@@ -9,7 +9,7 @@ import JTriangle from '../../utils/JTriangle';
 
 /** 区段*/
 export default class Section extends Group {
-	constructor({ _code, _type, zlevel, model, state }, style, jmap) {
+	constructor({ _code, _type, zlevel, model, state }, style) {
 		super();
 		this._code = _code;
 		this._type = _type;
@@ -19,7 +19,6 @@ export default class Section extends Group {
 		this.state = state;
 		this.style = style;
 		this.selected = false;
-		this.jmap = jmap;
 		this._create();
 	}
 

src/jmap/shape/Signal/ESigDelay.js

@@ -0,0 +1,50 @@
+import Group from 'zrender/src/container/Group';
+import Text from 'zrender/src/graphic/Text';
+
+class ESigDelay extends Group {
+	constructor(model) {
+		super();
+		this.model = model;
+		this.zlevel = model.zlevel;
+		this.z = model.z;
+		this._create();
+	}
+
+	_create() {
+		this.name = new Text({
+			_subType: this.model._subType,
+			zlevel: this.zlevel,
+			z: this.z,
+			silent: this.model.silent || false,
+			style: {
+				x: this.model.x,
+				y: this.model.y,
+				text: this.model.text,
+				textFont: this.model.textFont,
+				textFill: this.model.textFill,
+				textAlign: this.model.textAlign,
+				textPosition: this.model.textPosition || 'inside',
+				textVerticalAlign: this.model.textVerticalAlign || null
+			}
+		});
+		this.add(this.name);
+	}
+
+	setStyle(model) {
+		this.name.setStyle(model);
+	}
+
+	setColor(color) {
+		this.name.setStyle('textFill', color);
+	}
+
+	hide() {
+		this.name.hide();
+	}
+
+	show() {
+		this.name.show();
+	}
+}
+
+export default ESigDelay;

src/jmap/shape/Signal/ESigName.js

@@ -0,0 +1,50 @@
+import Group from 'zrender/src/container/Group';
+import Text from 'zrender/src/graphic/Text';
+
+class ESigName extends Group {
+	constructor(model) {
+		super();
+		this.model = model;
+		this.zlevel = model.zlevel;
+		this.z = model.z;
+		this._create();
+	}
+
+	_create() {
+		this.name = new Text({
+			_subType: this.model._subType,
+			zlevel: this.zlevel,
+			z: this.z,
+			silent: this.model.silent || false,
+			style: {
+				x: this.model.x,
+				y: this.model.y,
+				text: this.model.text,
+				textFont: this.model.textFont,
+				textFill: this.model.textFill,
+				textAlign: this.model.textAlign,
+				textPosition: this.model.textPosition || 'inside',
+				textVerticalAlign: this.model.textVerticalAlign || null
+			}
+		});
+		this.add(this.name);
+	}
+
+	setStyle(model) {
+		this.name.setStyle(model);
+	}
+
+	setColor(color) {
+		this.name.setStyle('textFill', color);
+	}
+
+	hide() {
+		this.name.hide();
+	}
+
+	show() {
+		this.name.show();
+	}
+}
+
+export default ESigName;

src/jmap/shape/Signal/index.js

@@ -7,7 +7,9 @@ import ESigLmap from './ESigLmap';
 import ESigPass from './ESigPass';
 import ESigRoute from './ESigRoute';
 import ESigButton from './ESigButton';
-import ETextName from '../element/ETextName';
+import ESigDelay from './ESigDelay';
+import ESigName from './ESigName';
+// import Text from 'zrender/src/graphic/Text';
 import Group from 'zrender/src/container/Group';
 
 class Signal extends Group {
@@ -62,12 +64,30 @@ class Signal extends Group {
 		}
 
 		// 信号机名称
-		this.sigName = new ETextName({
+		const sigNameX = model.position.x + model.namePosition.x;
+		const sigNameY = model.position.y + posit * (style.Signal.signalDistance + style.Section.sectionWidth + style.Signal.signalR * 2 + model.namePosition.y);
+		// this.sigName = new Text({
+		// 	zlevel: this.zlevel,
+		// 	z: 1,
+		// 	silent: model.silent || false,
+		// 	style: {
+		// 		x: sigNameX,
+		// 		y: sigNameY,
+		// 		text: model.name,
+		// 		textFont: `bold ${style.Signal.signalTextFontSize} px ${style.textFontFormat}`,
+		// 		textFill: style.Signal.sigTextGreen,
+		// 		textAlign: 'middle',
+		// 		textPosition: this.model.textPosition || 'inside',
+		// 		textVerticalAlign: posit == 1 ? 'top' : 'bottom'
+		// 	}
+		// });
+
+		this.sigName = new ESigName({
 			zlevel: this.zlevel,
 			z: 1,
 			style: style,
-			x: model.position.x + model.namePosition.x,
-			y: model.position.y + posit * (style.Signal.signalDistance + style.Section.sectionWidth + style.Signal.signalR * 2 + model.namePosition.y),
+			x: sigNameX,
+			y: sigNameY,
 			text: model.name,
 			textFont: `bold ${style.Signal.signalTextFontSize} px ${style.textFontFormat}`,
 			textFill: style.Signal.sigTextGreen,
@@ -110,7 +130,7 @@ class Signal extends Group {
 		const sigDelayH = style.Signal.signalSigDelayDirection ? this.count * style.Signal.signalR * 2 : -style.Signal.signalR * 2;
 		const sigDelayX = endPoint.x + (style.Signal.signalSigDelayOffset.x + sigDelayH) * drict;
 		const sigDelayY = endPoint.y - (style.Signal.signalSigDelayOffset.y) * posit;
-		this.sigDelay = new ETextName({
+		this.sigDelay = new ESigDelay({
 			zlevel: this.zlevel,
 			z: 1,
 			style: style,

src/jmap/shape/factory.js

@@ -38,7 +38,7 @@ function shapefactory(type, device, jmap) {
 	const shape = mapShape[type];
 	if (shape instanceof Function) {
 		// eslint-disable-next-line
-		return new shape(device, style, jmap);
+		return new shape(device, style);
 	}
 }
 

src/jmap/transformHandle.js

@@ -1,3 +1,4 @@
+import Group from 'zrender/src/container/Group';
 import * as matrix from 'zrender/src/core/matrix';
 
 function createTransform(zoom) {
@@ -25,7 +26,7 @@ class TransformHandle {
 		this.$zr = zr;
 
 		this.rect = { x: 0, y: 0, width: this.$zr.getWidth(), height: this.$zr.getHeight() };
-		this.transform = createTransform({ scale: 1, offsetX: 0, offsetY: 0 });
+		this.transform = createTransform({ scaleRate: 1, offsetX: 0, offsetY: 0 });
 	}
 
 	checkVisible(view) {
@@ -38,6 +39,7 @@ class TransformHandle {
 		} else {
 			view.hide();
 		}
+
 		view.dirty();
 	}
 
@@ -55,7 +57,7 @@ class TransformHandle {
 	// 处理所有视图缩放/平移
 	transformAll() {
 		const parentLevel = this.$painter.getParentLevel();
-		if (parentLevel) {
+		if (parentLevel instanceof Group) {
 			parentLevel.eachChild((level) => {
 				level.eachChild((view) => {
 					this.transformView(view);
@@ -67,7 +69,7 @@ class TransformHandle {
 	// 重新计算显示图形
 	revisibleAll() {
 		const parentLevel = this.$painter.getParentLevel();
-		if (parentLevel) {
+		if (parentLevel instanceof Group) {
 			parentLevel.eachChild((level) => {
 				level.eachChild((view) => {
 					this.revisibleView(view);
@@ -77,10 +79,16 @@ class TransformHandle {
 	}
 
 	// 更新偏移量
-	updateTransform(zoom) {
-		this.transform = createTransform(zoom);
+	updateTransform(opts) {
+		this.transform = createTransform(opts);
 		this.transformAll();
 	}
+
+	// 更新画布尺寸
+	updateZrSize(opts) {
+		this.rect = { x: 0, y: 0, width: opts.width, height: opts.height };
+		this.revisibleAll();
+	}
 }
 
 export default TransformHandle;

src/views/jmap/index.vue

@@ -6,9 +6,13 @@
 import Jmap from '@/jmap/map';
 import deviceType from '@/jmap/constant/deviceType';
 import { getPublishMapDetail } from '@/api/test.js';
+import WindowResizeHandler from '@/mixin/WindowResizeHandler';
 
 export default {
 	name: 'Jmap',
+	mixins: [
+		WindowResizeHandler
+	],
 	data() {
 		return {
 			id: '__jmap__',
@@ -56,8 +60,8 @@ export default {
 
 		getPublishMapDetail('03').then(resp => {
 			this.jmap.load(resp.data);
-			// this.jmap.setDefaultState();
-			this.jmap.setLevelInvisible([deviceType.Link]);
+			this.jmap.setDefaultState();
+			this.jmap.setLevelVisible([deviceType.Link], false);
 		});
 
 		// this.jmap.render([
@@ -81,6 +85,9 @@ export default {
 		this.jmap = null;
 	},
 	methods: {
+		resizeHandler() {
+			this.jmap.resize({width: this._clientWidth, height: this._clientHeight});
+		},
 		selected(e) {
 			// console.log('selected', e, this.jmap);
 		},