javascript - 使用 Angular 在 MxGraph 上覆盖 graphHandlerMouseUp 时无限循环

Question

我有一个很难解释的问题，就 Javascript、TrueType、Angular 和 MxGraph 方面的专业知识而言，我已经超出了我的舒适区...希望能够解释。

我有一个 Angular 组件显示和 MxGraph。我能够通过此链接(How to integrate mxGraph with Angular 4?)将 MxGraph 与 Angular 集成。即使我使用 Angular 7，该解决方案仍然有效...

图形在页面上正确显示并且一切正常，包括我使用以下代码覆盖函数 graphHandlerMouseUp:

// Save the position of the mouse when releasing the button: used for
// detecting the target in a drag and drop
    mx.graphHandlerMouseUp = mx.mxGraphHandler.prototype.mouseUp;
    mx.mxGraphHandler.prototype.mouseUp = function( graph, evt  ) {
      currentdropX = evt.graphX;
      currentdropY = evt.graphY;
      mx.graphHandlerMouseUp.apply(this, arguments);
    }

当我第一次运行这个页面时，没有发生任何问题。

然后通过一个按钮我调用另一个组件的页面(通过路由)。如果我从此页面返回到第一个组件(再次通过路由器链接)，则页面和带有 MxGraph 的组件正确加载，但是当我使用此功能时(即释放鼠标按钮)。

在我看来这是一个递归问题，当我像这样放置一个控制台输出时:

// Save the position of the mouse when releasing the button: used for
// detecting the target in a drag and drop
    mx.graphHandlerMouseUp = mx.mxGraphHandler.prototype.mouseUp;
    mx.mxGraphHandler.prototype.mouseUp = function( graph, evt  ) {
      currentdropX = evt.graphX;
      currentdropY = evt.graphY;
      // INIFINTE LOOP HERE
      console.log("Test");
      mx.graphHandlerMouseUp.apply(this, arguments);
    }

“测试”写了很多次，而且还在不断增加。然而，如果我理解的话，这是覆盖函数的正确方法。当然，在第一次加载页面时，“测试”会显示一次。传递到另一个组件，然后返回到此组件，它显示“无限”次(直到我到达:“ERROR RangeError:超出最大调用堆栈大小”)...

我也尝试删除该覆盖，除了明显缺乏功能之外，函数“mxDragSource”也发生了同样的问题，它被用相同的方法覆盖。

正如我所说:我在 javascript、truetype、MxGraph 或 Angular 方面不够专业，所以任何提示，即使是显而易见的，也是非常受欢迎的!

谢谢!

Answer 1

第一次运行代码时，您将 mx 库的 mouseUp 事件存储在一个变量中，并将一个新函数分配给 mouseUp 事件，在该事件中调用旧的 mouseUpEvent。

第二次运行代码时，存储当前的 mouseUp 事件(已修改)并分配一个函数，在该函数中调用旧的 mouseUpEvent，这与之前存储的相同。你的递归开始了!

您需要做的是正确覆盖第三方函数，这样您的代码就不会执行两次。

怎么做？

您可以创建一个 mixin 并在您的组件 B 中使用此 mixin/如果您不知道它是什么以及如何使用它，请在 stackblitz 中重现您的问题。我很乐意帮助您实现它。