diff --git a/src/components/draw-app/dialogs/BatchBuildRelayCabinetOrRelay.vue b/src/components/draw-app/dialogs/BatchBuildRelayCabinetOrRelay.vue index c8e3960..3410d13 100644 --- a/src/components/draw-app/dialogs/BatchBuildRelayCabinetOrRelay.vue +++ b/src/components/draw-app/dialogs/BatchBuildRelayCabinetOrRelay.vue @@ -44,36 +44,18 @@ import { import { containBoth } from 'src/graphics/relayCabinet/RelayCabinetDrawAssistant'; import { GraphicIdGenerator } from 'src/jl-graphic'; import { useRelayCabinetStore } from 'src/stores/relayCabinet-store'; -import { onMounted, reactive, ref, watch } from 'vue'; +import { ref } from 'vue'; const relayCabinetStore = useRelayCabinetStore(); -const relayCabinetModel = reactive(new RelayCabinetData()); const oneClickRelayCabinets = ref(1); -const oneClickRelays = ref(32); - -relayCabinetStore.$subscribe; -watch( - () => relayCabinetStore.selectedGraphic, - (val) => { - if (val && val.type == RelayCabinet.Type) { - relayCabinetModel.copyFrom(val.saveData() as RelayCabinetData); - } - } -); - -onMounted(() => { - const RelayCabinet = relayCabinetStore.selectedGraphic as RelayCabinet; - if (RelayCabinet) { - relayCabinetModel.copyFrom(RelayCabinet.saveData()); - } -}); +const oneClickRelays = ref(110); function oneClickRelayCabinet(direction: number) { - const selectRelayCabinet = relayCabinetStore.selectedGraphic as RelayCabinet; - if (selectRelayCabinet) { - let offsetX = 300; + const selectRelayCabinet = relayCabinetStore.selectedGraphic; + if (selectRelayCabinet && selectRelayCabinet instanceof RelayCabinet) { + let offsetX = relayCabinetConsts.width + 80; if (direction == -1) { - offsetX = -300; + offsetX = -offsetX; } const relayCabinets: RelayCabinet[] = []; for (let i = 0; i < oneClickRelayCabinets.value; i++) { @@ -92,26 +74,33 @@ function oneClickRelayCabinet(direction: number) { } function oneClickRelay() { - const relayCabinet = relayCabinetStore.selectedGraphic as RelayCabinet; - if (relayCabinet) { + const relayCabinet = relayCabinetStore.selectedGraphic; + if (relayCabinet && relayCabinet instanceof RelayCabinet) { const containRelays = relayCabinet.queryStore .queryByType(Relay.Type) .filter((g) => containBoth(relayCabinet, g)); if (!containRelays.length) { - const numRows = 4; - const numCols = Math.ceil(oneClickRelays.value / numRows); - const remainder = oneClickRelays.value % numRows; + const numRows = 12; + const numCols = Math.ceil((oneClickRelays.value + 22) / numRows); + const remainder = (oneClickRelays.value + 22) % numRows; const relays: Relay[][] = new Array(numRows); for (let i = 0; i < numRows; i++) { relays[i] = new Array(numCols); for (let j = 0; j < numCols; j++) { if (j == numCols - 1 && remainder !== 0 && i >= remainder) break; + if (i == 0 || j == 0) { + continue; + } const relay = new Relay(); relay.loadData(new RelayData()); relay.id = GraphicIdGenerator.next(); relay.position.set( - relayCabinet.x - relayCabinetConsts.width / 2 + 30 + i * 47, - relayCabinet.y - relayCabinetConsts.height / 2 + 30 + j * 49 + relayCabinet.x - + relayCabinetConsts.width / 2 + + (i + 1 / 2) * relayCabinetConsts.cellWidth, + relayCabinet.y - + relayCabinetConsts.height / 2 + + (j + 1 / 2) * relayCabinetConsts.cellHeight ); relays[i][j] = relay; } diff --git a/src/graphics/relay/Relay.ts b/src/graphics/relay/Relay.ts index 6965d60..6880991 100644 --- a/src/graphics/relay/Relay.ts +++ b/src/graphics/relay/Relay.ts @@ -15,7 +15,7 @@ export interface IRelayData extends GraphicData { } export const relayConsts = { - radius: 15, + radius: 8, lineWidth: 3, lineColor: '0xff0000', }; @@ -43,7 +43,7 @@ export class Relay extends JlGraphic { if (labelPosition) { this.labelGraphic.position.set(labelPosition.x, labelPosition.y); } else { - this.labelGraphic.position.set(0, 25); + this.labelGraphic.position.set(0, 20); } const relayGraphic = this.relayGraphic; relayGraphic diff --git a/src/graphics/relay/RelayDrawAssistant.ts b/src/graphics/relay/RelayDrawAssistant.ts index 4016ee2..bf1db73 100644 --- a/src/graphics/relay/RelayDrawAssistant.ts +++ b/src/graphics/relay/RelayDrawAssistant.ts @@ -4,7 +4,7 @@ import { AbsorbablePosition, GraphicDrawAssistant, GraphicInteractionPlugin, - JlDrawApp, + IDrawApp, JlGraphic, } from 'src/jl-graphic'; @@ -17,7 +17,7 @@ export interface IRelayDrawOptions { export class RelayDraw extends GraphicDrawAssistant { relayGraphic: Relay; - constructor(app: JlDrawApp, template: RelayTemplate) { + constructor(app: IDrawApp, template: RelayTemplate) { super(app, template, 'sym_o_circle', '继电器Relay'); this.relayGraphic = this.graphicTemplate.new(); this.container.addChild(this.relayGraphic); @@ -69,10 +69,10 @@ function buildAbsorbablePositions(relayCabinet: Relay): AbsorbablePosition[] { export class relayInteraction extends GraphicInteractionPlugin { static Name = 'relay_transform'; - constructor(app: JlDrawApp) { + constructor(app: IDrawApp) { super(relayInteraction.Name, app); } - static init(app: JlDrawApp) { + static init(app: IDrawApp) { return new relayInteraction(app); } filter(...grahpics: JlGraphic[]): Relay[] | undefined { diff --git a/src/graphics/relayCabinet/RelayCabinet.ts b/src/graphics/relayCabinet/RelayCabinet.ts index 63bfba7..9599291 100644 --- a/src/graphics/relayCabinet/RelayCabinet.ts +++ b/src/graphics/relayCabinet/RelayCabinet.ts @@ -1,4 +1,4 @@ -import { Color, Graphics, Rectangle } from 'pixi.js'; +import { Color, Container, Graphics, Rectangle } from 'pixi.js'; import { GraphicData, JlGraphic, @@ -16,21 +16,28 @@ export interface IRelayCabinetData extends GraphicData { } export const relayCabinetConsts = { - width: 200, - height: 406, + width: 600, + height: 715, lineWidth: 3, lineColor: '0x0fe81f', + cellWidth: 50, + cellHeight: 65, + cellLineWidth: 1, }; export class RelayCabinet extends JlGraphic { static Type = 'RelayCabinet'; relayCabinetGraphic: Graphics = new Graphics(); + cellGraphic: Container = new Container(); + posText: Container = new Container(); labelGraphic = new VectorText(); constructor() { super(RelayCabinet.Type); this.addChild(this.relayCabinetGraphic); this.setTextGraphic(this.labelGraphic, 'label'); this.addChild(this.labelGraphic); + this.addChild(this.cellGraphic); + this.addChild(this.posText); } get datas(): IRelayCabinetData { @@ -66,6 +73,56 @@ export class RelayCabinet extends JlGraphic { relayCabinetConsts.height ); relayCabinetGraphic.pivot = getRectangleCenter(rectP); + this.batchBuild(); + } + batchBuild() { + this.cellGraphic.children.forEach((rect) => { + (rect as Graphics).destroy(); + }); + const numRows = 12; + const numCols = 11; + const relays = new Array(numRows); + for (let i = 0; i < numRows; i++) { + relays[i] = new Array(numCols); + for (let j = 0; j < numCols; j++) { + if (i == 0 || j == 0) { + const text = new VectorText(); + text.setVectorFontSize(14); + text.style.fill = '#0f0'; + text.anchor.set(0.5); + if (i == 0 && j == 0) { + text.text = '位置'; + } else { + text.text = i == 0 ? numCols - j : i; + } + text.position.set( + -relayCabinetConsts.width / 2 + + (i + 1 / 2) * relayCabinetConsts.cellWidth, + -relayCabinetConsts.height / 2 + + (j + 1 / 2) * relayCabinetConsts.cellHeight + ); + this.posText.addChild(text); + } + const relay = new Graphics(); + relay + .clear() + .lineStyle( + relayCabinetConsts.cellLineWidth, + new Color(relayCabinetConsts.lineColor) + ); + relay.drawRect( + 0, + 0, + relayCabinetConsts.cellWidth, + relayCabinetConsts.cellHeight + ); + relay.position.set( + -relayCabinetConsts.width / 2 + i * relayCabinetConsts.cellWidth, + -relayCabinetConsts.height / 2 + j * relayCabinetConsts.cellHeight + ); + this.cellGraphic.addChild(relay); + } + } } setTextGraphic(g: VectorText, name: string) { g.setVectorFontSize(14); diff --git a/src/graphics/relayCabinet/RelayCabinetDrawAssistant.ts b/src/graphics/relayCabinet/RelayCabinetDrawAssistant.ts index 3d6a630..97035c2 100644 --- a/src/graphics/relayCabinet/RelayCabinetDrawAssistant.ts +++ b/src/graphics/relayCabinet/RelayCabinetDrawAssistant.ts @@ -7,7 +7,7 @@ import { GraphicDrawAssistant, GraphicInteractionPlugin, GraphicTransformEvent, - JlDrawApp, + IDrawApp, JlGraphic, linePoint, } from 'src/jl-graphic'; @@ -43,7 +43,7 @@ export class RelayCabinetDraw extends GraphicDrawAssistant< > { relayCabinetGraphic: RelayCabinet; - constructor(app: JlDrawApp, template: RelayCabinetTemplate) { + constructor(app: IDrawApp, template: RelayCabinetTemplate) { super(app, template, 'sym_o_square', '继电器柜RelayCabinet'); this.relayCabinetGraphic = this.graphicTemplate.new(); this.container.addChild(this.relayCabinetGraphic); @@ -126,10 +126,10 @@ export class relayCabinetInteraction extends GraphicInteractionPlugin { - this.selectedGraphics = app.selectedGraphics; + if (this.selectedObjName == '多选') { + this.selectedGraphics = app.selectedGraphics.filter( + (g) => !(g instanceof RelayCabinet) + ); + if (this.selectedGraphics.length) { + app.updateSelected(...(this.selectedGraphics as JlGraphic[])); + } + } else { + this.selectedGraphics = app.selectedGraphics; + } }); this.selectedGraphics = []; return app;