From 727011d1e74dc3be7220328279bb9f92283db2af Mon Sep 17 00:00:00 2001
From: pomelo-nwu <czynwu@outlook.com>
Date: Tue, 26 Jan 2021 22:57:44 +0800
Subject: [PATCH] fix:add label shape parseAttr

---
 packages/graphin/docs/render/element/node.md |  4 ++
 packages/graphin/docs/render/update/index.md | 11 +++++
 packages/graphin/docs/render/update/node.tsx | 47 ++++++++++++++++++++
 packages/graphin/src/shape/graphin-circle.ts | 11 +++--
 4 files changed, 69 insertions(+), 4 deletions(-)
 create mode 100644 packages/graphin/docs/render/update/index.md
 create mode 100644 packages/graphin/docs/render/update/node.tsx

diff --git a/packages/graphin/docs/render/element/node.md b/packages/graphin/docs/render/element/node.md
index 2ab356192..cd7866706 100644
--- a/packages/graphin/docs/render/element/node.md
+++ b/packages/graphin/docs/render/element/node.md
@@ -11,3 +11,7 @@ nav:
 ## 基本介绍
 
 <code src='./demos/node.tsx'>
+
+## DefaultNode
+
+<code src='./demos/defaultNode.tsx'>
diff --git a/packages/graphin/docs/render/update/index.md b/packages/graphin/docs/render/update/index.md
new file mode 100644
index 000000000..9d3063998
--- /dev/null
+++ b/packages/graphin/docs/render/update/index.md
@@ -0,0 +1,11 @@
+---
+title: 更新元素
+group:
+  path: /render
+nav:
+  title: Graphin
+  path: /graphin
+  order: 1
+---
+
+<code src='./node.tsx'>
diff --git a/packages/graphin/docs/render/update/node.tsx b/packages/graphin/docs/render/update/node.tsx
new file mode 100644
index 000000000..30b5fcfd1
--- /dev/null
+++ b/packages/graphin/docs/render/update/node.tsx
@@ -0,0 +1,47 @@
+import React from 'react';
+import Graphin, { Utils, Behaviors, GraphinContext } from '@antv/graphin';
+import { ContextMenu } from '@antv/graphin-components';
+
+const { FitView } = Behaviors;
+const { Menu } = ContextMenu;
+
+const data = Utils.mock(5).circle().graphin();
+const layout = {
+  type: 'concentric',
+  minNodeSpacing: 50,
+};
+
+const UpdateNode = () => {
+  const { graph } = React.useContext(GraphinContext);
+  const handleChange = (option, item) => {
+    console.log(option, item);
+    // 方法一：直接更新，不持久化到数据中
+    graph.updateItem(item.id, {
+      style: {
+        // @ts-ignore
+        label: {
+          value: 'rename',
+        },
+        keyshape: {
+          size: 80,
+        },
+      },
+    });
+  };
+  return (
+    <ContextMenu bindType="node">
+      <Menu bindType="node" options={[{ name: 'RENAME' }]} onChange={handleChange} />
+    </ContextMenu>
+  );
+};
+
+export default () => {
+  return (
+    <div>
+      <Graphin data={data} layout={layout}>
+        <FitView />
+        <UpdateNode />
+      </Graphin>
+    </div>
+  );
+};
diff --git a/packages/graphin/src/shape/graphin-circle.ts b/packages/graphin/src/shape/graphin-circle.ts
index fbdd62c66..0425ff9c4 100644
--- a/packages/graphin/src/shape/graphin-circle.ts
+++ b/packages/graphin/src/shape/graphin-circle.ts
@@ -77,8 +77,11 @@ const parseAttr = (
       delete schema.fill; // 如果是图片类型，需要删除fill
     }
   }
+  if (itemShapeName === 'label') {
+    schema.text = value;
+  }
 
-  Object.keys(schema).forEach(key => {
+  Object.keys(schema).forEach((key) => {
     if (schema[key] === undefined) {
       delete schema[key];
     }
@@ -204,7 +207,7 @@ export default () => {
       }
 
       // badges 会存在多个的情况
-      badges.forEach(badge => {
+      badges.forEach((badge) => {
         const {
           type,
           position,
@@ -328,13 +331,13 @@ export default () => {
       const status = item._cfg?.states || [];
 
       try {
-        Object.keys(initStateStyle).forEach(statusKey => {
+        Object.keys(initStateStyle).forEach((statusKey) => {
           if (name === statusKey) {
             if (value) {
               setStatusStyle(shapes, initStateStyle[statusKey], parseAttr); // 匹配到status就改变
             } else {
               setStatusStyle(shapes, initialStyle, parseAttr); // 没匹配到就重置
-              status.forEach(key => {
+              status.forEach((key) => {
                 // 如果cfg.status中还有其他状态，那就重新设置回来
                 setStatusStyle(shapes, initStateStyle[key], parseAttr);
               });