feat: 支持自定义 bem-tools

packages/designer/src/builtin-simulator/bem-tools/border-detecting.tsx

@@ -77,11 +77,7 @@ export class BorderDetecting extends Component<{ host: BuiltinSimulatorHost }> {
     const canHoverHook = current?.componentMeta.getMetadata()?.experimental?.callbacks?.onHoverHook;
     const canHover = (canHoverHook && typeof canHoverHook === 'function') ? canHoverHook(current) : true;
 
-    if (!canHover) {
-      return null;
-    }
-
-    if (!current || host.viewport.scrolling || host.liveEditing.editing) {
+    if (!canHover || !current || host.viewport.scrolling || host.liveEditing.editing) {
       return null;
     }
     const instances = host.getComponentInstances(current);

packages/designer/src/builtin-simulator/bem-tools/index.tsx

@@ -27,6 +27,12 @@ export class BemTools extends Component<{ host: BuiltinSimulatorHost }> {
         <BorderSelecting key="selecting" host={host} />
         <InsertionView key="insertion" host={host} />
         <BorderResizing key="resizing" host={host} />
+        {
+          host.designer.bemToolsManager.getAllBemTools().map(tools => {
+            const ToolsCls = tools.item;
+            return <ToolsCls key={tools.name} host={host} />;
+          })
+        }
       </div>
     );
   }

packages/designer/src/builtin-simulator/bem-tools/manager.ts

@@ -0,0 +1,37 @@
+import { ComponentType } from 'react';
+import { Designer } from '../../designer';
+import { invariant } from '../../utils';
+import { BuiltinSimulatorHost } from '../../builtin-simulator/host';
+
+export type BemToolsData = {
+  name: string;
+  item: ComponentType<{ host: BuiltinSimulatorHost }>;
+};
+
+export class BemToolsManager {
+  private designer: Designer;
+
+  private toolsContainer: BemToolsData[] = [];
+
+  constructor(designer: Designer) {
+    this.designer = designer;
+  }
+
+  addBemTools(toolsData: BemToolsData) {
+    const found = this.toolsContainer.find(item => item.name === toolsData.name);
+    invariant(!found, `${toolsData.name} already exists`);
+
+    this.toolsContainer.push(toolsData);
+  }
+
+  removeBemTools(name: string) {
+    const index = this.toolsContainer.findIndex(item => item.name === name);
+    if (index !== -1) {
+      this.toolsContainer.splice(index, 1);
+    }
+  }
+
+  getAllBemTools() {
+    return this.toolsContainer;
+  }
+}

packages/designer/src/designer/designer.ts

@@ -24,6 +24,7 @@ import { DropLocation, LocationData, isLocationChildrenDetail } from './location
 import { OffsetObserver, createOffsetObserver } from './offset-observer';
 import { focusing } from './focusing';
 import { SettingTopEntry } from './setting';
+import { BemToolsManager } from '../builtin-simulator/bem-tools/manager';
 
 export interface DesignerProps {
   editor: IEditor;
@@ -55,6 +56,8 @@ export class Designer {
 
   readonly editor: IEditor;
 
+  readonly bemToolsManager = new BemToolsManager(this);
+
   get currentDocument() {
     return this.project.currentDocument;
   }
@@ -228,9 +231,9 @@ export class Designer {
     this.editor.emit(`designer.${event}`, ...args);
   }
 
-  private _dropLocation?: DropLocation;
+  @obx.ref private _dropLocation?: DropLocation;
 
-  get dropLocation() {
+  @computed get dropLocation() {
     return this._dropLocation;
   }
 
@@ -391,7 +394,6 @@ export class Designer {
     this.refreshComponentMetasMap();
     // 完成加载增量资源后发送事件，方便插件监听并处理相关逻辑
     this.editor.emit('designer.incrementalAssetsReady');
-
   }
 
   /**

packages/engine/src/modules/designer-types.ts

@@ -5,6 +5,7 @@ export {
   ILowCodePluginManager,
   ILowCodePluginContext,
   IDesignerCabin,
+  BuiltinSimulatorHost,
 } from '@ali/lowcode-designer';
 
 // 这样做的目的是为了去除 Node / DocumentModel 等的值属性，仅保留类型属性