設計器和渲染器處在不同的 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()計算得出主屏幕位置