bugfix:undo/redo不同步问题修复

xiaofeng · xiaofeng · commit 8604b4bedb55 · 2024-04-14T17:05:55.000+08:00
diff --git a/case-server/src/main/java/com/xiaoju/framework/handler/RedoIngressTask.java b/case-server/src/main/java/com/xiaoju/framework/handler/RedoIngressTask.java
@@ -0,0 +1,51 @@
+package com.xiaoju.framework.handler;
+
+import com.corundumstudio.socketio.BroadcastOperations;
+import com.corundumstudio.socketio.SocketIOClient;
+import com.corundumstudio.socketio.SocketIOServer;
+import com.fasterxml.jackson.databind.JsonNode;
+import com.fasterxml.jackson.databind.node.ArrayNode;
+import com.flipkart.zjsonpatch.CompatibilityFlags;
+import com.flipkart.zjsonpatch.JsonPatch;
+
+import java.util.EnumSet;
+import java.util.concurrent.ExecutorService;
+
+import static com.flipkart.zjsonpatch.CompatibilityFlags.*;
+
+public class RedoIngressTask extends IngressTask {
+    PushMessage data;
+
+    public RedoIngressTask(SocketIOClient client, SocketIOServer socketIOServer, RoomEntity room, ExecutorService executorEgressService, PushMessage data) {
+        super(client, socketIOServer, room, executorEgressService);
+        this.data = data;
+    }
+    @Override
+    public void run() {
+        room.lock();
+        LOGGER.info(data.getMessage());
+        try {
+            ArrayNode patch = (ArrayNode) jsonMapper.readTree(data.getMessage());
+            JsonNode roomContent = jsonMapper.readTree(room.getCaseContent());
+            EnumSet<CompatibilityFlags> flags = CompatibilityFlags.defaults();
+            flags.add(MISSING_VALUES_AS_NULLS);
+            flags.add(ALLOW_MISSING_TARGET_OBJECT_ON_REPLACE);
+            flags.add(REMOVE_NONE_EXISTING_ARRAY_ELEMENT);
+            JsonNode roomContentNew = JsonPatch.apply(patch, roomContent, flags);
+            room.setCaseContent(roomContentNew.toString());
+
+            ClientEntity clientEntity = getRoomFromClient(client);
+            String roomId = clientEntity.getRoomId();
+            BroadcastOperations broadcastOperations = socketIOServer.getRoomOperations(roomId);
+            LOGGER.info("get redo info");
+            broadcastOperations.sendEvent("redo", client, PushMessage.builder().message(data.getMessage()).build());
+
+        } catch (Exception e) {
+            LOGGER.error("redo error");
+
+        } finally {
+            room.unlock();
+        }
+
+    }
+}
diff --git a/case-server/src/main/java/com/xiaoju/framework/handler/SocketIOServiceImpl.java b/case-server/src/main/java/com/xiaoju/framework/handler/SocketIOServiceImpl.java
@@ -193,6 +193,14 @@ public void start() {
             executorIngressService.submit(new LockIngressTask(client, socketIOServer, clientRoomMap.get(client), executorEgressService, data));
         });
 
+        socketIOServer.addEventListener("undo", PushMessage.class, (client, data, ackSender) -> {
+            executorIngressService.submit(new UndoIngressTask(client, socketIOServer, clientRoomMap.get(client), executorEgressService, data));
+        });
+
+        socketIOServer.addEventListener("redo", PushMessage.class, (client, data, ackSender) -> {
+            executorIngressService.submit(new RedoIngressTask(client, socketIOServer, clientRoomMap.get(client), executorEgressService, data));
+        });
+
         socketIOServer.addEventListener("save", EditMessage.class, (client, data, ackSender) -> {
             executorIngressService.submit(new SaveIngressTask(client, socketIOServer, clientRoomMap.get(client), executorEgressService, data, caseBackupMapper));
         });
