Merge pull request #3669 from illacloud/beta

refactor: ♻️ refactor resize and drag container
illacloud · Feb 2, 2024 · cb00db8 · cb00db8
2 parents 4b1dfa6 + 43f9d74
commit cb00db8
Show file tree

Hide file tree

Showing 21 changed files with 198 additions and 272 deletions.
diff --git a/README-CN.md b/README-CN.md
@@ -89,7 +89,7 @@ ILLA CLI 使您能够以超乎想象的速度部署 ILLA Builder。 [单击此
 
 加入微信群：  
 
-![IMG_5331](https://github.com/illacloud/illa-builder/assets/112603073/bac15627-213b-46b2-a951-073084bf00d0)
+![IMG_5405](https://github.com/illacloud/illa-builder/assets/112603073/9fd62305-13d0-487c-b9cd-ed7fb88d7448)
 
 
 Discord与Github社区入口

diff --git a/apps/builder/package.json b/apps/builder/package.json
@@ -5,7 +5,7 @@
   "private": true,
   "author": "ILLA Cloud <[email protected]>",
   "license": "Apache-2.0",
-  "version": "4.4.5",
+  "version": "4.4.6",
   "scripts": {
     "dev": "vite --strictPort --force",
     "build-cloud": "NODE_OPTIONS=--max-old-space-size=12288  vite build --mode cloud",

diff --git a/...der/src/page/App/components/DotPanel/components/Canvas/renderComponentCanvasContainer.tsx b/...der/src/page/App/components/DotPanel/components/Canvas/renderComponentCanvasContainer.tsx
@@ -39,7 +39,7 @@ import {
   DRAG_EFFECT,
   DragInfo,
 } from "@/page/App/components/ScaleSquare/components/DragContainer/interface"
-import { useResizingUpdateRealTime } from "@/page/App/components/ScaleSquare/components/InnerResizingContainer/ResizeHandler/hooks"
+import { useResizingUpdateRealTime } from "@/page/App/components/ScaleSquare/components/ResizingAndDragContainer/ResizeHandler/hooks"
 import {
   getIsILLAEditMode,
   getIsLikeProductMode,

diff --git a/...uilder/src/page/App/components/ScaleSquare/components/InnerResizingContainer/interface.ts b/...uilder/src/page/App/components/ScaleSquare/components/InnerResizingContainer/interface.ts
diff --git a/...rResizingContainer/ResizeHandler/hooks.ts → ...ngAndDragContainer/ResizeHandler/hooks.ts b/...rResizingContainer/ResizeHandler/hooks.ts → ...ngAndDragContainer/ResizeHandler/hooks.ts
diff --git a/...ResizingContainer/ResizeHandler/index.tsx → ...gAndDragContainer/ResizeHandler/index.tsx b/...ResizingContainer/ResizeHandler/index.tsx → ...gAndDragContainer/ResizeHandler/index.tsx
diff --git a/...izingContainer/ResizeHandler/interface.ts → ...dDragContainer/ResizeHandler/interface.ts b/...izingContainer/ResizeHandler/interface.ts → ...dDragContainer/ResizeHandler/interface.ts
diff --git a/...rResizingContainer/ResizeHandler/style.ts → ...ngAndDragContainer/ResizeHandler/style.ts b/...rResizingContainer/ResizeHandler/style.ts → ...ngAndDragContainer/ResizeHandler/style.ts
diff --git a/...rResizingContainer/ResizeHandler/utils.ts → ...ngAndDragContainer/ResizeHandler/utils.ts b/...rResizingContainer/ResizeHandler/utils.ts → ...ngAndDragContainer/ResizeHandler/utils.ts
diff --git a/...mponents/InnerResizingContainer/index.tsx → ...onents/ResizingAndDragContainer/index.tsx b/...mponents/InnerResizingContainer/index.tsx → ...onents/ResizingAndDragContainer/index.tsx
@@ -1,9 +1,14 @@
 import { ILLA_MIXPANEL_EVENT_TYPE } from "@illa-public/mixpanel-utils"
 import { getCurrentUserId } from "@illa-public/user-data"
-import { klona } from "klona/json"
+import { klona } from "klona"
 import { get } from "lodash-es"
-import { FC, MouseEvent, memo, useCallback, useMemo } from "react"
+import { FC, MouseEvent, useCallback, useContext, useMemo } from "react"
+import { useTranslation } from "react-i18next"
 import { useDispatch, useSelector } from "react-redux"
+import { DropList, DropListItem, Dropdown } from "@illa-design/react"
+import { UNIT_HEIGHT } from "@/page/App/components/DotPanel/constant/canvas"
+import { AutoHeightWithLimitedContainer } from "@/page/App/components/ScaleSquare/components/AutoHeightWithLimitedContainer"
+import { DEFAULT_MIN_COLUMN } from "@/page/App/components/ScaleSquare/constant/widget"
 import {
   getHoveredComponents,
   getIsILLAEditMode,
@@ -16,50 +21,84 @@ import {
   getTargetCurrentUsersExpendMe,
 } from "@/redux/currentApp/collaborators/collaboratorsSelector"
 import { getComponentDisplayNameMapDepth } from "@/redux/currentApp/components/componentsSelector"
+import { getFirstDragShadowInfo } from "@/redux/currentApp/dragShadow/dragShadowSelector"
 import {
   getExecutionError,
   getExecutionResult,
   getExecutionWidgetLayoutInfo,
+  getIsDragging,
   getResizingComponentIDs,
 } from "@/redux/currentApp/executionTree/executionSelector"
-import store, { RootState } from "@/store"
+import store from "@/store"
+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 { RESIZE_DIRECTION } from "@/widgetLibrary/interface"
 import { widgetBuilder } from "@/widgetLibrary/widgetBuilder"
 import { useMouseHover } from "../../utils/useMouseHover"
+import { DragContainer } from "../DragContainer"
 import { MoveBar } from "../MoveBar/moveBar"
+import { PositionContainer } from "../PositionContainer"
 import ResizeHandler from "./ResizeHandler"
-import { ResizingContainerProps } from "./interface"
+import { ResizingAndDragContainerProps } from "./interface"
 import { resizingContainerStyle, resizingPlaceholderStyle } from "./style"
 
-const InnerResizingContainer: FC<ResizingContainerProps> = (props) => {
+export const ResizingAndDragContainer: FC<ResizingAndDragContainerProps> = (
+  props,
+) => {
   const {
-    children,
-    minHeight,
-    minWidth,
-    width,
-    height,
+    unitW,
     displayName,
+    children,
+    widgetHeight,
+    widgetTop,
+    widgetLeft,
+    widgetWidth,
     widgetType,
     columnNumber,
-    widgetTop,
     parentNodeDisplayName,
   } = props
+
+  const { t } = useTranslation()
+  const shortcut = useContext(ShortCutContext)
+  const firstDragShadow = useSelector(getFirstDragShadowInfo)
+
+  const isResizingWithOthers = firstDragShadow.some((dragShadow) => {
+    return dragShadow?.displayNames?.includes(displayName)
+  })
+
+  const isEditMode = useSelector(getIsILLAEditMode)
+  const selectedComponents = useSelector(getSelectedComponentDisplayNames)
+  const executionResult = useSelector(getExecutionResult)
+  const layoutInfoResult = useSelector(getExecutionWidgetLayoutInfo)
+  const currentWidgetLayoutInfo = layoutInfoResult[displayName]
+  const currentWidgetProps = get(executionResult, displayName, {})
+
+  const isDraggingStateInGlobal = useSelector(getIsDragging)
+
+  const isAutoLimitedMode =
+    get(currentWidgetProps, `dynamicHeight`, "fixed") === "limited"
+
+  const isSelected = useMemo(() => {
+    return selectedComponents.some((currentDisplayName) => {
+      return displayName === currentDisplayName
+    })
+  }, [displayName, selectedComponents])
+
   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 errors = useSelector(getExecutionError)
+  const hasError = useMemo(() => {
     const widgetErrors = errors[displayName] ?? {}
     return Object.keys(widgetErrors).length > 0
-  })
+  }, [displayName, errors])
   const resizingIDs = useSelector(getResizingComponentIDs)
   const isResizingCurrent = resizingIDs.includes(displayName)
   const isGlobalResizing = resizingIDs.length > 0
-  const currentWidgetProps = get(executionResult, displayName, {})
+  const canDrag = widgetType !== "MODAL_WIDGET"
 
   const resizeDirection = useMemo(() => {
     const direction =
@@ -68,13 +107,6 @@ const InnerResizingContainer: FC<ResizingContainerProps> = (props) => {
     return direction || RESIZE_DIRECTION.ALL
   }, [currentWidgetProps.$widgetType, currentWidgetProps.resizeDirection])
 
-  const selectedComponents = useSelector(getSelectedComponentDisplayNames)
-  const isSelected = useMemo(() => {
-    return selectedComponents.some((currentDisplayName) => {
-      return displayName === currentDisplayName
-    })
-  }, [displayName, selectedComponents])
-
   const hoveredComponents = useSelector(getHoveredComponents)
   const isMouseOver =
     hoveredComponents[hoveredComponents.length - 1] === displayName
@@ -175,54 +207,115 @@ const InnerResizingContainer: FC<ResizingContainerProps> = (props) => {
     [displayName, dispatch],
   )
 
-  return (
-    <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}
-          displayName={displayName}
-        />
-      )}
-    </div>
-  )
+  return !isResizingWithOthers ? (
+    <>
+      <PositionContainer x={widgetLeft} y={widgetTop} displayName={displayName}>
+        <Dropdown
+          disabled={!isEditMode}
+          position="right-start"
+          trigger="contextmenu"
+          dropList={
+            <DropList w="184px">
+              <DropListItem
+                value="duplicate"
+                title={t("editor.context_menu.duplicate")}
+                onClick={() => {
+                  CopyManager.copyComponentNodeByDisplayName([displayName])
+                  CopyManager.paste("duplicate")
+                }}
+              />
+              <DropListItem
+                deleted
+                value="delete"
+                title={t("editor.context_menu.delete")}
+                onClick={() => {
+                  shortcut.showDeleteDialog([displayName], "widget", {
+                    source: "manage_delete",
+                  })
+                }}
+              />
+            </DropList>
+          }
+          onVisibleChange={(visible) => {
+            if (visible) {
+              trackInEditor(ILLA_MIXPANEL_EVENT_TYPE.SHOW, {
+                element: "component_management_canvas",
+                parameter1: widgetType,
+              })
+            }
+          }}
+        >
+          <div
+            data-displayname={displayName}
+            data-parentnode={parentNodeDisplayName}
+            onMouseEnter={handleMouseEnter}
+            onMouseLeave={handleMouseLeave}
+            onClick={handleOnSelection}
+            onContextMenu={handleContextMenu}
+            css={resizingContainerStyle(
+              {
+                width: widgetWidth,
+                height: widgetHeight,
+                minWidth: DEFAULT_MIN_COLUMN * unitW,
+                minHeight:
+                  (currentWidgetLayoutInfo?.layoutInfo.minH ?? 3) * UNIT_HEIGHT,
+              },
+              {
+                isLikeProductionMode,
+                isSelected,
+                hasEditors: componentsAttachedUsers.length > 0,
+                isHover: isMouseOver,
+                isDragging: false,
+              },
+            )}
+          >
+            <DragContainer
+              displayName={displayName}
+              parentNodeDisplayName={parentNodeDisplayName}
+              canDrag={canDrag}
+              unitWidth={unitW}
+              columnNumber={columnNumber}
+            >
+              {!isLikeProductionMode &&
+                (isSelected ||
+                  isMouseOver ||
+                  componentsAttachedUsers.length > 0) && (
+                  <MoveBar
+                    isError={hasError}
+                    displayName={displayName}
+                    maxWidth={widgetWidth}
+                    widgetTop={widgetTop}
+                    widgetType={widgetType}
+                    userList={componentsAttachedUsers}
+                    columnNumber={columnNumber}
+                  />
+                )}
+              {isResizingCurrent ? (
+                <div css={resizingPlaceholderStyle} />
+              ) : (
+                <>
+                  {children}
+                  {isEditMode &&
+                    isSelected &&
+                    !isDraggingStateInGlobal &&
+                    isAutoLimitedMode && (
+                      <AutoHeightWithLimitedContainer
+                        containerHeight={widgetHeight}
+                        displayName={displayName}
+                      />
+                    )}
+                </>
+              )}
+            </DragContainer>
+            {isSelected && !isLikeProductionMode && (
+              <ResizeHandler
+                resizeDirection={resizeDirection}
+                displayName={displayName}
+              />
+            )}
+          </div>
+        </Dropdown>
+      </PositionContainer>
+    </>
+  ) : null
 }
-
-InnerResizingContainer.displayName = "NewResizingContainer"
-
-export default memo(InnerResizingContainer)
diff --git a/...components/ResizingContainer/interface.ts → ...nts/ResizingAndDragContainer/interface.ts b/...components/ResizingContainer/interface.ts → ...nts/ResizingAndDragContainer/interface.ts
@@ -1,6 +1,6 @@
 import { ReactNode } from "react"
 
-export interface ResizingContainerProps {
+export interface ResizingAndDragContainerProps {
   unitW: number
   displayName: string
   children: ReactNode

diff --git a/...omponents/InnerResizingContainer/style.ts → ...ponents/ResizingAndDragContainer/style.ts b/...omponents/InnerResizingContainer/style.ts → ...ponents/ResizingAndDragContainer/style.ts
diff --git a/...re/components/ResizingContainer/utils.tsx → ...onents/ResizingAndDragContainer/utils.tsx b/...re/components/ResizingContainer/utils.tsx → ...onents/ResizingAndDragContainer/utils.tsx