impaktapps-ui-builder 0.0.382457 → 1.0.0

package/redux/currentApp/components/componentsState.ts

@@ -0,0 +1,371 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+export enum CONTAINER_TYPE {
+  "EDITOR_DOT_PANEL" = "EDITOR_DOT_PANEL",
+  "EDITOR_SCALE_SQUARE" = "EDITOR_SCALE_SQUARE",
+  "EDITOR_PAGE_SQUARE" = "EDITOR_PAGE_SQUARE",
+  "EDITOR_LAYOUT_SQUARE" = "EDITOR_LAYOUT_SQUARE",
+}
+
+export enum SECTION_POSITION {
+  "TOP" = "TOP",
+  "BOTTOM" = "BOTTOM",
+  "CENTER" = "CENTER",
+  "FULL" = "FULL",
+  "NONE" = "NONE",
+}
+
+export interface BaseComponentNode {
+  version?: number
+  displayName: string
+  parentNode: string | null
+  showName: string
+  type: string
+  containerType: CONTAINER_TYPE | any
+  // columnSpan?: number,
+  templateName?: string,
+  // startColumn?: number,
+  // rowSpan?: number,
+  // startRow?: number
+  x?: number,
+  y?: number,
+  w?: number,
+  h?: number,
+  minW?: number,
+  minH?: number,
+   z?: number
+  props: {
+
+    [key: string]: any
+  } | null
+  namePrefix?: string
+}
+
+export interface ComponentMapNode extends BaseComponentNode {
+  childrenNode: string[]
+}
+// export interface RootComponentNode extends ComponentMapNode {
+//   type: "DOT_PANEL"
+//   props: RootComponentNodeProps
+// }
+
+export type ViewportSizeType = "fluid" | "desktop" | "tablet" | "custom"
+
+export interface RootComponentNodeProps {
+  currentPageIndex: number
+  pageSortedKey: string[]
+  homepageDisplayName?: string
+  viewportWidth?: number
+  viewportHeight?: number
+  viewportSizeType?: ViewportSizeType
+  currentSubPagePath?: string
+}
+
+
+export interface PageNodeProps {
+  layout: string
+  leftWidth?: number
+  rightWidth?: number
+  hasLeft?: boolean
+  hasRight?: boolean
+  hasFooter?: boolean
+  hasHeader?: boolean
+  canvasSize?: any
+  canvasWidth?: any
+  isLeftFixed?: boolean
+  isRightFixed?: boolean
+  isFooterFixed?: boolean
+  isHeaderFixed?: boolean
+  showLeftFoldIcon?: boolean
+  showRightFoldIcon?: boolean
+  topHeight?: any
+
+}
+export interface ComponentNode extends BaseComponentNode {
+  childrenNode: string[]
+}
+export interface ComponentTreeNode extends BaseComponentNode {
+  childrenNode: ComponentTreeNode[]
+}
+export interface PageNode extends ComponentTreeNode {
+  type: "PAGE_NODE"
+  props: PageNodeProps
+}
+export interface SectionViewShape {
+  viewDisplayName: string
+  key: string
+  id: string
+  path: string
+}
+// const com = JSON.parse(localStorage.getItem("App"));
+export type ComponentsState = Record<string, ComponentMapNode>
+export const ComponentsInitialState: ComponentsState =
+{
+  "root": {
+    "version": 0,
+    "displayName": "root",
+    "parentNode": "",
+    "showName": "root",
+    "childrenNode": [
+      "page1"
+    ],
+    namePrefix: "impakt",
+    "type": "DOT_PANEL",
+    "containerType": "EDITOR_DOT_PANEL",
+    "h": 0,
+    "w": 0,
+    "minH": 0,
+    "minW": 0,
+    "x": -1,
+    "y": -1,
+    "z": 0,
+    "props": {
+      "currentPageIndex": 0,
+      "pageSortedKey": [
+        "page1"
+      ]
+    }
+  },
+  "page1": {
+    "version": 0,
+    "displayName": "page1",
+    "parentNode": "root",
+    "showName": "page",
+    "childrenNode": [
+      "bodySection1"
+    ],
+    "type": "PAGE_NODE",
+    "containerType": "EDITOR_PAGE_SQUARE",
+    "h": 0,
+    "w": 0,
+    "minH": 0,
+    "minW": 0,
+    "x": -1,
+    "y": -1,
+    "z": 0,
+    "props": {
+      "layout": "default",
+      "mode": "page",
+      "templateName": "layout2",
+    }
+  },
+  "bodySection1": {
+    "version": 0,
+    "displayName": "bodySection1",
+    "parentNode": "page1",
+    "showName": "bodySection",
+    "childrenNode": [
+      "bodySection1-bodySectionContainer1"
+    ],
+    "type": "SECTION_NODE",
+    "containerType": "EDITOR_LAYOUT_SQUARE",
+    "h": 0,
+    "w": 0,
+    "minH": 0,
+    "minW": 0,
+    "x": -1,
+    "y": -1,
+    "z": 0,
+    "props": {
+      "currentViewIndex": 0,
+      "defaultViewKey": "sub-page1",
+      "sectionViewConfigs": [
+        {
+          "id": "9ac3c766-3320-4f0f-a119-cd57b621127b",
+          "key": "sub-page1",
+          "path": "sub-page1",
+          "viewDisplayName": "bodySection1-bodySectionContainer1"
+        }
+      ],
+      "style": {
+        "padding": {
+          "mode": "all",
+          "size": "24"
+        }
+      },
+      "viewSortedKey": [
+        "bodySection1-bodySectionContainer1"
+      ]
+    }
+  },
+  "bodySection1-bodySectionContainer1": {
+    "version": 0,
+    "displayName": "bodySection1-bodySectionContainer1",
+    "parentNode": "bodySection1",
+    "showName": "bodySection1-bodySectionContainer1",
+    "childrenNode": [],
+    "type": "CONTAINER_NODE",
+    "containerType": "EDITOR_DOT_PANEL",
+    "h": 0,
+    "w": 0,
+    "minH": 0,
+    "minW": 0,
+    "x": -1,
+    "y": -1,
+    "z": 0,
+    "props": {}
+  }
+
+};
+
+export interface DeleteComponentNodePayload {
+  displayNames: string[]
+  source?: "keyboard" | "manage_delete" | "left_delete" | "left_multi_delete"
+}
+
+export interface DeletePageNodePayload {
+  displayName: string
+  originPageSortedKey: string[]
+}
+
+export interface SortComponentNodeChildrenPayload {
+  parentDisplayName: string
+  newChildrenNode: string[]
+}
+
+export interface UpdateComponentPropsPayload {
+  displayName: string
+  updateSlice: Record<string, any>
+  notUseUndoRedo?: boolean
+}
+
+export interface AddContainerComponentViewsReducerPayload {
+  displayName: string
+  containerDisplayName: string
+  linkedDisplayName?: string
+  addedViewItem: {
+    id: string
+    key: string
+    label: string
+    disabled?: string
+    hidden?: string
+  }[]
+  addComponent: ComponentTreeNode
+}
+
+export interface DeleteContainerComponentViewsReducerPayload {
+  displayName: string
+  containerDisplayName: string
+  linkedDisplayName?: string
+  deletedIndex: number
+}
+export interface UpdateComponentDisplayNamePayload {
+  displayName: string
+  newDisplayName: string
+}
+
+export interface UpdateComponentReflowPayload {
+  parentDisplayName: string
+  childNodes: ComponentMapNode[]
+}
+
+export interface UpdateTargetPageLayoutPayload {
+  pageName: string
+  layout:
+  | "default"
+  | "presetA"
+  | "presetB"
+  | "presetC"
+  | "presetD"
+  | "presetE"
+  | "Custom"
+  originPageNode?: ComponentTreeNode
+}
+
+export interface UpdateTargetPagePropsPayload {
+  pageName: string
+  newProps: Partial<PageNodeProps>
+  options?: Record<string, any>
+  notUseUndoRedo?: boolean
+}
+
+export interface DeleteTargetPageSectionPayload {
+  pageName: string
+  deleteSectionName:
+  | "leftSection"
+  | "rightSection"
+  | "headerSection"
+  | "footerSection"
+}
+
+export interface AddTargetPageSectionPayload {
+  pageName: string
+  addedSectionName: "bodySection" | "leftSection"| "rightSection"| "headerSection"| "footerSection"
+  originSectionNode?: ComponentTreeNode
+}
+
+export interface AddSectionViewPayload {
+  parentNodeName: string
+  sectionName:
+  | "bodySection" 
+  | "leftSection"
+  | "rightSection"
+  | "headerSection"
+  | "footerSection"
+  originChildrenNode?: ComponentTreeNode[]
+}
+
+export interface AddSectionViewByConfigPayload extends AddSectionViewPayload {
+  sectionViewNode: ComponentTreeNode
+  sectionViewConfig: SectionViewShape
+}
+
+export interface DeleteSectionViewPayload {
+  viewDisplayName: string
+  parentNodeName: string
+  originPageSortedKey: string[]
+}
+
+export interface UpdateSectionViewPropsPayload {
+  parentNodeName: string
+
+  newProps: Record<string, any>
+}
+
+export interface AddModalComponentPayload {
+  currentPageDisplayName: string
+  modalComponentNode: ComponentTreeNode
+}
+
+export interface UpdateComponentNodeHeightPayload {
+  displayName: string
+  height: number
+  oldHeight: number
+}
+
+export interface SetGlobalStatePayload {
+  key: string
+  value: string
+  oldKey?: string
+}
+
+export interface DeleteGlobalStatePayload {
+  key: string
+}
+
+export interface DeleteSubPageViewNodePayload {
+  pageName: string
+  subPagePath: string
+}
+
+export interface UpdateCurrentPageStylePayload {
+  pageName: string
+
+  style: Record<string, any>
+  sectionName:
+  | "bodySection" 
+  | "leftSection"
+  | "rightSection"
+  | "headerSection"
+  | "footerSection"
+}
+
+export interface DeleteCurrentPageStylePayload {
+  pageName: string
+  styleKey: string
+   sectionName:
+  | "bodySection" 
+  | "leftSection"
+  | "rightSection"
+  | "headerSection"
+  | "footerSection"
+}

