refactor: scale in DataChartWidgetCore

refactor: chartWidget get scale

Author: xieliuduo

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

@@ -98,7 +98,6 @@ const ChartDrillContextMenu: FC<{}> = memo(({ children }) => {
         overlay={contextMenu}
         destroyPopupOnHide={true}
         trigger={['contextMenu']}
-        getPopupContainer={triggerNode => triggerNode}
       >
         <div style={{ height: '100%' }}>{children}</div>
       </Dropdown>

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/components/ChartIFrameContainer/ChartIFrameContainer.tsx

@@ -39,6 +39,7 @@ const ChartIFrameContainer: FC<{
   isShown?: boolean;
   drillOption?: IChartDrillOption;
   widgetSpecialConfig?: any;
+  scale?: [number, number];
 }> = memo(props => {
   const iframeContainerId = `chart-iframe-root-${props.containerId}`;
 
@@ -115,15 +116,19 @@ const ChartIFrameContainer: FC<{
 
                   var iframe = document.getElementById(iframeContainerId);
                   if (iframe) {
+                    const [scaleX = 1, scaleY = 1] = props.scale || [];
                     var boundingClientRect = iframe.getBoundingClientRect();
                     var evt = new CustomEvent('contextmenu', {
                       bubbles: true,
                       cancelable: false,
                     }) as any;
-                    evt.clientX = event.clientX + boundingClientRect.left;
-                    evt.pageX = event.clientX + boundingClientRect.left;
-                    evt.clientY = event.clientY + boundingClientRect.top;
-                    evt.pageY = event.clientY + boundingClientRect.top;
+                    evt.clientX =
+                      event.clientX * scaleX + boundingClientRect.left;
+                    evt.pageX =
+                      event.clientX * scaleX + boundingClientRect.left;
+                    evt.clientY =
+                      event.clientY * scaleY + boundingClientRect.top;
+                    evt.pageY = event.clientY * scaleY + boundingClientRect.top;
                     iframe.dispatchEvent(evt);
                   }
                 }}

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);
@@ -211,18 +212,19 @@ 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 (
@@ -262,8 +264,6 @@ 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%;
   }

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]);