Как организовать синхронизацию состояния Canvas и UI-панели слоёв?

Question

Canvas не хранит состояние в декларативном виде, поэтому его нужно выносить во внешний state. UI-панель слоёв работает с этим состоянием, а Canvas лишь отражает его. Любые изменения должны идти через единый источник данных. Canvas и UI подписываются на одно и то же состояние.

YeaHub · Accepted Answer

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