package/redux/currentApp/cursor/cursorReducer.ts

@@ -0,0 +1,78 @@
+import { CaseReducer, PayloadAction } from "@reduxjs/toolkit"
+import {
+  CursorState,
+  UpdateCursorPayload,
+} from "@/redux/currentApp/cursor/cursorState"
+
+export const updateCursorReducer: CaseReducer<
+  CursorState,
+  PayloadAction<UpdateCursorPayload>
+> = (state, action) => {
+  const { userID } = action.payload
+  const hasUser = !!state[userID]
+  if (!hasUser) {
+    state[userID] = []
+  }
+  if (state[userID].length === 1) {
+    state[userID].splice(0, 1, action.payload)
+  } else {
+    state[userID].push(action.payload)
+  }
+}
+
+export const deleteCursorReducer: CaseReducer<
+  CursorState,
+  PayloadAction<string>
+> = (state, action) => {
+  const userID = action.payload
+  const hasUser = !!state[userID]
+  if (hasUser) {
+    delete state[userID]
+  }
+}
+
+export const removeAnimationEndCursorInfo: CaseReducer<
+  CursorState,
+  PayloadAction<string>
+> = (state, action) => {
+  const targetUserCursorInfo = state[action.payload]
+  if (targetUserCursorInfo.length > 1) {
+    targetUserCursorInfo.shift()
+  }
+}
+
+export const resetCursorReducer: CaseReducer<CursorState> = (state) => {
+  Object.keys(state).forEach((userID) => {
+    delete state[userID]
+  })
+}
+
+export const filterCursorReducer: CaseReducer<
+  CursorState,
+  PayloadAction<string[]>
+> = (state, action) => {
+  action.payload.forEach((displayName) => {
+    Object.keys(state).forEach((userID) => {
+      const targetUserCursorInfo = state[userID]
+      if (
+        Array.isArray(targetUserCursorInfo) &&
+        targetUserCursorInfo.length > 0
+      ) {
+        state[userID] = targetUserCursorInfo.filter(
+          (cursorInfo) => cursorInfo.parentDisplayName !== displayName,
+        )
+      }
+    })
+  })
+}
+
+export const leaveContainerReducer: CaseReducer<
+  CursorState,
+  PayloadAction<string>
+> = (state, action) => {
+  const targetUserCursorInfo = state[action.payload]
+
+  if (targetUserCursorInfo.length > 0) {
+    targetUserCursorInfo.shift()
+  }
+}

