impaktapps-ui-builder 0.0.382457 → 1.0.0

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

@@ -0,0 +1,212 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+import { getOverlapPoints } from "overlap-area"
+import { FC, useEffect, useRef } from "react"
+import { useDispatch, useSelector } from "react-redux"
+import Selecto, { OnDragStart, SelectoEvents } from "react-selecto"
+import {
+  getIsIMPAKTProductMode,
+  getSelectedComponentDisplayNames,
+} from "@/redux/config/configSelector"
+import { configActions } from "@/redux/config/configSlice"
+import { MultiSelectCanvasProps } from "./interface"
+
+const transSelectableComponentPointsToIMPAKTAPPSPosition = (
+  points: number[][],
+  scrollTop: number,
+  containerX: number,
+  containerY: number,
+) => {
+  const left = points[0][0]
+  const top = points[0][1]
+  const right = points[1][0]
+  const bottom = points[2][1]
+  return [
+    [left - containerX, top - containerY + scrollTop],
+    [right - containerX, top - containerY + scrollTop],
+    [right - containerX, bottom - containerY + scrollTop],
+    [left - containerX, bottom - containerY + scrollTop],
+  ]
+}
+
+export const MultiSelectCanvas: FC<MultiSelectCanvasProps> = (props) => {
+  const { scrollContainerRef, canvasNodeDisplayName } = props
+  const containerClientRect =
+    scrollContainerRef.current?.getBoundingClientRect()
+
+  const selectStartPositionRef = useRef([0, 0])
+  const prevSelectedComponent = useRef<string[]>([])
+  const prevSelectorStatus = useRef(false)
+  const prevContainerScrollTop = useRef<number | undefined>(undefined)
+  const startScrollTop = useRef<number>(0)
+  const selectoRef = useRef<Selecto | null>(null)
+
+  const selectedComponents = useSelector(getSelectedComponentDisplayNames)
+  const isProductionMode = useSelector(getIsIMPAKTProductMode)
+  const dispatch = useDispatch()
+
+  const onScrollHandler = (e: SelectoEvents["scroll"]) => {
+    const { direction } = e
+    scrollContainerRef.current!.scrollBy(0, direction[1] * 10)
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const dragConditionHandler= (e: OnDragStart<any>) => {
+    const triggerTarget = e.inputEvent.target
+    const isRoot = triggerTarget.getAttribute("data-isroot")
+    return isRoot === "true"
+  }
+
+  const onDragStartHandler = (e: SelectoEvents["dragStart"]) => {
+    const scrollTop = scrollContainerRef.current?.scrollTop ?? 0
+    const startX = e.clientX - (containerClientRect?.x ?? 0)
+    const startY = e.clientY - (containerClientRect?.y ?? 0) + scrollTop
+    prevContainerScrollTop.current = scrollTop
+    startScrollTop.current = scrollTop
+    const currentCanvasStyle: CSSStyleDeclaration | undefined =
+      scrollContainerRef.current?.style
+    selectStartPositionRef.current = [startX, startY]
+    currentCanvasStyle?.setProperty("--ImpaktApps-select-area-left", `${startX}px`)
+    currentCanvasStyle?.setProperty("--ImpaktApps-select-area-top", `${startY}px`)
+    prevSelectedComponent.current = selectedComponents
+  }
+
+  const onDraggingHandler = (e: SelectoEvents["drag"]) => {
+    prevSelectorStatus.current = true
+    const { rect, distX, clientY } = e
+    const currentCanvasStyle: CSSStyleDeclaration | undefined =
+      scrollContainerRef.current?.style
+    const containerY = containerClientRect?.y ?? 0
+    const containerX = containerClientRect?.x ?? 0
+    const scrollTop = scrollContainerRef.current?.scrollTop ?? 0
+    const currentY = clientY - (containerClientRect?.y ?? 0) + scrollTop
+    const startAndDraggingDiff = currentY - selectStartPositionRef.current[1]
+    const dir = scrollTop - startScrollTop.current > 0 ? 1 : -1
+    const diff = scrollTop - startScrollTop.current!
+    const currentHeight =
+      Math.abs(currentY - selectStartPositionRef.current[1]) +
+      (dir === -1 ? -diff : 0)
+
+    let currentXOrigin = selectStartPositionRef.current[0]
+    let currentYOrigin = selectStartPositionRef.current[1]
+    if (distX < 0) {
+      currentXOrigin += distX
+    }
+    if (startAndDraggingDiff < 0) {
+      currentYOrigin = currentY
+    }
+    currentCanvasStyle?.setProperty(
+      "--ImpaktApps-select-area-left",
+      `${currentXOrigin}px`,
+    )
+    currentCanvasStyle?.setProperty(
+      "--ImpaktApps-select-area-top",
+      `${currentYOrigin}px`,
+    )
+    currentCanvasStyle?.setProperty(
+      "--ImpaktApps-select-area-width",
+      `${rect.width}px`,
+    )
+    currentCanvasStyle?.setProperty(
+      "--ImpaktApps-select-area-height",
+      `${currentHeight}px`,
+    )
+    const updatedSelectedComponents: string[] = []
+
+    const targets = e.currentTarget.getSelectableElements()
+    const rectPoints = [
+      // [left,top],[right,top],[right,bottom],[left,bottom]
+      [currentXOrigin, currentYOrigin],
+      [currentXOrigin + rect.width, currentYOrigin],
+      [currentXOrigin + rect.width, currentYOrigin + currentHeight],
+      [currentXOrigin, currentYOrigin + currentHeight],
+    ]
+    targets.forEach((target) => {
+      const targetOriginPoints = e.currentTarget.getElementPoints(target)
+      const targetPoints = transSelectableComponentPointsToIMPAKTAPPSPosition(
+        targetOriginPoints,
+        scrollTop,
+        containerX,
+        containerY,
+      )
+      const points = getOverlapPoints(targetPoints, rectPoints)
+      if (points.length > 0) {
+        const displayName = target.getAttribute("data-displayname")
+
+        if (displayName) {
+          updatedSelectedComponents.push(displayName)
+        }
+      }
+    })
+    let isEqual = false
+    if (
+      updatedSelectedComponents.length === prevSelectedComponent.current.length
+    ) {
+      isEqual = updatedSelectedComponents.every(
+        (value, index) => value === prevSelectedComponent.current[index],
+      )
+    }
+    if (!isEqual) {
+      prevSelectedComponent.current = updatedSelectedComponents
+      dispatch(configActions.updateSelectedComponent(updatedSelectedComponents))
+    }
+  }
+
+  const onDragEndHandler = () => {
+    if (
+      !prevSelectorStatus.current &&
+      !isProductionMode &&
+      selectedComponents.length > 0
+    ) {
+      dispatch(configActions.updateSelectedComponent([]))
+    }
+    prevSelectorStatus.current = false
+    prevContainerScrollTop.current = undefined
+    startScrollTop.current = 0
+  }
+
+  useEffect(() => {
+    const containerRefValue = scrollContainerRef.current
+    if (!containerRefValue || !selectoRef.current) return
+
+    const scrollHandler = () => {
+      if (!prevSelectorStatus.current) return
+      selectoRef.current?.checkScroll()
+    }
+    containerRefValue.addEventListener("scroll", scrollHandler)
+
+    return () => {
+      containerRefValue?.removeEventListener("scroll", scrollHandler)
+    }
+  }, [
+    containerClientRect?.x,
+    containerClientRect?.y,
+    scrollContainerRef,
+    dispatch,
+  ])
+
+  return (
+    <Selecto
+      ref={selectoRef}
+      container={scrollContainerRef.current}
+      dragContainer={scrollContainerRef.current as Element}
+      selectableTargets={[`div[data-parentnode='${canvasNodeDisplayName}']`]}
+      onScroll={onScrollHandler}
+      scrollOptions={{
+        container: scrollContainerRef.current!,
+        getScrollPosition: () => {
+          return [
+            scrollContainerRef.current!.scrollLeft,
+            scrollContainerRef.current!.scrollTop,
+          ]
+        },
+        throttleTime: 30,
+        threshold: 0,
+      }}
+      dragCondition={(e:any)=>dragConditionHandler(e)}
+      onDragStart={onDragStartHandler}
+      onDrag={onDraggingHandler}
+      onDragEnd={onDragEndHandler}
+    />
+  )
+}

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

@@ -0,0 +1,6 @@
+import { RefObject } from "react"
+
+export interface MultiSelectCanvasProps {
+  scrollContainerRef: RefObject<HTMLDivElement>
+  canvasNodeDisplayName: string
+}

package/page/App/components/dotPanel/components/Page/emptyState.tsx

@@ -0,0 +1,17 @@
+import { FC } from "react"
+// import { useTranslation } from "react-i18next"
+import { emptyContainerStyle } from "./style"
+import { Platform,View,Text } from "react-native"
+//import React = require("react")
+
+export const EmptyState: FC = () => {
+  if(Platform.OS === 'web'){
+      return <div css={emptyContainerStyle}>empty</div>
+    
+  }else{
+    return(
+      <View><Text>empty</Text></View>
+    )
+  }
+  
+}

package/page/App/components/dotPanel/components/Page/emptyStateMobile.tsx

@@ -0,0 +1,8 @@
+import { FC } from "react"
+// import { useTranslation } from "react-i18next"
+import { emptyContainerStyle } from "./style"
+import { View } from "react-native"
+
+export const EmptyState: FC = () => {
+  return <View css={emptyContainerStyle}>empty</View>
+}

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

@@ -0,0 +1,3 @@
+export interface RenderPageProps {
+  currentPageDisplayName: string
+}

package/page/App/components/dotPanel/components/Page/renderPage.tsx

@@ -0,0 +1,161 @@
+import { FC, useEffect, useLayoutEffect, useRef, useState } from "react";
+import { useDispatch, useSelector, useStore } from "react-redux";
+import useMeasure from "react-use-measure";
+import { DEFAULT_BODY_COLUMNS_NUMBER } from "@/page/App/components/dotPanel/constant/canvas";
+import { getCanvasShape, getIsIMPAKTMode } from "@/redux/config/configSelector";
+import { configActions } from "@/redux/config/configSlice";
+import {
+  getCurrentPageExecutionResult,
+  getPageLoadingActions,
+} from "@/redux/currentApp/executionTree/executionSelector";
+import { PageLoading } from "../PageLoading/pageLoading";
+import { RenderBodySection } from "../Section";
+import { RenderPageProps } from "./interface";
+import {
+  applyCanvasContainerWrapperStyle,
+  pageContainerWrapperStyle,
+} from "./style";
+import {
+  IExecutionActions,
+  runActionWithDelay,
+  runActionWithExecutionResult,
+} from "@/utils/action/runAction";
+import { RootState } from "@/store";
+// import { useNavigate } from "react-router-dom";
+import { useTheme } from "@mui/material";
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import { CUSTOM_STORAGE_PREFIX } from "@/redux/currentApp/executionTree/executionReducer";
+import { executionActions } from "@/redux/currentApp/executionTree/executionSlice";
+// import { useNavigate } from "react-router-dom";
+export const RenderPage: FC<RenderPageProps> = (props) => {
+  const { currentPageDisplayName } = props;
+  const [storage, setStorage] = useState<Record<string, any> | undefined>()
+  const containerWrapperRef = useRef<HTMLDivElement>(null);
+  const theme = useTheme()
+  const [containerRef, bounds] = useMeasure();
+  //  const navigate = useNavigate()
+  const canvasShape = useSelector(getCanvasShape);
+  const mode = useSelector(getIsIMPAKTMode);
+  const dispatch = useDispatch();
+  const pageNode = useSelector(getCurrentPageExecutionResult);
+  const { canvasSize, canvasWidth, bottomHeight, bodyColumns } = pageNode;
+  useLayoutEffect(() => {
+    if (
+      canvasShape.canvasHeight !== bounds.height ||
+      canvasShape.canvasWidth !== bounds.width
+    ) {
+      dispatch(
+        configActions.updateCanvasShapeReducer({
+          canvasHeight: bounds.height,
+          canvasWidth: bounds.width,
+        })
+      );
+    }
+  }, [
+    bounds.height,
+    bounds.width,
+    canvasShape.canvasHeight,
+    canvasShape.canvasWidth,
+    dispatch,
+  ]);
+
+  useLayoutEffect(() => {
+    if (bounds.width <= 0) return;
+    const bodyWidth = bounds.width;
+    const bodyTop = 0;
+    const bodyLeft = 0;
+    const bodyHeight = bounds.height;
+
+    // sessionStorage.setItem("bodyWidth", `${bodyWidth}`);
+    const containerWrapperStyle: CSSStyleDeclaration | undefined =
+      containerWrapperRef.current?.style;
+    if (containerWrapperStyle) {
+      containerWrapperStyle.setProperty(
+        "--ImpaktApps-canvas-body-width",
+        `${bodyWidth}px`
+      );
+      containerWrapperStyle.setProperty(
+        "--ImpaktApps-canvas-body-left",
+        `${bodyLeft}px`
+      );
+      containerWrapperStyle.setProperty(
+        "--ImpaktApps-canvas-body-top",
+        `${bodyTop}px`
+      );
+      containerWrapperStyle.setProperty(
+        "--ImpaktApps-canvas-body-height",
+        `${bodyHeight}px`
+      );
+    }
+  }, [bottomHeight, bounds, canvasSize]);
+
+  const [isPageLoading, setIsPageLoading] = useState(false);
+  const store = useStore()
+  useEffect(() => {
+    const abortController = new AbortController();
+    const rootState = store.getState() as RootState;
+    const pageLoadingActions = getPageLoadingActions(rootState);
+    const currentPageActions = pageLoadingActions.filter((action) =>
+      action.config?.advancedConfig.pages.includes(currentPageDisplayName)
+    );
+    const canShowPageActions = currentPageActions.filter(
+      (action) => action?.config.advancedConfig.displayLoadingPage
+    );
+    if (canShowPageActions.length > 0) {
+      setIsPageLoading(true);
+    }
+    const requests = currentPageActions.map((action) => {
+      if (action.config.advancedConfig.delayWhenLoaded > 0) {
+        return runActionWithDelay(
+          action as IExecutionActions,
+          store,
+          abortController.signal
+        );
+      } else {
+        return runActionWithExecutionResult(
+          action as IExecutionActions,
+          true,
+          store,
+          // navigate,
+          abortController.signal
+        );
+      }
+    });
+    Promise.all(requests)
+
+      .catch(() => {
+        //_e
+      })
+      .finally(() => {
+        setIsPageLoading(false);
+      });
+
+    return () => {
+      abortController.abort();
+    };
+  }, [currentPageDisplayName]);
+
+  if (isPageLoading) {
+    return <PageLoading />;
+  }
+
+  if (!pageNode || pageNode.$widgetType !== "PAGE_NODE") return null;
+
+  const finalCanvasWidth =
+    canvasSize === "fixed" ? `${canvasWidth}px` : `${canvasWidth}%`;
+
+  return (
+    <div
+      css={applyCanvasContainerWrapperStyle(finalCanvasWidth, mode,theme)}
+      ref={containerWrapperRef}
+    >
+      <div css={pageContainerWrapperStyle} ref={containerRef}>
+        {currentPageDisplayName && (
+          <RenderBodySection
+            columnNumber={bodyColumns ?? DEFAULT_BODY_COLUMNS_NUMBER}
+          />
+        )}
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,45 @@
+import { css } from "@emotion/react"
+
+import { ImpaktMode } from "@/redux/config/configState"
+import { globalColor } from "@/utils/colorBuilder"
+import { Theme } from "@mui/material"
+
+export const applyCanvasContainerWrapperStyle = (
+  width: string,
+  mode: ImpaktMode,
+  theme:Theme
+) => {
+  const borderStyle =
+    mode === "edit" && width !== "100%"
+      ? css`
+          border-left: 1px solid ${globalColor("grayBlue-09")};
+          border-right: 1px solid ${globalColor("grayBlue-09")};
+        `
+      : null
+  return css`
+    width: ${width};
+    height: 100%;
+    position: relative;
+    background-color: ${theme.palette.background.default};
+    flex: none;
+    margin: 0 auto;
+    ${borderStyle};
+    
+  `
+}
+//${globalColor("white-01")};
+export const pageContainerWrapperStyle = css`
+  width: 100%;
+  height: 100%;
+`
+
+export const emptyContainerStyle = css`
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: ${globalColor("grayBlue-04")};
+  font-size: 14px;
+  padding: 0 16px;
+`

package/page/App/components/dotPanel/components/PageLoading/pageLoading.tsx

@@ -0,0 +1,12 @@
+import { FC } from "react"
+
+import { pageLoadingStyle } from "./style"
+
+export const PageLoading: FC = () => {
+  return (
+    <div css={pageLoadingStyle}>
+  
+       Loading...
+    </div>
+  )
+}

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

@@ -0,0 +1,9 @@
+import { css } from "@emotion/react"
+
+export const pageLoadingStyle = css`
+  // width: 100%;
+  // height: 100%;
+  // display: flex;
+  // align-items: center;
+  // justify-content: center;
+`

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

@@ -0,0 +1,89 @@
+import { FC } from "react"
+import { useSelector } from "react-redux"
+// import { useParams } from "react-router-dom"
+import RenderComponentCanvasContainer from "@/page/App/components/dotPanel/components/Canvas/renderComponentCanvasContainer"
+import { EmptyState } from "@/page/App/components/dotPanel/components/Page/emptyState"
+import { BASIC_CANVAS_PADDING } from "@/page/App/components/dotPanel/constant/canvas"
+import { getCurrentDisplayName } from "@/page/App/components/dotPanel/hooks/sectionUtils"
+import { getIsIMPAKTProductMode } from "@/redux/config/configSelector"
+import { getCurrentPageBodySection } from "@/redux/currentApp/executionTree/executionSelector"
+import { ContainerWrapper, containerWrapperStyle } from "../style"
+import { RenderSectionProps } from "./interface"
+import { bodySectionWrapperStyle, Container } from "./style"
+import { useTheme } from "@mui/material"
+import { Platform } from "react-native"
+import RenderComponentCanvasContainerMobile from "../../Canvas/renderComponentCanvasContainerMobile"
+
+export const RenderBodySection: FC<RenderSectionProps> = (props) => {
+  const { columnNumber,isGridCanvas} = props
+  // const { viewPath } = useParams()
+  const  viewPath  = "";
+  const isProductionMode = useSelector(getIsIMPAKTProductMode)
+  const bodySection = useSelector(getCurrentPageBodySection)
+  const theme = useTheme()
+  if (!bodySection) return null
+
+  const {
+    viewSortedKey,
+    currentViewIndex,
+    defaultViewKey,
+    sectionViewConfigs,
+    style,
+  } = bodySection
+  const { padding, background =  "white"  } = style ?? {}
+  const currentViewDisplayName = getCurrentDisplayName(
+    sectionViewConfigs,
+    viewSortedKey,
+    defaultViewKey,
+    isProductionMode,
+    viewPath,
+    currentViewIndex,
+  )
+
+  const componentNode = bodySection.$childrenNode?.find(
+    (node: string) => node === currentViewDisplayName,
+  )
+
+  if(Platform.OS === 'web'){
+    return (
+      <div css={bodySectionWrapperStyle(background)}>
+        <div css={containerWrapperStyle}>
+          {componentNode ? (
+            
+            <RenderComponentCanvasContainer
+              displayName={componentNode}
+              containerPadding={padding?.size ?? `${BASIC_CANVAS_PADDING}`}
+              columnNumber={columnNumber}
+              isRootCanvas
+              isGridCanvas={isGridCanvas}
+            />
+          ) : (
+            <EmptyState />
+          )}
+        </div>
+      </div>
+    )
+  }else{
+    return(
+      <Container background={background}>
+        <ContainerWrapper>
+          {componentNode ? (
+            
+            <RenderComponentCanvasContainerMobile
+              displayName={componentNode}
+              containerPadding={padding?.size ?? `${BASIC_CANVAS_PADDING}`}
+              columnNumber={columnNumber}
+              isRootCanvas
+              isGridCanvas={isGridCanvas}
+            />
+          ) : (
+            <EmptyState />
+          )}
+        </ContainerWrapper>
+      </Container>
+    )
+  }
+  
+}
+
+RenderBodySection.displayName = "RenderBodySection"

package/page/App/components/dotPanel/components/Section/BodySection/indexMobile.tsx

@@ -0,0 +1,61 @@
+import React, { FC } from "react";
+import { View } from "react-native";
+import { useSelector } from "react-redux";
+import RenderComponentCanvasContainer from "@/page/App/components/dotPanel/components/Canvas/renderComponentCanvasContainerMobile";
+import { EmptyState } from "@/page/App/components/dotPanel/components/Page/emptyStateMobile";
+import { BASIC_CANVAS_PADDING } from "@/page/App/components/dotPanel/constant/canvas";
+import { getCurrentDisplayName } from "@/page/App/components/dotPanel/hooks/sectionUtils";
+import { getIsIMPAKTProductMode } from "@/redux/config/configSelector";
+import { getCurrentPageBodySection } from "@/redux/currentApp/executionTree/executionSelector";
+import { containerWrapperStyle } from "../style";
+import { RenderSectionProps } from "./interface";
+import { bodySectionWrapperStyle } from "./style";
+
+export const RenderBodySectionMobile: FC<RenderSectionProps> = (props) => {
+  const { columnNumber, isGridCanvas } = props;
+  const viewPath = "";
+  const isProductionMode = useSelector(getIsIMPAKTProductMode);
+  const bodySection = useSelector(getCurrentPageBodySection);
+  if (!bodySection) return null;
+
+  const {
+    viewSortedKey,
+    currentViewIndex,
+    defaultViewKey,
+    sectionViewConfigs,
+    style,
+  } = bodySection;
+  const { padding, background = "white" } = style ?? {};
+  const currentViewDisplayName = getCurrentDisplayName(
+    sectionViewConfigs,
+    viewSortedKey,
+    defaultViewKey,
+    isProductionMode,
+    viewPath,
+    currentViewIndex
+  );
+
+  const componentNode = bodySection.$childrenNode?.find(
+    (node: string) => node === currentViewDisplayName
+  );
+
+  return (
+    <View css={bodySectionWrapperStyle(background)}>
+      <View css={containerWrapperStyle}>
+        {componentNode ? (
+          <RenderComponentCanvasContainer
+            displayName={componentNode}
+            containerPadding={padding?.size ?? `${BASIC_CANVAS_PADDING}`}
+            columnNumber={columnNumber}
+            isRootCanvas
+            isGridCanvas={isGridCanvas}
+          />
+        ) : (
+          <EmptyState />
+        )}
+      </View>
+    </View>
+  );
+};
+
+RenderBodySectionMobile.displayName = "RenderBodySectionMobile";

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

@@ -0,0 +1,7 @@
+import { RenderBasicSectionProps } from "../interface"
+
+export type RenderSectionProps = RenderBasicSectionProps
+
+export interface ContainerProps {
+    background: string
+  }

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

@@ -0,0 +1,29 @@
+import { css } from "@emotion/react"
+import styled from "@emotion/native"
+import { View } from "react-native"
+import {ContainerProps} from './interface'
+
+import { Theme } from "@mui/material";
+
+
+export const bodySectionWrapperStyle = (theme: Theme) => {
+  return css`
+  position: absolute;
+  width: var(--ImpaktApps-canvas-body-width, 100%);
+  left: var(--ImpaktApps-canvas-body-left, 0);
+  top: var(--ImpaktApps-canvas-body-top, 0);
+  height: var(--ImpaktApps-canvas-body-height);
+   
+`
+};
+
+
+
+export const Container = styled(View)<ContainerProps>(({ background }) => ({
+  // position: "absolute",
+  // width: "100%", // Replacing `--ImpaktApps-canvas-body-width` with 100% or dynamic logic if needed
+  // left: 0,       
+  // top: 0,        
+  // height: "100%", 
+  // backgroundColor: background,
+}))