Как заставить объекты взаимодействовать друг с другом?

Question

[thirteen_bit]

Пишу небольшой решение для редактирования отступов у html-элементов методом drag'n'drop. Попытался сформулировать вопрос в виде задачи. На странице есть некая область редактирования EditArea, внутри неё есть объекты Edge, ширину которых можно изменять объектами Control. При взаимодействии с объектом Control меняется его позиция, также нужно изменить ширину у соответствующей Edge и передать информацию об изменении в EditArea. Я не силен в ООП, ниже добавил классы и описал их отношения через композицию. Прошу подсказать, какой шаблон проектирования подойдет лучше всего к моей задаче. Надеюсь, написал не слишком запутанно, любая подсказка по задаче будет очень ценной, спасибо!

class EditArea {
	#edges = [];
	constructor() {
		this.#edges.push(new Edge());
	}
	sendMessage(edge, width) {
		console.log('Изменена ширина грани: ' + width);
	}
}

class Edge {
	#width;
	#control;
	constructor() {
		this.#control = new Control();
	}
	changeWidth(value) {
		this.#width += value;
	}
}

class Control {
	#position = 0;
	/* обработчик события, срабатываемого при взаимодействии с объектом Control */
	onmove() {
		this.#position += 10;
		// здесь нужно заставить сработать changeWidth у Edge
		// и sendMessage у EditArea
	}
}

let editor = new EditArea();

Answer 1

[Антон Шаманов]

обернуть объекты в прокси или регистрировать обработчики событий

class Control {
  #position = 0;
  on(eventName, listener) {
     if (typeof this['on' + eventName] !== 'function') {
         throw new Error('Event "' + eventName + '" not exists');
     }
     this.addEventListener(eventName, listener);
  }
  fire(eventName) {
       let event = new CustomEvent(eventName, {detail: this});
       return this.dispatchEvent(event);
  }
  onmove() {
    this.#position += 10;
    return this.fire('move'));
  }
}