package/redux/currentApp/cursor/cursorSelector.ts

@@ -0,0 +1,10 @@
+import { createSelector } from "@reduxjs/toolkit"
+import { RootState } from "@/store"
+
+export const getCursor = (state: RootState) => {
+  return state.currentApp.cursor
+}
+
+export const getCursorArray = createSelector([getCursor], (cursor) =>
+  Object.values(cursor),
+)

package/redux/currentApp/cursor/cursorSlice.ts

@@ -0,0 +1,26 @@
+import { createSlice } from "@reduxjs/toolkit"
+import {
+  deleteCursorReducer,
+  filterCursorReducer,
+  leaveContainerReducer,
+  removeAnimationEndCursorInfo,
+  resetCursorReducer,
+  updateCursorReducer,
+} from "./cursorReducer"
+import { CursorInitialState } from "./cursorState"
+
+const cursorSlice = createSlice({
+  name: "cursor",
+  initialState: CursorInitialState,
+  reducers: {
+    updateCursorReducer,
+    deleteCursorReducer,
+    removeAnimationEndCursorInfo,
+    leaveContainerReducer,
+    resetCursorReducer,
+    filterCursorReducer,
+  },
+})
+
+export const cursorActions = cursorSlice.actions
+export default cursorSlice.reducer

package/redux/currentApp/cursor/cursorState.ts

