训练营课程计划

熟悉官方 API

• 使用内置节点绘制出静态思维导图
• 写出你对 G6 使用流程的理解(如何初始化, 渲染, 更新等)
• 写出如何对 G6 绘制后进行鼠标, 键盘事件监听伪代码
• 写出画布监听拖拽事件伪代码 要求: 当鼠标点击到节点时才触发监听, 需要改变鼠标形状, 拖拽时需同步更新当前节点的位置

自定义节点

• 需要支持节点标签文案, 添加图标
• 图标支持点击展开收缩
• 复杂自定义节点: 要求: 需要支持显示多行文字, 每行文字可以设置不同的颜色, 字体大小等样式, 而且超出指定字符长度自动截取显示省略号

扩展内置边

• 使用树形扩展内置边
• 支持添加/编辑文案备注
• 需要支持开口方向设置 要求: 需结合鼠标事件, 给边添加 hover 和选中状态, 选中时 hover 不能生效

绘制简易脑图

• 写出控制面板, 左侧为节点类型, 上方为颜色, 字体大小等样式控制按钮
• 绘制出带弧度的边
• 支持开口方向设置
• 水平节点的连边绘制成直线
• 结合前面的课程, 对节点添加事件监听, 按下 enter 键出现输入框更改节点文案, 按下 tab 键在该节点下创建子节点并更新到图上