ibp草稿保存

src/drawApp/ibpDrawApp.ts

@@ -1,6 +1,12 @@
 import { fromUint8Array, toUint8Array } from 'js-base64';
 import { getDraft, saveDraft } from 'src/api/DraftApi';
-import { GraphicData, IDrawApp, newDrawApp } from 'src/jl-graphic';
+import {
+  CombinationKey,
+  GraphicData,
+  IDrawApp,
+  KeyListener,
+  newDrawApp,
+} from 'src/jl-graphic';
 import { ibpGraphicData } from 'src/protos/ibpGraphics';
 import { useIBPDrawStore } from 'src/stores/ibp-draw-store';
 import { IBPButtonData } from './graphics/IBPButtonInteraction';
@@ -24,8 +30,32 @@ import { ArrowDraw } from 'src/graphics/arrow/ArrowDrawAssistant';
 import { ArrowData } from './graphics/ArrowInteraction';
 import { TextContentDraw } from 'src/graphics/textContent/TextContentDrawAssistant';
 import { IbpTextData } from './graphics/IbpTextInteraction';
+import { MenuItemOptions } from 'src/jl-graphic/ui/Menu';
+import { ContextMenu } from 'src/jl-graphic/ui/ContextMenu';
+import { savePslDrawToServer } from './pslApp';
 
 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 getIBPDrawApp(): IDrawApp | null {
   return drawApp;
@@ -35,6 +65,7 @@ export function initIBPDrawApp() {
   drawApp = newDrawApp({
     dataLoader: IBPDrawDataLoader,
   });
+  const app = drawApp;
 
   new IBPButtonDrawAssistant(
     drawApp,
@@ -44,6 +75,34 @@ export function initIBPDrawApp() {
   new IbpKeyDraw(drawApp, new IbpKeyTemplate(new IbpKeyData()));
   new ArrowDraw(drawApp, new ArrowTemplate(new ArrowData()));
   new TextContentDraw(drawApp, new TextContentTemplate(new IbpTextData()));
+  // 画布右键菜单
+  drawApp.registerMenu(DefaultCanvasMenu);
+  drawApp.canvas.on('_rightclick', (e) => {
+    if (app.drawing) return;
+    UndoOptions.disabled = !app.opRecord.hasUndo;
+    RedoOptions.disabled = !app.opRecord.hasRedo;
+
+    UndoOptions.handler = () => {
+      app.opRecord.undo();
+    };
+    RedoOptions.handler = () => {
+      app.opRecord.redo();
+    };
+    SelectAllOptions.handler = () => {
+      app.selectAllGraphics();
+    };
+    DefaultCanvasMenu.open(e.global);
+  });
+  app.addKeyboardListener(
+    new KeyListener({
+      value: 'KeyS',
+      global: true,
+      combinations: [CombinationKey.Ctrl],
+      onPress: () => {
+        saveIBPDrawToServer(app);
+      },
+    })
+  );
 
   return drawApp;
 }

src/layouts/IBPDrawLayout.vue

@@ -7,7 +7,7 @@ import { IbpAlarm } from 'src/graphics/ibpAlarm/IbpAlarm';
 import { IbpKey } from 'src/graphics/ibpKey/IbpKey';
 import { Arrow } from 'src/graphics/arrow/Arrow';
 import { TextContent } from 'src/graphics/textContent/TextContent';
-import { getIBPDrawApp } from 'src/drawApp/ibpDrawApp';
+import { getIBPDrawApp, saveIBPDrawToServer } from 'src/drawApp/ibpDrawApp';
 import IbpDrawProperties from 'src/components/draw-app/IbpDrawProperties.vue';
 
 const ibpDrawStore = useIBPDrawStore();
@@ -112,6 +112,13 @@ function onResize() {
     dom.style.height = canvasHeight.value + 'px';
   }
 }
+
+function saveData() {
+  const app = getIBPDrawApp();
+  if (app) {
+    saveIBPDrawToServer(app);
+  }
+}
 function backConfirm() {
   router.go(-1);
 }
@@ -125,7 +132,7 @@ function backConfirm() {
           <QBtn color="accent" label="功能菜单">
             <QMenu>
               <QList style="min-width: 100px">
-                <QItem clickable @click="console.log('保存')" v-close-popup>
+                <QItem clickable @click="saveData" v-close-popup>
                   <QItemSection>保存</QItemSection>
                 </QItem>
               </QList>