impaktapps-ui-builder 1.0.0 → 1.0.1-alpha.1

package/page/App/components/dotPanel/components/Section/style.ts

@@ -1,77 +0,0 @@
-import { globalColor } from "@/utils/colorBuilder"
-import { css } from "@emotion/react"
-import styled from "@emotion/native"
-import { View, ViewProps } from "react-native"
-
-export const containerWrapperStyle = css`
-  width: 100%;
-  height: 100%;
-  padding: 0;
-  display: flex;
-  flex-direction: column;
-  position: relative;
-  overflow: hidden;
-`
-export const applyNoBottomPaddingStyle = (isShowFold: boolean) => {
-  return isShowFold
-    ? css`
-        padding-bottom: 0;
-      `
-    : null
-}
-
-export const openFoldWrapperStyle = css`
-  width: 16px; 
-  height: 16px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: ${globalColor("white-01")};
-  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.08);
-  border-radius: 0px 16px 16px 0px;
-  cursor: pointer;
-  font-size: 12px;
-  color: ${globalColor("grayBlue-02")};
-`
-
-export const applyOpenFoldPositionStyle = (direction: "left" | "right") => {
-  return css`
-    position: absolute;
-    bottom: 8px;
-    transform: ${direction === "right" ? "rotate(180deg)" : "unset"};
-  `
-}
-
-export const applyCloseFoldPositionStyle = css`
-  position: absolute;
-  right: 0;
-  bottom: 8px;
-  border-radius: 16px 0 0 16px;
-`
-
-export const rotaIconStyle = css`
-  transform: rotate(180deg);
-`
-
-export const applyHorizontalAnimationWrapperStyle = (
-  isFold: boolean,
-  direction: "left" | "right",
-) => css`
-  width: 100%;
-  height: 100%;
-  visibility: ${!isFold ? "visible" : "visible"};
-  display: flex;
-  flex-direction: ${direction === "right" ? "row-reverse" : "row"};
-`
-// visibility: ${!isFold ? "visible" : "hidden"};
-
-
-export const ContainerWrapper = styled(View)<ViewProps>({
-  // width: "100%",
-  height: "100%",
-  // flex: 1
-  // padding: 0,
-  // flexDirection: "column", // `display: "flex"` is implied for View
-  // position: "relative",
-  // overflow: "hidden",
-})

package/page/App/components/dotPanel/constant/canvas.ts

@@ -1,30 +0,0 @@
-export const UNIT_HEIGHT = 8
-
-export const DEFAULT_BODY_COLUMNS_NUMBER = 32
-export const DEFAULT_ASIDE_COLUMNS_NUMBER = 8
-
-export const HEADER_MIN_HEIGHT = 40
-export const FOOTER_MIN_HEIGHT = 40
-export const BODY_MIN_HEIGHT = 40
-
-export const LEFT_MIN_WIDTH = 80
-export const RIGHT_MIN_WIDTH = 80
-export const BODY_MIN_WIDTH = 80
-
-export const BASIC_CANVAS_PADDING = 8
-export const SCROLL_CONTAINER_PADDING = 2
-export const BORDER_WIDTH = 2
-export const ADD_ROWS = 40
-export const SAFE_ROWS = 10
-
-export const DEFAULT_PERCENT_WIDTH = {
-  LEFT: 20,
-  RIGHT: 20,
-  CANVAS: 100,
-}
-
-export const DEFAULT_PX_WIDTH = {
-  LEFT: 240,
-  RIGHT: 240,
-  CANVAS: 1440,
-}

package/page/App/components/dotPanel/constant/snapshotNew.ts

