diff --git a/src/iscs_new/config/defaultStyle.js b/src/iscs_new/config/defaultStyle.js index 4a29ccb79..28009f028 100644 --- a/src/iscs_new/config/defaultStyle.js +++ b/src/iscs_new/config/defaultStyle.js @@ -29,5 +29,11 @@ export default class highlightStyle { /** 提亮度*/ this.liftLevel = 0.5; + + /** 边框宽度*/ + this.borderWidth = 2; + + /** 边框颜色*/ + this.borderColor = '#fff'; } } diff --git a/src/iscs_new/controller.js b/src/iscs_new/controller.js index 0c12f7de4..7d8894cbe 100644 --- a/src/iscs_new/controller.js +++ b/src/iscs_new/controller.js @@ -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; } } diff --git a/src/iscs_new/dragHandle.js b/src/iscs_new/dragHandle.js index 2bef068c5..f339fdb23 100644 --- a/src/iscs_new/dragHandle.js +++ b/src/iscs_new/dragHandle.js @@ -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; } } diff --git a/src/iscs_new/draggable/Image.js b/src/iscs_new/draggable/Image.js index 5cba18dbd..e3d0dd47a 100644 --- a/src/iscs_new/draggable/Image.js +++ b/src/iscs_new/draggable/Image.js @@ -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}; diff --git a/src/iscs_new/draggable/Line.js b/src/iscs_new/draggable/Line.js index 39f237dd9..67053fe1b 100644 --- a/src/iscs_new/draggable/Line.js +++ b/src/iscs_new/draggable/Line.js @@ -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); diff --git a/src/iscs_new/graph/core/parser.js b/src/iscs_new/graph/core/parser.js deleted file mode 100644 index 2ee8fc1e7..000000000 --- a/src/iscs_new/graph/core/parser.js +++ /dev/null @@ -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; diff --git a/src/iscs_new/graph/core/state.js b/src/iscs_new/graph/core/state.js deleted file mode 100644 index e2dcc1549..000000000 --- a/src/iscs_new/graph/core/state.js +++ /dev/null @@ -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; diff --git a/src/iscs_new/graph/graph.js b/src/iscs_new/graph/graph.js deleted file mode 100644 index da20fcf52..000000000 --- a/src/iscs_new/graph/graph.js +++ /dev/null @@ -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; diff --git a/src/iscs_new/graph/shape/Arrow.js b/src/iscs_new/graph/shape/Arrow.js deleted file mode 100644 index b4197409c..000000000 --- a/src/iscs_new/graph/shape/Arrow.js +++ /dev/null @@ -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; - } - } -}); diff --git a/src/iscs_new/graph/shape/ArrowLine.js b/src/iscs_new/graph/shape/ArrowLine.js deleted file mode 100644 index 3253adb6d..000000000 --- a/src/iscs_new/graph/shape/ArrowLine.js +++ /dev/null @@ -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(); - } - - } -}); diff --git a/src/iscs_new/graph/shape/Coordinate/Coordinate.js b/src/iscs_new/graph/shape/Coordinate/Coordinate.js deleted file mode 100644 index 156bc619c..000000000 --- a/src/iscs_new/graph/shape/Coordinate/Coordinate.js +++ /dev/null @@ -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); - } -} diff --git a/src/iscs_new/graph/shape/Coordinate/lineView.js b/src/iscs_new/graph/shape/Coordinate/lineView.js deleted file mode 100644 index 459a9797c..000000000 --- a/src/iscs_new/graph/shape/Coordinate/lineView.js +++ /dev/null @@ -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); - } - } -} diff --git a/src/iscs_new/graph/shape/CurvedScale/curvedScale.js b/src/iscs_new/graph/shape/CurvedScale/curvedScale.js deleted file mode 100644 index f756eb848..000000000 --- a/src/iscs_new/graph/shape/CurvedScale/curvedScale.js +++ /dev/null @@ -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]; -} diff --git a/src/iscs_new/graph/shape/Digit.js b/src/iscs_new/graph/shape/Digit.js deleted file mode 100644 index c4ff02852..000000000 --- a/src/iscs_new/graph/shape/Digit.js +++ /dev/null @@ -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); - } - - } -}); diff --git a/src/iscs_new/graph/shape/Hover.js b/src/iscs_new/graph/shape/Hover.js deleted file mode 100644 index 88d4e027d..000000000 --- a/src/iscs_new/graph/shape/Hover.js +++ /dev/null @@ -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); - } -}); diff --git a/src/iscs_new/graph/shape/LinearScale/linearScale.js b/src/iscs_new/graph/shape/LinearScale/linearScale.js deleted file mode 100644 index 80d342751..000000000 --- a/src/iscs_new/graph/shape/LinearScale/linearScale.js +++ /dev/null @@ -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]; -} diff --git a/src/iscs_new/graph/shape/Pointer.js b/src/iscs_new/graph/shape/Pointer.js deleted file mode 100644 index c14e205b4..000000000 --- a/src/iscs_new/graph/shape/Pointer.js +++ /dev/null @@ -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); - } -}); diff --git a/src/iscs_new/graph/shape/Sausage.js b/src/iscs_new/graph/shape/Sausage.js deleted file mode 100644 index d2c8d141c..000000000 --- a/src/iscs_new/graph/shape/Sausage.js +++ /dev/null @@ -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(); - } -}); diff --git a/src/iscs_new/graph/shape/Table/cell.js b/src/iscs_new/graph/shape/Table/cell.js deleted file mode 100644 index 272fdf637..000000000 --- a/src/iscs_new/graph/shape/Table/cell.js +++ /dev/null @@ -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); - } -} diff --git a/src/iscs_new/graph/shape/Table/table.js b/src/iscs_new/graph/shape/Table/table.js deleted file mode 100644 index b9a19a579..000000000 --- a/src/iscs_new/graph/shape/Table/table.js +++ /dev/null @@ -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 { 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 - }); - } -} diff --git a/src/iscs_new/map.js b/src/iscs_new/map.js index 7afde99fb..65f068677 100644 --- a/src/iscs_new/map.js +++ b/src/iscs_new/map.js @@ -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)); diff --git a/src/iscs_new/options.js b/src/iscs_new/option.js similarity index 84% rename from src/iscs_new/options.js rename to src/iscs_new/option.js index b22645e16..f047c14b2 100644 --- a/src/iscs_new/options.js +++ b/src/iscs_new/option.js @@ -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); } } diff --git a/src/iscs_new/painter.js b/src/iscs_new/painter.js index 1c96a580e..ce7f907e8 100644 --- a/src/iscs_new/painter.js +++ b/src/iscs_new/painter.js @@ -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(); + }) } } diff --git a/src/iscs_new/parser/Shape.js b/src/iscs_new/parser/Shape.js index 7d001a145..3fabc6361 100644 --- a/src/iscs_new/parser/Shape.js +++ b/src/iscs_new/parser/Shape.js @@ -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() {} diff --git a/src/iscs_new/parser/compose.js b/src/iscs_new/parser/compose.js index e829fd94e..36b5ffdae 100644 --- a/src/iscs_new/parser/compose.js +++ b/src/iscs_new/parser/compose.js @@ -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; diff --git a/src/iscs_new/parser/element.js b/src/iscs_new/parser/element.js index 633fad02b..36bb36eae 100644 --- a/src/iscs_new/parser/element.js +++ b/src/iscs_new/parser/element.js @@ -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; diff --git a/src/iscs_new/parser/index.js b/src/iscs_new/parser/index.js index cb040f3b9..fd43c5792 100644 --- a/src/iscs_new/parser/index.js +++ b/src/iscs_new/parser/index.js @@ -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 = {}; } } diff --git a/src/iscs_new/selectHandle.js b/src/iscs_new/selectHandle.js index 6003c8a4d..3f99143b7 100644 --- a/src/iscs_new/selectHandle.js +++ b/src/iscs_new/selectHandle.js @@ -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); + } } } diff --git a/src/iscs_new/selectingHandle.js b/src/iscs_new/selectingHandle.js index 3f28c0ad0..65c963986 100644 --- a/src/iscs_new/selectingHandle.js +++ b/src/iscs_new/selectingHandle.js @@ -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; diff --git a/src/iscs_new/tipsHandle.js b/src/iscs_new/tipsHandle.js index 259ce842e..796280d39 100644 --- a/src/iscs_new/tipsHandle.js +++ b/src/iscs_new/tipsHandle.js @@ -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', ''); } diff --git a/src/iscs_new/transformHandle.js b/src/iscs_new/transformHandle.js index 48c95eb23..1edccbdba 100644 --- a/src/iscs_new/transformHandle.js +++ b/src/iscs_new/transformHandle.js @@ -27,10 +27,6 @@ class TransformHandle { visible = false; } - if (view._code) { - this.$painter.doHover(view, visible); - } - view.dirty(); } diff --git a/src/iscs_new/utils/Storage.js b/src/iscs_new/utils/Storage.js index 0c63b1a59..d599a3d68 100644 --- a/src/iscs_new/utils/Storage.js +++ b/src/iscs_new/utils/Storage.js @@ -37,7 +37,7 @@ export default class Storage { this.map.clear(); } - isSelectSelf(code) { + isSelectExist(code) { return this.has(code); } diff --git a/src/iscs_new/utils/eventEmitter.js b/src/iscs_new/utils/eventEmitter.js index aa60306cc..635293708 100644 --- a/src/iscs_new/utils/eventEmitter.js +++ b/src/iscs_new/utils/eventEmitter.js @@ -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); } diff --git a/src/iscs_new/graph/graphic.js b/src/iscs_new/utils/graphic.js similarity index 66% rename from src/iscs_new/graph/graphic.js rename to src/iscs_new/utils/graphic.js index a86031fc6..2991c15bc 100644 --- a/src/iscs_new/graph/graphic.js +++ b/src/iscs_new/utils/graphic.js @@ -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'; diff --git a/src/iscs_new/graph/shape/Svg.js b/src/iscs_new/utils/shape/Svg.js similarity index 100% rename from src/iscs_new/graph/shape/Svg.js rename to src/iscs_new/utils/shape/Svg.js diff --git a/src/router/index.js b/src/router/index.js index b984b5659..7837b7064 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -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, diff --git a/src/views/test/index.vue b/src/views/test/index.vue new file mode 100644 index 000000000..a04c9d397 --- /dev/null +++ b/src/views/test/index.vue @@ -0,0 +1,211 @@ + + + +