From a6374fbe55a681abe7b101b55030e4e698b33b5e Mon Sep 17 00:00:00 2001
From: pomelo-nwu <czynwu@outlook.com>
Date: Sat, 24 Aug 2024 11:39:37 +0800
Subject: [PATCH] feat: adjust label text

---
 .../StyleSetting/legend/content.tsx           |  2 +-
 packages/studio-graph/src/graph/const.tsx     |  4 +--
 .../src/graph/custom-node/index.tsx           | 34 +++++++++----------
 packages/studio-graph/src/graph/useGraph.ts   |  1 -
 4 files changed, 20 insertions(+), 21 deletions(-)

diff --git a/packages/studio-graph/src/components/StyleSetting/legend/content.tsx b/packages/studio-graph/src/components/StyleSetting/legend/content.tsx
index 1c906c3b0..e67755e48 100644
--- 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
index a8c9a64e4..6d1f5b059 100644
--- 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
index bf994fe9d..9b99fe42e 100644
--- 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
index 9618da846..e939aa2d4 100644
--- 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]);