Бесконечный цикл при переопределении graphHandlerMouseUp в MxGraph с использованием Angular - PullRequest
Новая
       24

Бесконечный цикл при переопределении graphHandlerMouseUp в MxGraph с использованием Angular

2 голосов
/ 07 ноября 2019

У меня сложный вопрос для объяснения, и я ухожу из своей зоны комфорта в том, что касается опыта в Javascript, TrueType, Angular и MxGraph ... Надеюсь, что смогу объяснить.

У меня есть угловой компонент отображения и MxGraph. Я смог интегрировать MxGraph с Angular по этой ссылке ( Как интегрировать mxGraph с Angular 4? ). Даже если я использую 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);
    }

«Тест» пишется несколько раз, и он постоянно растет. Тем не менее, если я понял, это был правильный способ переопределения функции. Конечно, при первой загрузке страницы «Тест» отображается один раз. При переходе к другому компоненту, а затем обратно к нему, он отображается «бесконечное» количество раз (пока я не достигну: «ОШИБКА RangeError: Превышен максимальный размер стека вызовов») ...

Я также пытался удалитьэто переопределение, и, помимо очевидного отсутствия функциональности, та же проблема возникла с функцией "mxDragSource", которая переопределяется с помощью того же подхода.

Как я уже сказал: я недостаточно опытен в javascript, TrueType, MxGraph или Angular, поэтому любые советы, даже если они очевидны, приветствуются!

Спасибо!

1 Ответ

1 голос
/ 08 ноября 2019

При первом запуске кода вы сохраняете событие mouseUp библиотеки mx в переменной и назначаете новую функцию событию mouseUp, в котором вызывается старый mouseUpEvent.

Во второй раз, когда вы запускаете свой код, вы сохраняете текущее событие mouseUp (которое вы изменили) и назначаете функцию, в которой вы вызываете старый mouseUpEvent, то же самое, что вы сохраняли ранее. Там идет ваша рекурсия!

Что вам нужно сделать, так это правильно переопределить стороннюю функцию, чтобы вы не выполняли свой код дважды.

Как это сделать?

Вы можете создатьМиксины и используйте этот миксины в своем компонентеB / Если вы не знаете, что это такое и как это сделать, пожалуйста, воспроизведите вашу проблему в stackblitz Я буду рад помочь вам реализовать его.

...