From e5cd28e0247a8ba27dd2ef7a25946314144d6e98 Mon Sep 17 00:00:00 2001
From: qkiroc <30946345+qkiroc@users.noreply.github.com>
Date: Wed, 6 Nov 2024 19:46:27 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E7=BC=96=E8=BE=91?=
 =?UTF-8?q?=E6=80=81=E6=92=AD=E6=94=BE=E5=8A=A8=E7=94=BB=E5=90=8E,?=
 =?UTF-8?q?=E9=AB=98=E4=BA=AE=E6=A1=86=E9=94=99=E4=BD=8D=E9=97=AE=E9=A2=98?=
 =?UTF-8?q?=20(#11163)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix: 修复编辑态播放动画后,高亮框错位问题

* chore: 移动端工具初始化时自适应容器大小
---
 packages/amis-editor-core/scss/editor.scss    |  5 +++
 packages/amis-editor/src/tpl/style.tsx        | 17 +++++++-
 .../amis-ui/src/components/MobileDevTool.tsx  | 42 ++++++++++++-------
 3 files changed, 48 insertions(+), 16 deletions(-)

diff --git a/packages/amis-editor-core/scss/editor.scss b/packages/amis-editor-core/scss/editor.scss
index 639a7cf0f4f..e3a332ec010 100644
--- a/packages/amis-editor-core/scss/editor.scss
+++ b/packages/amis-editor-core/scss/editor.scss
@@ -888,6 +888,11 @@
   z-index: 1000;
   pointer-events: none;
 }
+.ae-Preview-widgets--no-transition {
+  .ae-Editor-hlbox {
+    transition: none;
+  }
+}
 
 .ae-Editor-rendererCol {
   width: 140px;
diff --git a/packages/amis-editor/src/tpl/style.tsx b/packages/amis-editor/src/tpl/style.tsx
index fe4fe565546..49c075d88c3 100644
--- a/packages/amis-editor/src/tpl/style.tsx
+++ b/packages/amis-editor/src/tpl/style.tsx
@@ -1306,11 +1306,15 @@ setSchemaTpl('animation', () => {
   function playAnimation(animations: any, id: string, type: string) {
     let doc = document;
     const isMobile = (window as any).editorStore.isMobile;
-
     if (isMobile) {
       doc = (document.getElementsByClassName('ae-PreviewIFrame')[0] as any)
         .contentDocument;
     }
+    const highlightDom = doc.getElementById('aePreviewHighlightBox');
+    if (highlightDom) {
+      highlightDom.style.opacity = '0';
+      highlightDom.classList.add('ae-Preview-widgets--no-transition');
+    }
     const el = doc.querySelector(`[name="${id}"]`);
     id = formateId(id);
     const className = `${animations[type].type}-${id}-${type}`;
@@ -1332,6 +1336,17 @@ setSchemaTpl('animation', () => {
 
     timeoutId = setTimeout(() => {
       el?.classList.remove(className);
+
+      if (highlightDom) {
+        const editorId = el?.getAttribute('data-editor-id');
+        const node = (window as any).editorStore.getNodeById(editorId);
+        // 重新计算元素高亮框的位置
+        node.calculateHighlightBox();
+        highlightDom.style.opacity = '1';
+        setTimeout(() => {
+          highlightDom.classList.remove('ae-Preview-widgets--no-transition');
+        }, 150);
+      }
     }, ((animations[type].duration || 1) + (animations[type].delay || 0)) * 1000 + 200);
   }
   const animation = (
diff --git a/packages/amis-ui/src/components/MobileDevTool.tsx b/packages/amis-ui/src/components/MobileDevTool.tsx
index 64265b7e55c..e511f4622b9 100644
--- a/packages/amis-ui/src/components/MobileDevTool.tsx
+++ b/packages/amis-ui/src/components/MobileDevTool.tsx
@@ -1,4 +1,4 @@
-import React, {useEffect} from 'react';
+import React, {useEffect, useRef} from 'react';
 import {Icon} from './icons';
 import {Select} from 'amis-ui';
 import debounce from 'lodash/debounce';
@@ -109,11 +109,8 @@ export default function MobileDevTool(props: {
         localStorage.getItem('amis-mobile-dev-tool-dimension') || 'null'
       ) || dimensions[1]
   );
-  const [scale, setScale] = React.useState(
-    () =>
-      parseInt(localStorage.getItem('amis-mobile-dev-tool-scale') || '0', 10) ||
-      100
-  );
+  const defaultScale = useRef<number>();
+  const [scale, setScale] = React.useState(100);
   const [autoScale, setAutoScale] = React.useState(100);
 
   const {container, previewBody} = props;
@@ -121,13 +118,26 @@ export default function MobileDevTool(props: {
   const resizeObserver = new ResizeObserver(debounce(updateAutoScale, 300));
 
   useEffect(() => {
-    updatePreviewSize({
-      width: dimension.width,
-      height: dimension.height
-    });
-    updatePreviewScale(scale);
+    defaultScale.current = parseInt(
+      localStorage.getItem('amis-mobile-dev-tool-scale') || '0',
+      10
+    );
+  }, []);
+
+  useEffect(() => {
+    if (container && previewBody) {
+      updatePreviewSize({
+        width: dimension.width,
+        height: dimension.height
+      });
+      let scale = defaultScale.current || 100;
+      if (!defaultScale.current) {
+        scale = updateAutoScale();
+        defaultScale.current = scale;
+      }
+      setScale(scale);
 
-    if (container) {
+      updatePreviewScale(scale);
       resizeObserver.observe(container);
     }
     return () => {
@@ -161,17 +171,19 @@ export default function MobileDevTool(props: {
 
   function updateAutoScale() {
     if (!container) {
-      return;
+      return 100;
     }
     const containerRect = container.getBoundingClientRect();
     const {width, height} = containerRect;
     const previewBodyWidth = previewBody?.clientWidth || 375;
     const previewBodyHeight = previewBody?.clientHeight || 667;
-    const scale = Math.min(
+    let scale = Math.min(
       (width - 50) / previewBodyWidth,
       (height * 0.9) / previewBodyHeight
     );
-    setAutoScale(Math.floor(scale * 100));
+    scale = Math.floor(scale * 100);
+    setAutoScale(scale);
+    return scale;
   }
 
   function handleRotateScreen() {