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

Question

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

我有一个 Angular 组件显示和 MxGraph。在 link () 之后，我能够将 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);
    }

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

然后通过一个按钮我调用另一个组件的页面（通过路由）。如果我从此页面返回到第一个组件（再次通过路由器link），页面和带有 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);
    }

"Test"写了很多次，还在不断增加中。然而，如果我理解的话，这是覆盖函数的正确方法。当然，在第一次加载页面时，"Test" 会显示一次。传递到另一个组件然后返回到它显示 "infinite" 次（直到我到达："ERROR RangeError: Maximum call stack size exceeded"）...

我也尝试删除那个重写，除了明显缺乏功能之外，函数 "mxDragSource" 也出现了同样的问题，它被用同样的方法重写了。

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

谢谢！

Answer 1

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

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

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

怎么做？

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

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

Infinite loop when overriding graphHandlerMouseUp on MxGraph using Angular

javascript

mxgraph

angular

怎么做？