impaktapps-ui-builder 0.0.382460 → 1.0.0

package/utils/copyManager.ts

@@ -0,0 +1,378 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { klona } from "klona"
+import { set } from "lodash-es"
+import { DEFAULT_BODY_COLUMNS_NUMBER } from "@/page/App/components/dotPanel/constant/canvas"
+import { searchDSLByDisplayName } from "@/redux/currentApp/components/componentsSelector"
+import { componentsActions } from "@/redux/currentApp/components/componentsSlice"
+import { getExecution } from "@/redux/currentApp/executionTree/executionSelector"
+import { FocusManager } from "@/utils/focusManager"
+import { DisplayNameGenerator } from "@/utils/generators/generateDisplayName"
+// import { getActionMixedList } from "../redux/currentApp/action/actionSelector"
+import { copyWidgetDisplayNameHelper } from "./changeDisplayNameHelper"
+// import { buildTreeByMapNode } from "./componentNode/flatTree"
+import { ComponentMapNode, ComponentTreeNode } from "@/redux/currentApp/components/componentsState"
+import { buildTreeByMapNode } from "./componentNode/flatTree"
+
+const doPaste = (
+  originCopyComponents: ComponentTreeNode[],
+ 
+  sources: "keyboard" | "duplicate",
+  store: any
+) => {
+
+  store.dispatch(componentsActions.addComponentReducer(originCopyComponents))
+}
+
+export class CopyManager {
+  static currentCopyComponentNodes: ComponentMapNode[] | null = null
+  static copiedColumnNumber: number = DEFAULT_BODY_COLUMNS_NUMBER
+
+  // static currentCopyAction: ActionItem<ActionContent> | null = null
+
+  // static copyActionByActionID(actionID: string) {
+  //   // const actionList = getActionMixedList(store.getState())
+  //   const targetAction = actionList.find((item) => {
+  //     return item.actionID === actionID
+  //   })
+  //   if (targetAction) {
+  //     this.currentCopyAction = targetAction
+  //   } else {
+  //     this.currentCopyAction = null
+  //   }
+  // } 
+
+  static copyComponentNodeByDisplayName(displayNames: string[], store) {
+    if (displayNames.length > 0) {
+      this.currentCopyComponentNodes = displayNames.map((displayName) => {
+        return searchDSLByDisplayName(displayName, store.getState())
+      })
+     
+    }
+  }
+
+  static paste(sources: "keyboard" | "duplicate", store: any) {
+    // IMPAKTAPPSSnapshot.setSnapshot(widgetLayoutInfos)
+    switch (FocusManager.getFocus()) {
+      // case "data_action":
+      // case "action":
+      //   if (this.currentCopyAction != null) {
+      //     onCopyActionItem(this.currentCopyAction)
+      //   }
+      //   break
+      case "data_component":
+      case "canvas":
+        if (this.currentCopyComponentNodes != null) {
+          const clickPosition = FocusManager.getClickPosition()
+          const needCopyModalComponents = this.currentCopyComponentNodes
+            .filter((item) => item.type === "MODAL_WIDGET")
+            .map((needCopyComponent) => {
+              const targetNodeParentNode = searchDSLByDisplayName(
+                needCopyComponent.parentNode!,
+                store
+              )
+
+              return this.copyComponent(
+                buildTreeByMapNode(needCopyComponent.displayName, store),
+                targetNodeParentNode.displayName,
+                needCopyComponent.x,
+                needCopyComponent.y,
+                store
+              )
+            })
+          const needCopyOtherComponents = this.currentCopyComponentNodes
+            .filter((item) => item.type !== "MODAL_WIDGET")
+          const copyResult = [...needCopyModalComponents]
+          if (clickPosition) {
+            switch (clickPosition.type) {
+              case "component":
+                // eslint-disable-next-line no-case-declarations
+                const targetNode = searchDSLByDisplayName(
+                  clickPosition.displayName,
+                  store
+                )
+                if (targetNode && targetNode.parentNode) {
+                
+                  switch (targetNode.type) {
+                    case "FORM_WIDGET":
+                    case "MODAL_WIDGET": {
+                      const targetParentNode = searchDSLByDisplayName(
+                        targetNode.childrenNode[1], store.getState()
+                      )
+                      if (targetParentNode) {
+                        let prevY = 0
+                        copyResult.push(
+                          ...needCopyOtherComponents.map((node) => {
+                            const newNode = this.copyComponent(
+                              buildTreeByMapNode(node.displayName, store),
+                              targetParentNode.displayName,
+                              0,
+                              prevY,
+                              store
+                            )
+                            prevY += node.h
+                            return newNode
+                          }),
+                        )
+                      }
+                      break
+                    }
+                    case "CONTAINER_WIDGET": {
+                      const executionTree = getExecution(
+                        store.getState(),
+                      ).result
+                      const { currentIndex } =
+                        executionTree[targetNode.displayName]
+                      const targetParentNode = searchDSLByDisplayName(
+                        targetNode.childrenNode[currentIndex], store.getState()
+                      )
+                      if (targetParentNode) {
+                        let prevY = 0
+                        copyResult.push(
+                          ...needCopyOtherComponents.map((node) => {
+                            const newNode = this.copyComponent(
+                              buildTreeByMapNode(node.displayName, store),
+                              targetParentNode.displayName,
+                              0,
+                              prevY,
+                              store
+                            )
+                            prevY += node.h
+                            return newNode
+                          }),
+                        )
+                      }
+                      break
+                    }
+                    case "LIST_WIDGET":
+                    case "GRID_LIST_WIDGET": {
+                      const targetParentNode = searchDSLByDisplayName(
+                        targetNode.childrenNode[0],
+                        store
+                      )
+                      if (targetParentNode) {
+                        let prevY = 0
+                        copyResult.push(
+                          ...needCopyOtherComponents.map((node) => {
+                            const newNode = this.copyComponent(
+                              buildTreeByMapNode(node.displayName, store),
+                              targetParentNode.displayName,
+                              0,
+                              prevY,
+                              store
+                            )
+                            prevY += node.h
+                            return newNode
+                          }),
+                        )
+                      }
+                      break
+                    }
+                    default: {
+                      const targetParentNode = searchDSLByDisplayName(
+                        targetNode.parentNode,
+                        store.getState()
+                      )
+                      if (targetParentNode) {
+                        let leftTopX = Number.MAX_SAFE_INTEGER
+                        let leftTopY = Number.MAX_SAFE_INTEGER
+                        needCopyOtherComponents.forEach((node) => {
+                          leftTopX = Math.min(leftTopX, node.x)
+                          leftTopY = Math.min(leftTopY, node.y)
+                        })
+                        copyResult.push(
+                          ...needCopyOtherComponents.map((node) => {
+                            return this.copyComponent(
+                              buildTreeByMapNode(node.displayName, store),
+                              targetParentNode.displayName,
+                              targetNode!.x + node.x - leftTopX,
+                              targetNode!.y + targetNode!.h + node.y - leftTopY,
+                              store
+                            )
+                          }),
+                        )
+                      }
+                    }
+                  }
+                  doPaste(
+                    copyResult,
+                    sources,
+                    store.getState()
+                  )
+                } else {
+                  // message.normal({
+                  //   content: i18n.t("frame.paste_no_aimed"),
+                  // })
+                }
+                break
+              case "inner_container":
+                if (clickPosition.clickPosition.length !== 2) {
+                  // message.normal({
+                  //   content: i18n.t("frame.paste_no_aimed"),
+                  // })
+                  return
+                }
+                // eslint-disable-next-line no-case-declarations
+                const containerNode = searchDSLByDisplayName(
+                  clickPosition.displayName, store.getState()
+                )
+                if (containerNode) {
+                
+                  let leftTopX = Number.MAX_SAFE_INTEGER
+                  let leftTopY = Number.MAX_SAFE_INTEGER
+
+                  this.currentCopyComponentNodes.forEach((node) => {
+                    leftTopX = Math.min(leftTopX, node.x)
+                    leftTopY = Math.min(leftTopY, node.y)
+                  })
+
+                  const originCopyComponents =
+                    this.currentCopyComponentNodes.map((node) => {
+                  
+                      const needCopyComponent = node;
+                      if (needCopyComponent.type === "MODAL_WIDGET") {
+                        const targetNodeParentNode = searchDSLByDisplayName(
+                          needCopyComponent.parentNode!, store.getState()
+                        )
+                        return this.copyComponent(
+                          buildTreeByMapNode(needCopyComponent.displayName, store),
+                          targetNodeParentNode.displayName,
+                          needCopyComponent.x,
+                          needCopyComponent.y,
+                          store,
+                          // copyComponent,
+
+                        )
+                      }
+                      return this.copyComponent(
+                        buildTreeByMapNode(needCopyComponent.displayName, store),
+                        containerNode.displayName,
+                        clickPosition.clickPosition[0] +
+                        needCopyComponent.x -
+                        leftTopX,
+                        clickPosition.clickPosition[1] +
+                        needCopyComponent.y -
+                        leftTopY,
+                        store
+                      )
+                    })
+
+                  doPaste(
+                    originCopyComponents,
+                    sources,
+                    store.getState()
+                  )
+                } else {
+                  // message.normal({
+                  //   content: i18n.t("frame.paste_no_aimed"),
+                  // })
+                }
+                break
+              case "group":
+                // eslint-disable-next-line no-case-declarations
+                const targetParentNode = searchDSLByDisplayName(
+                  clickPosition.displayName, store.getState()
+                )
+                if (targetParentNode) {
+               
+                  let leftTopX = Number.MAX_SAFE_INTEGER
+                  let leftTopY = Number.MAX_SAFE_INTEGER
+                  this.currentCopyComponentNodes.forEach((node) => {
+                    leftTopX = Math.min(leftTopX, node.x)
+                    leftTopY = Math.min(leftTopY, node.y)
+                  })
+
+                  const originCopyComponents =
+                    this.currentCopyComponentNodes.map((node) => {
+                      const needCopyComponent = node;
+                      if (needCopyComponent.type === "MODAL_WIDGET") {
+                        const targetNodeParentNode = searchDSLByDisplayName(
+                          needCopyComponent.parentNode!, store.getState()
+                        )
+                        return this.copyComponent(
+                          buildTreeByMapNode(needCopyComponent.displayName, store),
+                          targetNodeParentNode.displayName,
+                          needCopyComponent.x,
+                          needCopyComponent.y,
+                          store
+                        )
+                      }
+                      return this.copyComponent(
+                        buildTreeByMapNode(needCopyComponent.displayName, store),
+                        targetParentNode.displayName,
+                        clickPosition.clickPosition[0] +
+                        needCopyComponent.x -
+                        leftTopX,
+                        clickPosition.clickPosition[1] +
+                        clickPosition.clickPosition[3] +
+                        needCopyComponent.y -
+                        leftTopY,
+                        store
+                      )
+                    })
+
+                  doPaste(
+                    originCopyComponents,
+                    sources, store.getState()
+                  )
+                }
+            }
+          }
+        }
+        break
+      case "none":
+        break
+      case "components_config":
+        break
+      case "page_config":
+        break
+      case "data_page":
+        break
+      case "data_global_state":
+        break
+      case "widget_picker":
+        break
+    }
+  }
+
+  static copyComponent(
+    node: ComponentTreeNode,
+    newParentNodeDisplayName: string,
+    rawX: number,
+    rawY: number,
+    store: any
+  ): ComponentTreeNode {
+    const newDisplayName = DisplayNameGenerator.generateDisplayName(
+      node.type,
+      node.showName,
+    )
+
+    const updatePathsMapValue = copyWidgetDisplayNameHelper(
+      node.displayName,
+      newDisplayName, store.getState()
+    )
+
+    const newNode = klona({
+      ...node,
+      props: node.props ?? {},
+      displayName: newDisplayName,
+      x: rawX,
+      y: rawY,
+      w: node.w,
+      h: node.h,
+      parentNode: newParentNodeDisplayName,
+    } as ComponentTreeNode)
+
+    Object.keys(updatePathsMapValue).forEach((key) => {
+      set(newNode, `props.${key}`, updatePathsMapValue[key])
+    })
+
+    if (Array.isArray(node.childrenNode)) {
+      newNode.childrenNode = node.childrenNode.map((n) =>
+        this.copyComponent(n, newNode.displayName, n.x, n.y, store),
+      )
+    }
+    return newNode
+  }
+}
+
+

