# Conflicts:
#	src/jmap/config/deviceStyle.js
#	src/jmap/shape/factory.js
This commit is contained in:
zyy 2019-07-16 13:34:46 +08:00
commit 4d9884f425
19 changed files with 101 additions and 116 deletions

View File

@ -119,8 +119,26 @@ class Jmap {
if (this.methods.stateLoaded instanceof Function) { this.methods.stateLoaded(); }
}
pullBack(payload) {
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 x = (this.$options.offsetX + originX) / this.$options.scaleRate;
const y = (this.$options.offsetY + originY) / this.$options.scaleRate;
const newScaleRate = this.$options.getScaleRate(payload.scale);
const dx = originX - (x * newScaleRate - this.$options.offsetX);
const dy = originY - (y * newScaleRate - this.$options.offsetY);
payload.dx = dx;
payload.dy = dy;
}
return payload || {};
}
setOptions(zoom) {
this.$options.update(zoom); // 更新信息
this.$options.update(this.pullBack(zoom));
this.$painter.updateZoomTransform(this.$options);
if (this.methods.optionsUpdate instanceof Function) { this.methods.optionsUpdate(); }
}
@ -170,10 +188,21 @@ class Jmap {
switch (type) {
case deviceType.Link: prop = 'linkList'; break;
case deviceType.Sction: prop = 'sectionList'; break;
case deviceType.Switch: prop = 'switchList'; break;
case deviceType.Signal: prop = 'signalList'; break;
case deviceType.Station: prop = 'stationList'; break;
case deviceType.StationStand: prop = 'stationStandList'; break;
case deviceType.StationControl: prop = 'stationControlList'; break;
case deviceType.LcControl: prop = 'LcControlList'; break;
case deviceType.StationCounter: prop = 'stationCounterList'; break;
case deviceType.ZcControl: prop = 'zcControlList'; break;
case deviceType.StationDelayUnlock: prop = 'stationDelayUnlockList'; break;
case deviceType.LcControl: prop = 'lcControlList'; break;
case deviceType.LimitControl: prop = 'tempSpeedLimitList'; break;
case deviceType.ImageControl: prop = 'imageControl'; break;
case deviceType.Train: prop = 'trainList'; break;
case deviceType.TrainWindow: prop = 'trainWindowList'; break;
case deviceType.Line: prop = 'lineList'; break;
case deviceType.Text: prop = 'textList'; break;
}
const list = this.data[prop];
@ -219,10 +248,6 @@ class Jmap {
return this.mapDevice[code];
}
getViewInstanceByCode(code) {
return this.$painter.getViewInstanceByCode(code);
}
refresh() {
this.$painter.refresh();
}

View File

@ -31,7 +31,8 @@ class MouseController extends Eventful {
constructor(jmap) {
super();
this.events = jmap.getEvents();
this.initController(jmap.getZr());
this.$zr = jmap.getZr();
this.initController(this.$zr);
}
initController(zr) {
@ -138,7 +139,7 @@ class MouseController extends Eventful {
scale = -1;
}
this.trigger(this.events.Zoom, { scale, originX, originY });
this.trigger(this.events.Zoom, {type: 'zoom', scale, originX, originY });
}
}

View File

@ -1,5 +1,6 @@
class Options {
constructor(opts) {
constructor(opts, zr) {
this.$zr = zr;
this.scaleIndex = 0;
this.scaleList = [
0.5, 0.6, 0.7, 0.8, 0.9,
@ -38,7 +39,6 @@ class Options {
}
update(payload) {
payload = payload || {};
if (Number.isFinite(payload.dx)) {
this.offsetX -= payload.dx;
}

View File

@ -8,15 +8,13 @@ class Painter {
constructor(jmap) {
// 父级实例
this.$jmap = jmap;
this.$zr = jmap.getZr();
// 视图控制器
this.$zoomHandle = new ZoomHandle(this, jmap.getZr());
this.$zoomHandle = new ZoomHandle(this, this.$zr);
// 图层数据
this.viewLevelMap = {};
// 视图数据
this.viewInstance = {};
this.mapInstanceLevel = {};
// 父级图层
this.parentLevel = null;
@ -33,12 +31,12 @@ class Painter {
initPainterInstance() {
// 添加父级图层
this.parentLevel = new Group({ name: '__parent__' });
this.$jmap.getZr().add(this.parentLevel);
this.$zr.add(this.parentLevel);
// 添加子级图层
zrUtil.each(Object.values(deviceType), (type) => {
const level = new Group({ name: `__${type}__` });
this.viewLevelMap[type] = level;
this.mapInstanceLevel[type] = level;
this.parentLevel.add(level);
});
}
@ -64,12 +62,11 @@ class Painter {
add(device) {
// console.log(device, device._type, 111);
const type = device._type;
const code = device._code;
const view = shapefactory(type, device, this.$jmap);
if (view) {
this.$zoomHandle.transformView(view);
this.viewInstance[code] = view;
this.viewLevelMap[type].add(view);
const instance = shapefactory(type, device, this.$jmap);
if (instance) {
this.$zoomHandle.transformView(instance);
device.instance = instance;
this.mapInstanceLevel[type].add(instance);
}
}
@ -78,12 +75,10 @@ class Painter {
* @param {*} device
*/
delete(device) {
const code = device._code;
const type = device._type;
const view = this.viewInstance[code];
if (view) {
this.viewLevelMap[type].remove(view);
delete this.viewInstance[code];
const instance = device.instance;
if (instance) {
this.mapInstanceLevel[type].remove(instance);
}
}
@ -92,15 +87,14 @@ class Painter {
* @param {*} device
*/
update(device) {
const code = device._code;
const view = this.viewInstance[code];
if (view) {
view.setState(device.state);
const instance = device.instance;
if (instance) {
instance.setState(device.state);
}
}
/**
* 更新zoom
* 更新图层zoom
* @param {*} zoom
*/
updateZoomTransform(zoom) {
@ -113,7 +107,7 @@ class Painter {
*/
setLevelInvisible(list) {
zrUtil.each(Object.values(deviceType), type => {
const level = this.viewLevelMap[type];
const level = this.mapInstanceLevel[type];
if (list.includes(type)) {
level.hide();
} else {
@ -123,36 +117,17 @@ class Painter {
}
/**
* 视图是否存在
* @param {*} code
*/
hasViewInstance(code) {
return this.viewInstance[code];
}
/**
* 获取视图实例
*/
getViewInstanceByCode(code) {
return this.viewInstance[code];
}
/**
* 刷新画布将在下一个渲染帧的时候被刷新
* 刷新图层
*/
refresh() {
this.$jmap.getZr() && this.$jmap.getZr().refresh();
this.$zr && this.$zr.refresh();
}
/**
* 清除所有对象和画布
* 清除图层
*/
clear() {
// 清空视图
this.viewInstance = {};
// 清空图层
zrUtil.each(Object.values(this.viewLevelMap), (level) => {
zrUtil.each(Object.values(this.mapInstanceLevel), (level) => {
level && level.removeAll();
});
@ -160,16 +135,15 @@ class Painter {
}
/**
* 销毁 ZRender 实例
* 销毁图层
*/
dispose() {
this.viewInstance = {};
this.viewLevelMap = {};
this.mapInstanceLevel = {};
this.parentLevel = null;
}
/**
* 获取父级图层
* 父级图层
*/
getParentLevel() {
return this.parentLevel;

View File

@ -4,7 +4,7 @@ class ProxyHandle {
}
set(target, code, device) {
if (this.$painter.hasViewInstance(code)) {
if (device.instance) {
this.$painter.update(device);
} else {
this.$painter.add(device);

View File

@ -6,7 +6,7 @@ import Image from 'zrender/src/graphic/Image';
export default class ImageControl extends Group {
constructor({ _code, _type, zlevel, model, state }, style) {
super({name: _code});
super();
this._code = _code;
this._type = _type;
this.zlevel = zlevel;

View File

@ -8,7 +8,7 @@ import Group from 'zrender/src/container/Group';
export default class LcControl extends Group {
constructor({ _code, _type, zlevel, model, state }, style) {
super({name: _code});
super();
this.z = 20;
this._code = _code;
this._type = _type;
@ -126,8 +126,8 @@ export default class LcControl extends Group {
if (subType == 'Control') {
this.textBorder.show();
this.controlBorder.show();
this.text.setStyle({ textFill: '#000' });
// this.controlBorder.show();
// this.text.setStyle({ textFill: '#000' });
this.control.setStyle({ fill: this.style.borderContextBackgroundColor });
}
}

View File

@ -8,7 +8,7 @@ import Group from 'zrender/src/container/Group';
export default class LimitControl extends Group {
constructor({ _code, _type, zlevel, model, state }, style) {
super({name: _code});
super();
this.selected = false;
this._code = _code;
this._type = _type;

View File

@ -3,7 +3,7 @@ import Group from 'zrender/src/container/Group';
class Link extends Group {
constructor({ _code, _type, zlevel, model, state }, style) {
super({name: _code});
super();
this._code = _code;
this._type = _type;
this.zlevel = zlevel;

View File

@ -10,7 +10,7 @@ import JTriangle from '../utils/JTriangle';
/** 计轴*/
class SectionAxle extends Group {
constructor(model) {
super({name: `${model.name}`});
super();
this.model = model;
this.zlevel = model.zlevel;
this.z = 5;
@ -61,7 +61,7 @@ class SectionAxle extends Group {
/** 分隔符*/
class SectionSeparator extends Group {
constructor(model) {
super({name: `${model.name}`});
super();
this.model = model;
this.zlevel = model.zlevel;
this.z = 6;
@ -159,7 +159,7 @@ class SectionSeparator extends Group {
/** 创建区段限速限集合*/
class LimitLines extends Group {
constructor(model) {
super({name: `${model.name}`});
super();
this.model = model;
this.zlevel = model.zlevel;
this.z = model.z;
@ -294,7 +294,7 @@ class LimitLines extends Group {
/** 创建区段线集合*/
class Lines extends Group {
constructor(model) {
super({name: `${model.name}`});
super();
this.model = model;
this.zlevel = model.zlevel;
this.z = model.z;
@ -407,7 +407,7 @@ class Lines extends Group {
/** 区段*/
export default class Section extends Group {
constructor({ _code, _type, zlevel, model, state }, style, jmap) {
super({name: _code});
super();
this._code = _code;
this._type = _type;
this.zlevel = zlevel;
@ -453,7 +453,6 @@ export default class Section extends Group {
this.section = new Lines({
zlevel: this.zlevel,
z: this.z,
name: `${this._code}_Lines`,
isSwitchSection: model.isSwitchSection,
isCurve: model.isCurve,
points: model.points,
@ -486,7 +485,6 @@ export default class Section extends Group {
this.speedLimitLeft = new LimitLines({
zlevel: this.zlevel + 4,
z: this.z,
name: `${this._code}_LimitLines_L`,
position: [x, -y],
isCurve: model.isCurve,
points: model.points,
@ -498,7 +496,6 @@ export default class Section extends Group {
this.speedLimitRight = new LimitLines({
zlevel: this.zlevel + 4,
z: this.z,
name: `${this._code}_LimitLines_R`,
position: [-x, y],
isCurve: model.isCurve,
points: model.points,
@ -699,7 +696,6 @@ export default class Section extends Group {
this.lUpAxle = new SectionAxle({
style: style,
zlevel: this.zlevel,
name: `${this._code}_SectionAxle_LU`,
point: {
x: model.points[0].x,
y: model.points[0].y
@ -711,7 +707,6 @@ export default class Section extends Group {
this.lBottomAxle = new SectionAxle({
style: style,
zlevel: this.zlevel,
name: `${this._code}_SectionAxle_LB`,
point: {
x: model.points[0].x,
y: model.points[0].y
@ -725,7 +720,6 @@ export default class Section extends Group {
this.rUpAxle = new SectionAxle({
style: style,
zlevel: this.zlevel,
name: `${this._code}_SectionAxle_RU`,
point: {
x: model.points[model.points.length - 1].x,
y: model.points[model.points.length - 1].y
@ -737,7 +731,6 @@ export default class Section extends Group {
this.rBottomAxle = new SectionAxle({
style: style,
zlevel: this.zlevel,
name: `${this._code}_SectionAxle_RB`,
point: {
x: model.points[model.points.length - 1].x,
y: model.points[model.points.length - 1].y
@ -765,7 +758,6 @@ export default class Section extends Group {
traingle = new JTriangle(model.points[0], model.points[1]);
this.lPartition = new SectionSeparator({
style: style,
name: `${this._code}_SectionSeparator_L`,
borderBorderShow: model.borderBorderShow,
zlevel: this.zlevel - 2,
traingle: traingle,
@ -780,7 +772,6 @@ export default class Section extends Group {
/** 创建右侧分隔符*/
traingle = new JTriangle(model.points[model.points.length - 2], model.points[model.points.length - 1]);
this.rPartition = new SectionSeparator({
name: `${this._code}_SectionSeparator_R`,
style: style,
borderBorderShow: model.borderBorderShow,
zlevel: this.zlevel - 2,
@ -1087,10 +1078,8 @@ export default class Section extends Group {
}
}
const trainWindow = this.jmap.getViewInstanceByCode(trainWindowCode);
if (trainWindow) {
trainWindow.setTrainWindowEventShow(show);
}
const trainWindow= this.jmap.getDeviceByCode(trainWindowCode);
trainWindow && trainWindow.instance &&trainWindow.instance.setTrainWindowEventShow(show);
}
mouseStateVisible(subType) {
@ -1100,8 +1089,8 @@ export default class Section extends Group {
this.sectionTextShadow && this.sectionTextShadow.show();
} else {
// 道岔区段
const refSwitch = this.jmap.getViewInstanceByCode(this.model.relSwitchCode);
refSwitch && refSwitch.mouseStateVisible();
const refSwitch = this.jmap.getDeviceByCode(this.model.relSwitchCode);
refSwitch && refSwitch.instance && refSwitch.instance.mouseStateVisible();
}
} else {
this.section && this.section.setBorderVisible(true);
@ -1118,8 +1107,8 @@ export default class Section extends Group {
this.sectionTextShadow && this.sectionTextShadow.hide();
if (this.model.isSwitchSection) {
// 道岔区段
const refSwitch = this.jmap.getViewInstanceByCode(this.model.relSwitchCode);
refSwitch && refSwitch.mouseStateRecover();
const refSwitch = this.jmap.getDeviceByCode(this.model.relSwitchCode);
refSwitch && refSwitch.instance && refSwitch.instance.mouseStateRecover();
} else {
this.section && this.section.setBorderVisible(false);
this.sectionTextBorder && this.sectionTextBorder.hide();

View File

@ -13,7 +13,7 @@ import { arrows, triangular } from './libs/ShapePoints';
class Lamp extends Group {
constructor(model) {
super({name: `${model.name}`});
super();
this.model = model;
this.zlevel = model.zlevel;
this.z = 10;
@ -95,7 +95,7 @@ class Lamp extends Group {
// 自动进路箭头
class AutoSig extends Group {
constructor(model) {
super({name: `${model.name}`});
super();
this.model = model;
this.zlevel = model.zlevel;
this.z = 10;
@ -157,7 +157,7 @@ class AutoSig extends Group {
// 运行方向三角
class JSigDrict extends Group {
constructor(model) {
super({name: `${model.name}`});
super();
this.model = model;
this.zlevel = model.zlevel;
this.z = 10;
@ -186,7 +186,7 @@ class JSigDrict extends Group {
// 信号灯 几灯、高柱等
class JSiglamp extends Group {
constructor(model) {
super({name: `${model.name}`});
super();
this.model = model;
this.zlevel = model.zlevel;
this.z = 10;
@ -288,7 +288,6 @@ class JSiglamp extends Group {
const lamp = new Lamp({
style: model.style,
zlevel: this.zlevel,
name: `${this._code}_Lamp_${i}`,
lampCount: model.lampCount,
position: {
x: highPosition.x + i * model.drict * model.style.signalR * 2,
@ -323,7 +322,6 @@ class JSiglamp extends Group {
this.sigDriction = new JSigDrict({
style: model.style,
zlevel: this.zlevel,
name: `${this._code}_JSigDrict`,
position: {
x: highPosition.x + model.drict * (model.lampCount * model.style.signalR * 2 + model.style.signalR - 1),
y: model.position.y
@ -339,7 +337,6 @@ class JSiglamp extends Group {
this.autoSig = new AutoSig({
style: model.style,
zlevel: this.zlevel,
name: `${this._code}_AutoSig`,
position: {
x: highPosition.x,
y: highPosition.y
@ -477,7 +474,7 @@ class JSiglamp extends Group {
/** 按钮*/
class SigButton extends Group {
constructor(model) {
super({name: `${model.name}`});
super();
this.model = model;
this.zlevel = model.zlevel;
this._subType = 'SignalButton';
@ -674,7 +671,7 @@ class SigButton extends Group {
export default class Signal extends Group {
constructor({ _code, _type, zlevel, model, state }, style) {
super({name: _code});
super();
this._code = _code;
this._type = _type;
this.zlevel = zlevel;
@ -701,7 +698,6 @@ export default class Signal extends Group {
this.siglamp = new JSiglamp({
style: style,
zlevel: this.zlevel,
name: `${this._code}_JSiglamp`,
position: {
x: model.position.x,
y: model.position.y + posit * style.signalDistance
@ -722,7 +718,6 @@ export default class Signal extends Group {
this.sigButton = new SigButton({
style: style,
zlevel: this.zlevel,
name: `${this._code}_SigButton`,
position: {
x: model.buttonPosition.x,
y: model.buttonPosition.y - posit * style.signalDistance

View File

@ -6,7 +6,7 @@ import Text from 'zrender/src/graphic/Text';
export default class Station extends Group {
constructor({ _code, _type, zlevel, model, state }, style) {
super({name: _code});
super();
this.z = 40;
this._code = _code;
this._type = _type;

View File

@ -8,7 +8,7 @@ import Group from 'zrender/src/container/Group';
/** 单个控制灯*/
class SingleControl extends Group {
constructor(model) {
super({name: `${model.name}`});
super();
this.model = model;
this.zlevel = model.zlevel;
this._subType = model._subType;
@ -72,7 +72,7 @@ class SingleControl extends Group {
/** 控制模式*/
export default class StationControl extends Group {
constructor({ _code, _type, zlevel, model, state }, style) {
super({name: _code});
super();
this.selected = false;
this._code = _code;
this._type = _type;
@ -93,7 +93,6 @@ export default class StationControl extends Group {
_subType: 'emergency',
style: this.style,
zlevel: this.zlevel,
name: `${this._code}_Emergency`,
point: {
x: model.position.x - this.style.stationControlDistance,
y: model.position.y
@ -106,7 +105,6 @@ export default class StationControl extends Group {
_subType: 'center',
style: this.style,
zlevel: this.zlevel,
name: `${this._code}_Center`,
point: {
x: model.position.x,
y: model.position.y
@ -119,7 +117,6 @@ export default class StationControl extends Group {
_subType: 'substation',
style: this.style,
zlevel: this.zlevel,
name: `${this._code}_Substation`,
point: {
x: model.position.x + this.style.stationControlDistance,
y: model.position.y
@ -131,7 +128,6 @@ export default class StationControl extends Group {
this.textShadow = new Text({
zlevel: this.zlevel,
z: this.z + 1,
name: `${this._code}_TextShadow`,
position: [0, -4],
silent: true,
style: {

View File

@ -7,7 +7,7 @@ import Text from 'zrender/src/graphic/Text';
export default class StationCounter extends Group {
constructor({ _code, _type, zlevel, model, state }, style) {
super({name: _code});
super();
this._code = _code;
this._type = _type;
this.model = model;

View File

@ -7,7 +7,7 @@ import Group from 'zrender/src/container/Group';
export default class StationDelayUnlock extends Group {
constructor({ _code, _type, zlevel, model, state }, style) {
super({name: _code});
super();
this._code = _code;
this._type = _type;
this.model = model;

View File

@ -10,7 +10,7 @@ import JTriangle from '../utils/JTriangle';
export default class Switch extends Group {
constructor({ _code, _type, zlevel, model, state }, style, jmap) {
super({name: _code});
super();
this._code = _code;
this._type = _type;
this.model = model;
@ -551,7 +551,10 @@ export default class Switch extends Group {
}
getSectionInstance(code) {
return this.jmap.getViewInstanceByCode(code);
const device = this.jmap.getDeviceByCode(code);
if (device && device.instance) {
return device.instance;
}
}
mouseStateVisible() {

View File

@ -166,14 +166,14 @@ class TrainBody extends Group {
}
setMouseOver() {
//store.dispatch('map/setTrainDetails', this.model);
this.details = store.state.map.trainDetails;
this.add(this.arrowText);
//this.details = store.state.map.trainDetails;
/*this.add(this.arrowText);
this.arrowText.attr({
style: {
x: this.details.point.x + 50,
y: this.details.point.y + 25,
}
});
});*/
}
setMouseOut() {
this.remove(this.arrowText);

View File

@ -8,7 +8,7 @@ import Group from 'zrender/src/container/Group';
export default class ZcControl extends Group {
constructor({ _code, _type, zlevel, model, state }, style) {
super({name: _code});
super();
this.z = 20;
this._code = _code;
this._type = _type;

View File

@ -11,6 +11,7 @@ import Switch from './Switch';
import ZcControl from './ZcControl';
import StationCounter from './StationCounter';
import StationDelayUnlock from './StationDelayUnlock';
import StationStand from './StationStand';
import TrainWindow from './TrainWindow';
import Train from './Train';
@ -28,6 +29,7 @@ mapShape[deviceType.Switch] = Switch;
mapShape[deviceType.ZcControl] = ZcControl;
mapShape[deviceType.StationCounter] = StationCounter;
mapShape[deviceType.StationDelayUnlock] = StationDelayUnlock;
mapShape[deviceType.StationStand] = StationStand;
mapShape[deviceType.TrainWindow] = TrainWindow;
mapShape[deviceType.Train] = Train;