深圳前端兼职程序员外包

需求描述

一、节点样式：
1. 顶层节点与下层节点颜色样式不同；
2. 特定节点会带有一个特定图标。

二、节点树布局规则：
1. 一块canvas画布支持摆放多个树状结构（节点树），树按行排布，有多行；
2. 单个树内部节点居中；
3. 多个树整体靠左排列。

三、节点相关交互：
1.节点文字编辑：双击节点可编辑文字，节点宽固定，高度随着输入文字的增多而增加（无上限）；
2.常规方式生成子节点：鼠标点击选中一个节点，右键菜单/点击新建子节点按钮/回车按钮，生成一个该节点的子节点；
3.拖拽节点吸附方式生成子节点：用鼠标拖拽节点，靠近目标节点时会提示吸附成功的效果，若吸附成功，该节点及其全部子节点作为整体成为目标节点的子节点。若未吸附成功就不发生任何改变；

四、连线功能：
1.非父子关系（因果关系）连线：鼠标点击选中一个节点，点击一个连线按钮，会生成一根线，通过该线连接到其他节点。
注：父子节点间的连线，在生成子节点时自动绘制，不能通过手动连线。

五、整体布局：
1. 一共四行树（每行多颗树），行的高度随树的层级增加而增加，四行整体超出页面会有滚动条；
2. 行的宽度，随着树的增加而增加，超出页面宽度会有滚动条，整体画布宽度与最宽的行保持一致。
3. 在特定行空白区域右键菜单新建/双击左键，会新增节点，节点出现在鼠标停留的行。

六、全屏和缩放
1. 在画布中点击全屏，全屏下的画布初始高和全屏前保持一致。获取可视化窗口的宽，如果大于画布的宽，画布的宽变为可视化窗口的100%宽。反之画布的宽大于可视化窗口的宽，会产生滚动条。
2. 放大：初始画布是1.0倍，按比例放大，是整个画布区域放大（四行每行区域宽度不变)；缩小：按比例缩小，是整个画布区域缩小（四行每行区域宽度不变，且每行区域有最小高度）。

七、撤销、恢复
1. 无操作时，撤销、恢复是灰色的，无法使用的；
2. 画布如果有新操作时，撤销变成黑色可使用。点击了撤销，恢复才生效，撤销了几步，恢复就有多少步；
3. 撤销恢复堆栈最多保留10个操作。