@@ -1,34 +0,0 @@
-// import { WidgetLayoutInfo } from "@/redux/currentApp/layoutInfo/layoutInfoState"
-type WidgetLayoutInfo = any;
-
-class SnapShot {
-  snapshot: Record<string, WidgetLayoutInfo> = {}
-  isInit: boolean = false
-
-  constructor() {
-    this.snapshot = {}
-  }
-
-  setSnapshot(snapshot: Record<string, WidgetLayoutInfo>) {
-    this.isInit = true
-    this.snapshot = snapshot
-  }
-
-  getSnapshot() {
-    return this.snapshot
-  }
-
-  clearSnapshot() {
-    this.snapshot = {}
-  }
-  getSnapShotArray() {
-    return Object.values(this.snapshot)
-  }
-  getSnapShotArrayByParentDisplayName(parentDisplayName: string) {
-    return Object.values(this.snapshot).filter(
-      (item) => item.parentNode === parentDisplayName,
-    )
-  }
-}
-
-export const IMPAKTAPPSSnapshot = new SnapShot()

package/page/App/components/dotPanel/context/mouseHoverContext.tsx

@@ -1,55 +0,0 @@
-import { FC, ReactNode, createContext, useRef } from "react"
-import { useDispatch } from "react-redux"
-import { configActions } from "@/redux/config/configSlice"
-
-interface MouseHoverContextInjected {
-  hoveredWidgets: string[]
-  addHoverWidget: (widgetDisplayName: string) => void
-  deleteHoverWidget: (widgetDisplayName: string) => void
-  resetHoverWidget: () => void
-}
-
-export const MouseHoverContext = createContext<MouseHoverContextInjected>(
-  {} as MouseHoverContextInjected,
-)
-
-interface MouseHoverProviderProps {
-  children: ReactNode
-}
-
-export const MouseHoverProvider: FC<MouseHoverProviderProps> = (props) => {
-  const { children } = props
-  const hoverWidgetsRef = useRef<string[]>([])
-  const dispatch = useDispatch()
-
-  const addHoverWidget = (widgetDisplayName: string) => {
-    hoverWidgetsRef.current.push(widgetDisplayName)
-    hoverWidgetsRef.current = Array.from(new Set(hoverWidgetsRef.current))
-    const currentHoverWidgets = [...hoverWidgetsRef.current]
-    dispatch(configActions.updateHoveredComponent(currentHoverWidgets))
-  }
-
-  const deleteHoverWidget = (widgetDisplayName: string) => {
-    const index = hoverWidgetsRef.current.indexOf(widgetDisplayName)
-    if (index === -1) return
-    hoverWidgetsRef.current.splice(index, 1)
-    const currentHoverWidgets = [...hoverWidgetsRef.current]
-    dispatch(configActions.updateHoveredComponent(currentHoverWidgets))
-  }
-  const resetHoverWidget = () => {
-    hoverWidgetsRef.current = []
-    dispatch(configActions.updateHoveredComponent([]))
-  }
-  const value = {
-    hoveredWidgets: hoverWidgetsRef.current,
-    addHoverWidget,
-    deleteHoverWidget,
-    resetHoverWidget,
-  }
-
-  return (
-    <MouseHoverContext.Provider value={value}>
-      {children}
-    </MouseHoverContext.Provider>
-  )
-}

package/page/App/components/dotPanel/context/mouseMoveContext.tsx

@@ -1,46 +0,0 @@
-import { FC, ReactNode, createContext, useRef } from "react"
-
-interface MouseMoveContextInjected {
-  hoveredWidgets: string[]
-  addHoverWidget: (widgetDisplayName: string) => void
-  deleteHoverWidget: (widgetDisplayName: string) => void
-  resetHoverWidget: () => void
-}
-
-export const MouseMoveContext = createContext<MouseMoveContextInjected>(
-  {} as MouseMoveContextInjected,
-)
-
-interface MouseMoveProviderProps {
-  children: ReactNode
-}
-
-export const MouseMoveProvider: FC<MouseMoveProviderProps> = (props) => {
-  const { children } = props
-  const hoverWidgetsRef = useRef<string[]>([])
-
-  const addHoverWidget = (widgetDisplayName: string) => {
-    hoverWidgetsRef.current.push(widgetDisplayName)
-  }
-
-  const deleteHoverWidget = (widgetDisplayName: string) => {
-    const index = hoverWidgetsRef.current.indexOf(widgetDisplayName)
-    if (index === -1) return
-    hoverWidgetsRef.current.splice(index, 1)
-  }
-  const resetHoverWidget = () => {
-    hoverWidgetsRef.current = []
-  }
-  const value = {
-    hoveredWidgets: hoverWidgetsRef.current,
-    addHoverWidget,
-    deleteHoverWidget,
-    resetHoverWidget,
-  }
-
-  return (
-    <MouseMoveContext.Provider value={value}>
-      {children}
-    </MouseMoveContext.Provider>
-  )
-}

