2021-7-2

70

写一下画布的监听事件。

listenGraph () {
      this.graph.on('cell:mouseenter', ({ cell }) => {
        if (cell.isNode()) {
          cell.addTools([
            {
              name: 'button-remove',
              args: {
                x: 0,
                y: 0,
                offset: { x: 5, y: 5 }
              }
            }
          ])
          const portid = cell.port.ports[0].id
          cell.setPortProp(portid, 'attrs/circle', { r: 4 })
        } else {
          cell.addTools('button-remove')
        }
      })
      this.graph.on('cell:mouseleave', ({ cell }) => {
        cell.removeTools()
      })
      this.graph.on('cell:click', ({ cell, e }) => {
        if (cell.isNode()) {
          this.createDiv({ cell, e })
        }
      })
    },

鼠标进入点和边的时候出现移除的叉叉，离开的时候取消出现。因为想在stenci里面的图像没有链接桩，将点放进画布的时候才出现链接桩，所以stencil创建实例的时候设置port的半径为0，mouseenter的时候半径为4。还有单击编辑名字的事件。