源代码整理标记

@@ -17,6 +17,7 @@
       @dblclick-edge="onDblClickEdge"
       :activityConfig="state.activityConfig"
     >
+      <!-- 左侧菜单 -->
       <template v-slot:menu>
         <vue-flow-edit-menu-group label="活动节点" value>
           <vue-flow-edit-menu
@@ -45,7 +46,7 @@
           />
         </vue-flow-edit-menu-group>
       </template>
-
+      <!-- 右侧表单 -->
       <template v-slot:model>
         <el-form
           v-if="!!state.detailModel"
@@ -177,15 +178,16 @@
           </template>
         </el-form>
       </template>
-
+      <!-- 工具栏 -->
       <template v-slot:toolbar>
         <el-tooltip content="打印流程图数据结构">
           <div class="vue-flow-editor-toolbar-item" @click="logData">
-            <i class="el-icon-search" />
+            <i class="el-icon-search" style=" margin-top: 4px;" />
+            <span style="font-size: 12px; transform: scale(0.8); margin-top: 2px;">log数据</span>
           </div>
         </el-tooltip>
       </template>
-
+      <!-- 表单底部按钮 -->
       <template v-slot:foot>
         <el-button type="primary" @click="save">保存</el-button>
         <el-button @click="cancel">取消</el-button>
@@ -338,6 +340,7 @@ export default {
     });
 
     onMounted(() => {
+      document.title = '可视化流程设计器';
     // // 显示提示框的标志位
     // var showConfirmation = true;
     // // 监听 beforeunload 事件

@@ -6,7 +6,7 @@ export const AppData = {
             "y": 100,
             "text": "广告宣传",
             "desc": "通过广告短频宣传",
-            "activity": "advertisement",
+            "activity": "advertisement", // 自定义节点的类型
         },
         {
             "id": "2323456789",

 <!--
  * @Date: 2023-11-01 10:18:53
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2023-11-01 15:32:45
+ * @LastEditTime: 2023-11-02 07:25:50
  * @FilePath: /vue-flow-editor/doc/selectUserView.vue
- * @Description: 文件描述
+ * @Description: 成员列表选择控件
 -->
 <template>
   <el-dialog

@@ -34,6 +34,7 @@
                     },
                     drop: async e => {
                         let model = {...this.model}
+                        // TAG: 自定义节点
                         formatNodeModel(model, this[VueFlowEditorProvider].props.activityConfig)
 
                         let {id, shape, size} = model

@@ -59,7 +59,7 @@ export default {
                 let {nodes, edges} = data || {}
                 nodes = nodes || []
                 edges = edges || []
-
+                // TAG: 自定义节点
                 nodes.forEach(node => formatNodeModel(node, editorProps.activityConfig))
 
                 data = {nodes, edges}

@@ -79,6 +79,7 @@ export default {
                 editorState.showModel = false
             },
             updateModel: (model) => {
+                // TAG: 自定义节点
                 formatNodeModel(model, props.activityConfig)
                 commander.commands.update(model)
             },

+/*
+ * @Date: 2023-10-27 09:29:59
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2023-11-13 17:25:41
+ * @FilePath: /vue-flow-editor/src/shape/activity.ts
+ * @Description: 文件描述
+ */
 import {BASE_COLOR} from "@/utils/styles";
-
+// TAG: 自定义节点
 export function registerActivity(G6) {
     G6.registerNode('activity', {
         options: {
@@ -7,14 +14,14 @@ export function registerActivity(G6) {
             stateStyles: {},
         },
         setState() {},
-        drawShape(cfg, group) {
+        drawShape(cfg, group) { // 名字叫drawShape或者draw好像都可以，文档两个名字都有
 
             let {text, desc, img, color} = cfg
             color = color || BASE_COLOR
             desc = desc || '无描述'
 
             const [width, height] = (cfg.size || [200, 80]) as [number, number]
-
+            // 定义节点里的图形，名字和配置可以自定义
             const shapes = {
                 keyShape: {
                     type: 'rect',
@@ -35,7 +42,7 @@ export function registerActivity(G6) {
                 desc: {
                     type: 'text',
                     attrs: {text: desc, x: height - width / 2, y: height * (5 / 8) - height / 2, fontSize: 12, textAlign: 'left', textBaseline: 'middle', fill: '#999'},
-                }
+                },
             }
 
             const addShapes = {}
@@ -55,7 +62,7 @@ export function registerActivity(G6) {
             })
 
             group.shapes = addShapes
-
+            // 好像是必须返回一个名字叫keyShape，用于寻找节点
             return keyShape
         },
         update(cfg, group) {
@@ -65,5 +72,5 @@ export function registerActivity(G6) {
             group.shapes.label.attr({text: cfg.text})
             group.shapes.desc.attr({text: cfg.desc})
         },
-    }, 'single-shape')
+    }, 'single-shape') // 继承了 single-shape 的基类
 }

+/*
+ * @Date: 2023-10-27 09:29:59
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2023-11-13 16:31:31
+ * @FilePath: /vue-flow-editor/src/shape/index.ts
+ * @Description: 文件描述
+ */
 import {registerAnchor} from "@/shape/anchor";
 import {registerEdge} from "@/shape/edge";
+// TAG: 自定义节点
 import {registerActivity} from "@/shape/activity";
 
 export function registerShape(G6) {

@@ -28,13 +28,14 @@ export function flatten(array) {
     return flattend;
 }
 
-export const DEFAULT_SIZE = {
+export const DEFAULT_SIZE = { // 不同类型的默认宽高
     rect: [130, 40],
     ellipse: [100, 50],
     diamond: [140, 50],
     circle: [80, 80],
     triangle: [80, 80],
     star: [80, 80],
+    // TAG: 自定义节点
     activity: [200, 80],
 }
 
@@ -77,17 +78,38 @@ export function formatPos(option: { x: number, y: number, size: [number, number]
         shape: option.shape,
     }
 }
-
+// TAG: 自定义节点
 export function formatNodeModel(model, activityConfig) {
     let {shape, size, activity} = model
 
+    /**
+     * {
+        "id": "123456",
+        "x": 590,
+        "y": 100,
+        "text": "广告宣传",
+        "desc": "通过广告短频宣传",
+        "activity": "advertisement", // 自定义节点的类型
+        }
+     */
+
     if (!!activity) {
         shape = 'activity'
     }
 
     model.size = size || DEFAULT_SIZE[shape]
 
+    /**
+     * advertisement: {
+        text: "广告宣传1",
+        desc: "通过广告宣传新品",
+        color: "#9283ed",
+        img: "https://cdn.ipadbiz.cn/oa/advertisement-node.svg"
+        }
+     */
+
     if (!!activity && !!activityConfig[activity]) {
+        // 把activity的配置挂到model上
         model.shape = 'activity'
         model.img = activityConfig[activity].img
         model.color = activityConfig[activity].color