Untangled_pasta_trees How_to_use

[Untangled_pasta_trees](https://untangled-pasta-trees.herokuapp.com/)
[Untangled_pasta_trees、仕様、技術、詳細](https://qiita.com/yoshidashota0328/items/43ac07100e1b06ff435a)

# サイト概要
### ツリー構造でカテゴリー分けできるマークダウン形式のノートです。
### ユーザー登録すればツリーが作成できます。
### メールアドレスは適当でも大丈夫です！
### ただ、パスワードを忘れた場合にパスワードリセットメールが届きません！
### 登録しなくても公開されたツリーはAll_treesから閲覧することが出来ます。
### ツリーの内容はデフォルトで非公開設定ですが、必要であれば公開することもできます。
#　用語解説
### tree = 1画面に表示されたツリー構造のノート全体を指す言葉。
### leaf = マークダウン入力ができる１要素。ツリー構造の葉っぱ１枚を指す。(用語の使い分けがめんどうだったのでnodeもleafって呼んでます。)
### leaf_ID = leafの頭についている番号。
### All_trees = 公開されたtreeが一覧表示されるページ。
### parent_ID = leafの親になるleafのID。これを起点に相対座標で子leafが配置される。
### My_page = ログインすると右上に表示されるUserから飛べるページ。自分の作ったtreeが表示される。
# leafの生やし方
### ボタンを押すと新しいleafが生えます。
### leafの頭についている番号がleaf_IDです。
### treetop(root)のIDは１番です。
[![Image from Gyazo](https://i.gyazo.com/8f1a0854812d2efb856eeef514f6e646.gif)](https://gyazo.com/8f1a0854812d2efb856eeef514f6e646)
# treeの移動
### 全てのleafをドラッグでtreeを一括で移動できます。
### treeの座表はtreetopが管理してるので移動後はtreetopでsaveしてください。
### 画面右側はどんどんキャンバスが広がりますが、左側は広がっていきません。
### 左側のleafが画面外に出る時はtree全体を右側に移動してください。
[![Image from Gyazo](https://i.gyazo.com/e55a85c0bce5f5c4020107f7a326af67.gif)](https://gyazo.com/e55a85c0bce5f5c4020107f7a326af67)
# 拡大縮小
### ブラウザの機能をそのまま使います。



### 拡大するには、「option」「command」「=」(等号) の 3 つのキーを押します。

### 縮小するには、「option」「command」「-」(マイナス記号) の 3 つのキーを押します。

### 自分の環境では「command 」「 shift」 「 +」(プラス)で拡大
### 「command」「 -」(マイナス)で縮小になってます。
　
[![Image from Gyazo](https://i.gyazo.com/fd7b455e8d0886f6848afc9615a73c60.gif)](https://gyazo.com/fd7b455e8d0886f6848afc9615a73c60)
# leafの移動
### leafをクリックして出た吹き出しは上からparent_leaf_ID、x座表、y座表になっています。
### parent_IDは親になっているleafのタイトル上についている番号です。
### そこから生えているleafということがわかります。
### x座表、y座表はparent_leafの相対座標になっています。
### x座標を0にするとparent_leafの直下に移動できます。
[![Image from Gyazo](https://i.gyazo.com/399cff36da514188c8e67ddbd2d6517f.gif)](https://gyazo.com/399cff36da514188c8e67ddbd2d6517f)
### x座標に -(マイナス)を入れると親の左側に移動します。
[![Image from Gyazo](https://i.gyazo.com/874aead340cf4d5c1dd5d57754e4e8ab.gif)](https://gyazo.com/874aead340cf4d5c1dd5d57754e4e8ab)
### parent_IDを入れかえると別のparent_leafの下に子要素ごと移動します。
[![Image from Gyazo](https://i.gyazo.com/b662ca9199c423a680e2e9c6ae71374b.gif)](https://gyazo.com/b662ca9199c423a680e2e9c6ae71374b)

### 吹き出しを小さいままで操作する時はleaf要素を経由して吹き出しにマウスオーバーしてください。
### (仕様に慣れないうちは吹き出しがパカパカしてイライラするかもしれません)

[![Image from Gyazo](https://i.gyazo.com/49758e53b7605f9641b9729f9530d7ca.gif)](https://gyazo.com/49758e53b7605f9641b9729f9530d7ca)
　
# マークダウン 入力
### 吹き出しにマウスオーバーすることでマークダウン 入力欄が開きます。
[![Image from Gyazo](https://i.gyazo.com/7875340b1fbece2cd57d0e47f80fbf31.gif)](https://gyazo.com/7875340b1fbece2cd57d0e47f80fbf31) 
### 最初に開いた時は空白に見えますが、入力欄をクリックすると入力された内容が見えます。
 
### 目のマークをクリックすることでエディターモードと表示モードが切り替わります。
	
### 拡大ボタンで全画面表示することもできます。

### 入力後は吹き出し下にあるsaveボタンでsaveしてください。

### (現在バグで吹き出し左上の吹き出しを閉じるボタンでもsaveできます...)

### またテキストのドラッグで選択する動作がウィンドウ表示だとできません。

### (ツリーの移動判定になってしまいます、全画面表示だとドラッグ選択可能です。)

### (でも、全画面だとsaveボタンがないので戻らないとsaveできない...)

### 5秒毎に自動でバックアップを取ってくれますが、DBに保存するためにちゃんとセーブしてください。

### またバックアップの性質上、一度消したleafをもう一度作り直した際にバックアップから復元されることがあります。

### 文章を全て削除して5秒待つことでバックアップを削除できます。

### 画面上部のBODY SEARCHから検索できない文章はまだDBに保存できていません。


[![Image from Gyazo](https://i.gyazo.com/e7ab59d4ab1e0f2a77ac9bbd06c7dee6.gif)](https://gyazo.com/e7ab59d4ab1e0f2a77ac9bbd06c7dee6) 

# マイページ
### Userをクリックでマイページに入れます。
### treeの編集、表示非表示、削除ができます。
[![Image from Gyazo](https://i.gyazo.com/df9a776551486e5a35170e5a7fda231d.gif)](https://gyazo.com/df9a776551486e5a35170e5a7fda231d)

### treeのEditを押すとtitle,descriptionが編集できます。
[![Image from Gyazo](https://i.gyazo.com/843af5d2bb0c0a8f38a752db3cf9a5fc.gif)](https://gyazo.com/843af5d2bb0c0a8f38a752db3cf9a5fc)
### deleteボタンでtreeを削除できます。
[![Image from Gyazo](https://i.gyazo.com/c088273cf8cf094c9c26701e1d483c5b.gif)](https://gyazo.com/c088273cf8cf094c926701e1d483c5b)
### privateなtreeをワンクリックで公開できます。
### ワンクリックで非公開にすることもできます。
### デフォルトは非公開になってます。 
[![Image from Gyazo](https://i.gyazo.com/efaecea6bf676cd517ab4c10b672eebb.gif)](https://gyazo.com/efaecea6bf676cd517ab4c10b672eebb)
# 検索機能
### body search欄から本文をLike検索できます。
[![Image from Gyazo](https://i.gyazo.com/47648a8298ec669d48fb2d501e8cbf4b.gif)](https://gyazo.com/47648a8298ec669d48fb2d501e8cbf4b)

# すべてのleaf移動入力欄
### 左上の入力欄からすべてのleafを個別に移動できます。
### 最初にleaf-IDを入力します。
### その後上からparent-ID、x座表、y座表となっている部分を変更することで移動できます。
[![Image from Gyazo](https://i.gyazo.com/52fff908ff057107c6a0117d0d8ad370.gif)](https://gyazo.com/52fff908ff057107c6a0117d0d8ad370)

# パスワードリセット
### LoginページのForgot_password?をクリック
### メールアドレスを入力するとメールが送られます。
[![Image from Gyazo](https://i.gyazo.com/fb1c0633c0bb627c522789a36fa559c2.gif)](https://gyazo.com/fb1c0633c0bb627c522789a36fa559c2)
### メールに記載されたリンクからパスワードをリセットできます。
[![Image from Gyazo](https://i.gyazo.com/0e4df4696785e706fd21e80a1d25995c.gif)](https://gyazo.com/0e4df4696785e706fd21e80a1d25995c)

# ユーザー編集、削除
### My_treesからEdit_userをクリック
### emailとpasswordが変更できます。
### ユーザーを削除することもできますが、投稿した全てのtreeが削除されます。
### 注意して利用してください。
[![Image from Gyazo](https://i.gyazo.com/6d207bf12726ec16380a666f3ce443f1.gif)](https://gyazo.com/6d207bf12726ec16380a666f3ce443f1)