diff --git a/src/jmap/map.js b/src/jmap/map.js index f4e863961..e6efe3d91 100644 --- a/src/jmap/map.js +++ b/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(); } diff --git a/src/jmap/mouseController.js b/src/jmap/mouseController.js index 8a94f4c2b..bb79ca809 100644 --- a/src/jmap/mouseController.js +++ b/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); diff --git a/src/jmap/options.js b/src/jmap/options.js index 94631e04e..08536a04c 100644 --- a/src/jmap/options.js +++ b/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]; } } diff --git a/src/jmap/painter.js b/src/jmap/painter.js index 4065056a2..05bc5753e 100644 --- a/src/jmap/painter.js +++ b/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(); } }); } @@ -134,8 +139,8 @@ class Painter { } /** - * 销毁图层 - */ + * 销毁图层 + */ dispose() { this.mapInstanceLevel = {}; this.parentLevel = null; diff --git a/src/jmap/shape/Section/index.js b/src/jmap/shape/Section/index.js index 5962d9f01..5853386fd 100644 --- a/src/jmap/shape/Section/index.js +++ b/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(); } diff --git a/src/jmap/shape/Signal/ESigDelay.js b/src/jmap/shape/Signal/ESigDelay.js new file mode 100644 index 000000000..85c0d9afb --- /dev/null +++ b/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; diff --git a/src/jmap/shape/Signal/ESigName.js b/src/jmap/shape/Signal/ESigName.js new file mode 100644 index 000000000..54d6386af --- /dev/null +++ b/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; diff --git a/src/jmap/shape/Signal/index.js b/src/jmap/shape/Signal/index.js index 7d64a10c8..54bc1d4c9 100644 --- a/src/jmap/shape/Signal/index.js +++ b/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, diff --git a/src/jmap/shape/factory.js b/src/jmap/shape/factory.js index f3708c9e5..21fcf59e8 100644 --- a/src/jmap/shape/factory.js +++ b/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); } } diff --git a/src/jmap/transform.js b/src/jmap/transformHandle.js similarity index 81% rename from src/jmap/transform.js rename to src/jmap/transformHandle.js index 98e3a8637..cbcec4045 100644 --- a/src/jmap/transform.js +++ b/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; diff --git a/src/views/jmap/index.vue b/src/views/jmap/index.vue index 8c08585dd..db8a6f1db 100644 --- a/src/views/jmap/index.vue +++ b/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); },