package/utils/drag/drag.ts

@@ -0,0 +1,37 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { configActions } from "@/redux/config/configSlice"
+// import { WidgetLayoutInfo } from "@/redux/currentApp/layoutInfo/layoutInfoState"
+type WidgetLayoutInfo = any;
+
+import { DisplayNameGenerator } from "@/utils/generators/generateDisplayName"
+import { FocusManager } from "../focusManager"
+
+export function startDragMultiNodes(dragWidgetInfos: WidgetLayoutInfo[],store:any) {
+  store.dispatch(configActions.updateShowDot(true))
+  const displayNames = dragWidgetInfos.map((node) => node.displayName)
+  store.dispatch(configActions.setDraggingNodeIDsReducer(displayNames))
+}
+
+export function endDragMultiNodes(
+  dragWidgetInfos: WidgetLayoutInfo[],
+  isDropOnCanvas: boolean,
+  isAddAction: boolean = false,
+  store:any
+) {
+  store.dispatch(configActions.updateShowDot(false))
+  const displayNames = dragWidgetInfos.map((node) => node.displayName)
+  store.dispatch(configActions.setDraggingNodeIDsReducer([]))
+
+  if (isDropOnCanvas) {
+    FocusManager.switchFocus("canvas", {
+      displayName: displayNames[0],
+      type: "component",
+      clickPosition: [],
+    })
+    store.dispatch(configActions.updateSelectedComponent(displayNames))
+  }
+
+  if (isAddAction && !isDropOnCanvas) {
+    DisplayNameGenerator.removeDisplayName(dragWidgetInfos[0].displayName)
+  }
+}

