最近突發奇想，自己去實現一個思維導圖，因此思考總結了一下基本的技術方案
一、節點
中心主題節點：全框、背景色、字體大、不可為圖片
子主題節點：全框、背景色、字體中等、可以為圖片、鏈接等
正常節點：底線、無背景色、字體中等、可以為圖片、鏈接等
。。。當然不限于這些
二、線
關聯線：每個節點都可以發起描述，虛線，線中間有兩個點，弧線的方向
關聯線：有可能會覆蓋其他的節點和線，由中間兩個調整錨點進行調整
父子線：一級級下來的都是實線鏈接，均為起點到終點的圓弧線
三、上下級描述
所有的節點均可以創建無限的子節點。
中心主題節點 - 子主題節點 - 正常節點 - 正常節點。
任意節點可以新增無數的關聯線，鏈接到任一關聯節點。
四、錨點描述
所有的錨點都在節點右側（后期可以直接切換錨點方向），可以有無數的子節點。
關聯線的錨點在對方節點的方向上。
五、行為描述
所有的節點右側有一個（減號加圈圈）可以收起子節點，收起后顯示子節點數
所有的節點雙擊可以修改內容：圖片和鏈接單擊查看、雙擊修改
直接右鍵菜單有以下選中后的所有操作
所有的節點可以單個選中，選中后：
- 按Tab新增子節點在最后一個節點下，并自動聚焦于新的節點內容修改
- 按Enter新增兄弟節點在當前節點下，自動頂開下級節點并重繪，并自動聚焦于新的節點內容修改
- 按Delete|Backspace 刪除節點以及所有子節點，以及相關的線
- 雙擊修改，單擊選中（查看圖片|鏈接）鏈接可以給出提示
節點可以拖動修改位置，拖到哪個節點上即為哪個節點的子節點，所有的子節點跟隨并放置于最后
如果拖到沒有節點的位置，那就變成一個自由主題
所有的節點位置均為計算固定，不能自由拖動，以免造成誤解
所有的關聯線都可以被選中，此時顯示關聯線中間三分之一和三分之二的兩個拖動錨點
六、基本的技術方案
界面分為兩層：
第一層：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]
]
七、難點
- 所有的 Item 擺到指定位置沒有什么難度，修改樣式即可
- 如何計算一個線的兩個錨點的位置？
- 如何根據兩個錨點的位置畫出弧線？
- 關聯線的兩個調整錨點如何進行繪制？
八、總結
以上僅為開始做這項工作之前的一些思考，并非完整技術方案，僅作交流討論用。
實際上已經有一些成熟的庫可以調用，例如阿里的 X6圖形庫等。
但不妨礙我思考，畢竟思維導圖的場景不一樣，并不需要大量的軌跡算法。
說不定我自己寫比學其他的庫更快呢??
- 歡迎關注宮zhong號【思躍喵】與我交流
