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

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

* chore: 移动端工具初始化时自适应容器大小

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;

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 = (

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,25 +109,35 @@ 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;
 
   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() {