package/page/App/components/dotPanel/context/scrollBarContext.tsx

@@ -1,27 +0,0 @@
-import { RefObject } from "react"
-
-const scrollBarContainerController = new Map<
-  string,
-  RefObject<HTMLDivElement>
->()
-
-export const setScrollBarContainerController = (
-  displayName: string,
-  ref: RefObject<HTMLDivElement>,
-) => {
-  scrollBarContainerController.set(displayName, ref)
-}
-
-export const removeScrollBarContainerControllerByDisplayName = (
-  displayName: string,
-) => {
-  scrollBarContainerController.delete(displayName)
-}
-
-export const clearScrollBarContainerController = () => {
-  scrollBarContainerController.clear()
-}
-
-export const getScrollBarContainerByDisplayName = (displayName: string) => {
-  return scrollBarContainerController.get(displayName)
-}

package/page/App/components/dotPanel/hooks/sectionUtils.ts

@@ -1,34 +0,0 @@
-export const getCurrentDisplayName = (
-  sectionViewConfigs: any[],
-  viewSortedKey: string[],
-  defaultViewKey: string,
-  isProduction: boolean,
-  viewPath: string | undefined,
-  currentViewIndex: number,
-) => {
-  if (!Array.isArray(sectionViewConfigs) || !Array.isArray(viewSortedKey))
-    return "sub-page1"
-  const defaultedViewConfig = sectionViewConfigs.find(
-    (item) => item.key === defaultViewKey,
-  )
-  const defaultedViewKey = viewSortedKey.includes(
-    defaultedViewConfig?.viewDisplayName,
-  )
-    ? defaultedViewConfig?.viewDisplayName
-    : viewSortedKey[0]
-
-  if (isProduction) {
-    let targetViewDisplayName = defaultedViewKey
-    if (viewPath) {
-      const targetViewName = sectionViewConfigs.find(
-        (config) => config.path === decodeURIComponent(viewPath),
-      )
-      targetViewDisplayName =
-        targetViewName?.viewDisplayName || defaultedViewKey
-    }
-
-    return targetViewDisplayName
-  } else {
-    return viewSortedKey[currentViewIndex] || defaultedViewKey
-  }
-}

package/page/App/components/dotPanel/hooks/useMousePostionAsync.tsx

