joylink/rt-sim-training-client
6
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
zyy 2019-07-22 09:33:19 +08:00
commit e5748b0a6c
6 changed files with 139 additions and 152 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/jmap/map.js
View File

@ -46,6 +46,7 @@ class Jmap {
this.$options = new Options(Object.assign({ scaleRate: 1, offsetX: 0, offsetY: 0 }, opts.options || {})); // 缩放
this.$painter = new Painter(this);
this.$painter.updateZrSize({width: this.$zr.getWidth(), height: this.$zr.getHeight()});
this.$painter.updateTransform(this.$options);
this.optionsHandler = this.setOptions.bind(this);
@ -91,8 +92,8 @@ class Jmap {
defaultStateDict[type] = {};
zrUtil.each(Object.keys(deviceState[type] || {}), (state) => {
defaultStateDict[type][state] = deviceState[type][state].Default;
});
});
}, this);
}, this);
return defaultStateDict;
}
@ -174,7 +175,6 @@ class Jmap {
} else {
const state = Object.assign(oDevice.state || {}, elem);
const nDevice = Object.assign(oDevice, { state });
this.mapDevice[code] = nDevice;
this.$painter.update(nDevice);
}
});

185
src/jmap/mouseController.js
View File

@ -37,18 +37,9 @@ class MouseController extends Eventful {
initHandler(zr) {
if (zr) {
const clickHandler = click.bind(this);
const contextmenuHandler = contextmenu.bind(this);
const moveEventHandler = moveEvent.bind(this);
const mousedownHandler = mousedown.bind(this);
const mousemoveHandler = mousemove.bind(this);
const mouseupHandler = mouseup.bind(this);
const mousewheelHandler = mousewheel.bind(this);
zr.on('click', clickHandler);
zr.on('contextmenu', contextmenuHandler);
// zr.on('mousemove', moveEventHandler);
zr.on('click', this.click, this);
zr.on('contextmenu', this.contextmenu, this);
zr.on('mousemove', this.moveEvent, this);
this.enable = function (opts) {
opts = opts || {};
@ -58,111 +49,111 @@ class MouseController extends Eventful {
this.disable();
zr.on('mousedown', mousedownHandler);
zr.on('mousemove', mousemoveHandler);
zr.on('mouseup', mouseupHandler);
zr.on('mousewheel', mousewheelHandler);
zr.on('mousedown', this.mousedown, this);
zr.on('mousemove', this.mousemove, this);
zr.on('mouseup', this.mouseup, this);
zr.on('mousewheel', this.mousewheel, this);
};
this.disable = function () {
zr.off('mousedown', mousedownHandler);
zr.off('mousemove', mouseupHandler);
zr.off('mouseup', mousemoveHandler);
zr.off('mousewheel', mousewheelHandler);
zr.off('mousedown', this.mousedown);
zr.off('mousemove', this.mousemove);
zr.off('mouseup', this.mouseup);
zr.off('mousewheel', this.mousewheel);
};
this.dispose = function () {
zr.off('click', clickHandler);
zr.off('contextmenu', contextmenuHandler);
zr.off('mousemove', moveEventHandler);
zr.off('click', this.click);
zr.off('contextmenu', this.contextmenu);
zr.off('mousemove', this.moveEvent);
this.disable();
};
this.isDragging = function () { return this._dragging; };
}
}
}
function mousedown(e) {
if (eventTool.notLeftMouse(e)) {
return;
}
var x = e.offsetX;
var y = e.offsetY;
this._x = x;
this._y = y;
this._dragging = true;
}
function mousemove(e) {
if (eventTool.notLeftMouse(e) ||
!this._moveOnMouseMove ||
!this._dragging
) {
return;
}
const oldX = this._x;
const oldY = this._y;
const dx = e.offsetX - oldX;
const dy = e.offsetY - oldY;
this._x = e.offsetX;
this._y = e.offsetY;
this._preventDefaultMouseMove && eventTool.stop(e.event);
this.trigger(this.events.Pan, { dx, dy, oldX, oldY, newX: this._x, newY: this._y });
}
function mouseup(e) {
if (!eventTool.notLeftMouse(e)) {
this._dragging = false;
}
}
function mousewheel(e) {
const shouldZoom = this._zoomOnMouseWheel;
const wheelDelta = e.wheelDelta;
const originX = e.offsetX;
const originY = e.offsetY;
if (wheelDelta === 0 || !shouldZoom) {
return;
}
if (shouldZoom) {
eventTool.stop(e.event);
let scale = 1;
if (wheelDelta > 0) {
scale = 1;
} else if (wheelDelta < 0) {
scale = -1;
mousedown(e) {
if (eventTool.notLeftMouse(e)) {
return;
}
this.trigger(this.events.Zoom, {type: 'zoom', scale, originX, originY });
var x = e.offsetX;
var y = e.offsetY;
this._x = x;
this._y = y;
this._dragging = true;
}
}
function click(e) {
var em = checkEvent(e);
this.trigger(this.events.Selected, em);
}
mousemove(e) {
if (eventTool.notLeftMouse(e) ||
!this._moveOnMouseMove ||
!this._dragging
) {
return;
}
function contextmenu(e) {
var em = checkEvent(e);
this.trigger(this.events.Contextmenu, em);
}
const oldX = this._x;
const oldY = this._y;
function moveEvent(e) {
return new EventModel(e);
}
const dx = e.offsetX - oldX;
const dy = e.offsetY - oldY;
function checkEvent(e) {
return new EventModel(e);
this._x = e.offsetX;
this._y = e.offsetY;
this._preventDefaultMouseMove && eventTool.stop(e.event);
this.trigger(this.events.Pan, { dx, dy, oldX, oldY, newX: this._x, newY: this._y });
}
mouseup(e) {
if (!eventTool.notLeftMouse(e)) {
this._dragging = false;
}
}
mousewheel(e) {
const shouldZoom = this._zoomOnMouseWheel;
const wheelDelta = e.wheelDelta;
const originX = e.offsetX;
const originY = e.offsetY;
if (wheelDelta === 0 || !shouldZoom) {
return;
}
if (shouldZoom) {
eventTool.stop(e.event);
let scale = 1;
if (wheelDelta > 0) {
scale = 1;
} else if (wheelDelta < 0) {
scale = -1;
}
this.trigger(this.events.Zoom, {type: 'zoom', scale, originX, originY });
}
}
click(e) {
var em = this.checkEvent(e);
this.trigger(this.events.Selected, em);
}
contextmenu(e) {
var em = this.checkEvent(e);
this.trigger(this.events.Contextmenu, em);
}
moveEvent(e) {
return new EventModel(e);
}
checkEvent(e) {
return new EventModel(e);
}
}
export default MouseController;

14
src/jmap/painter.js
View File

@ -14,10 +14,10 @@ class Painter {
this.mapInstanceLevel = {};
// 初始图层
this.initPainterLevels();
this.initLevels();
// 视图控制器
this.$transformHandle = new TransformHandle(this, this.$zr);
this.$transformHandle = new TransformHandle(this);
}
/**
@ -25,7 +25,7 @@ class Painter {
* @param {*} dom
* @param {*} config
*/
initPainterLevels() {
initLevels() {
// 添加父级图层
this.parentLevel = new Group({ name: '__parent__' });
this.$zr.add(this.parentLevel);
@ -60,8 +60,8 @@ class Painter {
const type = device._type;
const instance = shapefactory(type, device, this.$jmap);
if (instance) {
this.$transformHandle.transformView(instance);
device.instance = instance;
this.$transformHandle.transformView(instance);
this.mapInstanceLevel[type].add(instance);
}
}
@ -117,14 +117,14 @@ class Painter {
} else {
show ? level.hide() : level.show();
}
});
}, this);
}
/**
* 刷新图层
*/
refresh() {
this.$zr && this.$zr.refresh();
this.$zr.refresh();
}
/**
@ -133,7 +133,7 @@ class Painter {
clear() {
zrUtil.each(Object.values(this.mapInstanceLevel), (level) => {
level && level.removeAll();
});
}, this);
this.refresh();
}

39
src/jmap/transformHandle.js
View File

@ -13,21 +13,21 @@ function createBoundingRect(view) {
const scale = view.scale[0];
const offsetX = view.position[0];
const offsetY = view.position[1];
rect.width = rect.width * scale;
rect.height = rect.height * scale;
rect.x = rect.x * scale + offsetX;
rect.y = rect.y * scale + offsetY;
rect.width = rect.width * scale;
rect.height = rect.height * scale;
return rect;
}
class TransformHandle {
constructor(painter, zr) {
constructor(painter) {
this.$painter = painter;
this.$zr = zr;
this.parentLevel = this.$painter.getParentLevel();
this.parentLevel = painter.getParentLevel();
this.rect = { x: 0, y: 0, width: 0, height: 0 };
this.rect = { x: 0, y: 0, width: this.$zr.getWidth(), height: this.$zr.getHeight() };
this.transform = createTransform({ scaleRate: 1, offsetX: 0, offsetY: 0 });
}
@ -58,26 +58,12 @@ class TransformHandle {
// 处理所有视图缩放/平移
transformAll() {
// const parentLevel = this.$painter.getParentLevel();
// if (parentLevel instanceof Group) {
this.parentLevel.eachChild((level) => {
level.eachChild((view) => {
this.transformView(view);
}, this);
}, this);
// }
this.traverse(this.transformView, this);
}
// 重新计算显示图形
revisibleAll() {
// const parentLevel = this.$painter.getParentLevel();
// if (parentLevel instanceof Group) {
this.parentLevel.eachChild((level) => {
level.eachChild((view) => {
this.revisibleView(view);
}, this);
}, this);
// }
this.traverse(this.revisibleView, this);
}
// 更新偏移量
@ -91,6 +77,15 @@ class TransformHandle {
this.rect = { x: 0, y: 0, width: opts.width, height: opts.height };
this.revisibleAll();
}
// 遍历group执行回调
traverse(cb, context) {
this.parentLevel.eachChild(level => {
level.eachChild((view) => {
cb.call(context, view);
}, context);
}, context);
}
}
export default TransformHandle;

35
src/jmap/utils/parser.js
View File

@ -7,7 +7,6 @@ export function deviceFactory(type, defaultStateDict, elem) {
_type: type,
_code: elem.code,
model: elem,
// state: {},
state: Object.assign({}, defaultStateDict[type])
}, deviceRender[type]);
}
@ -18,67 +17,67 @@ export function parser(data, jmap) {
if (data) {
zrUtil.each(data.linkList || [], elem => {
mapDevice[elem.code] = deviceFactory(deviceType.Link, defaultStateDict, elem);
});
}, this);
zrUtil.each(data.sectionList || [], elem => {
mapDevice[elem.code] = deviceFactory(deviceType.Section, defaultStateDict, elem);
});
}, this);
zrUtil.each(data.signalList || [], elem => {
mapDevice[elem.code] = deviceFactory(deviceType.Signal, defaultStateDict, elem);
});
}, this);
zrUtil.each(data.stationList || [], elem => {
mapDevice[elem.code] = deviceFactory(deviceType.Station, defaultStateDict, elem);
});
}, this);
zrUtil.each(data.stationStandList || [], elem => {
mapDevice[elem.code] = deviceFactory(deviceType.StationStand, defaultStateDict, elem);
});
}, this);
zrUtil.each(data.stationControlList || [], elem => {
mapDevice[elem.code] = deviceFactory(deviceType.StationControl, defaultStateDict, elem);
});
}, this);
zrUtil.each(data.counterList || [], elem => {
mapDevice[elem.code] = deviceFactory(deviceType.StationCounter, defaultStateDict, elem);
});
}, this);
zrUtil.each(data.delayShowList || [], elem => {
mapDevice[elem.code] = deviceFactory(deviceType.StationDelayUnlock, defaultStateDict, elem);
});
}, this);
zrUtil.each(data.lineList || [], elem => {
mapDevice[elem.code] = deviceFactory(deviceType.Line, defaultStateDict, elem);
});
}, this);
zrUtil.each(data.textList || [], elem => {
mapDevice[elem.code] = deviceFactory(deviceType.Text, defaultStateDict, elem);
});
}, this);
zrUtil.each(data.zcList || [], elem => {
mapDevice[elem.code] = deviceFactory(deviceType.ZcControl, defaultStateDict, elem);
});
}, this);
zrUtil.each(data.lcList || [], elem => {
mapDevice[elem.code] = deviceFactory(deviceType.LcControl, defaultStateDict, elem);
});
}, this);
zrUtil.each(data.tempSpeedLimitList || [], elem => {
mapDevice[elem.code] = deviceFactory(deviceType.LimitControl, defaultStateDict, elem);
});
}, this);
zrUtil.each(data.resourceList || [], elem => {
mapDevice[elem.code] = deviceFactory(deviceType.ImageControl, defaultStateDict, elem);
});
}, this);
zrUtil.each(data.trainList || [], elem => {
mapDevice[elem.code] = deviceFactory(deviceType.Train, defaultStateDict, elem);
});
}, this);
zrUtil.each(data.trainWindowList || [], elem => {
mapDevice[elem.code] = deviceFactory(deviceType.TrainWindow, defaultStateDict, elem);
});
}, this);
zrUtil.each(data.switchList || [], elem => {
const cnodeSection = mapDevice[elem.sectionACode];
@ -107,7 +106,7 @@ export function parser(data, jmap) {
}
}
mapDevice[elem.code] = deviceFactory(deviceType.Switch, defaultStateDict, elem);
});
}, this);
}
return mapDevice;

12
src/views/jmap/index.vue
View File

@ -41,8 +41,8 @@ export default {
viewLoaded() { console.log('viewLoaded'); },
stateLoaded() { console.log('stateLoaded'); },
viewUpdate() { console.log('viewUpdate'); },
stateUpdate() { console.log('stateUpdate'); }
// optionsUpdate() { console.log('optionsUpdate'); }
stateUpdate() { console.log('stateUpdate'); },
optionsUpdate() { console.log('optionsUpdate'); }
}
});
@ -59,9 +59,9 @@ export default {
// this.jmap.load({ skinVO: { code: '02' }, linkList: list });
getPublishMapDetail('03').then(resp => {
this.jmap.load(resp.data);
this.jmap.setDefaultState();
this.jmap.setLevelVisible([deviceType.Link], false);
this.jmap.load(resp.data);
// this.jmap.setDefaultState();
});
// this.jmap.render([
@ -86,7 +86,9 @@ export default {
},
methods: {
resizeHandler() {
this.jmap.resize({width: this._clientWidth, height: this._clientHeight});
this.$nextTick(() => {
this.jmap.resize({width: this._clientWidth, height: this._clientHeight});
})
},
selected(e) {
// console.log('selected', e, this.jmap);