自建思维导图的技术方案

最新推荐文章于 2024-07-05 14:58:38 发布

我码玄黄

最新推荐文章于 2024-07-05 14:58:38 发布

阅读量191

点赞数

分类专栏：思维的火花文章标签： html 前端

本文链接：https://blog.csdn.net/qq_30333063/article/details/128290528

版权

思维的火花专栏收录该内容

33 篇文章 1 订阅

订阅专栏

最近突发奇想，自己去实现一个思维导图，因此思考总结了一下基本的技术方案

一、节点

中心主题节点：全框、背景色、字体大、不可为图片

子主题节点：全框、背景色、字体中等、可以为图片、链接等

正常节点：底线、无背景色、字体中等、可以为图片、链接等

。。。当然不限于这些

二、线

关联线：每个节点都可以发起描述，虚线，线中间有两个点，弧线的方向

关联线：有可能会覆盖其他的节点和线，由中间两个调整锚点进行调整

父子线：一级级下来的都是实线链接，均为起点到终点的圆弧线

三、上下级描述

所有的节点均可以创建无限的子节点。

中心主题节点 - 子主题节点 - 正常节点 - 正常节点。

任意节点可以新增无数的关联线，链接到任一关联节点。

四、锚点描述

所有的锚点都在节点右侧（后期可以直接切换锚点方向），可以有无数的子节点。

关联线的锚点在对方节点的方向上。

五、行为描述

所有的节点右侧有一个（减号加圈圈）可以收起子节点，收起后显示子节点数

所有的节点双击可以修改内容：图片和链接单击查看、双击修改

直接右键菜单有以下选中后的所有操作

所有的节点可以单个选中，选中后：

按Tab新增子节点在最后一个节点下，并自动聚焦于新的节点内容修改
按Enter新增兄弟节点在当前节点下，自动顶开下级节点并重绘，并自动聚焦于新的节点内容修改
按Delete|Backspace 删除节点以及所有子节点，以及相关的线
双击修改，单击选中（查看图片|链接）链接可以给出提示

节点可以拖动修改位置，拖到哪个节点上即为哪个节点的子节点，所有的子节点跟随并放置于最后

如果拖到没有节点的位置，那就变成一个自由主题

所有的节点位置均为计算固定，不能自由拖动，以免造成误解

所有的关联线都可以被选中，此时显示关联线中间三分之一和三分之二的两个拖动锚点

六、基本的技术方案

界面分为两层：

第一层：div + position：absolute 定位，将所有的节点摆出来

第二层：canvas|svg，根据所有的节点及边计算线，然后画出来

基本数据结构：

// 单个节点数据
item: MindMapItem
	id:UUID(),
	content:String,
	type: ‘text’|‘image’|’link’  // 不仅是类型，同时也是组件，方便以后增加其他的类型进来
	level:Number // 计算值级数，用于标识 主题、子主题等
	children:[MindMapItem];

// 单个关联线数据
relationLine: RelationLine
	from:Item1.id,
	to:item2.id,
	firstPoint:Position , // 拐弯的第一个点
	secondPoint: Position, // 拐弯的第二个点

// 整体数据
mindmap:[
	items:[MindMapItem]
	relations:[RelationLine]
]