事件-系统,这个是在进阶实践里面有讲

节点

1 .节点被选中
2 .节点取消选中
3 .添加节点,拖拽添加节点.
4 .删除节点
5 .节点发生变化(属性,位置)

边

1 .添加边
2 .删除边
3 .连接边
4 .边的事件不能回退??

桩

1 .作为source出发
2 .作为target接收
3 .桩上连接的点被删除
4 .添加连接桩

数据

1 .操作完的节点数据如何保存,下次应该是直接拿保存的数据渲染出来节点吧.

css问题

1 .flex布局,上下,上面高度固定,下面取自适应.左右要加width:100%,height是可以flex:1自动取的

优化操作

1 .边的连接优化

1 .输出桩只能连接输入桩
2 .可以连接的高亮展示

2 .

连接桩问题

1 . validateConnection函数:移动边的时候判断连接是否有效,如果返回false,单鼠标放开的时候,不会连接到当前元素,否则会连接到当前元素

1 .核心问题:如果是新增一条边,我从一个桩开始拖拽的时候,还没有连接到目标节点,这时这个回调函数就已经有了一个目标节点的数据返回targetMagnet就已经有值了.也许是推荐能否连接那里的问题,总之,可能这个回调可能和我想要的不符合,想要的应该是线段拖拽完成,已经有了节点数据,将要绘制到图之前的,这时来做最后的判断才是对的
2 .触发时机:点击开始桩,拖拽线的时候触发,然后每次拖拽的线条连接到任何桩点的时候,并不是放开的时候才算
3 .这里走的一些验证可以时没放的时候,拖拽地时候碰触到的时候的验证规则

2 .validateEdge:停止拖拽的时候根据validateEdge返回值来判断边是否生效,如果返回值是false,这个边会被清除.那这里还是会走先生成,然后再删除的逻辑吧.经过实际测试,这个是满足的.
3 .validateMagnet:点击magnet时根据validateMagnet返回值来判断是否新增边,触发时机是magnet被按下,如果返回是false,则没有任何反应,如果返回true,会在当前magnet创建一条新的边
4 .如果这三种都不行的话,最后就需要自定义事件了...

生成的id如何保证唯一呢

1 .有大量的边唯一id,桩唯一id,节点唯一id.一定要保证所有的都不一样,或者说同一类的一定不能有一样的,不然就爆炸https://www.cryptosys.net/pki/uuid-rfc4122.html.是这个规范,要查看这个会不会重复.128 个随机生成的位，在某些位置有 6 个位设置为特定值
2 .https://juejin.cn/post/6864199183957262350
3 .其他方式 nanoid
4 .js自带:URL.createObjectURL(new Blob()).substr(-36)
5 .他的算法

export function uuid(): string {
  // credit: http://stackoverflow.com/posts/2117523/revisions
  // return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
  //   const r = (Math.random() * 16) | 0
  //   const v = c === 'x' ? r : (r & 0x3) | 0x8
  //   return v.toString(16)
  // })

  let res = ''
  const template = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'

  for (let i = 0, len = template.length; i < len; i += 1) {
    const s = template[i]
    const r = (Math.random() * 16) | 0
    const v = s === 'x' ? r : s === 'y' ? (r & 0x3) | 0x8 : s
    res += v.toString(16)
  }
  return res
}