feat: fix style

GraphScope · Oct 8, 2024 · d9a39a0 · d9a39a0
1 parent fc59c8f
commit d9a39a0
Show file tree

Hide file tree

Showing 17 changed files with 181 additions and 33 deletions.
diff --git a/packages/studio-components/src/Icons/FileExport.tsx b/packages/studio-components/src/Icons/FileExport.tsx
@@ -1,10 +1,11 @@
 import React from 'react';
-export default ({ style }: { style?: React.CSSProperties }) => {
+export default ({ style }: { style?: Record<string, string> }) => {
+  const { color = '#2c2c2c' } = style || { color: '#2c2c2c' };
   return (
     <svg style={style} viewBox="0 0 1066 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="18" height="18">
       <path
         d="M935.253333 666.453333a49.066667 49.066667 0 0 0-8.96-14.08l-128-128a42.837333 42.837333 0 1 0-60.586666 60.586667l55.466666 55.04H554.666667a42.666667 42.666667 0 1 0 0 85.333333h238.506666l-55.466666 55.04a42.666667 42.666667 0 0 0 0 60.586667 42.666667 42.666667 0 0 0 60.586666 0l128-128a39.68 39.68 0 0 0 8.96-14.08 42.666667 42.666667 0 0 0 0-32.426667zM640 853.333333H298.666667a42.666667 42.666667 0 0 1-42.666667-42.666666V213.333333a42.666667 42.666667 0 0 1 42.666667-42.666666h213.333333v128a128 128 0 0 0 128 128h170.666667a42.666667 42.666667 0 0 0 39.253333-26.453334 42.666667 42.666667 0 0 0-8.96-46.506666l-256-256a45.653333 45.653333 0 0 0-11.946667-8.106667h-3.84l-11.946666-4.266667H298.666667a128 128 0 0 0-128 128v597.333334a128 128 0 0 0 128 128h341.333333a42.666667 42.666667 0 1 0 0-85.333334zM597.333333 230.826667L707.84 341.333333H640a42.666667 42.666667 0 0 1-42.666667-42.666666V230.826667z"
-        fill="#2c2c2c"
+        fill={color}
       ></path>
     </svg>
   );

diff --git a/packages/studio-components/src/Icons/FileYaml.tsx b/packages/studio-components/src/Icons/FileYaml.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 const FileYaml = ({ style }: { style?: React.CSSProperties }) => {
-  const { fontSize, color } = style || { fontSize: '16px', color: '#000' };
+  const { fontSize = '16px', color = '#000' } = style as { fontSize: string; color: string };
+
   return (
     <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width={fontSize} height={fontSize}>
       <path

diff --git a/packages/studio-components/src/Icons/Lock.tsx b/packages/studio-components/src/Icons/Lock.tsx
@@ -0,0 +1,19 @@
+import * as React from 'react';
+
+interface ILockProps {
+  fill?: string;
+}
+
+const Lock: React.FunctionComponent<ILockProps> = props => {
+  const { fill = '#000' } = props;
+  return (
+    <svg width="14px" height="14px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 32">
+      <path
+        d="M21.333 10.667H19.81V7.619C19.81 3.429 16.38 0 12.19 0c-4.114 1.828-1.37 2.133.305 2.438 1.676.305 4.42 2.59 4.42 5.181v3.048H3.047A3.056 3.056 0 000 13.714v15.238A3.056 3.056 0 003.048 32h18.285a3.056 3.056 0 003.048-3.048V13.714a3.056 3.056 0 00-3.048-3.047zM12.19 24.533a3.056 3.056 0 01-3.047-3.047 3.056 3.056 0 013.047-3.048 3.056 3.056 0 013.048 3.048 3.056 3.056 0 01-3.048 3.047z"
+        fill={fill}
+      ></path>
+    </svg>
+  );
+};
+
+export default Lock;
diff --git a/packages/studio-components/src/Icons/Trash.tsx b/packages/studio-components/src/Icons/Trash.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
-export default ({ style, disabled }: { style?: React.CSSProperties; disabled?: boolean }) => {
-  const color = disabled ? '#ddd' : '#000';
+export default ({ style, disabled, fill }: { style?: React.CSSProperties; disabled?: boolean; fill: string }) => {
+  // const color = disabled ? '#ddd' : '#000';
   return (
     <svg
       width="15px"
@@ -12,7 +12,7 @@ export default ({ style, disabled }: { style?: React.CSSProperties; disabled?: b
     >
       <path
         fontWeight="bold"
-        fill={color}
+        fill={fill}
         d="M793.6 102.4H614.4v-25.6c0-42.3424-34.4576-76.8-76.8-76.8h-102.4C392.8576 0 358.4 34.4576 358.4 76.8V102.4H179.2C136.8576 102.4 102.4 136.8576 102.4 179.2v51.2c0 33.3824 21.4016 61.8496 51.2 72.3968V947.2c0 42.3424 34.4576 76.8 76.8 76.8h512c42.3424 0 76.8-34.4576 76.8-76.8V302.7968c29.7984-10.5472 51.2-39.0144 51.2-72.3968v-51.2c0-42.3424-34.4576-76.8-76.8-76.8zM409.6 76.8a25.6 25.6 0 0 1 25.6-25.6h102.4a25.6 25.6 0 0 1 25.6 25.6V102.4H409.6v-25.6zM742.4 972.8h-512a25.6 25.6 0 0 1-25.6-25.6V307.2h563.2v640a25.6 25.6 0 0 1-25.6 25.6zM819.2 230.4a25.6 25.6 0 0 1-25.6 25.6h-614.4a25.6 25.6 0 0 1-25.6-25.6v-51.2a25.6 25.6 0 0 1 25.6-25.6h614.4a25.6 25.6 0 0 1 25.6 25.6v51.2zM640 358.4a25.6 25.6 0 0 0-25.6 25.6v512a25.6 25.6 0 0 0 51.2 0v-512a25.6 25.6 0 0 0-25.6-25.6zM486.4 358.4a25.6 25.6 0 0 0-25.6 25.6v512a25.6 25.6 0 0 0 51.2 0v-512a25.6 25.6 0 0 0-25.6-25.6zM332.8 358.4a25.6 25.6 0 0 0-25.6 25.6v512a25.6 25.6 0 0 0 51.2 0v-512a25.6 25.6 0 0 0-25.6-25.6z"
       />
     </svg>

diff --git a/packages/studio-components/src/Icons/Unlock.tsx b/packages/studio-components/src/Icons/Unlock.tsx
@@ -0,0 +1,19 @@
+import * as React from 'react';
+
+interface IUnlockProps {
+  fill?: string;
+}
+
+const Unlock: React.FunctionComponent<IUnlockProps> = props => {
+  const { fill = '#000' } = props;
+  return (
+    <svg width="14px" height="14px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 32">
+      <path
+        d="M21.333 10.667H19.81V7.619C19.81 3.429 16.38 0 12.19 0 8 0 4.571 3.429 4.571 7.619v3.048H3.048A3.056 3.056 0 000 13.714v15.238A3.056 3.056 0 003.048 32h18.285a3.056 3.056 0 003.048-3.048V13.714a3.056 3.056 0 00-3.048-3.047zM12.19 24.533a3.056 3.056 0 01-3.047-3.047 3.056 3.056 0 013.047-3.048 3.056 3.056 0 013.048 3.048 3.056 3.056 0 01-3.048 3.047zm4.724-13.866H7.467V7.619c0-2.59 2.133-4.724 4.723-4.724 2.591 0 4.724 2.133 4.724 4.724v3.048z"
+        fill={fill}
+      ></path>
+    </svg>
+  );
+};
+
+export default Unlock;
diff --git a/packages/studio-components/src/Icons/index.tsx b/packages/studio-components/src/Icons/index.tsx
@@ -9,3 +9,5 @@ export { default as Graph2D } from './Graph2D';
 export { default as Graph3D } from './Graph3D';
 export { default as ZoomFit } from './ZoomFit';
 export { default as Cluster } from './Cluster';
+export { default as Lock } from './Lock';
+export { default as Unlock } from './Unlock';
diff --git a/packages/studio-components/src/Toolbar/index.tsx b/packages/studio-components/src/Toolbar/index.tsx
@@ -23,7 +23,7 @@ const Toolbar: React.FunctionComponent<IToolbarProps> = props => {
         zIndex: 999,
         padding: '4px',
         borderRadius: '4px',
-        background: '#fff',
+        // background: '#fff',
         ...style,
       }}
     >

diff --git a/packages/studio-graph/src/app/query.tsx b/packages/studio-graph/src/app/query.tsx
@@ -75,7 +75,7 @@ const QueryGraph: React.FunctionComponent<QueryGraphProps> = props => {
   return (
     <div
       style={{
-        background: '#fff',
+        // background: '#fff',
         borderRadius: '8px',
         height: '500px',
       }}

diff --git a/packages/studio-importor/src/app/button-controller/clear-canvas.tsx b/packages/studio-importor/src/app/button-controller/clear-canvas.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Button, Tooltip } from 'antd';
 
-import { Icons } from '@graphscope/studio-components';
+import { Icons, useThemeContainer } from '@graphscope/studio-components';
 import { resetIndex } from '../utils';
 import { FormattedMessage } from 'react-intl';
 interface IAddNodeProps {
@@ -12,6 +12,16 @@ const ClearCanvas: React.FunctionComponent<IAddNodeProps> = props => {
   const { style } = props;
   const { updateStore, store } = useContext();
   const { elementOptions } = store;
+  const { algorithm } = useThemeContainer();
+  const isDark = algorithm === 'darkAlgorithm';
+  /** svg pathFill */
+  let pathFill = () => {
+    if (isDark) {
+      return elementOptions.isEditable ? '#585858' : '#fff';
+    } else {
+      return elementOptions.isEditable ? '#ddd' : '#000';
+    }
+  };
   const tooltipText = elementOptions.isEditable ? (
     <FormattedMessage id="The current mode is preview only, and does not support clearing the model" />
   ) : (
@@ -33,7 +43,7 @@ const ClearCanvas: React.FunctionComponent<IAddNodeProps> = props => {
         onClick={handleClear}
         style={style}
         type="text"
-        icon={<Icons.Trash disabled={elementOptions.isEditable} />}
+        icon={<Icons.Trash fill={pathFill()} />}
       ></Button>
     </Tooltip>
   );

diff --git a/packages/studio-importor/src/app/button-controller/export-model.tsx b/packages/studio-importor/src/app/button-controller/export-model.tsx
@@ -2,8 +2,7 @@ import { Button, Tooltip } from 'antd';
 import * as React from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { FileImageOutlined } from '@ant-design/icons';
-import { Utils, Icons } from '@graphscope/studio-components';
+import { Utils, Icons, useThemeContainer } from '@graphscope/studio-components';
 import { useContext } from '../useContext';
 import { transOptionsToSchema } from '../utils/modeling';
 import { transformImportOptionsToSchemaMapping } from '../utils/importing';
@@ -13,7 +12,9 @@ interface ILeftButtonProps {}
 const ExportModel: React.FunctionComponent<ILeftButtonProps> = props => {
   const { store } = useContext();
   const { nodes, edges, appMode } = store;
-
+  const { algorithm } = useThemeContainer();
+  const isDark = algorithm === 'darkAlgorithm';
+  const color = isDark ? '#ddd' : '#000';
   const handleExport = (type: string) => {
     let yamlFile;
     if (appMode === 'DATA_MODELING') {
@@ -45,7 +46,7 @@ const ExportModel: React.FunctionComponent<ILeftButtonProps> = props => {
     <Tooltip title={<FormattedMessage id="Save graph model to JSON config" />} placement="right">
       <Button
         type="text"
-        icon={<Icons.FileExport />}
+        icon={<Icons.FileExport style={{ color }} />}
         onClick={() => {
           handleExport('yaml');
         }}

diff --git a/packages/studio-importor/src/app/button-controller/index.tsx b/packages/studio-importor/src/app/button-controller/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Divider } from 'antd';
-import { Toolbar, ThemeProvider, Section } from '@graphscope/studio-components';
+import { Toolbar, useThemeContainer } from '@graphscope/studio-components';
 import 'reactflow/dist/style.css';
 import RightButton from './right-button';
 import LeftButton from './left-button';
@@ -13,12 +13,15 @@ import ExportModel from './export-model';
 interface IButtonControllerProps {}
 
 const ButtonController: React.FunctionComponent<IButtonControllerProps> = props => {
+  const { algorithm } = useThemeContainer();
+  const isDark = algorithm === 'darkAlgorithm';
+  const background = isDark ? '#1d1d1d' : '#fff';
   const { store } = useContext();
   const { appMode } = store;
   if (appMode === 'DATA_MODELING') {
     return (
       <>
-        <Toolbar style={{ top: '12px', right: '24px', left: 'unset' }} direction="vertical">
+        <Toolbar style={{ top: '12px', right: '24px', left: 'unset', background }} direction="vertical">
           <RightButton />
           <Divider style={{ margin: '0px' }} />
           <ImportSchema displayType="model" />
@@ -34,7 +37,7 @@ const ButtonController: React.FunctionComponent<IButtonControllerProps> = props
   if (appMode === 'DATA_IMPORTING') {
     return (
       <>
-        <Toolbar style={{ top: '12px', right: '24px', left: 'unset' }} direction="horizontal">
+        <Toolbar style={{ top: '12px', right: '24px', left: 'unset', background }} direction="horizontal">
           <RightButton />
         </Toolbar>
       </>

diff --git a/packages/studio-importor/src/app/button-controller/right-button.tsx b/packages/studio-importor/src/app/button-controller/right-button.tsx
@@ -1,15 +1,16 @@
 import { Button } from 'antd';
 import * as React from 'react';
-import { Icons, useSection } from '@graphscope/studio-components';
+import { Icons, useSection, useThemeContainer } from '@graphscope/studio-components';
 interface ILeftButtonProps {}
 
 const LeftButton: React.FunctionComponent<ILeftButtonProps> = props => {
   const { toggleRightSide } = useSection();
-
+  const { algorithm } = useThemeContainer();
+  const isDark = algorithm === 'darkAlgorithm';
   return (
     <Button
       type="text"
-      icon={<Icons.Sidebar revert />}
+      icon={<Icons.Sidebar revert disabled={isDark} />}
       onClick={() => {
         toggleRightSide();
       }}

diff --git a/packages/studio-importor/src/app/graph-canvas/CustomControls.tsx b/packages/studio-importor/src/app/graph-canvas/CustomControls.tsx
@@ -0,0 +1,71 @@
+import React from 'react';
+import { Button, Flex, Divider } from 'antd';
+import { PlusOutlined, MinusOutlined, ExpandOutlined } from '@ant-design/icons';
+import { useReactFlow, Panel } from 'reactflow';
+import { Icons, useThemeContainer } from '@graphscope/studio-components';
+
+interface ICustomControlsProps {
+  isLocked: boolean;
+  handleLocked: (val: boolean) => void;
+}
+const CustomControls: React.FunctionComponent<ICustomControlsProps> = props => {
+  const { isLocked, handleLocked } = props;
+  const { zoomIn, zoomOut, fitView } = useReactFlow();
+  const { algorithm } = useThemeContainer();
+  const isDark = algorithm === 'darkAlgorithm';
+  // svg path fill
+  const fill = isDark ? '#FFF' : '#000';
+  // lock or unlock
+  const Icon = isLocked ? <Icons.Lock fill={fill} /> : <Icons.Unlock fill={fill} />;
+  const background = isDark ? '#1d1d1d' : '#fff';
+  return (
+    <>
+      <Panel
+        position="bottom-left"
+        style={{
+          boxShadow:
+            '0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05)',
+          background,
+        }}
+      >
+        <Flex vertical>
+          <Button
+            style={{ borderRadius: 0 }}
+            size="small"
+            type="text"
+            icon={<PlusOutlined />}
+            onClick={() => zoomIn({ duration: 100 })}
+          />
+          <Divider style={{ margin: 0 }} />
+          <Button
+            style={{ borderRadius: 0 }}
+            size="small"
+            type="text"
+            icon={<MinusOutlined />}
+            onClick={() => zoomOut({ duration: 100 })}
+          />
+          <Divider style={{ margin: 0 }} />
+          <Button
+            style={{ borderRadius: 0 }}
+            size="small"
+            type="text"
+            icon={<ExpandOutlined />}
+            onClick={() => fitView()}
+          />
+          <Divider style={{ margin: 0 }} />
+          <Button
+            style={{ borderRadius: 0 }}
+            size="small"
+            type="text"
+            icon={Icon}
+            onClick={() => {
+              handleLocked(!isLocked);
+            }}
+          />
+        </Flex>
+      </Panel>
+    </>
+  );
+};
+
+export default CustomControls;
diff --git a/packages/studio-importor/src/app/graph-canvas/index.tsx b/packages/studio-importor/src/app/graph-canvas/index.tsx
@@ -1,11 +1,12 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import { ReactFlow, Controls, Background, MiniMap } from 'reactflow';
-import { EmptyCanvas, useThemeContainer, useMultipleInstance } from '@graphscope/studio-components';
+import { EmptyCanvas, useThemeContainer } from '@graphscope/studio-components';
 import { nodeTypes } from '../elements/node-types';
 import { edgeTypes } from '../elements/edge-types';
 import ConnectionLine from '../elements/connection-line';
 import ArrowMarker from '../elements/arrow-marker';
 import { PlayCircleOutlined } from '@ant-design/icons';
+import CustomControls from './CustomControls';
 
 import useInteractive from './useInteractive';
 import { FormattedMessage } from 'react-intl';
@@ -19,6 +20,10 @@ const fakeSnapshot = obj => {
 const GraphEditor: React.FunctionComponent<IGraphEditorProps> = props => {
   const { store, onDoubleClick, onEdgesChange, onNodesChange, onConnectStart, onConnectEnd } = useInteractive();
   const { nodes, edges, theme, collapsed, appMode } = store;
+  const [state, updateState] = useState({
+    isLocked: false,
+  });
+  const { isLocked } = state;
   const { algorithm } = useThemeContainer();
   const isEmpty = nodes.length === 0;
   const isDark = algorithm === 'darkAlgorithm';
@@ -48,15 +53,18 @@ const GraphEditor: React.FunctionComponent<IGraphEditorProps> = props => {
           onConnectStart={onConnectStart}
           onConnectEnd={onConnectEnd}
           zoomOnDoubleClick={false}
+          nodesDraggable={isLocked} // 禁用节点拖拽
           // onDoubleClick={onDoubleClick}
+          proOptions={{ hideAttribution: true }} // 隐藏 reactflow 标识
         >
           <ArrowMarker selectedColor={theme.primaryColor} color={isDark ? '#d7d7d7' : '#000'} />
           {!IS_PURE && (
-            <Controls
-              style={{
-                gap: '4px',
-                boxShadow:
-                  '0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05)',
+            <CustomControls
+              isLocked={isLocked}
+              handleLocked={val => {
+                updateState(preset => {
+                  return { ...preset, isLocked: val };
+                });
               }}
             />
           )}

diff --git a/packages/studio-importor/src/app/import-schema/index.tsx b/packages/studio-importor/src/app/import-schema/index.tsx
@@ -4,7 +4,7 @@ import { UngroupOutlined } from '@ant-design/icons';
 import ImportFromCSV from './import-from-csv';
 import ImportFromSQL from './import-from-sql';
 import ImportFromYAML from './import-from-yaml';
-import { SegmentedTabs, Icons } from '@graphscope/studio-components';
+import { SegmentedTabs, Icons, useThemeContainer } from '@graphscope/studio-components';
 import type { SegmentedTabsProps } from '@graphscope/studio-components';
 
 import { FormattedMessage } from 'react-intl';
@@ -33,6 +33,9 @@ const ImportSchema: React.FunctionComponent<IImportSchemaProps> = props => {
     visible: false,
   });
   const { visible } = state;
+  const { algorithm } = useThemeContainer();
+  const isDark = algorithm === 'darkAlgorithm';
+  const color = isDark ? '#fff' : '#000';
   const handleClick = () => {
     updateState({
       ...state,
@@ -49,7 +52,7 @@ const ImportSchema: React.FunctionComponent<IImportSchemaProps> = props => {
     return (
       <Space>
         <Tooltip title={<FormattedMessage id="Shortcut: parse files into a graph model" />} placement="left">
-          <Button type="text" onClick={handleClick} style={style} icon={<Icons.FileYaml />}></Button>
+          <Button type="text" onClick={handleClick} style={style} icon={<Icons.FileYaml style={{ color }} />}></Button>
         </Tooltip>
 
         <Modal

diff --git a/packages/studio-query/src/app/sidebar/recommended-statements/index.tsx b/packages/studio-query/src/app/sidebar/recommended-statements/index.tsx
@@ -86,11 +86,18 @@ const RecommendedStatements: React.FunctionComponent<IRecommendedStatementsProps
         </Title>
         {edges.map(item => {
           const { label } = item;
+
           const { color } = configMap.edgeStyle[label];
           return (
             <Tag
               key={label}
-              style={{ borderRadius: '8px', backgroundColor: color, cursor: 'pointer', margin: '4px' }}
+              style={{
+                borderRadius: '8px',
+                backgroundColor: color,
+                cursor: 'pointer',
+                margin: '4px',
+                color: '#000',
+              }}
               bordered={false}
               onClick={() => {
                 handleClick(label, 'edges');