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: {