feat(board): widget overlap in AutoBoard

frontend/src/app/pages/DashBoardPage/components/BoardProvider/BoardActionProvider.tsx

@@ -57,9 +57,9 @@ export const BoardActionProvider: FC<{ id: string }> = ({
 }) => {
   const dispatch = useDispatch();
   const { editing, renderMode } = useContext(BoardContext);
-  const { config: boardConfig } = useContext(BoardConfigContext);
+  const { hasQueryControl } = useContext(BoardConfigContext);
   const saveAsViz = useSaveAsViz();
-  const { hasQueryControl } = boardConfig;
+
   const actions: BoardActionContextProps = {
     widgetUpdate: (widget: Widget) => {
       if (editing) {
@@ -68,7 +68,9 @@ export const BoardActionProvider: FC<{ id: string }> = ({
         dispatch(boardActions.updateWidget(widget));
       }
     },
-
+    boardToggleAllowOverlap: (allow: boolean) => {
+      dispatch(editBoardStackActions.toggleAllowOverlap(allow));
+    },
     onWidgetsQuery: debounce(() => {
       if (editing) {
         dispatch(editWidgetsQueryAction({ boardId }));

frontend/src/app/pages/DashBoardPage/components/BoardProvider/BoardConfigProvider.tsx

@@ -17,20 +17,13 @@
  */
 
 import React, { FC, memo } from 'react';
-import {
-  BoardConfigContext,
-  BoardConfigContextProps,
-} from '../../contexts/BoardConfigContext';
+import { BoardConfigContext } from '../../contexts/BoardConfigContext';
 import { DashboardConfig } from '../../pages/Board/slice/types';
 
 export const BoardConfigProvider: FC<{ config: DashboardConfig }> = memo(
   ({ config, children }) => {
-    const boardConfigValue: BoardConfigContextProps = {
-      config: config,
-    };
-
     return (
-      <BoardConfigContext.Provider value={boardConfigValue}>
+      <BoardConfigContext.Provider value={config}>
         {children}
       </BoardConfigContext.Provider>
     );

frontend/src/app/pages/DashBoardPage/components/FreeBoardBackground.tsx

@@ -27,7 +27,10 @@ export interface IProps {
 }
 const SlideBackground: React.FC<IProps> = props => {
   const {
-    config: { width: slideWidth, height: slideHeight, scaleMode, background },
+    width: slideWidth,
+    height: slideHeight,
+    scaleMode,
+    background,
   } = useContext(BoardConfigContext);
   const { editing } = useContext(BoardContext);
   const { scale, slideTranslate } = props;

frontend/src/app/pages/DashBoardPage/contexts/BoardActionContext.ts

@@ -27,6 +27,7 @@ export interface BoardActionContextProps {
   onWidgetsQuery: () => any;
   onWidgetsReset: () => any;
   onSaveAsVizs: () => any;
+  boardToggleAllowOverlap: (allow: boolean) => void;
 }
 export const BoardActionContext = createContext<BoardActionContextProps>(
   {} as BoardActionContextProps,

frontend/src/app/pages/DashBoardPage/contexts/BoardConfigContext.ts

@@ -17,9 +17,7 @@
  */
 import { createContext } from 'react';
 import { DashboardConfig } from '../pages/Board/slice/types';
-export interface BoardConfigContextProps {
-  config: DashboardConfig;
-}
-export const BoardConfigContext = createContext<BoardConfigContextProps>(
-  {} as BoardConfigContextProps,
+
+export const BoardConfigContext = createContext<DashboardConfig>(
+  {} as DashboardConfig,
 );

frontend/src/app/pages/DashBoardPage/pages/Board/AutoDashboard/AutoBoardCore.tsx

@@ -57,22 +57,22 @@ import { WidgetOfAuto } from './WidgetOfAuto';
 
 const ResponsiveGridLayout = WidthProvider(Responsive);
 const mobilePoints = Object.keys(BREAK_POINT_MAP).slice(3);
-export interface AutoBoardCoreProps {
-  boardId: string;
-}
-export const AutoBoardCore: React.FC<AutoBoardCoreProps> = memo(
+
+export const AutoBoardCore: React.FC<{ boardId: string }> = memo(
   ({ boardId }) => {
+    const visible = useVisibleHidden();
     const { renderedWidgetById } = useContext(BoardContext);
-    const { config } = useContext(BoardConfigContext);
     const {
       margin,
       containerPadding,
       background,
       mobileMargin,
       mobileContainerPadding,
-    } = config;
+      allowOverlap,
+    } = useContext(BoardConfigContext);
+
+    // console.log('_ core allowOverlap ', allowOverlap);
 
-    const visible = useVisibleHidden();
     const selectLayoutWidgetsConfigById = useMemo(
       selectLayoutWidgetMapById,
       [],
@@ -85,16 +85,19 @@ export const AutoBoardCore: React.FC<AutoBoardCoreProps> = memo(
       selectLayoutWidgetInfoMapById(state, boardId),
     );
 
-    const layoutWidgets = useMemo(() => {
-      return Object.values(layoutWidgetMap);
-    }, [layoutWidgetMap]);
+    const sortedLayoutWidgets = useMemo(
+      () =>
+        Object.values(layoutWidgetMap).sort(
+          (a, b) => a.config.index - b.config.index,
+        ),
+
+      [layoutWidgetMap],
+    );
 
     const [deviceType, setDeviceType] = useState<DeviceType>(
       DeviceType.Desktop,
     );
 
-    const [layoutMap, setLayoutMap] = useState<Layouts>({});
-
     let layoutInfos = useRef<{ id: string; rendered: boolean }[]>([]);
 
     const currentLayout = useRef<Layout[]>([]);
@@ -132,13 +135,13 @@ export const AutoBoardCore: React.FC<AutoBoardCoreProps> = memo(
       margin,
       containerPadding,
     ]);
-
+    const [layoutMap, setLayoutMap] = useState<Layouts>({});
     useEffect(() => {
       const layoutMap: Layouts = {
         lg: [],
         xs: [],
       };
-      layoutWidgets.forEach(widget => {
+      Object.values(layoutWidgetMap).forEach(widget => {
         const lg = widget.config.rect || widget.config.mobileRect || {};
         const xs = widget.config.mobileRect || widget.config.rect || {};
         const lock = widget.config.lock;
@@ -160,7 +163,7 @@ export const AutoBoardCore: React.FC<AutoBoardCoreProps> = memo(
         });
       });
       setLayoutMap(layoutMap);
-    }, [layoutWidgets]);
+    }, [layoutWidgetMap]);
 
     useEffect(() => {
       const layoutWidgetInfos = Object.values(layoutWidgetInfoMap);
@@ -213,7 +216,7 @@ export const AutoBoardCore: React.FC<AutoBoardCoreProps> = memo(
     }, [calcItemTop, renderedWidgetById]);
 
     useEffect(() => {
-      if (layoutWidgets.length && gridWrapRef.current) {
+      if (sortedLayoutWidgets.length && gridWrapRef.current) {
         lazyLoad();
         gridWrapRef.current.removeEventListener('scroll', lazyLoad, false);
         gridWrapRef.current.addEventListener('scroll', lazyLoad, false);
@@ -225,14 +228,14 @@ export const AutoBoardCore: React.FC<AutoBoardCoreProps> = memo(
         gridWrapRef?.current?.removeEventListener('scroll', lazyLoad, false);
         window.removeEventListener('resize', lazyLoad, false);
       };
-    }, [layoutWidgets.length, lazyLoad]);
+    }, [sortedLayoutWidgets.length, lazyLoad]);
 
     const onLayoutChange = useCallback((layouts: Layout[], all) => {
       currentLayout.current = layouts;
     }, []);
 
     const boardChildren = useMemo(() => {
-      return layoutWidgets.map(item => {
+      return sortedLayoutWidgets.map(item => {
         return (
           <div className="block-item" key={item.id}>
             <WidgetAllProvider id={item.id}>
@@ -241,7 +244,7 @@ export const AutoBoardCore: React.FC<AutoBoardCoreProps> = memo(
           </div>
         );
       });
-    }, [layoutWidgets]);
+    }, [sortedLayoutWidgets]);
 
     return (
       <Wrap>
@@ -250,7 +253,7 @@ export const AutoBoardCore: React.FC<AutoBoardCoreProps> = memo(
           ref={ref}
           style={{ visibility: visible }}
         >
-          {layoutWidgets.length ? (
+          {sortedLayoutWidgets.length ? (
             <div className="grid-wrap" ref={gridWrapRef}>
               <div className="grid-wrap" ref={gridRef}>
                 <ResponsiveGridLayout
@@ -264,6 +267,7 @@ export const AutoBoardCore: React.FC<AutoBoardCoreProps> = memo(
                   onBreakpointChange={onBreakpointChange}
                   isDraggable={false}
                   isResizable={false}
+                  allowOverlap={allowOverlap}
                   measureBeforeMount={false}
                   useCSSTransforms={true}
                 >

frontend/src/app/pages/DashBoardPage/pages/Board/FreeDashboard/FreeBoardCore.tsx

@@ -38,9 +38,13 @@ export interface FreeBoardCoreProps {
 }
 export const FreeBoardCore: React.FC<FreeBoardCoreProps> = memo(
   ({ boardId, showZoomCtrl }) => {
-    const { config } = useContext(BoardConfigContext);
+    const {
+      width: slideWidth,
+      height: slideHeight,
+      scaleMode,
+    } = useContext(BoardConfigContext);
     const { editing, autoFit } = useContext(BoardContext);
-    const { width: slideWidth, height: slideHeight, scaleMode } = config;
+
     const widgetConfigRecords = useSelector((state: { board: BoardState }) =>
       selectLayoutWidgetMapById()(state, boardId),
     );

frontend/src/app/pages/DashBoardPage/pages/Board/slice/types.ts

@@ -93,6 +93,7 @@ export interface DashboardConfig {
   type: BoardType; //'auto','free'
 
   // auto
+  allowOverlap: boolean;
   margin: [number, number];
   containerPadding: [number, number];
   mobileMargin: [number, number];