fix: 🐛 resize error ids

apps/builder/src/page/App/components/ScaleSquare/components/AutoHeightWithLimitedContainer/index.tsx

@@ -74,13 +74,21 @@ export const AutoHeightWithLimitedContainer: FC<
   const resizeStartCallback: ResizeStartCallback = useCallback(() => {
     setResizeMinHeight(true)
     dispatch(configActions.updateShowDot(true))
-    dispatch(executionActions.setResizingNodeIDsReducer([displayName]))
+    dispatch(
+      executionActions.setResizingNodeIDsReducer([
+        `${displayName}-resize-minHeight`,
+      ]),
+    )
   }, [dispatch, displayName])
 
   const resizeMaxHeightStartCallback: ResizeStartCallback = useCallback(() => {
     setResizeMaxHeight(true)
     dispatch(configActions.updateShowDot(true))
-    dispatch(executionActions.setResizingNodeIDsReducer([displayName]))
+    dispatch(
+      executionActions.setResizingNodeIDsReducer([
+        `${displayName}-resize-maxHeight`,
+      ]),
+    )
   }, [dispatch, displayName])
 
   const resizeMaxHeightCallback: ResizeCallback = useCallback(

apps/builder/src/page/App/components/ScaleSquare/components/InnerResizingContainer/index.tsx

@@ -1,24 +1,34 @@
+import { ILLA_MIXPANEL_EVENT_TYPE } from "@illa-public/mixpanel-utils"
 import { getCurrentUserId } from "@illa-public/user-data"
+import { klona } from "klona/json"
 import { get } from "lodash-es"
-import { FC, memo, useMemo } from "react"
-import { useSelector } from "react-redux"
+import { FC, MouseEvent, memo, useCallback, useMemo } from "react"
+import { useDispatch, useSelector } from "react-redux"
 import {
   getHoveredComponents,
+  getIsILLAEditMode,
   getIsLikeProductMode,
   getSelectedComponentDisplayNames,
 } from "@/redux/config/configSelector"
+import { configActions } from "@/redux/config/configSlice"
 import {
   getComponentAttachUsers,
   getTargetCurrentUsersExpendMe,
 } from "@/redux/currentApp/collaborators/collaboratorsSelector"
+import { getComponentDisplayNameMapDepth } from "@/redux/currentApp/components/componentsSelector"
 import {
   getExecutionError,
   getExecutionResult,
+  getExecutionWidgetLayoutInfo,
   getResizingComponentIDs,
 } from "@/redux/currentApp/executionTree/executionSelector"
-import { RootState } from "@/store"
+import store, { RootState } from "@/store"
+import { FocusManager } from "@/utils/focusManager"
+import { trackInEditor } from "@/utils/mixpanelHelper"
+import { isMAC } from "@/utils/userAgent"
 import { RESIZE_DIRECTION } from "@/widgetLibrary/interface"
 import { widgetBuilder } from "@/widgetLibrary/widgetBuilder"
+import { useMouseHover } from "../../utils/useMouseHover"
 import { MoveBar } from "../MoveBar/moveBar"
 import ResizeHandler from "./ResizeHandler"
 import { ResizingContainerProps } from "./interface"
@@ -35,7 +45,10 @@ const InnerResizingContainer: FC<ResizingContainerProps> = (props) => {
     widgetType,
     columnNumber,
     widgetTop,
+    parentNodeDisplayName,
   } = props
+  const { handleMouseEnter, handleMouseLeave } = useMouseHover()
+  const dispatch = useDispatch()
   const executionResult = useSelector(getExecutionResult)
   const currentUserID = useSelector(getCurrentUserId)
   const hasError = useSelector<RootState, boolean>((rootState) => {
@@ -45,7 +58,7 @@ const InnerResizingContainer: FC<ResizingContainerProps> = (props) => {
   })
   const resizingIDs = useSelector(getResizingComponentIDs)
   const isResizingCurrent = resizingIDs.includes(displayName)
-
+  const isGlobalResizing = resizingIDs.length > 0
   const currentWidgetProps = get(executionResult, displayName, {})
 
   const resizeDirection = useMemo(() => {
@@ -76,8 +89,100 @@ const InnerResizingContainer: FC<ResizingContainerProps> = (props) => {
       currentUserID,
     )
   }, [attachedUsers, currentUserID, displayName])
+
+  const handleOnSelection = (e: MouseEvent<HTMLDivElement>) => {
+    const rootState = store.getState()
+    const isEditMode = getIsILLAEditMode(rootState)
+    const displayNameMapDepth = getComponentDisplayNameMapDepth(rootState)
+    const widgetExecutionLayoutInfo = getExecutionWidgetLayoutInfo(rootState)
+
+    e.stopPropagation()
+
+    if (isGlobalResizing || !isEditMode) return
+    FocusManager.switchFocus("canvas", {
+      displayName: displayName,
+      type: "component",
+      clickPosition: [],
+    })
+    trackInEditor(ILLA_MIXPANEL_EVENT_TYPE.SELECT, {
+      element: "component",
+      parameter1: "click",
+    })
+
+    if ((isMAC() && e.metaKey) || e.shiftKey || (!isMAC() && e.ctrlKey)) {
+      let currentSelectedDisplayName = klona(selectedComponents)
+      const index = currentSelectedDisplayName.findIndex(
+        (currentDisplayName) => displayName === currentDisplayName,
+      )
+      if (index !== -1) {
+        currentSelectedDisplayName.splice(index, 1)
+      } else {
+        currentSelectedDisplayName.push(displayName)
+      }
+
+      const depths = currentSelectedDisplayName.map((displayName) => {
+        return displayNameMapDepth[displayName]
+      })
+      let isEqual = depths.every((depth) => depth === depths[0])
+      if (!isEqual) {
+        return
+      }
+      if (currentSelectedDisplayName.length > 1) {
+        const firstParentNode =
+          widgetExecutionLayoutInfo[currentSelectedDisplayName[0]].parentNode
+        const isSameParentNode = currentSelectedDisplayName.every(
+          (displayName) => {
+            const parentNode = widgetExecutionLayoutInfo[displayName].parentNode
+            return parentNode === firstParentNode
+          },
+        )
+        if (!isSameParentNode) {
+          const lastParentNode =
+            widgetExecutionLayoutInfo[
+              currentSelectedDisplayName[currentSelectedDisplayName.length - 1]
+            ].parentNode
+          currentSelectedDisplayName = currentSelectedDisplayName.filter(
+            (displayName) => {
+              const currentParentNode =
+                widgetExecutionLayoutInfo[displayName].parentNode
+              return lastParentNode === currentParentNode
+            },
+          )
+        }
+      }
+      currentSelectedDisplayName = Array.from(
+        new Set(currentSelectedDisplayName),
+      )
+      dispatch(
+        configActions.updateSelectedComponent(currentSelectedDisplayName),
+      )
+      return
+    }
+
+    dispatch(configActions.updateSelectedComponent([displayName]))
+  }
+
+  const handleContextMenu = useCallback(
+    (e: MouseEvent<HTMLDivElement>) => {
+      FocusManager.switchFocus("canvas", {
+        displayName: displayName,
+        type: "component",
+        clickPosition: [],
+      })
+      e.stopPropagation()
+      dispatch(configActions.updateSelectedComponent([displayName]))
+    },
+    [displayName, dispatch],
+  )
+
   return (
     <div
+      data-displayname={displayName}
+      data-parentnode={parentNodeDisplayName}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+      onClick={handleOnSelection}
+      onContextMenu={handleContextMenu}
       css={resizingContainerStyle(
         {
           width,

apps/builder/src/page/App/components/ScaleSquare/components/InnerResizingContainer/interface.ts

@@ -10,4 +10,5 @@ export interface ResizingContainerProps {
   widgetType: string
   columnNumber: number
   widgetTop: number
+  parentNodeDisplayName: string
 }

apps/builder/src/page/App/components/ScaleSquare/components/ResizingContainer/index.tsx

@@ -29,6 +29,7 @@ export const ResizingContainer: FC<ResizingContainerProps> = (props) => {
     widgetWidth,
     widgetType,
     columnNumber,
+    parentNodeDisplayName,
   } = props
 
   const firstDragShadow = useSelector(getFirstDragShadowInfo)
@@ -69,6 +70,7 @@ export const ResizingContainer: FC<ResizingContainerProps> = (props) => {
           widgetType={widgetType}
           columnNumber={columnNumber}
           widgetTop={widgetTop}
+          parentNodeDisplayName={parentNodeDisplayName}
         >
           <>
             {children}

apps/builder/src/page/App/components/ScaleSquare/components/WrapperContainer/index.tsx

@@ -1,28 +1,20 @@
 import { ILLA_MIXPANEL_EVENT_TYPE } from "@illa-public/mixpanel-utils"
-import { klona } from "klona/json"
 import { get } from "lodash-es"
-import { FC, MouseEvent, memo, useCallback, useContext, useMemo } from "react"
+import { FC, memo, useContext, useMemo } from "react"
 import { useTranslation } from "react-i18next"
-import { useDispatch, useSelector } from "react-redux"
+import { useSelector } from "react-redux"
 import { DropList, DropListItem, Dropdown } from "@illa-design/react"
-import { useMouseHover } from "@/page/App/components/ScaleSquare/utils/useMouseHover"
 import {
   getIsILLAEditMode,
   getSelectedComponentDisplayNames,
 } from "@/redux/config/configSelector"
-import { configActions } from "@/redux/config/configSlice"
-import { getComponentDisplayNameMapDepth } from "@/redux/currentApp/components/componentsSelector"
 import {
   getExecutionError,
   getExecutionResult,
-  getExecutionWidgetLayoutInfo,
-  getIsResizing,
 } from "@/redux/currentApp/executionTree/executionSelector"
 import { CopyManager } from "@/utils/copyManager"
-import { FocusManager } from "@/utils/focusManager"
 import { trackInEditor } from "@/utils/mixpanelHelper"
 import { ShortCutContext } from "@/utils/shortcut/shortcutProvider"
-import { isMAC } from "@/utils/userAgent"
 import { WrapperContainerProps } from "./interface"
 import { applyWrapperPendingStyle, hoverHotSpotStyle } from "./style"
 
@@ -34,16 +26,11 @@ const WrapperContainer: FC<WrapperContainerProps> = (props) => {
     widgetType,
     children,
   } = props
-  const { handleMouseEnter, handleMouseLeave } = useMouseHover()
   const executionResult = useSelector(getExecutionResult)
   const { t } = useTranslation()
   const shortcut = useContext(ShortCutContext)
-  const widgetExecutionLayoutInfo = useSelector(getExecutionWidgetLayoutInfo)
 
-  const dispatch = useDispatch()
-  const displayNameMapDepth = useSelector(getComponentDisplayNameMapDepth)
   const selectedComponents = useSelector(getSelectedComponentDisplayNames)
-  const isResizing = useSelector(getIsResizing)
   const isEditMode = useSelector(getIsILLAEditMode)
   const errors = useSelector(getExecutionError)
 
@@ -65,100 +52,6 @@ const WrapperContainer: FC<WrapperContainerProps> = (props) => {
     (realProps?.dynamicMaxHeight === widgetHeight ||
       realProps?.dynamicMinHeight === widgetHeight)
 
-  const handleOnSelection = useCallback(
-    (e: MouseEvent<HTMLDivElement>) => {
-      e.stopPropagation()
-
-      if (isResizing || !isEditMode) return
-      FocusManager.switchFocus("canvas", {
-        displayName: displayName,
-        type: "component",
-        clickPosition: [],
-      })
-      trackInEditor(ILLA_MIXPANEL_EVENT_TYPE.SELECT, {
-        element: "component",
-        parameter1: "click",
-      })
-
-      if ((isMAC() && e.metaKey) || e.shiftKey || (!isMAC() && e.ctrlKey)) {
-        let currentSelectedDisplayName = klona(selectedComponents)
-        const index = currentSelectedDisplayName.findIndex(
-          (currentDisplayName) => displayName === currentDisplayName,
-        )
-        if (index !== -1) {
-          currentSelectedDisplayName.splice(index, 1)
-        } else {
-          currentSelectedDisplayName.push(displayName)
-        }
-
-        const depths = currentSelectedDisplayName.map((displayName) => {
-          return displayNameMapDepth[displayName]
-        })
-        let isEqual = depths.every((depth) => depth === depths[0])
-        if (!isEqual) {
-          return
-        }
-        if (currentSelectedDisplayName.length > 1) {
-          const firstParentNode =
-            widgetExecutionLayoutInfo[currentSelectedDisplayName[0]].parentNode
-          const isSameParentNode = currentSelectedDisplayName.every(
-            (displayName) => {
-              const parentNode =
-                widgetExecutionLayoutInfo[displayName].parentNode
-              return parentNode === firstParentNode
-            },
-          )
-          if (!isSameParentNode) {
-            const lastParentNode =
-              widgetExecutionLayoutInfo[
-                currentSelectedDisplayName[
-                  currentSelectedDisplayName.length - 1
-                ]
-              ].parentNode
-            currentSelectedDisplayName = currentSelectedDisplayName.filter(
-              (displayName) => {
-                const currentParentNode =
-                  widgetExecutionLayoutInfo[displayName].parentNode
-                return lastParentNode === currentParentNode
-              },
-            )
-          }
-        }
-        currentSelectedDisplayName = Array.from(
-          new Set(currentSelectedDisplayName),
-        )
-        dispatch(
-          configActions.updateSelectedComponent(currentSelectedDisplayName),
-        )
-        return
-      }
-
-      dispatch(configActions.updateSelectedComponent([displayName]))
-    },
-    [
-      dispatch,
-      displayName,
-      displayNameMapDepth,
-      isEditMode,
-      isResizing,
-      selectedComponents,
-      widgetExecutionLayoutInfo,
-    ],
-  )
-
-  const handleContextMenu = useCallback(
-    (e: MouseEvent<HTMLDivElement>) => {
-      FocusManager.switchFocus("canvas", {
-        displayName: displayName,
-        type: "component",
-        clickPosition: [],
-      })
-      e.stopPropagation()
-      dispatch(configActions.updateSelectedComponent([displayName]))
-    },
-    [displayName, dispatch],
-  )
-
   return (
     <Dropdown
       disabled={!isEditMode}
@@ -199,10 +92,6 @@ const WrapperContainer: FC<WrapperContainerProps> = (props) => {
         css={hoverHotSpotStyle}
         data-displayname={displayName}
         data-parentnode={parentNodeDisplayName}
-        onMouseEnter={handleMouseEnter}
-        onMouseLeave={handleMouseLeave}
-        onClick={handleOnSelection}
-        onContextMenu={handleContextMenu}
       >
         <div
           css={applyWrapperPendingStyle({

apps/builder/src/widgetLibrary/ChatWidget/chat.tsx

@@ -72,7 +72,11 @@ export const ChatWidget: FC<ChatWidgetProps> = (props) => {
   const handleResizeStart: ResizeStartCallback = (e) => {
     e.preventDefault()
     e.stopPropagation()
-    dispatch(executionActions.setResizingNodeIDsReducer([displayName]))
+    dispatch(
+      executionActions.setResizingNodeIDsReducer([
+        `${displayName}-resize-footer`,
+      ]),
+    )
   }
 
   const handleOnResizeStop: ResizeCallback = useCallback(

apps/builder/src/widgetLibrary/DataGridWidget/dataGrid.tsx

@@ -412,7 +412,11 @@ export const DataGridWidget: FC<BaseDataGridProps> = (props) => {
             toolbar: toolbar,
           }}
           onColumnHeaderEnter={() => {
-            dispatch(executionActions.setResizingNodeIDsReducer([displayName]))
+            dispatch(
+              executionActions.setResizingNodeIDsReducer([
+                `${displayName}-column-header-resize`,
+              ]),
+            )
             isInnerDragging.current = true
           }}
           onColumnHeaderLeave={() => {