Merge pull request #3665 from illacloud/beta

Release/4.4.3

apps/builder/package.json

@@ -5,7 +5,7 @@
   "private": true,
   "author": "ILLA Cloud <[email protected]>",
   "license": "Apache-2.0",
-  "version": "4.4.2",
+  "version": "4.4.3",
   "scripts": {
     "dev": "vite --strictPort --force",
     "build-cloud": "NODE_OPTIONS=--max-old-space-size=12288  vite build --mode cloud",

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/ResizeHandler/style.ts

@@ -61,7 +61,7 @@ export function applyBarHandlerStyle(
   switch (barPosition) {
     case "t":
       barPositionStyle = css`
-        top: -2px;
+        top: -3px;
         left: 0;
         right: 0;
         height: 5px;
@@ -70,7 +70,7 @@ export function applyBarHandlerStyle(
       break
     case "b":
       barPositionStyle = css`
-        bottom: -2px;
+        bottom: -3px;
         left: 0;
         right: 0;
         height: 5px;
@@ -80,7 +80,7 @@ export function applyBarHandlerStyle(
     case "l":
       barPositionStyle = css`
         bottom: 0;
-        left: -2px;
+        left: -3px;
         top: 0;
         width: 5px;
         cursor: col-resize;
@@ -89,7 +89,7 @@ export function applyBarHandlerStyle(
     case "r":
       barPositionStyle = css`
         bottom: 0;
-        right: -2px;
+        right: -3px;
         top: 0;
         cursor: col-resize;
         width: 5px;
@@ -138,30 +138,30 @@ export function applySquarePointerStyle(
   switch (pointerPosition) {
     case "tl":
       positionStyle = css`
-        top: -2px;
-        left: -2px;
+        top: -3px;
+        left: -3px;
         cursor: nwse-resize;
       `
       break
     case "tr":
       positionStyle = css`
         cursor: nesw-resize;
-        top: -2px;
-        right: -2px;
+        top: -3px;
+        right: -3px;
       `
       break
     case "bl":
       positionStyle = css`
         cursor: nesw-resize;
-        bottom: -2px;
-        left: -2px;
+        bottom: -3px;
+        left: -3px;
       `
       break
     case "br":
       positionStyle = css`
         cursor: nwse-resize;
-        bottom: -2px;
-        right: -2px;
+        bottom: -3px;
+        right: -3px;
       `
       break
     default:

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

@@ -1,21 +1,64 @@
+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 { getExecutionResult } from "@/redux/currentApp/executionTree/executionSelector"
+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 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"
-import { resizingContainerStyle } from "./style"
+import { resizingContainerStyle, resizingPlaceholderStyle } from "./style"
 
 const InnerResizingContainer: FC<ResizingContainerProps> = (props) => {
-  const { children, minHeight, minWidth, width, height, displayName } = props
+  const {
+    children,
+    minHeight,
+    minWidth,
+    width,
+    height,
+    displayName,
+    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) => {
+    const errors = getExecutionError(rootState)
+    const widgetErrors = errors[displayName] ?? {}
+    return Object.keys(widgetErrors).length > 0
+  })
+  const resizingIDs = useSelector(getResizingComponentIDs)
+  const isResizingCurrent = resizingIDs.includes(displayName)
+  const isGlobalResizing = resizingIDs.length > 0
   const currentWidgetProps = get(executionResult, displayName, {})
 
   const resizeDirection = useMemo(() => {
@@ -32,11 +75,144 @@ const InnerResizingContainer: FC<ResizingContainerProps> = (props) => {
     })
   }, [displayName, selectedComponents])
 
+  const hoveredComponents = useSelector(getHoveredComponents)
+  const isMouseOver =
+    hoveredComponents[hoveredComponents.length - 1] === displayName
+
   const isLikeProductionMode = useSelector(getIsLikeProductMode)
+  const attachedUsers = useSelector(getComponentAttachUsers)
+
+  const componentsAttachedUsers = useMemo(() => {
+    return getTargetCurrentUsersExpendMe(
+      attachedUsers,
+      displayName,
+      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 css={resizingContainerStyle(width, height, minWidth, minHeight)}>
-      {children}
+    <div
+      data-displayname={displayName}
+      data-parentnode={parentNodeDisplayName}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+      onClick={handleOnSelection}
+      onContextMenu={handleContextMenu}
+      css={resizingContainerStyle(
+        {
+          width,
+          height,
+          minWidth,
+          minHeight,
+        },
+        {
+          isLikeProductionMode,
+          isSelected,
+          hasEditors: componentsAttachedUsers.length > 0,
+          isHover: isMouseOver,
+          isDragging: false,
+        },
+      )}
+    >
+      {!isLikeProductionMode &&
+        (isSelected || isMouseOver || componentsAttachedUsers.length > 0) && (
+          <MoveBar
+            isError={hasError}
+            displayName={displayName}
+            maxWidth={width}
+            widgetTop={widgetTop}
+            widgetType={widgetType}
+            userList={componentsAttachedUsers}
+            columnNumber={columnNumber}
+          />
+        )}
+      {isResizingCurrent ? <div css={resizingPlaceholderStyle} /> : children}
+
       {isSelected && !isLikeProductionMode && (
         <ResizeHandler
           resizeDirection={resizeDirection}

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

@@ -7,4 +7,8 @@ export interface ResizingContainerProps {
   minHeight: number
   displayName: string
   children: ReactNode
+  widgetType: string
+  columnNumber: number
+  widgetTop: number
+  parentNodeDisplayName: string
 }

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

@@ -1,14 +1,47 @@
 import { css } from "@emotion/react"
+import { getWrapperBorder } from "../../style"
 
 export const resizingContainerStyle = (
-  width: number,
-  height: number,
-  minWidth: number,
-  minHeight: number,
-) => css`
-  width: ${width}px;
-  height: ${height}px;
-  min-width: ${minWidth}px;
-  min-height: ${minHeight}px;
-  position: relative;
+  shapeInfo: {
+    width: number
+    height: number
+    minWidth: number
+    minHeight: number
+  },
+  borderInfo: {
+    isLikeProductionMode: boolean
+    isSelected: boolean
+    hasEditors: boolean
+    isHover: boolean
+    isDragging: boolean
+  },
+) => {
+  const { width, height, minHeight, minWidth } = shapeInfo
+  const {
+    isLikeProductionMode: isLikProductionMode,
+    isSelected,
+    hasEditors,
+    isHover,
+    isDragging,
+  } = borderInfo
+  return css`
+    width: ${width}px;
+    height: ${height}px;
+    min-width: ${minWidth}px;
+    min-height: ${minHeight}px;
+    position: relative;
+    ${getWrapperBorder(
+      isLikProductionMode,
+      isSelected,
+      hasEditors,
+      isHover,
+      isDragging,
+    )}
+  `
+}
+
+export const resizingPlaceholderStyle = css`
+  background-color: rgba(101, 74, 236, 0.1);
+  width: 100%;
+  height: 100%;
 `