diff --git a/src/jmap/shape/Signal/ESigButton.js b/src/jmap/shape/Signal/ESigButton.js index ef455713a..10a172d6a 100644 --- a/src/jmap/shape/Signal/ESigButton.js +++ b/src/jmap/shape/Signal/ESigButton.js @@ -90,17 +90,17 @@ class ESigButton extends Group { this.add(this.sigNormalButtom); this.add(this.sigReentryButton); - this.setVisible(model.show); + this.hide(); } - setVisible(show) { - if (show) { - this.sigNormalButtom.show(); - this.sigReentryButton.show(); - } else { - this.sigNormalButtom.hide(); - this.sigReentryButton.hide(); - } + hide() { + this.sigNormalButtom.hide(); + this.sigReentryButton.hide(); + } + + show() { + this.sigNormalButtom.show(); + this.sigReentryButton.show(); } } diff --git a/src/jmap/shape/Signal/ESigDelay.js b/src/jmap/shape/Signal/ESigDelay.js index 85c0d9afb..776603d0c 100644 --- a/src/jmap/shape/Signal/ESigDelay.js +++ b/src/jmap/shape/Signal/ESigDelay.js @@ -5,26 +5,25 @@ class ESigDelay extends Group { constructor(model) { super(); this.model = model; - this.zlevel = model.zlevel; - this.z = model.z; this._create(); } _create() { + const model = this.model; this.name = new Text({ - _subType: this.model._subType, - zlevel: this.zlevel, - z: this.z, - silent: this.model.silent || false, + _subType: model._subType, + zlevel: model.zlevel, + z: model.z, + silent: model.silent || false, style: { - x: this.model.x, - y: this.model.y, - text: this.model.text, - textFont: this.model.textFont, - textFill: this.model.textFill, - textAlign: this.model.textAlign, - textPosition: this.model.textPosition || 'inside', - textVerticalAlign: this.model.textVerticalAlign || null + x: model.x, + y: model.y, + text: model.text, + textFont: model.textFont, + textFill: model.textFill, + textAlign: model.textAlign, + textPosition: model.textPosition || 'inside', + textVerticalAlign: model.textVerticalAlign || null } }); this.add(this.name); diff --git a/src/jmap/shape/Signal/ESigName.js b/src/jmap/shape/Signal/ESigName.js index 54d6386af..980af7446 100644 --- a/src/jmap/shape/Signal/ESigName.js +++ b/src/jmap/shape/Signal/ESigName.js @@ -5,26 +5,25 @@ class ESigName extends Group { constructor(model) { super(); this.model = model; - this.zlevel = model.zlevel; - this.z = model.z; this._create(); } _create() { + const model = this.model; this.name = new Text({ - _subType: this.model._subType, - zlevel: this.zlevel, - z: this.z, - silent: this.model.silent || false, + _subType: model._subType, + zlevel: model.zlevel, + z: model.z, + silent: model.silent || false, style: { - x: this.model.x, - y: this.model.y, - text: this.model.text, - textFont: this.model.textFont, - textFill: this.model.textFill, - textAlign: this.model.textAlign, - textPosition: this.model.textPosition || 'inside', - textVerticalAlign: this.model.textVerticalAlign || null + x: model.x, + y: model.y, + text: model.text, + textFont: model.textFont, + textFill: model.textFill, + textAlign: model.textAlign, + textPosition: model.textPosition || 'inside', + textVerticalAlign: model.textVerticalAlign || null } }); this.add(this.name); @@ -38,10 +37,12 @@ class ESigName extends Group { this.name.setStyle('textFill', color); } + // 隐藏 hide() { this.name.hide(); } + // 显示 show() { this.name.show(); } diff --git a/src/jmap/shape/Signal/ESigPass.js b/src/jmap/shape/Signal/ESigPass.js index da97f3bb3..ca1f0eeeb 100644 --- a/src/jmap/shape/Signal/ESigPass.js +++ b/src/jmap/shape/Signal/ESigPass.js @@ -51,6 +51,16 @@ class ESigPass extends Group { .when(4000, { fill: fill, stroke: style.style.Signal.sidelineColor }) .start(); } + + // 隐藏 + hide() { + this.arrows.hide(); + } + + // 显示 + show() { + this.arrows.show(); + } } export default ESigPass; diff --git a/src/jmap/shape/Signal/ESigRoute.js b/src/jmap/shape/Signal/ESigRoute.js index 5cccc5389..2321d6638 100644 --- a/src/jmap/shape/Signal/ESigRoute.js +++ b/src/jmap/shape/Signal/ESigRoute.js @@ -26,6 +26,16 @@ class ESigDrict extends Group { }); this.add(this.sigDrict); } + + // 隐藏 + hide() { + this.sigDrict.hide(); + } + + // 显示 + show() { + this.sigDrict.show(); + } } export default ESigDrict; diff --git a/src/jmap/shape/Signal/index.js b/src/jmap/shape/Signal/index.js index 54bc1d4c9..bea36cf12 100644 --- a/src/jmap/shape/Signal/index.js +++ b/src/jmap/shape/Signal/index.js @@ -17,12 +17,13 @@ class Signal extends Group { super(); this._code = _code; this._type = _type; - this.zlevel = zlevel; this.model = model; this.state = state; this.style = style; this.count = parseInt(model.lampPositionType); this.lamps = new Array(this.count); + this.zlevel = zlevel; + this.z = 1; this.create(); this.setState(state); } @@ -36,7 +37,7 @@ class Signal extends Group { // 信号机高柱矮柱 this.sigPost = new ESigPost({ zlevel: this.zlevel, - z: 1, + z: this.z, style: style, drict: drict, type: model.lampPostType, @@ -50,7 +51,7 @@ class Signal extends Group { for (let i = 0; i < this.count; i++) { const lamp = new ESigLmap({ zlevel: this.zlevel, - z: 1, + z: this.z, style: style, index: i + 1, drict: drict, @@ -66,25 +67,9 @@ class Signal extends Group { // 信号机名称 const sigNameX = model.position.x + model.namePosition.x; const sigNameY = model.position.y + posit * (style.Signal.signalDistance + style.Section.sectionWidth + style.Signal.signalR * 2 + model.namePosition.y); - // this.sigName = new Text({ - // zlevel: this.zlevel, - // z: 1, - // silent: model.silent || false, - // style: { - // x: sigNameX, - // y: sigNameY, - // text: model.name, - // textFont: `bold ${style.Signal.signalTextFontSize} px ${style.textFontFormat}`, - // textFill: style.Signal.sigTextGreen, - // textAlign: 'middle', - // textPosition: this.model.textPosition || 'inside', - // textVerticalAlign: posit == 1 ? 'top' : 'bottom' - // } - // }); - this.sigName = new ESigName({ zlevel: this.zlevel, - z: 1, + z: this.z, style: style, x: sigNameX, y: sigNameY, @@ -101,7 +86,7 @@ class Signal extends Group { const sigRouteY = endPoint.y + (style.Signal.signalSigRouteOffset.y); this.sigRoute = new ESigRoute({ zlevel: this.zlevel, - z: 1, + z: this.z, style: style, x: sigRouteX, y: sigRouteY, @@ -114,7 +99,7 @@ class Signal extends Group { const sigPassY = endPoint.y + (style.Signal.signalSigPassOffset.y); this.sigPass = new ESigPass({ zlevel: this.zlevel, - z: 1, + z: this.z, style: style, count: this.count, drict: drict, @@ -132,7 +117,7 @@ class Signal extends Group { const sigDelayY = endPoint.y - (style.Signal.signalSigDelayOffset.y) * posit; this.sigDelay = new ESigDelay({ zlevel: this.zlevel, - z: 1, + z: this.z, style: style, x: sigDelayX, y: sigDelayY, @@ -146,7 +131,7 @@ class Signal extends Group { // 信号灯按钮 this.sigButton = new ESigButton({ zlevel: this.zlevel, - z: 1, + z: this.z, style: style, posit: posit, show: model.buttonShow, @@ -213,8 +198,7 @@ class Signal extends Group { // 封锁 block() { this.lamps[0] && this.lamps[0].setColor(this.style.Signal.signalLampRedColor); - // this.sigName.setColor(this.style.Signal.sectionBlockTextColor); - this.sigName.setStyle({'textFill': this.style.Signal.sectionBlockTextColor}); + this.sigName.setColor(this.style.Signal.sectionBlockTextColor); } // 功能封锁 @@ -290,8 +274,7 @@ class Signal extends Group { recover() { this.sigDelay.hide(); this.sigPass.animationRecover(); - // this.sigName.setColor(this.style.Signal.signalTextGreen); - this.sigName.setStyle({'textFill': this.style.Signal.signalTextGreen}); + this.sigName.setColor(this.style.Signal.signalTextGreen); } setState(state) { diff --git a/src/jmap/shape/StationStand/EDetain.js b/src/jmap/shape/StationStand/EDetain.js index 3ac880f83..9072e80f6 100644 --- a/src/jmap/shape/StationStand/EDetain.js +++ b/src/jmap/shape/StationStand/EDetain.js @@ -34,8 +34,12 @@ class EDetain extends Group { this.detain.setStyle('textFill', color); } - setVisible(show) { - show ? this.detain.show(): this.detain.hide(); + hide() { + this.detain.hide(); + } + + show() { + this.detain.show(); } } diff --git a/src/jmap/shape/StationStand/EJump.js b/src/jmap/shape/StationStand/EJump.js index 5eec0b2fb..fa3d09178 100644 --- a/src/jmap/shape/StationStand/EJump.js +++ b/src/jmap/shape/StationStand/EJump.js @@ -40,8 +40,12 @@ class EJump extends Group { this.jump.setStyle('textFill', color); } - setVisible(show) { - show ? this.jump.show(): this.jump.hide(); + hide() { + this.jump.hide(); + } + + show() { + this.jump.show(); } } diff --git a/src/jmap/shape/StationStand/ELevel.js b/src/jmap/shape/StationStand/ELevel.js index d2d6c8151..b530633d1 100644 --- a/src/jmap/shape/StationStand/ELevel.js +++ b/src/jmap/shape/StationStand/ELevel.js @@ -40,8 +40,12 @@ class ELevel extends Group { this.level.setStyle('textFill', color); } - setVisible(show) { - show ? this.level.show(): this.level.hide(); + hide() { + this.level.hide(); + } + + show() { + this.level.show(); } } diff --git a/src/jmap/shape/StationStand/EReentry.js b/src/jmap/shape/StationStand/EReentry.js index dcef660cf..5c4007fe4 100644 --- a/src/jmap/shape/StationStand/EReentry.js +++ b/src/jmap/shape/StationStand/EReentry.js @@ -31,8 +31,12 @@ class EReentry extends Group { this.reentry.setStyle('textFill', color); } - setVisible(show) { - show ? this.reentry.show(): this.reentry.hide(); + hide() { + this.reentry.hide(); + } + + show() { + this.reentry.show(); } } diff --git a/src/jmap/shape/StationStand/ESafeEmergent.js b/src/jmap/shape/StationStand/ESafeEmergent.js index bda6544bd..7d8530779 100644 --- a/src/jmap/shape/StationStand/ESafeEmergent.js +++ b/src/jmap/shape/StationStand/ESafeEmergent.js @@ -31,8 +31,12 @@ class ESafeEmergent extends Group { this.add(this.emergent); } - setVisible(show) { - show ? this.emergent.show(): this.emergent.hide(); + hide() { + this.emergent.hide(); + } + + show() { + this.emergent.show(); } } diff --git a/src/jmap/shape/StationStand/ETime.js b/src/jmap/shape/StationStand/ETime.js index d3903d3d6..bfe80cf0f 100644 --- a/src/jmap/shape/StationStand/ETime.js +++ b/src/jmap/shape/StationStand/ETime.js @@ -40,8 +40,12 @@ class ETime extends Group { this.time.setStyle('textFill', color); } - setVisible(show) { - show ? this.time.show(): this.time.hide(); + hide() { + this.time.hide(); + } + + show() { + this.time.show(); } } diff --git a/src/jmap/shape/StationStand/index.js b/src/jmap/shape/StationStand/index.js index ace57f09e..076103358 100644 --- a/src/jmap/shape/StationStand/index.js +++ b/src/jmap/shape/StationStand/index.js @@ -13,10 +13,11 @@ class StationStand extends Group { super(); this._code = _code; this._type = _type; - this.zlevel = zlevel; this.model = model; this.state = state; this.style = style; + this.zlevel = zlevel; + this.z = 1; this.doors = new Group(); this._create(); this.setVisible(model.visible); @@ -30,7 +31,7 @@ class StationStand extends Group { /** 屏蔽门*/ this.safeDoor = new ESafeDoor({ zlevel: this.zlevel, - z: 1, + z: this.z, style: style, x: model.position.x, y: model.position.y, @@ -45,7 +46,7 @@ class StationStand extends Group { const standY = model.position.y + drict * (style.StationStand.standDistance + standH); this.safeStand = new ESafeStand({ zlevel: this.zlevel, - z: 1, + z: this.z, style: style, x: standX, y: standY, @@ -59,7 +60,7 @@ class StationStand extends Group { const emergentY = model.position.y + drict * (style.StationStand.standEmergentOffset.y + emergentH); this.emergent = new ESafeEmergent({ zlevel: this.zlevel, - z: 10, + z: this.z + 1, style: style, x: emergentX, y: emergentY, @@ -74,7 +75,7 @@ class StationStand extends Group { const reentryY = model.position.y + (style.StationStand.standReentryDirection || drict) * (style.StationStand.standReentryOffset.y) + drict * reentryH; this.reentry = new EReentry({ zlevel: this.zlevel, - z: 1, + z: this.z + 1, style: style, drict: drict, x: reentryX, @@ -90,7 +91,7 @@ class StationStand extends Group { const detainY = model.position.y + (style.StationStand.standDetainDirection || drict) * (style.StationStand.standDetainOffset.y) + drict * detainH; this.detain = new EDetain({ zlevel: this.zlevel, - z: 1, + z: this.z, style: style, x: detainX, y: detainY, @@ -105,11 +106,11 @@ class StationStand extends Group { const timeY = model.position.y + (style.StationStand.standTimeDirection || drict) * (style.StationStand.standTimeOffset.y) + drict * timeH; this.time = new ETime({ zlevel: this.zlevel, - z: 2, + z: this.z + 1, style: style, x: timeX, y: timeY, - name: model.parkingTime || '30' + name: model.parkingTime }); /** 运行等级*/ @@ -119,11 +120,11 @@ class StationStand extends Group { const levelY = model.position.y + (style.StationStand.standLevelDirection || drict) * (style.StationStand.standLevelOffset.y) + drict * levelH; this.level = new ELevel({ zlevel: this.zlevel, - z: 2, + z: this.z + 1, style: style, x: levelX, y: levelY, - name: model.intervalRunTime || '5' + name: model.intervalRunTime }); this.add(this.safeDoor); @@ -145,11 +146,11 @@ class StationStand extends Group { /** 恢复初始状态*/ recover() { - this.time.setVisible(false); - this.level.setVisible(false); - this.detain.setVisible(false); - this.reentry.setVisible(false); - this.emergent.setVisible(false); + this.time.hide(); + this.level.hide(); + this.detain.hide(); + this.reentry.hide(); + this.emergent.hide(); if (this.model.visible) { this.safeDoor.hasDoor(true); } this.safeDoor.setColor(this.style.StationStand.standDoorDefaultColor); } @@ -172,7 +173,7 @@ class StationStand extends Group { /** 站台紧急关闭*/ emergentClose() { this.safeStand.setColor(this.style.StationStand.standSpareColor); - this.emergent.setVisible(true); + this.emergent.show(); } /** 未设置跳停*/ @@ -186,35 +187,35 @@ class StationStand extends Group { /** 未设置扣车*/ unDetainTrain() { - this.detain.setVisible(false); + this.detain.hide(); } /** 车站扣车*/ standDetainTrain() { - this.detain.setVisible(true); + this.detain.show(); this.detain.setColor(this.style.StationStand.standDetainTrainTextColor); } /** 中心扣车*/ centerDetainTrain() { - this.detain.setVisible(true); + this.detain.show(); this.detain.setColor(this.style.StationStand.standCenterDetainTrainColor); } /** 中心+车站扣车*/ standAndCenterDetainTrain() { - this.detain.setVisible(true); + this.detain.show(); } /** 人工设置停战时间*/ setManuallyArmisticeTime(val) { - this.time.setVisible(true); + this.time.show(); this.time.setName(val); } /** 人工设置运行等级*/ setManuallyOperationLevel(val) { - this.level.setVisible(true); + this.level.show(); this.level.setName(val); } @@ -245,17 +246,17 @@ class StationStand extends Group { /** 无折返(默认)*/ noReentry() { - this.reentry.setVisible(false); + this.reentry.hide(); } /** 无人折返*/ noHumanReentry() { - this.reentry.setVisible(true); + this.reentry.show(); this.reentry.setColor(this.style.StationStand.standNoHumanReentryColor); } /** 自动换端*/ autoChangeEnds() { - this.reentry.setVisible(true); + this.reentry.show(); this.reentry.setColor(this.style.StationStand.standAutoChangeEndsColor); } diff --git a/src/jmap/shape/Switch/index.js b/src/jmap/shape/Switch/index.js index 9d3a91f0f..ac8b2af31 100644 --- a/src/jmap/shape/Switch/index.js +++ b/src/jmap/shape/Switch/index.js @@ -1,12 +1,12 @@ /* * 道岔 */ -import Text from 'zrender/src/graphic/Text'; -import Rect from 'zrender/src/graphic/shape/Rect'; import Line from 'zrender/src/graphic/shape/Line'; import Group from 'zrender/src/container/Group'; import Polygon from 'zrender/src/graphic/shape/Polygon'; import JTriangle from '../../utils/JTriangle'; +import ESwName from './ESwName.js'; +import ESwCore from './ESwCore.js'; export default class Switch extends Group { constructor({ _code, _type, zlevel, model, state }, style, jmap) { @@ -26,65 +26,35 @@ export default class Switch extends Group { } _create() { - const model = this.model; - this.triangle = new JTriangle(model.intersection, model.skew); - this.createSwitch(); - this.createNameText(); - } - - /** 道岔实体，不显示，响应鼠标事件*/ - createSwitch() { const model = this.model; const style = this.style; - var halfWidth = style.Section.sectionWidth / 2; - var switchWidth = style.Section.sectionWidth + style.Section.sectionBeyondWidth*2 + 0.8; - var swPadding = style.Switch.switchLen; - var directx = this.triangle.drictx; - var directy = this.triangle.dricty; - var direct = -this.triangle.drictx * this.triangle.dricty; - var coverLength = switchWidth * 1.5; + this.triangle = new JTriangle(model.intersection, model.skew); - var line = new Line({ + let halfWidth = style.Section.sectionWidth / 2; + const switchWidth = style.Section.sectionWidth + style.Section.sectionBeyondWidth*2 + 0.8; + const swPadding = style.Switch.switchLen; + const directx = this.triangle.drictx; + const directy = this.triangle.dricty; + const direct = -this.triangle.drictx * this.triangle.dricty; + const coverLength = switchWidth * 1.5; + + this.swCore = new ESwCore({ zlevel: this.zlevel, z: this.z, - silent: true, - shape: { - x1: model.intersection.x - coverLength, - y1: model.intersection.y, - x2: model.intersection.x + coverLength, - y2: model.intersection.y - }, - style: { - lineWidth: switchWidth, - stroke: style.backgroundColor - } + style: style, + intersectionX: model.intersection.x, + intersectionY: model.intersection.y, + coverLength: coverLength, + lineWidth: switchWidth, + triangle: this.triangle }); - var skewLine = new Line({ - zlevel: this.zlevel, - z: this.z, - silent: true, - shape: { - x1: model.intersection.x, - y1: model.intersection.y, - x2: model.intersection.x + directx * this.triangle.getCotRate() * coverLength, - y2: model.intersection.y + directy * coverLength - }, - style: { - lineWidth: switchWidth, - stroke: style.backgroundColor - } - }); - this.switchView = new Group({name: `${this._code}_SwitchView`}); - this.switchView.add(line); - this.switchView.add(skewLine); halfWidth += 0.3; - var point1 = [model.intersection.x - directx * halfWidth, model.intersection.y + directy * halfWidth]; - var point2 = [point1[0] + directx * switchWidth / this.triangle.getSinRate(), point1[1]]; - var point3 = [point2[0] + directx * this.triangle.getCotRate() * swPadding, point2[1] + directy * swPadding]; - var point4 = [point3[0] + direct * this.triangle.getSin(switchWidth), point3[1] - direct * this.triangle.getCos(switchWidth)]; - + const point1 = [model.intersection.x - directx * halfWidth, model.intersection.y + directy * halfWidth]; + const point2 = [point1[0] + directx * switchWidth / this.triangle.getSinRate(), point1[1]]; + const point3 = [point2[0] + directx * this.triangle.getCotRate() * swPadding, point2[1] + directy * swPadding]; + const point4 = [point3[0] + direct * this.triangle.getSin(switchWidth), point3[1] - direct * this.triangle.getCos(switchWidth)]; this.locShelter = new Polygon({ zlevel: this.zlevel, z: this.z, @@ -97,18 +67,18 @@ export default class Switch extends Group { fill: style.backgroundColor }, cursor: 'pointer', - onmouseover: () => { this.arrowText.show(); }, - onmouseout: () => { this.arrowText.hide(); } + onmouseover: () => { this.name.getArrowText().show(); }, + onmouseout: () => { this.name.getArrowText().hide(); } }); - var lpx = Math.abs(this.triangle.getCos(1)); + const lpx = Math.abs(this.triangle.getCos(1)); this.locShelter.position = [directx * lpx, -directy * 0.2]; this.locShelter.show(); - var slen = switchWidth / this.triangle.getSinRate(); - var rpoint1 = [model.intersection.x + directx * halfWidth, model.intersection.y - directy * halfWidth]; - var rpoint2 = [rpoint1[0] + directx * (swPadding + switchWidth * this.triangle.getCotRate()), rpoint1[1]]; - var rpoint3 = [rpoint2[0], rpoint2[1] + directy * switchWidth]; - var rpoint4 = [rpoint1[0] + this.triangle.getCos(slen), rpoint1[1] + this.triangle.getSin(slen)]; + const slen = switchWidth / this.triangle.getSinRate(); + const rpoint1 = [model.intersection.x + directx * halfWidth, model.intersection.y - directy * halfWidth]; + const rpoint2 = [rpoint1[0] + directx * (swPadding + switchWidth * this.triangle.getCotRate()), rpoint1[1]]; + const rpoint3 = [rpoint2[0], rpoint2[1] + directy * switchWidth]; + const rpoint4 = [rpoint1[0] + this.triangle.getCos(slen), rpoint1[1] + this.triangle.getSin(slen)]; this.relocShelter = new Polygon({ zlevel: this.zlevel, z: this.z, @@ -121,23 +91,23 @@ export default class Switch extends Group { fill: style.backgroundColor }, cursor: 'pointer', - onmouseover: () => { this.arrowText.show(); }, - onmouseout: () => { this.arrowText.hide(); } + onmouseover: () => { this.name.getArrowText().show(); }, + onmouseout: () => { this.name.getArrowText().hide(); } }); - var rpx = Math.abs(this.triangle.getCos(halfWidth)) + 0.2; + const rpx = Math.abs(this.triangle.getCos(halfWidth)) + 0.2; this.relocShelter.position = [-directx * rpx, -directy * 0.2]; this.relocShelter.hide(); - var sinX = style.Section.sectionWidth / this.triangle.getSinRate(); - var switchWidth1 = style.Section.sectionWidth / 2; - var width1 = switchWidth1 * this.triangle.getSinRate(); - var height1 = switchWidth1 * this.triangle.getCosRate(); - var width2 = (height1 + switchWidth1) / this.triangle.getTanRate(); - var width3 = sinX - width2 - width1; - var switchPoint1 = [model.intersection.x + directx * width3, model.intersection.y - directy * switchWidth1]; - var switchPoint2 = [switchPoint1[0] - directx * (width2 + width1) - directx * width3, switchPoint1[1]]; - var switchPoint3 = [model.intersection.x - directx * width3, model.intersection.y + directy * switchWidth1]; - var switchPoint4 = [switchPoint1[0] + directx * (width2 + width1) - directx * width3, switchPoint3[1]]; + const sinX = style.Section.sectionWidth / this.triangle.getSinRate(); + const switchWidth1 = style.Section.sectionWidth / 2; + const width1 = switchWidth1 * this.triangle.getSinRate(); + const height1 = switchWidth1 * this.triangle.getCosRate(); + const width2 = (height1 + switchWidth1) / this.triangle.getTanRate(); + const width3 = sinX - width2 - width1; + const switchPoint1 = [model.intersection.x + directx * width3, model.intersection.y - directy * switchWidth1]; + const switchPoint2 = [switchPoint1[0] - directx * (width2 + width1) - directx * width3, switchPoint1[1]]; + const switchPoint3 = [model.intersection.x - directx * width3, model.intersection.y + directy * switchWidth1]; + const switchPoint4 = [switchPoint1[0] + directx * (width2 + width1) - directx * width3, switchPoint3[1]]; this.reserveSection = new Polygon({ zlevel: this.zlevel, shape: { @@ -149,8 +119,8 @@ export default class Switch extends Group { fill: style.Section.sectionSpareColor }, cursor: 'pointer', - onmouseover: () => { this.arrowText.show(); }, - onmouseout: () => { this.arrowText.hide(); } + onmouseover: () => { this.name.getArrowText().show(); }, + onmouseout: () => { this.name.getArrowText().hide(); } }); this.reserveSection.hide(); @@ -169,89 +139,41 @@ export default class Switch extends Group { } }); - this.add(this.switchView); + const arrowTextX = model.intersection.x + 10; + const arrowTextY = model.intersection.y + 15; + const nameTextX = model.namePosition.x + model.intersection.x + this.triangle.drictx * (style.Section.sectionWidth * 3 + style.Switch.switchNameDistance) * this.triangle.getCotRate(); + const nameTextY = model.namePosition.y + model.intersection.y + this.triangle.dricty * (style.Switch.switchNameDistance); + this.name = new ESwName({ + zlevel: this.zlevel, + z: this.z, + style: style, + arrowTextX: arrowTextX, + arrowTextY: arrowTextY, + nameTextX: nameTextX, + nameTextY: nameTextY, + sectionName: model.sectionName, + name: model.name, + nameShow: model.nameShow, + triangle: this.triangle + }); + + this.add(this.swCore); this.add(this.locShelter); this.add(this.relocShelter); this.add(this.reserveSection); this.add(this.releaseBackground); - } - - /** 道岔名称，显示，响应鼠标事件*/ - createNameText() { - const model = this.model; - const style = this.style; - - this.arrowText = new Text({ - zlevel: this.zlevel, - z: this.z, - position: [0, 0], - style: { - x: model.intersection.x + 10, - y: model.intersection.y + 15, - text: `道岔区段名称: ${model.sectionName}`, - textFill: '#000', - textAlign: 'letf', - textFont: 10 + 'px consolas', - textPadding: 3, - textBackgroundColor: style.Switch.tipBackgroundColor - } - }); - this.arrowText.hide(); - this.add(this.arrowText); - - this.nameText = new Text({ - zlevel: this.zlevel, - z: this.z + 6, - style: { - x: model.namePosition.x + model.intersection.x + this.triangle.drictx * (style.Section.sectionWidth * 3 + style.Switch.switchNameDistance) * this.triangle.getCotRate(), - y: model.namePosition.y + model.intersection.y + this.triangle.dricty * (style.Switch.switchNameDistance), - text: model.name, - textAlign: this.triangle.drictx === 1 ? 'left' : 'right', - textVerticalAlign: this.triangle.dricty === 1 ? 'top' : 'bottom', - textFont: style.textFontSize + 'px ' + style.textFontFormat, - textFill: style.Switch.switchTextLossColor - } - }); - - this.add(this.nameText); - model.nameShow ? this.nameText.show() : this.nameText.hide(); - - const rect = this.nameText.getBoundingRect(); - let textWidth = rect.width * 0.8; - if (this.triangle.drictx !== 1) { - rect.x += rect.width; - textWidth = -textWidth; - } - - this.textRect = new Rect({ - zlevel: this.zlevel, - z: this.z + 5, - silent: true, - shape: { - x: rect.x, - y: rect.y, - width: textWidth, - height: rect.height - }, - style: { - lineWidth: 0, - lineDash: [3, 3], - stroke: style.Switch.switchTextBorderColor, - fill: style.Switch.transparentColor - } - }); - this.add(this.textRect); + this.add(this.name); } /** 名称动画*/ nameTextAnimation() { - this.nameText.animateStyle(true) + this.name.getNameText().animateStyle(true) .when(0, { textFill: this.style.backgroundColor }) .when(1000, { textFill: this.style.Switch.switchTextLossColor }) .when(2000, { textFill: this.style.backgroundColor }) .start(); - this.textRect.animateStyle(true) + this.name.getTextRect().animateStyle(true) .when(0, { textFill: this.style.backgroundColor }) .when(1000, { textFill: this.style.Switch.switchTextBorderColor }) .when(2000, { textFill: this.style.backgroundColor }) @@ -261,37 +183,33 @@ export default class Switch extends Group { /** 设置岔芯是否隐藏*/ setSwitchCoreInvisible(invisible) { if (invisible) { - this.switchView.hide(); + this.swCore.hide(); } else { - this.switchView.show(); + this.swCore.show(); } } /** 设置岔芯颜色*/ setSwitchCoreColor(color) { - this.switchView.eachChild(child => { - child.setStyle({ stroke: color }); - }); + this.swCore.setColor(color); } /** 设置道岔文字颜色*/ setTextColor(color) { - this.nameText.setStyle('textFill', color); + this.name.getNameText().setStyle('textFill', color); } /** 设置道岔文字边框颜色 */ setHasTextBorder(width) { - this.textRect.setStyle('lineWidth', width); + this.name.getTextRect().setStyle('lineWidth', width); } /** 恢复状态*/ recover() { this.setSwitchCoreColor(this.style.backgroundColor); - this.nameText.stopAnimation(false); + this.name.getNameText().stopAnimation(false); this.reserveSection.stopAnimation(false); - this.switchView.eachChild((child) => { - child.stopAnimation(false); - }); + this.swCore.stopAnimation(false); this.relocShelter.hide(); this.releaseBackground.hide(); @@ -341,8 +259,8 @@ export default class Switch extends Group { /** 挤叉*/ setForkAction() { this.setLossAction(true); - this.switchView.eachChild((child) => { - child.animateStyle(true) + this.swCore.animateStyle(item => { + item.animateStyle(true) .when(0, { stroke: this.style.backgroundColor }) .when(1000, { stroke: 'red' }) .when(2000, { stroke: this.style.backgroundColor }) @@ -467,8 +385,8 @@ export default class Switch extends Group { } getShapeTipPoint() { - var rect = null; - rect = this.nameText.getBoundingRect(); + let rect = null; + rect = this.name.getNameText().getBoundingRect(); if (rect) { return { x: rect.x + rect.width / 2, diff --git a/src/views/jmap/index.vue b/src/views/jmap/index.vue index f4ce33152..d14a860e3 100644 --- a/src/views/jmap/index.vue +++ b/src/views/jmap/index.vue @@ -42,7 +42,7 @@ export default { stateLoaded() { console.log('stateLoaded'); }, viewUpdate() { console.log('viewUpdate'); }, stateUpdate() { console.log('stateUpdate'); }, - optionsUpdate() { console.log('optionsUpdate'); } + // optionsUpdate() { console.log('optionsUpdate'); } } });