impaktapps-ui-builder 0.0.382457 → 1.0.0

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

@@ -0,0 +1,348 @@
+import { ComponentMapNode } from "@/utils/generators/interface"
+
+interface ItemPosition {
+  x: number
+  y: number
+}
+
+export interface CanvasPosition {
+  x: number
+  y: number
+}
+
+interface NodeWidthAndHeight {
+  w: number
+  h: number
+}
+
+interface CenterPointPosition {
+  x: number
+  y: number
+}
+
+export function calcRectCenterPointPosition(
+  itemPosition: ItemPosition,
+  canvasPosition: CanvasPosition,
+  nodeWidthAndHeight: NodeWidthAndHeight,
+): CenterPointPosition {
+  const { x: itemX, y: itemY } = itemPosition
+  const { x: canvasX, y: canvasY } = canvasPosition
+  const { w: nodeW, h: nodeH } = nodeWidthAndHeight
+  const pointX = itemX - canvasX
+  const pointY = itemY - canvasY
+  const centerX = pointX - nodeW / 2
+  const centerY = pointY - nodeH / 2
+  return {
+    x: centerX,
+    y: centerY,
+  }
+}
+
+interface RectShape {
+  rectTop: number
+  rectRight: number
+  rectBottom: number
+  rectLeft: number
+}
+
+export function calcRectShapeByCenterPoint(
+  centerPointPosition: CenterPointPosition,
+  nodeWidthAndHeight: NodeWidthAndHeight,
+): RectShape {
+  const rectTop = centerPointPosition.y
+  const rectLeft = centerPointPosition.x
+  const rectRight = rectLeft + nodeWidthAndHeight.w
+  const rectBottom = rectTop + nodeWidthAndHeight.h
+  return {
+    rectTop,
+    rectLeft,
+    rectRight,
+    rectBottom,
+  }
+}
+
+export interface LandingPosition {
+  isOverstep: boolean
+  landingX: number
+  landingY: number
+  relativeLandingX: number
+  relativeLandingY: number
+}
+
+export function calcLadingPosition(
+  rectPosition: RectShape,
+  unitWidth: number,
+  unitHeight: number,
+  canvasWidth: number,
+  canvasHeight: number,
+  canResizeY: boolean,
+): LandingPosition {
+  const { rectLeft, rectTop, rectRight, rectBottom } = rectPosition
+  const relativeLandingX = Math.round(rectLeft / unitWidth)
+  const relativeLandingY = Math.round(rectTop / unitHeight)
+  let landingX = relativeLandingX * unitWidth
+  let landingY = relativeLandingY * unitHeight
+  let isOverstep = true
+  if (rectTop < 0) {
+    landingY = 0
+    isOverstep = false
+  }
+  if (rectLeft < 0) {
+    landingX = 0
+    isOverstep = false
+  }
+  if (rectRight > canvasWidth) {
+    const overRight =
+      Math.round(rectRight / unitWidth) * unitWidth - canvasWidth
+    landingX = landingX - overRight
+    isOverstep = false
+  }
+  if (rectBottom > canvasHeight && !canResizeY) {
+    const overBottom =
+      Math.round(rectBottom / unitHeight) * unitHeight - canvasHeight
+    landingY = landingY - overBottom
+    isOverstep = false
+  }
+  return {
+    isOverstep,
+    landingX,
+    landingY,
+    relativeLandingX,
+    relativeLandingY,
+  }
+}
+
+export type RectangleType = {
+  left: number
+  right: number
+  top: number
+  bottom: number
+}
+
+const sortComponentNodesOnlyY = (componentNodes: ComponentMapNode[]) => {
+  return componentNodes.sort((node1, node2) => {
+    if (node1.y < node2.y) {
+      return -1
+    }
+    if (node1.y > node2.y) {
+      return 1
+    }
+    return 0
+  })
+}
+
+export const sortComponentNodes = (componentNodes: ComponentMapNode[]) => {
+  return componentNodes.sort((node1, node2) => {
+    if (node1.y < node2.y) {
+      return -1
+    }
+    if (node1.y > node2.y) {
+      return 1
+    }
+    if (node1.y === node2.y) {
+      if (node1.x > node2.x) {
+        return 1
+      }
+      if (node1.x < node2.x) {
+        return -1
+      }
+    }
+    return 0
+  })
+}
+
+const getComponentRect = (component: ComponentMapNode): RectangleType => {
+  const { x, y, w, h } = component
+  return {
+    left: x,
+    right: x + w,
+    top: y,
+    bottom: y + h,
+  }
+}
+
+export const isCrossing = (
+  otherNode: ComponentMapNode,
+  mainNode: ComponentMapNode,
+) => {
+  const otherRect = getComponentRect(otherNode)
+  const mainRect = getComponentRect(mainNode)
+  return !(
+    mainRect.left >= otherRect.right ||
+    mainRect.right <= otherRect.left ||
+    mainRect.top >= otherRect.bottom ||
+    mainRect.bottom <= otherRect.top
+  )
+}
+
+export const isNearingAtY = (
+  otherNode: ComponentMapNode,
+  mainNode: ComponentMapNode,
+) => {
+  const otherRect = getComponentRect(otherNode)
+  const mainRect = getComponentRect(mainNode)
+  return (
+    (mainRect.left <= otherRect.right || mainRect.right >= otherRect.left) &&
+    mainRect.bottom === otherRect.top
+  )
+}
+
+export const getCrossingNodeNewPosition = (
+  currentNode: ComponentMapNode,
+  allComponentNode: ComponentMapNode[],
+) => {
+  let otherComponents = allComponentNode.filter(
+    (curNode) => curNode.displayName !== currentNode.displayName,
+  )
+
+  const res: Map<string, ComponentMapNode> = new Map(),
+    queue: ComponentMapNode[] = []
+
+  queue.push(currentNode)
+  while (queue.length !== 0) {
+    const length = queue.length
+    otherComponents = otherComponents.filter(
+      (curNode) => curNode.displayName !== queue[0].displayName,
+    )
+    const walkedSet = new Set()
+    for (let i = 0; i < length; i++) {
+      const node = queue.shift() as ComponentMapNode
+      for (let i = 0; i < otherComponents.length; i++) {
+        if (otherComponents[i].displayName === node.displayName) {
+          continue
+        }
+        if (isCrossing(otherComponents[i], node)) {
+          otherComponents[i] = {
+            ...otherComponents[i],
+            y: node.y + node.h,
+          }
+          walkedSet.add(otherComponents[i].displayName)
+          res.set(otherComponents[i].displayName, otherComponents[i])
+          const index = queue.findIndex(
+            (node) => node.displayName === otherComponents[i].displayName,
+          )
+          if (index > -1) {
+            queue.splice(index, 1, otherComponents[i])
+          } else {
+            queue.push(otherComponents[i])
+          }
+        }
+      }
+    }
+  }
+  return res
+}
+
+export const getNearingNodes = (
+  currentNode: ComponentMapNode,
+  allComponentNode: ComponentMapNode[],
+) => {
+  let otherComponents = allComponentNode.filter(
+    (cur) => cur.displayName !== currentNode.displayName,
+  )
+
+  const res: Map<string, ComponentMapNode> = new Map(),
+    queue: ComponentMapNode[] = []
+
+  queue.push(currentNode)
+  while (queue.length !== 0) {
+    const length = queue.length
+
+    otherComponents = otherComponents.filter(
+      (cur) => cur.displayName !== queue[0].displayName,
+    )
+
+    const walkedSet = new Set()
+    for (let i = 0; i < length; i++) {
+      const node = queue.shift() as ComponentMapNode
+      for (let i = 0; i < otherComponents.length; i++) {
+        if (otherComponents[i].displayName === node.displayName) {
+          continue
+        }
+        if (isNearingAtY(otherComponents[i], node)) {
+          walkedSet.add(otherComponents[i].displayName)
+          res.set(otherComponents[i].displayName, otherComponents[i])
+          const index = queue.findIndex(
+            (node) => node.displayName === otherComponents[i].displayName,
+          )
+          if (index > -1) {
+            queue.splice(index, 1, otherComponents[i])
+          } else {
+            queue.push(otherComponents[i])
+          }
+        }
+      }
+    }
+  }
+  return res
+}
+
+export const applyEffectMapToComponentNodes = (
+  effectMap: Map<string, ComponentMapNode>,
+  componentNodes: ComponentMapNode[],
+) => {
+  return componentNodes.map((node) => {
+    if (effectMap.has(node.displayName)) {
+      return effectMap.get(node.displayName) as ComponentMapNode
+    }
+    return node
+  })
+}
+
+export const getReflowResult = (
+  currentNode: ComponentMapNode,
+  allComponentNodes: ComponentMapNode[],
+  exceptSelf: boolean = true,
+) => {
+  const sortedComponentNodes = sortComponentNodes(allComponentNodes)
+  const effectResultMap = getCrossingNodeNewPosition(
+    currentNode,
+    sortedComponentNodes,
+  )
+  let finalState = applyEffectMapToComponentNodes(
+    effectResultMap,
+    sortedComponentNodes,
+  )
+
+  if (exceptSelf) {
+    finalState = finalState.filter(
+      (node) => node.displayName !== currentNode.displayName,
+    )
+  }
+  return {
+    effectResultMap,
+    finalState,
+  }
+}
+
+export const getNearComponentNodes = (
+  currentNode: ComponentMapNode,
+  allComponentNodes: ComponentMapNode[],
+) => {
+  const sortedComponentNodes = sortComponentNodesOnlyY(allComponentNodes)
+  return getNearingNodes(currentNode, sortedComponentNodes)
+}
+
+export const isAddAction = (
+  x: number,
+  y: number,
+  oldParentDisplayName: string | null,
+  currentParentDisplayName: string,
+) => {
+  return (
+    (x === -1 && y === -1) || oldParentDisplayName !== currentParentDisplayName
+  )
+}
+
+export function getMousePointerPosition(
+  mouseOffsetX: number,
+  mouseOffsetY: number,
+  unitWidth: number,
+  unitHeight: number,
+  containerMaxWidthDotNumber: number,
+): number[] {
+  let preX = Math.floor(mouseOffsetX / unitWidth)
+  preX = Math.min(preX, containerMaxWidthDotNumber)
+  const preY = Math.floor(mouseOffsetY / unitHeight)
+  return [preX, preY]
+}

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

