Table of Content
Init
Bootstraped with npx create-react-app
App run with npm start
SCSS setting with npm install scss-loader node-scss --save-dev
DAG datastructure inspired by here
Usage
see demo here
Give vertex name and it's incomming/outgoing vertices' name, to get the graph (DAG, or Directedd Acyclic Graph) that show the direction flow
Features to build
| Features | Problems | note |
|---|---|---|
| To support many times of vertices creation | state lost after re-input form | done -- by hoisting state |
| SVG direction arrow render | not in right place | fixxed -- by CSS position absolute and parent's node's position relative |
| drag-and-drop on vertex and svg arrow | 1.svg arrow not drag-and-drop with divs | 1. DrawGraph.js useRef → forward down to DrawArrow.js, which render JSX → forward that arrows ref to DrawVertex.js → access arrows ref DOMin DrawVertex.js |
| ㄴ | 2.vertex move randomly when dragging | See Issue2 REMEMBER: setState works like asynchronous function SeeMore |
| ㄴ | 3.add vertex and the dragged ones go back to default place | See Issue4's 問題一 & 問題三 零件更新時序問題 |
| ㄴ | 4.Back 2 default graph btn and then drag -- leads to misplacement | TBD: isDefaultGraph to be contextAPI, passed to useDrag. So that dragging on defaultGraph would re-init previous dragged position state |
| Throw ERROR when cycle DAG |
（參考） DAG 物件實例 graph
Directedd Acyclic Graph-
舉例，按照以下順序創建 vertex ，箭頭 → 表示彼此流向關係: Incomming → Vertex → Outgoing Benson Alice Alice Catherine Ben Benson Catherine Eva Benson David [ Ben, Flora ] Catherine [ David, George ] -
V.1 See example below
-
graph.verticesObject byconsole.table():
┌───────────┬─────────────┬───────────────────────────────────────────┬────────────────────────────────┬─────────────┬───────┐
│ (index) │ name │ incoming │ incomingNames │ hasOutgoing │ value │
├───────────┼─────────────┼───────────────────────────────────────────┼────────────────────────────────┼─────────────┼───────┤
│ Benson │ 'Benson' │ { Ben: [Object], Eva: [Object] } │ [ 'Ben', 'Eva' ] │ true │ null │
│ Alice │ 'Alice' │ { Benson: [Object] } │ [ 'Benson' ] │ true │ null │
│ Catherine │ 'Catherine' │ [Object] │ [ 'Alice', 'Benson', 'Flora' ] │ true │ null │
│ Ben │ 'Ben' │ {} │ [] │ true │ null │
│ David │ 'David' │ { Benson: [Object], Catherine: [Object] } │ [ 'Benson', 'Catherine' ] │ false │ null │
│ Eva │ 'Eva' │ {} │ [] │ true │ null │
│ George │ 'George' │ { Catherine: [Object] } │ [ 'Catherine' ] │ false │ null │
│ Flora │ 'Flora' │ {} │ [] │ true │ null │
└───────────┴─────────────┴───────────────────────────────────────────┴────────────────────────────────┴─────────────┴───────┘graph.rankObject byconsole.table():
┌───────────┬────────┐
│ (index) │ Values │
├───────────┼────────┤
│ George │ 0 │
│ David │ 0 │
│ Catherine │ 1 │
│ Flora │ 2 │
│ Alice │ 2 │
│ Benson │ 3 │
│ Eva │ 4 │
│ Ben │ 4 │
└───────────┴────────┘