💫
DAG生成ツールを作ってみたので操作方法をまとめる
DAGを作れるアプリの機能と操作についてまとめてみました
よかったら使ってみてください
・素材ページ pycetra.com/raw
・サンプル一覧 pycetra.com
機能一覧
| 挙動 | 操作 | 条件 | before | after |
|---|---|---|---|---|
| 新規region | 文字列編集 | rootのnodeを対象とする |  |
 |
| 移動region | drag and drop | position regionがあること |  |
 |
| 移動node | drag and drop | position regionがあること |  |
 |
| 新規link | enter | 2つのnodeを選択済み |  |
 |
| css編集 | 文字列編集 | css region内である |  |
 |
基本操作一覧
| 挙動 | 操作 | before | after |
|---|---|---|---|
| 新規 node | click |  |
 |
| 新規 node （深いlevel） | tab |  |
 |
| 新規 node （同じlevel） | enter |  |
 |
| 削除 node | delete |  |
 |
| 選択 | click |  |
 |
| 追加選択 | shift + click | |
|
| 選択解除 | esc |  |
 |
| 文字列編集 | space / ctrl + i |  |
 |
| 文字列更新 | shift + enter |  |
 |
| 拡大/縮小 | ブラウザ標準の方法 |  |
 |
お気に入りのCSS
- #css
- .select circle{stroke:blue;stroke-width:10px;}
- circle {r:10;fill:black;}
- .polyarrow {display:none}
- .linearrow {display:none}
- #parror001{display:none}
- text{font-family: Meslo, Monaco,font-size: 15px;fill: black;transform: translate(15px, 0px);dominant-baseline: middle;}
- .position text{font-size:20px}
- .markdownpath path {display:block;stroke-width:10px;stroke:rgba(1,1,1,0.1);}
Discussion