chore: demo增加一些按钮，方便快速模拟测试场景

packages/g6/tests/demo/plugins/annotation.ts

@@ -1,10 +1,16 @@
 import { Graph, extend, Extensions } from '../../../src/index';
+import { Annotation } from '../../../src/stdlib/plugin';
 import type { TestCaseContext } from '../interface';
 
 const ExtGraph = extend(Graph, {
  plugins: {
  annotation: Extensions.Annotation,
  },
+ edges: {
+ 'polyline-edge': Extensions.PolylineEdge,
+ 'cubic-edge': Extensions.CubicEdge,
+ 'quadratic-edge': Extensions.QuadraticEdge,
+ },
 });
 
 export default (context: TestCaseContext) => {
@@ -41,6 +47,54 @@ export default (context: TestCaseContext) => {
  layout: {
  type: 'grid',
  },
+ // edge: {
+ // // type: 'cubic',
+ // type: 'polyline-edge',
+ // keyShape: {
+ // endArrow: true,
+ // routeCfg: {
+ // /**
+ // * 目前支持正交路由 'orth' 和地铁路由 'er'
+ // */
+ // // name: 'er',
+ // /**
+ // * 是否开启自动避障，默认为 false
+ // * Whether to enable automatic obstacle avoidance, default is false
+ // */
+ // enableObstacleAvoidance: true,
+ // },
+ // /**
+ // * 拐弯处的圆角弧度，默认为直角，值为 0
+ // * The radius of the corner rounding, defaults to a right angle
+ // */
+ // // radius: 20,
+ // /**
+ // * 拐弯处距离节点最小距离, 默认为 2
+ // * Minimum distance from the node at the corner, default is 5.
+ // */
+ // // offset: 0,
+ // /**
+ // * 控制点数组，不指定时根据 A* 算法自动生成折线。若指定了，则按照 controlPoints 指定的位置进行弯折
+ // * An array of control points that, when not specified, automatically generates the bends according to the A* algorithm. If specified, bends are made at the position specified by controlPoints.
+ // */
+ // // controlPoints: [],
+ // },
+ // },
+ edge: {
+ type: 'line-edge',
+ // type: 'cubic-edge',
+ // type: 'quadratic-edge',
+ keyShape: {
+ endArrow: true,
+ },
+ labelShape: {
+ text: {
+ fields: ['id'],
+ formatter: (model) => model.id,
+ },
+ },
+ labelBackgroundShape: {},
+ },
  node: {
  labelShape: {
  text: {
@@ -64,6 +118,55 @@ export default (context: TestCaseContext) => {
  ],
  data: graphData,
  });
+
+ const plugin = (graph as any).pluginController.getPlugin('annotation') as Annotation;
+
+ const body = document.body
+ // document.querySelector<HTMLElement>('#container')!.style.border = '1px solid #ccc'
+ const setAnnotationBtn = document.createElement('button')
+ setAnnotationBtn.innerHTML = 'setAnnotation'
+ body.append(setAnnotationBtn)
+ let itemIndex = 0
+ setAnnotationBtn.addEventListener('click', e => {
+ const id = graph.getAllNodesData()[itemIndex].id
+ plugin.showAnnotation({ id })
+ itemIndex++
+ })
+ const collapseBtn = document.createElement('button')
+ collapseBtn.innerHTML = 'collapse Annotation'
+ body.append(collapseBtn)
+ collapseBtn.addEventListener('click', e => {
+ Object.values(plugin.cardInfoMap).forEach(card => {
+ card.collapse(!card.config.collapsed)
+ })
+ })
+ const changeDataBtn = document.createElement('button')
+ changeDataBtn.innerHTML = 'change Data'
+ body.append(changeDataBtn)
+ changeDataBtn.addEventListener('click', e => {
+ const deleteNodes = ['node1', 'node2']
+ const newData = {
+ nodes: graphData.nodes.map(n => {
+ return { ...n }
+ }).filter(n => !deleteNodes.includes(n.id)), edges: graphData.edges.map(e => {
+ return { ...e }
+ }).filter(e => !deleteNodes.includes(e.source) && !deleteNodes.includes(e.target))
+ }
+ graph.changeData(newData)
+ })
+ const resetBtn = document.createElement('button')
+ resetBtn.innerHTML = 'reset Data'
+ body.append(resetBtn)
+ resetBtn.addEventListener('click', e => {
+ graph.changeData(graphData)
+ });
+
 
+ graph.hooks.destroy.tap(e => {
+ body.removeChild(setAnnotationBtn)
+ body.removeChild(collapseBtn)
+ body.removeChild(changeDataBtn)
+ body.removeChild(resetBtn)
+ })
  return graph;
 };