package/utils/evaluateDynamicString/codeSandbox.ts

@@ -0,0 +1,173 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { klona } from "klona"
+
+const blacklistSet = new Set([
+  "top",
+  "window",
+  "self",
+  "globalThis",
+  "global",
+  "frames",
+  "parent",
+  "fetch",
+  "XMLHttpRequest",
+  "document",
+  "MutationObserver",
+])
+
+const globalVarNames = new Set<PropertyKey>([
+  "window",
+  "globalThis",
+  "self",
+  "global",
+])
+
+// function runUsersCode(code: string) {
+//   const finalCode = `
+//     'use strict';
+//     return (function(context) {
+//       return (function() {
+//         return (${code});
+//       })();
+//     });
+//   `;
+//   return new Function(finalCode)();
+// }
+function isDomElement(obj: any): boolean {
+  return obj instanceof Element || obj instanceof HTMLCollection
+}
+
+function getPropertyFromNativeWindow(prop: PropertyKey) {
+  const ret = Reflect.get(window, prop)
+  if (typeof ret === "function" && !ret.prototype) {
+    return ret.bind(window)
+  }
+  // get DOM element by id, serializing may cause error
+  if (isDomElement(ret)) {
+    return undefined
+  }
+  return ret
+}
+
+function createBlackHole(): any {
+  return new Proxy(
+    function () {
+      return createBlackHole()
+    },
+    {
+      get(_t, p) {
+        if (p === "toString") {
+          return function () {
+            return ""
+          }
+        }
+        if (p === Symbol.toPrimitive) {
+          return function () {
+            return ""
+          }
+        }
+        return createBlackHole()
+      },
+    },
+  )
+}
+
+function createMockWindow(base?: object) {
+  const win: any = new Proxy(Object.assign({}, base), {
+    has() {
+      return true
+    },
+    set(target, p, newValue) {
+      return Reflect.set(target, p, newValue)
+    },
+    get(target, p) {
+      if (p in target) {
+        return Reflect.get(target, p)
+      }
+      if (globalVarNames.has(p)) {
+        return win
+      }
+      if (typeof p === "string" && blacklistSet.has(p)) {
+        return createBlackHole()
+      }
+      return getPropertyFromNativeWindow(p)
+    },
+  })
+  return win
+}
+
+function proxySandbox(context: any) {
+  const isProtectedVar = (key: PropertyKey) => {
+    return key in context || globalVarNames.has(key)
+  }
+  const mockWindow = createMockWindow(undefined)
+
+  return new Proxy(mockWindow, {
+    has() {
+      return true
+    },
+    get(target, p, receiver) {
+      if (p === Symbol.unscopables) {
+        return undefined
+      }
+
+      if (p === "toJSON") {
+        return target
+      }
+
+      if (globalVarNames.has(p)) {
+        return target
+      }
+
+      if (p in context) {
+        const value = Reflect.get(context, p, receiver)
+        if (typeof value === "object" && value !== null) {
+          Object.freeze(value)
+          Object.values(value).forEach(Object.freeze)
+        }
+        return value
+      }
+
+      return Reflect.get(target, p, receiver)
+    },
+
+    set(target, p, value, receiver) {
+      if (isProtectedVar(p)) {
+        throw new Error(p.toString() + " can't be modified")
+      }
+      return Reflect.set(target, p, value, receiver)
+    },
+
+    defineProperty(target, p, attributes) {
+      if (isProtectedVar(p)) {
+        throw new Error("can't define property:" + p.toString())
+      }
+      return Reflect.defineProperty(target, p, attributes)
+    },
+
+    deleteProperty(target, p) {
+      if (isProtectedVar(p)) {
+        throw new Error("can't delete property:" + p.toString())
+      }
+      return Reflect.deleteProperty(target, p)
+    },
+
+    setPrototypeOf() {
+      throw new Error("can't invoke setPrototypeOf")
+    },
+  })
+}
+
+function runUsersCode(code: string, keys: string[]) {
+  return new Function(...keys, `'use strict'; return (${code});`);
+}
+
+export const evalScript = (script: string, dataTree: Record<string, any>) => {
+  const keys = Object.keys(dataTree);
+  const values = Object.values(dataTree);
+
+  const userCode = runUsersCode(script, keys);
+  const result = userCode(...values);
+  return klona(result);
+};
+

