fix: 修复点击大纲树节点时, 画布也滚动到相应位置

packages/designer/src/builtin-simulator/host.ts

@@ -40,6 +40,7 @@ import clipboard from '../designer/clipboard';
 import { LiveEditing } from './live-editing/live-editing';
 import { Project } from '../project';
 import { Scroller } from '../designer/scroller';
+import { isDOMNodeVisible } from '../utils/misc';
 
 export interface LibraryItem {
   package: string;
@@ -837,22 +838,19 @@ export class BuiltinSimulatorHost implements ISimulatorHost<BuiltinSimulatorProp
     }
 
     const opt: any = {};
-    const scroll = false;
-
-    if (detail) {
-      // TODO:
-      /*
-      const rect = insertion ? insertion.getNearRect() : node.getRect();
-      let y;
     let scroll = false;
-      if (insertion && rect) {
-        y = insertion.isNearAfter() ? rect.bottom : rect.top;
 
-        if (y < bounds.top || y > bounds.bottom) {
+    const componentInstance = this.getComponentInstances(detail?.near?.node || node)?.[0];
+    if (!componentInstance) return;
+    const domNode = this.findDOMNodes(componentInstance)?.[0] as Element;
+    if (!domNode) return;
+    if (!isDOMNodeVisible(domNode, this.viewport)) {
+      const { left, top } = domNode.getBoundingClientRect();
+      const { scrollTop = 0, scrollLeft = 0 } = this.contentDocument?.documentElement!;
+      opt.left = left + scrollLeft;
+      opt.top = top + scrollTop;
       scroll = true;
     }
-      } */
-    } else {
     /*
     const rect = this.document.computeRect(node);
     if (!rect || rect.width === 0 || rect.height === 0) {
@@ -876,7 +874,6 @@ export class BuiltinSimulatorHost implements ISimulatorHost<BuiltinSimulatorProp
       opt.left = Math.min(rect.left + rect.width / 2 + sl - left - width / 2, scrollWidth - width);
       scroll = true;
     } */
-    }
 
     if (scroll && this.scroller) {
       this.scroller.scrollTo(opt);

packages/designer/src/utils/misc.ts

@@ -0,0 +1,8 @@
+import Viewport from '../builtin-simulator/viewport';
+
+export function isDOMNodeVisible(domNode: Element, viewport: Viewport) {
+  const domNodeRect = domNode.getBoundingClientRect();
+  const { width, height } = viewport.contentBounds;
+  const { left, right, top, bottom } = domNodeRect;
+  return left >= 0 && top >= 0 && bottom <= height && right <= width;
+}