lowcodeEngine 组件面板的拖拽功能

设计器和渲染器处在不同的 Frame

渲染器以单独的 iframe 嵌入，xxx-simulator-renderer 通过和 host进行通信来和设计器打交道，比如点击渲染画布任意一个位置，需要能计算出点击的组件实例，继而找到设计器对应的 Node 实例，以及组件实例的位置/尺寸信息，让设计器完成辅助 UI 的绘制，如节点选中，hover、拖拽占位符、resize

Simulator模拟器 BuiltinSimulatorHost

host 可以访问设计器的所有模块，由于 renderer 层不负责与设计器相关的交互。所以增加了一层 host，作为通信的中间层。host 可以访问到设计器中所有模块，并提供相关方法供 simulator-renderer 层调用。例如schema 的获取、组件获取等。

project.simulator索引了BuiltinSimulatorHost对象进来相关交互。

BuiltinSimulatorHost创建过程

DesignerPlugin在创建的过程中(-->DesignerView--> DragGhost(BuiltinDragGhostComponent) & ProjectView-->BuiltinSimulatorHostView--->Canvas--->BemTools & Content ---> iframe)

BuiltinSimulatorHostView组件将获取project.simulatorProps中的onMount方法创建BuiltinSimulatorHost对象

viewport

Canvas组件获取dom对象调用simulator.mountViewport挂载；

getBoundingClientRect获取Canvasx组件边界位置，即等同于iframe边界位置

拖拽引擎

拖拽引擎（Dragon）核心完成的工作是将被拖拽对象拖拽到目标位置，涉及到几个概念：

• 被拖拽对象 - DragObject
• 拖拽到的目标位置 - DropLocation
• 拖拽感应区 - ISensor
• 定位事件 - LocateEvent

ISensor

Project.simulatorProps

ComponentsPane（plugincomponentspane index.ts）

组件面板是官方提供的，但是不属于engine-core中默认注册的插件，需要我们在创建设计器时手动注册。

在组件面板主体加载时，会调用API:common.designerCabin.dragon.from方法绑定click事件。

当click事件触发时，进行拖拽事件的绑定，绑定时会获取sensor感应区对所有感应区进行绑定。

通过from的第二个参数传递拖拽目标给dragGhost

DragGhost

DragGhost创建时调用dragon.onDrag注册事件， 当拖拽事件发生时触发事件，进行ghost的渲染

放置dragend

Designer等有拖拽操作的对象用dragon.onDragend注册事件进行处理

位置计算

主窗口内(不包括iframe)拖动时

直接使用e.clientX, e.clientY获取屏幕位置

iframe内拖动时

e.view.document !== document 判断出是在iframe内移动时调用host.viewPort.toGlobalPoint()计算得出主屏幕位置