修改按钮+commonAPP(所有表app共用基础功能）

src/components/draw-app/CCTVDrawProperties.vue

@@ -23,8 +23,12 @@
       </template>
       <template v-else-if="drawStore.selectedGraphics.length === 1">
         <q-card-section>
+          <iscs-text-property
+            v-if="drawStore.selectedGraphicType === TextContent.Type"
+            :drawStore="drawStore"
+          />
           <cctv-button-property
-            v-if="drawStore.selectedGraphicType === CCTVButton.Type"
+            v-else-if="drawStore.selectedGraphicType === CCTVButton.Type"
           />
         </q-card-section>
       </template>
@@ -38,6 +42,8 @@
 <script setup lang="ts">
 import { useCCTVDrawStore } from 'src/stores/cctv-draw-store';
 import CanvasProperty from './properties/CCTV/CanvasCCTVProperty.vue';
+import IscsTextProperty from './properties/IscsTextProperty.vue';
+import { TextContent } from 'src/graphics/textContent/TextContent';
 import cctvButtonProperty from './properties/CCTV/CCTVButtonProperty.vue';
 import { CCTVButton } from 'src/graphics/CCTV/cctvButton/CCTVButton';
 

src/components/draw-app/DrawProperties.vue

@@ -25,6 +25,7 @@
         <q-card-section>
           <iscs-text-property
             v-if="drawStore.selectedGraphicType === TextContent.Type"
+            :drawStore="drawStore"
           />
         </q-card-section>
       </template>

src/components/draw-app/properties/CCTV/CCTVButtonProperty.vue

@@ -35,5 +35,6 @@ const { data: cctvButtonModel, onUpdate } = useFormData(
 const optionsButtonType = [
   { label: '方形', value: CCTVGraphicData.CCTVButton.ButtonType.rect },
   { label: '监视器', value: CCTVGraphicData.CCTVButton.ButtonType.monitor },
+  { label: '半圆', value: CCTVGraphicData.CCTVButton.ButtonType.semicircle },
 ];
 </script>

src/components/draw-app/properties/IscsTextProperty.vue

@@ -38,13 +38,13 @@
 </template>
 
 <script setup lang="ts">
-import { useDrawStore } from 'src/stores/draw-store';
 import { useFormData } from 'src/components/DrawAppFormUtils';
 import { IscsTextData } from 'src/drawApp/graphics/IscsTextContentInteraction';
 
-const tccDrawStore = useDrawStore();
+const { drawStore } = defineProps(['drawStore'])
+
 const { data: textContentModel, onUpdate } = useFormData(
   new IscsTextData(),
-  tccDrawStore.getDrawApp()
+  drawStore.getDrawApp()
 );
 </script>

src/drawApp/cctvApp.ts

@@ -1,45 +1,25 @@
 import {
   CombinationKey,
-  ContextMenu,
   IDrawApp,
   IGraphicStorage,
   JlGraphic,
   KeyListener,
-  MenuItemOptions,
   newDrawApp,
 } from 'jl-graphic';
-import { useCCTVDrawStore } from 'src/stores/cctv-draw-store';
+import { useDrawStore } from 'src/stores/draw-store';
-import { iscsGraphicData } from 'src/protos/iscs_graphic_data';
+import { CCTVGraphicData } from 'src/protos/cctv_graphic_data';
-import { toStorageTransform } from './graphics/GraphicDataBase';
 import { fromUint8Array } from 'js-base64';
+import {
+  initCommonDrawApp,
+  saveCommonDrawDatas,
+  saveDrawToServer,
+} 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 { CCTVButtonData } from './graphics/CCTV/CCTVButtonInteraction';
 
 let drawApp: IDrawApp | null = null;
 
-const UndoOptions: MenuItemOptions = {
-  name: '撤销',
-};
-const RedoOptions: MenuItemOptions = {
-  name: '重做',
-};
-const SelectAllOptions: MenuItemOptions = {
-  name: '全选',
-};
-
-export const DefaultCanvasMenu = new ContextMenu({
-  name: '绘制-画布菜单',
-  groups: [
-    {
-      items: [UndoOptions, RedoOptions],
-    },
-    {
-      items: [SelectAllOptions],
-    },
-  ],
-});
-
 export function getDrawApp(): IDrawApp | null {
   return drawApp;
 }
@@ -60,26 +40,13 @@ export function initDrawApp(): IDrawApp {
     dataLoader: loadDrawDatas,
     isSupportDeletion: isSupportDeletion,
   });
-
   const app = drawApp;
-  new CCTVButtonDraw(drawApp, new CCTVButtonTemplate(new CCTVButtonData()));
+  initCommonDrawApp(app);
-  app.canvas.on('_rightclick', (e) => {
+  new CCTVButtonDraw(
-    if (app.drawing) return;
+    app,
-    UndoOptions.disabled = !app.opRecord.hasUndo;
+    new CCTVButtonTemplate(new CCTVButtonData())
-    RedoOptions.disabled = !app.opRecord.hasRedo;
+  );
 
-    UndoOptions.handler = () => {
-      app.opRecord.undo();
-    };
-    RedoOptions.handler = () => {
-      app.opRecord.redo();
-    };
-    SelectAllOptions.handler = () => {
-      app.selectAllGraphics();
-    };
-    DefaultCanvasMenu.open(e.global);
-  });
-  app.on('destroy', async () => {});
   app.addKeyboardListener(
     new KeyListener({
       value: 'KeyS',
@@ -94,36 +61,35 @@ export function initDrawApp(): IDrawApp {
 }
 
 export async function loadDrawDatas(): Promise<IGraphicStorage> {
-  const drawStore = useCCTVDrawStore();
+  const drawStore = useDrawStore();
   const id = drawStore.draftId;
   if (!id) {
     throw new Error('获取数据异常：为获取到草稿地图ID');
   }
+  /*   const { proto: base64 } = await getDraft(id);
+  if (base64) {
+    const storage = iscsGraphicData.IscsGraphicStorage.deserialize(
+      toUint8Array(base64)
+    );
+    const datas = loadCommonDrawDatas(storage);} */
   return Promise.resolve({
     datas: [],
   });
 }
 
 export function saveDrawDatas(app: IDrawApp) {
-  const storage = new iscsGraphicData.IscsGraphicStorage();
+  let storage = new CCTVGraphicData.CCTVGraphicStorage();
-  const canvasData = app.canvas.saveData();
+  storage = saveCommonDrawDatas(
-  storage.canvas = new iscsGraphicData.Canvas({
+    app,
-    width: canvasData.width,
+    storage
-    height: canvasData.height,
+  ) as CCTVGraphicData.CCTVGraphicStorage;
-    backgroundColor: canvasData.backgroundColor,
-    viewportTransform: toStorageTransform(canvasData.viewportTransform),
-  });
   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;
 }
-
-export function saveDrawToServer(base64: string) {
-  const drawStore = useCCTVDrawStore();
-  const id = drawStore.draftId;
-  if (!id) {
-    return;
-  }
-  console.log('save' + base64);
-}

src/drawApp/commonApp.ts

@@ -5,7 +5,6 @@ import {
   MenuItemOptions,
 } from 'jl-graphic';
 import { useDrawStore } from 'src/stores/draw-store';
-import { iscsGraphicData } from 'src/protos/iscs_graphic_data';
 import { toStorageTransform } from './graphics/GraphicDataBase';
 import { Arrow, ArrowTemplate } from 'src/graphics/arrow/Arrow';
 import { ArrowData } from './graphics/ArrowInteraction';
@@ -16,6 +15,7 @@ import {
 } from 'src/graphics/textContent/TextContent';
 import { TextContentDraw } from 'src/graphics/textContent/TextContentDrawAssistant';
 import { IscsTextData } from './graphics/IscsTextContentInteraction';
+import { iscsGraphicData } from 'src/protos/iscs_graphic_data';
 
 const UndoOptions: MenuItemOptions = {
   name: '撤销',
@@ -64,9 +64,12 @@ export function initCommonDrawApp(app: IDrawApp) {
   app.on('destroy', async () => {});
 }
 
-export function loadCommonDrawDatas(
+interface ICommonStorage {
-  storage: iscsGraphicData.IscsGraphicStorage
+  arrows: iscsGraphicData.Arrow[];
-): GraphicData[] {
+  iscsTexts: iscsGraphicData.IscsText[];
+  canvas: iscsGraphicData.Canvas;
+}
+export function loadCommonDrawDatas(storage: ICommonStorage): GraphicData[] {
   const datas: GraphicData[] = [];
   console.log(storage, 'storage');
   storage.arrows.forEach((arrow) => {
@@ -78,8 +81,7 @@ export function loadCommonDrawDatas(
   return datas;
 }
 
-export function saveCommonDrawDatas(app: IDrawApp) {
+export function saveCommonDrawDatas(app: IDrawApp, storage: ICommonStorage) {
-  const storage = new iscsGraphicData.IscsGraphicStorage();
   const canvasData = app.canvas.saveData();
   storage.canvas = new iscsGraphicData.Canvas({
     width: canvasData.width,

src/drawApp/drawApp.ts

@@ -1,4 +1,3 @@
-// import { fromUint8Array } from 'js-base64';
 import {
   CombinationKey,
   IDrawApp,
@@ -9,7 +8,6 @@ import {
 } from 'jl-graphic';
 import { useDrawStore } from 'src/stores/draw-store';
 import { iscsGraphicData } from 'src/protos/iscs_graphic_data';
-import { toStorageTransform } from './graphics/GraphicDataBase';
 import { fromUint8Array } from 'js-base64';
 import {
   initCommonDrawApp,
@@ -73,14 +71,11 @@ export async function loadDrawDatas(): Promise<IGraphicStorage> {
 }
 
 export function saveDrawDatas(app: IDrawApp) {
-  const storage = saveCommonDrawDatas(app);
+  let storage = new iscsGraphicData.IscsGraphicStorage();
-  const canvasData = app.canvas.saveData();
+  storage = saveCommonDrawDatas(
-  storage.canvas = new iscsGraphicData.Canvas({
+    app,
-    width: canvasData.width,
+    storage
-    height: canvasData.height,
+  ) as iscsGraphicData.IscsGraphicStorage;
-    backgroundColor: canvasData.backgroundColor,
-    viewportTransform: toStorageTransform(canvasData.viewportTransform),
-  });
   const graphics = app.queryStore.getAllGraphics();
   /*  graphics.forEach((g) => {
     if (TrackSection.Type === g.type) {

src/graphics/CCTV/cctvButton/CCTVButton.ts

@@ -5,8 +5,10 @@ import { CCTVGraphicData } from 'src/protos/cctv_graphic_data';
 import { Assets, Sprite, Spritesheet, Texture } from 'pixi.js';
 
 interface CCTVButtonTextures {
-  redBtn: Texture;
+  rectPressBtn: Texture;
-  greenBtn: Texture;
+  rectBtn: Texture;
+  monitorBtn: Texture;
+  semicircleBtn: Texture;
 }
 
 export interface ICCTVButtonData extends GraphicData {
@@ -26,7 +28,7 @@ export class CCTVButton extends JlGraphic {
     super(CCTVButton.Type);
     this.cctvButtonTextures = cctvButtonTextures;
     this._cctvButton = new Sprite();
-    this._cctvButton.texture = this.cctvButtonTextures.redBtn;
+    this._cctvButton.texture = this.cctvButtonTextures.rectBtn;
     this._cctvButton.anchor.set(0.5);
     this.addChild(this._cctvButton);
   }
@@ -38,8 +40,15 @@ export class CCTVButton extends JlGraphic {
   }
 
   doRepaint(): void {
-    this._cctvButton.rotation = 0;
+    if (this.datas.buttonType == CCTVGraphicData.CCTVButton.ButtonType.rect) {
-    this._cctvButton.texture = this.cctvButtonTextures.redBtn;
+      this._cctvButton.texture = this.cctvButtonTextures.rectBtn;
+    } else if (
+      this.datas.buttonType == CCTVGraphicData.CCTVButton.ButtonType.monitor
+    ) {
+      this._cctvButton.texture = this.cctvButtonTextures.monitorBtn;
+    } else {
+      this._cctvButton.texture = this.cctvButtonTextures.semicircleBtn;
+    }
   }
 }
 
@@ -62,8 +71,10 @@ export class CCTVButtonTemplate extends JlGraphicTemplate<CCTVButton> {
     const cctvButtonSheet = new Spritesheet(texture, CCTV_Button_JSON);
     const result = await cctvButtonSheet.parse();
     this.cctvButtonTextures = {
-      redBtn: result['rect-press-btn.png'],
+      rectPressBtn: result['rect-press-btn.png'],
-      greenBtn: result['rect-btn.png'],
+      rectBtn: result['rect-btn.png'],
+      monitorBtn: result['monitor-btn.png'],
+      semicircleBtn: result['semicircle-btn.png'],
     };
     return this.cctvButtonTextures as CCTVButtonTextures;
   }

src/graphics/CCTV/cctvButton/cctv-button-data.json

@@ -15,6 +15,22 @@
       "spriteSourceSize": { "x": 0, "y": 0, "w": 74, "h": 66 },
       "sourceSize": { "w": 74, "h": 66 },
       "anchor": { "x": 0.5, "y": 0.5 }
+    },
+    "monitor-btn.png": {
+      "frame": { "x": 148, "y": 0, "w": 74, "h": 66 },
+      "rotated": false,
+      "trimmed": false,
+      "spriteSourceSize": { "x": 0, "y": 0, "w": 74, "h": 66 },
+      "sourceSize": { "w": 74, "h": 66 },
+      "anchor": { "x": 0.5, "y": 0.5 }
+    },
+    "semicircle-btn.png": {
+      "frame": { "x": 230, "y": 0, "w": 66, "h": 66 },
+      "rotated": false,
+      "trimmed": false,
+      "spriteSourceSize": { "x": 0, "y": 0, "w": 66, "h": 66 },
+      "sourceSize": { "w": 66, "h": 66 },
+      "anchor": { "x": 0.5, "y": 0.5 }
     }
   },
   "meta": {

src/layouts/CCTVDrawLayout.vue

@@ -112,6 +112,8 @@ import { successNotify } from 'src/utils/CommonNotify';
 import { useQuasar } from 'quasar';
 import { useCCTVDrawStore } from 'src/stores/cctv-draw-store';
 import { CCTVButton } from 'src/graphics/CCTV/cctvButton/CCTVButton';
+import { Arrow } from 'src/graphics/arrow/Arrow';
+import { TextContent } from 'src/graphics/textContent/TextContent';
 
 
 const $q = useQuasar();
@@ -197,7 +199,7 @@ onMounted(() => {
   } else {
     drawStore.setDraftId(null);
   }
-  const drawAssistantsTypes = [CCTVButton.Type];
+  const drawAssistantsTypes = [Arrow.Type,TextContent.Type,CCTVButton.Type];
   drawAssistantsTypes.forEach((type) => {
     const drawAssistant = drawStore.getDrawApp().getDrawAssistant(type);
     if (drawAssistant) {

src/protos/cctv_graphic_data.ts

@@ -11,9 +11,11 @@ export namespace CCTVGraphicData {
         constructor(data?: any[] | {
             canvas?: dependency_1.iscsGraphicData.Canvas;
             cctvButtons?: CCTVButton[];
+            arrows?: dependency_1.iscsGraphicData.Arrow[];
+            iscsTexts?: dependency_1.iscsGraphicData.IscsText[];
         }) {
             super();
-            pb_1.Message.initialize(this, Array.isArray(data) ? data : [], 0, -1, [2], this.#one_of_decls);
+            pb_1.Message.initialize(this, Array.isArray(data) ? data : [], 0, -1, [2, 3, 4], this.#one_of_decls);
             if (!Array.isArray(data) && typeof data == "object") {
                 if ("canvas" in data && data.canvas != undefined) {
                     this.canvas = data.canvas;
@@ -21,6 +23,12 @@ export namespace CCTVGraphicData {
                 if ("cctvButtons" in data && data.cctvButtons != undefined) {
                     this.cctvButtons = data.cctvButtons;
                 }
+                if ("arrows" in data && data.arrows != undefined) {
+                    this.arrows = data.arrows;
+                }
+                if ("iscsTexts" in data && data.iscsTexts != undefined) {
+                    this.iscsTexts = data.iscsTexts;
+                }
             }
         }
         get canvas() {
@@ -38,9 +46,23 @@ export namespace CCTVGraphicData {
         set cctvButtons(value: CCTVButton[]) {
             pb_1.Message.setRepeatedWrapperField(this, 2, value);
         }
+        get arrows() {
+            return pb_1.Message.getRepeatedWrapperField(this, dependency_1.iscsGraphicData.Arrow, 3) as dependency_1.iscsGraphicData.Arrow[];
+        }
+        set arrows(value: dependency_1.iscsGraphicData.Arrow[]) {
+            pb_1.Message.setRepeatedWrapperField(this, 3, value);
+        }
+        get iscsTexts() {
+            return pb_1.Message.getRepeatedWrapperField(this, dependency_1.iscsGraphicData.IscsText, 4) as dependency_1.iscsGraphicData.IscsText[];
+        }
+        set iscsTexts(value: dependency_1.iscsGraphicData.IscsText[]) {
+            pb_1.Message.setRepeatedWrapperField(this, 4, value);
+        }
         static fromObject(data: {
             canvas?: ReturnType<typeof dependency_1.iscsGraphicData.Canvas.prototype.toObject>;
             cctvButtons?: ReturnType<typeof CCTVButton.prototype.toObject>[];
+            arrows?: ReturnType<typeof dependency_1.iscsGraphicData.Arrow.prototype.toObject>[];
+            iscsTexts?: ReturnType<typeof dependency_1.iscsGraphicData.IscsText.prototype.toObject>[];
         }): CCTVGraphicStorage {
             const message = new CCTVGraphicStorage({});
             if (data.canvas != null) {
@@ -49,12 +71,20 @@ export namespace CCTVGraphicData {
             if (data.cctvButtons != null) {
                 message.cctvButtons = data.cctvButtons.map(item => CCTVButton.fromObject(item));
             }
+            if (data.arrows != null) {
+                message.arrows = data.arrows.map(item => dependency_1.iscsGraphicData.Arrow.fromObject(item));
+            }
+            if (data.iscsTexts != null) {
+                message.iscsTexts = data.iscsTexts.map(item => dependency_1.iscsGraphicData.IscsText.fromObject(item));
+            }
             return message;
         }
         toObject() {
             const data: {
                 canvas?: ReturnType<typeof dependency_1.iscsGraphicData.Canvas.prototype.toObject>;
                 cctvButtons?: ReturnType<typeof CCTVButton.prototype.toObject>[];
+                arrows?: ReturnType<typeof dependency_1.iscsGraphicData.Arrow.prototype.toObject>[];
+                iscsTexts?: ReturnType<typeof dependency_1.iscsGraphicData.IscsText.prototype.toObject>[];
             } = {};
             if (this.canvas != null) {
                 data.canvas = this.canvas.toObject();
@@ -62,6 +92,12 @@ export namespace CCTVGraphicData {
             if (this.cctvButtons != null) {
                 data.cctvButtons = this.cctvButtons.map((item: CCTVButton) => item.toObject());
             }
+            if (this.arrows != null) {
+                data.arrows = this.arrows.map((item: dependency_1.iscsGraphicData.Arrow) => item.toObject());
+            }
+            if (this.iscsTexts != null) {
+                data.iscsTexts = this.iscsTexts.map((item: dependency_1.iscsGraphicData.IscsText) => item.toObject());
+            }
             return data;
         }
         serialize(): Uint8Array;
@@ -72,6 +108,10 @@ export namespace CCTVGraphicData {
                 writer.writeMessage(1, this.canvas, () => this.canvas.serialize(writer));
             if (this.cctvButtons.length)
                 writer.writeRepeatedMessage(2, this.cctvButtons, (item: CCTVButton) => item.serialize(writer));
+            if (this.arrows.length)
+                writer.writeRepeatedMessage(3, this.arrows, (item: dependency_1.iscsGraphicData.Arrow) => item.serialize(writer));
+            if (this.iscsTexts.length)
+                writer.writeRepeatedMessage(4, this.iscsTexts, (item: dependency_1.iscsGraphicData.IscsText) => item.serialize(writer));
             if (!w)
                 return writer.getResultBuffer();
         }
@@ -87,6 +127,12 @@ export namespace CCTVGraphicData {
                     case 2:
                         reader.readMessage(message.cctvButtons, () => pb_1.Message.addToRepeatedWrapperField(message, 2, CCTVButton.deserialize(reader), CCTVButton));
                         break;
+                    case 3:
+                        reader.readMessage(message.arrows, () => pb_1.Message.addToRepeatedWrapperField(message, 3, dependency_1.iscsGraphicData.Arrow.deserialize(reader), dependency_1.iscsGraphicData.Arrow));
+                        break;
+                    case 4:
+                        reader.readMessage(message.iscsTexts, () => pb_1.Message.addToRepeatedWrapperField(message, 4, dependency_1.iscsGraphicData.IscsText.deserialize(reader), dependency_1.iscsGraphicData.IscsText));
+                        break;
                     default: reader.skipField();
                 }
             }
@@ -218,7 +264,8 @@ export namespace CCTVGraphicData {
     export namespace CCTVButton {
         export enum ButtonType {
             rect = 0,
-            monitor = 1
+            monitor = 1,
+            semicircle = 2
         }
     }
 }