fix(core): use mobx reaction to track the value of stepDrag.model(#1370)

Author: wbccb

packages/core/src/util/mobx.ts

@@ -1,4 +1,4 @@
-import { action, observable, computed, toJS, isObservable, configure } from 'mobx';
+import { action, observable, computed, toJS, isObservable, configure, reaction, IReactionDisposer } from 'mobx';
 
 configure({ isolateGlobalState: true });
 
@@ -9,4 +9,6 @@ export {
   isObservable,
   toJS,
   configure,
+  reaction,
+  IReactionDisposer,
 };

packages/core/src/view/node/BaseNode.tsx

@@ -14,6 +14,7 @@ import { cancelRaf, createRaf } from '../../util/raf';
 import { EventArgs } from '../../type';
 import RotateControlPoint from '../Rotate';
 import { TranslateMatrix, RotateMatrix } from '../../util';
+import { reaction, IReactionDisposer } from '../../util/mobx';
 
 type IProps = {
   model: BaseNodeModel;
@@ -36,6 +37,7 @@ export default abstract class BaseNode extends Component<IProps, IState> {
   contextMenuTime: number;
   startTime: number;
   clickTimer: number;
+  modelDisposer: IReactionDisposer;
   constructor(props) {
     super();
     const {
@@ -52,6 +54,21 @@ export default abstract class BaseNode extends Component<IProps, IState> {
       eventCenter,
       model,
     });
+    // https://github.com/didi/LogicFlow/issues/1370
+    // 当使用撤销功能：LogicFlow.undo()时，会重新初始化所有model数据，即LogicFlow.undo()时会新构建一个model对象
+    // 但是this.stepDrag并不会重新创建
+    // 导致this.stepDrag持有的model并没有重新赋值，因为之前的做法是构造函数中传入一个model对象
+    // 使用mobx的reaction监听能力，如果this.props.model发生变化，则进行this.stepDrag.setModel()操作
+    this.modelDisposer = reaction(() => this.props, (newProps) => {
+      if (newProps && newProps.model) {
+        this.stepDrag.setModel(newProps.model);
+      }
+    });
+  }
+  componentWillUnmount() {
+    if (this.modelDisposer) {
+      this.modelDisposer();
+    }
   }
   abstract getShape();
   getAnchorShape(anchorData): h.JSX.Element {
@@ -324,13 +341,6 @@ export default abstract class BaseNode extends Component<IProps, IState> {
     this.startTime = new Date().getTime();
     const { editConfigModel } = graphModel;
     if (editConfigModel.adjustNodePosition && model.draggable) {
-      // https://github.com/didi/LogicFlow/issues/1370
-      // 当使用撤销功能：LogicFlow.undo()时，会重新初始化所有model数据，即LogicFlow.undo()时会新构建一个model对象
-      // 但是this.stepDrag并不会重新创建
-      // 导致this.stepDrag持有的model并没有重新赋值，因为之前的做法是构造函数中传入一个model对象
-      // 在StepDrag.ts中只有handleMouseDown、handleMouseMove、handleMouseUp使用到this.model
-      // 因此在handleMouseDown()进行setModel重新将this.props.model的值设置进去，刷新this.model.getData()
-      this.stepDrag && this.stepDrag.setModel(model);
       this.stepDrag && this.stepDrag.handleMouseDown(ev);
     }
   };