refactor: new interaction with tabs container, issue running-elephant…

…#1777
Cuiyansong · Jul 30, 2022 · eeaf8c4 · eeaf8c4
1 parent 5b07bb9
commit eeaf8c4
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 5 deletions.
diff --git a/frontend/src/app/pages/DashBoardPage/components/WidgetComponents/DropHolder.tsx b/frontend/src/app/pages/DashBoardPage/components/WidgetComponents/DropHolder.tsx
@@ -72,7 +72,7 @@ export const DropHolder: React.FC<DropHolderProps> = memo(
     }, [isOver, canDrop]);
     return (
       <DropWrap ref={refDrop} bgColor={bgColor}>
-        <div className="center">{t('selectFromRightPanel')}</div>
+        <div className="center">{t('dragChartFromLeftPanel')}</div>
       </DropWrap>
     );
   },

diff --git a/frontend/src/app/pages/DashBoardPage/pages/BoardEditor/components/LayerPanel/LayerTree.tsx b/frontend/src/app/pages/DashBoardPage/pages/BoardEditor/components/LayerPanel/LayerTree.tsx
@@ -22,16 +22,22 @@ import { WidgetActionContext } from 'app/pages/DashBoardPage/components/ActionPr
 import widgetManager from 'app/pages/DashBoardPage/components/WidgetManager';
 import { FC, memo, useCallback, useContext } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
+import { isEmptyArray } from 'utils/object';
 import { stopPPG } from 'utils/utils';
 import { dropLayerNodeAction } from '../../slice/actions/actions';
-import { selectLayerTree, selectSelectedIds } from '../../slice/selectors';
+import {
+  selectEditingWidgetIds,
+  selectLayerTree,
+  selectSelectedIds,
+} from '../../slice/selectors';
 import { LayerTreeItem } from './LayerTreeItem';
 
 export const LayerTree: FC<{}> = memo(() => {
   const dispatch = useDispatch();
   const treeData = useSelector(selectLayerTree);
   const renderTreeItem = useCallback(n => <LayerTreeItem node={n} />, []);
   const { onEditSelectWidget } = useContext(WidgetActionContext);
+  const editingWidgetIds = useSelector(selectEditingWidgetIds);
   const selectedKeys = useSelector(selectSelectedIds);
 
   const treeSelect = useCallback(
@@ -58,7 +64,7 @@ export const LayerTree: FC<{}> = memo(() => {
   return (
     <Tree
       className="medium"
-      draggable
+      draggable={isEmptyArray(editingWidgetIds)}
       multiple
       loading={false}
       titleRender={renderTreeItem}

diff --git a/...end/src/app/pages/DashBoardPage/pages/BoardEditor/components/LayerPanel/LayerTreeItem.tsx b/...end/src/app/pages/DashBoardPage/pages/BoardEditor/components/LayerPanel/LayerTreeItem.tsx
@@ -17,6 +17,7 @@
  */
 import { MoreOutlined } from '@ant-design/icons';
 import { TreeDataNode } from 'antd';
+import { WidgetDndHandleMask } from 'app/pages/DashBoardPage/components/WidgetComponents/WidgetDndHandleMask';
 import { WidgetDropdownList } from 'app/pages/DashBoardPage/components/WidgetComponents/WidgetDropdownList';
 import { WidgetContext } from 'app/pages/DashBoardPage/components/WidgetProvider/WidgetProvider';
 import { WidgetWrapProvider } from 'app/pages/DashBoardPage/components/WidgetProvider/WidgetWrapProvider';
@@ -34,11 +35,13 @@ export interface LayerNode extends TreeDataNode {
   originalType: string;
   boardId: string;
 }
+
 export type EventLayerNode = LayerNode & {
   dragOver: boolean;
   dragOverGapTop: boolean;
   dragOverGapBottom: boolean;
 };
+
 export const LayerTreeItem: FC<{ node: LayerNode }> = memo(({ node }) => {
   return (
     <WidgetWrapProvider
@@ -51,13 +54,15 @@ export const LayerTreeItem: FC<{ node: LayerNode }> = memo(({ node }) => {
     </WidgetWrapProvider>
   );
 });
+
 export const TreeItem: FC<{ node: LayerNode }> = memo(({ node }) => {
   const { title } = node;
   const widget = useContext(WidgetContext);
 
   return (
     <Item>
       <h4 title={title as string}>{String(title) || 'untitled-widget'}</h4>
+      <WidgetDndHandleMask widgetId={widget?.id} canWrapped={true} />
       <WidgetDropdownList
         widget={widget}
         buttonProps={{
@@ -69,6 +74,7 @@ export const TreeItem: FC<{ node: LayerNode }> = memo(({ node }) => {
     </Item>
   );
 });
+
 const Item = styled.div`
   display: flex;
   flex: 1;

diff --git a/frontend/src/locales/en/translation.json b/frontend/src/locales/en/translation.json
@@ -1164,7 +1164,7 @@
         "waiting": "Waiting for loadData",
         "cancelLinkage": "Cancel Linkage",
         "canLinkage": "Click the Widget to link",
-        "selectFromRightPanel": "Please select one widget from right panel"
+        "dragChartFromLeftPanel": "Please drag one widget from left panel and drop here"
       }
     },
     "linkage": {

diff --git a/frontend/src/locales/zh/translation.json b/frontend/src/locales/zh/translation.json
@@ -1164,7 +1164,7 @@
         "waiting": "等待加载",
         "cancelLinkage": "取消联动",
         "canLinkage": "点击图表可联动",
-        "selectFromRightPanel": "请从右侧面板中选择一个图表"
+        "dragChartFromLeftPanel": "请从左侧面板中拖拽一个图表到当前位置"
       }
     },
     "linkage": {