fix undo

common/Utils.ts

@@ -8,6 +8,7 @@ export const cloneNodeData = (nodeData: GraphNodeModel) => {
     const newData: BehaviorNodeModel = {
         id: Number(nodeData.id),
         name: nodeData.name,
+        desc: nodeData.desc,
     };
     if(nodeData.input) {
         newData.input = [];

render-process/Editor/NodePanel.tsx

@@ -27,6 +27,7 @@ interface NodePanelProps {
     model: BehaviorNodeModel;
     settings: Settings;
     updateNode: (id: string, forceUpdate: boolean) => void;
+    pushUndoStack: () => void;
 }
 
 interface NodePanelState {}
@@ -67,20 +68,12 @@ export default class NodePanel extends React.Component<NodePanelProps> {
 
     onFinish = (values: any) => {
         console.log("Success:", values);
-        const { updateNode, model, settings } = this.props;
+        const { updateNode, pushUndoStack, model, settings } = this.props;
         const conf = settings.getNodeConf(values.name);
         if (!conf) {
             notification.warn({ message: `节点${values.name}未定义` });
             return;
         }
-        var forceUpdate = false;
-        if (model.name != values.name) {
-            model.name = values.name;
-            forceUpdate = true;
-        }
-        model.desc = values.desc;
-        model.debug = values.debug;
-
         var args: any = {};
         if (values.customArgs) {
             try {
@@ -91,6 +84,16 @@ export default class NodePanel extends React.Component<NodePanelProps> {
             }
         }
 
+        pushUndoStack();
+
+        var forceUpdate = false;
+        if (model.name != values.name) {
+            model.name = values.name;
+            forceUpdate = true;
+        }
+        model.desc = values.desc;
+        model.debug = values.debug;
+
         if (conf.args) {
             conf.args.forEach((e) => {
                 const k = "args." + e.name;

render-process/Editor/index.tsx

@@ -50,6 +50,7 @@ export default class Editor extends React.Component<EditorProps, EditorState> {
             width: window.screen.width * 0.66,
             height: window.screen.height,
             animate: false,
+            maxZoom: 2,
             // fitCenter: true,
             modes: {
                 default: [
@@ -323,12 +324,6 @@ export default class Editor extends React.Component<EditorProps, EditorState> {
         this.changeWithoutAnim();
     }
 
-    pushUndoStack() {
-        this.undoStack.push(Utils.cloneNodeData(this.graph.findDataById('1') as GraphNodeModel));
-        console.log("push", this.undoStack);
-        this.redoStack = [];
-    }
-
     changeWithoutAnim() {
         this.graph.set("animate", false);
         this.graph.changeData();
@@ -389,16 +384,33 @@ export default class Editor extends React.Component<EditorProps, EditorState> {
         }
     }
 
+    useStackData(data: BehaviorNodeModel) {
+        this.graph.set("animate", false);
+        this.graph.changeData(Utils.createTreeData(data, this.state.settings));
+        this.graph.layout(true);
+        this.graph.set("animate", true);
+    }
+
+    pushUndoStack(keepRedo?: boolean) {
+        this.undoStack.push(Utils.cloneNodeData(this.graph.findDataById('1') as GraphNodeModel));
+        console.log("push undo", this.undoStack);
+        if (!keepRedo) {
+            this.redoStack = [];
+        }
+    }
+
+    pushRedoStack() {
+        this.redoStack.push(Utils.cloneNodeData(this.graph.findDataById('1') as GraphNodeModel));
+        console.log("push redo", this.redoStack);
+    }
+
     undo() {
         if (this.undoStack.length == 0) {
             return;
         }
         const data = this.undoStack.pop();
-        this.graph.set("animate", false);
+        this.pushRedoStack();
-        this.graph.changeData(Utils.createTreeData(data, this.state.settings));
+        this.useStackData(data);
-        this.graph.layout();
-        this.graph.set("animate", true);
-        this.redoStack.push(data);
     }
 
     redo() {
@@ -406,11 +418,8 @@ export default class Editor extends React.Component<EditorProps, EditorState> {
             return;
         }
         const data = this.redoStack.pop();
-        this.graph.set("animate", false);
+        this.pushUndoStack(true);
-        this.graph.changeData(Utils.createTreeData(data, this.state.settings));
+        this.useStackData(data);
-        this.graph.layout();
-        this.graph.set("animate", true);
-        this.undoStack.push(data);
     }
 
     render() {
@@ -431,7 +440,6 @@ export default class Editor extends React.Component<EditorProps, EditorState> {
                                 settings={settings}
                                 updateNode={(id, forceUpdate) => {
                                     if (forceUpdate) {
-                                        this.pushUndoStack();
                                         const data: any = this.graph.findDataById(id);
                                         data.conf = settings.getNodeConf(data.name);
                                         data.size = Utils.calcTreeNodeSize(data);
@@ -440,6 +448,9 @@ export default class Editor extends React.Component<EditorProps, EditorState> {
                                     const item = this.graph.findById(id);
                                     item.draw();
                                 }}
+                                pushUndoStack={() => {
+                                    this.pushUndoStack();
+                                }}
                             />
                         ) : (
                                 <TreePanel model={treeModel} />