@@ -0,0 +1,39 @@
+import { ViewProps } from "react-native"
+
+export interface RenderComponentCanvasContainerProps {
+  displayName: string
+  containerPadding: string
+  columnNumber?: number
+  isRootCanvas?: boolean
+  canResizeCanvas?: boolean
+  safeRowNumber?: number
+  handleUpdateHeight?: (height: number) => void
+  minHeight?: number
+  background?: string
+  shadowSize?: "none" | "small" | "medium" | "large"
+  isGridCanvas?:boolean
+  gridContainer?:boolean
+}
+
+export interface DropCollectedProps {
+  isOver: boolean
+}
+
+export interface DropResultInfo {
+  isDropOnCanvas: boolean
+}
+
+export interface ContainerProps extends ViewProps {
+  containerPadding: string
+  background: string | undefined
+  shadowSize: "none" | "small" | "medium" | "large"
+  dividerColor?: string
+}
+export interface DropZoneProps extends ViewProps {
+  canvasHeight?: number
+}
+
+export interface CanvasProps extends ViewProps {
+  unitWidth: number
+  showDot?: boolean
+}

package/page/App/components/dotPanel/components/Canvas/renderComponentCanvasContainer.tsx

@@ -0,0 +1,323 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+// import 'react-native-get-random-values';
+// import { v4 as uuidv4 } from 'uuid';
+
+import { FC, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useDrop } from "react-dnd";
+// import { useTranslation } from "react-i18next"
+import { useDispatch, useSelector } from "react-redux";
+import { useScroll } from "react-use";
+import useMeasure from "react-use-measure";
+import { getIsIMPAKTEditMode, isShowDot } from "@/redux/config/configSelector";
+import { getContainerListDisplayNameMappedChildrenNodeDisplayName } from "@/redux/currentApp/components/componentsSelector";
+import { componentsActions } from "@/redux/currentApp/components/componentsSlice";
+import {
+  getComponentMap,
+  // getComponentMap,
+  getIsDragging,
+  getIsResizing,
+} from "@/redux/currentApp/executionTree/executionSelector";
+import { newGenerateComponentNode } from "@/utils/generators/generateComponentNode";
+import { ContainerEmptyState } from "@/widgetLibrary/ContainerWidget/emptyState";
+import {
+  DropCollectedProps,
+  DropResultInfo,
+  RenderComponentCanvasContainerProps,
+} from "./interface";
+import {
+  applyComponentCanvasStyle,
+  componentCanvasContainerStyle,
+  // containerShapeStyle,
+  dropZoneStyle,
+  outerComponentCanvasContainerStyle,
+  selectoSelectionStyle,
+} from "./style";
+import {
+  DEFAULT_BODY_COLUMNS_NUMBER,
+  SAFE_ROWS,
+  SCROLL_CONTAINER_PADDING,
+  UNIT_HEIGHT,
+} from "../../constant/canvas";
+import { getPaddingShape } from "../../utils/styleutils/padding";
+import {
+  DRAG_EFFECT,
+  DragInfo,
+} from "../../../scaleSquare/components/DragContainer/interface";
+import { sendMousePositionHandler } from "../../utils/sendBinaryMessage";
+import {
+  removeScrollBarContainerControllerByDisplayName,
+  setScrollBarContainerController,
+} from "../../context/scrollBarContext";
+import { useMousePositionAsync } from "../../hooks/useMousePostionAsync";
+import { MousePreview } from "../MousePreview";
+import ComponentParser from "../ComponentParser/index";
+import { useTheme } from "@mui/material";
+export const RenderComponentCanvasContainer: FC<
+  RenderComponentCanvasContainerProps
+> = (props) => {
+  const {
+    columnNumber = DEFAULT_BODY_COLUMNS_NUMBER,
+    isRootCanvas,
+    displayName,
+    containerPadding,
+    safeRowNumber = SAFE_ROWS,
+    background,
+    shadowSize = "none",
+    isGridCanvas = false,
+  } = props;
+
+  const containerListMapChildName = useSelector(
+    getContainerListDisplayNameMappedChildrenNodeDisplayName
+  );
+ const theme = useTheme()
+  const scrollContainerRef = useRef<HTMLDivElement | null>(null);
+  const firstDragRef = useRef(true);
+  const dragStartScrollTop = useRef(0);
+  const { y: scrollContainerScrollTop } = useScroll(scrollContainerRef);
+  const [canvasRef, bounds] = useMeasure();
+  const innerCanvasRef = useRef<HTMLDivElement | null>(null);
+  // const { t } = useTranslation()
+  const paddings = getPaddingShape(containerPadding);
+  const fixedBounds = {
+    top: bounds.top + paddings.paddingTop + SCROLL_CONTAINER_PADDING,
+    left: bounds.left + paddings.paddingLeft + SCROLL_CONTAINER_PADDING,
+    width:
+      bounds.width -
+      (paddings.paddingLeft +
+        paddings.paddingRight +
+        SCROLL_CONTAINER_PADDING * 2),
+    height:
+      bounds.height -
+      (paddings.paddingTop +
+        paddings.paddingBottom +
+        SCROLL_CONTAINER_PADDING * 2),
+  };
+
+  const canShowDot = useSelector(isShowDot);
+  const unitWidth = fixedBounds.width / columnNumber;
+  const dispatch = useDispatch();
+  const isDraggingGlobal = useSelector(getIsDragging);
+  const isResizingGlobal = useSelector(getIsResizing);
+  const componentMap = useSelector(getComponentMap);
+  // const isLikeProductMode = useSelector(getIsLikeProductMode)
+  const isEditMode = useSelector(getIsIMPAKTEditMode);
+  const currentLayoutInfo = componentMap[displayName];
+  const [collectedProps, dropRef] = useDrop<
+    DragInfo,
+    DropResultInfo,
+    DropCollectedProps
+  >(
+    () => ({
+      accept: ["components"],
+      canDrop: () => {
+        return isEditMode;
+      },
+      drop: (dropItem, monitor) => {
+        const didDrop = monitor.didDrop();
+        if (
+          !monitor.isOver({
+            shallow: true,
+          }) &&
+          didDrop
+        ) {
+          return {
+            isDropOnCanvas: !!monitor.getDropResult()?.isDropOnCanvas,
+          };
+        }
+        const { draggedComponents, dragEffect } = dropItem;
+
+        const hasTable = draggedComponents.some(
+          (components) => components.widgetType === "TABLE_WIDGET"
+        );
+        const isListChildrenCanvas = Object.values(
+          containerListMapChildName
+        ).some((childDisplayNames) => childDisplayNames.includes(displayName));
+
+        if (hasTable && isListChildrenCanvas) {
+          return {
+            isDropOnCanvas: false,
+          };
+        }
+
+        if (draggedComponents.length === 1) {
+          switch (dragEffect) {
+          
+            case DRAG_EFFECT.ADD: {
+              const newComponentNode = newGenerateComponentNode(
+                draggedComponents[0].widgetType,
+                draggedComponents[0].displayName,
+                displayName,
+                [],
+                12
+              );
+
+              dispatch(
+                componentsActions.addComponentReducer([{ ...newComponentNode }])
+              );
+
+              break;
+            }
+          }
+        }
+        const mousePosition = cursorPositionRef.current;
+        sendMousePositionHandler(
+          displayName,
+          mousePosition.xInteger,
+          mousePosition.yInteger,
+          mousePosition.xMod,
+          mousePosition.yMod
+        );
+
+        return {
+          isDropOnCanvas: true,
+        };
+      },
+      collect: (monitor) => {
+        return {
+          isOver: monitor.isOver({ shallow: true }),
+        };
+      },
+    }),
+    [
+      isEditMode,
+      unitWidth,
+      fixedBounds,
+      scrollContainerScrollTop,
+      displayName,
+      containerListMapChildName,
+    ]
+  );
+
+  const autoScrollTimeID = useRef<number>(0);
+
+  setScrollBarContainerController(displayName, scrollContainerRef);
+
+  useEffect(() => {
+    return () => {
+      removeScrollBarContainerControllerByDisplayName(displayName);
+    };
+  }, [displayName]);
+
+  useEffect(() => {
+    const scrollContainer = scrollContainerRef.current;
+    if (!scrollContainer) return;
+    const autoScroll = (e: MouseEvent) => {
+      if (
+        (!collectedProps.isOver &&
+          scrollContainer.dataset.isDraggingOver !== "true") ||
+        !scrollContainer ||
+        !isRootCanvas
+      ) {
+        return;
+      }
+      const { top, bottom } = scrollContainer.getBoundingClientRect();
+      const { clientY } = e;
+      window.clearInterval(autoScrollTimeID.current);
+      autoScrollTimeID.current = window.setInterval(() => {
+        if (clientY < top + UNIT_HEIGHT * safeRowNumber) {
+          scrollContainer!.scrollBy({
+            top: -8,
+          });
+        }
+        if (clientY > bottom - UNIT_HEIGHT * safeRowNumber) {
+          scrollContainer!.scrollBy({
+            top: 8,
+          });
+        }
+      }, 160);
+    };
+    scrollContainer?.addEventListener("mousemove", autoScroll);
+    return () => {
+      if (scrollContainer) {
+        scrollContainer?.removeEventListener("mousemove", autoScroll);
+      }
+      window.clearInterval(autoScrollTimeID.current);
+    };
+  }, [collectedProps.isOver, isResizingGlobal, isRootCanvas, safeRowNumber]);
+
+  useEffect(() => {
+    if (firstDragRef.current && isDraggingGlobal) {
+      firstDragRef.current = false;
+      dragStartScrollTop.current = scrollContainerScrollTop;
+      return;
+    }
+    if (!isDraggingGlobal) {
+      firstDragRef.current = true;
+      dragStartScrollTop.current = scrollContainerScrollTop;
+    }
+  }, [isDraggingGlobal, scrollContainerScrollTop]);
+
+  const { cursorPositionRef } = useMousePositionAsync(
+    scrollContainerRef,
+    unitWidth,
+    displayName,
+    isRootCanvas,
+    scrollContainerRef
+  );
+  const isDisabled = false;
+  return (
+    <div
+      css={outerComponentCanvasContainerStyle(
+        containerPadding,
+        "",
+        shadowSize
+      )}
+      data-outer-canvas-container={displayName}
+      ref={isDisabled ? null : canvasRef}
+    >
+      <div
+        css={componentCanvasContainerStyle}
+        ref={scrollContainerRef}
+        data-scroll-container={displayName}
+        data-column-number={columnNumber}
+        data-unit-width={unitWidth}
+        data-is-dragging-over={false}
+        className="scroll-container"
+      >
+        <div
+          ref={(node) => {
+            isDisabled ? null : dropRef(node);
+            innerCanvasRef.current = isDisabled ? null : node;
+          }}
+          css={dropZoneStyle()}
+        >
+          <div
+            css={[
+              applyComponentCanvasStyle(unitWidth, canShowDot,isEditMode,theme),
+              selectoSelectionStyle,
+            ]}
+            data-isroot={isRootCanvas}
+            data-canvas-container={displayName}
+            data-column-number={columnNumber}
+            data-unit-width={unitWidth}
+          >
+            {isEditMode && (
+              <MousePreview unitW={10} displayName={displayName} />
+            )}
+            {currentLayoutInfo?.childrenNode?.length > 0 && !isGridCanvas ? (
+              currentLayoutInfo?.childrenNode?.map((childName: any) => {
+                return (
+                  <ComponentParser
+                    key={`${displayName}-${childName}`}
+                    displayName={childName}
+                    unitW={unitWidth}
+                    parentNodeDisplayName={displayName}
+                    columnNumber={columnNumber}
+                  />
+                );
+              })
+            ) : isRootCanvas ? null : (
+              <ContainerEmptyState
+                isInner
+                containerPadding={containerPadding}
+              />
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+RenderComponentCanvasContainer.displayName = "RenderComponentCanvasContainer";
+export default RenderComponentCanvasContainer;