From cffefa06c639b467dd08259bf8fbb0512df79268 Mon Sep 17 00:00:00 2001 From: joylink_fanyuhong <18706759286@163.com> Date: Wed, 6 Nov 2024 20:59:43 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BB=A3=E7=A0=81=E6=9A=82=E6=8F=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/drawIcon.svg | 14 +- .../graphics/FAS/FaultValveInteraction.ts | 41 ++++++ .../graphics/FAS/PressureSwitchInteraction.ts | 44 ++++++ .../FAS/StartPumpButtonInteraction.ts | 44 ++++++ src/drawApp/iscsApp.ts | 51 +++++++ src/graphics/FAS/faultValve/FaultValve.ts | 68 +++++++++ .../FAS/faultValve/FaultValveAssistant.ts | 124 +++++++++++++++++ .../FAS/pressureSwitch/PressureSwitch.ts | 68 +++++++++ .../pressureSwitch/PressureSwitchAssistant.ts | 123 +++++++++++++++++ .../FAS/startPumpButton/StartPumpButton.ts | 68 +++++++++ .../StartPumpButtonAssistant.ts | 130 ++++++++++++++++++ src/layouts/IscsDrawLayout.vue | 6 + 12 files changed, 779 insertions(+), 2 deletions(-) create mode 100644 src/drawApp/graphics/FAS/FaultValveInteraction.ts create mode 100644 src/drawApp/graphics/FAS/PressureSwitchInteraction.ts create mode 100644 src/drawApp/graphics/FAS/StartPumpButtonInteraction.ts create mode 100644 src/graphics/FAS/faultValve/FaultValve.ts create mode 100644 src/graphics/FAS/faultValve/FaultValveAssistant.ts create mode 100644 src/graphics/FAS/pressureSwitch/PressureSwitch.ts create mode 100644 src/graphics/FAS/pressureSwitch/PressureSwitchAssistant.ts create mode 100644 src/graphics/FAS/startPumpButton/StartPumpButton.ts create mode 100644 src/graphics/FAS/startPumpButton/StartPumpButtonAssistant.ts diff --git a/public/drawIcon.svg b/public/drawIcon.svg index eace1d7..2bffbfe 100644 --- a/public/drawIcon.svg +++ b/public/drawIcon.svg @@ -140,14 +140,24 @@ - + - + + + + + + + + + + + diff --git a/src/drawApp/graphics/FAS/FaultValveInteraction.ts b/src/drawApp/graphics/FAS/FaultValveInteraction.ts new file mode 100644 index 0000000..3bf8179 --- /dev/null +++ b/src/drawApp/graphics/FAS/FaultValveInteraction.ts @@ -0,0 +1,41 @@ +import * as pb_1 from 'google-protobuf'; +import { GraphicDataBase } from '../GraphicDataBase'; +import { + FaultValve, + IFaultValveData, +} from 'src/graphics/FAS/faultValve/FaultValve'; +import { iscsGraphicData } from 'src/protos/iscs_graphic_data'; + +export class FaultValveData extends GraphicDataBase implements IFaultValveData { + constructor(data?: iscsGraphicData.FaultValve) { + let faultValve; + if (data) { + faultValve = data; + } else { + faultValve = new iscsGraphicData.FaultValve({ + common: GraphicDataBase.defaultCommonInfo(FaultValve.Type), + }); + } + super(faultValve); + } + + public get data(): iscsGraphicData.FaultValve { + return this.getData(); + } + + get code(): string { + return this.data.code; + } + set code(v: string) { + this.data.code = v; + } + clone(): FaultValveData { + return new FaultValveData(this.data.cloneMessage()); + } + copyFrom(data: FaultValveData): void { + pb_1.Message.copyInto(data.data, this.data); + } + eq(other: FaultValveData): boolean { + return pb_1.Message.equals(this.data, other.data); + } +} diff --git a/src/drawApp/graphics/FAS/PressureSwitchInteraction.ts b/src/drawApp/graphics/FAS/PressureSwitchInteraction.ts new file mode 100644 index 0000000..02b8f19 --- /dev/null +++ b/src/drawApp/graphics/FAS/PressureSwitchInteraction.ts @@ -0,0 +1,44 @@ +import * as pb_1 from 'google-protobuf'; +import { GraphicDataBase } from '../GraphicDataBase'; +import { + PressureSwitch, + IPressureSwitchData, +} from 'src/graphics/FAS/pressureSwitch/PressureSwitch'; +import { iscsGraphicData } from 'src/protos/iscs_graphic_data'; + +export class PressureSwitchData + extends GraphicDataBase + implements IPressureSwitchData +{ + constructor(data?: iscsGraphicData.PressureSwitch) { + let pressureSwitch; + if (data) { + pressureSwitch = data; + } else { + pressureSwitch = new iscsGraphicData.PressureSwitch({ + common: GraphicDataBase.defaultCommonInfo(PressureSwitch.Type), + }); + } + super(pressureSwitch); + } + + public get data(): iscsGraphicData.PressureSwitch { + return this.getData(); + } + + get code(): string { + return this.data.code; + } + set code(v: string) { + this.data.code = v; + } + clone(): PressureSwitchData { + return new PressureSwitchData(this.data.cloneMessage()); + } + copyFrom(data: PressureSwitchData): void { + pb_1.Message.copyInto(data.data, this.data); + } + eq(other: PressureSwitchData): boolean { + return pb_1.Message.equals(this.data, other.data); + } +} diff --git a/src/drawApp/graphics/FAS/StartPumpButtonInteraction.ts b/src/drawApp/graphics/FAS/StartPumpButtonInteraction.ts new file mode 100644 index 0000000..90220aa --- /dev/null +++ b/src/drawApp/graphics/FAS/StartPumpButtonInteraction.ts @@ -0,0 +1,44 @@ +import * as pb_1 from 'google-protobuf'; +import { GraphicDataBase } from '../GraphicDataBase'; +import { + StartPumpButton, + IStartPumpButtonData, +} from 'src/graphics/FAS/startPumpButton/StartPumpButton'; +import { iscsGraphicData } from 'src/protos/iscs_graphic_data'; + +export class StartPumpButtonData + extends GraphicDataBase + implements IStartPumpButtonData +{ + constructor(data?: iscsGraphicData.StartPumpButton) { + let startPumpButton; + if (data) { + startPumpButton = data; + } else { + startPumpButton = new iscsGraphicData.StartPumpButton({ + common: GraphicDataBase.defaultCommonInfo(StartPumpButton.Type), + }); + } + super(startPumpButton); + } + + public get data(): iscsGraphicData.StartPumpButton { + return this.getData(); + } + + get code(): string { + return this.data.code; + } + set code(v: string) { + this.data.code = v; + } + clone(): StartPumpButtonData { + return new StartPumpButtonData(this.data.cloneMessage()); + } + copyFrom(data: StartPumpButtonData): void { + pb_1.Message.copyInto(data.data, this.data); + } + eq(other: StartPumpButtonData): boolean { + return pb_1.Message.equals(this.data, other.data); + } +} diff --git a/src/drawApp/iscsApp.ts b/src/drawApp/iscsApp.ts index db1a59f..7c58f37 100644 --- a/src/drawApp/iscsApp.ts +++ b/src/drawApp/iscsApp.ts @@ -110,6 +110,24 @@ import { SignalButterflyValveTemplate, } from 'src/graphics/FAS/signalButterflyValve/SignalButterflyValve'; import { SignalButterflyValveData } from './graphics/FAS/SignalButterflyValveInteraction'; +import { PressureSwitchDraw } from 'src/graphics/FAS/pressureSwitch/PressureSwitchAssistant'; +import { + PressureSwitch, + PressureSwitchTemplate, +} from 'src/graphics/FAS/pressureSwitch/PressureSwitch'; +import { PressureSwitchData } from './graphics/FAS/PressureSwitchInteraction'; +import { FaultValveDraw } from 'src/graphics/FAS/faultValve/FaultValveAssistant'; +import { + FaultValve, + FaultValveTemplate, +} from 'src/graphics/FAS/faultValve/FaultValve'; +import { FaultValveData } from './graphics/FAS/FaultValveInteraction'; +import { StartPumpButtonDraw } from 'src/graphics/FAS/startPumpButton/StartPumpButtonAssistant'; +import { + StartPumpButton, + StartPumpButtonTemplate, +} from 'src/graphics/FAS/startPumpButton/StartPumpButton'; +import { StartPumpButtonData } from './graphics/FAS/StartPumpButtonInteraction'; // import { getOnlyToken } from 'src/configs/TokenManage'; let drawApp: IDrawApp | null = null; @@ -187,6 +205,15 @@ export function initIscsDrawApp(): IDrawApp { app, new SignalButterflyValveTemplate(new SignalButterflyValveData()) ); + new PressureSwitchDraw( + app, + new PressureSwitchTemplate(new PressureSwitchData()) + ); + new FaultValveDraw(app, new FaultValveTemplate(new FaultValveData())); + new StartPumpButtonDraw( + app, + new StartPumpButtonTemplate(new StartPumpButtonData()) + ); app.addKeyboardListener( new KeyListener({ @@ -406,6 +433,15 @@ export async function loadDrawDatas(): Promise { datas.push(new SignalButterflyValveData(signalButterflyValve)); } ); + fasOfPlatformAlarm.pressureSwitches.forEach((pressureSwitch) => { + datas.push(new PressureSwitchData(pressureSwitch)); + }); + fasOfPlatformAlarm.faultValves.forEach((faultValve) => { + datas.push(new FaultValveData(faultValve)); + }); + fasOfPlatformAlarm.startPumpButtons.forEach((startPumpButton) => { + datas.push(new StartPumpButtonData(startPumpButton)); + }); break; } } @@ -582,6 +618,21 @@ export function saveDrawDatas(app: IDrawApp) { fasStorage.signalButterflyValves.push( (signalButterflyValveData as SignalButterflyValveData).data ); + } else if (g instanceof PressureSwitch) { + const pressureSwitchData = g.saveData(); + fasStorage.pressureSwitches.push( + (pressureSwitchData as PressureSwitchData).data + ); + } else if (g instanceof FaultValve) { + const faultValveData = g.saveData(); + fasStorage.faultValves.push( + (faultValveData as FaultValveData).data + ); + } else if (g instanceof StartPumpButton) { + const startPumpButtonData = g.saveData(); + fasStorage.startPumpButtons.push( + (startPumpButtonData as StartPumpButtonData).data + ); } }); storage.fasOfPlatformAlarmStorages[i] = fasStorage; diff --git a/src/graphics/FAS/faultValve/FaultValve.ts b/src/graphics/FAS/faultValve/FaultValve.ts new file mode 100644 index 0000000..a812a8d --- /dev/null +++ b/src/graphics/FAS/faultValve/FaultValve.ts @@ -0,0 +1,68 @@ +import { GraphicData, JlGraphic, JlGraphicTemplate } from 'jl-graphic'; +import { Assets, Sprite, Spritesheet, Texture } from 'pixi.js'; +import FasDeviceJson from '../pndDevice/PngDevice.json'; +import FasDeviceAssets from '../pndDevice/FasDevice.png'; + +export interface IFaultValveData extends GraphicData { + get code(): string; + set code(v: string); +} + +interface FaultValveTextures { + normal: Texture; + run: Texture; + fault: Texture; + interruption: Texture; +} + +export class FaultValve extends JlGraphic { + static Type = 'FaultValve'; + _faultValve: Sprite; + faultValveTextures: FaultValveTextures; + __state = 0; + + constructor(faultValveTextures: FaultValveTextures) { + super(FaultValve.Type); + this._faultValve = new Sprite(); + this.faultValveTextures = faultValveTextures; + this._faultValve.anchor.set(0.5); + this.addChild(this._faultValve); + this._faultValve.texture = this.faultValveTextures.normal; + } + get code(): string { + return this.datas.code; + } + get datas(): IFaultValveData { + return this.getDatas(); + } + + doRepaint(): void {} +} + +export class FaultValveTemplate extends JlGraphicTemplate { + faultValveTextures?: FaultValveTextures; + constructor(dataTemplate: IFaultValveData) { + super(FaultValve.Type, { dataTemplate }); + this.loadAssets(); + } + new(): FaultValve { + if (this.faultValveTextures) { + const g = new FaultValve(this.faultValveTextures); + g.loadData(this.datas); + return g; + } + throw new Error('资源未加载/加载失败'); + } + async loadAssets(): Promise { + const texture = await Assets.load(FasDeviceAssets); + const faultValveSheet = new Spritesheet(texture, FasDeviceJson); + const result = await faultValveSheet.parse(); + this.faultValveTextures = { + normal: result['faultValveNormal.png'], + run: result['faultValveRun.png'], + fault: result['faultValveFault.png'], + interruption: result['faultValveInterruption.png'], + }; + return this.faultValveTextures as FaultValveTextures; + } +} diff --git a/src/graphics/FAS/faultValve/FaultValveAssistant.ts b/src/graphics/FAS/faultValve/FaultValveAssistant.ts new file mode 100644 index 0000000..bdecc78 --- /dev/null +++ b/src/graphics/FAS/faultValve/FaultValveAssistant.ts @@ -0,0 +1,124 @@ +import { DisplayObject, FederatedMouseEvent, Point } from 'pixi.js'; +import { + AbsorbableLine, + AbsorbablePosition, + GraphicDrawAssistant, + GraphicInteractionPlugin, + GraphicTransformEvent, + IDrawApp, + JlGraphic, +} from 'jl-graphic'; +import { FaultValve, IFaultValveData, FaultValveTemplate } from './FaultValve'; + +export class FaultValveDraw extends GraphicDrawAssistant< + FaultValveTemplate, + IFaultValveData +> { + _faultValve: FaultValve | null = null; + constructor(app: IDrawApp, template: FaultValveTemplate) { + super( + app, + template, + 'svguse:../drawIcon.svg#icon-pressure-switch', + '故障阀' + ); + FaultValveInteraction.init(app); + } + + bind(): void { + super.bind(); + if (!this._faultValve) { + this._faultValve = this.graphicTemplate.new(); + this.container.addChild(this._faultValve); + } + } + + public get faultValve(): FaultValve { + if (!this._faultValve) { + this._faultValve = this.graphicTemplate.new(); + this.container.addChild(this._faultValve); + } + return this._faultValve; + } + + redraw(cp: Point): void { + this.faultValve.position.copyFrom(cp); + } + onLeftUp(e: FederatedMouseEvent): void { + this.faultValve.position.copyFrom(this.toCanvasCoordinates(e.global)); + this.createAndStore(true); + } + prepareData(data: IFaultValveData): boolean { + data.transform = this.faultValve.saveTransform(); + return true; + } + onEsc(): void { + this.finish(); + } +} + +/** + * 构建吸附线 + * @param faultValve + */ +function buildAbsorbablePositions( + faultValve: FaultValve +): AbsorbablePosition[] { + const aps: AbsorbablePosition[] = []; + const faultValves = faultValve.queryStore.queryByType( + FaultValve.Type + ); + const canvas = faultValve.getCanvas(); + faultValves.forEach((item) => { + if (item.id === faultValve.id) { + return; + } + const ala = new AbsorbableLine( + new Point(item.x, 0), + new Point(item.x, canvas.height) + ); + const alb = new AbsorbableLine( + new Point(0, item.y), + new Point(canvas.width, item.y) + ); + aps.push(ala); + aps.push(alb); + }); + + return aps; +} + +export class FaultValveInteraction extends GraphicInteractionPlugin { + static Name = 'fault_valve_transform'; + constructor(app: IDrawApp) { + super(FaultValveInteraction.Name, app); + } + static init(app: IDrawApp) { + return new FaultValveInteraction(app); + } + filter(...grahpics: JlGraphic[]): FaultValve[] | undefined { + return grahpics + .filter((g) => g.type === FaultValve.Type) + .map((g) => g as FaultValve); + } + bind(g: FaultValve): void { + g.eventMode = 'static'; + g.cursor = 'pointer'; + g.scalable = true; + g.rotatable = true; + g.on('transformstart', this.transformstart, this); + } + unbind(g: FaultValve): void { + g.eventMode = 'none'; + g.scalable = false; + g.rotatable = false; + g.off('transformstart', this.transformstart, this); + } + transformstart(e: GraphicTransformEvent) { + const target = e.target as DisplayObject; + const faultValve = target.getGraphic() as FaultValve; + faultValve.getGraphicApp().setOptions({ + absorbablePositions: buildAbsorbablePositions(faultValve), + }); + } +} diff --git a/src/graphics/FAS/pressureSwitch/PressureSwitch.ts b/src/graphics/FAS/pressureSwitch/PressureSwitch.ts new file mode 100644 index 0000000..f2316ab --- /dev/null +++ b/src/graphics/FAS/pressureSwitch/PressureSwitch.ts @@ -0,0 +1,68 @@ +import { GraphicData, JlGraphic, JlGraphicTemplate } from 'jl-graphic'; +import { Assets, Sprite, Spritesheet, Texture } from 'pixi.js'; +import FasDeviceJson from '../pndDevice/PngDevice.json'; +import FasDeviceAssets from '../pndDevice/FasDevice.png'; + +export interface IPressureSwitchData extends GraphicData { + get code(): string; + set code(v: string); +} + +interface PressureSwitchTextures { + normal: Texture; + run: Texture; + fault: Texture; + interruption: Texture; +} + +export class PressureSwitch extends JlGraphic { + static Type = 'PressureSwitch'; + _pressureSwitch: Sprite; + pressureSwitchTextures: PressureSwitchTextures; + __state = 0; + + constructor(pressureSwitchTextures: PressureSwitchTextures) { + super(PressureSwitch.Type); + this._pressureSwitch = new Sprite(); + this.pressureSwitchTextures = pressureSwitchTextures; + this._pressureSwitch.anchor.set(0.5); + this.addChild(this._pressureSwitch); + this._pressureSwitch.texture = this.pressureSwitchTextures.normal; + } + get code(): string { + return this.datas.code; + } + get datas(): IPressureSwitchData { + return this.getDatas(); + } + + doRepaint(): void {} +} + +export class PressureSwitchTemplate extends JlGraphicTemplate { + pressureSwitchTextures?: PressureSwitchTextures; + constructor(dataTemplate: IPressureSwitchData) { + super(PressureSwitch.Type, { dataTemplate }); + this.loadAssets(); + } + new(): PressureSwitch { + if (this.pressureSwitchTextures) { + const g = new PressureSwitch(this.pressureSwitchTextures); + g.loadData(this.datas); + return g; + } + throw new Error('资源未加载/加载失败'); + } + async loadAssets(): Promise { + const texture = await Assets.load(FasDeviceAssets); + const pressureSwitchSheet = new Spritesheet(texture, FasDeviceJson); + const result = await pressureSwitchSheet.parse(); + this.pressureSwitchTextures = { + normal: result['pressureSwitchNormal.png'], + run: result['pressureSwitchRun.png'], + fault: result['pressureSwitchFault.png'], + interruption: result['pressureSwitchInterruption.png'], + }; + return this.pressureSwitchTextures as PressureSwitchTextures; + } +} diff --git a/src/graphics/FAS/pressureSwitch/PressureSwitchAssistant.ts b/src/graphics/FAS/pressureSwitch/PressureSwitchAssistant.ts new file mode 100644 index 0000000..9406eb0 --- /dev/null +++ b/src/graphics/FAS/pressureSwitch/PressureSwitchAssistant.ts @@ -0,0 +1,123 @@ +import { DisplayObject, FederatedMouseEvent, Point } from 'pixi.js'; +import { + AbsorbableLine, + AbsorbablePosition, + GraphicDrawAssistant, + GraphicInteractionPlugin, + GraphicTransformEvent, + IDrawApp, + JlGraphic, +} from 'jl-graphic'; +import { + IPressureSwitchData, + PressureSwitch, + PressureSwitchTemplate, +} from './PressureSwitch'; + +export class PressureSwitchDraw extends GraphicDrawAssistant< + PressureSwitchTemplate, + IPressureSwitchData +> { + _pressureSwitch: PressureSwitch | null = null; + constructor(app: IDrawApp, template: PressureSwitchTemplate) { + super(app, template, 'svguse:../drawIcon.svg#icon-fault-valve', '压力开关'); + PressureSwitchInteraction.init(app); + } + + bind(): void { + super.bind(); + if (!this._pressureSwitch) { + this._pressureSwitch = this.graphicTemplate.new(); + this.container.addChild(this._pressureSwitch); + } + } + + public get pressureSwitch(): PressureSwitch { + if (!this._pressureSwitch) { + this._pressureSwitch = this.graphicTemplate.new(); + this.container.addChild(this._pressureSwitch); + } + return this._pressureSwitch; + } + + redraw(cp: Point): void { + this.pressureSwitch.position.copyFrom(cp); + } + onLeftUp(e: FederatedMouseEvent): void { + this.pressureSwitch.position.copyFrom(this.toCanvasCoordinates(e.global)); + this.createAndStore(true); + } + prepareData(data: IPressureSwitchData): boolean { + data.transform = this.pressureSwitch.saveTransform(); + return true; + } + onEsc(): void { + this.finish(); + } +} + +/** + * 构建吸附线 + * @param pressureSwitch + */ +function buildAbsorbablePositions( + pressureSwitch: PressureSwitch +): AbsorbablePosition[] { + const aps: AbsorbablePosition[] = []; + const pressureSwitchs = pressureSwitch.queryStore.queryByType( + PressureSwitch.Type + ); + const canvas = pressureSwitch.getCanvas(); + pressureSwitchs.forEach((item) => { + if (item.id === pressureSwitch.id) { + return; + } + const ala = new AbsorbableLine( + new Point(item.x, 0), + new Point(item.x, canvas.height) + ); + const alb = new AbsorbableLine( + new Point(0, item.y), + new Point(canvas.width, item.y) + ); + aps.push(ala); + aps.push(alb); + }); + + return aps; +} + +export class PressureSwitchInteraction extends GraphicInteractionPlugin { + static Name = 'pressure_switch_transform'; + constructor(app: IDrawApp) { + super(PressureSwitchInteraction.Name, app); + } + static init(app: IDrawApp) { + return new PressureSwitchInteraction(app); + } + filter(...grahpics: JlGraphic[]): PressureSwitch[] | undefined { + return grahpics + .filter((g) => g.type === PressureSwitch.Type) + .map((g) => g as PressureSwitch); + } + bind(g: PressureSwitch): void { + g.eventMode = 'static'; + g.cursor = 'pointer'; + g.scalable = true; + g.rotatable = true; + g.on('transformstart', this.transformstart, this); + } + unbind(g: PressureSwitch): void { + g.eventMode = 'none'; + g.scalable = false; + g.rotatable = false; + g.off('transformstart', this.transformstart, this); + } + transformstart(e: GraphicTransformEvent) { + const target = e.target as DisplayObject; + const pressureSwitch = target.getGraphic() as PressureSwitch; + pressureSwitch.getGraphicApp().setOptions({ + absorbablePositions: buildAbsorbablePositions(pressureSwitch), + }); + } +} diff --git a/src/graphics/FAS/startPumpButton/StartPumpButton.ts b/src/graphics/FAS/startPumpButton/StartPumpButton.ts new file mode 100644 index 0000000..37b36eb --- /dev/null +++ b/src/graphics/FAS/startPumpButton/StartPumpButton.ts @@ -0,0 +1,68 @@ +import { + GraphicData, + JlGraphic, + JlGraphicTemplate, + VectorText, +} from 'jl-graphic'; +import { Graphics } from 'pixi.js'; + +export interface IStartPumpButtonData extends GraphicData { + get code(): string; + set code(v: string); +} + +const startPumpConsts = { + circleR: 32, + circleBackground: '0x99ccff', + textColor: '0x33cc00', + text: 'ON', + fontSize: 18, +}; + +export class StartPumpButton extends JlGraphic { + static Type = 'StartPumpButton'; + circleGraphic: Graphics = new Graphics(); + textGraphic: VectorText = new VectorText(); + + constructor() { + super(StartPumpButton.Type); + this.addChild(this.circleGraphic); + this.addChild(this.textGraphic); + } + get code(): string { + return this.datas.code; + } + get datas(): IStartPumpButtonData { + return this.getDatas(); + } + + doRepaint(): void { + const circleGraphic = this.circleGraphic; + circleGraphic.clear(); + circleGraphic.beginFill(startPumpConsts.circleBackground); + circleGraphic.drawCircle(0, 0, startPumpConsts.circleR); + circleGraphic.endFill(); + + this.textGraphic.text = startPumpConsts.text; + this.textGraphic.setVectorFontSize(startPumpConsts.fontSize); + this.textGraphic.anchor.set(0.5); + this.textGraphic.style.fill = startPumpConsts.textColor; + this.textGraphic.position.set( + startPumpConsts.circleR / 2, + startPumpConsts.circleR / 2 + ); + } +} + +export class StartPumpButtonTemplate extends JlGraphicTemplate { + constructor(dataTemplate: IStartPumpButtonData) { + super(StartPumpButton.Type, { + dataTemplate, + }); + } + new(): StartPumpButton { + const startPumpButton = new StartPumpButton(); + startPumpButton.loadData(this.datas); + return startPumpButton; + } +} diff --git a/src/graphics/FAS/startPumpButton/StartPumpButtonAssistant.ts b/src/graphics/FAS/startPumpButton/StartPumpButtonAssistant.ts new file mode 100644 index 0000000..9c5a331 --- /dev/null +++ b/src/graphics/FAS/startPumpButton/StartPumpButtonAssistant.ts @@ -0,0 +1,130 @@ +import { DisplayObject, FederatedMouseEvent, Point } from 'pixi.js'; +import { + AbsorbableLine, + AbsorbablePosition, + GraphicDrawAssistant, + GraphicInteractionPlugin, + GraphicTransformEvent, + IDrawApp, + JlGraphic, +} from 'jl-graphic'; +import { + IStartPumpButtonData, + StartPumpButton, + StartPumpButtonTemplate, +} from './StartPumpButton'; + +export class StartPumpButtonDraw extends GraphicDrawAssistant< + StartPumpButtonTemplate, + IStartPumpButtonData +> { + _startPumpButton: StartPumpButton | null = null; + constructor(app: IDrawApp, template: StartPumpButtonTemplate) { + super( + app, + template, + 'svguse:../drawIcon.svg#icon-start-pump-button', + '启泵按钮' + ); + StartPumpButtonInteraction.init(app); + } + + bind(): void { + super.bind(); + if (!this._startPumpButton) { + this._startPumpButton = this.graphicTemplate.new(); + this.container.addChild(this._startPumpButton); + this._startPumpButton.doRepaint(); + } + } + + public get startPumpButton(): StartPumpButton { + if (!this._startPumpButton) { + this._startPumpButton = this.graphicTemplate.new(); + this.container.addChild(this._startPumpButton); + } + return this._startPumpButton; + } + + redraw(cp: Point): void { + this.startPumpButton.position.copyFrom(cp); + } + onLeftUp(e: FederatedMouseEvent): void { + this.startPumpButton.position.copyFrom(this.toCanvasCoordinates(e.global)); + this.createAndStore(true); + } + prepareData(data: IStartPumpButtonData): boolean { + data.transform = this.startPumpButton.saveTransform(); + return true; + } + onEsc(): void { + this.finish(); + } +} + +/** + * 构建吸附线 + * @param startPumpButton + */ +function buildAbsorbablePositions( + startPumpButton: StartPumpButton +): AbsorbablePosition[] { + const aps: AbsorbablePosition[] = []; + const startPumpButtons = + startPumpButton.queryStore.queryByType( + StartPumpButton.Type + ); + const canvas = startPumpButton.getCanvas(); + startPumpButtons.forEach((item) => { + if (item.id === startPumpButton.id) { + return; + } + const ala = new AbsorbableLine( + new Point(item.x, 0), + new Point(item.x, canvas.height) + ); + const alb = new AbsorbableLine( + new Point(0, item.y), + new Point(canvas.width, item.y) + ); + aps.push(ala); + aps.push(alb); + }); + + return aps; +} + +export class StartPumpButtonInteraction extends GraphicInteractionPlugin { + static Name = 'start_pump_button_transform'; + constructor(app: IDrawApp) { + super(StartPumpButtonInteraction.Name, app); + } + static init(app: IDrawApp) { + return new StartPumpButtonInteraction(app); + } + filter(...grahpics: JlGraphic[]): StartPumpButton[] | undefined { + return grahpics + .filter((g) => g.type === StartPumpButton.Type) + .map((g) => g as StartPumpButton); + } + bind(g: StartPumpButton): void { + g.eventMode = 'static'; + g.cursor = 'pointer'; + g.scalable = true; + g.rotatable = true; + g.on('transformstart', this.transformstart, this); + } + unbind(g: StartPumpButton): void { + g.eventMode = 'none'; + g.scalable = false; + g.rotatable = false; + g.off('transformstart', this.transformstart, this); + } + transformstart(e: GraphicTransformEvent) { + const target = e.target as DisplayObject; + const startPumpButton = target.getGraphic() as StartPumpButton; + startPumpButton.getGraphicApp().setOptions({ + absorbablePositions: buildAbsorbablePositions(startPumpButton), + }); + } +} diff --git a/src/layouts/IscsDrawLayout.vue b/src/layouts/IscsDrawLayout.vue index 5b80422..82384b2 100644 --- a/src/layouts/IscsDrawLayout.vue +++ b/src/layouts/IscsDrawLayout.vue @@ -333,6 +333,9 @@ import { Afc } from 'src/graphics/FAS/afc/Afc'; import { NonFirePowerSupply } from 'src/graphics/FAS/nonFirePowerSupply/NonFirePowerSupply'; import { WaterFlowIndicator } from 'src/graphics/FAS/waterFlowIndicator/WaterFlowIndicator'; import { SignalButterflyValve } from 'src/graphics/FAS/signalButterflyValve/SignalButterflyValve'; +import { PressureSwitch } from 'src/graphics/FAS/pressureSwitch/PressureSwitch'; +import { FaultValve } from 'src/graphics/FAS/faultValve/FaultValve'; +import { StartPumpButton } from 'src/graphics/FAS/startPumpButton/StartPumpButton'; const $q = useQuasar(); const route = useRoute(); @@ -431,6 +434,9 @@ function handleUtilsOption() { drawAssistantsTypes.push(NonFirePowerSupply.Type); drawAssistantsTypes.push(WaterFlowIndicator.Type); drawAssistantsTypes.push(SignalButterflyValve.Type); + drawAssistantsTypes.push(PressureSwitch.Type); + drawAssistantsTypes.push(FaultValve.Type); + drawAssistantsTypes.push(StartPumpButton.Type); break; } drawAssistantsTypes.forEach((type) => {