自建思维导图的技术方案

2022-12-12  本文已影响0人  思跃喵

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

一、节点

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

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

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

。。。当然不限于这些

二、线

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

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

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

三、上下级描述

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

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

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

四、锚点描述

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

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

五、行为描述

所有的节点右侧有一个(减号加圈圈)可以收起子节点,收起后显示子节点数

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

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

所有的节点可以单个选中,选中后:

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

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

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

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

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

六、基本的技术方案

界面分为两层:

第一层:div + position:relative 定位,将所有的节点摆出来

第二层: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]
]

七、难点

  1. 所有的 Item 摆到指定位置没有什么难度,修改样式即可
  2. 如何计算一个线的两个锚点的位置?
  3. 如何根据两个锚点的位置画出弧线?
  4. 关联线的两个调整锚点如何进行绘制?

八、总结

以上仅为开始做这项工作之前的一些思考,并非完整技术方案,仅作交流讨论用。

实际上已经有一些成熟的库可以调用,例如阿里的 X6图形库等。

但不妨碍我思考,毕竟思维导图的场景不一样,并不需要大量的轨迹算法。

说不定我自己写比学其他的库更快呢😂

上一篇下一篇

猜你喜欢

热点阅读