rt-sim-training-client/src/jmap/shape/LcControl.js

/*
*	lC区域控制模式
*/
import Arc from 'zrender/src/graphic/shape/Arc';
import Rect from 'zrender/src/graphic/shape/Rect';
import Text from 'zrender/src/graphic/Text';
import Group from 'zrender/src/container/Group';

export default class LcControl extends Group {
	constructor({ _code, _type, zlevel, model, state }, style) {
		super({name: _code});
		this.z = 20;
		this._code = _code;
		this._type = _type;
		this.zlevel = zlevel;
		this.model = model;
		this.state = state;
		this.style = style;
		this._create();

		this.on('mouseout', this.mouseleave);
		this.on('mouseover', this.mouseenter);
	}

	_create() {
		const model = this.model;
		const state = this.state;
		this.control = new Arc({
			_subType: 'Control',
			zlevel: this.zlevel,
			z: this.z,
			shape: {
				cx: model.position.x,
				cy: model.position.y,
				r: this.style.zcControlmodeR
			},
			style: {
				lineWidth: 0,
				fill: ''
			}
		});

		this.text = new Text({
			_subType: 'Text',
			zlevel: this.zlevel,
			z: this.z,
			position: [0, 0],
			style: {
				x: model.position.x,
				y: model.position.y + this.style.zcControlmodeR + this.style.nameDistance,
				text: model.name,
				textFill: '',
				textAlign: 'middle',
				textVerticalAlign: 'top',
				textFont: this.style.stationControlTextSize + 'px ' + this.style.textFontFormat
			}
		});

		this.textShadow = new Text({
			zlevel: this.zlevel,
			z: this.z + 1,
			position: [4, -2],
			silent: true,
			style: {
				x: model.position.x,
				y: model.position.y + this.style.zcControlmodeR + this.style.nameDistance,
				text: model.name,
				textFill: this.style.textShadowColor, // 黄色
				textAlign: 'middle',
				textVerticalAlign: 'top',
				textFont: 'bold ' + (this.style.stationControlTextSize + 1) + 'px ' + this.style.textFontFormat
			}
		});
		this.controlBorder = new Rect({
			zlevel: model.zlevel,
			z: this.z - 1,
			silent: true,
			shape: this.control.getBoundingRect(),
			style: {
				lineDash: [3, 3],
				stroke: this.style.borderColor,
				fill: this.style.transparentColor
			}
		});

		this.textBorder = new Rect({
			zlevel: model.zlevel,
			z: this.z - 1,
			silent: true,
			shape: this.text.getBoundingRect(),
			style: {
				lineDash: [3, 3],
				stroke: this.style.borderColor,
				fill: this.style.borderContextBackgroundColor
			}
		});

		this.add(this.control);
		this.add(this.text);
		this.add(this.textShadow);
		this.add(this.textBorder);
		this.add(this.controlBorder);
		this.setState(state);
		this.mouseStateRecover();
	}

	// 设置状态
	setState(state) {}

	getShapeTipPoint() {
		if (this.control) {
			var distance = 2;
			var rect = this.control.getBoundingRect();
			return {
				x: rect.x + rect.width / 2,
				y: rect.y - distance
			};
		}
		return null;
	}

	mouseStateVisible(subType) {
		if (subType == 'Text') {
			this.textShadow.show();
		}

		if (subType == 'Control') {
			this.textBorder.show();
			this.controlBorder.show();
			this.text.setStyle({ textFill: '#000' });
			this.control.setStyle({ fill: this.style.borderContextBackgroundColor });
		}
	}

	mouseStateRecover() {
		this.textShadow.hide();
		this.textBorder.hide();
		this.controlBorder.hide();
		this.text.setStyle({ textFill: '#fff' });
		this.control.setStyle({ fill: this.style.lcControlColor });
		this.setState(this.state);
	}

	mouseenter(e) {
		if (e.target._subType) {
			this.mouseStateRecover();
			this.mouseStateVisible(e.target._subType);
		}
	}

	mouseleave(e) {
		if (e.target._subType) {
			this.mouseStateRecover();
		}
	}
}