package/utils/evaluateDynamicString/dynamicConverter.ts

@@ -0,0 +1,63 @@
+import { klona } from "klona"
+import { evalScript } from "./codeSandbox"
+import { substituteDynamicBindingWithValues } from "./valueConverter"
+import { getStringSnippets } from "../converter";
+import { isDynamicStringSnippet } from "../helper";
+
+export const getSnippets = (
+  dynamicString: string,
+): { stringSnippets: string[]; jsSnippets: string[] } => {
+  if (!dynamicString || typeof dynamicString !== "string") {
+    return { stringSnippets: [], jsSnippets: [] }
+  }
+  const sanitisedString = dynamicString.trim()
+ const stringSnippets:string[] = getStringSnippets(sanitisedString)
+  const jsSnippets: string[] = stringSnippets.map((segment) => {
+    const length = segment.length
+    const matches = isDynamicStringSnippet(segment)
+    if (matches) {
+      return segment.substring(2, length - 2)
+    }
+    return ""
+  })
+
+  return { stringSnippets, jsSnippets }
+}
+
+export const getDynamicValue = (
+  dynamicString: string,
+  dataTree: Record<string, any>,
+) => {
+  const { jsSnippets, stringSnippets } = getSnippets(dynamicString)
+  const cloneDeepDataTree = klona(dataTree)
+  const calcContext = {
+    ...cloneDeepDataTree,
+    // ...IMPAKTAPPSEditorRuntimePropsCollectorInstance.getThirdPartyPackages(),
+  }
+  if (stringSnippets.length) {
+    const context: Record<string, unknown> = {}
+    const values = jsSnippets.map((jsSnippet, index) => {
+      if (jsSnippet) {
+        const value = evalScript(jsSnippet, calcContext)
+        context[jsSnippet] = value
+        return value
+      } else {
+        return stringSnippets[index]
+      }
+    })
+    if (stringSnippets.length === 1) {
+      return {
+        result: values[0],
+        context,
+      }
+    }
+    return {
+      result: substituteDynamicBindingWithValues(
+        dynamicString,
+        stringSnippets,
+        values,
+      ),
+      context,
+    }
+  }
+}