@@ -1,150 +0,0 @@
-import { RefObject, useCallback, useContext, useEffect, useRef } from "react"
-import { useSelector } from "react-redux"
-// import { useParams } from "react-router-dom"
-import { useWindowSize } from "react-use"
-import { getIsDragging } from "@/redux/currentApp/executionTree/executionSelector"
-import { MouseMoveContext } from "../context/mouseMoveContext"
-import { getMousePositionWithIMPAKTAPPSUnit } from "../utils/calcMouse"
-import { sendMousePositionHandler } from "../utils/sendBinaryMessage"
-
-interface CursorPosition {
-  xMod: number
-  yMod: number
-  xInteger: number
-  yInteger: number
-}
-
-export const useMousePositionAsync = (
-  containerRef: RefObject<HTMLDivElement>,
-  unitWidth: number,
-  displayName: string,
-  isRoot: boolean = false,
-  wrapperRef: RefObject<HTMLDivElement>,
-) => {
-// const params = useParams()
-  const params = ""
-  const isDragging = useSelector(getIsDragging)
-  const { width, height } = useWindowSize()
-  const cursorPositionRef = useRef<CursorPosition>({
-    xInteger: 0,
-    yInteger: 0,
-    xMod: 0,
-    yMod: 0,
-  })
-
-  const mouseMoveContext = useContext(MouseMoveContext)
-  const mouseEnterHandler = useCallback(() => {
-    mouseMoveContext.addHoverWidget(displayName)
-  }, [displayName, mouseMoveContext])
-
-  const mouseLeaveHandler = useCallback(() => {
-    mouseMoveContext.deleteHoverWidget(displayName)
-    if (isRoot && !isDragging) {
-      sendMousePositionHandler(displayName, 0, 0, 0, 0, true)
-    }
-  }, [displayName, isDragging, isRoot, mouseMoveContext])
-
-  const mouseMoveAsyncHandler = useCallback(
-    (e: MouseEvent) => {
-      const { clientX, clientY } = e
-      if (
-        mouseMoveContext.hoveredWidgets.length === 0 ||
-        mouseMoveContext.hoveredWidgets.at(-1) !== displayName
-      )
-        return
-      const containerRect = containerRef.current?.getBoundingClientRect()
-      const containerPosition = {
-        x: containerRect?.left ?? 0,
-        y: containerRect?.top ?? 0,
-      }
-      const mousePosition = {
-        x: clientX,
-        y: clientY,
-      }
-      const { xInteger, xMod, yInteger, yMod } = getMousePositionWithIMPAKTAPPSUnit(
-        unitWidth,
-        containerPosition,
-        mousePosition,
-        containerRef.current?.scrollTop,
-      )
-      cursorPositionRef.current = {
-        xInteger,
-        yInteger,
-        xMod,
-        yMod,
-      }
-      if (
-        Number.isInteger(xInteger) &&
-        Number.isInteger(yInteger) &&
-        !Number.isNaN(xMod) &&
-        !Number.isNaN(yMod) &&
-        !isDragging
-      ) {
-        sendMousePositionHandler(displayName, xInteger, yInteger, xMod, yMod)
-      }
-    },
-    [
-      containerRef,
-      displayName,
-      isDragging,
-      mouseMoveContext.hoveredWidgets,
-      unitWidth,
-    ],
-  )
-
-  const visibilityChangeHandler = useCallback(() => {
-    if (document.hidden) {
-      mouseLeaveHandler()
-    }
-  }, [mouseLeaveHandler])
-
-  const pageHideHandler = useCallback(() => {
-    mouseLeaveHandler()
-  }, [mouseLeaveHandler])
-
-  useEffect(() => {
-    const wrapperNode = wrapperRef.current
-    if (wrapperNode) {
-      wrapperNode.addEventListener("mouseenter", mouseEnterHandler)
-      wrapperNode?.addEventListener("mousemove", mouseMoveAsyncHandler)
-      wrapperNode?.addEventListener("mouseleave", mouseLeaveHandler)
-    }
-    return () => {
-      if (wrapperNode) {
-        wrapperNode.removeEventListener("mouseenter", mouseEnterHandler)
-        wrapperNode.removeEventListener("mousemove", mouseMoveAsyncHandler)
-        wrapperNode.removeEventListener("mouseleave", mouseLeaveHandler)
-      }
-    }
-  }, [
-    containerRef,
-    height,
-    mouseEnterHandler,
-    mouseLeaveHandler,
-    mouseMoveAsyncHandler,
-    // params.appId,
-    unitWidth,
-    // userInfo.nickname,
-    // userInfo.userID,
-    width,
-    wrapperRef,
-  ])
-
-  useEffect(() => {
-    if (isRoot) {
-      window.addEventListener("blur", mouseLeaveHandler)
-      window.addEventListener("visibilitychange", visibilityChangeHandler)
-      window.addEventListener("pagehide", pageHideHandler)
-    }
-
-    return () => {
-      if (isRoot) {
-        window.removeEventListener("blur", mouseLeaveHandler)
-        window.removeEventListener("visibilitychange", visibilityChangeHandler)
-        window.removeEventListener("pagehide", pageHideHandler)
-      }
-    }
-  }, [isRoot, mouseLeaveHandler, pageHideHandler, visibilityChangeHandler])
-
-  return { cursorPositionRef }
-}

package/page/App/components/dotPanel/index.tsx

