Merge pull request #1221 from xieliuduo/dev39-drupdate

refactor: scale in DataChartWidgetCore

Author: xieliuduo

frontend/src/app/components/ChartDrill/ChartDrillPaths.tsx

@@ -64,7 +64,6 @@ export default ChartDrillPaths;
 
 const StyledChartDrillPaths = styled.div`
   padding: ${SPACE_XS} ${SPACE_SM};
-  background-color: ${p => p.theme.componentBackground};
 `;
 
 const StyledDrillNode = styled(Breadcrumb.Item)<{ isActive: boolean }>`

frontend/src/app/pages/DashBoardPage/components/BoardDrillManager/BoardDrillManager.ts

@@ -1,5 +1,3 @@
-import { ChartDrillOption } from 'app/models/ChartDrillOption';
-
 /**
  * Datart
  *
@@ -17,7 +15,9 @@ import { ChartDrillOption } from 'app/models/ChartDrillOption';
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import { ChartDrillOption } from 'app/models/ChartDrillOption';
 type WidgetDrillMap = Record<string, ChartDrillOption | undefined>;
+export const EDIT_PREFIX = '@EDIT@';
 export class BoardDrillManager {
   private static _manager: BoardDrillManager;
   private boardMap: Record<string, WidgetDrillMap> = {};
@@ -59,4 +59,3 @@ export class BoardDrillManager {
 }
 
 export const boardDrillManager = BoardDrillManager.getInstance();
-export const EDIT_PREFIX = '@EDIT@';

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

@@ -22,7 +22,7 @@ import StyledBackground from '../pages/Board/components/StyledBackground';
 import { BoardConfigContext } from './BoardProvider/BoardConfigProvider';
 import { BoardContext } from './BoardProvider/BoardProvider';
 
-export const scaleContext = createContext<[number, number]>([1, 1]);
+export const BoardScaleContext = createContext<[number, number]>([1, 1]);
 export interface IProps {
   scale: [number, number];
   slideTranslate: [number, number];
@@ -60,9 +60,9 @@ const SlideBackground: React.FC<IProps> = props => {
 
   return (
     <Wrapper bg={background} style={slideStyle} editing={editing}>
-      <scaleContext.Provider value={scale}>
+      <BoardScaleContext.Provider value={scale}>
         {props.children}
-      </scaleContext.Provider>
+      </BoardScaleContext.Provider>
     </Wrapper>
   );
 };

frontend/src/app/pages/DashBoardPage/components/Widgets/DataChartWidget/DataChartWidgetCore.tsx

@@ -40,19 +40,20 @@ import React, {
   useRef,
 } from 'react';
 import styled from 'styled-components/macro';
-import { BORDER_RADIUS } from 'styles/StyleConstants';
 import { WidgetActionContext } from '../../ActionProvider/WidgetActionProvider';
 import {
   boardDrillManager,
   EDIT_PREFIX,
 } from '../../BoardDrillManager/BoardDrillManager';
 import { BoardContext } from '../../BoardProvider/BoardProvider';
+import { BoardScaleContext } from '../../FreeBoardBackground';
 import { WidgetChartContext } from '../../WidgetProvider/WidgetChartProvider';
 import { WidgetDataContext } from '../../WidgetProvider/WidgetDataProvider';
 import { WidgetContext } from '../../WidgetProvider/WidgetProvider';
 
 export const DataChartWidgetCore: React.FC<{}> = memo(() => {
   const dataChart = useContext(WidgetChartContext);
+  const scale = useContext(BoardScaleContext);
   const { data } = useContext(WidgetDataContext);
   const { renderMode } = useContext(BoardContext);
   const widget = useContext(WidgetContext);
@@ -78,11 +79,7 @@ export const DataChartWidgetCore: React.FC<{}> = memo(() => {
       let drillOption;
       drillOption = option;
       drillOptionRef.current = drillOption;
-      boardDrillManager.setWidgetDrill({
-        bid,
-        wid,
-        drillOption,
-      });
+      boardDrillManager.setWidgetDrill({ bid, wid, drillOption });
       onWidgetGetData(widgetRef.current);
     },
 
@@ -215,37 +212,36 @@ export const DataChartWidgetCore: React.FC<{}> = memo(() => {
         drillOption={drillOption}
         containerId={wid}
         widgetSpecialConfig={widgetSpecialConfig}
+        scale={scale}
       />
     );
   }, [
     config,
     cacheH,
     cacheW,
     errText,
-    drillOptionRef,
-    wid,
     dataset,
     chart,
+    wid,
     widgetSpecialConfig,
+    scale,
   ]);
 
   return (
     <Wrapper id={renderMode + wid} className="widget-chart" ref={ref}>
       <ChartFrameBox>
-        <PreviewBlock>
-          <ChartDrillContext.Provider
-            value={{
-              drillOption: drillOptionRef.current,
-              onDrillOptionChange: handleDrillOptionChange,
-            }}
-          >
-            <ChartWrapper>
-              <ChartDrillContextMenu>{chartFrame}</ChartDrillContextMenu>
-            </ChartWrapper>
+        <ChartDrillContext.Provider
+          value={{
+            drillOption: drillOptionRef.current,
+            onDrillOptionChange: handleDrillOptionChange,
+          }}
+        >
+          <ChartWrapper>
+            <ChartDrillContextMenu>{chartFrame}</ChartDrillContextMenu>
+          </ChartWrapper>
 
-            <ChartDrillPaths />
-          </ChartDrillContext.Provider>
-        </PreviewBlock>
+          <ChartDrillPaths />
+        </ChartDrillContext.Provider>
       </ChartFrameBox>
     </Wrapper>
   );
@@ -257,6 +253,9 @@ const Wrapper = styled.div`
 `;
 const ChartFrameBox = styled.div`
   position: absolute;
