Перенаправить все события с одного объекта на другой

Question

Перенаправить все события с одного объекта на другой

1

В настоящее время я пытаюсь написать небольшой движок для холста в vanilla javascript, в моей нынешней ментальной модели того, как он будет работать, пользователь будет создавать экземпляр класса Scene, который будет содержать все объекты, которые будут отображаться, а также их поведение. Будет только одна активная сцена за время на холст, так что сцены, которые в настоящее время не загружены, неактивны. Таким образом, я хотел бы иметь возможность перенаправлять все события, отправленные на холст, в текущую активную сцену. Это будет выглядеть примерно так:

canvas.addEventListener(/* all */, (e) => activeScene.dispatchEvent(e));

но, очевидно, это не сработает.

Есть интересный ответ на аналогичный вопрос: слушайте все события в JavaScript

это что-то похожее на итерацию по всем свойствам окна и регистрацию прослушивателя событий для всех свойств, начинающихся с "on".

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

Альтернативами будут:

пользователь вызывает пользовательскую функцию на холсте, которая затем вызывает соответствующую функцию в текущей активной сцене
Пользователь отправляет настраиваемое событие, как я думал, но также должен добавить прослушиватель событий для этого типа события и перенаправить событие на активную сцену вручную (или я предоставляю функцию для регистрации настраиваемого события и перенаправления событий этого типа на активная сцена)

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

Kwantuum 29 окт. 2018, в 10:07

Источник

0

У каждой сцены может быть свой холст. Показать холст активной сцены, скрыть все остальные.
Chris G 29 окт. 2018, в 08:27
0

@ChrisG Я не понимаю, как это решит мою проблему в любом качестве. Это просто переместит проблему, мне нужно будет иметь глобальный объект, который отслеживает активный холст, а не активную сцену (которые теперь являются синонимами) и отправляет события, которые он получает, на этот холст. Или отправьте событие на все полотна, и им придется проверить, активны ли они, прежде чем обрабатывать событие.
Kwantuum 29 окт. 2018, в 08:54
0

Это предложение об альтернативном подходе, поэтому я разместил его как комментарий, а не как ответ. Позвольте мне кое-что попробовать и вернуться к вам.
Chris G 29 окт. 2018, в 09:20
0

Можете ли вы добавить пример кода к вашему вопросу, который показывает, как пользователь движка настроит, скажем, две сцены? Включая пользователя, добавляющего к ним прослушиватели событий? Я имею в виду, представьте, что у вас уже есть идеальное решение. Как будет выглядеть код пользователя в этом случае?
Chris G 29 окт. 2018, в 17:46

Показать ещё 2 комментария

Теги:

javascript

1 ответ

Ещё вопросы

У каждой сцены может быть свой холст. Показать холст активной сцены, скрыть все остальные.
@ChrisG Я не понимаю, как это решит мою проблему в любом качестве. Это просто переместит проблему, мне нужно будет иметь глобальный объект, который отслеживает активный холст, а не активную сцену (которые теперь являются синонимами) и отправляет события, которые он получает, на этот холст. Или отправьте событие на все полотна, и им придется проверить, активны ли они, прежде чем обрабатывать событие.
Это предложение об альтернативном подходе, поэтому я разместил его как комментарий, а не как ответ. Позвольте мне кое-что попробовать и вернуться к вам.
Можете ли вы добавить пример кода к вашему вопросу, который показывает, как пользователь движка настроит, скажем, две сцены? Включая пользователя, добавляющего к ним прослушиватели событий? Я имею в виду, представьте, что у вас уже есть идеальное решение. Как будет выглядеть код пользователя в этом случае?

Kwantuum · Accepted Answer · 2018-10-30T09-20-00.000Z

Хорошо, после некоторого возиться здесь решение, которое я придумал:

Я перенаправляю все стандартные события, используя eventListeners с этим кодом

for(let key in myObj){
    if(key.startsWith('on')) {
       myObj.addEventListener(key.slice(2), (e) => {otherObj.dispatchEvent(e)});
    }
}

и я перезаписываю метод dispatchEvent() по умолчанию, так что все события, инициированные вручную, перенаправляются независимо от их типа:

myObj.dispatchEvent = (e) => {otherObj.dispatchEvent(e)};

К сожалению, первая часть необходима, потому что стандартные события не запускаются через метод dispatchEvent(). Теоретически это должно перенаправить все события, запущенные на объект (который в моем случае был бы холстом) на другой (активная сцена).