Вопрос нужен, чтобы понять, как кандидат разделяет состояние данных и визуальное представление.
Canvas не хранит состояние в декларативном виде, поэтому его нужно выносить во внешний state. UI-панель слоёв работает с этим состоянием, а Canvas лишь отражает его. Любые изменения должны идти через единый источник данных. Canvas и UI подписываются на одно и то же состояние.
Canvas — императивный API, а UI в React — декларативный. Это ключевое противоречие, которое нужно решить архитектурно.
Состояние сцены должно быть:
вне Canvas
сериализуемым
единым для UI и Canvas
Canvas не является источником истины.
Единое состояние сцены
массив слоёв
свойства объектов
порядок отрисовки
UI-панель слоёв
читает состояние
инициирует изменения (visibility, order, select)
Canvas-адаптер
слушает изменения state
применяет их к Canvas API
UI → state → Canvas
Canvas events → state → UI
// изменение видимости слоя
setLayers(prev => updateVisibility(prev, id))
Canvas при этом:
получает новое состояние
перерисовывает сцену или объект
Canvas не должен быть источником состояния. Синхронизация достигается через внешний state, который управляет и UI, и отрисовкой, обеспечивая предсказуемость и масштабируемость.