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-30 18:06:53 +08:00
parent 9277754f5e
commit 56aebd69e7
37 changed files with 825 additions and 3000 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -29,5 +29,11 @@ export default class highlightStyle {
/** 提亮度*/
this.liftLevel = 0.5;
/** 边框宽度*/
this.borderWidth = 2;
/** 边框颜色*/
this.borderColor = '#fff';
}
}

220
src/iscs_new/controller.js
View File

@ -1,41 +1,37 @@
import * as eventTool from 'zrender/src/core/event';
import * as utils from './utils/utils.js';
import Storage from './utils/Storage';
import graphType from './constant/graphType';
import panelType from './constant/panelType';
import resourceType from './constant/resourceType';
import Eventful from 'zrender/src/mixin/Eventful';
import DragHandle from './dragHandle';
import SelectingHandle from './selectingHandle';
import SelectHandle from './selectHandle';
import KeyBoardHandle from './keyboardHandle';
class MapEvent {
class MouseEvent {
constructor(e) {
const view = e.target;
this.clientX = e.event.clientX;
this.clientY = e.event.clientY;
let view = e.target;
while (view) {
if ([
...Object.values(graphType),
...Object.values(panelType),
...Object.values(resourceType)
].includes(view._type)) {
this.shapeCode = view._code;
this.graphType = view._type;
break;
if (view && !['__selecting', '__drag'].includes(view.subType)) {
if (view.code) {
this.code = view.code;
// this.type = view.type;
if (view.composeCode) {
// const compose = view.shapeInstance.shapeFactory.getShapeByCode(view.composeCode);
// this.type = compose.model.type;
this.code = view.composeCode;
}
}
if (view._subType) {
this.subType = view._subType;
if (view.subType) {
this.subType = view.subType;
}
if (view._val) {
this.val = view._val;
if (view.val) {
this.val = view.val;
}
view = view.parent;
}
}
}
@ -44,28 +40,30 @@ class Controller extends Eventful {
constructor(map) {
super();
this.$map = map;
this.option = map.getOption();
this.events = map.getEvents();
this.dragHandle = new DragHandle(map, this);
this.selectingHandle = new SelectingHandle(map, this);
this.selectHandle = new SelectHandle(map, this);
this.keyBoardHandle = new KeyBoardHandle(map, this);
this._pan =false;
this._isNotLeftMouse = false;
this._shortcuts = '';
this._distance = 0;
this._locking = false;
this._target = null;
this.initData();
this.initHandler();
this.initModule(map);
this.initHandler(map);
}
initData() {
initModule(map) {
this.dragHandle = new DragHandle(map, this);
this.selectingHandle = new SelectingHandle(map, this);
this.selectHandle = new SelectHandle(map, this);
this.keyBoardHandle = new KeyBoardHandle(map, this);
this.storage = new Storage();
}
initHandler() {
const zr = this.$map.getZr();
const keyupHandle = this.onKeyup.bind(this);
const keydownHandle = this.onKeydown.bind(this);
initHandler(map) {
const zr = map.getZr();
const keyupHandle = this.keyup.bind(this);
const keydownHandle = this.keydown.bind(this);
const dragStartHandle = this.dragHandle.onDragStart;
const draggingHandle = this.dragHandle.onDragging;
@ -90,8 +88,6 @@ class Controller extends Eventful {
this.on(this.events.__Selected, selectedHandle, this.selectHandle);
this.enable = function (opts={}) {
const zr = this.$map.getZr();
this._panEnable = opts.panEnable || this._panEnable || false;
this._zoomEnable = opts.zoomEnable || this._zoomEnable || false;
this._keyEnable = opts.keyEnable || this._keyEnable || false;
@ -155,14 +151,24 @@ class Controller extends Eventful {
return this._shortcuts;
}
isSpecialEl(e) {
return ['dragEl', 'selectingEl'].includes(e.subType);
isSpecialSubType(e) {
return ['__drag', '__selecting'].includes(e.subType);
}
isSelected(code) {
return this.$controller
? this.$controller.storage.has(code)
: false;
}
setCursorStyle(cursorStyle) {
this.$map.setCursorStyle(cursorStyle);
}
limitDrag(e) {
const dx2 = Math.pow(e.dx, 2);
const dy2 = Math.pow(e.dy, 2);
const scale = this.$map.$options.getScaleRate();
const scale = this.option.getScaleRate();
const diff = Math.ceil(Math.sqrt(dx2+dy2));
if (scale > 1) {
@ -175,38 +181,29 @@ class Controller extends Eventful {
}
mousedown(e) {
const event = new MapEvent(e);
const target = this.$map.getShapeByCode(event.shapeCode);
const event = new MouseEvent(e);
const zr = this.$map.getZr();
this._x = e.offsetX;
this._y = e.offsetY;
this._pan = false;
this._target = target;
this._target = this.$map.getShapeByCode(event.code);
zr.dom.focus();
if (utils.isMobile()) {
if (e.event.touches.length == 1 && this._dragEnable && target) {
this.trigger(this.events.__DragStart, { x: e.offsetX, y: e.offsetY, target });
} else if (e.event.touches.length >= 2) {
const touches = e.event.touches;
const powX = Math.pow(touches[1].clientX-touches[0].clientX, 2);
const powY = Math.pow(touches[1].clientY-touches[0].clientY, 2);
this._distance = Math.sqrt(powX + powY);
}
} else {
this._isNotLeftMouse = eventTool.isMiddleOrRightButtonOnMouseUpDown(e);
if (this._isNotLeftMouse) { // 非左键点击
this.$map.setCursorStyle('grab'); // 鼠标状态
} else {
this.selectingHandle.clear(e);
if (this.isSpecialEl(event)) { return; }
if (this._dragEnable && target) {
this.trigger(this.events.__DragStart, { x: e.offsetX, y: e.offsetY, target });
} else if (this._areaSelectEnable && !event.graphType) {
this.trigger(this.events.__SelectStart, { x: e.offsetX, y: e.offsetY});
}
this._isNotLeftMouse = eventTool.isMiddleOrRightButtonOnMouseUpDown(e);
if (this._isNotLeftMouse) {
this.setCursorStyle('grab');
} else {
this.selectingHandle.clear(e);
if (this.isSpecialSubType(event)) { return; }
if (this._dragEnable && this._locking) {
this.setCursorStyle('move');
this.trigger(this.events.__DragStart, { x: e.offsetX, y: e.offsetY, code: event.code });
} else if (this._areaSelectEnable) {
this.setCursorStyle('crosshair');
this.trigger(this.events.__SelectStart, { x: e.offsetX, y: e.offsetY});
}
}
}
@ -216,81 +213,42 @@ class Controller extends Eventful {
const oldY = this._y;
const dx = Math.round(e.offsetX - this._x);
const dy = Math.round(e.offsetY - this._y);
const target = this._target;
this._x = e.offsetX;
this._y = e.offsetY;
this._preventDefaultMouseMove && eventTool.stop(e.event);
if (utils.isMobile()) {
if (target && e.event.touches.length == 1) {
if (this._dragEnable && this.dragHandle.isDragging()) {
if (this.limitDrag({dx, dy})) {
this.trigger(this.events.__Dragging, { dx, dy });
if (this._reflectEnable) {
this.trigger(this.events.Reflect, {dx, dy});
}
} else {
this._x = oldX;
this._y = oldY;
}
}
} else if (e.event.touches.length == 2) {
const touches = e.event.touches;
const powX = Math.pow(touches[1].clientX-touches[0].clientX, 2);
const powY = Math.pow(touches[1].clientY-touches[0].clientY, 2);
const distance = Math.sqrt(powX + powY);
const wheelDelta = distance - this._distance;
const originX = Math.ceil((touches[1].clientX+touches[0].clientX)/2);
const originY = Math.ceil((touches[1].clientY+touches[0].clientY)/2);
if (Math.abs(wheelDelta) >= 10) {
const scale = wheelDelta > 0? 1: -1;
this.trigger(this.events.__Zoom, {type: this.events.__Zoom, scale, originX, originY });
}
this._distance = distance;
} else if (e.event.touches.length > 2) {
if (this._panEnable) {
if (dx**2+dy**2 > 8) {
this._pan = true;
}
this.$map.setCursorStyle('grabbing');
this.trigger(this.events.__Pan, { dx, dy, oldX, oldY, newX: this._x, newY: this._y });
if (this._isNotLeftMouse) {
if (this._panEnable) {
this.setCursorStyle('grabbing');
if (dx**2+dy**2 > 8) {
this._pan = true;
}
this.trigger(this.events.__Pan, { dx, dy, oldX, oldY, newX: this._x, newY: this._y });
}
} else {
if (this._isNotLeftMouse) {
if (this._panEnable) {
if (dx**2+dy**2 > 8) {
this._pan = true;
if (this._dragEnable && this.dragHandle.isDragging()) {
this.setCursorStyle('move');
if (this.limitDrag({dx, dy})) {
this.trigger(this.events.__Dragging, { dx, dy });
if (this._reflectEnable) {
this.trigger(this.events.Reflect, {dx, dy});
}
this.$map.setCursorStyle('grabbing');
this.trigger(this.events.__Pan, { dx, dy, oldX, oldY, newX: this._x, newY: this._y });
}
} else {
if (this._target && this._dragEnable && this.dragHandle.isDragging()) {
if (this.limitDrag({dx, dy})) {
this.trigger(this.events.__Dragging, { dx, dy });
if (this._reflectEnable) {
this.trigger(this.events.Reflect, {dx, dy});
}
} else {
this._x = oldX;
this._y = oldY;
}
} else if (this._areaSelectEnable && this.selectingHandle.isSelecting()) {
this.trigger(this.events.__Selecting, { x: e.offsetX, y: e.offsetY });
} else {
this._x = oldX;
this._y = oldY;
}
} else if (this._areaSelectEnable && this.selectingHandle.isSelecting()) {
this.setCursorStyle('crosshair');
this.trigger(this.events.__Selecting, { x: e.offsetX, y: e.offsetY });
}
}
}
mouseup(e) {
const target = this._target;
if (this._isNotLeftMouse) {
this._isNotLeftMouse = false;
this.$map.setCursorStyle('default');
} else {
if (this._dragEnable && this.dragHandle.isDragging()) {
this.trigger(this.events.__DragEnd, {x: e.offsetX, y: e.offsetY});
@ -299,9 +257,13 @@ class Controller extends Eventful {
}
if (this._selectEnable && target) {
this.trigger(this.events.__Selected, {target });
this.trigger(this.events.__Selected, { target });
}
this.setCursorStyle('auto');
}
// this._locking = false; 设置false时，拖动完成后，需要重新激活
this._target = null;
}
@ -321,10 +283,10 @@ class Controller extends Eventful {
let scale = 1;
if (wheelDelta > 0) {
scale = 1;
this.$map.setCursorStyle('zoom-in');
this.setCursorStyle('zoom-in');
} else if (wheelDelta < 0) {
scale = -1;
this.$map.setCursorStyle('zoom-out');
this.setCursorStyle('zoom-out');
}
this.trigger(this.events.__Zoom, {type: this.events.__Zoom, scale, originX, originY });
@ -332,9 +294,10 @@ class Controller extends Eventful {
}
click(e) {
const event = new MapEvent(e);
if (!event.graphType) {
const event = new MouseEvent(e);
if (event.code) {
this._locking = true;
} else {
this.selectHandle.clear();
this.selectingHandle.clear();
this.clear();
@ -346,7 +309,7 @@ class Controller extends Eventful {
contextmenu(e) {
eventTool.stop(e.event);
const event = new MapEvent(e);
const event = new MouseEvent(e);
if (!this._pan) {
this.trigger(this.events.ContextMenu, event);
}
@ -354,9 +317,8 @@ class Controller extends Eventful {
this._pan = false;
}
onKeydown(e) {
keydown(e) {
let shortcuts = e.key;
if (e.altKey && e.key != 'Alt') {
shortcuts = `Alt_${shortcuts}`;
}
@ -368,19 +330,19 @@ class Controller extends Eventful {
if (e.ctrlKey && e.key != 'Control') {
shortcuts = `Control_${shortcuts}`;
}
this._shortcuts = shortcuts;
this.trigger(this.events.Keydown, {key: shortcuts});
}
onKeyup(e) {
keyup(e) {
this._shortcuts = '';
}
clear() {
this.storage.clear();
this.storage.clearClipboard();
this._pan =false;
this._pan = false;
this._locking = false;
}
}

34
src/iscs_new/dragHandle.js
View File

@ -2,54 +2,48 @@ export default class DragHandle {
constructor(map, controller) {
this.$zr = map.getZr();
this.$controller = controller;
this.$options = map.getOptions();
this.$option = map.getOption();
this.$painter = map.getPainter();
this.dragging = false;
this._dragging = false;
}
isDragging() {
return this.dragging;
return this._dragging;
}
onDragStart(e) {
if (e.target && this.$controller.storage.has(e.target.model.code)) {
this.dragging = true;
if (e.code && this.$controller.storage.has(e.code)) {
this._dragging = true;
}
}
onDragging(e) {
const dx = e.dx;
const dy = e.dy;
const scaleRate = this.$options.getScaleRate();
const scaleRate = this.$option.getScaleRate();
e.dx = dx / scaleRate;
e.dy = dy / scaleRate;
if (this.dragging) {
if (this._dragging) {
this.$controller.storage.values().forEach(dragTarget => {
if (dragTarget) {
if (dragTarget.hover) {
this.$painter.hoverLevel.remove(dragTarget.hover);
dragTarget.hover = null;
if (dragTarget.highLightInstance) {
this.$painter.removeFromLevel('hightLight')(dragTarget.highLightInstance);
dragTarget.highLightInstance = null;
}
if (dragTarget.instance.doInactive) {
dragTarget.instance.doInactive(this.$zr);
}
dragTarget.inactive();
if (dragTarget.instance.dragging) {
dragTarget.instance.dragging(e);
}
dragTarget.draft(e);
if (dragTarget.instance.doActive) {
dragTarget.instance.doActive(this.$zr);
}
dragTarget.active();
}
});
}
}
onDragEnd(e) {
this.dragging = false;
this._dragging = false;
}
}

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

@ -1,8 +1,23 @@
import _ from 'lodash';
import * as graphic from '../graph/graphic';
import * as graphic from '../utils/graphic';
import * as eventTool from 'zrender/src/core/event';
import shapeRender from '../constant/shapeRender';
function shapeStyleBuilder({shape}) {
return {
...shapeRender,
subType: '__drag',
z: 9998,
draggable: false,
cursor: 'crosshair',
shape,
style: {
opacity: 0.5,
fill: '#0000ff'
}
}
}
export default class ImageDraggable extends graphic.Group {
constructor(handle, draggle=false) {
super();
@ -20,26 +35,17 @@ export default class ImageDraggable extends graphic.Group {
this.handle.e.target.instance) {
const bound = this.handle.e.target.instance.getBoundingRect();
const r = (this.handle.e.target.model.width||this.r)+3;
this.shapes.push(this.newShape({ cx: bound.x, cy: bound.y, r}));
this.shapes.push(this.newShape({ cx: bound.x+bound.width, cy: bound.y, r}));
this.shapes.push(this.newShape({ cx: bound.x+bound.width, cy: bound.y+bound.height, r}));
this.shapes.push(this.newShape({ cx: bound.x, cy: bound.y+bound.height, r}));
this.shapes.push(this.createShape({ cx: bound.x, cy: bound.y, r}));
this.shapes.push(this.createShape({ cx: bound.x+bound.width, cy: bound.y, r}));
this.shapes.push(this.createShape({ cx: bound.x+bound.width, cy: bound.y+bound.height, r}));
this.shapes.push(this.createShape({ cx: bound.x, cy: bound.y+bound.height, r}));
this.shapes.forEach(shape => { this.add(shape); });
}
}
newShape(shape) {
createShape(shape) {
return new graphic.Circle({
_subType: 'dragEl',
zlevel: 1,
z: 999999,
draggable: false,
cursor: 'crosshair',
shape,
style: {
opacity: 0.5,
fill: '#0000ff'
},
...shapeStyleBuilder({shape}),
onmousedown: this.mousedown.bind(this),
onmousemove: _.throttle(this.mousemove.bind(this), 100),
onmouseup: this.mouseup.bind(this)
@ -68,14 +74,14 @@ export default class ImageDraggable extends graphic.Group {
this.handle.e.target.instance) {
this.handle.e.target.model.point = { x: bound.x+this.r, y: bound.y+this.r };
this.handle.e.target.instance.doInactive(this.handle.$zr);
this.handle.e.target.instance.inactive(this.handle.$zr);
this.handle.e.target.instance.setShape(this.handle.e.target.model);
this.handle.e.target.instance.doActive(this.handle.$zr);
this.handle.e.target.instance.active(this.handle.$zr);
}
}
mousedown(e) {
if (e.target && ['dragEl'].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};

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

@ -1,6 +1,36 @@
import _ from 'lodash';
import * as graphic from '../graph/graphic';
import * as graphic from '../utils/graphic';
import * as eventTool from 'zrender/src/core/event';
import shapeRender from '../constant/shapeRender';
function lineStyleBuilder() {
return {
...shapeRender,
subType: '__drag',
z: 9998,
shape: {x1: 0, y1: 0, x2: 0, y2: 0 },
style: {
opacity: 0.8,
lineWidth: 2,
stroke: '#ff0000'
}
}
}
function circleStyleBuilder({shape}) {
return {
...shapeRender,
subType: '__drag',
z: 9999,
draggable: false,
cursor: 'crosshair',
shape,
style: {
opacity: 0.5,
fill: '#0000ff'
},
}
}
export default class LineDraggable extends graphic.Group {
constructor(handle, draggle=true) {
super();
@ -17,38 +47,18 @@ export default class LineDraggable extends graphic.Group {
if (this.draggle && this.handle.e.target && this.handle.e.target.model.points) {
this.handle.e.target.model.points.forEach((elem, index) => {
const r = (this.handle.e.target.model.width||this.r)+1;
this.shapes.push(this.newShape({ cx: elem.x, cy: elem.y, r }));
this.shapes.push(this.createShape({ cx: elem.x, cy: elem.y, r }));
this.add(this.shapes[index]);
});
this.line = new graphic.Line({
_subType: 'dragEl',
zlevel: 1,
z: 999990,
shape: {x1: 0, y1: 0, x2: 0, y2: 0 },
style: {
opacity: 0.8,
lineWidth: 2,
stroke: '#ff0000'
}
});
this.line = new graphic.Line(lineStyleBuilder());
this.add(this.line);
}
}
newShape(shape) {
createShape(shape) {
return new graphic.Circle({
_subType: 'dragEl',
zlevel: 1,
z: 999999,
draggable: false,
cursor: 'crosshair',
shape,
style: {
opacity: 0.5,
fill: '#0000ff'
},
...circleStyleBuilder({shape}),
onmousedown: this.mousedown.bind(this),
onmousemove: _.throttle(this.mousemove.bind(this), 100),
onmouseup: this.mouseup.bind(this)
@ -61,16 +71,16 @@ export default class LineDraggable extends graphic.Group {
if (this.handle.e.target && this.handle.e.target.instance) {
this.offset = {x: e.offsetX, y: e.offsetY};
this.handle.e.target.instance.doInactive(this.handle.$zr);
this.handle.e.target.instance.inactive(this.handle.$zr);
this.handle.e.target.instance.setShape(this.handle.e.target.model);
this.handle.e.target.instance.doActive(this.handle.$zr);
this.handle.e.target.instance.active(this.handle.$zr);
this.handle.$controller.trigger(this.handle.$controller.events.Reflect, {dx, dy});
}
}
mousedown(e) {
this.offset = {x: e.offsetX, y: e.offsetY};
if (e.target && ['dragEl'].includes(e.target._subType)) {
if (e.target && ['__drag'].includes(e.target.subType)) {
this.target = e.target;
if (!eventTool.isMiddleOrRightButtonOnMouseUpDown(e)) {
this.setDraggable(true);

73
src/iscs_new/graph/core/parser.js
View File

@ -1,73 +0,0 @@
import * as graphic from '../graphic';
class Parser {
constructor(graph) {
this.__graph = graph;
}
createShape(model, opts) {
const option = Object.assign(opts, {
zlevel: model.zlevel,
z: model.z,
z2: (model.layer || model.z2) + opts.z2,
silent: opts.silent || false,
cursor: opts.cursor ? opts.cursor : this.__graph._is ? 'default' : 'pointer'
});
const shape = new graphic[opts.type](option);
this.__graph.add(shape);
return shape;
}
isShapeLeaf(obj) {
return obj && obj.name && obj.type && Object.keys(graphic).includes(obj.type);
}
buildSTL(model, template, out = {}) {
Object.keys(template).forEach(attr => {
if (!['__ctx'].includes(attr)) {
const leaf = template[attr];
if (leaf instanceof Function) {
out[attr] = leaf(model);
} else if (leaf instanceof Array) {
out[attr] = leaf.map(el => {
return el instanceof Array
? this.buildSTL(model, el, [])
: el instanceof Object
? this.buildSTL(model, el, {})
: el;
});
} else if (leaf instanceof Object) {
out[attr] = this.buildSTL(model, leaf, {});
} else {
out[attr] = leaf;
}
}
});
return out;
}
parse2Shape(model, stl, out = {}) {
if (stl instanceof Array) {
stl.forEach(elem => {
const shape = this.parse2Shape(model, elem, out);
out[shape.name] = shape;
});
} else if (Object instanceof Object) {
if (this.isShapeLeaf(stl)) {
return this.createShape(model, stl);
} else {
Object.keys(stl || {}).forEach(attr => { out[attr] = this.parse2Shape(model, stl[attr]); });
}
}
return out;
}
parse(template, model) {
return this.parse2Shape(model, this.buildSTL(model, template));
}
}
export default Parser;

85
src/iscs_new/graph/core/state.js
View File

@ -1,85 +0,0 @@
import * as graphic from '../graphic';
class State extends graphic.Group {
constructor(shape, is) {
super();
if (is) {
this._subType = shape.model._type;
this._val = shape.model.code;
} else {
this._code = shape.model.code;
this._type = shape.model._type;
}
this._caches = {};
this._shape = shape;
this._is = is;
this._origin = null;
this._rotation = null;
this._scale = [1, 1];
}
onFrame(delta) {
}
setShape(model) {
this.removeAll();
this.parser.parse(this.$template, model, this.$elMap);
this.transformed(model);
}
setState(state) {
if (this.$template.__ctx && this.$template.__ctx.$doUpdate) {
this.$template.__ctx.$doUpdate({model: this._shape.model, state});
}
}
doActive(zr) {
if (this.$template.__ctx && this.$template.__ctx.$doActive) {
this.$template.__ctx.$doActive(zr);
}
}
doInactive(zr) {
if (this.$template.__ctx && this.$template.__ctx.$doInactive) {
this.$template.__ctx.$doInactive(zr);
}
}
dragging(e) {
if (this.$template.__ctx && this.$template.__ctx.$doDragging) {
this.$template.__ctx.$doDragging(this._shape.model);
}
this.setShape(this._shape.model);
}
transformed({origin, rotation, scale}) {
this._origin = origin;
this._rotation = rotation;
this._scale = scale||[1, 1];
this.traverse(el => {
if (!(el instanceof graphic.Group)) {
el.attr('origin', origin);
el.attr('rotation', rotation);
el.attr('scale', scale);
}
}, this);
}
traversed(elMap, cb) {
Object.values(elMap).forEach(el => {
if (el) {
if (this.parser.isShapeLeaf(el)) {
cb(el);
} else {
this.traversed(el, cb);
}
}
});
}
}
export default State;

81
src/iscs_new/graph/graph.js
View File

@ -1,81 +0,0 @@
// import Animation from 'zrender/src/animation/Animation';
import Parser from './core/parser';
import State from './core/state';
const lifeCycleHookList = ['onload', 'reload'];
const actionHookList = ['doUpdate', 'doActive', 'doInactive'];
function noop () {}
class Graph extends State {
constructor(options, shape, is) {
super(shape, is);
this.invTransform = [1, 0, 0, 1, 0, 0];
this.parser = new Parser(this);
this.reload(options);
// this.$animation = new Animation({onFrame: this.onFrame });
// this.$animation.start();
if (this.$template.__ctx.$onload) this.$template.__ctx.$onload();
}
reload(options) {
const index = options.cacheId;
const cache = this._caches[index]; // 获取缓存
const shapes = [];
this.removeAll();
if (cache) {
this.$template = cache.template;
this.$elMap = cache.elMap;
cache.shapes.forEach(shape => { this.add(shape); });
} else {
this.$template = this.defineTemplate(options); // 生成模板
this.$elMap = this.compile(this.$template, this._shape);
this.traverse(shape=> { shapes.push(shape); }, this);
this._caches[index] = { template: this.$template, elMap: this.$elMap, shapes };
}
this.transformed(this._shape.model);
// this.setState(this._shape._state);
if (this.$template.__ctx.$reload) this.$template.__ctx.$reload();
}
defineTemplate (options) {
const template = options.template;
const methods = options.methods||{};
const incidents = options.incidents||{};
const actions = options.actions||{};
const ctx = Object.create(Object.assign(options.data(), {$vm: this}));
Object.keys(methods).forEach(name => {
ctx[name] = (methods[name] || noop).bind(ctx);
});
Object.keys(incidents).forEach(name => {
ctx[`$${name}`] = (incidents[name] || noop).bind(ctx);
});
actionHookList.forEach(name => {
ctx[`$${name}`] = (actions[name] || noop).bind(ctx);
});
lifeCycleHookList.forEach(name => {
ctx[`$${name}`] = (options[name] || noop).bind(ctx);
});
return Object.assign(template.apply(ctx), { __ctx: ctx });
}
compile(template, shape) {
return this.parser.parse(template, shape.model, {});
}
}
export default Graph;

49
src/iscs_new/graph/shape/Arrow.js
View File

@ -1,49 +0,0 @@
import Path from 'zrender/src/graphic/Path';
export default Path.extend({
type: 'arrow',
shape: {
x: 0,
y: 0,
w: 3,
r: 6,
toward: null
},
style: {
stroke: '#000',
fill: null
},
buildPath: function (ctx, shape) {
var x = shape.x;
var y = shape.y;
var r = shape.r;
var w = shape.w;
switch (shape.toward) {
case 'up':
ctx.moveTo(x - w, y + r);
ctx.lineTo(x - w, y);
ctx.lineTo(x - w - r, y);
ctx.lineTo(x, y - r);
ctx.lineTo(x + w + r, y);
ctx.lineTo(x + w, y);
ctx.lineTo(x + w, y + r);
ctx.closePath();
break;
case 'down':
ctx.moveTo(x - w, y - r);
ctx.lineTo(x - w, y);
ctx.lineTo(x - w - r, y);
ctx.lineTo(x, y + r);
ctx.lineTo(x + w + r, y);
ctx.lineTo(x + w, y);
ctx.lineTo(x + w, y - r);
ctx.closePath();
break;
}
}
});

48
src/iscs_new/graph/shape/ArrowLine.js
View File

@ -1,48 +0,0 @@
import Path from 'zrender/src/graphic/Path';
export default Path.extend({
type: 'arrow-line',
shape: {
x: 0,
y: 0,
l: 15,
r: 5,
isLeft: true,
toLeft: true
},
style: {
stroke: '#000',
fill: null
},
buildPath: function (ctx, shape) {
var x = shape.x;
var y = shape.y;
var l = shape.l;
var r = shape.r;
var d = shape.toLeft ? 1: -1;
if (shape.isLeft && shape.toLeft || !shape.isLeft && !shape.toLeft) {
ctx.moveTo(x, y);
ctx.lineTo(x, y - r);
ctx.lineTo(x - l*d, y - r);
ctx.lineTo(x - l*d - r*d, y);
ctx.lineTo(x - l*d, y + r);
ctx.lineTo(x, y + r);
ctx.closePath();
}
if (shape.isLeft && !shape.toLeft || !shape.isLeft && shape.toLeft) {
ctx.moveTo(x, y);
ctx.lineTo(x + r*d, y - r);
ctx.lineTo(x + r*d + l*d, y - r);
ctx.lineTo(x + r*d + l*d, y + r);
ctx.lineTo(x + r*d, y + r);
ctx.closePath();
}
}
});

395
src/iscs_new/graph/shape/Coordinate/Coordinate.js
View File

@ -1,395 +0,0 @@
import * as graphic from '../../graphic';
import LineView from './lineView';
export default class LineCoordinate extends graphic.Group {
constructor(option) {
super();
this._option = {
zlevel: option.zlevel || 0,
z: option.z || 0,
z2: option.z2 || 0,
shape: {
x: 0,
y: 0,
xLength: 100,
yLength: 60,
...option.shape
},
style: {
globalStyle: {
lineWidth: 0.2,
color: '#000',
...option.style.globalStyle
},
xAxis: {
show: true,
type: 'category',
boundaryGap: 2,
name: option.style.xAxis.name,
nameGap: {
left: 8,
...option.style.xAxis.nameGap
},
axisLine: {
symbol: true,
style: {
},
...option.style.xAxis.axisLine
},
axisTick: {
show: true,
splitNumber: 0,
inside: true,
style: {
},
...option.style.xAxis.axisTick
},
axisLabel: {
show: true,
distance: 4,
verticalAlign: 'top',
style: {
},
...option.style.xAxis.axisLabel
},
data: option.style.xAxis.data||[]
},
yAxis: {
show: true,
type: 'category',
name: option.style.yAxis.name,
boundaryGap: 3,
nameGap: {
left: 2,
...option.style.yAxis.nameGap
},
axisLine: {
symbol: true,
style: {
},
...option.style.yAxis.axisLine
},
axisTick: {
show: true,
splitNumber: 5,
inside: true,
style: {
},
...option.style.yAxis.axisTick
},
axisLabel: {
show: true,
distance: 2,
verticalAlign: 'top',
style: {
},
...option.style.yAxis.axisLabel
},
data: option.style.yAxis.data||[]
},
series: {
type: 'line',
data: [],
style: {
},
...option.style.series
}
}
};
this.lineView = new LineView(this);
this.render();
}
render() {
this.removeAll();
this._createCoordinate(this._option);
this._createXTicks(this._option);
this._createYTicks(this._option);
this._createData(this._option);
}
_createCoordinate(option) {
const {shape, style} = option;
var xAxis = style.xAxis;
var yAxis = style.yAxis;
var xLength = shape.xLength;
var yLength = shape.yLength;
var x = shape.x;
var y = shape.y;
if (xAxis.show) {
const line = new graphic.Line({
zlevel: this._option.zlevel,
z: this._option.z,
z2: this._option.z2,
...this._transformation(),
shape: {
x1: x,
y1: y,
x2: x + xLength,
y2: y
}
});
line.setStyle({lineCap: 'square', ...style.globalStyle, ...xAxis.axisLine });
this.add(line);
}
if (yAxis.show) {
const line = new graphic.Line({
zlevel: this._option.zlevel,
z: this._option.z,
z2: this._option.z2,
...this._transformation(),
shape: {
x1: x,
y1: y,
x2: x,
y2: y - yLength
}
});
line.setStyle({lineCap: 'square', ...style.globalStyle, ...yAxis.axisLine });
this.add(line);
}
}
_createXTicks(option) {
const {shape, style} = option;
const xAxis= style.yAxis;
if (xAxis.axisLine.symbol) {
const x = shape.x + shape.xLength;
const y = shape.y;
const arrows = new graphic.Polygon({
zlevel: this._option.zlevel,
z: this._option.z,
z2: this._option.z2,
...this._transformation(),
shape: {
points: [[x + 4, y], [x - 1, y + 1], [x, y], [x - 1, y- 1], [x + 4, y]],
smooth: 0
}
});
arrows.setStyle({ ...style.globalStyle, ...xAxis.axisTick.style });
this.add(arrows);
}
if (xAxis.name) {
const label = new graphic.Text({
zlevel: this._option.zlevel,
z: this._option.z,
z2: this._option.z2,
...this._transformation(),
style: {
textVerticalAlign: 'middle',
textAlign: 'left',
text: xAxis.name,
fontSize: 5,
x: shape.x + shape.xLength + xAxis.nameGap.left,
y: shape.y,
textFill: { ...style.globalStyle, ...xAxis.axisTick.style }
}
});
this.add(label);
}
const scale = (xAxis.data.length - 1) * xAxis.axisTick.splitNumber;
const dataNum = scale + xAxis.boundaryGap;
const num = shape.xLength / dataNum;
const x = shape.x;
const y = shape.y;
let dataIndex = 0;
for (let index = 0; index < dataNum; index++) {
if (xAxis.axisTick.show) {
const spliceLine = new graphic.Line({
zlevel: this._option.zlevel,
z: this._option.z,
z2: this._option.z2,
...this._transformation(),
shape: {
x1: x + (num * (index + 1)),
y1: y,
x2: x + (num * (index + 1)),
y2: y - 2
}
});
if (index <= scale) {
spliceLine.setStyle({ ...style.globalStyle, ...xAxis.axisTick.style });
} else {
spliceLine.setStyle({ lineWidth: 0 });
}
this.add(spliceLine);
}
if (xAxis.axisLabel.show &&
xAxis.axisTick.splitNumber && (
index % xAxis.axisTick.splitNumber) == 0) {
const label = new graphic.Text({
zlevel: this._option.zlevel,
z: this._option.z,
z2: this._option.z2,
...this._transformation(),
style: {
textVerticalAlign: 'middle',
textAlign: 'center',
text: xAxis.data[dataIndex],
fontSize: 5,
x: x + (num * (index + 1)),
y: y + xAxis.axisLabel.distance,
textFill: { ...style.globalStyle, ...xAxis.axisTick.style }
}
});
this.add(label);
dataIndex++;
}
}
}
_createYTicks(option) {
const {style, shape} = option;
const yAxis= style.yAxis;
if (yAxis.axisLine.symbol) {
const x = shape.x;
const y = shape.y - shape.yLength;
const arrows = new graphic.Polygon({
zlevel: this._option.zlevel,
z: this._option.z,
z2: this._option.z2,
...this._transformation(),
shape: {
points: [[x, y - 4], [x + 1, y + 1], [x, y], [x - 1, y + 1], [x, y - 4]],
smooth: 0
}
});
arrows.setStyle({ ...style.globalStyle, ...yAxis.axisTick.style});
this.add(arrows);
}
if (yAxis.name) {
const label = new graphic.Text({
zlevel: this._option.zlevel,
z: this._option.z,
z2: this._option.z2,
...this._transformation(),
style: {
textVerticalAlign: 'middle',
textAlign: 'left',
text: yAxis.name,
fontSize: 5,
x: shape.x + yAxis.nameGap.left,
y: shape.y - shape.yLength,
textFill: { ...style.globalStyle, ...yAxis.axisTick.style}
}
});
this.add(label);
}
const scale = (yAxis.data.length - 1) * yAxis.axisTick.splitNumber;
const dataNum = scale + yAxis.boundaryGap;
const num = shape.yLength / dataNum;
const x = shape.x;
const y = shape.y;
let dataIndex = 0;
for (let index = 0; index < dataNum; index++) {
if (yAxis.axisTick.show) {
const spliceLine = new graphic.Line({
zlevel: this._option.zlevel,
z: this._option.z,
z2: this._option.z2,
...this._transformation(),
shape: {
x1: x,
y1: y - (num * (index + 1)),
x2: x + 2,
y2: y - (num * (index + 1))
}
});
if (index <= scale) {
spliceLine.setStyle({ ...style.globalStyle, ...yAxis.axisTick.style });
} else {
spliceLine.setStyle({ lineWidth: 0 });
}
this.add(spliceLine);
}
if (yAxis.axisLabel.show &&
yAxis.axisTick.splitNumber && (
index % yAxis.axisTick.splitNumber) == 0) {
const label = new graphic.Text({
zlevel: this._option.zlevel,
z: this._option.z,
z2: this._option.z2,
...this._transformation(),
style: {
textVerticalAlign: 'middle',
textAlign: 'right',
text: yAxis.data[dataIndex],
fontSize: 5,
x: x - yAxis.axisLabel.distance,
y: y - (num * (index + 1)),
fill: { ...style.globalStyle, ...yAxis.axisTick.style }
}
});
this.add(label);
dataIndex++;
}
}
}
_createData(option) {
const series = option.style.series;
switch (series.type) {
case 'line': return this.lineView.render(option);
}
}
_transformation() {
var parent = this.parent||{};
var origin = parent._origin||null;
var rotation = parent._rotation||null;
var scale = parent._scale||[1, 1];
return { origin, rotation, scale };
}
_traverse(target, attr) {
for (var key in attr) {
if (!(attr[key] instanceof Object) || !attr[key]) {
target[key] = attr[key];
} else {
this._traverse(target[key], attr[key]);
}
}
}
setShape(objs) {
this._traverse(this._option.shape, objs);
this.render();
}
setStyle(objs) {
this._traverse(this._option.style, objs);
this.render();
}
dragging(e) {
this.traverse(el => {
if (el instanceof graphic.Text) {
el.setStyle({
x: el.style.x + e.dx,
y: el.style.y + e.dy
});
} else if (el instanceof graphic.Line) {
el.setShape({
x1: el.shape.x1 + e.dx,
y1: el.shape.y1 + e.dy,
x2: el.shape.x2 + e.dx,
y2: el.shape.y2 + e.dy
});
} else if (el instanceof graphic.Polygon) {
el.setShape({
points: el.shape.points.map(it => { return [it[0]+e.dx, it[1]+e.dy]; })
});
}
}, this);
}
}

39
src/iscs_new/graph/shape/Coordinate/lineView.js
View File

@ -1,39 +0,0 @@
import * as graphic from '../../graphic';
export default class LineView {
constructor(coordinate) {
this.coordinate = coordinate;
}
render(option) {
const {series, xAxis, yAxis, globalStyle} = option.style;
if (series.type == 'line') {
const shape = option.shape;
const dataList = [];
const scalex = (xAxis.data.length - 1) * xAxis.axisTick.splitNumber;
const dataNumx = scalex + xAxis.boundaryGap;
const numx = (shape.xLength / dataNumx);
const scaley = (yAxis.data.length - 1) * yAxis.axisTick.splitNumber;
const dataNumy = scaley + yAxis.boundaryGap;
const numy = shape.yLength / dataNumy;
const seriesStyle = series.style;
series.data.forEach(point => {
const data = [shape.x + (numx * ((point[0] * xAxis.axisTick.splitNumber) + 1)), shape.y - (numy * (point[1] + 1))];
dataList.push(data);
});
const line = new graphic.Polygon({
zlevel: option.zlevel,
z: option.z,
z2: option.z2,
...this.coordinate._transformation(),
shape: {
points: dataList,
smooth: 0
}
});
line.setStyle({ ...globalStyle, ...seriesStyle });
this.coordinate.add(line);
}
}
}

457
src/iscs_new/graph/shape/CurvedScale/curvedScale.js
View File

@ -1,457 +0,0 @@
import * as graphic from '../../graphic';
export default class CurvedScale extends graphic.Group {
constructor(option) {
super();
this._option = {
zlevel: option.zlevel || 0,
z: option.z || 0,
z2: option.z2 || 0,
cursor: option.cursor||null,
silent: option.silent||false,
shape: {
cx: 0,
cy: 0,
r: 50,
min: 0,
max: 100,
startAngle: 0,
endAngle: Math.PI,
splitNumber: 10,
clockwise: false,
value: 0,
...option.shape
},
style: {
axisLine: {
show: true,
lineStyle: {
color: [[0.2, '#91c7ae'], [0.8, '#63869e'], [1, '#c23531']],
width: 2,
shadowColor: '#fff',
shadowBlur: 10
},
...option.style.axisLine
},
splitLine: {
show: true,
length: 30,
lineStyle: {
width: 2,
stroke: 'auto'
},
...option.style.splitLine
},
axisTick: {
show: true,
splitNumber: 5,
length: 8,
lineStyle: {
width: 1,
stroke: 'auto',
shadowColor: '#fff',
shadowBlur: 10
},
...option.style.axisTick
},
axisLabel: {
show: true,
distance: 5,
textStyle: {
fontSize: 18,
textFill: 'auto'
},
...option.style.axisLabel
},
pointer: {
show: true,
width: 8,
length: '80%',
fill: 'auto',
...option.style.pointer
}
}
};
this.render();
}
render() {
this.removeAll();
var axisLine = this._option.style.axisLine;
var showAxis = axisLine.show;
var axisLineStyle = axisLine.lineStyle;
var axisColorList = axisLineStyle.color;
var axisLineWidth = axisLineStyle.width;
var shape = this._option.shape;
var clockwise = shape.clockwise;
var startAngle = -shape.startAngle / 180 * Math.PI;
var endAngle = -shape.endAngle / 180 * Math.PI;
var angleRangeSpan = (endAngle - startAngle) % (Math.PI * 2);
var prevEndAngle = startAngle;
if (showAxis) {
for (var i = 0; i < axisColorList.length; i++) {
var percent = Math.min(Math.max(axisColorList[i][0], 0), 1);
var angle = startAngle + angleRangeSpan * percent;
var sector = new graphic.Sector({
zlevel: this._option.zlevel,
z: this._option.z,
z2: this._option.z2,
cursor: this._option.cursor,
silent: this._option.silent,
...this._transformation(),
shape: {
startAngle: prevEndAngle,
endAngle: angle,
cx: shape.cx,
cy: shape.cy,
clockwise: false,
r0: shape.r - axisLineWidth,
r: shape.r
}
});
sector.setStyle({
fill: axisColorList[i][1],
color: axisLine.color,
borderWidth: axisLine.borderWidth,
borderColor: axisLine.borderColor
});
this.add(sector);
prevEndAngle = angle;
}
}
var getColor = function (percent) {
percent = clockwise? percent : 1 - percent;
if (percent <= 0) {
return axisColorList[0][1];
}
for (var i = 0; i < axisColorList.length; i++) {
if (axisColorList[i][0] >= percent &&
(i === 0 ? 0 : axisColorList[i - 1][0]) < percent
) {
return axisColorList[i][1];
}
}
return axisColorList[i - 1][1];
};
if (!clockwise) {
[startAngle, endAngle] = [endAngle, startAngle];
}
this._createTicks({startAngle, endAngle, getColor});
this._createPointer({startAngle, endAngle, getColor});
}
_createTicks({startAngle, endAngle, getColor}) {
var shape = this._option.shape;
var x = shape.cx;
var y = shape.cy;
var r = shape.r;
var minVal = parseFloat(shape.min);
var maxVal = parseFloat(shape.max);
var splitNumber = shape.splitNumber;
var axisLabel = this._option.style.axisLabel;
var axisLabelShow = axisLabel.show;
var axisLabelDistance = axisLabel.distance;
var axisLabelStyle = axisLabel.textStyle;
var axisTick = this._option.style.axisTick;
var axisTickLen = parsePercent(axisTick.length, r);
var axisTickLineStyle = axisTick.lineStyle;
var axisTickShow = axisTick.show;
var subSplitNumber = axisTick.splitNumber;
var splitLine = this._option.style.splitLine;
var splitLineLen = parsePercent(splitLine.length, r);
var splitLineStyle = splitLine.lineStyle;
var splitLineShow = splitLine.show;
var angle = startAngle;
var step = (endAngle - startAngle) / splitNumber;
var subStep = step / subSplitNumber;
for (var i = 0; i <= splitNumber; i++) {
const unitX = Math.cos(angle);
const unitY = Math.sin(angle);
if (splitLineShow) {
const line = new graphic.Line({
zlevel: this._option.zlevel,
z: this._option.z,
z2: this._option.z2,
cursor: this._option.cursor,
silent: this._option.silent,
...this._transformation(),
shape: {
x1: unitX * r + x,
y1: unitY * r + y,
x2: unitX * (r - splitLineLen) + x,
y2: unitY * (r - splitLineLen) + y
},
style: splitLineStyle
});
if (splitLineStyle.stroke === 'auto') {
line.setStyle({ stroke: getColor(i / splitNumber) });
}
this.add(line);
}
if (axisLabelShow) {
var label = new graphic.Text({
zlevel: this._option.zlevel,
z: this._option.z,
z2: this._option.z2,
cursor: this._option.cursor,
silent: this._option.silent,
...this._transformation(),
style: {
...axisLabelStyle,
text: formatLabel(
round(i / splitNumber * (maxVal - minVal) + minVal),
axisLabel.formatter || null
),
x: unitX * (r - splitLineLen - axisLabelDistance) + x,
y: unitY * (r - splitLineLen - axisLabelDistance) + y,
textVerticalAlign: unitY < -0.4 ? 'top' : (unitY > 0.4 ? 'bottom' : 'middle'),
textAlign: unitX < -0.4 ? 'left' : (unitX > 0.4 ? 'right' : 'center')
}
});
if (axisLabelStyle.textFill == 'auto') {
label.setStyle({ textFill: getColor(i / splitNumber) });
}
this.add(label);
}
if (axisTickShow && i !== splitNumber) {
for (var j = 0; j <= subSplitNumber; j++) {
const unitX = Math.cos(angle);
const unitY = Math.sin(angle);
const tickLine = new graphic.Line({
zlevel: this._option.zlevel,
z: this._option.z,
z2: this._option.z2,
cursor: this._option.cursor,
silent: this._option.silent,
...this._transformation(),
shape: {
x1: unitX * r + x,
y1: unitY * r + y,
x2: unitX * (r - axisTickLen) + x,
y2: unitY * (r - axisTickLen) + y
},
style: axisTickLineStyle
});
if (axisTickLineStyle.stroke === 'auto') {
tickLine.setStyle({ stroke: getColor((i + j / subSplitNumber) / splitNumber) });
}
this.add(tickLine);
angle += subStep;
}
angle -= subStep;
} else {
angle += step;
}
}
}
_createPointer({startAngle, endAngle, getColor}) {
var shape = this._option.shape;
var minVal = parseFloat(shape.min);
var maxVal = parseFloat(shape.max);
var value = parseFloat(shape.value);
var pointerStyle = this._option.style.pointer;
var pointerShow = pointerStyle.show;
var pointerLength = pointerStyle.length;
var pointerWidth = pointerStyle.width;
if (pointerShow) {
var valueExtent = [minVal, maxVal];
var angleExtent = [startAngle, endAngle];
var pointer = new graphic.Pointer({
zlevel: this._option.zlevel,
z: this._option.z,
z2: this._option.z2,
cursor: this._option.cursor,
silent: this._option.silent,
...this._transformation(),
shape: {
x: shape.cx,
y: shape.cy,
width: parsePercent(pointerWidth, shape.r),
r: parsePercent(pointerLength, shape.r),
angle: linearMap(value, valueExtent, angleExtent, true)
},
style: pointerStyle
});
if (pointer.style.fill === 'auto') {
pointer.setStyle('fill', getColor(linearMap(value, valueExtent, [0, 1], true)));
}
this.add(pointer);
}
}
_traverse(target, attr) {
for (var key in attr) {
if (!(attr[key] instanceof Object) || !attr[key]) {
target[key] = attr[key];
} else {
this._traverse(target[key], attr[key]);
}
}
}
_transformation() {
var parent = this.parent||{};
var origin = parent._origin||null;
var rotation = parent._rotation||null;
var scale = parent._scale||[1, 1];
return { origin, rotation, scale };
}
dragging(e) {
this.traverse(el => {
if (el instanceof graphic.Text) {
el.setStyle({
x: el.style.x + e.dx,
y: el.style.y + e.dy
});
} else if (el instanceof graphic.Sector) {
el.setShape({
cx: el.shape.cx + e.dx,
cy: el.shape.cy + e.dy
});
} else if (el instanceof graphic.Line) {
el.setShape({
x1: el.shape.x1 + e.dx,
y1: el.shape.y1 + e.dy,
x2: el.shape.x2 + e.dx,
y2: el.shape.y2 + e.dy
});
} else if (el instanceof graphic.Pointer) {
el.setShape({
x: el.shape.x + e.dx,
y: el.shape.y + e.dy
});
}
}, this);
}
setShape(objs) {
this._traverse(this._option.shape, objs);
this.render();
}
setStyle(objs) {
this._traverse(this._option.style, objs);
this.render();
}
}
function formatLabel(label, labelFormatter) {
if (labelFormatter) {
if (typeof labelFormatter === 'string') {
label = labelFormatter.replace('{value}', label != null ? label : '');
} else if (typeof labelFormatter === 'function') {
label = labelFormatter(label);
}
}
return label;
}
function round(x, precision, returnStr) {
if (precision == null) {
precision = 10;
}
precision = Math.min(Math.max(0, precision), 20);
x = (+x).toFixed(precision);
return returnStr ? x : +x;
}
function parsePercent(percent, all) {
switch (percent) {
case 'center':
case 'middle':
percent = '50%';
break;
case 'left':
case 'top':
percent = '0%';
break;
case 'right':
case 'bottom':
percent = '100%';
break;
}
if (typeof percent === 'string') {
if (percent.trim().match(/%$/)) {
return parseFloat(percent) / 100 * all;
}
return parseFloat(percent);
}
return percent == null ? NaN : +percent;
}
function linearMap(val, domain, range, clamp) {
var subDomain = domain[1] - domain[0];
var subRange = range[1] - range[0];
if (subDomain === 0) {
return subRange === 0
? range[0]
: (range[0] + range[1]) / 2;
}
if (clamp) {
if (subDomain > 0) {
if (val <= domain[0]) {
return range[0];
} else if (val >= domain[1]) {
return range[1];
}
} else {
if (val >= domain[0]) {
return range[0];
} else if (val <= domain[1]) {
return range[1];
}
}
} else {
if (val === domain[0]) {
return range[0];
}
if (val === domain[1]) {
return range[1];
}
}
return (val - domain[0]) / subDomain * subRange + range[0];
}

115
src/iscs_new/graph/shape/Digit.js
View File

@ -1,115 +0,0 @@
import Path from 'zrender/src/graphic/Path';
import * as polyHelper from 'zrender/src/graphic/helper/poly';
/**
* - 1
* | | 4 5
* - 2
* | | 6 7
* - 3
*/
export default Path.extend({
type: 'Digit',
dightMap: {
'0': [1, 3, 4, 5, 6, 7],
'1': [5, 7],
'2': [1, 2, 3, 5, 6],
'3': [1, 2, 3, 5, 7],
'4': [2, 4, 5, 7],
'5': [1, 2, 3, 4, 7],
'6': [1, 2, 3, 4, 6, 7],
'7': [1, 5, 7],
'8': [1, 2, 3, 4, 5, 6, 7],
'9': [1, 2, 3, 4, 5, 7],
'.': [10],
'°': [1, 2, 4, 5],
'*': [1, 2, 4, 5],
'C': [1, 3, 4, 6],
'L': [3, 4, 6]
},
shape: {
x: 0,
y: 0,
l: 4,
r: 2,
v: '8',
dx: 0.5,
dy: 0
},
getVPoints(shape, dx, dy) {
return [
[shape.x+dx, shape.y+shape.r*1.5+dy],
[shape.x+shape.r+dx, shape.y+shape.r*2.5+dy],
[shape.x+shape.r+dx, shape.y+shape.r*2.5+shape.l+dy],
[shape.x+dx, shape.y+shape.r*3.5+shape.l+dy],
[shape.x-shape.r+dx, shape.y+shape.r*2.5+shape.l+dy],
[shape.x-shape.r+dx, shape.y+shape.r*2.5+dy]
];
},
getLPoints(shape, dx, dy) {
return [
[shape.x+dx, shape.y+shape.r+dy],
[shape.x+shape.r+dx, shape.y+dy],
[shape.x+shape.r+shape.l+dx, shape.y+dy],
[shape.x+shape.r*2+shape.l+dx, shape.y+shape.r+dy],
[shape.x+shape.r+shape.l+dx, shape.y+shape.r*2+dy],
[shape.x+shape.r+dx, shape.y+shape.r*2+dy]
];
},
buildPath: function (ctx, shape) {
const list = this.dightMap[shape.v]||[];
if (list.includes(1)) {
const model = {
points: this.getLPoints(shape, 0, 0)
};
polyHelper.buildPath(ctx, model, true);
}
if (list.includes(2)) {
const model = {
points: this.getLPoints(shape, 0, shape.l+shape.r*3+shape.dy*2)
};
polyHelper.buildPath(ctx, model, true);
}
if (list.includes(3)) {
const model = {
points: this.getLPoints(shape, 0, shape.l*2+shape.r*6+shape.dy*2)
};
polyHelper.buildPath(ctx, model, true);
}
if (list.includes(4)) {
const model = {
points: this.getVPoints(shape, -shape.dx, +shape.dy)
};
polyHelper.buildPath(ctx, model, true);
}
if (list.includes(5)) {
const model = {
points: this.getVPoints(shape, shape.l+shape.r*2+shape.dx, +shape.dy)
};
polyHelper.buildPath(ctx, model, true);
}
if (list.includes(6)) {
const model = {
points: this.getVPoints(shape, -shape.dx, shape.l+shape.r*3+shape.dy*2)
};
polyHelper.buildPath(ctx, model, true);
}
if (list.includes(7)) {
const model = {
points: this.getVPoints(shape, shape.l+shape.r*2+shape.dx, shape.l+shape.r*3+shape.dy*2)
};
polyHelper.buildPath(ctx, model, true);
}
}
});

44
src/iscs_new/graph/shape/Hover.js
View File

@ -1,44 +0,0 @@
import Path from 'zrender/src/graphic/Path';
export default Path.extend({
type: 'hover',
shape: {
padding: 2,
x: 0,
y: 0,
with: 0,
height: 0
},
style: {
stroke: '#fff',
fill: null
},
buildPath: function (ctx, shape) {
var x = shape.x - this.shape.padding;
var y = shape.y - this.shape.padding;
var w = shape.width + this.shape.padding * 2;
var h = shape.height + this.shape.padding * 2;
var ph = Math.min(h, w) / 4;
var pw = Math.min(h, w) / 4;
ctx.moveTo(x, y + ph);
ctx.lineTo(x, y);
ctx.lineTo(x + pw, y);
ctx.moveTo(x + w - pw, y);
ctx.lineTo(x + w, y);
ctx.lineTo(x + w, y + ph);
ctx.moveTo(x, y + h - ph);
ctx.lineTo(x, y + h);
ctx.lineTo(x + pw, y + h);
ctx.moveTo(x + w, y + h - ph);
ctx.lineTo(x + w, y + h);
ctx.lineTo(x + w - pw, y + h);
}
});

423
src/iscs_new/graph/shape/LinearScale/linearScale.js
View File

@ -1,423 +0,0 @@
import * as graphic from '../../graphic';
import * as color from 'zrender/src/tool/color';
export default class LinearScale extends graphic.Group {
constructor(option) {
super();
this._option = {
zlevel: option.zlevel || 0,
z: option.z || 0,
z2: option.z2 || 0,
cursor: option.cursor||null,
silent: option.silent||false,
shape: {
x: 0,
y: 0,
min: 0,
max: 100,
tickStart: 0,
tickEnd: 200,
angle: Math.PI,
splitNumber: 10,
value: 0,
...option.shape
},
style: {
axisLine: {
show: true,
lineStyle: {
color: [[0.2, '#91c7ae'], [0.8, '#63869e'], [1, '#c23531']],
lineWidth: 3
},
...option.style.axisLine
},
splitLine: {
show: true,
length: 8,
distance: -6.5,
lineStyle: {
width: 1,
stroke: 'auto'
},
...option.style.splitLine
},
axisTick: {
show: true,
length: 3,
distance: -4.5,
splitNumber: 5,
lineStyle: {
width: 1,
stroke: 'auto',
shadowColor: '#fff',
shadowBlur: 10
},
...option.style.axisTick
},
axisLabel: {
show: true,
distance: -25,
textStyle: {
fontSize: 6,
textFill: 'auto'
},
...option.style.axisLabel
},
pointer: {
show: true,
lineWidth: 3,
stroke: 'auto',
lineCap: 'round',
...option.style.pointer
}
}
};
this.render();
}
render() {
this.removeAll();
var axisLine = this._option.style.axisLine;
var showAxis = axisLine.show;
var axisLineStyle = axisLine.lineStyle;
var axisColorList = axisLineStyle.color;
var axisLineWidth = axisLineStyle.lineWidth;
var shape = this._option.shape;
var angle = shape.angle;
var minTick = shape.tickStart;
var maxTick = shape.tickEnd;
var lineRangeSpan = (maxTick - minTick);
var prevEndLine = 0;
var x = shape.x;
var y = shape.y;
if (showAxis) {
for (var i = 0; i < axisColorList.length; i++) {
var percent = Math.min(Math.max(axisColorList[i][0], 0), 1);
var lineLen = lineRangeSpan * percent - prevEndLine;
var px = lineLen * Math.cos(angle);
var py = lineLen * Math.sin(angle);
var line = new graphic.Line({
zlevel: this._option.zlevel,
z: this._option.z,
z2: this._option.z2,
cursor: this._option.cursor,
silent: this._option.silent,
...this._transformation(),
shape: {
x1: x,
y1: y,
x2: x + px,
y2: y + py
}
});
line.setStyle({ stroke: axisColorList[i][1], lineWidth: axisLineWidth });
this.add(line);
x += px;
y += py;
prevEndLine = lineRangeSpan * percent;
}
}
var getColor = function (percent) {
if (percent <= 0) {
return axisColorList[0][1];
}
for (var i = 0; i < axisColorList.length; i++) {
if (axisColorList[i][0] >= percent &&
(i === 0 ? 0 : axisColorList[i - 1][0]) < percent
) {
return axisColorList[i][1];
}
}
return axisColorList[i - 1][1];
};
this._createTicks({getColor});
this._createPointer({getColor});
}
_createTicks({getColor}) {
var shape = this._option.shape;
var x = shape.x;
var y = shape.y;
var minTick = shape.tickStart;
var maxTick = shape.tickEnd;
var minVal = parseFloat(shape.min);
var maxVal = parseFloat(shape.max);
var splitNumber = shape.splitNumber;
var angle = shape.angle;
var axisLabel = this._option.style.axisLabel;
var axisLabelShow = axisLabel.show;
var axisLabelDistance = axisLabel.distance;
var axisLabelStyle = axisLabel.textStyle;
var axisTick = this._option.style.axisTick;
var axisTickShow = axisTick.show;
var axisTickLen = axisTick.length;
var axisTickDistance = axisTick.distance;
var axisTickLineStyle = axisTick.lineStyle;
var subSplitNumber = axisTick.splitNumber;
var splitLine = this._option.style.splitLine;
var splitLineShow = splitLine.show;
var splitLineLen = splitLine.length;
var splitLineDistance = splitLine.distance;
var splitLineStyle = splitLine.lineStyle;
var step = (maxTick - minTick) / splitNumber;
var subStep = step / subSplitNumber;
for (var i = 0; i <= splitNumber; i++) {
const unitX = Math.cos(angle);
const unitY = Math.sin(angle);
if (splitLineShow) {
const line = new graphic.Line({
zlevel: this._option.zlevel,
z: this._option.z,
z2: this._option.z2,
cursor: this._option.cursor,
silent: this._option.silent,
...this._transformation(),
shape: {
x1: x + unitX * step * i + unitY * (splitLineLen + splitLineDistance),
y1: y + unitY * step * i - unitX * (splitLineLen + splitLineDistance),
x2: x + unitX * step * i - unitY * (splitLineLen - splitLineDistance),
y2: y + unitY * step * i + unitX * (splitLineLen - splitLineDistance)
},
style: splitLineStyle
});
if (splitLineStyle.stroke === 'auto') {
line.setStyle({ stroke: getColor(i / splitNumber) });
}
this.add(line);
}
if (axisLabelShow) {
const label = new graphic.Text({
zlevel: this._option.zlevel,
z: this._option.z,
z2: this._option.z2,
cursor: this._option.cursor,
silent: this._option.silent,
...this._transformation(),
style: {
textVerticalAlign: unitX < -0.4 ? 'bottom' : (unitX > 0.4 ? 'top' : 'middle'),
textAlign: unitY < -0.4 ? 'left' : (unitY > 0.4 ? 'right' : 'center'),
...axisLabelStyle,
text: formatLabel(
round(i / splitNumber * (maxVal - minVal) + minVal),
axisLabel.formatter || null
),
x: x + unitX * step * i + unitY * (splitLineLen + axisLabelDistance),
y: y + unitY * step * i - unitX * (splitLineLen + axisLabelDistance)
}
});
if (axisLabelStyle.textFill === 'auto') {
label.setStyle({ textFill: getColor(i / splitNumber) });
}
this.add(label);
}
if (axisTickShow && i !== splitNumber) {
for (var j = 1; j < subSplitNumber; j++) {
const unitX = Math.cos(angle);
const unitY = Math.sin(angle);
const tickLine = new graphic.Line({
zlevel: this._option.zlevel,
z: this._option.z,
z2: this._option.z2,
cursor: this._option.cursor,
silent: this._option.silent,
...this._transformation(),
shape: {
x1: x + unitX * (step * i + subStep * j) + unitY * (axisTickLen + axisTickDistance),
y1: y + unitY * (step * i + subStep * j) - unitX * (axisTickLen + axisTickDistance),
x2: x + unitX * (step * i + subStep * j) - unitY * (axisTickLen - axisTickDistance),
y2: y + unitY * (step * i + subStep * j) + unitX * (axisTickLen - axisTickDistance)
},
style: axisTickLineStyle
});
if (axisTickLineStyle.stroke === 'auto') {
tickLine.setStyle({ stroke: getColor((i + j / subSplitNumber) / splitNumber) });
}
this.add(tickLine);
}
}
}
}
_createPointer({getColor}) {
var shape = this._option.shape;
var x = shape.x;
var y = shape.y;
var minVal = parseFloat(shape.min);
var maxVal = parseFloat(shape.max);
var value = parseFloat(shape.value) || 0;
var minTick = shape.tickStart;
var maxTick = shape.tickEnd;
var angle = shape.angle;
var pointerStyle = this._option.style.pointer;
var pointerShow = pointerStyle.show;
var pointerLineWidth = pointerStyle.lineWidth;
var pointerLineCap = pointerStyle.lineCap;
if (pointerShow) {
var valueExtent = [minVal, maxVal];
var angleExtent = [minTick, maxTick];
var unitX = Math.cos(angle);
var unitY = Math.sin(angle);
var valueLen = linearMap(value, valueExtent, angleExtent, true);
var specialStyleList = ['round', 'square'];
var pointer = new graphic.Line({
zlevel: this._option.zlevel,
z: this._option.z,
z2: this._option.z2,
cursor: this._option.cursor,
silent: this._option.silent,
...this._transformation(),
shape: {
x1: x,
y1: y,
x2: x + unitX * (valueLen - (specialStyleList.includes(pointerLineCap)? pointerLineWidth/2:0)),
y2: y + unitY * (valueLen - (specialStyleList.includes(pointerLineCap)? pointerLineWidth/2:0))
},
style: pointerStyle
});
if (pointerStyle.stroke === 'auto') {
pointer.setStyle('stroke', color.lift(getColor(linearMap(value, valueExtent, [0, 1], true)), 0.3));
}
this.add(pointer);
}
}
_traverse(target, attr) {
for (var key in attr) {
if (!(attr[key] instanceof Object) || !attr[key]) {
target[key] = attr[key];
} else {
this._traverse(target[key], attr[key]);
}
}
}
_transformation() {
var parent = this.parent||{};
var origin = parent._origin||null;
var rotation = parent._rotation||null;
var scale = parent._scale||[1, 1];
return { origin, rotation, scale };
}
dragging(e) {
this.traverse(el => {
if (el instanceof graphic.Text) {
el.setStyle({
x: el.style.x + e.dx,
y: el.style.y + e.dy
});
} else if (el instanceof graphic.Line) {
el.setShape({
x1: el.shape.x1 + e.dx,
y1: el.shape.y1 + e.dy,
x2: el.shape.x2 + e.dx,
y2: el.shape.y2 + e.dy
});
}
}, this);
}
setShape(objs) {
this._traverse(this._option.shape, objs);
this.render();
}
setStyle(objs) {
this._traverse(this._option.style, objs);
this.render();
}
}
function formatLabel(label, labelFormatter) {
if (labelFormatter) {
if (typeof labelFormatter === 'string') {
label = labelFormatter.replace('{value}', label != null ? label : '');
} else if (typeof labelFormatter === 'function') {
label = labelFormatter(label);
}
}
return label;
}
function round(x, precision, returnStr) {
if (precision == null) {
precision = 10;
}
precision = Math.min(Math.max(0, precision), 20);
x = (+x).toFixed(precision);
return returnStr ? x : +x;
}
function linearMap(val, domain, range, clamp) {
var subDomain = domain[1] - domain[0];
var subRange = range[1] - range[0];
if (subDomain === 0) {
return subRange === 0
? range[0]
: (range[0] + range[1]) / 2;
}
if (clamp) {
if (subDomain > 0) {
if (val <= domain[0]) {
return range[0];
} else if (val >= domain[1]) {
return range[1];
}
} else {
if (val >= domain[0]) {
return range[0];
} else if (val <= domain[1]) {
return range[1];
}
}
} else {
if (val === domain[0]) {
return range[0];
}
if (val === domain[1]) {
return range[1];
}
}
return (val - domain[0]) / subDomain * subRange + range[0];
}

45
src/iscs_new/graph/shape/Pointer.js
View File

@ -1,45 +0,0 @@
import Path from 'zrender/src/graphic/Path';
export default Path.extend({
type: 'Pointer',
shape: {
angle: 0,
width: 10,
r: 10,
x: 0,
y: 0
},
buildPath: function (ctx, shape) {
var mathCos = Math.cos;
var mathSin = Math.sin;
var r = shape.r;
var width = shape.width;
var angle = shape.angle;
var x = shape.x - mathCos(angle) * width * (width >= r / 3 ? 1 : 2);
var y = shape.y - mathSin(angle) * width * (width >= r / 3 ? 1 : 2);
angle = shape.angle - Math.PI / 2;
ctx.moveTo(x, y);
ctx.lineTo(
shape.x + mathCos(angle) * width,
shape.y + mathSin(angle) * width
);
ctx.lineTo(
shape.x + mathCos(shape.angle) * r,
shape.y + mathSin(shape.angle) * r
);
ctx.lineTo(
shape.x - mathCos(angle) * width,
shape.y - mathSin(angle) * width
);
ctx.lineTo(x, y);
}
});

66
src/iscs_new/graph/shape/Sausage.js
View File

@ -1,66 +0,0 @@
import Path from 'zrender/src/graphic/Path';
/**
* Sausage: similar to sector, but have half circle on both sides
* @public
*/
export default Path.extend({
type: 'sausage',
shape: {
cx: 0,
cy: 0,
r0: 0,
r: 0,
startAngle: 0,
endAngle: Math.PI * 2,
clockwise: true
},
buildPath: function (ctx, shape) {
var x = shape.cx;
var y = shape.cy;
var r0 = Math.max(shape.r0 || 0, 0);
var r = Math.max(shape.r, 0);
var dr = (r - r0) * 0.5;
var rCenter = r0 + dr;
var startAngle = shape.startAngle;
var endAngle = shape.endAngle;
var clockwise = shape.clockwise;
var unitStartX = Math.cos(startAngle);
var unitStartY = Math.sin(startAngle);
var unitEndX = Math.cos(endAngle);
var unitEndY = Math.sin(endAngle);
var lessThanCircle = clockwise
? endAngle - startAngle < Math.PI * 2
: startAngle - endAngle < Math.PI * 2;
if (lessThanCircle) {
ctx.moveTo(unitStartX * r0 + x, unitStartY * r0 + y);
ctx.arc(
unitStartX * rCenter + x, unitStartY * rCenter + y, dr,
-Math.PI + startAngle, startAngle, !clockwise
);
}
ctx.arc(x, y, r, startAngle, endAngle, !clockwise);
ctx.moveTo(unitEndX * r + x, unitEndY * r + y);
ctx.arc(
unitEndX * rCenter + x, unitEndY * rCenter + y, dr,
endAngle - Math.PI * 2, endAngle - Math.PI, !clockwise
);
if (r0 !== 0) {
ctx.arc(x, y, r0, endAngle, startAngle, clockwise);
ctx.moveTo(unitStartX * r0 + x, unitEndY * r0 + y);
}
ctx.closePath();
}
});

275
src/iscs_new/graph/shape/Table/cell.js
View File

@ -1,275 +0,0 @@
import * as graphic from '../../../graph/graphic';
import Button from '@/assets/map/button.png';
const cellStyle = {
text: {
fontSize: 14,
fontWeight: 'normal',
fontFamily: '微软雅黑,Arial',
textFill: '#000',
textAlign: 'center',
textVerticalAlign: 'middle',
textPadding: null,
rich: {
sup: {
textVerticalAlign: 'top',
fontSize: 8
},
sub: {
textVerticalAlign: 'bottom',
fontSize: 8
}
}
},
order: {
r: 10,
lineWidth: 1,
stroke: '#F0F0f0',
fill: '#EFA5FF',
fontSize: 24,
fontWeight: 'bold',
fontFamily: '微软雅黑,Arial',
textFill: '#000',
textAlign: 'center',
textVerticalAlign: 'middle',
textPadding: null,
rich: {
sup: {
textVerticalAlign: 'top',
fontSize: 12
},
sub: {
textVerticalAlign: 'bottom',
fontSize: 12
}
}
},
button: {
url: Button,
width: 60,
height: 25,
fill: '#ffffff',
fontSize: 24,
fontWeight: 'bold',
fontFamily: '微软雅黑,Arial',
textFill: '#000',
textAlign: 'center',
textVerticalAlign: 'middle',
textPadding: null,
rich: {
sup: {
textVerticalAlign: 'top',
fontSize: 12
},
sub: {
textVerticalAlign: 'bottom',
fontSize: 12
}
}
}
};
export default class Cell extends graphic.Group {
constructor(option) {
super();
this._elMap = {
text: null,
order: null,
circle: null,
button: null
};
this._option = {
zlevel: option.zlevel,
z: option.z,
z2: option.z2,
cursor: option.cursor,
silent: option.silent,
shape: {
x: 0,
y: 0,
...option.shape
},
style: {
...option.style
}
};
this.render();
}
render() {
var shape = this._option.shape;
var style = this._option.style;
var x = shape.x;
var y = shape.y;
var w = shape.width;
var h = shape.height;
switch (style.type) {
case 'order': this._createOrder(shape); break;
case 'text': this._createTextModel(shape); break;
case 'button': this._createButton({
x: x - w / 2,
y: y - h / 2,
w,
h
}); break;
}
}
_createTextModel(shape) {
const zlevel = this._option.zlevel;
const z = this._option.z;
const z2 = this._option.z2;
const style = this._option.style;
const cursor = this._option.cursor;
const silent = this._option.silent;
this._elMap.text = new graphic.Text({
zlevel: zlevel,
z: z,
z2: z2+1,
cursor,
silent,
style: {
x: shape.x,
y: shape.y,
fontSize: style.fontSize || cellStyle.text.fontSize,
fontWeight: style.fontWeight || cellStyle.text.fontWeight,
fontFamily: style.fontFamily || cellStyle.text.fontFamily,
textFill: style.textFill || cellStyle.text.textFill,
textAlign: style.textAlign || cellStyle.text.textAlign,
textVerticalAlign: style.textVerticalAlign || cellStyle.text.textVerticalAlign,
textPadding: style.textPadding|| cellStyle.text.textPadding,
text: style.text || '',
rich: style.rich || cellStyle.text.rich
}
});
this.add(this._elMap.text);
}
_createOrder(shape) {
const zlevel = this._option.zlevel;
const z = this._option.z;
const z2 = this._option.z2;
const style = this._option.style;
const cursor = this._option.cursor;
const silent = this._option.silent;
this._elMap.order = new graphic.Circle({
zlevel: zlevel,
z: z,
z2: z2+1,
cursor,
silent,
shape: {
cx: shape.x,
cy: shape.y,
r: shape.r || cellStyle.order.r
},
style: {
lineWidth: style.lineWidth || cellStyle.order.lineWidth,
stroke: style.stroke || cellStyle.order.stroke,
fill: style.fill || cellStyle.order.fill
}
});
this._elMap.text = new graphic.Text({
zlevel: zlevel,
z: z,
z2: z2+1,
style: {
x: shape.x,
y: shape.y,
fontSize: style.fontSize || cellStyle.order.fontSize,
fontWeight: style.fontWeight || cellStyle.order.fontWeight,
fontFamily: style.fontFamily || cellStyle.order.fontFamily,
textFill: style.textFill || cellStyle.order.textFill,
textAlign: style.textAlign || cellStyle.order.textAlign,
textVerticalAlign: style.textVerticalAlign || cellStyle.order.textVerticalAlign,
textWidth: style.width || cellStyle.order.width,
textPadding: style.textPadding || cellStyle.order.textPadding,
textBorderWidth: style.textBorderWidth || cellStyle.order.textBorderWidth,
textBorderColor: style.textBorderColor || cellStyle.order.textBorderColor,
textBackgroundColor: cellStyle.order.textBackgroundColor,
rich: style.rich || cellStyle.order.rich,
text: style.text || ''
}
});
this.add(this._elMap.order);
this.add(this._elMap.text);
}
_createButton(shape) {
const zlevel = this._option.zlevel;
const z = this._option.z;
const z2 = this._option.z2;
const style = this._option.style;
const width = style.width || cellStyle.button.width;
const height = style.height ||cellStyle.button.height;
const image = style.url || cellStyle.button.url;
this._elMap.button = new graphic.Image({
zlevel: zlevel,
z: z,
z2: z2+1,
style: {
x: shape.x + (shape.w - width)/2,
y: shape.y + (shape.h - height)/2,
width: width,
height: height,
image: image
}
});
this._elMap.text = new graphic.Text({
zlevel: zlevel,
z: z,
z2: z2+1,
position: [shape.w/2, shape.h/2],
style: {
x: shape.x,
y: shape.y,
fontSize: style.fontSize || cellStyle.button.fontSize,
fontWeight: style.fontWeight || cellStyle.button.fontWeight,
fontFamily: style.fontFamily || cellStyle.button.fontFamily,
textFill: style.textFill || cellStyle.button.textFill,
textAlign: style.textAlign || cellStyle.button.textAlign,
textVerticalAlign: style.textVerticalAlign || cellStyle.button.textVerticalAlign,
textWidth: style.textWidth || cellStyle.button.width,
textPadding: style.textPadding || cellStyle.button.textPadding,
textBorderWidth: style.textBorderWidth || cellStyle.button.textBorderWidth,
textBorderColor: style.textBorderColor || cellStyle.button.textBorderColor,
textBackgroundColor: style.textBackgroundColor || cellStyle.button.textBackgroundColor,
rich: style.rich || cellStyle.button.rich,
text: style.text || ''
}
});
this.add(this._elMap.button);
this.add(this._elMap.text);
}
dragging(e) {
this.traverse(el => {
if (el instanceof graphic.Text) {
el.setStyle({
x: el.style.x + e.dx,
y: el.style.y + e.dy
});
} else if (el instanceof graphic.Image) {
el.setStyle({
x: el.style.x + e.dx,
y: el.style.y + e.dy
});
} else if (el instanceof graphic.Circle) {
el.setShape({
cx: el.shape.cx + e.dx,
cy: el.shape.cy + e.dy
});
}
}, this);
}
}

200
src/iscs_new/graph/shape/Table/table.js
View File

@ -1,200 +0,0 @@
import * as graphic from '../../graphic';
import Cell from './cell';
export default class Table extends graphic.Group {
constructor(option) {
super();
this.invTransform = [1, 0, 0, 1, 0, 0];
this._elMap = {
rowLines: [],
colLines: [],
cellArrs: [],
bg: null
};
this._option = {
zlevel: option.zlevel || 0,
z: option.z || 0,
z2: option.z || 0,
cursor: option.cursor||null,
silent: option.silent||false,
shape: {
dataSource: option.shape.dataSource || [],
wList: option.shape.wList || [],
hList: option.shape.hList || [],
point: option.shape.point || {x: 0, y: 0}
},
style: {
backgroundColor: option.style.backgroundColor,
lineWidth: option.style.lineWidth || 1,
stroke: option.style.stroke || '#000000'
}
};
this.render();
}
render() {
this.removeAll();
this._createLineModels();
this._createCells();
}
_createLineModels() {
const zlevel = this._option.zlevel;
const z = this._option.z;
const z2 = this._option.z2;
const cursor = this._option.cursor;
const shape = this._option.shape;
const style = this._option.style;
const x = shape.point.x;
const y = shape.point.y;
const rowLen = shape.hList.length;
const colLen = shape.wList.length;
const sumW = colLen==0? 0: shape.wList.reduce((pre, item) => { return pre + item; });
const sumH = rowLen==0? 0: shape.hList.reduce((pre, item) => { return pre + item; });
for (let i = 1; i < rowLen; i++) {
const line = new graphic.Line({
zlevel: zlevel,
z: z,
z2: z2,
cursor,
shape: {
x1: x,
y1: y + shape.hList.reduce((pre, item, idx) => { return pre + (idx < i ? item || style.rowHeight: 0); }),
x2: x + sumW,
y2: y + shape.hList.reduce((pre, item, idx) => { return pre + (idx <i ? item || style.rowHeight: 0); })
},
style: {
lineWidth: style.lineWidth,
stroke: style.stroke
}
});
this._elMap.rowLines.push(line);
this.add(line);
}
for (let i = 1; i < colLen; i++) {
const line = new graphic.Line({
zlevel: zlevel,
z: z,
z2: z2,
cursor,
shape: {
x1: x + shape.wList.reduce((pre, item, idx) => { return pre + (idx < i ? item || style.columnWidth: 0); }),
y1: y,
x2: x + shape.wList.reduce((pre, item, idx) => { return pre + (idx < i ? item || style.columnWidth: 0); }),
y2: y + sumH
},
style: {
lineWidth: style.lineWidth,
stroke: style.stroke
}
});
this._elMap.colLines.push(line);
this.add(line);
}
this._elMap.bg = new graphic.Rect({
zlevel: zlevel,
z: z,
z2: z2-1,
cursor,
shape: {
x: x,
y: y,
width: sumW,
height: sumH
},
style: {
lineWidth: style.lineWidth,
stroke: style.stroke,
fill: style.backgroundColor
}
});
this.add(this._elMap.bg);
}
_createCells() {
const zlevel = this._option.zlevel;
const z = this._option.z;
const z2 = this._option.z2;
const cursor = this._option.cursor;
const silent = this._option.silent;
const shape = this._option.shape;
const style = this._option.style;
const x = shape.point.x;
const y = shape.point.y;
this._elMap.cellArrs = [];
shape.dataSource.forEach((rowList, i) => {
const list = [];
if (rowList instanceof Array) {
rowList.forEach((elem, j) => {
const cell = new Cell({
zlevel: zlevel,
z: z,
z2: z2+1,
cursor: cursor,
silent: silent,
shape: Object.assign({
x: x + shape.wList.reduce((pre, item, idx) => { return pre + (idx <= j ? item || style.columnWidth: 0); }) - (shape.wList[j] || style.columnWidth) /2,
y: y + shape.hList.reduce((pre, item, idx) => { return pre + (idx <= i ? item || style.rowHeight: 0); }) - (shape.hList[i] || style.rowHeight) /2,
width: shape.wList[j] || style.cell.width,
height: shape.hList[i] || style.cell.Height
}),
style: elem || {}
});
list.push(cell);
this.add(cell);
});
}
this._elMap.cellArrs.push(list);
});
}
_traverse(target, attr) {
for (var key in attr) {
if (!(attr[key] instanceof Object) || !attr[key]) {
target[key] = attr[key];
} else {
this._traverse(target[key], attr[key]);
}
}
}
setShape(objs) {
this._traverse(this._option.shape, objs);
this.render();
}
setStyle(objs) {
this._traverse(this._option.style, objs);
this.render();
}
dragging(e) {
[...this._elMap.rowLines, ...this._elMap.colLines].forEach(elem => {
elem.setShape({
x1: elem.shape.x1 + e.dx,
y1: elem.shape.y1 + e.dy,
x2: elem.shape.x2 + e.dx,
y2: elem.shape.y2 + e.dy
});
});
this._elMap.cellArrs.forEach(list => {
list.forEach(elem => {
elem.dragging(e);
});
});
this._elMap.bg.setShape({
x: this._elMap.bg.shape.x + e.dx,
y: this._elMap.bg.shape.y + e.dy
});
}
}

201
src/iscs_new/map.js
View File

@ -1,12 +1,11 @@
import _ from 'lodash';
// import * as zrUtil from 'zrender/src/core/util';
import * as utils from './utils/utils';
import EventEmitter from '../utils/eventEmitter';
import EventEmitter from './utils/eventEmitter';
import zrender from 'zrender';
import Painter from './painter';
import Options from './options';
import Option from './option';
import Controller from './controller'; // 事件集合
import Style from './config/style'; // 样式集合
import DefaultStyle from './config/defaultStyle'; // 样式集合
import ShapeFactory from './parser';
const renderer = 'canvas';
@ -40,7 +39,7 @@ class JMap {
StateLoaded: 'stateLoaded',
ViewUpdate: 'viewUpdate',
StateUpdate: 'stateUpdate',
OptionsUpdate: 'optionsUpdate'
OptionUpdate: 'optionUpdate'
};
// 默认状态
@ -49,12 +48,7 @@ class JMap {
// 默认皮肤
this.defaultStyle = this.loadDefaultStyle();
// 是否绘制
this.draw = false;
// 是否可拖拽
this.draggle = false;
// 初始化Map实例
this.initMapInstance(opts);
}
@ -62,17 +56,17 @@ class JMap {
initMapInstance(opts) {
const width = opts.dom.clientWidth;
const height = opts.dom.clientHeight;
const optionsHandler = this.setOptions.bind(this);
const optionHandler = this.setOption.bind(this);
this.$zr = zrender.init(opts.dom, { renderer, devicePixelRatio, width, height, ...utils.deepClone(opts.config||{})});
this.$zr.dom.setAttribute('tabIndex', -1);
this.$zr.dom.style.cursor = 'auto';
this.$options = new Options({ scaleRate: 1, offsetX: 0, offsetY: 0, ...utils.deepClone(opts.options||{})}, (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(this.events.DataZoom, dataZoom); }); // 缩放
this.$painter = new Painter(this);
this.$painter.updateZrSize({width: this.$zr.getWidth(), height: this.$zr.getHeight()});
this.$painter.updateTransform(this.$options);
this.$painter.updateTransform(this.$option);
this.$eventEmitter = new EventEmitter(this);
@ -81,90 +75,80 @@ class JMap {
this.$controller = new Controller(this);
this.$controller.enable();
this.$controller.on(this.events.__Pan, optionsHandler);
this.$controller.on(this.events.__Zoom, optionsHandler);
this.$controller.on(this.events.__Pan, optionHandler);
this.$controller.on(this.events.__Zoom, optionHandler);
this.disable = function() {
this.off(this.events.Pan, optionsHandler);
this.off(this.events.Zoom, optionsHandler);
this.off(this.events.Pan, optionHandler);
this.off(this.events.Zoom, optionHandler);
};
}
loadTemplates(list) {
}
loadDefaultState(state) {
return {};
}
loadDefaultStyle(style) {
return Style;
return DefaultStyle;
}
setTemplates() {
// 模板配置
this.templateMap = {};
return
}
setMap(templates, data, eventOpts) {
setMap(templates=[], source={}, eventOpts={}) {
// 绑定事件
this.$controller.enable({...eventOpts, reflect: eventOpts.draw});
this.$controller.enable(eventOpts);
// 更新视图位置
this.$painter.updateTransform(this.$options);
this.$painter.updateTransform(this.$option);
// 解析模板
this.$shapeFactory.parserTemplates(templates)
// 数据加载完成 回调
this.$eventEmitter(this.events.DataLoaded, this.mapShape);
this.$eventEmitter.emit(this.events.DataLoaded);
// 初次渲染视图
this.repaint(data);
this.repaint(source);
// 设置默认状态
this.setDefaultState();
// 视图加载完成 回调
this.$eventEmitter(this.events.ViewLoaded, this.mapShape);
this.$eventEmitter.emit(this.events.ViewLoaded);
// 返回视图缩放偏移
this.$options.trigger(this.$options);
this.$option.trigger(this.$option);
}
setDefaultState() {
this.$eventEmitter(this.events.StateLoaded, this.mapShape);
this.$eventEmitter.emit(this.events.StateLoaded);
}
setOptions(opts) {
const options = this.pullBack(opts);
setOption(opts={}) {
const option = this.pullBack(opts);
this.$options.update(options);
this.$painter.updateTransform(this.$options);
this.$option.update(option);
this.$painter.updateTransform(this.$option);
this.$controller.disable();
this.$controller.enable();
this.$eventEmitter(this.events.OptionsUpdate, this.mapShape);
this.$eventEmitter.emit(this.events.OptionUpdate);
}
setDragging(e) {
if (e.dragTarget) {
const scaleRate = this.$options.getScaleRate();
const scaleRate = this.$option.getScaleRate();
e.dx /= scaleRate;
e.dy /= scaleRate;
e.dragTarget.instance.dragging(e);
e.dragTarget.dragging(e);
}
}
setCenter(shapeCode) {
const shape = this.state.mapShape[shapeCode];
if (shape && shape.instance) {
var rect = utils.createBoundingRect(shape.instance);
setCenter(code) {
const shape = this.$shapeFactory.getShapeByCode(code);
if (shape && shape) {
var rect = utils.createBoundingRect(shape);
var center = utils.calculateDCenter(rect, { width: this.$zr.getWidth(), height: this.$zr.getHeight() });
this.setOptions(center);
this.setOption(center);
}
}
@ -172,58 +156,57 @@ class JMap {
this.$zr.setBackgroundColor(color);
}
setCursorStyle(cursorStyle) {
setCursorStyle(cursorStyle='auto') {
// this.$zr.dom.style.cursor = cursorStyle;
this.$zr.setCursorStyle(cursorStyle);
}
buildShape(elem, shape) {
return Object.assign(shape, {model: Object.assign(shape.model, elem), style: this.defaultStyle, draw: this.draw});
}
// 初次渲染
repaint(data) {
repaint(source={}) {
this.$shapeFactory.clear();
this.$painter.clear();
this.parserData(data, this.defaultStyle, shape => {
this.$shapeFactory.parser(source, this.defaultStyle, shape => {
if (shape) {
this.$painter.add(shape.instance)
this.$painter.add(shape);
}
});
}
render(list=[]) {
list.forEach(el => {
const model = this.$painter.remove(oShape);
if (elem._dispose) {
this.$painter.remove(nShape);
} else {
const nShape = this.buildShape(elem, oShape);
mapShape[code] = nShape;
this.$painter.add(nShape);
const dispose = el._dispose;
const oldShape = this.$shapeFactory.getShapeByCode(el.code);
const block = this.$shapeFactory.updateSource(el);
if (dispose) {
this.$painter.remove(oldShape);
this.$shapeFactory.removeShape(oldShape);
} else if (block) {
const createShape = this.$shapeFactory.createShape(block.model, block.option);
this.$painter.remove(oldShape);
this.$shapeFactory.storageShape(createShape)
this.$painter.add(createShape);
}
});
this.$eventEmitter(this.events.ViewUpdate, list);
this.$eventEmitter.emit(this.events.ViewUpdate, list);
}
update(list) {
(list||[]).forEach(elem => {
this.$painter.update(elem); // 更新设备状态
});
this.$eventEmitter(this.events.StateUpdate, list);
update(list=[]) {
list.forEach(el => { this.$painter.update(el); });
this.$eventEmitter.emit(this.events.StateUpdate, list);
}
pullBack(payload) {
pullBack(payload={}) {
if (payload.type == this.events.__Zoom) {
const zrWidth = this.$zr.getWidth();
const zrHeight = this.$zr.getHeight();
const originX = payload.originX || zrWidth / 2;
const originY = payload.originY || zrHeight / 2;
const x = (this.$options.offsetX + originX) / this.$options.scaleRate;
const y = (this.$options.offsetY + originY) / this.$options.scaleRate;
const newScaleRate = this.$options.getScaleRate(payload.scale);
const dx = originX - (x * newScaleRate - this.$options.offsetX);
const dy = originY - (y * newScaleRate - this.$options.offsetY);
const x = (this.$option.offsetX + originX) / this.$option.scaleRate;
const y = (this.$option.offsetY + originY) / this.$option.scaleRate;
const newScaleRate = this.$option.getScaleRate(payload.scale);
const dx = originX - (x * newScaleRate - this.$option.offsetX);
const dy = originY - (y * newScaleRate - this.$option.offsetY);
payload.dx = dx;
payload.dy = dy;
}
@ -231,27 +214,12 @@ class JMap {
return payload||{};
}
isDraw() {
return this.draw;
}
isHover(code) {
return this.$controller
? this.$controller.storage.has(code)
: false;
}
// 设置图层显示
setLayerVisible(parserType, typeList) {
this.$painter.setLayerVisible(parserType, typeList);
}
getZr() {
return this.$zr;
}
getOptions() {
return this.$options;
getOption() {
return this.$option;
}
getPainter() {
@ -266,14 +234,6 @@ class JMap {
return this.events;
}
getState() {
return this.state;
}
getMapShape() {
return this.state.mapShape;
}
getDefaultState() {
return this.defaultState;
}
@ -283,7 +243,15 @@ class JMap {
}
getShapeByCode(code) {
return this.state.mapShape[code];
return this.$shapeFactory.getShapeByCode(code);
}
getMapShape() {
return this.$shapeFactory.getMapShape();
}
getMapTemplate() {
return this.$shapeFactory.getMapTemplate();
}
resize(opt) {
@ -296,6 +264,7 @@ class JMap {
}
clear() {
this.$shapeFactory.clear();
this.$controller.clear();
this.$painter.clear();
this.$zr.refresh()
@ -317,19 +286,19 @@ class JMap {
if (idx >= 0) {
switch (name) {
case this.events.DataLoaded:
this.$eventEmitter.on(this.events.DataLoaded, cb, context);
this.$eventEmitter.emit.on(this.events.DataLoaded, cb, context);
break;
case this.events.StateLoaded:
this.$eventEmitter.on(this.events.StateLoaded, cb, context);
this.$eventEmitter.emit.on(this.events.StateLoaded, cb, context);
break;
case this.events.ViewUpdate:
this.$eventEmitter.on(this.events.ViewUpdate, cb, context);
this.$eventEmitter.emit.on(this.events.ViewUpdate, cb, context);
break;
case this.events.StateUpdate:
this.$eventEmitter.on(this.events.StateUpdate, cb, context);
this.$eventEmitter.emit.on(this.events.StateUpdate, cb, context);
break;
case this.events.OptionsUpdate:
this.$eventEmitter.on(this.events.OptionsUpdate, cb, context);
case this.events.OptionUpdate:
this.$eventEmitter.emit.on(this.events.OptionUpdate, cb, context);
break;
case this.events.Reflect:
this.$controller.on(this.events.Reflect, _.throttle(cb, 200), context);
@ -361,19 +330,19 @@ class JMap {
if (idx >= 0) {
switch (name) {
case this.events.DataLoaded:
this.$eventEmitter.off(this.events.DataLoaded, cb, context);
this.$eventEmitter.emit.off(this.events.DataLoaded, cb, context);
break;
case this.events.StateLoaded:
this.$eventEmitter.off(this.events.StateLoaded, cb, context);
this.$eventEmitter.emit.off(this.events.StateLoaded, cb, context);
break;
case this.events.ViewUpdate:
this.$eventEmitter.off(this.events.ViewUpdate, cb, context);
this.$eventEmitter.emit.off(this.events.ViewUpdate, cb, context);
break;
case this.events.StateUpdate:
this.$eventEmitter.off(this.events.StateUpdate, cb, context);
this.$eventEmitter.emit.off(this.events.StateUpdate, cb, context);
break;
case this.events.OptionsUpdate:
this.$eventEmitter.off(this.events.OptionsUpdate, cb, context);
case this.events.OptionUpdate:
this.$eventEmitter.emit.off(this.events.OptionUpdate, cb, context);
break;
case this.events.Reflect:
this.$controller.off(this.events.Reflect, _.throttle(cb, 200));

16
src/iscs_new/options.js → src/iscs_new/option.js
View File

@ -31,10 +31,6 @@ class Options {
this.disabled = false;
this.panEnable = true;
this.zoomEnable = false;
this.preventDefaultMouseMove = true;
this.trigger = trigger;
@ -73,18 +69,6 @@ class Options {
this.scaleRate = payload.scaleRate;
}
if (payload.disabled === true || payload.disabled === false) {
this.disabled = payload.disabled;
}
if (payload.panEnable === true || payload.panEnable === false) {
this.panEnable = payload.panEnable;
}
if (payload.zoomEnable === true || payload.zoomEnable === false) {
this.zoomEnable = payload.zoomEnable;
}
if (this.trigger instanceof Function) { this.trigger(this); }
}

112
src/iscs_new/painter.js
View File

@ -1,21 +1,17 @@
import * as zrUtil from 'zrender/src/core/util';
import * as vector from 'zrender/src/core/vector';
import Graphic from './package';
import Group from 'zrender/src/container/Group';
import shapeType from './constant/shapeType';
import TransformHandle from './transformHandle';
import StateHandle from './stateHandle';
import TipsHandle from './tipsHandle';
import * as graphic from './utils/graphic';
class Painter extends Group {
constructor(map) {
this.$map = map;
this.$zr = map.getZr();
super({name: `__parent__`});
// 初始图层
this.initLevels();
this.initLevels(map);
// 视图控制器
this.$transformHandle = new TransformHandle(this);
@ -27,79 +23,57 @@ class Painter extends Group {
this.$tipsHandle = new TipsHandle(map);
}
initLevels() {
initLevels(map) {
// 初始化图层对象
this.mapInstanceLevel = {};
this.mapShapeLevel = {};
// 获取顶层图层
this.$zr = map.getZr();
// 添加父级图层
this.$zr.add(this);
// 添加子级图层
this.hoverLevel = new Group({ name: `___hover__` });
this.add(this.hoverLevel);
// 创建select图层
this.mapShapeLevel.selecting = new Group({ name: `___selecting__` });
// 添加提示子级图层
this.tipsLevel = new Group({name: `__tips__`});
this.add(this.tipsLevel);
// 创建hover图层
this.mapShapeLevel.hightLight = new Group({ name: `___hover__` });
// 添加element子级图层
this.elementLevel = new Group({name: `__element__`});
this.$zr.add(this.element);
}
// 创建tips图层
this.mapShapeLevel.tips = new Group({name: `__tips__`});
newShape(shape) {
const type = shape.model._type;
const state = this.$map.getState(); // 获取 默认状态
const builder = Graphic.getBuilder(type); // 根据 type 绘制 面板，资源，画面对应的 instance
return builder(this, shape, state);
}
// 创建元素图层
Object.keys(graphic).forEach(key => {
this.mapShapeLevel[key] = new Group({name: `__${key}__`});
})
doHover(view, visible=true) {
visible
? this.$map.isHover(view._code)
? view.doActive
? view.doActive(this.$zr)
: null
: view.doInactive
? view.doInactive(this.$zr)
: null
: view.doInactive
? view.doInactive()
: null;
// 添加图层
Object.values(this.mapShapeLevel).forEach(el => {
super.add(el);
})
}
add(shape) {
try {
this.remove(shape);
shape.instance = this.newShape(shape);
if (shape.instance) {
this.$transformHandle.transformView(shape.instance);
this.mapInstanceLevel[shape.model._type].add(shape.instance); // 添加type
this.doHover(shape.instance);
}
const shapeLevel = this.mapShapeLevel[shape.model.type];
shapeLevel.add(shape.instance);
} catch (err) {
console.error(err);
}
}
remove(shape) {
if (shape.hover) {
this.hoverLevel.remove(shape.hover);
shape.hover = null;
}
if (shape.instance) {
shape.instance.doInactive(this.$zr);
this.mapInstanceLevel[shape.model._type].remove(shape.instance);
try {
const shapeLevel = this.mapShapeLevel[shape.model.type];
shapeLevel.remove(shape.instance);
} catch (err) {
console.error(err);
}
}
update(shape) {
try {
if (shape) {
this.$stateHandle.update(shape);
}
this.$stateHandle.update(shape);
} catch (err) {
console.error(err);
}
@ -113,27 +87,33 @@ class Painter extends Group {
this.$transformHandle.updateZrSize(opt);
}
addHoverElem(view) {
this.$transformHandle.transformView(view);
this.hoverLevel.add(view);
addToLevel(name) {
return (view) => {
this.$transformHandle.transformView(view);
this.mapShapeLevel[name].add(view);
}
}
delHoverElem(view) {
this.hoverLevel.remove(view);
removeFromLevel(name) {
return (view) => {
this.mapShapeLevel[name].remove(view);
}
}
dispose() {
this.clear();
this.mapInstanceLevel = {};
this.mapShapeLevel = {};
this.$tipsHandle.dispose();
}
getHoverLevel() {
return this.hoverLevel;
getLevelByName(name) {
return this.mapShapeLevel[name];
}
getTipsLevel() {
return this.tipsLevel;
clear() {
Object.values(this.mapShapeLevel).forEach(el => {
el.removeAll();
})
}
}

10
src/iscs_new/parser/Shape.js
View File

@ -1,13 +1,17 @@
import { Rect } from "../graph/graphic";
import shapeType from '../constant/shapeType';
// 图形抽象层
export default class AbstractShape {
constructor(model) {
constructor({model, defaultStyle, option, shapeFactory}) {
this.model = model;
this.option = option;
this.defaultStyle = defaultStyle;
this.shapeFactory = shapeFactory;
}
// 拖动
draft({x, y}) {}
draft({dx, dy}) {
}
// 设置高亮
active() {}

32
src/iscs_new/parser/compose.js
View File

@ -1,9 +1,35 @@
import AbstractShape from './Shape';
import AbstractShape from './shape';
import Group from 'zrender/src/container/Group';
class Compose extends AbstractShape {
constructor({model}) {
super(model);
constructor(args) {
super(args);
}
// 拖动
draft({dx, dy}) {
this.model.elementCodes.forEach(code => {
const element = this.shapeFactory.getShapeByCode(code);
if (element) {
element.draft({dx, dy});
}
})
}
// 设置高亮
active() {}
// 取消高亮
inactive() {}
// 设置获取焦点
focus() {}
// 设置取消焦点
blur() {}
// 设置状态
setState(state) {}
}
export default Compose;

84
src/iscs_new/parser/element.js
View File

@ -1,9 +1,85 @@
import AbstractShape from './Shape';
import AbstractShape from './shape';
import * as graphic from '../utils/graphic';
class Element extends AbstractShape {
constructor(model) {
super(model);
constructor(args) {
super(args);
this.create();
}
create() {
const elementBuilder = graphic[this.model.type];
if (elementBuilder) {
this.instance = new elementBuilder({...this.model, ...this.option, shapeInstance: this});
}
}
// 拖动
draft({dx, dy}) {
if (this.model.shape.hasOwnProperty('x')) {
this.model.shape.x += dx;
}
if (this.model.shape.hasOwnProperty('y')) {
this.model.shape.y += dy;
}
if (this.model.shape.hasOwnProperty('cx')) {
this.model.shape.cx += dx;
}
if (this.model.shape.hasOwnProperty('cy')) {
this.model.shape.cy += dy;
}
if (this.model.shape.hasOwnProperty('x1')) {
this.model.shape.x1 += dx;
}
if (this.model.shape.hasOwnProperty('y1')) {
this.model.shape.y1 += dy;
}
if (this.model.shape.hasOwnProperty('x2')) {
this.model.shape.x2 += dx;
}
if (this.model.shape.hasOwnProperty('y2')) {
this.model.shape.y2 += dy;
}
if (this.model.shape.hasOwnProperty('points')) {
this.model.shape.points.map(point => {
return [point[0]+dx, point[1]+dy];
})
}
this.instance.attr({...this.model, ...this.option, shapeInstance: this})
}
// 设置高亮
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);
}
// 取消高亮
inactive() {
this.shapeFactory.$painter.removeFromLevel('hightLight')(this.hightLight);
}
// 设置获取焦点
focus() {}
// 设置取消焦点
blur() {}
// 设置状态
setState(state) {}
}
export default Element;

150
src/iscs_new/parser/index.js
View File

@ -1,102 +1,112 @@
import * as zrUtil from 'zrender/src/core/util';
import shapeType from '../constant/shapeType';
import shapeRender from './constant/shapeRender';
import shapeRender from '../constant/shapeRender';
import Compose from './compose';
import Element from './element';
const classMap = {
const None = e => null;
const shapeBuilderMap = {
[shapeType.Element]: Element,
[shapeType.Compose]: Compose
}
class ShapeFactory {
constructor(map) {
this.$map = map;
this.$painter = map.getPainter();
this.mapShape = {};
this.mapTemplate = {}
this.clear();
}
parserTemplates(list=[]) {
this.mapTemplate = {};
return this;
}
parser(data={}, defaultStyle={}, cb=e => none) {
this.mapShape = {};
parser(source={}, defaultStyle={}, walk=None) {
try {
zrUtil.each(data.elementList || [], el => {
cb(this.render(el, defaultStyle, shapeType.Element));
this.source = source;
zrUtil.each(source.elementList ||[], el => {
walk(this.storageShape(this.createShape(el, defaultStyle, {...shapeRender, _type: shapeType.Element})));
}, this);
zrUtil.each(data.composeList || [], el => {
this.bindCompose(this.render(el, defaultStyle, shapeType.Compose));
zrUtil.each(source.composeList ||[], el => {
this.storageShape(this.createShape(el, defaultStyle, {...shapeRender, _type: shapeType.Compose}));
}, this);
} catch (error) {
console.error('[ERROR] ', error);
}
}
render(model, defaultStyle, type) {
const shape = createShape(model, defaultStyle, {...shapeRender, type});
this.mapShape[model.code] = shape;
createShape(model={}, defaultStyle={}, option={}) {
let shape = null;
const shapeBuilder = shapeBuilderMap[option._type];
if (shapeBuilder) {
shape = new shapeBuilder({model, defaultStyle, option, shapeFactory: this});
}
return shape;
}
bindCompose(compose) {
const elementCodes = compose.model.elementCodes || [];
compose.elementInstanceMap = elementCodes.map(code => {
const element = this.mapShape[code];
element.composeInstance = shape;
return element;
});
return compose;
}
unBindCompose(compose) {
}
bindElement(element) {
const composeCode = element.model.composeCode;
const compose = this.mapShape[composeCode];
compose.elementInstanceMap[element.model.code] = element;
element.composeInstance = compose.model.code;
return element;
}
unBindElement(element) {
}
createShape(model, defaultStyle) {
const shapeClass = classMap[model.shapeType];
return shapeClass({model, defaultStyle, opts});
}
// 更新绘图原始组列表数据
update2List(model, map, name) {
const list = map[name];
if (list && list instanceof Array) {
const i = list.findIndex(elem => { return elem.code == model.code; });
if (model._dispose) {
i >= 0 && list.splice(i, 1);
} else if (!list[i]) {
list.push(model);
} else {
Object.assign(list[i], model);
}
} else {
map[name] = [model];
}
}
// 更新绘图的数据
updateData(state, model) {
const map = state.map;
if (map && model) {
switch (model._type) {
case shapeType.Compose: update2List(model, map, 'composeList'); break;
case shapeType.Element: update2List(model, map, 'elementList'); break;
}
storageShape(shape) {
if (shape && shape.model) {
this.mapShape[shape.model.code] = shape;
}
return shape;
}
removeShape(shape) {
if (shape && shape.model) {
delete this.mapShape[shape.model.code];
}
return shape;
}
updateSource(model={}) {
switch (model._type) {
case shapeType.Compose: return { model: update2List(model, 'composeList'), option: {...shapeRender, _type: shapeType.Compose}};
case shapeType.Element: return { model: update2List(model, 'elementList'), option: {...shapeRender, _type: shapeType.Element}};
}
return null;
}
update2List(model={}, name='') {
const list = this.source[name];
const dispose = model._dispose;
const entries = Object.entries(model).filter(el => !['_type', '_dispose'].includes(el[0]));
const cleanModel = Object.fromEntries(entries);
let retModel = cleanModel;
if (list && list instanceof Array) {
const i = list.findIndex(elem => { return elem.code == model.code; });
if (i < 0) {
list.push(cleanModel)
} else {
retModel = dispose ? list.splice(i, 1) : Object.assign(list[i], cleanModel);
}
} else {
source[name] = [cleanModel];
}
return retModel;
}
getSource() {
return this.source;
}
getMapTemplate() {
return this.mapTemplate;
}
getMapShape() {
return this.mapShape;
}
getShapeByCode(code) {
return this.mapShape[code];
}
clear() {
this.source = {};
this.mapTemplate = {};
this.mapShape = {};
}
}

58
src/iscs_new/selectHandle.js
View File

@ -1,7 +1,6 @@
import graphType from './constant/graphType';
import LineDraggable from './draggable/Line';
import ImageDraggable from './draggable/Image';
import * as graphic from './utils/graphic';
export default class SelectHandle {
constructor(map, controller) {
@ -14,17 +13,16 @@ export default class SelectHandle {
}
onSelected(e) {
if (e.target && e.target.instance) {
if (e.target) {
this.e = {...e };
if (['Control'].includes(this.$controller.getKeyStr())) {
if (this.$map.isHover(e.target.model.code)) {
if (this.$controller.isSelected(e.target.model.code)) {
this.delSelected(e.target);
} else {
this.addSelected(e.target);
}
} else if (this.$controller.storage.isSelectSelf(e.target.model.code)) {
this.addSelected(e.target);
} else {
console.log(this.$controller.storage)
this.clear();
this.addSelected(e.target);
}
@ -34,24 +32,20 @@ export default class SelectHandle {
addSelected(target) {
this.$controller.storage.set(target.model.code, target);
if (target.instance.doActive) {
target.instance.doActive(this.$zr);
}
target.active(this.$zr);
if (!target.hover) {
target.hover = this.newHover(target);
this.$painter.addHoverElem(target.hover);
if (!target.highLightInstance) {
target.highLightInstance = this.createSelected(target);
this.$painter.addToLevel('hightLight')(target.highLightInstance);
}
}
delSelected(target) {
if (target.instance.doInactive) {
target.instance.doInactive(this.$zr);
}
target.inactive(this.$zr);
if (target.hover) {
this.$painter.delHoverElem(target.hover);
target.hover = null;
if (target.highLightInstance) {
this.$painter.removeFromLevel('hightLight')(target.highLightInstance);
target.highLightInstance = null;
}
this.$controller.storage.delete(target.model.code);
@ -63,32 +57,22 @@ export default class SelectHandle {
});
}
setDraggable(draggable) {
const target = this.e.target;
if (target && target.hover) {
target.hover.setDraggable(draggable);
}
}
newHover(target) {
createSelected(target) {
if (this.$map.draggle) {
switch (target.model._type) {
case graphType.LinePipe:
case graphic.Line:
return new LineDraggable(this);
case graphType.Resource:
case graphic.Image:
return new ImageDraggable(this);
}
}
}
render(list) {
this.$map.render(list);
}
normalizedDiff(x, y) {
const options = this.$map.getOptions();
const dx = x / options.scaleRate;
const dy = y / options.scaleRate;
return [dx, dy];
setDraggable(draggable) {
const target = this.e.target;
if (target &&
target.highLightInstance) {
target.highLightInstance.setDraggable(draggable);
}
}
}

70
src/iscs_new/selectingHandle.js
View File

@ -1,5 +1,24 @@
import * as graphic from './graph/graphic.js';
import * as graphic from './utils/graphic.js';
import shapeRender from './constant/shapeRender';
function shapeStyleBuilder() {
return {
subType: '__selecting',
...shapeRender,
z: 9999,
shape: {
x: 0,
y: 0,
width: 0,
height: 0
},
style: {
lineWidth: 0,
stroke: '#000',
fill: 'rgba(200,200,200,0.3)'
}
}
}
export default class SelectingHandle {
constructor(map, controller) {
this.$map = map;
@ -9,21 +28,7 @@ export default class SelectingHandle {
this.begPoint = null;
this.endPoint = null;
this.hover = new graphic.Rect({
_subType: 'selectingEl',
zlevel: 999,
shape: {
x: 0,
y: 0,
width: 0,
height: 0
},
style: {
lineWidth: 0,
stroke: '#000',
fill: 'rgba(200,200,200,0.3)'
}
});
this.selecting = new graphic.Rect(shapeStyleBuilder());
}
isSelecting() {
@ -31,30 +36,31 @@ export default class SelectingHandle {
}
onSelectStart(e) {
// console.log(e, '左键点击');
this.hover.setShape({ x: e.x, y: e.y, width: 0, height: 0 });
this.$painter.addHoverElem(this.hover);
this.selecting.setShape({ x: e.x, y: e.y, width: 0, height: 0 });
this.$painter.addToLevel('selecting')(this.selecting);
this.begPoint = { x: e.x, y: e.y };
this.endPoint = null;
}
onSelecting(e) {
// console.log(e, '移动');
this.endPoint = { x: e.x, y: e.y };
this.hover.setShape(this.normalizedArea(this.begPoint, this.endPoint));
this.$painter.addHoverElem(this.hover);
this.selecting.setShape(this.normalizedArea(this.begPoint, this.endPoint));
this.$painter.addToLevel('selecting')(this.selecting);
}
onSelectEnd(e) {
// console.log(e, '鼠标抬起');
this.endPoint = { x: e.x, y: e.y };
this.hover.setShape(this.normalizedArea(this.begPoint, this.endPoint));
this.$painter.addHoverElem(this.hover);
this.selecting.setShape(this.normalizedArea(this.begPoint, this.endPoint));
this.$painter.addToLevel('selecting')(this.selecting);
const hoverRect = this.hover.getBoundingRect();
Object.values(this.$map.getMapShape()).forEach(elem => {
if (!elem.model._silent && elem.instance && hoverRect.intersect(elem.instance.getBoundingRect())) {
this.setSelected(elem);
const selectingRect = this.selecting.getBoundingRect();
Object.values(this.$map.getMapShape()).forEach(el => {
if (el.instance && selectingRect.intersect(el.instance.getBoundingRect())) {
if (el.model.composeCode) {
this.setSelected(this.$map.getShapeByCode(el.model.composeCode));
} else {
this.setSelected(el);
}
}
});
@ -63,16 +69,16 @@ export default class SelectingHandle {
}
setSelected(target) {
target.instance.doActive(this.$zr);
target.active(this.$zr);
this.$controller.storage.set(target.model.code, target);
}
clear() {
this.$painter.delHoverElem(this.hover);
this.$painter.removeFromLevel('selecting')(this.selecting);
}
normalizedArea(begin, end) {
const options = this.$map.getOptions();
const options = this.$map.getOption();
const x = (begin.x + options.offsetX) / options.scaleRate;
const y = (begin.y + options.offsetY) / options.scaleRate;
const width = (end.x - begin.x) / options.scaleRate;

72
src/iscs_new/tipsHandle.js
View File

@ -1,36 +1,40 @@
import * as graphic from './graph/graphic';
import * as graphic from './utils/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({
zlevel: 1,
z: 99,
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
}
});
this.message = new graphic.Text(shapeStyleBuilder());
this.on('show', this.onShow, this);
this.on('hide', this.onHide, this);
}
@ -38,8 +42,8 @@ export default class TipsHandle extends Eventful {
onShow(e) {
const {x, y, text} = e;
const painter = this.map.getPainter();
const options = this.map.getOptions();
const level = painter.getTipsLevel();
const options = this.map.getOption();
const tipsLevel = painter.getTipsLevel();
const scaleRate = options.scaleRate || 1;
const offsetX = options.offsetX || 0;
const offsetY = options.offsetY || 0;
@ -49,18 +53,18 @@ export default class TipsHandle extends Eventful {
this.message.setStyle({x: newX, y: newY, text});
if (level) {
level.add(this.message);
if (tipsLevel) {
tipsLevel.add(this.message);
painter.$transformHandle.transformView(this.message);
}
}
onHide(e) {
const painter = this.map.getPainter();
const level = painter.getTipsLevel();
const tipsLevel = painter.getTipsLevel();
if (level) {
level.remove(this.message);
if (tipsLevel) {
tipsLevel.remove(this.message);
}
this.message.setStyle('text', '');
}

4
src/iscs_new/transformHandle.js
View File

@ -27,10 +27,6 @@ class TransformHandle {
visible = false;
}
if (view._code) {
this.$painter.doHover(view, visible);
}
view.dirty();
}

2
src/iscs_new/utils/Storage.js
View File

@ -37,7 +37,7 @@ export default class Storage {
this.map.clear();
}
isSelectSelf(code) {
isSelectExist(code) {
return this.has(code);
}

18
src/iscs_new/utils/eventEmitter.js
View File

@ -3,21 +3,19 @@ class EventEmitter {
this.list = {};
}
on(event, fn) {
(this.list[event] || (this.list[event] = [])).push(fn);
on(event, fn, context) {
(this.list[event]||(this.list[event] = [])).push({fn, context});
return this;
}
emit() {
let event = [].shift.call(arguments);
let fns = [...this.list[event]];
if (!fns || fns.length === 0) {
emit(event, ...args) {
let fns = this.list[event]||[];
if (fns.length === 0) {
return false;
}
fns.forEach(fn => {
fn.apply(this, arguments);
fns.forEach(({fn, context}) => {
fn.apply(context, arguments);
});
return this;
@ -25,7 +23,7 @@ class EventEmitter {
off(event, fn) {
const fns = this.list[event]||[];
const index = fns.findIndex(el => el == fn);
const index = fns.findIndex(el => el.fb == fn);
if (index >= 0) {
fns.splice(index, 1);
}

14
src/iscs_new/graph/graphic.js → src/iscs_new/utils/graphic.js
View File

@ -1,5 +1,4 @@
export {default as Group} from 'zrender/src/container/Group';
export {default as Image} from 'zrender/src/graphic/Image';
export {default as Text} from 'zrender/src/graphic/Text';
export {default as Arc} from 'zrender/src/graphic/shape/Arc';
@ -18,15 +17,4 @@ export {default as Rose} from 'zrender/src/graphic/shape/Rose';
export {default as Sector} from 'zrender/src/graphic/shape/Sector';
export {default as Star} from 'zrender/src/graphic/shape/Star';
export {default as Trochoid} from 'zrender/src/graphic/shape/Trochoid';
// export {default as Svg} from './shape/Svg';
// export {default as Hover} from './shape/Hover';
// export {default as Digit} from './shape/Digit';
// export {default as Arrow} from './shape/Arrow';
// export {default as ArrowLine} from './shape/ArrowLine';
// export {default as Sausage} from './shape/Sausage';
// export {default as Pointer} from './shape/Pointer';
// export {default as Table} from './shape/Table/table';
// export {default as CurvedScale} from './shape/CurvedScale/curvedScale';
// export {default as LinearScale} from './shape/LinearScale/linearScale';
// export {default as Coordinate} from './shape/Coordinate/Coordinate';
export {default as Svg} from './shape/Svg';

0
src/iscs_new/graph/shape/Svg.js → src/iscs_new/utils/shape/Svg.js
View File

6
src/router/index.js
View File

@ -162,6 +162,7 @@ const RunPlanViewWindow = () => import('@/views/newMap/displayNew/demon/runPlanV
const SecondaryHome = () => import('@/views/trainingPlatform/secondaryHome');
const Demo = () => import('@/views/demo');
const DemoTraining = () => import('@/views/newMap/displayNew/demoTraining');
const Test = () => import('@/views/test');
// import { GenerateRouteProjectList } from '@/scripts/ProjectConfig';
// import { getSessionStorage } from '@/utils/auth';
@ -207,6 +208,11 @@ export const userTrainingPlatform = '016'; // 实训系统
// export const refereePlatform = '017'; // 裁判系统
export const constantRoutes = [
{
path: '/test',
component: Test,
hidden: true
},
{
path: '/demo',
component: Demo,

211
src/views/test/index.vue Normal file
View File

@ -0,0 +1,211 @@
<template>
<div>
<div :id="iscsId" v-loading="loading" :style="{ width: canvasWidth +'px', height: canvasHeight +'px',background:'#425a74' }" class="iscs-canvas" />
</div>
</template>
<script>
import Vue from 'vue';
import Iscs from '@/iscs_new/map';
import { mapGetters } from 'vuex';
import { exitFullscreen } from '@/utils/screen';
export default {
data() {
return {
dataZoom: {
offsetX: '0',
offsetY: '0',
scaleRate: '1'
},
config: {
scaleRate: '1',
origin: {
x: 0,
y: 0
}
},
selected: null, // 选择复制元素
loading: false,
};
},
computed: {
...mapGetters([
'canvasWidth',
'canvasHeight'
]),
...mapGetters('iscs', [
'iscs'
]),
iscsId() {
return ['iscs', (Math.random().toFixed(5)) * 100000].join('_');
},
width() {
return 1900;
},
height() {
return 600;
}
},
watch: {
'$store.state.config.canvasSizeCount': function (val) {
this.reSize();
},
'$store.state.socket.equipmentStatus': function (val) {
if (val.length) {
this.stateMessage(val);
}
}
},
mounted() {
this.init();
},
beforeDestroy() {
this.destroy();
},
methods: {
init() {
document.getElementById(this.iscsId).oncontextmenu = function (e) {
return false;
};
this.$iscs = new Iscs({
dom: document.getElementById(this.iscsId),
config: {
renderer: 'canvas',
width: this.width,
height: this.height
},
options: {
scaleRate: 1,
offsetX: 0,
offsetY: 0
}
});
Vue.prototype.$iscs = this.$iscs;
this.$iscs.setMap([], {
elementList: [
{
code: '1',
type: 'Rect',
shape: {
x: 100,
y: 100,
width: 30,
height: 30
},
style: {
fill: 'red',
stroke: 'black'
},
composeCode: '4'
},
{
code: '2',
type: 'Circle',
shape: {
cx: 100,
cy: 100,
r: 10,
},
style: {
fill: 'red',
stroke: 'black'
},
composeCode: '4'
},
{
code: '3',
type: 'Droplet',
shape: {
cx: 300,
cy: 200,
width: 30,
height: 30,
},
style: {
fill: 'red',
stroke: 'black'
},
composeCode: ''
}
],
composeList: [
{
code: '4',
type: 'Device',
elementCodes: ['1', '2']
}
]
}, {
panEnable: true,
zoomEnable: true,
keyEnable: true,
draggle: true,
selecting: true,
selectable: true,
reflect: true
});
this.$iscs.on('contextmenu', this.onContextMenu, this);
this.$iscs.on('selected', this.onSelected, this);
this.$iscs.on('keyboard', this.onKeyboard, this);
window.document.oncontextmenu = function () {
return false;
};
},
// 键盘快捷键事件
onKeyboard(hook) {
console.log(hook);
},
// 点击选择事件
onSelected(em) {
console.log(em);
},
// 右键点击事件
onContextMenu(em) {
if (em.eventTarget) {
this.selected = em.eventTarget.model;
}
},
reSize() {
this.$nextTick(() => {
this.$iscs && this.$iscs.resize({ width: this.width, height: this.height });
});
},
back() {
this.group = this.$route.query.group;
this.$store.dispatch('training/over').then(() => {
putJointTrainingSimulationUserNew(this.group).then(() => {
this.$router.replace({ path: `/trainroom`, query: { group: this.group, lineCode:this.$route.query.lineCode } });
exitFullscreen();
});
});
},
destroy() {
if (this.$iscs) {
this.$iscs.dispose();
this.$iscs = null;
Vue.prototype.$iscs = null;
}
},
stateMessage(val) {
this.$iscs && this.$iscs.setDeviceStatus(val);
}
}
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.iscs-button{
position: absolute;
float: right;
right: 20px;
bottom: 15px;
}
.iscs-canvas{
}
</style>