From 63eff006b0a0e5ab36231d1c23c78e17c3175be8 Mon Sep 17 00:00:00 2001 From: joylink_zhaoerwei Date: Thu, 10 Oct 2024 17:19:36 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E7=9F=A9=E5=BD=A2=E7=A2=B0?= =?UTF-8?q?=E6=92=9E=E6=A3=80=E6=B5=8B+=E5=8A=A8=E6=80=81=E5=8A=A0?= =?UTF-8?q?=E8=BD=BD=E7=BB=98=E5=88=B6=E5=B7=A5=E5=85=B7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../draw-app/properties/RectProperty.vue | 3 +- src/drawApp/iscsApp.ts | 21 +++++--- src/graphics/rect/RectDrawAssistant.ts | 26 ++++++++- src/layouts/IscsDrawLayout.vue | 53 +++++++++++-------- 4 files changed, 73 insertions(+), 30 deletions(-) diff --git a/src/components/draw-app/properties/RectProperty.vue b/src/components/draw-app/properties/RectProperty.vue index 1c19de2..bde2876 100644 --- a/src/components/draw-app/properties/RectProperty.vue +++ b/src/components/draw-app/properties/RectProperty.vue @@ -61,6 +61,7 @@ diff --git a/src/drawApp/iscsApp.ts b/src/drawApp/iscsApp.ts index 0fd32d0..dd6bf69 100644 --- a/src/drawApp/iscsApp.ts +++ b/src/drawApp/iscsApp.ts @@ -18,7 +18,10 @@ import { } from './commonApp'; import { CCTVButtonData } from './graphics/CCTV/CCTVButtonInteraction'; import { CCTVButtonDraw } from 'src/graphics/CCTV/cctvButton/CCTVButtonDrawAssistant'; -import { CCTVButtonTemplate } from 'src/graphics/CCTV/cctvButton/CCTVButton'; +import { + CCTVButton, + CCTVButtonTemplate, +} from 'src/graphics/CCTV/cctvButton/CCTVButton'; import { useDrawStore } from 'src/stores/draw-store'; import { iscsGraphicData } from 'src/protos/iscs_graphic_data'; import { getDraft } from 'src/api/DraftApi'; @@ -273,6 +276,7 @@ export function saveDrawDatas(app: IDrawApp) { ) ); } + const graphics = app.queryStore.getAllGraphics(); switch (drawStore.selectSubmenuAndStation.submenu) { case '火灾报警平面图': for (let i = 0; i < storage.fasOfPlatformAlarmStorages.length; i++) { @@ -310,6 +314,15 @@ export function saveDrawDatas(app: IDrawApp) { app, cctvOfStationControl ) as iscsGraphicData.CCTVOfStationControlStorage; + + graphics.forEach((g) => { + if (g instanceof CCTVButton) { + const cctvButtonData = g.saveData(); + cctvStorage.cctvButtons.push( + (cctvButtonData as CCTVButtonData).data + ); + } + }); storage.cctvOfStationControlStorages[i] = cctvStorage; break; } @@ -319,12 +332,6 @@ export function saveDrawDatas(app: IDrawApp) { default: break; } - const graphics = app.queryStore.getAllGraphics(); - /* graphics.forEach((g) => { - if (TrackSection.Type === g.type) { - const trackSectionData = (g as TrackSection).saveData(); - storage.trackSections.push((trackSectionData as TrackSectionData).data); - } }) */ console.log(storage, '保存数据', graphics); const base64 = fromUint8Array(storage.serialize()); return base64; diff --git a/src/graphics/rect/RectDrawAssistant.ts b/src/graphics/rect/RectDrawAssistant.ts index 4faf128..987f0a0 100644 --- a/src/graphics/rect/RectDrawAssistant.ts +++ b/src/graphics/rect/RectDrawAssistant.ts @@ -1,9 +1,10 @@ -import { FederatedPointerEvent, Graphics, Point } from 'pixi.js'; +import { FederatedPointerEvent, Graphics, IHitArea, Point } from 'pixi.js'; import { GraphicDrawAssistant, GraphicInteractionPlugin, IDrawApp, JlGraphic, + linePoint, } from 'jl-graphic'; import { IRectData, Rect, RectTemplate } from './Rect'; @@ -72,6 +73,28 @@ export class RectDraw extends GraphicDrawAssistant { } } +//碰撞检测 +export class RectGraphicHitArea implements IHitArea { + rect: Rect; + constructor(rect: Rect) { + this.rect = rect; + } + contains(x: number, y: number): boolean { + let contains = false; + const datas = this.rect.datas; + const tolerance = datas.lineWidth; + const p1 = new Point(0, 0); + const p2 = new Point(p1.x + datas.width, p1.y); + const p3 = new Point(p1.x + datas.width, p1.y + datas.height); + const p4 = new Point(p1.x, p1.y + datas.height); + const p = new Point(x, y); + contains = contains || linePoint(p1, p2, p, tolerance); + contains = contains || linePoint(p2, p3, p, tolerance); + contains = contains || linePoint(p3, p4, p, tolerance); + contains = contains || linePoint(p4, p1, p, tolerance); + return contains; + } +} export class rectInteraction extends GraphicInteractionPlugin { static Name = 'platform_transform'; constructor(app: IDrawApp) { @@ -88,6 +111,7 @@ export class rectInteraction extends GraphicInteractionPlugin { g.cursor = 'pointer'; g.scalable = true; g.rotatable = true; + g.rectGraphic.hitArea = new RectGraphicHitArea(g); } unbind(g: Rect): void { g.eventMode = 'none'; diff --git a/src/layouts/IscsDrawLayout.vue b/src/layouts/IscsDrawLayout.vue index e56578e..3967bc9 100644 --- a/src/layouts/IscsDrawLayout.vue +++ b/src/layouts/IscsDrawLayout.vue @@ -305,7 +305,7 @@ function toggleRightDrawer() { //工具栏所用 const selectUtil = ref(); -const utilsOption: ControlItem[] = reactive([]); +let utilsOption: ControlItem[] = reactive([]); function drawSelect(item: string) { drawStore.getDrawApp().interactionPlugin(item).resume(); @@ -327,6 +327,34 @@ class ControlItem { } } } + +function handleUtilsOption() { + utilsOption = []; + const drawAssistantsTypes = [ + Arrow.Type, + TextContent.Type, + Rect.Type, + Line.Type, + ]; + switch (drawStore.selectSubmenuAndStation.submenu) { + case '监控布局图': + drawAssistantsTypes.push(CCTVButton.Type); + break; + } + drawAssistantsTypes.forEach((type) => { + const drawAssistant = drawStore.getDrawApp().getDrawAssistant(type); + if (drawAssistant) { + utilsOption.push( + new ControlItem( + drawAssistant.name, + drawAssistant.icon, + drawAssistant.description || drawAssistant.name + ) + ); + } + }); + drawDialogHeight.value = 44 * Math.ceil(utilsOption.length / 2); +} //左侧功能按钮 const leftMenuConfig = [ { label: '保存', click: saveAllDrawDatas }, @@ -364,26 +392,7 @@ onMounted(() => { } else { drawStore.setDraftId(null); } - const drawAssistantsTypes = [ - Arrow.Type, - TextContent.Type, - Rect.Type, - Line.Type, - CCTVButton.Type, - ]; - drawAssistantsTypes.forEach((type) => { - const drawAssistant = drawStore.getDrawApp().getDrawAssistant(type); - if (drawAssistant) { - utilsOption.push( - new ControlItem( - drawAssistant.name, - drawAssistant.icon, - drawAssistant.description || drawAssistant.name - ) - ); - } - }); - drawDialogHeight.value = 44 * Math.ceil(utilsOption.length / 2); + handleUtilsOption(); }); const canvasWidth = ref(0); @@ -473,6 +482,7 @@ function selectedMenu(menuName: string) { break; } } + handleUtilsOption(); } const selectSubMenuName = ref(''); @@ -480,6 +490,7 @@ const subMenuOption = ref([]); function selectedSubMenu(subName: string) { drawStore.selectSubmenuAndStation.submenu = subName; forceReloadDate(); + handleUtilsOption(); } let iscsTypeConfig: {