@@ -1,105 +0,0 @@
-import { FC, useMemo } from "react";
-import { useSelector } from "react-redux";
-// import { useParams } from "react-router-dom";
-import { applyViewportContainerWrapperStyle } from "./style";
-import {
-  getCanvasShape,
-  getIsIMPAKTEditMode,
-  getIsIMPAKTMode,
-  getIsIMPAKTPreviewMode,
-  getIsIMPAKTProductMode,
-  getSelectedScreen,
-} from "@/redux/config/configSelector";
-import { getViewportSizeSelector } from "@/redux/currentApp/components/componentsSelector";
-import { getRootNodeExecutionResult } from "@/redux/currentApp/executionTree/executionSelector";
-
-import { RenderPage } from "./components/Page/renderPage";
-import { MouseHoverProvider } from "./context/mouseHoverContext";
-import { MouseMoveProvider } from "./context/mouseMoveContext";
-import { ScreenPayload } from "@/redux/config/configState";
-import { useTheme } from "@mui/material";
-import { RenderBodySection } from "./components/Section/BodySection";
-import { Platform } from "react-native";
-
-export const DotPanel: FC = () => {
-  const rootExecutionProps = useSelector(getRootNodeExecutionResult);
-  const mode = useSelector(getIsIMPAKTMode);
-  const isEditMode = useSelector(getIsIMPAKTEditMode);
-  const canvasShape = useSelector(getCanvasShape);
-  const Screen: ScreenPayload = useSelector(getSelectedScreen);
-  const isProductionMode = useSelector(getIsIMPAKTProductMode);
-  const viewportSize = useSelector(getViewportSizeSelector);
-  const isPreviewMode = useSelector(getIsIMPAKTPreviewMode);
-  const theme = useTheme();
-  const { currentPageIndex, pageSortedKey, homepageDisplayName } =
-    rootExecutionProps;
-  // const { pageName } = useParams();
-  const  pageName  = "";
-  const currentDisplayName = useMemo(() => {
-    if (isProductionMode) {
-      return (
-        pageName ||
-        homepageDisplayName ||
-        pageSortedKey[currentPageIndex] ||
-        "page1"
-      );
-    } else {
-      return pageSortedKey[currentPageIndex] || homepageDisplayName;
-    }
-  }, [
-    currentPageIndex,
-    homepageDisplayName,
-    isProductionMode,
-    pageName,
-    pageSortedKey,
-  ]);
-  if (!rootExecutionProps) return null;
-  const actualWidth = useMemo(() => {
-    // console.log("parentNodeDisplayName >>", parentNodeDisplayName);
-    if (!isEditMode) {
-      return "100%";
-    }
-    return Screen == "Mobile"
-      ? `${380}px`
-      : Screen == "Tablet"
-      ? `${800}px`
-      : `${100}%`;
-  }, [Screen, canvasShape.canvasWidth, isEditMode]);
-
-  const DEFAULT_BODY_COLUMNS_NUMBER = 32
-
-  
-  if(Platform.OS === 'web'){
-     return (
-    <MouseHoverProvider>
-      <MouseMoveProvider>
-        <div
-          css={applyViewportContainerWrapperStyle(
-            mode,
-            theme,
-            isPreviewMode ? viewportSize.viewportWidth : actualWidth,
-            isPreviewMode ? viewportSize.viewportHeight : undefined
-          )}
-        >
-          <RenderPage
-            key={currentDisplayName}
-            currentPageDisplayName={currentDisplayName}
-          />
-        </div>
-      </MouseMoveProvider>
-    </MouseHoverProvider>
-  );
-  }
-  else{
-    return(
-      <RenderBodySection
-          columnNumber={ DEFAULT_BODY_COLUMNS_NUMBER}
-      />
-      
-  )
-
-  }
- 
-};
-
-DotPanel.displayName = "DotPanel";

package/page/App/components/dotPanel/interface.ts

@@ -1,19 +0,0 @@
-// return when drop collect trigger
-export interface DropCollectedInfo {
-  isActive: boolean
-}
-
-// return when drag collect trigger
-export interface DragCollectedInfo {
-  isDragging: boolean
-}
-
-export interface PreviewPlaceholderProps {
-  canDrop: boolean
-  x: number
-  y: number
-  lunchX: number
-  lunchY: number
-  w: number
-  h: number
-}