同步数据调整

src/drawApp/iscsApp.ts

@@ -27,6 +27,7 @@ import { fromUint8Array, toUint8Array } from 'js-base64';
 import { getWebsocketUrl } from 'src/configs/UrlManage';
 import { sync_data_message } from 'src/protos/sync_data_message';
 import { useAuthStore } from 'src/stores/auth-store';
+import { common } from 'src/protos/common';
 // import { getOnlyToken } from 'src/configs/TokenManage';
 
 let drawApp: IDrawApp | null = null;
@@ -119,6 +120,11 @@ function handleSubscribe(app: IDrawApp) {
             graphics.push(g);
           });
           app.deleteGraphics(...graphics);
+        } else if (syncData.operationType === 'update-canvas') {
+          // console.log(common.Canvas.deserialize(syncData.datas[0].data));
+          // common.Canvas.deserialize(syncData.datas[0].data);
+          // app.updateCanvasAndRecord()
+          app.canvas.update(common.Canvas.deserialize(syncData.datas[0].data));
         }
       } else {
         if (syncData.submenu === '火灾报警平面图') {

src/layouts/IscsDrawLayout.vue

@@ -259,6 +259,9 @@ import { saveDrawToServer } from 'src/drawApp/commonApp';
 import { sync_data_message } from 'src/protos/sync_data_message';
 import { useAuthStore } from 'src/stores/auth-store';
 import { Line } from 'src/graphics/line/Line';
+import { JlOperation } from 'jl-graphic';
+import { common } from 'src/protos/common';
+import { toStorageTransform } from 'src/drawApp/graphics/GraphicDataBase';
 
 const $q = useQuasar();
 const route = useRoute();
@@ -346,24 +349,129 @@ onMounted(() => {
     if (route.query.isShared == '1') {
       const _record = drawApp.opRecord.record;
       drawApp.opRecord.record = function (op) {
-        handleRecordData(op);
         _record.call(drawApp.opRecord, op);
+        handleRecordData(op);
+        saveAllDrawDatas();
       };
       const _undo = drawApp.opRecord.undo;
       drawApp.opRecord.undo = function () {
+        const op =
+          drawApp.opRecord.undoStack[drawApp.opRecord.undoStack.length - 1];
         _undo.call(drawApp.opRecord);
-        console.log('undo');
+        console.log(op, 'undo');
+        handleUnDoData(op);
+        saveAllDrawDatas();
+        console.log('undo', drawApp);
       };
       const _redo = drawApp.opRecord.redo;
       drawApp.opRecord.redo = function () {
+        const op =
+          drawApp.opRecord.redoStack[drawApp.opRecord.redoStack.length - 1];
         _redo.call(drawApp.opRecord);
-        console.log('redo');
+        console.log(op, 'redo');
+        handleRecordData(op);
+        saveAllDrawDatas();
+        console.log('redo', drawApp);
       };
     }
     onResize();
   } else {
     drawStore.setDraftId(null);
   }
+
+  function handleUnDoData(op: JlOperation) {
+    const drawApp = drawStore.getDrawApp();
+    let operationType = op.type;
+    if (operationType == 'graphic-create') {
+      operationType = 'graphic-delete';
+    } else if (operationType == 'graphic-delete') {
+      operationType = 'graphic-create';
+    }
+    const syncData = {
+      operationType: operationType,
+      datas: [],
+      submenu: drawStore.selectSubmenuAndStation.submenu,
+      station: drawStore.selectSubmenuAndStation.station,
+      userId: useAuthStore().userId,
+    };
+    if (op.type === 'update-canvas') {
+      const canvasData = op.obj.saveData();
+      syncData.datas.push(
+        new sync_data_message.UpdataData({
+          id: 0,
+          type: op.obj.type,
+          data: new common.Canvas({
+            width: canvasData.width,
+            height: canvasData.height,
+            backgroundColor: canvasData.backgroundColor,
+            viewportTransform: toStorageTransform(canvasData.viewportTransform),
+          }).serialize(),
+        })
+      );
+    } else {
+      op.obj.forEach((g) => {
+        const gData = g.saveData();
+        syncData.datas.push(
+          new sync_data_message.UpdataData({
+            id: g.id,
+            type: g.type,
+            data: gData.data.serialize(),
+          })
+        );
+      });
+    }
+    drawApp.publishMessage(
+      `/rtss_simulation/draft/iscs/${drawStore.draftId}`,
+      new sync_data_message.SyncData({ ...syncData }).serialize()
+    );
+  }
+
+  function handleRecordData(op: JlOperation) {
+    const drawApp = drawStore.getDrawApp();
+    const syncData = {
+      operationType: op.type,
+      datas: [],
+      submenu: drawStore.selectSubmenuAndStation.submenu,
+      station: drawStore.selectSubmenuAndStation.station,
+      userId: useAuthStore().userId,
+    };
+    if (op.type === 'update-canvas') {
+      const canvasData = op.obj.saveData();
+      console.log(canvasData, 'canvasData');
+      syncData.datas.push(
+        new sync_data_message.UpdataData({
+          id: 0,
+          type: op.obj.type,
+          data: new common.Canvas({
+            width: canvasData.width,
+            height: canvasData.height,
+            backgroundColor: canvasData.backgroundColor,
+            viewportTransform: toStorageTransform(canvasData.viewportTransform),
+          }).serialize(),
+        })
+      );
+    } else {
+      op.obj.forEach((g) => {
+        const gData = g.saveData();
+        syncData.datas.push(
+          new sync_data_message.UpdataData({
+            id: g.id,
+            type: g.type,
+            data: gData.data.serialize(),
+          })
+        );
+      });
+    }
+
+    drawApp.publishMessage(
+      `/rtss_simulation/draft/iscs/${drawStore.draftId}`,
+      new sync_data_message.SyncData({ ...syncData }).serialize()
+    );
+  }
+  // function handleReDoData(op: JlOperation) {
+  //   console.log('redoData', op);
+  // }
+
   const drawAssistantsTypes = [
     Arrow.Type,
     TextContent.Type,
@@ -531,30 +639,6 @@ function selectedStation(name: string) {
   forceReloadDate();
 }
 
-function handleRecordData(op) {
-  const drawApp = drawStore.getDrawApp();
-  const syncData = {
-    operationType: op.type,
-    datas: [],
-    submenu: drawStore.selectSubmenuAndStation.submenu,
-    station: drawStore.selectSubmenuAndStation.station,
-    userId: useAuthStore().userId,
-  };
-  op.obj.forEach((g) => {
-    const gData = g.saveData();
-    syncData.datas.push(
-      new sync_data_message.UpdataData({
-        id: g.id,
-        type: g.type,
-        data: gData.data.serialize(),
-      })
-    );
-  });
-  drawApp.publishMessage(
-    `/rtss_simulation/draft/iscs/${drawStore.draftId}`,
-    new sync_data_message.SyncData({ ...syncData }).serialize()
-  );
-}
 function forceReloadDate() {
   const drawApp = drawStore.getDrawApp();
   const graphics = drawApp.queryStore.getAllGraphics();