Release/4.2.1

apps/builder/.gitignore

@@ -107,3 +107,4 @@ cypress/screenshots
 stats.html
 
 public/appInfo.json
+i18n/locales/*.json

apps/builder/package.json

@@ -5,7 +5,7 @@
   "private": true,
   "author": "ILLA Cloud <[email protected]>",
   "license": "Apache-2.0",
-  "version": "4.2.0",
+  "version": "4.2.1",
   "scripts": {
     "dev": "vite --strictPort --force",
     "build-cloud": "NODE_OPTIONS=--max-old-space-size=12288  vite build --mode cloud",
@@ -168,7 +168,7 @@
     "eslint-config-illa": "workspace:*",
     "protoc": "1.0.4",
     "rollup-plugin-copy": "^3.5.0",
-    "rollup-plugin-visualizer": "^5.9.2",
+    "rollup-plugin-visualizer": "^5.12.0",
     "tsconfig": "workspace:*"
   }
 }

apps/builder/src/middleware/reduxAsync/sendMessage/componentsMethod.ts

@@ -7,8 +7,8 @@ import {
 } from "@/api/ws"
 import { TextSignal, TextTarget } from "@/api/ws/textSignal"
 import {
-  UpdateComponentContainerPayload,
   UpdateComponentNodeLayoutInfoPayload,
+  UpdateComponentPositionPayload,
   UpdateComponentSlicePropsPayload,
 } from "@/redux/currentApp/components/componentsPayload"
 import { getNeedDeleteSectionViewDisplayNames } from "@/redux/currentApp/components/componentsReducer"
@@ -150,9 +150,9 @@ export const componentsAsync = (
       )
       break
     }
-    case "updateComponentContainerReducer": {
+    case "updateComponentPositionReducer": {
       const nextComponentTree = buildTreeByMapNode("root", nextComponents)
-      const updateComponentContainerPayload: UpdateComponentContainerPayload =
+      const updateComponentContainerPayload: UpdateComponentPositionPayload =
         payload
       const {
         updateSlices,
@@ -174,8 +174,8 @@ export const componentsAsync = (
           getTextMessagePayload(
             TextSignal.MOVE_STATE,
             TextTarget.COMPONENTS,
-            true,
-            action,
+            false,
+            null,
             teamID,
             uid,
             allNodes.map((node) => {

apps/builder/src/middleware/undoRedo/method/components.tsx

@@ -1,7 +1,7 @@
 import { ComponentTreeNode } from "@illa-public/public-types"
 import { AnyAction } from "@reduxjs/toolkit"
 import { REDUX_ACTION_FROM } from "@/middleware/undoRedo/interface"
-import { UpdateComponentContainerPayload } from "@/redux/currentApp/components/componentsPayload"
+import { UpdateComponentPositionPayload } from "@/redux/currentApp/components/componentsPayload"
 import {
   getComponentMap,
   getOriginalGlobalData,
@@ -118,10 +118,10 @@ export const componentsSnapShot = (
       }
       break
     }
-    case "updateComponentContainerReducer": {
+    case "updateComponentPositionReducer": {
       const layoutInfos = getExecutionWidgetLayoutInfo(prevRootState)
       const originNodeLayoutInfos = (
-        action.payload as UpdateComponentContainerPayload
+        action.payload as UpdateComponentPositionPayload
       ).updateSlices.map((item) => {
         return layoutInfos[item.displayName]
       })
@@ -135,7 +135,7 @@ export const componentsSnapShot = (
         }
       })
       const newAction = {
-        type: "components/updateComponentContainerReducer",
+        type: "components/updateComponentPositionReducer",
         payload: {
           oldParentNodeDisplayName: action.payload.newParentNodeDisplayName,
           newParentNodeDisplayName: action.payload.oldParentNodeDisplayName,

apps/builder/src/page/App/Module/PageNavBar/index.tsx

@@ -1,3 +1,4 @@
+import { isILLAAPiError } from "@illa-public/illa-net"
 import { ILLA_MIXPANEL_EVENT_TYPE } from "@illa-public/mixpanel-utils"
 import { useUpgradeModal } from "@illa-public/upgrade-modal"
 import { getCurrentTeamInfo, getPlanUtils } from "@illa-public/user-data"
@@ -63,7 +64,6 @@ import {
 } from "@/services/apps"
 import { takeSnapShot } from "@/services/history"
 import { trackInEditor } from "@/utils/mixpanelHelper"
-import { isILLAAPiError } from "@/utils/typeHelper"
 import { isMAC } from "@/utils/userAgent"
 import {
   badgeStyle,

apps/builder/src/page/App/components/Actions/ActionPanel/MysqlLikePanel/index.tsx

@@ -1,3 +1,4 @@
+import { isILLAAPiError } from "@illa-public/illa-net"
 import { ILLA_MIXPANEL_EVENT_TYPE } from "@illa-public/mixpanel-utils"
 import { MysqlLikeAction } from "@illa-public/public-types"
 import { isCloudVersion } from "@illa-public/utils"
@@ -24,7 +25,6 @@ import { getAppInfo } from "@/redux/currentApp/appInfo/appInfoSelector"
 import { fetchGenerateSQL } from "@/services/action"
 import { fetchResourceMeta } from "@/services/resource"
 import { trackInEditor } from "@/utils/mixpanelHelper"
-import { isILLAAPiError } from "@/utils/typeHelper"
 import { VALIDATION_TYPES } from "@/utils/validationFactory"
 import { SQLModeSelector } from "../pulicComponent/SQLModeSelector"
 

apps/builder/src/page/App/components/Actions/api.ts

@@ -1,3 +1,4 @@
+import { isILLAAPiError } from "@illa-public/illa-net"
 import {
   ActionContent,
   ActionItem,
@@ -13,7 +14,6 @@ import { componentsActions } from "@/redux/currentApp/components/componentsSlice
 import { fetchCreateAction, fetchDeleteAction } from "@/services/action"
 import store from "@/store"
 import { DisplayNameGenerator } from "@/utils/generators/generateDisplayName"
-import { isILLAAPiError } from "@/utils/typeHelper"
 
 const message = createMessage()
 

apps/builder/src/page/App/components/DotPanel/components/Canvas/renderComponentCanvasContainer.tsx

@@ -197,7 +197,11 @@ const RenderComponentCanvasContainer: FC<
           }
         }
 
-        const { shape: dropResultShape } = dropResult
+        const {
+          shape: dropResultShape,
+          columnNumberWhenDrag,
+          columnNumberWhenDrop,
+        } = dropResult
 
         if (draggedComponents.length === 1) {
           switch (dragEffect) {
@@ -209,6 +213,8 @@ const RenderComponentCanvasContainer: FC<
                 draggedComponents[0].widgetType,
                 draggedComponents[0].displayName,
                 displayName,
+                [],
+                columnNumberWhenDrop / columnNumberWhenDrag,
               )
 
               if (newComponentNode.type === "MODAL_WIDGET") {
@@ -237,51 +243,47 @@ const RenderComponentCanvasContainer: FC<
                 },
               ]
               dispatch(
-                componentsActions.updateComponentContainerReducer({
+                componentsActions.updateComponentPositionReducer({
                   oldParentNodeDisplayName: originParentNode,
                   newParentNodeDisplayName: displayName,
                   updateSlices,
+                  columnNumberWhenDrag,
+                  columnNumberWhenDrop,
                 }),
               )
             }
           }
         }
 
-        if (draggedComponents.length > 1) {
-          switch (dragEffect) {
-            case DRAG_EFFECT.ADD: {
+        if (draggedComponents.length > 1 && dragEffect === DRAG_EFFECT.UPDATE) {
+          const relativeLayoutInfo =
+            getLayoutInfosWithRelativeCombineShape(draggedComponents)
+          const updateSlices = relativeLayoutInfo.map((item) => {
+            const shape = clamWidgetShape(
+              {
+                x: item.layoutInfo.x + dropResultShape.x,
+                y: item.layoutInfo.y + dropResultShape.y,
+                w: item.layoutInfo.w,
+                h: item.layoutInfo.h,
+              },
+              columnNumber,
+              draggedComponents.length > 1,
+            )
+            return {
+              ...shape,
+              h: shape.previewH,
+              displayName: item.displayName,
             }
-
-            case DRAG_EFFECT.UPDATE: {
-              const relativeLayoutInfo =
-                getLayoutInfosWithRelativeCombineShape(draggedComponents)
-
-              const updateSlices = relativeLayoutInfo.map((item) => {
-                const shape = clamWidgetShape(
-                  {
-                    x: item.layoutInfo.x + dropResultShape.x,
-                    y: item.layoutInfo.y + dropResultShape.y,
-                    w: item.layoutInfo.w,
-                    h: item.layoutInfo.h,
-                  },
-                  columnNumber,
-                  draggedComponents.length > 1,
-                )
-                return {
-                  ...shape,
-                  h: shape.previewH,
-                  displayName: item.displayName,
-                }
-              })
-              dispatch(
-                componentsActions.updateComponentContainerReducer({
-                  oldParentNodeDisplayName: originParentNode,
-                  newParentNodeDisplayName: displayName,
-                  updateSlices,
-                }),
-              )
-            }
-          }
+          })
+          dispatch(
+            componentsActions.updateComponentPositionReducer({
+              oldParentNodeDisplayName: originParentNode,
+              newParentNodeDisplayName: displayName,
+              updateSlices,
+              columnNumberWhenDrag,
+              columnNumberWhenDrop,
+            }),
+          )
         }
 
         const mousePosition = cursorPositionRef.current

apps/builder/src/page/App/components/DotPanel/utils/getDragShadow.ts

@@ -496,6 +496,15 @@ export const getDragPreview = (
       result.w,
       result.previewH,
     )
+
+    const clamWidgetResult = clamWidgetShape(
+      {
+        ...result,
+        h: result.previewH,
+      },
+      columnNumber,
+      draggedComponents.length > 1,
+    )
     if (
       draggedComponents.length > 1 &&
       columnNumber !== columnNumberWhenDragged &&
@@ -504,39 +513,22 @@ export const getDragPreview = (
       item.dropResult = {
         shape: undefined,
         canDrop: false,
+        columnNumberWhenDrag: columnNumberWhenDragged,
+        columnNumberWhenDrop: columnNumber,
       }
       return {
-        shape: clamWidgetShape(
-          {
-            ...result,
-            h: result.previewH,
-          },
-          columnNumber,
-          draggedComponents.length > 1,
-        ),
+        shape: clamWidgetResult,
         canDrop: false,
       }
     }
     item.dropResult = {
-      shape: clamWidgetShape(
-        {
-          ...result,
-          h: result.previewH,
-        },
-        columnNumber,
-        draggedComponents.length > 1,
-      ),
+      shape: clamWidgetResult,
       canDrop: true,
+      columnNumberWhenDrag: columnNumberWhenDragged,
+      columnNumberWhenDrop: columnNumber,
     }
     return {
-      shape: clamWidgetShape(
-        {
-          ...result,
-          h: result.previewH,
-        },
-        columnNumber,
-        draggedComponents.length > 1,
-      ),
+      shape: clamWidgetResult,
       canDrop: true,
     }
   } else {

apps/builder/src/page/App/components/InspectPanel/PanelSetters/InputSetter/PaddingInput/index.tsx

@@ -1,12 +1,12 @@
 import PartialIcon from "@assets/rightPagePanel/partial.svg?react"
+import { PADDING_MODE } from "@illa-public/public-types"
 import { get } from "lodash"
 import { FC, FocusEventHandler, useRef } from "react"
 import { useDispatch } from "react-redux"
 import { Input, RadioGroup } from "@illa-design/react"
 import AllIcon from "@/assets/rightPagePanel/all.svg?react"
 import { PanelLabel } from "@/page/App/components/InspectPanel/components/Label"
 import { configActions } from "@/redux/config/configSlice"
-import { PADDING_MODE } from "@/redux/currentApp/components/componentsState"
 import { DirectionPaddingSetterProps } from "./interface"
 import {
   directionPaddingContainerStyle,

apps/builder/src/page/App/components/PagePanel/Modules/Style/Components/PaddingSetter/index.tsx

@@ -1,4 +1,5 @@
 import PartialIcon from "@assets/rightPagePanel/partial.svg?react"
+import { PADDING_MODE } from "@illa-public/public-types"
 import { FC } from "react"
 import { useTranslation } from "react-i18next"
 import { useDispatch, useSelector } from "react-redux"
@@ -12,7 +13,6 @@ import {
   setterContainerStyle,
 } from "@/page/App/components/PagePanel/Modules/Style/style"
 import { componentsActions } from "@/redux/currentApp/components/componentsSlice"
-import { PADDING_MODE } from "@/redux/currentApp/components/componentsState"
 import {
   getCurrentPageBodySection,
   getCurrentPageExecutionResult,

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

@@ -28,6 +28,8 @@ export interface DragInfo {
       previewH: number
     }
     canDrop: boolean
+    columnNumberWhenDrag: number
+    columnNumberWhenDrop: number
   }
   columnNumberWhenDragged: number
   unitWWhenDragged: number

apps/builder/src/page/History/components/SnapShotItem/index.tsx

@@ -1,4 +1,5 @@
 import { Avatar } from "@illa-public/avatar"
+import { isILLAAPiError } from "@illa-public/illa-net"
 import { getILLABuilderURL } from "@illa-public/utils"
 import { formatDate } from "@illa-public/utils"
 import { FC, useCallback, useState } from "react"
@@ -12,7 +13,6 @@ import {
   SnapshotTriggerMode,
 } from "@/redux/currentAppHistory/currentAppHistoryState"
 import { recoverSnapShot, recoverSnapShotWS } from "@/services/history"
-import { isILLAAPiError } from "@/utils/typeHelper"
 import SaveIcon from "./assets/save.svg?react"
 import {
   applyDotStyle,

apps/builder/src/redux/currentApp/components/componentsListener.ts

@@ -1,4 +1,5 @@
 import { ComponentMapNode } from "@illa-public/public-types"
+import { CONTAINER_TYPE } from "@illa-public/public-types"
 import { AnyAction, Unsubscribe, isAnyOf } from "@reduxjs/toolkit"
 import { REDUX_ACTION_FROM } from "@/middleware/undoRedo/interface"
 import {
@@ -30,7 +31,6 @@ import { WidgetLayoutInfo } from "@/redux/currentApp/executionTree/executionStat
 import { AppListenerEffectAPI, AppStartListening } from "@/store"
 import { changeDisplayNameHelper } from "@/utils/changeDisplayNameHelper"
 import IllaUndoRedoManager from "@/utils/undoRedo/undo"
-import { CONTAINER_TYPE } from "./componentsState"
 
 function handleUpdateComponentDisplayNameEffect(
   action: ReturnType<
@@ -140,12 +140,12 @@ const updateComponentReflowComponentsAdapter = (
   action: ReturnType<
     | typeof componentsActions.addComponentReducer
     | typeof componentsActions.updateComponentLayoutInfoReducer
-    | typeof componentsActions.updateComponentContainerReducer
+    | typeof componentsActions.updateComponentPositionReducer
   >,
   currentLayoutInfo: Record<string, WidgetLayoutInfo>,
 ) => {
   switch (action.type) {
-    case "components/updateComponentContainerReducer": {
+    case "components/updateComponentPositionReducer": {
       const { newParentNodeDisplayName, updateSlices } = action.payload
       const square = combineWidgetInfos(updateSlices)
       const effectedDisplayNames = updateSlices.map(
@@ -224,7 +224,7 @@ function handleUpdateComponentReflowEffect(
     action as ReturnType<
       | typeof componentsActions.addComponentReducer
       | typeof componentsActions.updateComponentLayoutInfoReducer
-      | typeof componentsActions.updateComponentContainerReducer
+      | typeof componentsActions.updateComponentPositionReducer
     >,
     currentLayoutInfo,
   )
@@ -472,7 +472,7 @@ export function setupComponentsListeners(
         componentsActions.addComponentReducer,
         componentsActions.updateComponentLayoutInfoReducer,
         componentsActions.batchUpdateComponentLayoutInfoReducer,
-        componentsActions.updateComponentContainerReducer,
+        componentsActions.updateComponentPositionReducer,
       ),
       effect: handleUpdateComponentReflowEffect,
     }),