feat: Support for fixing nodes while dragging other nodes

examples/graph-apps/src/index.tsx

@@ -4,6 +4,7 @@ import { BrowserRouter, Routes, Route, Outlet, Navigate, useNavigate } from 'rea
 import { Flex, Card, Typography, Divider, Tag } from 'antd';
 import { ConfigProvider, Skeleton, Space, Button } from 'antd';
 import { GithubOutlined, ReadOutlined } from '@ant-design/icons';
+import { StudioProvier } from '@graphscope/studio-components';
 // import locales from '../locales';
 import { IntlProvider } from 'react-intl';
 import PaperReading from './paper-reading';
@@ -136,25 +137,13 @@ const GraphApps: React.FunctionComponent<IPagesProps> = props => {
   });
 
   return (
-    <ConfigProvider
-      // direction="rtl"
-      theme={{
-        components: {
-          Menu: {
-            itemSelectedBg: '#ececec',
-            itemSelectedColor: '#191919',
-            collapsedWidth: 50,
-            collapsedIconSize: 14,
-          },
-        },
-      }}
-    >
+    <StudioProvier locales={{ 'zh-CN': {}, 'en-US': {} }}>
       <IntlProvider messages={messages} locale={locale}>
         <BrowserRouter>
           <Routes>{routeComponents}</Routes>
         </BrowserRouter>
       </IntlProvider>
-    </ConfigProvider>
+    </StudioProvier>
   );
 };
 

examples/graph-apps/src/online-visual-tool/index.tsx

@@ -2,7 +2,7 @@ import React, { useRef } from 'react';
 
 import { Button, Divider } from 'antd';
 
-import { MultipleInstance, Section, useSection, Icons, FullScreen, SegmentedTabs } from '@graphscope/studio-components';
+import { Section, useSection, Icons, FullScreen, SegmentedTabs } from '@graphscope/studio-components';
 import {
   Toolbar,
   SwitchEngine,
@@ -21,6 +21,7 @@ import {
   CurvatureLinks,
   ClearCanvas,
   DagreMode,
+  FixedMode,
 } from '@graphscope/studio-graph';
 
 interface QueryGraphProps {
@@ -109,12 +110,13 @@ const PaperReading: React.FunctionComponent<QueryGraphProps> = props => {
             <FullScreen containerRef={containerRef} />
             <ZoomFit />
             <Brush />
-
+            <FixedMode />
             <Divider style={{ margin: '0px' }} />
             <CurvatureLinks />
             <DagreMode />
             <SwitchEngine />
             <RunCluster />
+            <Divider style={{ margin: '0px' }} />
             <Export />
             <ClearCanvas />
           </Toolbar>

packages/studio-graph/src/app/query.tsx

@@ -30,6 +30,7 @@ import {
   DeleteLeafNodes,
   Export,
   BasicInteraction,
+  FixedMode,
 } from '../components';
 
 import { Divider } from 'antd';
@@ -109,6 +110,7 @@ const QueryGraph: React.FunctionComponent<QueryGraphProps> = props => {
             <FullScreen containerRef={containerRef} />
             <ZoomFit />
             <Brush />
+            <FixedMode />
             <Divider style={{ margin: '0px' }} />
             <SwitchEngine />
             <RunCluster />

packages/studio-graph/src/components/FixedMode/index.tsx

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { Button, Tooltip } from 'antd';
+import { useContext } from '../../hooks/useContext';
+import { BranchesOutlined, PushpinOutlined } from '@ant-design/icons';
+
+interface IDagreModeProps {}
+
+const FixedMode: React.FunctionComponent<IDagreModeProps> = props => {
+  const { store } = useContext();
+  const { graph } = store;
+  const [globalFixed, setToogle] = React.useState(false);
+  const handleClick = () => {
+    if (graph) {
+      if (!globalFixed) {
+        graph.onNodeDragEnd(node => {
+          node.fx = node.x;
+          node.fy = node.y;
+        });
+      } else {
+        graph.onNodeDragEnd(node => {
+          node.fx = undefined;
+          node.fy = undefined;
+        });
+      }
+    }
+    setToogle(!globalFixed);
+  };
+  const title = globalFixed ? 'unFixed nodes when dragging' : 'Fixed nodes when dragging';
+
+  return (
+    <Tooltip title={title} placement="left">
+      <Button onClick={handleClick} icon={<PushpinOutlined rotate={globalFixed ? 0 : 90} />} type="text" />
+    </Tooltip>
+  );
+};
+
+export default FixedMode;

packages/studio-graph/src/components/PropertiesPanel/index.tsx

@@ -43,6 +43,32 @@ const getSelectElement = (data, { nodeStatus, edgeStatus }) => {
     selectElement: null,
   };
 };
+const getDataByProperties = properties => {
+  const dataSource = Object.entries(properties).map(item => {
+    const [key, value] = item;
+    return {
+      name: key,
+      dse: value,
+    };
+  });
+
+  const FirstRow = dataSource[0];
+  let columns: any[] = [];
+  if (FirstRow) {
+    columns = Object.keys(FirstRow).map(key => {
+      return {
+        title: key,
+        dataIndex: key,
+        key: key,
+      };
+    });
+  }
+
+  return {
+    dataSource,
+    columns,
+  };
+};
 
 const PropertiesPanel: React.FunctionComponent<IPropertiesPanelProps> = props => {
   const { store, updateStore } = useContext();
@@ -55,6 +81,7 @@ const PropertiesPanel: React.FunctionComponent<IPropertiesPanelProps> = props =>
   }
 
   const { label, properties = {}, id } = selectElement;
+  const { dataSource, columns } = getDataByProperties(properties);
 
   const onChange = val => {
     const { properties, ...params } = val;
@@ -72,22 +99,6 @@ const PropertiesPanel: React.FunctionComponent<IPropertiesPanelProps> = props =>
   };
 
   const style = nodeStyle[id] || nodeStyle[label];
-  const dataSource = Object.entries(properties).map(item => {
-    const [key, value] = item;
-    return {
-      name: key,
-      dse: value,
-    };
-  });
-
-  const FirstRow = dataSource[0];
-  const columns = Object.keys(FirstRow).map(key => {
-    return {
-      title: key,
-      dataIndex: key,
-      key: key,
-    };
-  });
 
   const title = type === 'node' ? 'Vertex Properties' : 'Edge Properties';
 

packages/studio-graph/src/components/index.tsx

@@ -24,3 +24,4 @@ export { default as BasicInteraction } from './BasicInteraction';
 export { default as ClearCanvas } from './ClearCanvas';
 export { default as CurvatureLinks } from './CurvatureLinks';
 export { default as DagreMode } from './DagreMode';
+export { default as FixedMode } from './FixedMode';