From fd0bfb0ab2a7509687346e119841ea3afa5451ce Mon Sep 17 00:00:00 2001 From: joylink_fanyuhong <18706759286@163.com> Date: Fri, 11 Oct 2024 09:52:46 +0800 Subject: [PATCH] =?UTF-8?q?=E5=90=8C=E6=AD=A5=E6=95=B0=E6=8D=AE=E8=B0=83?= =?UTF-8?q?=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/drawApp/iscsApp.ts | 6 ++ src/layouts/IscsDrawLayout.vue | 138 ++++++++++++++++++++++++++------- 2 files changed, 117 insertions(+), 27 deletions(-) diff --git a/src/drawApp/iscsApp.ts b/src/drawApp/iscsApp.ts index 0fd32d0..8c6519f 100644 --- a/src/drawApp/iscsApp.ts +++ b/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 === '火灾报警平面图') { diff --git a/src/layouts/IscsDrawLayout.vue b/src/layouts/IscsDrawLayout.vue index e56578e..ea0ec81 100644 --- a/src/layouts/IscsDrawLayout.vue +++ b/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();