fix: 🐛 解决点击组件时无法聚焦到点中的组件上的问题

packages/editor-preset-vision/src/editor.ts

@@ -56,7 +56,7 @@ function upgradePropsReducer(props: any) {
           type: 'JSSlot',
           title: (val.value.props as any)?.slotTitle,
           name: (val.value.props as any)?.slotName,
-          value: val.value.children
+          value: val.value.children,
         };
       } else {
         val = val.value;
@@ -126,7 +126,6 @@ designer.addPropsReducer((props, node) => {
   return props;
 }, TransformStage.Init);
 
-
 function filterReducer(props: any, node: Node): any {
   const filters = node.componentMeta.getMetadata().experimental?.filters;
   if (filters && filters.length) {
@@ -169,7 +168,7 @@ function compatiableReducer(props: any) {
             slotName: val.name,
           },
         },
-      }
+      };
     }
     // 为了能降级到老版本，建议在后期版本去掉以下代码
     // if (isJSExpression(val) && !val.events) {
@@ -264,7 +263,7 @@ skeleton.add({
   props: {
     condition: () => {
       return designer.dragon.dragging && !getTreeMaster(designer).hasVisibleTreeBoard();
-    }
+    },
   },
   content: OutlineBackupPane,
 });

packages/rax-simulator-renderer/src/renderer.ts

@@ -386,36 +386,35 @@ function getClosestNodeInstance(from: any, specId?: string): NodeInstance<any> |
   return null;
 }
 
-function matcher(parent: any) {
-  return parent.__isReactiveComponent && parent.props.componentId;
+function isValidDesignModeRaxComponentInstance(
+  raxComponentInst: any,
+): raxComponentInst is {
+  props: {
+    _leaf: Exclude<NodeInstance<any>['node'], null | undefined>;
+  };
+} {
+  const leaf = raxComponentInst?.props?._leaf;
+  return leaf && typeof leaf === 'object' && leaf.isNode;
 }
 
 function getNodeInstance(dom: HTMLElement): NodeInstance<any> | null {
   const INTERNAL = '_internal';
+
   let instance = Instance.get(dom);
-  let node;
   while (instance && instance[INTERNAL]) {
-    if (matcher(instance)) {
-      node = instance;
-      break;
+    if (isValidDesignModeRaxComponentInstance(instance)) {
+      return {
+        nodeId: instance.props._leaf.getId(),
+        instance: instance,
+        node: instance.props._leaf,
+      };
     }
+
     instance = instance[INTERNAL].__parentInstance;
   }
-  if (!node) {
+
   return null;
 }
-  return {
-    nodeId: node.props.componentId,
-    instance: node,
-  };
-  // return parent;
-  // const instance = fiberNode.stateNode;
-  // if (instance) {
-  //   console.log(instance);
-  // }
-  // return getNodeInstance(fiberNode.return);
-  // return instance;
-}
 
 function checkInstanceMounted(instance: any): boolean {
   if (isElement(instance)) {