Слушайте в iframe объект fabri cjs: измененное событие запускается в верхнем кадре - PullRequest
Новая
       18

Слушайте в iframe объект fabri cjs: измененное событие запускается в верхнем кадре

0 голосов
/ 26 мая 2020

У меня есть модальное окно с холстом fabri cjs в TYPO3 -> BACKEND <- (не связанное с внешним интерфейсом), что позволяет изменять области карты изображений. </p>

Технически это реализовано с помощью

  • приложение состоит из верхнего фрейма и iframe.
  • модальное окно - это тиски DOM, добавленные к родительскому фрейму.
  • фабри cjs холст является дочерним для модального.
  • модальный и холст инициализируется AMD в iframe.
  • все визуальные элементы и представление объектов работают должным образом.

Осталась одна проблема. Я не могу запустить прослушивание событий. 

this.canvas.on('object:modified', Editor.objectModified.bind(this));

Ожидается, что это вызовет функцию objectModified для каждого запущенного объекта: измененное событие.

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

Но эта особая ситуация не является нормальным режимом редактирования, поэтому это не решение.

Кто-нибудь может мне помочь выясняя, как получить эти события, которые запускаются в верхнем фрейме внутри iframe.

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

Проект отверстия опубликован c доступен в https://github.com/evoWeb/imagemap

Edit 1:

Кроме того, я могу сказать, что мышь: move событие продолжается, и при каждом движении в консоль записывается строка.

После того, как я щелкнул по фигуре, запись в журнал больше не происходит. При щелчке по фигуре mouse: down регистрируется один раз, и элементы управления формы становятся видимыми.

Событие mouse: up вообще не срабатывает.

Edit 2:

Я взял все события из http://fabricjs.com/events и проверил, какие события запускаются.

Следующие события регистрируются в консоли 

[
  'object:modified', // only fired after the modal was closed and reopened
  'object:moving', // only fired after the modal is closed
  'object:moved', // only fired after the modal was closed and reopened
  'before:transform',
  'selection:created',
  'mouse:up', // only fired after the modal was closed and reopened
  'mouse:down',
  'mouse:move',
  'mouse:up:before', // only fired after the modal was closed and reopened
  'mouse:down:before',
  'mouse:move:before',
  'mouse:dblclick',
  'mouse:wheel',
  'mouse:over',
  'mouse:out',
  'after:render',
  'object:added',
].forEach((eventName: string) => {
  canvas.on(eventName, (e: FabricEvent) => { console.log(e, eventName);
});

[
  'moving', // after closing the modal
  'moved', // after closing and reopening modal

  'mouseup', // after closing and reopening modal
  'mousedown',
  'mousemove',
  'mouseup:before', // after closing and reopening modal
  'mousedown:before',
  'mousedblclick',
  'mousewheel',
  'mouseover',
  'mouseout',
].forEach((eventName: string) => {
  shape.on(eventName, (e: FabricEvent) => { console.log(e, eventName); });
});
...