请问下g6-editor中的选中节点激活这个怎么实现？

[shengbeiniao]

尝试用g6实现，不过这个地方block了

  G6.registerNode('NodeECS', {
    draw(item){
      const group = item.getGraphicGroup();
      group.addShape('text', {
        attrs: {
          x: 30,
          y: 0,
          fill: '#333',
          text: 'ECS'
        }
      });
      // group.addShape('rect', {
      //   attrs: {
      //     x: -5,
      //     y: -20,
      //     width:90,
      //     height:100,
      //     stroke: '#13c2c2'
      //   }
      // });
      group.addShape('image', {
        attrs: {
          x: 0,
          y: 0,
          width: 80,
          height: 80,
          img: require('../assets/ecs.svg')
        }
      });
      return group;
    },
    anchor: [
      [0.5, 1],
      [0,5, 0]
    ],
  });


  graph.on('node:mouseenter', function(ev) {
    console.log(ev.item);
    graph.update(ev.item, {
       //此处不清楚如何变更，文档针对model没有准确说明  
    });
  });

[shengbeiniao]

已解决代码如下

  function transform(point){
      return [point.x,point.y]
    }
    G6.registerEdge('customEdge',{
      draw(item){
        console.log(item);
        let source=item.source.getAnchorPoints();
        let target=item.target.getAnchorPoints();
        console.log(source,target);
        const group = item.getGraphicGroup();
        let p1=transform(source[0]);
        let p4=transform(target[0]);
        let p2=[p1[0],p1[1]-20];
        let p3=[p4[0],p2[1]];
        console.log(p1,p2,p3,p4);
        group.addShape('polyline', {
          attrs: {
            points: [p1,p2,p3,p4],
            stroke: 'red'
          }
        });
        return group;
      }
    })

    G6.registerNode('customNode', {
      anchor: {
        type: 'circle',
        points: [
          [0.5, 0],
          [1, 0.5],
          [0.5, 1],
          [0, 0.5]
        ]
      },
      draw(item) {
        let x = 0,
          y = 0,
          width = 100,
          height = 100,
          r = 6;
        const group = item.getGraphicGroup();
        group.addShape('image', {
          attrs: {
            x: x + 5,
            y: x + 5,
            width: width - 10,
            height: width - 10,
            img: './ecs.svg'
          }
        });
        //激活状态
        if (item.model.status === 'active') {
          group.addShape('rect', {
              attrs: {
                x: x,
                y: y,
                width: width,
                height: width,
                stroke: 'black'
              }
            }),
            //上
            group.addShape('circle', {
              attrs: {
                x: (width - r) / 2,
                y: y,
                r: r,
                fill: '#91d5ff'
              }
            });
          //右
          group.addShape('circle', {
            attrs: {
              x: width,
              y: (height - r) / 2,
              r: r,
              fill: '#91d5ff'
            }
          });
          //下
          group.addShape('circle', {
            attrs: {
              x: (width - r) / 2,
              y: height,
              r: r,
              fill: '#91d5ff'
            }
          });
          //左
          group.addShape('circle', {
            attrs: {
              x: x,
              y: (height - y) / 2,
              r: r,
              fill: '#91d5ff'
            }
          });
        }
        return group;
      }
    });

    const graph = new G6.Graph({
      container: 'app',
      fitView: 'cc',
      width: window.innerWidth,
      height: window.innerHeight
    });

    graph.on('node:click', function (target) {
      //点击node，改变model
      graph.update(target.item, {
        status: 'active'
      })
    });

    graph.add('node', {
      id: 'a',
      x: 100,
      y: 100,
      shape: 'customNode'
    });

    graph.add('node', {
      id: 'b',
      x: 300,
      y: 300,
      shape: 'customNode',
      stroke: 'blue'
    });

    graph.add('edge', {
      source: 'a',
      target: 'b',
      size: 3,
      shape:'customEdge'
    });

    //处理拖动
    let node = 0;
    let dx = 0;
    let dy = 0;

    graph.on('node:dragstart', function (ev) {
      let item = ev.item;
      let model = item.getModel();
      node = item;
      dx = model.x - ev.x;
      dy = model.y - ev.y;
    });

    graph.on('node:drag', function (ev) {
      node && graph.update(node, {
        x: ev.x + dx,
        y: ev.y + dy
      });
    });