feat: 关系图普通组件

src/components/ChartGraphG6/index.vue

@@ -1,19 +1,6 @@
 <template>
   <div>
     <div ref="chartGraphG6Dom" :style="{ height: height, width: width }"></div>
-    <button @click="actions['Enable/Disable Node States'].Breathing()">
-      Breathing()
-    </button>
-    <button @click="actions['Enable/Disable Node States'].Scaling()">
-      Scaling()
-    </button>
-
-    <button @click="actions['Enable/Disable Edge States'].Growing()">
-      Growing()
-    </button>
-    <button @click="actions['Enable/Disable Edge States'].Running()">
-      Running()
-    </button>
   </div>
 </template>
 
@@ -353,24 +340,10 @@ function initChart() {
     container: chartGraphG6Dom.value,
     height: chartGraphG6Dom.value.clientHeight,
     width: chartGraphG6Dom.value.clientWidth,
-    // fitCenter: false,
+    fitCenter: true,
     modes: {
       default: ['drag-canvas', 'zoom-canvas', 'drag-node'], // 允许拖拽画布、放缩画布、拖拽节点
     },
-    // // 布局 力向吸引
-    // layout: {
-    //   type: 'force', // 指定为力导向布局
-    //   preventOverlap: true, // 防止节点重叠
-    //   linkDistance: 100, // 指定边距离为100
-    // },
-    // // 插件
-    // plugins: [
-    //   {
-    //     // 避免文本过于密集导致的视觉混乱
-    //     type: 'lod-controller',
-    //     disableLod: true,
-    //   },
-    // ] as any,
     // 全局节点 矩形
     defaultNode: {
       type: 'rect',
@@ -401,161 +374,12 @@ function initChart() {
         lineWidth: 1,
       },
     },
-    // // 节点状态
-    // nodeState: {
-    //   breathing: {
-    //     haloShape: {
-    //       opacity: 0.25,
-    //       lineWidth: 20,
-    //       visible: true,
-    //     },
-    //     keyShape: {
-    //       radius: 4,
-    //     },
-    //   },
-    //   scaling: {
-    //     keyShape: {
-    //       width: 100,
-    //       height: 60,
-    //     },
-    //   },
-    // } as any,
-    // edgeState: {
-    //   growing: {
-    //     keyShape: {
-    //       lineWidth: 2,
-    //       lineDash: ['100%', 0],
-    //     },
-    //   },
-    //   running: {
-    //     keyShape: {
-    //       lineWidth: 2,
-    //       lineDash: [2, 2],
-    //       //  TODO: lineDashOffset
-    //     },
-    //   },
-    // },
   });
 
   graph.data(data); // 加载数据
   graph.render(); // 渲染
-
-  graph.on('node:click', (e: any) => {
-    const s = graph.getItemState(e.itemId);
-    console.log(s);
-    // graph.updateData('node', {
-    //   id: e.itemId,
-    //   data: {
-    //     cluster: Math.random(),
-    //     keyShape: {
-    //       r: 32 + Math.random() * 10 - 5,
-    //       lineWidth: 6 + Math.random() * 6 - 3,
-    //       stroke: '#000',
-    //     },
-    //     labelShape: {
-    //       fontWeight: 700,
-    //     },
-    //   },
-    // });
-  });
-
-  graph.on('node:pointerenter', (e: any) => {
-    const { itemId } = e;
-    if (graph.getItemState(itemId, 'breathing')) {
-      graph.setItemState(itemId, 'breathing', false);
-    } else {
-      graph.setItemState(itemId, 'scaling', false);
-      graph.setItemState(itemId, 'breathing', true);
-    }
-    // graph.updateData('node', {
-    //   id: itemId,
-    //   data: {
-    //     label: `after been hovered ${itemId}`,
-    //     labelShape: {
-    //       fill: '#0f0',
-    //     },
-    //   },
-    // });
-  });
-
-  graph.on('node:pointerleave', (e: any) => {
-    const { itemId } = e;
-    if (graph.getItemState(itemId, 'breathing')) {
-      graph.setItemState(itemId, 'breathing', false);
-    } else {
-      graph.setItemState(itemId, 'scaling', false);
-      graph.setItemState(itemId, 'breathing', true);
-    }
-    // graph.updateData('node', {
-    //   id: itemId,
-    //   data: {
-    //     label: 'label before been hovered',
-    //     labelShape: {
-    //       fill: '#000',
-    //     },
-    //   },
-    // });
-  });
 }
 
-const actions = {
-  'Enable/Disable Node States': {
-    Breathing: () => {
-      graph.getAllNodesData().forEach((node: any) => {
-        if (graph.getItemState(node.id, 'breathing')) {
-          graph.setItemState(node.id, 'breathing', false);
-        } else {
-          graph.setItemState(node.id, 'scaling', false);
-          graph.setItemState(node.id, 'breathing', true);
-        }
-      });
-    },
-    Scaling: () => {
-      graph.getAllNodesData().forEach((node: any) => {
-        if (graph.getItemState(node.id, 'scaling')) {
-          graph.setItemState(node.id, 'scaling', false);
-        } else {
-          graph.setItemState(node.id, 'breathing', false);
-          graph.setItemState(node.id, 'scaling', true);
-        }
-      });
-    },
-  },
-  'Enable/Disable Edge States': {
-    Growing: () => {
-      graph.getAllEdgesData().forEach((edge: any) => {
-        if (graph.getItemState(edge.id, 'growing')) {
-          graph.setItemState(edge.id, 'growing', false);
-        } else {
-          graph.setItemState(edge.id, 'running', false);
-          graph.setItemState(edge.id, 'growing', true);
-        }
-      });
-    },
-    Running: () => {
-      graph.getAllEdgesData().forEach((edge: any) => {
-        if (graph.getItemState(edge.id, 'running')) {
-          graph.setItemState(edge.id, 'running', false);
-        } else {
-          graph.setItemState(edge.id, 'growing', false);
-          graph.setItemState(edge.id, 'running', true);
-        }
-      });
-    },
-  },
-};
-
-// watch(
-//   () => props.option,
-//   val => {
-//     if (val) {
-//       nextTick(() => {
-//         initChart();
-//       });
-//     }
-//   }
-// );
-
 onMounted(() => {
   nextTick(() => {
     initChart();