impaktapps-ui-builder 0.0.382460 → 1.0.0

package/redux/currentApp/components/componentsReducer.ts

@@ -0,0 +1,1150 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { CaseReducer, PayloadAction } from "@reduxjs/toolkit"
+import { klona } from "klona/json"
+import { difference, set, unset } from "lodash-es"
+import {
+  BatchUpdateComponentNodeLayoutInfoPayload,
+  LayoutInfo,
+  UpdateComponentNodeLayoutInfoPayload,
+  UpdateComponentPositionPayload,
+  UpdateComponentSlicePropsPayload,
+} from "@/redux/currentApp/components/componentsPayload"
+import { searchComponentFromMap } from "@/redux/currentApp/components/componentsSelector"
+import {
+  // AddModalComponentPayload,
+  AddSectionViewByConfigPayload,
+  AddSectionViewPayload,
+  AddTargetPageSectionPayload,
+  ComponentMapNode,
+  ComponentTreeNode,
+  ComponentsInitialState,
+  ComponentsState,
+  DeleteComponentNodePayload,
+  DeleteCurrentPageStylePayload,
+  DeleteGlobalStatePayload,
+  DeletePageNodePayload,
+  DeleteSectionViewPayload,
+  DeleteSubPageViewNodePayload,
+  DeleteTargetPageSectionPayload,
+  // RootComponentNode,
+  RootComponentNodeProps,
+  SectionViewShape,
+  SetGlobalStatePayload,
+  SortComponentNodeChildrenPayload,
+  UpdateComponentDisplayNamePayload,
+  UpdateComponentNodeHeightPayload,
+  UpdateComponentPropsPayload,
+  UpdateComponentReflowPayload,
+  UpdateCurrentPageStylePayload,
+  UpdateSectionViewPropsPayload,
+  // UpdateTargetPageLayoutPayload,
+  UpdateTargetPagePropsPayload,
+  ViewportSizeType,
+} from "@/redux/currentApp/components/componentsState"
+import {
+  flatTreeToMap, generateNewViewItem, generateNewViewItemFromBodySectionConfig, getNewWidgetPropsByUpdateSlice, isObject,
+  // transTreeToMap
+} from "@/redux/utils"
+import { generateSectionConfig, generateSectionContainerConfig } from "@/utils/generators/generatePageOrSectionConfig"
+import { DisplayNameGenerator } from "@/utils/generators/generateDisplayName"
+import _ from "lodash"
+
+function removeDisplayNames(
+  targetComponentNode: ComponentMapNode,
+  components: ComponentsState,
+) {
+  const needDeleteDisplayNames: string[] = [targetComponentNode.displayName]
+  delete components[targetComponentNode.displayName]
+  targetComponentNode.childrenNode?.forEach((childDisplayName) => {
+    return needDeleteDisplayNames.push(
+      ...removeDisplayNames(components[childDisplayName], components),
+    )
+  })
+
+  return needDeleteDisplayNames
+}
+
+export const initComponentReducer: CaseReducer<
+  ComponentsState,
+  PayloadAction<ComponentsState>
+> = (_state, action) => {
+  return action.payload
+}
+
+// update real-time
+export const addComponentReducer: CaseReducer<
+  ComponentsState,
+  PayloadAction<ComponentTreeNode[]>
+> = (state, action) => {
+  action.payload.forEach((dealRootNode) => {
+    const dealNodeMap = flatTreeToMap(dealRootNode)
+    if (state == null || dealRootNode.parentNode == null) {
+      return state
+    } else {
+      const parentNode = searchComponentFromMap(state, dealRootNode.parentNode)
+      if (parentNode != null) {
+        if (dealRootNode.props) {
+          dealRootNode.props = getNewWidgetPropsByUpdateSlice(
+            dealRootNode.props ?? {},
+            {},
+          )
+        }
+        if (!Array.isArray(parentNode.childrenNode)) {
+          parentNode.childrenNode = [dealRootNode.displayName]
+        } else {
+          parentNode.childrenNode.push(dealRootNode.displayName)
+        }
+        Object.keys(dealNodeMap).forEach((key) => {
+          const node = dealNodeMap[key]
+          if (node.props) {
+            node.props = getNewWidgetPropsByUpdateSlice(node.props ?? {}, {})
+          }
+          state[key] = node
+        })
+      }
+    }
+  })
+}
+
+// export const addModalComponentReducer: CaseReducer<
+//   ComponentsState,
+//   PayloadAction<AddModalComponentPayload>
+// > = (state, action) => {
+//   const { currentPageDisplayName, modalComponentNode } = action.payload
+//   if (!currentPageDisplayName || !modalComponentNode) {
+//     return state
+//   }
+//   const currentPageNode = searchComponentFromMap(state, currentPageDisplayName)
+//   if (currentPageNode == null || !Array.isArray(currentPageNode.childrenNode))
+//     return state
+//   const modalSectionNodeDisplayName = currentPageNode.childrenNode.find(
+//     (childDisplayName) => {
+//       return state[childDisplayName].type === "MODAL_SECTION_NODE"
+//     },
+//   )
+//   if (!modalSectionNodeDisplayName) {
+//     const newModalSectionNode = transTreeToMap(
+//       generateModalSectionConfig(currentPageDisplayName, "modalSection"),
+//     )
+//     modalComponentNode.parentNode = newModalSectionNode.displayName
+//     newModalSectionNode.childrenNode = [modalComponentNode.displayName]
+//     currentPageNode.childrenNode.push(newModalSectionNode.displayName)
+//     state[newModalSectionNode.displayName] = newModalSectionNode
+//   } else {
+//     modalComponentNode.parentNode = modalSectionNodeDisplayName
+//     if (!Array.isArray(state[modalSectionNodeDisplayName].childrenNode)) {
+//       state[modalSectionNodeDisplayName].childrenNode = []
+//     }
+//     const needAddNode = flatTreeToMap(modalComponentNode)
+//     Object.keys(needAddNode).forEach((key) => {
+//       const node = needAddNode[key]
+//       if (node.props) {
+//         node.props = getNewWidgetPropsByUpdateSlice(node.props ?? {}, {})
+//       }
+//       state[key] = node
+//     })
+//     state[modalSectionNodeDisplayName].childrenNode.push(
+//       modalComponentNode.displayName,
+//     )
+//   }
+// }
+
+export const deleteComponentNodeReducer: CaseReducer<
+  ComponentsState,
+  PayloadAction<DeleteComponentNodePayload>
+> = (state, action) => {
+  const { displayNames } = action.payload
+  if (state == null) {
+    return
+  }
+  const rootNode = state
+  const tempTargetNode = searchComponentFromMap(rootNode, displayNames[0])
+  if (!tempTargetNode) return
+  const parentNodeDisplayName = tempTargetNode.parentNode
+  const parentNode = searchComponentFromMap(rootNode, parentNodeDisplayName)
+  if (!parentNode || !Array.isArray(parentNode.childrenNode)) return
+  const needRemoveDisplayName: string[] = []
+  const newChildrenNode = parentNode.childrenNode.filter((childDisplayName) => {
+    if (displayNames.includes(childDisplayName)) {
+      const removedDisplayNames = removeDisplayNames(
+        state[childDisplayName],
+        state,
+      )
+      needRemoveDisplayName.push(...removedDisplayNames)
+      return false
+    }
+    return true
+  })
+  parentNode.childrenNode = newChildrenNode
+  DisplayNameGenerator.removeDisplayNameMulti(needRemoveDisplayName)
+}
+
+export const deletePageNodeReducer: CaseReducer<
+  ComponentsState,
+  PayloadAction<DeletePageNodePayload>
+> = (state, action) => {
+  const { displayName } = action.payload
+  if (state == null) {
+    return
+  }
+  const rootNode = state.root
+
+  const searchNode = searchComponentFromMap(state, displayName)
+  if (!searchNode) return
+  const parentNode = rootNode
+  const childrenNodes = parentNode.childrenNode
+  const currentIndex = childrenNodes.findIndex((value) => {
+    return value === searchNode.displayName
+  })
+  if (currentIndex === -1) return
+  const indexOfSortedKey = parentNode.props?.pageSortedKey.findIndex(
+    (key: string) => key === displayName,
+  )
+  if (indexOfSortedKey === -1) return
+  const targetNode = childrenNodes[currentIndex]
+  const needDeleteDisplayNames = removeDisplayNames(state[targetNode], state)
+  DisplayNameGenerator.removeDisplayNameMulti(needDeleteDisplayNames)
+  childrenNodes.splice(currentIndex, 1)
+  parentNode.props!.pageSortedKey.splice(indexOfSortedKey, 1)
+}
+
+export const sortComponentNodeChildrenReducer: CaseReducer<
+  ComponentsState,
+  PayloadAction<SortComponentNodeChildrenPayload>
+> = (state, action) => {
+  const { parentDisplayName, newChildrenNode } = action.payload
+  const parentNode = searchComponentFromMap(state, parentDisplayName)
+  if (!parentNode) return
+
+  parentNode.childrenNode = newChildrenNode
+}
+
+export const updateComponentPropsReducer: CaseReducer<
+  ComponentsState,
+  PayloadAction<UpdateComponentPropsPayload>
+> = (state, action) => {
+  const { displayName, updateSlice } = action.payload
+  if (!isObject(updateSlice) || !displayName) {
+    return
+  }
+  const node = searchComponentFromMap(state, displayName)
+  if (!node) return
+  const widgetProps = node.props || {}
+  const clonedWidgetProps = klona(widgetProps)
+  node.props = getNewWidgetPropsByUpdateSlice(updateSlice, clonedWidgetProps)
+}
+
+export const setComponentPropsReducer: CaseReducer<
+  ComponentsState,
+  PayloadAction<UpdateComponentPropsPayload>
+> = (state, action) => {
+  const { displayName, updateSlice } = action.payload
+  if (!isObject(updateSlice) || !displayName) {
+    return
+  }
+  const node = searchComponentFromMap(state, displayName)
+  if (!node) return
+  node.props = getNewWidgetPropsByUpdateSlice(updateSlice, {})
+}
+
+export const updateMultiComponentPropsReducer: CaseReducer<
+  ComponentsState,
+  PayloadAction<UpdateComponentPropsPayload[]>
+> = (state, action) => {
+  action.payload.forEach(({ displayName, updateSlice }) => {
+    if (!isObject(updateSlice) || !displayName) {
+      return
+    }
+    const node = searchComponentFromMap(state, displayName)
+    if (!node) return
+    const widgetProps = node.props || {}
+    const clonedWidgetProps = klona(widgetProps)
+    node.props = getNewWidgetPropsByUpdateSlice(updateSlice, clonedWidgetProps)
+  })
+}
+
+export const batchUpdateMultiComponentSlicePropsReducer: CaseReducer<
+  ComponentsState,
+  PayloadAction<UpdateComponentSlicePropsPayload[]>
+> = (state, action) => {
+  action.payload.forEach(({ displayName, propsSlice }) => {
+    if (!isObject(propsSlice) || !displayName) {
+      return
+    }
+    const node = searchComponentFromMap(state, displayName)
+    if (!node) return
+    const widgetProps = node.props || {}
+    const clonedWidgetProps = klona(widgetProps)
+    Object.keys(propsSlice).forEach((path) => {
+      const newValue = propsSlice[path]
+      set(clonedWidgetProps, path, newValue)
+    })
+    node.props = clonedWidgetProps
+  })
+}
+
+export const updateComponentDisplayNameReducer: CaseReducer<
+  ComponentsState,
+  PayloadAction<UpdateComponentDisplayNamePayload>
+> = (state, action) => {
+  const { displayName, newDisplayName } = action.payload
+  DisplayNameGenerator.removeDisplayName(displayName)
+  DisplayNameGenerator.addDisplayNames([newDisplayName])
+  if (!newDisplayName || !displayName) {
+    return
+  }
+  const node = searchComponentFromMap(state, displayName)
+  if (!node) return
+  delete state[displayName]
+  node.displayName = newDisplayName
+  state[newDisplayName] = node
+  if (Array.isArray(node.childrenNode)) {
+    node.childrenNode.forEach((child) => {
+      state[child].parentNode = newDisplayName
+    })
+  }
+  const parentNode = searchComponentFromMap(state, node.parentNode)
+  if (parentNode && parentNode.props) {
+    parentNode.childrenNode = parentNode.childrenNode.map((child) => {
+      if (child === displayName) {
+        return newDisplayName
+      }
+      return child
+    })
+    if (Array.isArray(parentNode.props.pageSortedKey)) {
+      const indexOfOldDisplayName = parentNode.props.pageSortedKey.findIndex(
+        (originDisplayName) => originDisplayName === displayName,
+      )
+      if (indexOfOldDisplayName !== -1) {
+        parentNode.props.pageSortedKey.splice(
+          indexOfOldDisplayName,
+          1,
+          newDisplayName,
+        )
+      }
+    }
+    if (Array.isArray(parentNode.props.viewSortedKey)) {
+      const indexOfOldDisplayName = parentNode.props.viewSortedKey.findIndex(
+        (originDisplayName) => originDisplayName === displayName,
+      )
+      if (indexOfOldDisplayName !== -1) {
+        parentNode.props.pageSortedKey.splice(
+          indexOfOldDisplayName,
+          1,
+          newDisplayName,
+        )
+      }
+    }
+    if (parentNode.displayName === "root" && parentNode.props) {
+      if (parentNode.props.homepageDisplayName === displayName) {
+        parentNode.props.homepageDisplayName = newDisplayName
+      }
+      if (!parentNode.props.homepageDisplayName) {
+        parentNode.props.homepageDisplayName = parentNode.props.pageSortedKey[0]
+      }
+    }
+  }
+}
+
+const scaleChildrenNodeHelper = (
+  state: ComponentsState,
+  displayName: string,
+  columnNumberWhenDrag: number,
+  columnNumberWhenDrop: number,
+) => {
+  const targetNode = searchComponentFromMap(state, displayName)
+  if (!targetNode) return
+  if (Array.isArray(targetNode.childrenNode)) {
+    targetNode.childrenNode.forEach((nodeDisplayName) =>
+      scaleChildrenNodeHelper(
+        state,
+        nodeDisplayName,
+        columnNumberWhenDrag,
+        columnNumberWhenDrop,
+      ),
+    )
+  }
+  targetNode.w = Math.floor(
+    targetNode.w * (columnNumberWhenDrop / columnNumberWhenDrag),
+  )
+  targetNode.x = Math.floor(
+    targetNode.x * (columnNumberWhenDrop / columnNumberWhenDrag),
+  )
+}
+export const updateComponentPositionReducer: CaseReducer<
+  ComponentsState,
+  PayloadAction<UpdateComponentPositionPayload>
+> = (state, action) => {
+  const {
+    oldParentNodeDisplayName,
+    newParentNodeDisplayName,
+    updateSlices,
+    columnNumberWhenDrag = 1,
+    columnNumberWhenDrop = 1,
+  } = action.payload
+
+  if (oldParentNodeDisplayName === newParentNodeDisplayName) {
+    updateSlices.forEach((slice) => {
+      const currentNode = searchComponentFromMap(state, slice.displayName)
+      if (!currentNode) return
+      currentNode.x = slice.x
+      currentNode.y = slice.y
+      currentNode.w = slice.w
+      currentNode.h = slice.h
+    })
+    return
+  }
+
+  updateSlices.forEach((slice) => {
+    // delete Old
+    const currentNode = searchComponentFromMap(state, slice.displayName)
+    if (!currentNode) return
+    const olaParentNode = searchComponentFromMap(
+      state,
+      oldParentNodeDisplayName,
+    )
+    if (!olaParentNode) return
+    const currentIndex = olaParentNode.childrenNode.findIndex(
+      (childDisplayName) => childDisplayName === currentNode.displayName,
+    )
+    if (currentIndex === -1) return
+    olaParentNode.childrenNode.splice(currentIndex, 1)
+    // add New
+    const newParentNode = searchComponentFromMap(
+      state,
+      newParentNodeDisplayName,
+    )
+    if (!newParentNode) return
+    currentNode.parentNode = newParentNodeDisplayName
+    currentNode.x = slice.x
+    currentNode.y = slice.y
+    currentNode.w = slice.w
+    currentNode.h = slice.h
+    if (Array.isArray(currentNode.childrenNode)) {
+      currentNode.childrenNode.forEach((childDisplayName) =>
+        scaleChildrenNodeHelper(
+          state,
+          childDisplayName,
+          columnNumberWhenDrag,
+          columnNumberWhenDrop,
+        ),
+      )
+    }
+    if (!Array.isArray(newParentNode.childrenNode)) {
+      newParentNode.childrenNode = [currentNode.displayName]
+    } else {
+      newParentNode.childrenNode.push(currentNode.displayName)
+    }
+  })
+}
+
+export const updateComponentReflowReducer: CaseReducer<
+  ComponentsState,
+  PayloadAction<UpdateComponentReflowPayload[]>
+> = (state, action) => {
+  const payloadArray = action.payload
+  payloadArray.forEach((payload) => {
+    const { parentDisplayName, childNodes } = payload
+    const targetNode = searchComponentFromMap(state, parentDisplayName)
+    if (targetNode) {
+      childNodes.forEach((node) => {
+        state[node.displayName] = {
+          ...state[node.displayName],
+          w: node.w,
+          h: node.h,
+          x: node.x,
+          y: node.y,
+        }
+      })
+    }
+  })
+}
+function filterChildrenNodes(componentState: any, componentDisplayName: string) {
+  const result = {};
+
+  // Recursive function to collect all nodes and their children
+  function collectChildren(nodeKey) {
+    if (!componentState[nodeKey] || !componentState[nodeKey].childrenNode) {
+      return;
+    }
+    result[nodeKey] = componentState[nodeKey]
+    componentState[nodeKey].childrenNode.forEach(childKey => collectChildren(childKey));
+  }
+  collectChildren(componentDisplayName);
+  return result;
+}
+export const updateTargetPageLayoutReducer: CaseReducer<
+  ComponentsState,
+  PayloadAction<{
+    layout: ComponentsState,
+    layoutName: string,
+  }>
+> = (state, action) => {
+  if (!state) return state
+  let currentPageBody: ComponentsState = null;
+  const newPageConfig: any = _.cloneDeep(action.payload.layout?.components)
+  if (newPageConfig.root.mode === "page") {
+    delete newPageConfig.body;
+    const isCurrentTemplateNone = state.root.templateName === "none"
+    currentPageBody = filterChildrenNodes(state, isCurrentTemplateNone ? "bodySection1-bodySectionContainer" : "body") || {};
+
+  }
+  let currentPageConfig;
+  if (_.isEmpty(currentPageBody.childNodes)) {
+    const currentPageName = newPageConfig.root.childrenNode[0];
+    newPageConfig[currentPageName].props.layout = action.payload.layoutName
+    newPageConfig["root"].templateName = action.payload.layoutName
+    currentPageConfig = _.cloneDeep(newPageConfig);
+  } else {
+    currentPageConfig = { ...newPageConfig, ...currentPageBody }
+    DisplayNameGenerator.updateDisplayNameList(newPageConfig, []);
+  }
+  Object.keys(currentPageConfig).forEach((displayName) => {
+    state[displayName] = currentPageConfig[displayName]
+  })
+}
+
+export const updateTargetPagePropsReducer: CaseReducer<
+  ComponentsState,
+  PayloadAction<UpdateTargetPagePropsPayload>
+> = (state, action) => {
+  const rootNode = state.root
+  if (!rootNode?.props) return state
+  const { pageName, newProps } = action.payload
+  const currentPage = rootNode.childrenNode.find(
+    (childDisplayName) => childDisplayName === pageName,
+  )
+  if (!currentPage) return state
+  state[currentPage].props = {
+    ...state[currentPage].props,
+    ...newProps,
+  }
+}
+
+const generationPageOptionsWhenDelete = (
+  deletedSectionName:
+    | "leftSection"
+    | "rightSection"
+    | "headerSection"
+    | "footerSection",
+) => {
+  switch (deletedSectionName) {
+    case "leftSection": {
+      return {
+        hasLeft: false,
+        leftWidth: 0,
+        leftPosition: "NONE",
+        layout: "Custom",
+      }
+    }
+    case "rightSection": {
+      return {
+        hasRight: false,
+        rightWidth: 0,
+        rightPosition: "NONE",
+        layout: "Custom",
+      }
+    }
+    case "headerSection": {
+      return {
+        hasHeader: false,
+        topHeight: 0,
+        layout: "Custom",
+      }
+    }
+    case "footerSection": {
+      return {
+        hasFooter: false,
+        bottomHeight: 0,
+        layout: "Custom",
+      }
+    }
+  }
+}
+
+export const deleteTargetPageSectionReducer: CaseReducer<
+  ComponentsState,
+  PayloadAction<DeleteTargetPageSectionPayload>
+> = (state, action) => {
+  const rootNode = state.root
+  if (!rootNode?.childrenNode) return state
+  const { pageName, deleteSectionName } = action.payload
+  const targetPageIndex = rootNode.childrenNode.findIndex(
+    (childDisplayName) => childDisplayName === pageName,
+  )
+  if (targetPageIndex === -1) return state
+  const targetPage = state[rootNode.childrenNode[targetPageIndex]]
+
+  targetPage.props = {
+    ...targetPage.props,
+    ...generationPageOptionsWhenDelete(deleteSectionName),
+  }
+
+  const targetPageChildrenNodeIndex = targetPage.childrenNode.findIndex(
+    (childDisplayName) => childDisplayName === deleteSectionName,
+  )
+  if (targetPageChildrenNodeIndex === -1) return state
+  const targetPageChildeNode =
+    targetPage.childrenNode[targetPageChildrenNodeIndex]
+  const needDeleteDisplayNames = removeDisplayNames(
+    state[targetPageChildeNode],
+    state,
+  )
+  DisplayNameGenerator.removeDisplayNameMulti(needDeleteDisplayNames)
+  targetPage.childrenNode.splice(targetPageChildrenNodeIndex, 1)
+  rootNode.childrenNode.splice(targetPageIndex, 1, targetPage.displayName)
+}
+export const addTargetPageSectionReducer: CaseReducer<
+  ComponentsState,
+  PayloadAction<AddTargetPageSectionPayload>
+> = (state, action) => {
+  const rootNode = state.root
+  if (!rootNode?.childrenNode) return state
+  const { pageName, addedSectionName, originSectionNode } = action.payload
+  const targetPageIndex = rootNode.childrenNode.findIndex(
+    (childDisplayName) => childDisplayName === pageName,
+  )
+  if (targetPageIndex === -1) return state
+  const targetPage = state[rootNode.childrenNode[targetPageIndex]]
+
+  targetPage.props = {
+    ...targetPage.props,
+  }
+
+  if (originSectionNode) {
+    const newOriginSectionNode = klona(originSectionNode)
+    newOriginSectionNode.parentNode = targetPage.displayName
+    targetPage.childrenNode.push(newOriginSectionNode.displayName)
+    const needAddMapNode = flatTreeToMap(newOriginSectionNode)
+    Object.keys(needAddMapNode).forEach((displayName) => {
+      state[displayName] = needAddMapNode[displayName]
+    })
+  } else {
+    let bodySectionSubPaths: string[] = []
+    const bodySectionNode = targetPage.childrenNode.find(
+      (childDisplayName) => childDisplayName === "bodySection",
+    )
+    if (bodySectionNode) {
+      bodySectionSubPaths =
+        state[bodySectionNode].props?.sectionViewConfigs.map(
+          (config: Record<string, string>) => config.path,
+        ) ?? []
+    }
+    if (bodySectionSubPaths.length === 0) {
+      bodySectionSubPaths = ["sub-page1"]
+    }
+    const config = generateSectionConfig(
+      pageName,
+      addedSectionName,
+      bodySectionSubPaths,
+    )
+    if (!config) return state
+    targetPage.childrenNode.push(config.displayName)
+    const needAddMapNode = flatTreeToMap(config)
+    Object.keys(needAddMapNode).forEach((displayName) => {
+      state[displayName] = needAddMapNode[displayName]
+    })
+  }
+}
+
+export const updateRootNodePropsReducer: CaseReducer<
+  ComponentsState,
+  PayloadAction<Partial<RootComponentNodeProps>>
+> = (state, action) => {
+  const rootNode = state.root
+  if (!rootNode) return state
+  if (!rootNode.props) {
+    rootNode.props = action.payload
+  } else {
+    rootNode.props = {
+      ...rootNode.props,
+      ...action.payload,
+    }
+  }
+}
+
+export const addPageNodeWithSortOrderReducer: CaseReducer<
+  ComponentsState,
+  PayloadAction<ComponentTreeNode>
+> = (state, action) => {
+  const node = action.payload
+  const parentNode = searchComponentFromMap(
+    state,
+    node.parentNode,
+
+  ) as any | null
+  if (!parentNode) return
+  parentNode.props.pageSortedKey.push(node.displayName)
+  if (!Array.isArray(parentNode.childrenNode)) {
+    parentNode.childrenNode = [node.displayName]
+  } else {
+    parentNode.childrenNode.push(node.displayName)
+  }
+  const needAddMapNode = flatTreeToMap(node)
+  Object.keys(needAddMapNode).forEach((displayName) => {
+    state[displayName] = needAddMapNode[displayName]
+  })
+}
+
+export const addSectionViewHelper = (
+  sectionViewNodeConfig: ComponentTreeNode,
+  sectionViewConfig: SectionViewShape,
+  sectionNode: ComponentMapNode,
+  originChildrenNode?: ComponentTreeNode[],
+) => {
+  if (originChildrenNode && Array.isArray(originChildrenNode)) {
+    let cloneDeepChildrenNode = JSON.parse(
+      JSON.stringify(originChildrenNode),
+    ) as ComponentTreeNode[]
+    cloneDeepChildrenNode = cloneDeepChildrenNode.map((node) => ({
+      ...node,
+      parentNode: sectionViewNodeConfig.displayName,
+    }))
+    sectionViewNodeConfig.childrenNode = cloneDeepChildrenNode
+  }
+  if (Array.isArray(sectionNode.childrenNode)) {
+    sectionNode.childrenNode.push(sectionViewNodeConfig.displayName)
+  } else {
+    sectionNode.childrenNode = [sectionViewNodeConfig.displayName]
+  }
+  sectionNode.props!.viewSortedKey.push(sectionViewNodeConfig.displayName)
+  sectionNode.props!.sectionViewConfigs.push(sectionViewConfig)
+}
+
+export const addSectionViewReducer: CaseReducer<
+  ComponentsState,
+  PayloadAction<AddSectionViewPayload>
+> = (state, action) => {
+  const { parentNodeName, sectionName, originChildrenNode } = action.payload
+
+  const parentNode = searchComponentFromMap(state, parentNodeName)
+  if (!parentNode || !parentNode.props) return
+  let bodySectionSubPaths: string[] = []
+  if (sectionName !== "bodySection") {
+    const pageNode = searchComponentFromMap(state, parentNode.parentNode)
+    if (!pageNode) return
+    const bodySectionNodeDisplayName = pageNode.childrenNode.find(
+      (childDisplayName) => childDisplayName === "bodySection",
+    )
+    if (!bodySectionNodeDisplayName) return
+    bodySectionSubPaths =
+      state[bodySectionNodeDisplayName].props?.sectionViewConfigs.map(
+        (config: Record<string, string>) => config.path,
+      ) ?? []
+  }
+
+  const config = generateSectionContainerConfig(
+    parentNodeName,
+    `${sectionName}Container`,
+  )
+  const hasPaths = parentNode.props.sectionViewConfigs.map(
+    (item: SectionViewShape) => item.path,
+  )
+  const diffSubPaths = difference(bodySectionSubPaths, hasPaths)
+
+  const newSectionViewConfig = generateNewViewItemFromBodySectionConfig(
+    hasPaths,
+    config.displayName,
+    parentNodeName,
+    diffSubPaths,
+  )
+  addSectionViewHelper(
+    config,
+    newSectionViewConfig,
+    parentNode,
+    originChildrenNode,
+  )
+  const needAddMapNode = flatTreeToMap(config)
+  Object.keys(needAddMapNode).forEach((displayName) => {
+    state[displayName] = needAddMapNode[displayName]
+  })
+}
+
+export const addSectionViewConfigByConfigReducer: CaseReducer<
+  ComponentsState,
+  PayloadAction<AddSectionViewByConfigPayload>
+> = (state, action) => {
+  const {
+    parentNodeName,
+    originChildrenNode,
+    sectionViewNode,
+    sectionViewConfig,
+  } = action.payload
+  const parentNode = searchComponentFromMap(state, parentNodeName)
+  if (!parentNode || !parentNode.props) return
+  addSectionViewHelper(
+    sectionViewNode,
+    sectionViewConfig,
+    parentNode,
+    originChildrenNode,
+  )
+  const needAddMapNode = flatTreeToMap(sectionViewNode)
+  Object.keys(needAddMapNode).forEach((displayName) => {
+    state[displayName] = needAddMapNode[displayName]
+  })
+}
+
+export const updateSectionViewPropsReducer: CaseReducer<
+  ComponentsState,
+  PayloadAction<UpdateSectionViewPropsPayload>
+> = (state, action) => {
+  const { parentNodeName, newProps } = action.payload
+  const parentNode = searchComponentFromMap(state, parentNodeName)
+  if (!parentNode || !parentNode.props) return
+  parentNode.props = {
+    ...parentNode.props,
+    ...newProps,
+  }
+}
+
+export const deleteSectionViewReducer: CaseReducer<
+  ComponentsState,
+  PayloadAction<DeleteSectionViewPayload>
+> = (state, action) => {
+  const { viewDisplayName } = action.payload
+  const currentNode = searchComponentFromMap(state, viewDisplayName)
+  if (!currentNode) return
+  const parentNode = searchComponentFromMap(state, currentNode.parentNode)
+  if (!parentNode || !parentNode.props) return
+  const currentIndex = parentNode.childrenNode.findIndex(
+    (childDisplayName) => childDisplayName === viewDisplayName,
+  )
+  if (currentIndex === -1) return
+  const viewSortedKeyIndex = parentNode.props.viewSortedKey.findIndex(
+    (key: string) => key === viewDisplayName,
+  )
+  if (viewSortedKeyIndex === -1) return
+  const sectionViewConfigsIndex = parentNode.props.sectionViewConfigs.findIndex(
+    (config: SectionViewShape) => config.viewDisplayName === viewDisplayName,
+  )
+  if (sectionViewConfigsIndex === -1) return
+  const targetNode = parentNode.childrenNode[currentIndex]
+  if (!targetNode) return
+  const needDeleteDisplayNames = removeDisplayNames(state[targetNode], state)
+  DisplayNameGenerator.removeDisplayNameMulti(needDeleteDisplayNames)
+  parentNode.childrenNode.splice(currentIndex, 1)
+  parentNode.props.viewSortedKey.splice(viewSortedKeyIndex, 1)
+  parentNode.props.sectionViewConfigs.splice(sectionViewConfigsIndex, 1)
+}
+
+export const updateViewportSizeReducer: CaseReducer<
+  ComponentsState,
+  PayloadAction<{
+    viewportWidth?: number
+    viewportHeight?: number
+    viewportSizeType?: ViewportSizeType
+  }>
+> = (state, action) => {
+  const rootNode = state.root
+  if (!rootNode) return
+  if (!rootNode.props) rootNode.props = {}
+  rootNode.props.viewportWidth = action.payload.viewportWidth
+  rootNode.props.viewportHeight = action.payload.viewportHeight
+  rootNode.props.viewportSizeType = action.payload.viewportSizeType
+}
+
+export const resetComponentsReducer: CaseReducer<
+  ComponentsState,
+  PayloadAction
+> = () => {
+  return ComponentsInitialState
+}
+
+const updateComponentLayoutInfoHelper = (
+  state: ComponentsState,
+  displayName: string,
+  layoutInfo: Partial<LayoutInfo>,
+) => {
+  const currentNode = searchComponentFromMap(state, displayName)
+  if (!currentNode || !layoutInfo || Object.keys(layoutInfo).length === 0)
+    return
+      ; (Object.keys(layoutInfo) as Partial<Array<keyof LayoutInfo>>).forEach(
+        (key) => {
+          currentNode![key as keyof LayoutInfo] = layoutInfo[
+            key as keyof LayoutInfo
+          ] as number
+        },
+      )
+}
+
+export const updateComponentNodeHeightReducer: CaseReducer<
+  ComponentsState,
+  PayloadAction<UpdateComponentNodeHeightPayload>
+> = (state, action) => {
+  if (!state) return
+  const { displayName, height } = action.payload
+  const currentNode = searchComponentFromMap(state, displayName)
+  if (!currentNode) return
+  currentNode.h = Math.max(height, currentNode.minH)
+}
+
+export const updateComponentLayoutInfoReducer: CaseReducer<
+  ComponentsState,
+  PayloadAction<UpdateComponentNodeLayoutInfoPayload>
+> = (state, action) => {
+  if (!state) return
+  const { displayName, layoutInfo } = action.payload
+  updateComponentLayoutInfoHelper(state, displayName, layoutInfo)
+}
+
+export const batchUpdateComponentLayoutInfoWhenReflowReducer: CaseReducer<
+  ComponentsState,
+  PayloadAction<BatchUpdateComponentNodeLayoutInfoPayload[]>
+> = (state, action) => {
+  if (!state) return
+  action.payload.forEach((updateSlice) => {
+    const { displayName, layoutInfo } = updateSlice
+    updateComponentLayoutInfoHelper(state, displayName, layoutInfo)
+  })
+}
+
+export const batchUpdateComponentLayoutInfoReducer: CaseReducer<
+  ComponentsState,
+  PayloadAction<UpdateComponentNodeLayoutInfoPayload[]>
+> = (state, action) => {
+  if (!state) return
+  action.payload.forEach((updateSlice) => {
+    const { displayName, layoutInfo } = updateSlice
+    updateComponentLayoutInfoHelper(state, displayName, layoutInfo)
+  })
+}
+
+export const setGlobalStateReducer: CaseReducer<
+  ComponentsState,
+  PayloadAction<SetGlobalStatePayload>
+> = (state, action) => {
+  const rootNode = state.root
+  if (!state || !rootNode) return
+  const { value, key, oldKey } = action.payload
+  const originGlobalData = rootNode.props?.globalData || {}
+  if (oldKey && Object.prototype.hasOwnProperty.call(originGlobalData, oldKey)) {
+    delete originGlobalData[oldKey]
+  }
+  const newProps = {
+    ...rootNode.props,
+    globalData: {
+      ...originGlobalData,
+      [key]: value,
+    },
+  }
+  rootNode.props = getNewWidgetPropsByUpdateSlice(
+    newProps ?? {},
+    rootNode.props ?? {},
+  )
+}
+
+export const deleteGlobalStateByKeyReducer: CaseReducer<
+  ComponentsState,
+  PayloadAction<DeleteGlobalStatePayload>
+> = (state, action) => {
+  const rootNode = state.root
+  if (!rootNode || !rootNode.props) return
+  const { key } = action.payload
+  const originGlobalData = rootNode.props?.globalData || {}
+  // if (
+  //   (Object.hasOwn && Object.hasOwn(originGlobalData, key)) ||
+  //   Object.prototype.hasOwnProperty.call(originGlobalData, key)
+  // )
+  delete originGlobalData[key]
+}
+
+export const getNeedDeleteSectionViewDisplayNames = (
+  components: ComponentsState,
+  pageName: string,
+  subPagePath: string,
+) => {
+  const pageNode = searchComponentFromMap(components, pageName)
+  if (!pageNode) return []
+  const sectionNodeDisplayNames = pageNode.childrenNode.filter(
+    (displayName) => components[displayName].type !== "MODAL_SECTION_NODE",
+  )
+  const needDeleteDisplayNames: string[] = []
+  sectionNodeDisplayNames.forEach((sectionNode) => {
+    const sectionViewConfigs =
+      components[sectionNode].props?.sectionViewConfigs ?? []
+    const targetSectionViewConfig = sectionViewConfigs.filter(
+      (config: Record<string, string>) => config.path === subPagePath,
+    )
+    const currentNeedDeleteDisplayNames = targetSectionViewConfig.map(
+      (config: Record<string, string>) => config.viewDisplayName,
+    )
+    needDeleteDisplayNames.push(...currentNeedDeleteDisplayNames)
+  })
+  return needDeleteDisplayNames
+}
+
+export const deleteSubPageViewNodeReducer: CaseReducer<
+  ComponentsState,
+  PayloadAction<DeleteSubPageViewNodePayload>
+> = (state, action) => {
+  const { pageName, subPagePath } = action.payload
+  const rootNode = state.root
+  if (!state || !rootNode) return
+  const needDeleteSectionDisplayNames = getNeedDeleteSectionViewDisplayNames(
+    state,
+    pageName,
+    subPagePath,
+  )
+
+  needDeleteSectionDisplayNames.forEach((displayName) => {
+    const targetComponentNode = searchComponentFromMap(state, displayName)
+    if (!targetComponentNode) return
+    const parentNode = searchComponentFromMap(
+      state,
+      targetComponentNode.parentNode,
+    )
+    if (!parentNode) return
+    parentNode.childrenNode = parentNode.childrenNode.filter(
+      (childDisplayName) => childDisplayName !== displayName,
+    )
+    parentNode.props!.viewSortedKey = parentNode.props?.viewSortedKey.filter(
+      (key: string) => key !== displayName,
+    )
+    parentNode.props!.sectionViewConfigs =
+      parentNode.props?.sectionViewConfigs.filter(
+        (config: Record<string, string>) =>
+          config.viewDisplayName !== displayName,
+      )
+  })
+  needDeleteSectionDisplayNames.flatMap((displayName) =>
+    removeDisplayNames(state[displayName], state),
+  )
+  DisplayNameGenerator.removeDisplayNameMulti(needDeleteSectionDisplayNames)
+}
+
+export const updateSubPagePathReducer: CaseReducer<
+  ComponentsState,
+  PayloadAction<{
+    pageName: string
+    subPagePath: string
+    oldSubPagePath: string
+  }>
+> = (state, action) => {
+  const { pageName, subPagePath, oldSubPagePath } = action.payload
+  const pageNode = searchComponentFromMap(state, pageName)
+  if (!pageNode) return
+  const sectionNodes = pageNode.childrenNode.filter(
+    (displayName) => state[displayName].type !== "MODAL_SECTION_NODE",
+  )
+  sectionNodes.forEach((sectionNode) => {
+    state[sectionNode].props?.sectionViewConfigs.forEach(
+      (config: Record<string, string>) => {
+        if (config.path === oldSubPagePath) {
+          config.path = subPagePath
+        }
+      },
+    )
+  })
+}
+
+export const updateDefaultSubPagePathReducer: CaseReducer<
+  ComponentsState,
+  PayloadAction<{
+    pageName: string
+    subPagePath: string
+  }>
+> = (state, action) => {
+  const { pageName, subPagePath } = action.payload
+  const pageNode = searchComponentFromMap(state, pageName)
+  if (!pageNode) return
+  const sectionNodeDisplayNames = pageNode.childrenNode.filter(
+    (sectionNodeDisplayName) =>
+      state[sectionNodeDisplayName].type !== "MODAL_SECTION_NODE",
+  )
+  sectionNodeDisplayNames.forEach((displayName) => {
+    state[displayName].props!.defaultViewKey = subPagePath
+  })
+}
+
+export const addSubPageReducer: CaseReducer<
+  ComponentsState,
+  PayloadAction<{ pageName: string }>
+> = (state, action) => {
+  if (!state) return
+  const pageNode = searchComponentFromMap(state, action.payload.pageName)
+  if (!pageNode) return
+  const bodySectionDisplayName = pageNode.childrenNode.find(
+    (sectionDisplayName) => {
+      return state[sectionDisplayName].showName === "bodySection"
+    },
+  )
+  if (!bodySectionDisplayName) {
+    return
+  }
+  const bodySectionNode = state[bodySectionDisplayName]
+  if (!bodySectionNode) return
+  const bodySectionConfig = generateSectionContainerConfig(
+    bodySectionDisplayName,
+    `bodySectionContainer`,
+  )
+
+  const hasKeys = bodySectionNode.props!.sectionViewConfigs.map(
+    (item: SectionViewShape) => {
+      return `${bodySectionDisplayName}-${item.path}`
+    },
+  )
+  const newSectionViewConfig = generateNewViewItem(
+    hasKeys,
+    bodySectionConfig.displayName,
+    bodySectionDisplayName,
+  )
+  if (Array.isArray(bodySectionNode.childrenNode)) {
+    bodySectionNode.childrenNode.push(bodySectionConfig.displayName)
+  } else {
+    bodySectionNode.childrenNode = [bodySectionConfig.displayName]
+  }
+  const needAddMapNode = flatTreeToMap(bodySectionConfig)
+  Object.keys(needAddMapNode).forEach((displayName) => {
+    state[displayName] = needAddMapNode[displayName]
+  })
+  bodySectionNode.props!.viewSortedKey.push(bodySectionConfig.displayName)
+  bodySectionNode.props!.sectionViewConfigs.push(newSectionViewConfig)
+}
+
+export const updateCurrentPageStyleReducer: CaseReducer<
+  ComponentsState,
+  PayloadAction<UpdateCurrentPageStylePayload>
+> = (state, action) => {
+  const pageNode = searchComponentFromMap(state, action.payload.pageName)
+  if (!pageNode || !Array.isArray(pageNode.childrenNode)) return
+  const targetSectionNodeDisplayName = pageNode.childrenNode.find(
+    (childDisplayName) => {
+      return state[childDisplayName].showName === action.payload.sectionName
+    },
+  )
+  if (!targetSectionNodeDisplayName) return
+  const targetSectionNode = state[targetSectionNodeDisplayName]
+  if (!targetSectionNode.props) return
+  if (!targetSectionNode.props.style) {
+    targetSectionNode.props.style = action.payload.style
+  } else {
+    Object.keys(action.payload.style).forEach((key) => {
+      if (action.payload.style[key] === undefined) {
+        unset(targetSectionNode.props?.style ?? {}, key)
+      }
+      targetSectionNode.props!.style[key] = action.payload.style[key]
+    })
+  }
+}
+
+export const deleteCurrentPageStyleReducer: CaseReducer<
+  ComponentsState,
+  PayloadAction<DeleteCurrentPageStylePayload>
+> = (state, action) => {
+  const pageNode = searchComponentFromMap(state, action.payload.pageName)
+  if (!pageNode || !Array.isArray(pageNode.childrenNode)) return
+  const targetSectionNodeDisplayName = pageNode.childrenNode.find(
+    (childDisplayName) => {
+      return state[childDisplayName].showName === action.payload.sectionName
+    },
+  )
+  if (
+    !targetSectionNodeDisplayName ||
+    !state[targetSectionNodeDisplayName].props
+  )
+    return
+  unset(
+    state[targetSectionNodeDisplayName].props?.style ?? {},
+    action.payload.styleKey,
+  )
+}