+  display: flex;
+  flex: 1;
+  flex-direction: column;
   width: 100%;
   height: 100%;
   overflow: hidden;
@@ -265,18 +264,7 @@ const ChartWrapper = styled.div`
   position: relative;
   display: flex;
   flex: 1;
-  background-color: ${p => p.theme.componentBackground};
-  border-radius: ${BORDER_RADIUS};
   .chart-drill-menu-container {
     height: 100%;
   }
 `;
-const PreviewBlock = styled.div`
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  box-shadow: ${p => p.theme.shadowBlock};
-`;

frontend/src/app/pages/DashBoardPage/pages/Board/index.tsx

@@ -23,6 +23,7 @@ import { DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
 import { useDispatch, useSelector } from 'react-redux';
 import styled from 'styled-components/macro';
+import { boardDrillManager } from '../../components/BoardDrillManager/BoardDrillManager';
 import { TitleHeader } from '../../components/BoardHeader/TitleHeader';
 import { BoardLoading } from '../../components/BoardLoading';
 import { BoardInitProvider } from '../../components/BoardProvider/BoardInitProvider';
@@ -151,6 +152,7 @@ export const Board: FC<BoardProps> = memo(
       // 销毁组件 清除该对象缓存
       return () => {
         dispatch(boardActions.clearBoardStateById(boardId));
+        boardDrillManager.clearMapByBoardId(boardId);
       };
     }, [boardId, dispatch, fetchData, searchParams]);
 

frontend/src/app/pages/DashBoardPage/pages/BoardEditor/FreeEditor/WidgetOfFreeEdit.tsx

@@ -34,7 +34,7 @@ import { useDispatch, useSelector } from 'react-redux';
 import { Resizable, ResizeCallbackData } from 'react-resizable';
 import styled from 'styled-components/macro';
 import { WidgetActionContext } from '../../../components/ActionProvider/WidgetActionProvider';
-import { scaleContext } from '../../../components/FreeBoardBackground';
+import { BoardScaleContext } from '../../../components/FreeBoardBackground';
 import { editBoardStackActions } from '../slice';
 import { widgetMove, widgetMoveEnd } from '../slice/events';
 import { selectSelectedIds } from '../slice/selectors';
@@ -48,7 +48,7 @@ export const WidgetOfFreeEdit: React.FC<{}> = () => {
   const { onUpdateWidgetConfig } = useContext(WidgetActionContext);
 
   const dispatch = useDispatch();
-  const scale = useContext(scaleContext);
+  const scale = useContext(BoardScaleContext);
   const { x, y, width, height } = widget.config.rect;
   const [curXY, setCurXY] = useState<[number, number]>([
     widget.config.rect.x,

frontend/src/app/pages/DashBoardPage/pages/BoardEditor/index.tsx

@@ -24,6 +24,10 @@ import { useHistory } from 'react-router-dom';
 import styled from 'styled-components/macro';
 import { LEVEL_50 } from 'styles/StyleConstants';
 import { uuidv4 } from 'utils/utils';
+import {
+  boardDrillManager,
+  EDIT_PREFIX,
+} from '../../components/BoardDrillManager/BoardDrillManager';
 import EditorHeader from '../../components/BoardHeader/EditorHeader';
 import { BoardLoading } from '../../components/BoardLoading';
 import { BoardInitProvider } from '../../components/BoardProvider/BoardInitProvider';
@@ -142,12 +146,13 @@ export const BoardEditor: React.FC<{
   useEffect(() => {
     initialization();
     return () => {
-      console.log('__ 销毁 ed');
       // fix issue: #800
       onCloseChartEditor();
       dispatch(clearEditBoardState());
       //销毁时  更新view界面数据
       dispatch(fetchBoardDetail({ dashboardRelId: boardId }));
+      //
+      boardDrillManager.clearMapByBoardId(EDIT_PREFIX + boardId);
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [onCloseChartEditor]);