diff --git a/case-server/src/main/java/com/xiaoju/framework/handler/UndoIngressTask.java b/case-server/src/main/java/com/xiaoju/framework/handler/UndoIngressTask.java
@@ -0,0 +1,73 @@
+package com.xiaoju.framework.handler;
+
+import com.corundumstudio.socketio.BroadcastOperations;
+import com.corundumstudio.socketio.SocketIOClient;
+import com.corundumstudio.socketio.SocketIOServer;
+import com.fasterxml.jackson.databind.JsonNode;
+import com.fasterxml.jackson.databind.ObjectMapper;
+import com.fasterxml.jackson.databind.node.ArrayNode;
+import com.flipkart.zjsonpatch.CompatibilityFlags;
+import com.flipkart.zjsonpatch.JsonDiff;
+import com.flipkart.zjsonpatch.JsonPatch;
+
+import java.util.EnumSet;
+import java.util.concurrent.ExecutorService;
+
+import static com.flipkart.zjsonpatch.CompatibilityFlags.*;
+import static com.flipkart.zjsonpatch.DiffFlags.ADD_ORIGINAL_VALUE_ON_REPLACE;
+import static com.flipkart.zjsonpatch.DiffFlags.OMIT_MOVE_OPERATION;
+
+public class UndoIngressTask extends IngressTask {
+    PushMessage data;
+
+    public UndoIngressTask(SocketIOClient client, SocketIOServer socketIOServer, RoomEntity room, ExecutorService executorEgressService, PushMessage data) {
+        super(client, socketIOServer, room, executorEgressService);
+        this.data = data;
+    }
+    @Override
+    public void run() {
+        room.lock();
+        LOGGER.info(data.getMessage());
+        try {
+            ArrayNode patch = (ArrayNode) jsonMapper.readTree(data.getMessage());
+            JsonNode roomContent = jsonMapper.readTree(room.getCaseContent());
+            EnumSet<CompatibilityFlags> flags = CompatibilityFlags.defaults();
+            flags.add(MISSING_VALUES_AS_NULLS);
+            flags.add(ALLOW_MISSING_TARGET_OBJECT_ON_REPLACE);
+            flags.add(REMOVE_NONE_EXISTING_ARRAY_ELEMENT);
+            JsonNode roomContentNew = JsonPatch.apply(patch, roomContent, flags);
+            room.setCaseContent(roomContentNew.toString());
+
+            ClientEntity clientEntity = getRoomFromClient(client);
+            String roomId = clientEntity.getRoomId();
+            BroadcastOperations broadcastOperations = socketIOServer.getRoomOperations(roomId);
+            LOGGER.info("get undo info");
+            broadcastOperations.sendEvent("undo", client, PushMessage.builder().message(data.getMessage()).build());
+
+        } catch (Exception e) {
+            LOGGER.error("undo error");
+
+        } finally {
+            room.unlock();
+        }
+    }
+
+    public static void main(String[] args) {
+        String patch = "[{\"op\":\"replace\",\"path\":\"/base\",\"value\":162},{\"op\":\"replace\",\"path\":\"/root/children/0/children/0/children/1/children/0/data/priority\",\"value\":2}]";
+        String content = "{\"root\":{\"data\":{\"created\":1669199611709,\"text\":\"查酒频次配置优化\",\"id\":\"57mb9fudv61682grgejqsccdvb\",\"expandState\":\"expand\"},\"children\":[{\"data\":{\"created\":1669199611717,\"text\":\"逻辑交互\",\"id\":\"0e97nsn07v0ifro18b0jf1c9b2\",\"expandState\":\"expand\",\"priority\":1},\"children\":[{\"data\":{\"id\":\"cqqtxfg14bc0\",\"created\":1677245556248,\"text\":\"啊啊\",\"priority\":2},\"children\":[{\"data\":{\"id\":\"cqqu3jg4oc80\",\"created\":1677246035146,\"text\":\"4\"},\"children\":[{\"data\":{\"id\":\"d07rrni373s0\",\"created\":1711871406605,\"text\":\"fff\",\"priority\":3},\"children\":[{\"data\":{\"id\":\"d0agf41ee9c0\",\"created\":1712144071528,\"text\":\"44\"},\"children\":[]}]},{\"data\":{\"id\":\"d07rxsvpnko0\",\"created\":1711871888498,\"text\":\"dd\",\"hyperlink\":\"http://image.baidu.com\"},\"children\":[{\"data\":{\"id\":\"d0agf0ovji00\",\"created\":1712144064241,\"text\":\"abc\"},\"children\":[]}]},{\"data\":{\"id\":\"d0agf78ggz5s\",\"created\":1712144078486,\"text\":\"io\",\"resource\":null,\"priority\":1},\"children\":[]}]},{\"data\":{\"id\":\"d074zy04y9k0\",\"created\":1711807170850,\"text\":\"10\"},\"children\":[{\"data\":{\"id\":\"d07rsiih7xs0\",\"created\":1711871474109,\"text\":\"dddd \"},\"children\":[{\"data\":{\"id\":\"d07rxmqbwtc0\",\"created\":1711871875112,\"text\":\"分支主题\",\"priority\":null},\"children\":[]}]}]},{\"data\":{\"id\":\"cqqtxzd581s0\",\"created\":1677245599609,\"text\":\"0\"},\"children\":[{\"data\":{\"id\":\"d07rrd5ljio0\",\"created\":1711871384082,\"text\":\"3\"},\"children\":[]},{\"data\":{\"id\":\"d07rrptmaow0\",\"created\":1711871411656,\"text\":\"ddd\"},\"children\":[]}]}]}]}]},\"template\":\"right\",\"theme\":\"fresh-blue\",\"version\":\"1.4.43\",\"base\":160,\"right\":1}";
+        try {
+            ObjectMapper jsonMapper = new ObjectMapper();
+
+            ArrayNode patchNode = (ArrayNode) jsonMapper.readTree(patch);
+            JsonNode roomContent = jsonMapper.readTree(content);
+            EnumSet<CompatibilityFlags> flags = CompatibilityFlags.defaults();
+            flags.add(MISSING_VALUES_AS_NULLS);
+            flags.add(ALLOW_MISSING_TARGET_OBJECT_ON_REPLACE);
+            JsonNode roomContentNew = JsonPatch.apply(patchNode, roomContent, flags);
+            System.out.println(roomContentNew.toString());
+        } catch (Exception e) {
+            System.out.println("error");
+            e.printStackTrace();
+        }
+    }
+}
diff --git a/case-server/src/main/resources/web/dist/index.html b/case-server/src/main/resources/web/dist/index.html
@@ -1 +1,15 @@
-<!DOCTYPE html><html xmlns:th="http://www.thymeleaf.org"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><title>AgileTC</title><style type="text/css">body{overflow: auto !important;}</style><script>window.routerBase = "/";</script></head><body><div id="root"></div><script th:src="@{/umi.9b090468.js}"></script><script src="/umi.c2ea7af7.js"></script></body></html>
+<!DOCTYPE html>
+<html xmlns:th="http://www.thymeleaf.org">
+<head>
+  <meta charset="utf-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <meta name="viewport" content="width=device-width,initial-scale=1" />
+  <title>AgileTC</title>
+  <style type="text/css">body{overflow: auto !important;}</style>
+</head>
+<body>
+<div id="root"></div>
+<script th:src="@{/umi.6c0feca0.js}"></script>
+</body>
+</html>
+
diff --git a/case-server/src/main/resources/web/dist/umi.6c0feca0.js b/case-server/src/main/resources/web/dist/umi.6c0feca0.js
diff --git a/case-server/src/main/resources/web/dist/vendors.0418a3c6.async.js b/case-server/src/main/resources/web/dist/vendors.0418a3c6.async.js
diff --git a/case-server/src/main/resources/web/dist/vendors.7739688d.async.js b/case-server/src/main/resources/web/dist/vendors.7739688d.async.js
diff --git a/case-server/src/main/resources/web/src/components/react-mindmap-editor/index.js b/case-server/src/main/resources/web/src/components/react-mindmap-editor/index.js
@@ -243,6 +243,7 @@ class KityminderEditor extends Component {
       key: 'Ctrl + Z',
       enable: () => {
         if (this.groupNode) {
+          
           return this.groupNode.undo();
         }
         return !readOnly;
@@ -344,6 +345,17 @@ class KityminderEditor extends Component {
 
     this.hotbox = hotbox;
   };
+  handleUndoAck = (data) => {
+    
+    console.log('undo ack get', data)
+    this.groupNode.undo(data)
+  }
+  handleRedoAck = (data) => { 
+    console.log('redo ack get', data)
+    this.groupNode.redo(data)
+    
+  }
+
   // handleUndo = () => {
   //   this.ws.sendMessage('1undo');
   //   const { undoCnt, redoCnt } = this.state;
@@ -432,7 +444,9 @@ class KityminderEditor extends Component {
         if (ctrlKey && window.event.keyCode === 90) {
           // this.expectedBase = this.minder.getBase() - 1;
           // this.handleUndo();
+          console.log('begin undo')
           e.preventDefault();
+          
           this.groupNode.undo();
         }
         if (ctrlKey && window.event.keyCode === 89) {
@@ -464,6 +478,7 @@ class KityminderEditor extends Component {
       caseObj.right = window.minderData.right || 1;
 
       const patch = this.groupNode.getAndResetPatch();
+      console.log('send patch', patch)
       if (patch.length === 1 && patch[0].path === '/base') {
           e.minder._status = 'normal';
           return;
@@ -482,6 +497,7 @@ class KityminderEditor extends Component {
         // const { undoCnt } = this.state;
         // this.setState({ undoCnt: undoCnt + 1 });
         // this.websocketHeartbeatJs.send(JSON.stringify({ case: caseObj, patch }));
+        
         this.ws.sendMessage('edit', { caseContent: JSON.stringify(caseObj), patch: JSON.stringify(patch), caseVersion: caseObj.base });
         this.base = e.minder.getBase();
         this.expectedBase = this.base + 1;
@@ -865,7 +881,7 @@ class KityminderEditor extends Component {
     const childProps = {
       ...this.props,
       minder,
-      isLock,
+      isLock
     };
 
     const tabContentClass = `toolbar has-right-border`;
@@ -887,6 +903,8 @@ class KityminderEditor extends Component {
               onClose={this.handleWsClose}
               wsMinder={this.minder}
               handleLock={this.handleLock}
+              handleUndoAck={this.handleUndoAck}
+              handleRedoAck={this.handleRedoAck}
               handleWsUserStat={this.handleWsUserStat}
               // onError={e => {
               //   notification.info({
@@ -1009,6 +1027,7 @@ class KityminderEditor extends Component {
                       ref={groupNode => (this.groupNode = groupNode)}
                       initData={this.initData}
                       {...childProps}
+                      wsInstance={this.ws}
                     />
                     {!readOnly && (
                       <Nodes
diff --git a/case-server/src/main/resources/web/src/components/react-mindmap-editor/socket.js b/case-server/src/main/resources/web/src/components/react-mindmap-editor/socket.js
@@ -111,7 +111,26 @@ class Socket extends React.Component {
             }
             
         });
-
+        websocket.on('undo', evt => {
+            console.log('undo info', evt.message);
+            try {
+                if (typeof this.props.handleUndoAck === 'function') {
+                    this.props.handleUndoAck(evt.message);
+                }
+            } catch(e) {
+                alert('客户端接受通知消息异常，请刷新重试');
+            }
+        })
+        websocket.on('redo', evt => {
+            console.log('redo info', evt.message);
+            try {
+                if (typeof this.props.handleRedoAck === 'function') {
+                    this.props.handleRedoAck(evt.message);
+                }
+            } catch(e) {
+                alert('客户端接受通知消息异常，请刷新重试');
+            }
+        })
         // message 0:加锁；1：解锁；2:加/解锁成功；3:加/解锁失败
         websocket.on('lock', evt => {
             console.log('lock info', evt.message);
@@ -144,7 +163,6 @@ class Socket extends React.Component {
 
     sendMessage(type, message) {
         let websocket = this.state.ws;
-        console.log('-- message --', message);
         // var jsonObject = {userName: 'userName', message: message};
         websocket.emit(type, message);
     }
@@ -181,6 +199,8 @@ Socket.propTypes = {
     onOpen: PropTypes.func,
     onClose: PropTypes.func,
     handleLock: PropTypes.func,
+    handleUndoAck: PropTypes.func,
+    handleRedoAck: PropTypes.func,
     handleWsUserStat: PropTypes.func
 }
 
diff --git a/case-server/src/main/resources/web/src/components/react-mindmap-editor/toolbar/DoGroup.js b/case-server/src/main/resources/web/src/components/react-mindmap-editor/toolbar/DoGroup.js
@@ -30,7 +30,6 @@ class DoGroup extends Component {
   makeUndoDiff = () => {
     const { minder } = this.props;
     let { undoDiffs, lastSnap } = this.state;
-    
     const headSnap = minder.exportJson();
     console.log('----headsnap---', headSnap);
     const diff = jsonDiff.compare(headSnap, lastSnap);
@@ -45,7 +44,6 @@ class DoGroup extends Component {
         undoDiffs.push(diff);
         doDiffs.push(doDiff);
       }
-      
       while (undoDiffs.length > MAX_HISTORY) {
         undoDiffs.shift();
         doDiffs.shift();
@@ -60,32 +58,52 @@ class DoGroup extends Component {
     let { lastSnap, redoDiffs } = this.state;
     let revertSnap = minder.exportJson();
     redoDiffs.push(jsonDiff.compare(revertSnap, lastSnap));
+ 
     lastSnap = revertSnap;
     this.setState({ redoDiffs, lastSnap });
   };
+
   // 撤销
-  undo = () => {
+  undo = (notifyInfo) => {
+    this.notifyInfo = notifyInfo;
     this.setState({ patchLock: true }, () => {
+      console.log('notifyInfo', this.notifyInfo)
       const { minder } = this.props;
       let { undoDiffs } = this.state;
       const undoDiff = undoDiffs.pop();
       doDiffs.pop();
       if (undoDiff) {
-        minder.applyPatches(undoDiff);
+        
+        if (this.notifyInfo instanceof Object) {
+          this.props.wsInstance.sendMessage('undo',{ message: JSON.stringify(undoDiff) })
+          minder.applyPatches(undoDiff)
+        } else {
+          minder.applyPatches(JSON.parse(notifyInfo || '{}'));
+        }
+      
         this.makeRedoDiff();
       }
       this.setState({ patchLock: false });
     });
   };
   // 重做
-  redo = () => {
+  redo = (notifyInfo) => {
+    this.notifyInfo = notifyInfo;
     this.setState({ patchLock: true }, () => {
       const { minder } = this.props;
       let { redoDiffs } = this.state;
       const redoDiff = redoDiffs.pop();
+      
+      console.log('pop redoDiffs ?', redoDiffs.length)
       if (redoDiff) {
-        minder.applyPatches(redoDiff);
+        if (this.notifyInfo instanceof Object) {
+          this.props.wsInstance.sendMessage('redo',{ message: JSON.stringify(redoDiff) })
+          minder.applyPatches(redoDiff);
+        } else {
+          minder.applyPatches(JSON.parse(notifyInfo || '{}'));
+        }
         this.makeUndoDiff();
+        doDiffs.pop()
       }
       this.setState({ patchLock: false });
     });
@@ -110,6 +128,7 @@ class DoGroup extends Component {
   };
   hasRedo = () => {
     const { redoDiffs } = this.state;
+    console.log('has redoDiffs ?', redoDiffs.length)
     return !!redoDiffs.length;
   };
 
