docs(extension): 同步更新 menu extension 官网文档示例代码

Author: boyongjiong

examples/feature-examples/src/pages/extensions/menu/index.tsx

@@ -98,7 +98,7 @@ const data = {
   ],
   edges: [
     {
-      type: 'polyline',
+      // type: 'polyline',
       sourceNodeId: '1',
       targetNodeId: '2',
     },

sites/docs/docs/tutorial/extension-component-menu.en-US.md

@@ -73,46 +73,58 @@ const lf = new LogicFlow({
   plugins: [Menu],
 });
 // Append options to the menu (must be set before lf.render())
+// we can use `lf.addMenuConfig` to add menu options as other options
 lf.extension.menu.addMenuConfig({
   nodeMenu: [
     {
-      text: "share",
+      text: '分享',
       callback() {
-        alert("share success！");
+        alert('分享成功！')
       },
     },
     {
-      text: "properties",
-      callback(node: any) {
+      text: '属性',
+      callback(node: NodeData) {
         alert(`
-          nodeId：${node.id}
-          nodeType：${node.type}
-          nodeCoordinate：(x: ${node.x}, y: ${node.y})`);
+              节点id：${node.id}
+              节点类型：${node.type}
+              节点坐标：(x: ${node.x}, y: ${node.y})
+            `)
       },
     },
   ],
   edgeMenu: [
     {
-      text: "properties",
-      callback(edge: any) {
+      text: '属性',
+      callback(edge: EdgeData) {
+        const {
+          id,
+          type,
+          startPoint,
+          endPoint,
+          sourceNodeId,
+          targetNodeId,
+        } = edge
         alert(`
-          edgeId：${edge.id}
-          edgeType：${edge.type}
-          edgeCoordinate：(x: ${edge.x}, y: ${edge.y})
-          sourceNodeId：${edge.sourceNodeId}
-          targetNodeId：${edge.targetNodeId}`);
+              边id：${id}
+              边类型：${type}
+              边起点坐标：(startPoint: [${startPoint.x}, ${startPoint.y}])
+              边终点坐标：(endPoint: [${endPoint.x}, ${endPoint.y}])
+              源节点id：${sourceNodeId}
+              目标节点id：${targetNodeId}
+            `)
       },
     },
   ],
   graphMenu: [
     {
-      text: "share",
+      text: '分享',
       callback() {
-        alert("share success!");
+        alert('分享成功！')
       },
     },
   ],
-});
+})
 lf.render();
 ```
 

sites/docs/docs/tutorial/extension-component-menu.md

@@ -65,57 +65,69 @@ LogicFlow.use(Menu);
 通过`lf.extension.menu.addMenuConfig`方法可以在原有菜单的基础上追加新的选项，具体配置示例如下：
 
 ```jsx | purex | pure
-import LogicFlow from "@logicflow/core";
-import { Menu } from "@logicflow/extension";
+import LogicFlow from '@logicflow/core'
+import { Menu } from '@logicflow/extension'
 
 // 实例化 Logic Flow
 const lf = new LogicFlow({
-  container: document.getElementById("app"),
+  container: document.getElementById('app'),
   // 注册组件
   plugins: [Menu],
-});
+})
 // 为菜单追加选项（必须在 lf.render() 之前设置）
+// 或者直接通过 lf.addMenuConfig 也可以调用
 lf.extension.menu.addMenuConfig({
   nodeMenu: [
     {
-      text: "分享",
+      text: '分享',
       callback() {
-        alert("分享成功！");
+        alert('分享成功！')
       },
     },
     {
-      text: "属性",
-      callback(node: any) {
+      text: '属性',
+      callback(node: NodeData) {
         alert(`
-          节点id：${node.id}
-          节点类型：${node.type}
-          节点坐标：(x: ${node.x}, y: ${node.y})`);
+              节点id：${node.id}
+              节点类型：${node.type}
+              节点坐标：(x: ${node.x}, y: ${node.y})
+            `)
       },
     },
   ],
   edgeMenu: [
     {
-      text: "属性",
-      callback(edge: any) {
+      text: '属性',
+      callback(edge: EdgeData) {
+        const {
+          id,
+          type,
+          startPoint,
+          endPoint,
+          sourceNodeId,
+          targetNodeId,
+        } = edge
         alert(`
-          边id：${edge.id}
-          边类型：${edge.type}
-          边坐标：(x: ${edge.x}, y: ${edge.y})
-          源节点id：${edge.sourceNodeId}
-          目标节点id：${edge.targetNodeId}`);
+              边id：${id}
+              边类型：${type}
+              边起点坐标：(startPoint: [${startPoint.x}, ${startPoint.y}])
+              边终点坐标：(endPoint: [${endPoint.x}, ${endPoint.y}])
+              源节点id：${sourceNodeId}
+              目标节点id：${targetNodeId}
+            `)
       },
     },
   ],
   graphMenu: [
     {
-      text: "分享",
+      text: '分享',
       callback() {
-        alert("分享成功！");
+        alert('分享成功！')
       },
     },
   ],
-});
-lf.render();
+})
+lf.render()
 ```
 
 ## 重置菜单