feat: adjust label text

GraphScope · Aug 24, 2024 · a6374fb · a6374fb
1 parent 536f51a
commit a6374fb
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 21 deletions.
diff --git a/packages/studio-graph/src/components/StyleSetting/legend/content.tsx b/packages/studio-graph/src/components/StyleSetting/legend/content.tsx
@@ -66,7 +66,7 @@ const LengendContent: React.FunctionComponent<ILengendContentProps> = props => {
   };
   const activeStyle = `2px solid ${token.colorPrimary}`;
   return (
-    <div style={{ maxWidth: '380px', overflow: 'hidden' }}>
+    <div style={{ maxWidth: '220px', overflow: 'hidden', padding: '12px' }}>
       <Flex gap={12} style={{ padding: '6px 0px' }}>
         <Typography.Text style={{ flexShrink: 0 }}>
           <FormattedMessage id="Color" />

diff --git a/packages/studio-graph/src/graph/const.tsx b/packages/studio-graph/src/graph/const.tsx
@@ -1,11 +1,11 @@
 export const colors: string[] = [
   '#569480',
+  '#F79767',
   '#1978fe',
-  '#FFE081',
   '#C990C0',
-  '#F79767',
   '#57C7E3',
   '#D9C8AE',
+  '#FFE081',
   '#8DCC93',
   '#ECB5C9',
   '#FFC454',

diff --git a/packages/studio-graph/src/graph/custom-node/index.tsx b/packages/studio-graph/src/graph/custom-node/index.tsx
@@ -44,24 +44,9 @@ export const nodeCanvasObject =
       //@TODO
     }
 
-    if (captionMode === 'inner') {
-      const fontSize = 16 / globalScale;
-      ctx.font = `${fontSize}px Sans-Serif`;
-      ctx.fillStyle = NODE_TEXT_COLOR;
-      ctx.textAlign = 'center';
-      ctx.textBaseline = 'middle';
-      ctx.fillStyle = '#fff';
-      drawText(ctx, {
-        text: textLabel,
-        x: node.x,
-        y: node.y + fontSize / 2,
-        maxWidth: R * 2 * 0.8, //预留 20% pandding
-        lineHeight: fontSize * 1.2,
-      });
-    } else if (captionStatus !== 'hidden' && textLabel) {
+    if (captionStatus !== 'hidden' && textLabel) {
       const fontSize = Math.min(0.5 * globalScale, 14 / globalScale);
-      // console.log(globalScale, 12 / globalScale, fontSize);
-      if (true) {
+      if (globalScale > 4 && globalScale < 15) {
         ctx.font = `${fontSize}px Sans-Serif`;
         const textWidth = ctx.measureText(textLabel).width;
         const bckgDimensions = [textWidth, fontSize].map(n => n + fontSize * 0.2); // some padding
@@ -75,6 +60,21 @@ export const nodeCanvasObject =
         // @ts-ignore
         node.__bckgDimensions = bckgDimensions; // to re-use in nodePointerAreaPaint
       }
+      if (globalScale >= 15) {
+        const fontSize = 16 / globalScale;
+        ctx.font = `${fontSize}px Sans-Serif`;
+        ctx.fillStyle = NODE_TEXT_COLOR;
+        ctx.textAlign = 'center';
+        ctx.textBaseline = 'middle';
+        ctx.fillStyle = '#fff';
+        drawText(ctx, {
+          text: textLabel,
+          x: node.x,
+          y: node.y + fontSize / 2,
+          maxWidth: R * 2 * 0.8, //预留 20% pandding
+          lineHeight: fontSize * 1.2,
+        });
+      }
     }
     ctx.restore();
     return;

diff --git a/packages/studio-graph/src/graph/useGraph.ts b/packages/studio-graph/src/graph/useGraph.ts
@@ -149,7 +149,6 @@ export default function useGraph<P extends GraphProps>(props: P) {
   }, [render]);
   useEffect(() => {
     if (graphRef.current) {
-      console.log('render>>>> data', data);
       graphRef.current.graphData(Utils.fakeSnapshot({ nodes: data.nodes, links: data.edges }));
     }
   }, [data]);