因工作需要,需要做一个图分析和图编辑的编辑器,技术栈目前采用的是G6+Vue。
大概想做的是这么一个东西:
首先它支持图数据展示,然后支持拖拉拽的形式,最后支持保存这些拖拉拽之后的数据。
扩展1:图数据展示的节点可以定制化,比如,在画布上点击某个节点,可以改变它的节点类型、文本、颜色、大小,并且可以保存到数据库中。
扩展2:图数据展示的边可以定制化,比如,在画布上选择某条边,可以改变它的边类型、文本、颜色,并且可以保存到数据库中。
扩展3:支持节点与边之间进行相连,支持点击某个节点或者某个边,然后弹出alert框。
扩展4:支持添加分组、分组收缩时,也支持节点与分组之间的连线。
扩展5:支持节点、边的数据管理,支持创建一个空的图,然后拖拉拽自动生成一个图。
扩展6:支持一键设置数据源,自动生成图,支持数据源配置。
头部有一个toolbar 工具条,这里可以放点操作行为,什么放大、缩小等等等。
中间有 左侧面板,中心面板、右侧面板,左侧面板放上各种节点,中心面板就是画布,右侧面板就是属性面板加导航器(缩略地图+伸缩滑块)
底部有 版权声明,或者为之后某些需求留空间。
添加画布区域的代码,添加缩略地图以及伸缩滑块的功能。
让画布区域的节点支持拖拽、设置样式、文本,同时能够保存,刷新页面后再观看还是保存时的样子。
让节点与节点支持连线,可以设置节点与节点之间的线的文本,以及修改线的样式,同时能够保存,刷新后再观看还是保存时的样子。
点击画布,可以设置不同的布局,同时可以设置某些布局相关的属性。
让每一个节点和边都支持点击行为。
将所有不同类型的节点都添加到中间的左侧面板。
支持左侧面板的节点到画布中来。
最后支持保存。
支持一键添加数据源,支持json格式、url格式。