From badc6ef041429b7e16b59f86f7cd63d69f2ce489 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=8A=9B=E7=9A=93?= <lihao.ylh@alibaba-inc.com>
Date: Tue, 23 Feb 2021 20:35:16 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E7=82=B9=E5=87=BB?=
 =?UTF-8?q?=E5=A4=A7=E7=BA=B2=E6=A0=91=E8=8A=82=E7=82=B9=E6=97=B6,=20?=
 =?UTF-8?q?=E7=94=BB=E5=B8=83=E4=B9=9F=E6=BB=9A=E5=8A=A8=E5=88=B0=E7=9B=B8?=
 =?UTF-8?q?=E5=BA=94=E4=BD=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../designer/src/builtin-simulator/host.ts    | 73 +++++++++----------
 packages/designer/src/utils/misc.ts           |  8 ++
 2 files changed, 43 insertions(+), 38 deletions(-)
 create mode 100644 packages/designer/src/utils/misc.ts

diff --git a/packages/designer/src/builtin-simulator/host.ts b/packages/designer/src/builtin-simulator/host.ts
index d767d0f70..20e59675e 100644
--- a/packages/designer/src/builtin-simulator/host.ts
+++ b/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,46 +838,42 @@ export class BuiltinSimulatorHost implements ISimulatorHost<BuiltinSimulatorProp
     }
 
     const opt: any = {};
-    const scroll = false;
+    let 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) {
-          scroll = true;
-        }
-      } */
-    } else {
-      /*
-      const rect = this.document.computeRect(node);
-      if (!rect || rect.width === 0 || rect.height === 0) {
-        if (!this.tryScrollAgain && tryTimes < 3) {
-          this.tryScrollAgain = requestAnimationFrame(() => this.scrollToNode(node, null, tryTimes + 1));
-        }
-        return;
-      }
-      const scrollTarget = this.viewport.scrollTarget!;
-      const st = scrollTarget.top;
-      const sl = scrollTarget.left;
-      const { scrollHeight, scrollWidth } = scrollTarget;
-      const { height, width, top, bottom, left, right } = this.viewport.contentBounds;
-
-      if (rect.height > height ? rect.top > bottom || rect.bottom < top : rect.top < top || rect.bottom > bottom) {
-        opt.top = Math.min(rect.top + rect.height / 2 + st - top - height / 2, scrollHeight - height);
-        scroll = true;
-      }
-
-      if (rect.width > width ? rect.left > right || rect.right < left : rect.left < left || rect.right > right) {
-        opt.left = Math.min(rect.left + rect.width / 2 + sl - left - width / 2, scrollWidth - width);
-        scroll = true;
-      } */
+    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;
     }
+    /*
+    const rect = this.document.computeRect(node);
+    if (!rect || rect.width === 0 || rect.height === 0) {
+      if (!this.tryScrollAgain && tryTimes < 3) {
+        this.tryScrollAgain = requestAnimationFrame(() => this.scrollToNode(node, null, tryTimes + 1));
+      }
+      return;
+    }
+    const scrollTarget = this.viewport.scrollTarget!;
+    const st = scrollTarget.top;
+    const sl = scrollTarget.left;
+    const { scrollHeight, scrollWidth } = scrollTarget;
+    const { height, width, top, bottom, left, right } = this.viewport.contentBounds;
+
+    if (rect.height > height ? rect.top > bottom || rect.bottom < top : rect.top < top || rect.bottom > bottom) {
+      opt.top = Math.min(rect.top + rect.height / 2 + st - top - height / 2, scrollHeight - height);
+      scroll = true;
+    }
+
+    if (rect.width > width ? rect.left > right || rect.right < left : rect.left < left || rect.right > right) {
+      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);
diff --git a/packages/designer/src/utils/misc.ts b/packages/designer/src/utils/misc.ts
new file mode 100644
index 000000000..c13aa021f
--- /dev/null
+++ b/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;
+}
\ No newline at end of file