# 心智圖模組
[toc]
## 定義
- 節點: node
- 父節點(parent) <-> 子節點(child)
- 兄弟節點(sibling)
- 分支: branch
- 畫布: 心智圖的背景，放置node和branch的物件

## 參考資源連結
:::info
:::spoiler 建議時常點開看
- [js-mindmap](https://github.com/dundalek/markmap)
- 使用d3.js
- [mindmaps](https://github.com/drichard/mindmaps)
- 使用canvas
- [範例網站](https://www.mindmaps.app/)
- [Vue3-mindmap](https://github.com/hellowuxin/vue3-mindmap)
- 使用d3.js
- [Live demo](https://5xin.xyz/vue3-mindmap/)
- 幾乎完成基本的操作，可以直接致敬
- Vue需要 @eating31 幫忙
- [butterfly](https://github.com/alibaba/butterfly)
- 提供一堆圖的模板
- Vue + JavaScript
- [html拖放API](https://developer.mozilla.org/zh-TW/docs/Web/API/HTML_Drag_and_Drop_API)
- [html5 拖放](https://web.dev/drag-and-drop/)
- 需要為每個node設定EventListener
- 列舉: dragstart、drag、dragenter、dragleave、dragover、drop、dragend
- [xPre產品需求文檔](https://docs.google.com/document/d/1wOSjc7uRZtHREoFlx1svOnf-vkIcG-vjx3R-79zJ_XE/edit#)
- 完整功能撰寫
- 部分內容擷取來源
:::

## Vue3-MindMap研究

### 資料庫基礎方法


## 待解決事項
### API格式
:::info
:::spoiler 完整請點開


:::

### 顯示
- [x] 用relation函式拉出所有關係節點
- [x] 用(node, arrow, children)的橫向切割成功顯示心智圖
- ==需要調整==: 是否有節點摺疊需求?
- ==嚴重問題==: branch連線怎麼畫
- 須具備知識: SVG!!!
- 關鍵字: html svg 教學
- 使用函式庫: d3.js

### 操作
- node：
- 新增子node：tab
- 新增兄弟node：enter
- 刪除node：在當前node按下delete
- 滑鼠操作
- node:
- 編輯node內容：在當前node再次點擊(or 同個node點兩下)
- 當前node屬性設定：在當前node右鍵，游標旁出現設定menu
- 在B node新增A node為child node：拖曳A node至B node上方
- 畫布:
- 放大/縮小：滑鼠滾輪 or 畫布角落有可以設定放大倍率的拖曳條
- Root node螢幕置中：畫布角落有可以置中的Root置中鈕
- 自動置中模式(點擊A node => 螢幕畫面切換為A node在正中央)：畫布角落有可以置中的自動置中鈕

### 進階
- 關係線
- 顯示: 兩個node拉線，線上顯示關係文字
- 問題
- 要避開其他node該怎麼拉?
- 關係文字顯示在心智圖的位置?
- 簡報上如何顯示?
- 總結線
- 
- 涵蓋多節點的關係總結
- 只能放在leaf node之後
- 如何作為額外的node加入?視為node的變體?