Merge branch 'iscs' of https://git.code.tencent.com/lian-cbtc/jl-client into iscs
This commit is contained in:
joylink_cuiweidong
commit
6a72265a7b
@ -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
6
src/iscs_new/constant/shapeEvent.js
Normal file
@ -0,0 +1,6 @@
|
||||
export default {
|
||||
ShowHightLight: 'showHightLight',
|
||||
HideHightLight: 'hideHightLight',
|
||||
ShowTips: 'showTips',
|
||||
HideTips: 'hideTips'
|
||||
}
|
||||
5
src/iscs_new/constant/shapeLayer.js
Normal file
5
src/iscs_new/constant/shapeLayer.js
Normal file
@ -0,0 +1,5 @@
|
||||
export default {
|
||||
HightLight: `__hightLight__`,
|
||||
SelectIng: `___selecting__`,
|
||||
Tips: `__tips__`,
|
||||
}
|
||||
@ -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;
|
||||
|
||||
@ -27,6 +27,9 @@ class AbstractShape {
|
||||
|
||||
// 设置状态
|
||||
setState(state) {}
|
||||
|
||||
// 销毁图形
|
||||
destroy() {}
|
||||
}
|
||||
|
||||
export default AbstractShape;
|
||||
|
||||
@ -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'
|
||||
}));
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
@ -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,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);
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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
42
src/iscs_new/factory/hightLightHandle.js
Normal 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);
|
||||
}
|
||||
}
|
||||
@ -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
53
src/iscs_new/factory/tipsHandle.js
Normal 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', '');
|
||||
}
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
@ -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) {
|
||||
|
||||
@ -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) {
|
||||
}
|
||||
}
|
||||
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
@ -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
16
src/iscs_new/utils/events.js
Normal 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',
|
||||
}
|
||||
@ -198,7 +198,7 @@ export default {
|
||||
},
|
||||
destroy() {
|
||||
if (this.$iscs) {
|
||||
this.$iscs.dispose();
|
||||
this.$iscs.destroy();
|
||||
this.$iscs = null;
|
||||
Vue.prototype.$iscs = null;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user