@@ -0,0 +1,20 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+// import { MovingMessageBin } from "@/api/ws/IMPAKTAPPS_PROTO"
+
+// export interface CursorInfo {
+//   userID: MovingMessageBin["userID"]
+//   nickname: MovingMessageBin["nickname"]
+//   parentDisplayName: MovingMessageBin["parentDisplayName"]
+//   status: MovingMessageBin["status"] // -1 is is Leave,1 is moving, 0 is empty
+//   xInteger: MovingMessageBin["cursorXInteger"]
+//   yInteger: MovingMessageBin["cursorYInteger"]
+//   xMod: MovingMessageBin["cursorXMod"]
+//   yMod: MovingMessageBin["cursorYMod"]
+//   lastUpdateTime: number
+// }
+
+export type UpdateCursorPayload = any
+
+export type CursorState = Record<string, any[]>
+
+export const CursorInitialState: CursorState = {}

package/redux/currentApp/executionController/controllerReducer.ts

@@ -0,0 +1,50 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { CaseReducer, PayloadAction } from "@reduxjs/toolkit"
+import { ControllerContent, Page, Rule } from "./interface"
+
+
+export const updateControllerListReducer: CaseReducer<
+  ControllerContent,
+  PayloadAction<ControllerContent>
+> = (_, action) => {
+  return action.payload
+}
+
+export const addControllerItemReducer: CaseReducer<
+  ControllerContent,
+  PayloadAction<ControllerContent>
+> = (state, action) => {
+  state = { ...action.payload, ...state }
+  return state
+}
+
+export const setResourceRulesReducer: CaseReducer<
+  ControllerContent,
+  PayloadAction<Rule[]>
+> = (state, action) => {
+  state.rules = action.payload
+}
+export const setResourcePagesReducer: CaseReducer<
+  ControllerContent,
+  PayloadAction<Page[]>
+> = (state, action) => {
+  state.pages = action.payload
+}
+export const addResourceRulesInController: CaseReducer<
+  ControllerContent,
+  PayloadAction<Rule>
+> = (state, action) => {
+  state.rules.push(action.payload)
+}
+
+// export const removeControllerItemReducer: CaseReducer<
+//   ControllerContent,
+//   PayloadAction<string>
+// > = (state, action) => {
+//   const index = state.findIndex((i) => {
+//     return i.ControllerID === action.payload
+//   })
+//   if (index !== -1) {
+//     state.splice(index, 1)
+//   }
+// }

package/redux/currentApp/executionController/controllerSelector.ts

@@ -0,0 +1,41 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { createSelector } from "@reduxjs/toolkit"
+import { RootState } from "@/store"
+import { Page } from "./interface"
+export const getAllResources = (state: RootState) => state.resource
+export const getController = (state: RootState) => state.currentApp.controller
+
+export const getControllerIDMapResource = createSelector(
+    [getAllResources],
+    (allResource) => {
+        const resourceIDMapResource: Record<string, any> = {}
+        allResource.forEach((resource) => {
+            resourceIDMapResource[resource.resourceID] = resource
+        })
+        return resourceIDMapResource
+    },
+)
+export const getControllerRules = createSelector(
+    [getController],
+    (controller) => {
+        return controller.rules
+    },
+)
+export const getControllerRulesfunctions = createSelector(
+    [getController],
+    (controller) => {
+        return controller.getRules
+    },
+)
+export const getAllPagesList = createSelector(
+    [getController],
+    (controller) => {
+        return controller.pages
+    },
+)
+export const getControllerSetStyleFunctions = createSelector(
+    [getController],
+    (controller) => {
+        return controller.setStyles
+    },
+)

package/redux/currentApp/executionController/controllerSlice.ts

@@ -0,0 +1,28 @@
+import { createSlice } from "@reduxjs/toolkit"
+import {
+  addControllerItemReducer,
+  addResourceRulesInController,
+
+  setResourceRulesReducer,
+  updateControllerListReducer,
+  
+  setResourcePagesReducer
+} from "@/redux/currentApp/executionController/controllerReducer"
+import { ControllerInitialState } from "@/redux/currentApp/executionController/controllerState"
+
+const ControllerSlice = createSlice({
+  name: "Controller",
+  initialState: ControllerInitialState,
+  reducers: {
+    updateControllerListReducer,
+    addControllerItemReducer,
+  
+    setResourceRulesReducer,
+    addResourceRulesInController,
+ 
+    setResourcePagesReducer
+  },
+})
+
+export default ControllerSlice.reducer
+export const ControllerActions = ControllerSlice.actions

package/redux/currentApp/executionController/controllerState.ts

@@ -0,0 +1,3 @@
+import { ControllerContent } from "./interface"
+export type ResourceInitialConfig = unknown;
+export const ControllerInitialState = { pages: [{}] } as ControllerContent