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

增加 新iscs_new 功能

Browse Source
This commit is contained in:
ival 2021-03-31 13:03:06 +08:00
parent d9a8baeb93
commit 134ccdaded
24 changed files with 434 additions and 327 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/iscs_new/config/defaultStyle.js
View File

@ -1,39 +1,39 @@
export default class highlightStyle {
constructor() {
const defaultStyle = {
/** 透明填充 颜色*/
this.transparentColor = 'transparent';
transparentColor : 'transparent',
/** 默认背景 颜色*/
this.backgroundColor = '#000000';
backgroundColor : '#000000',
/** 默认字体 族类*/
this.fontFamily = '黑体,Times New Roman';
fontFamily : '黑体,Times New Roman',
/** 默认字体 大小*/
this.fontSize = 12;
fontSize : 12,
/** 文字高亮颜色*/
this.textHover2Color = '#6000ff';
textHover2Color : '#6000ff',
/** 线条高亮颜色*/
this.lineHover2Color = '#ffff00';
lineHover2Color : '#ffff00',
/** Svg高亮颜色*/
this.svgHover2Color = '#62ff00';
svgHover2Color : '#62ff00',
/** 图片高亮遮罩*/
this.maskHover2Image = '';
maskHover2Image : '',
/** 选中透明度*/
this.maskOpacity = 0.8;
maskOpacity : 0.8,
/** 提亮度*/
this.liftLevel = 0.5;
liftLevel : 0.5,
/** 边框宽度*/
this.borderWidth = 2;
borderWidth : 1,
/** 边框颜色*/
this.borderColor = '#fff';
}
borderColor : '#000'
}
export default defaultStyle;

6
src/iscs_new/constant/shapeEvent.js Normal file
View File

@ -0,0 +1,6 @@
export default {
ShowHightLight: 'showHightLight',
HideHightLight: 'hideHightLight',
ShowTips: 'showTips',
HideTips: 'hideTips'
}

5
src/iscs_new/constant/shapeLayer.js Normal file
View File

@ -0,0 +1,5 @@
export default {
HightLight: `__hightLight__`,
SelectIng: `___selecting__`,
Tips: `__tips__`,
}

109
src/iscs_new/controller.js
View File

@ -1,11 +1,11 @@
import * as eventTool from 'zrender/src/core/event';
import * as utils from './utils/utils.js';
import Storage from './utils/Storage';
import Storage from './utils/storage';
import Eventful from 'zrender/src/mixin/Eventful';
import DragHandle from './dragHandle';
import SelectingHandle from './selectingHandle';
import SelectHandle from './selectHandle';
import KeyBoardHandle from './keyboardHandle';
import events from './utils/events';
class MouseEvent {
constructor(e) {
@ -14,7 +14,7 @@ class MouseEvent {
this.clientX = e.event.clientX;
this.clientY = e.event.clientY;
if (view && !['__selecting', '__drag'].includes(view.subType)) {
if (view && !['__selecting__', '__drag__'].includes(view.subType)) {
if (view.code) {
this.code = view.code;
if (view.composeCode) {
@ -33,7 +33,7 @@ class MouseEvent {
}
}
class Controller extends Eventful {
export default class Controller extends Eventful {
constructor(map) {
super();
this.$map = map;
@ -58,6 +58,7 @@ class Controller extends Eventful {
}
initHandler(map) {
const that = this;
const zr = map.getZr();
const keyupHandle = this.keyup.bind(this);
const keydownHandle = this.keydown.bind(this);
@ -65,83 +66,75 @@ class Controller extends Eventful {
const dragStartHandle = this.dragHandle.onDragStart;
const draggingHandle = this.dragHandle.onDragging;
const dragEndHandle = this.dragHandle.onDragEnd;
const selectStartHandle = this.selectingHandle.onSelectStart;
const selectingHandle = this.selectingHandle.onSelecting;
const selectEndHandle = this.selectingHandle.onSelectEnd;
const selectedHandle = this.selectHandle.onSelected;
const boardKeyupHandle = this.keyBoardHandle.onKeyup;
const boardKeydownHandle = this.keyBoardHandle.onKeydown;
this.on(this.events.__DragStart, dragStartHandle, this.dragHandle); // 单个元素拖拽
this.on(this.events.__Dragging, draggingHandle, this.dragHandle);
this.on(this.events.__DragEnd, dragEndHandle, this.dragHandle);
this.on(this.events.__SelectStart, selectStartHandle, this.selectingHandle);
this.on(this.events.__Selecting, selectingHandle, this.selectingHandle);
this.on(this.events.__SelectEnd, selectEndHandle, this.selectingHandle);
this.on(this.events.__Selected, selectedHandle, this.selectHandle);
zr.on('click', this.click, this);
zr.on('contextmenu', this.contextmenu, this);
this.enable = function (opts={}) {
this._panEnable = opts.panEnable || this._panEnable || false;
this._zoomEnable = opts.zoomEnable || this._zoomEnable || false;
this._keyEnable = opts.keyEnable || this._keyEnable || false;
this._dragEnable = opts.draggle || this._dragEnable || false;
this._areaSelectEnable = opts.selecting || this._areaSelectEnable || false;
this._selectEnable = opts.selectable || this._selectEnable || false;
this._reflectEnable = opts.reflect || this._reflectEnable || false;
this._preventDefaultMouseMove = opts.preventDefaultMouseMove || this._preventDefaultMouseMove|| true;
this.disable();
that._panEnable = opts.panEnable || that._panEnable || false;
that._zoomEnable = opts.zoomEnable || that._zoomEnable || false;
that._keyEnable = opts.keyEnable || that._keyEnable || false;
that._dragEnable = opts.draggle || that._dragEnable || false;
that._areaSelectEnable = opts.selecting || that._areaSelectEnable || false;
that._selectEnable = opts.selectable || that._selectEnable || false;
that._reflectEnable = opts.reflect || that._reflectEnable || false;
that._preventDefaultMouseMove = opts.preventDefaultMouseMove || that._preventDefaultMouseMove|| true;
that.disable();
zr.on('mousedown', this.mousedown, this);
zr.on('mousemove', this.mousemove, this);
zr.on('mouseup', this.mouseup, this);
zr.on('globalout', this.mouseup, this);
zr.on('mousewheel', this.mousewheel, this);
zr.on('mousedown', that.mousedown, that);
zr.on('mousemove', that.mousemove, that);
zr.on('mouseup', that.mouseup, that);
zr.on('globalout', that.mouseup, that);
zr.on('mousewheel', that.mousewheel, that);
zr.dom.addEventListener('keyup', keyupHandle, false);
zr.dom.addEventListener('keydown', keydownHandle, false);
zr.dom.focus();
this.on(this.events.Keyup, boardKeyupHandle, this.keyBoardHandle);
this.on(this.events.Keydown, boardKeydownHandle, this.keyBoardHandle);
that.on(that.events.__Keyup, boardKeyupHandle, that.keyBoardHandle);
that.on(that.events.__Keydown, boardKeydownHandle, that.keyBoardHandle);
};
this.disable = function () {
zr.off('mousedown', this.mousedown);
zr.off('mousemove', this.mousemove);
zr.off('mouseup', this.mouseup);
zr.off('globalout', this.mouseup);
zr.off('mousewheel', this.mousewheel);
zr.off('mousedown', that.mousedown);
zr.off('mousemove', that.mousemove);
zr.off('mouseup', that.mouseup);
zr.off('globalout', that.mouseup);
zr.off('mousewheel', that.mousewheel);
zr.dom.removeEventListener('keyup', keyupHandle, false);
zr.dom.removeEventListener('keydown', keydownHandle, false);
this.off(this.events.Keyup, boardKeyupHandle);
this.off(this.events.Keydown, boardKeydownHandle);
that.off(that.events.__Keyup, boardKeyupHandle);
that.off(that.events.__Keydown, boardKeydownHandle);
};
this.dispose = function () {
zr.off('click', this.click);
zr.off('contextmenu', this.contextmenu);
this.off(this.events.__DragStart, dragStartHandle);
this.off(this.events.__Dragging, draggingHandle);
this.off(this.events.__DragEnd, dragEndHandle);
this.off(this.events.__SelectStart, selectStartHandle);
this.off(this.events.__Selecting, selectingHandle);
this.off(this.events.__SelectEnd, selectEndHandle);
this.off(this.events.__Selected, selectedHandle);
this.disable();
zr.off('click', that.click);
zr.off('contextmenu', that.contextmenu);
that.off(that.events.__DragStart, dragStartHandle);
that.off(that.events.__Dragging, draggingHandle);
that.off(that.events.__DragEnd, dragEndHandle);
that.off(that.events.__SelectStart, selectStartHandle);
that.off(that.events.__Selecting, selectingHandle);
that.off(that.events.__SelectEnd, selectEndHandle);
that.off(that.events.__Selected, selectedHandle);
that.disable();
};
zr.on('click', this.click, this);
zr.on('contextmenu', this.contextmenu, this);
}
getKeyStr() {
@ -149,7 +142,7 @@ class Controller extends Eventful {
}
isSpecialSubType(e) {
return ['__drag', '__selecting'].includes(e.subType);
return ['__drag__', '__selecting__'].includes(e.subType);
}
isSelected(code) {
@ -229,7 +222,7 @@ class Controller extends Eventful {
if (this.limitDrag({dx, dy})) {
this.trigger(this.events.__Dragging, { dx, dy });
if (this._reflectEnable) {
this.trigger(this.events.Reflect, {dx, dy});
this.trigger(events.Reflect, {dx, dy});
}
} else {
this._x = oldX;
@ -300,7 +293,7 @@ class Controller extends Eventful {
this.clear();
}
this.trigger(this.events.Selected, event);
this.trigger(events.Selected, event);
}
contextmenu(e) {
@ -308,7 +301,7 @@ class Controller extends Eventful {
const event = new MouseEvent(e);
if (!this._pan) {
this.trigger(this.events.ContextMenu, event);
this.trigger(events.ContextMenu, event);
}
this._pan = false;
@ -316,6 +309,7 @@ class Controller extends Eventful {
keydown(e) {
let shortcuts = e.key;
if (e.altKey && e.key != 'Alt') {
shortcuts = `Alt_${shortcuts}`;
}
@ -327,11 +321,15 @@ class Controller extends Eventful {
if (e.ctrlKey && e.key != 'Control') {
shortcuts = `Control_${shortcuts}`;
}
this._shortcuts = shortcuts;
this.trigger(this.events.Keydown, {key: shortcuts});
this.trigger(this.events.__Keydown, {key: shortcuts});
this.trigger(events.Keydown, {key: shortcuts});
}
keyup(e) {
this.trigger(this.events.__Keyup, {key: this._shortcuts});
this.trigger(events.Keyup, {key: this._shortcuts})
this._shortcuts = '';
}
@ -341,6 +339,9 @@ class Controller extends Eventful {
this._pan = false;
this._locking = false;
}
destroy () {
this.dispose();
}
}
export default Controller;

3
src/iscs_new/core/abstractShape.js
View File

@ -27,6 +27,9 @@ class AbstractShape {
// 设置状态
setState(state) {}
// 销毁图形
destroy() {}
}
export default AbstractShape;

8
src/iscs_new/core/shape/Svg.js
View File

@ -1,9 +1,9 @@
import zrender from 'zrender';
export default class Svg extends zrender.Path {
import Path from 'zrender/src/graphic/Path';
import * as pathTool from 'zrender/src/tool/path';
export default class Svg extends Path {
constructor(opts) {
super(zrender.path.createFromString(opts.shape.path, {
super(pathTool.createFromString(opts.shape.path, {
...opts,
type: 'Svg'
}));

3
src/iscs_new/dragHandle.js
View File

@ -1,3 +1,4 @@
import shapeLayer from './constant/shapeLayer';
export default class DragHandle {
constructor(map, controller) {
this.$zr = map.getZr();
@ -29,7 +30,7 @@ export default class DragHandle {
this.$controller.storage.values().forEach(dragTarget => {
if (dragTarget) {
if (dragTarget.highLightInstance) {
this.$painter.removeFromLevel('hightLight')(dragTarget.highLightInstance);
this.$painter.removeFromLevel(shapeLayer.HightLight)(dragTarget.highLightInstance);
dragTarget.highLightInstance = null;
}

4
src/iscs_new/draggable/Image.js
View File

@ -7,7 +7,7 @@ import shapeRender from '../constant/shapeRender';
function shapeStyleBuilder({shape}) {
return {
...shapeRender,
subType: '__drag',
subType: '__drag__',
z: 9998,
draggable: false,
cursor: 'crosshair',
@ -81,7 +81,7 @@ export default class ImageDraggable extends graphic.Group {
}
mousedown(e) {
if (e.target && ['__selecting', '__drag'].includes(e.target.subType)) {
if (e.target && ['__selecting__', '__drag__'].includes(e.target.subType)) {
if (!eventTool.isMiddleOrRightButtonOnMouseUpDown(e)) {
this.target = e.target;
this.offset = {x: e.offsetX, y: e.offsetY};

6
src/iscs_new/draggable/Line.js
View File

@ -6,7 +6,7 @@ import shapeRender from '../constant/shapeRender';
function lineStyleBuilder() {
return {
...shapeRender,
subType: '__drag',
subType: '__drag__',
z: 9998,
shape: {x1: 0, y1: 0, x2: 0, y2: 0 },
style: {
@ -20,7 +20,7 @@ function lineStyleBuilder() {
function circleStyleBuilder({shape}) {
return {
...shapeRender,
subType: '__drag',
subType: '__drag__',
z: 9999,
draggable: false,
cursor: 'crosshair',
@ -80,7 +80,7 @@ export default class LineDraggable extends graphic.Group {
mousedown(e) {
this.offset = {x: e.offsetX, y: e.offsetY};
if (e.target && ['__drag'].includes(e.target.subType)) {
if (e.target && ['__drag__'].includes(e.target.subType)) {
this.target = e.target;
if (!eventTool.isMiddleOrRightButtonOnMouseUpDown(e)) {
this.setDraggable(true);

31
src/iscs_new/factory/compose.js
View File

@ -1,5 +1,6 @@
import AbstractShape from '../core/abstractShape';
import Group from 'zrender/src/container/Group';
import shapeEvent from '../constant/shapeEvent';
import BoundingRect from 'zrender/src/core/BoundingRect';
class Compose extends AbstractShape {
constructor(args) {
@ -17,19 +18,39 @@ class Compose extends AbstractShape {
}
// 设置高亮
active() {}
active() {
let unionRect = null;
this.model.elementCodes.forEach(code => {
const element = this.shapeFactory.getShapeByCode(code)
if (element && element.instance && !element.instance.invisible) {
const rect = element.instance.getBoundingRect().clone();
unionRect ? unionRect.union(rect): (unionRect = rect);
}
})
if (unionRect) {
this.shapeFactory.trigger(shapeEvent.ShowHightLight, unionRect);
}
}
// 取消高亮
inactive() {}
inactive() {
this.shapeFactory.trigger(shapeEvent.HideHightLight, new BoundingRect(0,0,0,0));
}
// 设置获取焦点
focus() {}
focus() {
}
// 设置取消焦点
blur() {}
blur() {
}
// 设置状态
setState(state) {}
// 销毁图形
destroy() {}
}
export default Compose;

46
src/iscs_new/factory/element.js
View File

@ -1,4 +1,5 @@
import AbstractShape from '../core/abstractShape';
import shapeEvent from '../constant/shapeEvent';
import * as graphic from '../core/graphic';
class Element extends AbstractShape {
constructor(args) {
@ -7,9 +8,30 @@ class Element extends AbstractShape {
}
create() {
const that = this;
const elementBuilder = graphic[this.model.type];
if (elementBuilder) {
this.instance = new elementBuilder({...this.model, ...this.option, shapeInstance: this});
// mouse进入事件
function onmouseover(e) {
that.shapeFactory.trigger(shapeEvent.ShowTips, {...that.instance.getBoundingRect(), text: 'text for test'});
}
// mouse移动事件
function onmousemove(e) {
onmouseover(e);
}
// mouse离开事件
function onmouseout(e) {
that.shapeFactory.trigger(shapeEvent.HideTips, that.instance.getBoundingRect());
}
this.instance = new elementBuilder({
...this.model,
...this.option,
shapeInstance: this,
onmouseover,
onmousemove,
onmouseout
});
}
}
@ -55,31 +77,27 @@ class Element extends AbstractShape {
// 设置高亮
active() {
this.hightLight = new graphic.Rect({
shape: this.instance.getBoundingRect(),
style: {
lineDash: [2, 6],
lineWidth: this.defaultStyle.borderWidth,
stroke: this.defaultStyle.borderColor,
fill: this.defaultStyle.transparentColor
}
});
this.shapeFactory.$painter.addToLevel('hightLight')(this.hightLight);
this.shapeFactory.trigger(shapeEvent.ShowHightLight, this.instance.getBoundingRect());
}
// 取消高亮
inactive() {
this.shapeFactory.$painter.removeFromLevel('hightLight')(this.hightLight);
this.shapeFactory.trigger(shapeEvent.HideHightLight, this.instance.getBoundingRect());
}
// 设置获取焦点
focus() {}
focus() {
}
// 设置取消焦点
blur() {}
blur() {
}
// 设置状态
setState(state) {}
// 销毁图形
destroy() {}
}
export default Element;

42
src/iscs_new/factory/hightLightHandle.js Normal file
View File

@ -0,0 +1,42 @@
import * as graphic from '../core/graphic';
import shapeLayer from '../constant/shapeLayer';
import shapeRender from '../constant/shapeRender';
function shapeStyleBuilder() {
return {
...shapeRender,
z: 9999,
silent: true,
shape: {
x: 0,
y: 0,
width: 0,
height: 0
},
style: {
lineDash: [4, 8],
lineWidth: 1,
stroke: '#fff',
fill: 'transparent'
}
}
}
export default class HightLightHandle {
constructor(map) {
this.$map = map;
this.border = new graphic.Rect(shapeStyleBuilder());
}
onShow(e) {
const { x, y, width, height } = e;
const painter = this.$map.getPainter();
this.border.setShape({ x, y, width, height });
painter.addToLevel(shapeLayer.HightLight)(this.border);
}
onHide(e) {
const painter = this.$map.getPainter();
painter.removeFromLevel(shapeLayer.HightLight)(this.border);
}
}

47
src/iscs_new/factory/index.js
View File

@ -1,8 +1,12 @@
import * as zrUtil from 'zrender/src/core/util';
import shapeType from '../constant/shapeType';
import shapeRender from '../constant/shapeRender';
import Eventful from 'zrender/src/mixin/Eventful';
import TipsHandle from './tipsHandle';
import HightLightHandle from './hightLightHandle';
import Compose from './compose';
import Element from './element';
import shapeType from '../constant/shapeType';
import shapeRender from '../constant/shapeRender';
import shapeEvent from '../constant/shapeEvent';
const None = e => null;
const shapeBuilderMap = {
@ -10,18 +14,46 @@ const shapeBuilderMap = {
[shapeType.Compose]: Compose
}
class ShapeFactory {
class ShapeFactory extends Eventful {
constructor(map) {
super();
this.$map = map;
this.$painter = map.getPainter();
this.hightLightHandle = new HightLightHandle(map);
this.tipsHandle = new TipsHandle(map);
this.clear();
this.initEventHandle();
}
parserTemplates(list=[]) {
initEventHandle() {
const that = this;
const showHightLightHandle = this.hightLightHandle.onShow;
const hideHightLightHandle = this.hightLightHandle.onHide;
const showTipsHandle = this.tipsHandle.onShow;
const hideTipsHandle = this.tipsHandle.onHide;
this.on(shapeEvent.ShowHightLight, showHightLightHandle, this.hightLightHandle);
this.on(shapeEvent.HideHightLight, hideHightLightHandle, this.hightLightHandle);
this.on(shapeEvent.ShowTips, showTipsHandle, this.tipsHandle);
this.on(shapeEvent.HideTips, hideTipsHandle, this.tipsHandle);
this.dispose = function() {
that.off(shapeEvent.ShowHightLight, showHightLightHandle);
that.off(shapeEvent.HideHightLight, hideHightLightHandle);
that.off(shapeEvent.ShowTips, showTipsHandle);
that.off(shapeEvent.HideTips, hideTipsHandle);
}
}
parseTemplates(list=[]) {
return this;
}
parser(source={}, defaultStyle={}, walk=None) {
parse(source={}, defaultStyle={}, walk=None) {
try {
this.source = source;
zrUtil.each(source.elementList ||[], el => {
@ -109,6 +141,11 @@ class ShapeFactory {
this.mapTemplate = {};
this.mapShape = {};
}
destroy() {
this.clear();
this.dispose();
}
}
export default ShapeFactory;

53
src/iscs_new/factory/tipsHandle.js Normal file
View File

@ -0,0 +1,53 @@
import * as graphic from '../core/graphic';
import shapeLayer from '../constant/shapeLayer';
import shapeRender from '../constant/shapeRender';
function shapeStyleBuilder() {
return {
...shapeRender,
z: 10000,
silent: true,
style: {
x: 0,
y: 0,
fontSize: 16,
fontWeight: 'normal',
textBackgroundColor: '#feffc8',
text: '',
textFill: '#000',
textPadding: [7, 14],
textAlign: 'left',
textVerticalAlign: 'bottom',
textBorderColor: '#666666',
textBorderWidth: 0,
textBorderRadius: 4,
textLineHeight: 22,
textBoxShadowColor: 'rgba(0,0,0,.3)',
textBoxShadowOffsetX: 0,
textBoxShadowOffsetY: 1,
textBoxShadowBlur: 3,
opacity: 0.8
}
}
}
export default class TipsHandle {
constructor(map) {
this.$map = map;
this.message = new graphic.Text(shapeStyleBuilder());
}
onShow(e) {
const {x, y, text} = e;
const painter = this.$map.getPainter();
this.message.setStyle({ x, y, text });
painter.addToLevel(shapeLayer.Tips)(this.message);
}
onHide(e) {
const painter = this.$map.getPainter();
painter.removeFromLevel(shapeLayer.Tips)(this.message);
this.message.setStyle('text', '');
}
}

185
src/iscs_new/map.js
View File

@ -1,45 +1,34 @@
import _ from 'lodash';
import * as utils from './utils/utils';
import EventEmitter from './utils/eventEmitter';
import zrender from 'zrender';
import events from './utils/events';
import EventEmitter from './utils/eventEmitter';
import Painter from './painter';
import Option from './option';
import Controller from './controller'; // 事件集合
import DefaultStyle from './config/defaultStyle'; // 样式集合
import Controller from './controller';
import StateHandle from './stateHandle';
import ShapeFactory from './factory';
import defaultStyle from './config/defaultStyle';
const renderer = 'canvas';
const devicePixelRatio = 1;
class JMap {
constructor(opts) {
// 鼠标事件
// 内部鼠标事件
this.events = {
__Pan: '_pan',
__Zoom: '_zoom',
__DragStart: '_dragStart',
__Dragging: '_dragging',
__DragEnd: '_dragEnd',
__SelectStart: '_selectStart',
__Selecting: '_selecting',
__SelectEnd: '_selectEnd',
__Selected: '_selected',
Reflect: 'reflect',
Selected: 'selected',
ContextMenu: 'contextmenu',
DataZoom: 'dataZoom',
Keydown: 'keydown',
Keyup: 'keyup',
Keypress: 'keypress',
DataLoaded: 'dataLoaded',
ViewLoaded: 'viewLoaded',
StateLoaded: 'stateLoaded',
ViewUpdate: 'viewUpdate',
StateUpdate: 'stateUpdate',
OptionUpdate: 'optionUpdate'
__Pan: '__pan__',
__Zoom: '__zoom__',
__DragStart: '__dragStart__',
__Dragging: '__dragging__',
__DragEnd: '__dragEnd__',
__SelectStart: '__selectStart__',
__Selecting: '__selecting__',
__SelectEnd: '__selectEnd__',
__Selected: '__selected__',
__Keyup: '__keyup__',
__Keydown: '__keydown__'
};
// 默认状态
@ -62,7 +51,7 @@ class JMap {
this.$zr.dom.setAttribute('tabIndex', -1);
this.$zr.dom.style.cursor = 'auto';
this.$option = new Option({ scaleRate: 1, offsetX: 0, offsetY: 0, ...utils.deepClone(opts.option||{})}, (dataZoom) => { this.$controller.trigger(this.events.DataZoom, dataZoom); }); // 缩放
this.$option = new Option({ scaleRate: 1, offsetX: 0, offsetY: 0, ...utils.deepClone(opts.option||{})}, (dataZoom) => { this.$controller.trigger(events.DataZoom, dataZoom); }); // 缩放
this.$painter = new Painter(this);
this.$painter.updateZrSize({width: this.$zr.getWidth(), height: this.$zr.getHeight()});
@ -72,6 +61,8 @@ class JMap {
this.$shapeFactory = new ShapeFactory(this);
this.$stateHandle = new StateHandle(this);
this.$controller = new Controller(this);
this.$controller.enable();
@ -89,7 +80,7 @@ class JMap {
}
loadDefaultStyle(style) {
return DefaultStyle;
return defaultStyle;
}
setMap(templates=[], source={}, eventOpts={}) {
@ -100,10 +91,10 @@ class JMap {
this.$painter.updateTransform(this.$option);
// 解析模板
this.$shapeFactory.parserTemplates(templates)
this.$shapeFactory.parseTemplates(templates)
// 数据加载完成 回调
this.$eventEmitter.emit(this.events.DataLoaded);
this.$eventEmitter.emit(events.DataLoaded);
// 初次渲染视图
this.repaint(source);
@ -112,14 +103,14 @@ class JMap {
this.setDefaultState();
// 视图加载完成 回调
this.$eventEmitter.emit(this.events.ViewLoaded);
this.$eventEmitter.emit(events.ViewLoaded);
// 返回视图缩放偏移
this.$option.trigger(this.$option);
}
setDefaultState() {
this.$eventEmitter.emit(this.events.StateLoaded);
this.$eventEmitter.emit(events.StateLoaded);
}
setOption(opts={}) {
@ -131,7 +122,7 @@ class JMap {
this.$controller.disable();
this.$controller.enable();
this.$eventEmitter.emit(this.events.OptionUpdate);
this.$eventEmitter.emit(events.OptionUpdate);
}
setDragging(e) {
@ -163,7 +154,7 @@ class JMap {
repaint(source={}) {
this.$shapeFactory.clear();
this.$painter.clear();
this.$shapeFactory.parser(source, this.defaultStyle, shape => {
this.$shapeFactory.parse(source, this.defaultStyle, shape => {
if (shape) {
this.$painter.add(shape);
}
@ -187,12 +178,12 @@ class JMap {
}
});
this.$eventEmitter.emit(this.events.ViewUpdate, list);
this.$eventEmitter.emit(events.ViewUpdate, list);
}
update(list=[]) {
list.forEach(el => { this.$painter.update(el); });
this.$eventEmitter.emit(this.events.StateUpdate, list);
this.$painter.update(this.$stateHandle.update(list));
this.$eventEmitter.emit(events.StateUpdate, list);
}
pullBack(payload={}) {
@ -273,100 +264,98 @@ class JMap {
this.$zr.refresh()
}
dispose() {
destroy() {
this.disable();
this.clear();
this.$controller.dispose();
this.$painter.dispose();
if (this.$zr) {
this.$zr.dispose();
}
this.$shapeFactory.destroy();
this.$controller.destroy();
this.$painter.destroy();
this.$zr && this.$zr.dispose();
}
on(name, cb, context) {
const idx = Object.values(this.events).indexOf(name);
const idx = Object.values(events).indexOf(name);
if (idx >= 0) {
switch (name) {
case this.events.DataLoaded:
this.$eventEmitter.emit.on(this.events.DataLoaded, cb, context);
case events.DataLoaded:
this.$eventEmitter.emit.on(events.DataLoaded, cb, context);
break;
case this.events.StateLoaded:
this.$eventEmitter.emit.on(this.events.StateLoaded, cb, context);
case events.StateLoaded:
this.$eventEmitter.emit.on(events.StateLoaded, cb, context);
break;
case this.events.ViewUpdate:
this.$eventEmitter.emit.on(this.events.ViewUpdate, cb, context);
case events.ViewUpdate:
this.$eventEmitter.emit.on(events.ViewUpdate, cb, context);
break;
case this.events.StateUpdate:
this.$eventEmitter.emit.on(this.events.StateUpdate, cb, context);
case events.StateUpdate:
this.$eventEmitter.emit.on(events.StateUpdate, cb, context);
break;
case this.events.OptionUpdate:
this.$eventEmitter.emit.on(this.events.OptionUpdate, cb, context);
case events.OptionUpdate:
this.$eventEmitter.emit.on(events.OptionUpdate, cb, context);
break;
case this.events.Reflect:
this.$controller.on(this.events.Reflect, _.throttle(cb, 200), context);
case events.Reflect:
this.$controller.on(events.Reflect, _.throttle(cb, 200), context);
break;
case this.events.Selected:
this.$controller.on(this.events.Selected, cb, context);
case events.Selected:
this.$controller.on(events.Selected, cb, context);
break;
case this.events.ContextMenu:
this.$controller.on(this.events.ContextMenu, cb, context);
case events.ContextMenu:
this.$controller.on(events.ContextMenu, cb, context);
break;
case this.events.DataZoom:
this.$controller.on(this.events.DataZoom, cb, context);
case events.DataZoom:
this.$controller.on(events.DataZoom, cb, context);
break;
case this.events.Keydown:
this.$controller.on(this.events.Keydown, cb, context);
case events.Keydown:
this.$controller.on(events.Keydown, cb, context);
break;
case this.events.Keypress:
this.$controller.on(this.events.Keypress, cb, context);
case events.Keypress:
this.$controller.on(events.Keypress, cb, context);
break;
case this.events.Keyup:
this.$controller.on(this.events.Keyup, cb, context);
case events.Keyup:
this.$controller.on(events.Keyup, cb, context);
break;
}
}
}
off(name, cb) {
const idx = Object.values(this.events).indexOf(name);
const idx = Object.values(events).indexOf(name);
if (idx >= 0) {
switch (name) {
case this.events.DataLoaded:
this.$eventEmitter.emit.off(this.events.DataLoaded, cb, context);
case events.DataLoaded:
this.$eventEmitter.emit.off(events.DataLoaded, cb, context);
break;
case this.events.StateLoaded:
this.$eventEmitter.emit.off(this.events.StateLoaded, cb, context);
case events.StateLoaded:
this.$eventEmitter.emit.off(events.StateLoaded, cb, context);
break;
case this.events.ViewUpdate:
this.$eventEmitter.emit.off(this.events.ViewUpdate, cb, context);
case events.ViewUpdate:
this.$eventEmitter.emit.off(events.ViewUpdate, cb, context);
break;
case this.events.StateUpdate:
this.$eventEmitter.emit.off(this.events.StateUpdate, cb, context);
case events.StateUpdate:
this.$eventEmitter.emit.off(events.StateUpdate, cb, context);
break;
case this.events.OptionUpdate:
this.$eventEmitter.emit.off(this.events.OptionUpdate, cb, context);
case events.OptionUpdate:
this.$eventEmitter.emit.off(events.OptionUpdate, cb, context);
break;
case this.events.Reflect:
this.$controller.off(this.events.Reflect, _.throttle(cb, 200));
case events.Reflect:
this.$controller.off(events.Reflect, _.throttle(cb, 200));
break;
case this.events.Selected:
this.$controller.off(this.events.Selected, cb);
case events.Selected:
this.$controller.off(events.Selected, cb);
break;
case this.events.ContextMenu:
this.$controller.off(this.events.ContextMenu, cb);
case events.ContextMenu:
this.$controller.off(events.ContextMenu, cb);
break;
case this.events.DataZoom:
this.$controller.off(this.events.DataZoom, cb);
case events.DataZoom:
this.$controller.off(events.DataZoom, cb);
break;
case this.events.Keydown:
this.$controller.off(this.events.Keydown, cb);
case events.Keydown:
this.$controller.off(events.Keydown, cb);
break;
case this.events.Keypress:
this.$controller.off(this.events.Keypress, cb);
case events.Keypress:
this.$controller.off(events.Keypress, cb);
break;
case this.events.Keyup:
this.$controller.off(this.events.Keyup, cb);
case events.Keyup:
this.$controller.off(events.Keyup, cb);
break;
}
}

12
src/iscs_new/maps.js
View File

@ -3,7 +3,6 @@ import * as Dom from './utils/dom';
import JMap from './map';
const DOM_ATTRIBUTE_KEY = '_maps_instance_';
class JMaps {
constructor() {
this._version = '1.0.0';
@ -70,9 +69,16 @@ class JMaps {
}
if (map) {
map.dispose();
map.destroy();
}
}
destroy() {
Object.values(this.instances).forEach(map => {
this.dispose(map);
})
this.instances = []
}
}
export default JMaps;
export default JMaps;

30
src/iscs_new/painter.js
View File

@ -2,25 +2,18 @@ import * as zrUtil from 'zrender/src/core/util';
import * as vector from 'zrender/src/core/vector';
import Group from 'zrender/src/container/Group';
import TransformHandle from './transformHandle';
import StateHandle from './stateHandle';
import TipsHandle from './tipsHandle';
import shapeLayer from './constant/shapeLayer';
import * as graphic from './core/graphic';
class Painter extends Group {
constructor(map) {
super({name: `__parent__`});
super({name: `__Container__` });
// 初始图层
this.initLevels(map);
// 视图控制器
this.$transformHandle = new TransformHandle(this);
// 状态处理器
this.$stateHandle = new StateHandle(map);
// 提示处理器
this.$tipsHandle = new TipsHandle(map);
}
initLevels(map) {
@ -34,13 +27,13 @@ class Painter extends Group {
this.$zr.add(this);
// 创建select图层
this.mapShapeLevel.selecting = new Group({ name: `___selecting__` });
this.mapShapeLevel[shapeLayer.SelectIng] = new Group({ name: shapeLayer.SelectIng });
// 创建hover图层
this.mapShapeLevel.hightLight = new Group({ name: `___hover__` });
this.mapShapeLevel[shapeLayer.HightLight] = new Group({ name: shapeLayer.HightLight });
// 创建tips图层
this.mapShapeLevel.tips = new Group({name: `__tips__`});
this.mapShapeLevel[shapeLayer.Tips] = new Group({name: shapeLayer.Tips });
// 创建元素图层
Object.keys(graphic).forEach(key => {
@ -73,7 +66,7 @@ class Painter extends Group {
update(shape) {
try {
this.$stateHandle.update(shape);
//
} catch (err) {
console.error(err);
}
@ -100,12 +93,6 @@ class Painter extends Group {
}
}
dispose() {
this.clear();
this.mapShapeLevel = {};
this.$tipsHandle.dispose();
}
getLevelByName(name) {
return this.mapShapeLevel[name];
}
@ -115,6 +102,11 @@ class Painter extends Group {
el.removeAll();
})
}
destroy() {
this.clear();
this.mapShapeLevel = {};
}
}
export default Painter;

11
src/iscs_new/selectHandle.js
View File

@ -1,3 +1,4 @@
import shapeLayer from './constant/shapeLayer';
import LineDraggable from './draggable/Line';
import ImageDraggable from './draggable/Image';
import * as graphic from './core/graphic';
@ -21,6 +22,8 @@ export default class SelectHandle {
} else {
this.addSelected(e.target);
}
} else if (this.$controller.selectingHandle.isSelecting()) {
this.addSelected(e.target);
} else {
this.clear();
this.addSelected(e.target);
@ -31,19 +34,19 @@ export default class SelectHandle {
addSelected(target) {
this.$controller.storage.set(target.model.code, target);
target.active(this.$zr);
target.active();
if (!target.highLightInstance) {
target.highLightInstance = this.createSelected(target);
this.$painter.addToLevel('hightLight')(target.highLightInstance);
this.$painter.addToLevel(shapeLayer.HightLight)(target.highLightInstance);
}
}
delSelected(target) {
target.inactive(this.$zr);
target.inactive();
if (target.highLightInstance) {
this.$painter.removeFromLevel('hightLight')(target.highLightInstance);
this.$painter.removeFromLevel(shapeLayer.HightLight)(target.highLightInstance);
target.highLightInstance = null;
}

13
src/iscs_new/selectingHandle.js
View File

@ -1,9 +1,10 @@
import * as graphic from './core/graphic.js';
import shapeRender from './constant/shapeRender';
import shapeLayer from './constant/shapeLayer';
function shapeStyleBuilder() {
return {
subType: '__selecting',
subType: '__selecting__',
...shapeRender,
z: 9999,
shape: {
@ -37,7 +38,7 @@ export default class SelectingHandle {
onSelectStart(e) {
this.selecting.setShape({ x: e.x, y: e.y, width: 0, height: 0 });
this.$painter.addToLevel('selecting')(this.selecting);
this.$painter.addToLevel(shapeLayer.SelectIng)(this.selecting);
this.begPoint = { x: e.x, y: e.y };
this.endPoint = null;
}
@ -45,13 +46,13 @@ export default class SelectingHandle {
onSelecting(e) {
this.endPoint = { x: e.x, y: e.y };
this.selecting.setShape(this.normalizedArea(this.begPoint, this.endPoint));
this.$painter.addToLevel('selecting')(this.selecting);
this.$painter.addToLevel(shapeLayer.SelectIng)(this.selecting);
}
onSelectEnd(e) {
this.endPoint = { x: e.x, y: e.y };
this.selecting.setShape(this.normalizedArea(this.begPoint, this.endPoint));
this.$painter.addToLevel('selecting')(this.selecting);
this.$painter.addToLevel(shapeLayer.SelectIng)(this.selecting);
const selectingRect = this.selecting.getBoundingRect();
Object.values(this.$map.getMapShape()).forEach(el => {
@ -69,12 +70,12 @@ export default class SelectingHandle {
}
setSelected(target) {
target.active(this.$zr);
target.active();
this.$controller.storage.set(target.model.code, target);
}
clear() {
this.$painter.removeFromLevel('selecting')(this.selecting);
this.$painter.removeFromLevel(shapeLayer.SelectIng)(this.selecting);
}
normalizedArea(begin, end) {

20
src/iscs_new/stateHandle.js
View File

@ -1,26 +1,16 @@
// 状态处理器
export default class StateHandle {
constructor(map) {
this.$map = map;
}
update(state) {
update(shapeFactory, state) {
return [];
}
updateState({mapShape}, state) {
updateState(shapeFactory, state) {
}
updateDepState({mapShape}, state) {
}
__update2Self({instance, model}, state) {
}
__update2Measure({instance, model}, state) {
updateDepState(shapeFactory, state) {
}
}

76
src/iscs_new/tipsHandle.js
View File

@ -1,76 +0,0 @@
import * as graphic from './core/graphic';
import Eventful from 'zrender/src/mixin/Eventful';
import shapeRender from './constant/shapeRender';
function shapeStyleBuilder() {
return {
...shapeRender,
z: 10000,
silent: true,
style: {
x: 0,
y: 0,
fontSize: 16,
fontWeight: 'normal',
textBackgroundColor: '#feffc8',
text: 'aaa',
textFill: '#000',
textPadding: [7, 14],
textAlign: 'left',
textVerticalAlign: 'bottom',
textBorderColor: '#666666',
textBorderWidth: 0,
textBorderRadius: 4,
textLineHeight: 22,
textBoxShadowColor: 'rgba(0,0,0,.3)',
textBoxShadowOffsetX: 0,
textBoxShadowOffsetY: 1,
textBoxShadowBlur: 3,
opacity: 0.8
}
}
}
export default class TipsHandle extends Eventful {
constructor(map) {
super();
this.map = map;
this.message = new graphic.Text(shapeStyleBuilder());
this.on('show', this.onShow, this);
this.on('hide', this.onHide, this);
}
onShow(e) {
const {x, y, text} = e;
const painter = this.map.getPainter();
const options = this.map.getOption();
const tipsLevel = painter.getTipsLevel();
const scaleRate = options.scaleRate || 1;
const offsetX = options.offsetX || 0;
const offsetY = options.offsetY || 0;
const newX = parseInt((x + offsetX) / scaleRate);
const newY = parseInt((y + offsetY) / scaleRate);
this.message.setStyle({x: newX, y: newY, text});
if (tipsLevel) {
tipsLevel.add(this.message);
painter.$transformHandle.transformView(this.message);
}
}
onHide(e) {
const painter = this.map.getPainter();
const tipsLevel = painter.getTipsLevel();
if (tipsLevel) {
tipsLevel.remove(this.message);
}
this.message.setStyle('text', '');
}
dispose() {
this.off('show', this.onShow);
this.off('hide', this.onHide);
}
}

3
src/iscs_new/transformHandle.js
View File

@ -1,6 +1,6 @@
import * as utils from './utils/utils';
class TransformHandle {
export default class TransformHandle {
constructor(painter) {
this.$painter = painter;
@ -71,4 +71,3 @@ class TransformHandle {
}
}
export default TransformHandle;

16
src/iscs_new/utils/events.js Normal file
View File

@ -0,0 +1,16 @@
export default {
Reflect: 'reflect',
Selected: 'selected',
ContextMenu: 'contextmenu',
DataZoom: 'dataZoom',
Keydown: 'keydown',
Keyup: 'keyup',
Keypress: 'keypress',
DataLoaded: 'dataLoaded',
ViewLoaded: 'viewLoaded',
StateLoaded: 'stateLoaded',
ViewUpdate: 'viewUpdate',
StateUpdate: 'stateUpdate',
OptionUpdate: 'optionUpdate',
}

2
src/views/test/index.vue
View File

@ -198,7 +198,7 @@ export default {
},
destroy() {
if (this.$iscs) {
this.$iscs.dispose();
this.$iscs.destroy();
this.$iscs = null;
Vue.prototype.$iscs = null;
}