Signal ledger / designed reading stage
designable 技术总结
designable
Transition band / reading fieldLong-form note2022-01-24
Continue through the ledger
designable
作者在直播中，非常详细的解读了 Designable 的源码，本文是根据视频内容以及对源码的理解做个小结。
Core 的入口，将 Core 赋值
globalThis.Designable.Core = Core，Designable 将所有编辑器状态通过 globalThis 储存了下来。
作者认为 Core 应当与框架无关，且在 Designable 应用中，数据源、鼠标位置、拖拽对象等又有非常重要，需要记录当前状态，所以将 Core 中涉及的状态通过 globalThis 记录。
在 @designable/react 中则通过 React 的 Context 储存状态，并提供对应的 hooks 获取状态。
Designable 由事件驱动，所有的用户操作都通过事件发布，然后由具体功能订阅并实现具体逻辑。
在 Core 中 drivers 中的方法负责注册事件订阅，如鼠标事件、键盘事件，并计算与之相关的数据。
比如在 DragDropDriver 中，在初始化时会添加对 mousedown 的监听，在 mousedown 中会添加 mousemove, mouseup 等监听，并计算当前的 dragging, moveEvent, onMouseDownAt, startEvent 更新给 GlobalState，并通过事件发出 GlobalState 等数据。
events 负责定义事件名称及内部数据。
事件驱动的核心实现在 @designable/shared/event
中，在基础的发布订阅模式之上，作者增加了许多在低代码编辑器场景下的特殊逻辑。
在 mousedown 事件计算出需要拖动的目标对象，在 mousemove 事件计算偏移量，并有一些复杂判断，如偏移量超过 x 时认为需要拖动该元素，拖动时需要根据容器以及拖动元素的位置计算。