useBubbles()の設計メモ

表示すべきtext bubblesとcard bubblesのデータ、表示切り替え函数を提供するhook

bubbles

表示すべき全階層のbubbles

非同期で取得しているデータを受け取る度に更新する

取得できたデータから順次UIに渡すことが出来る

code:Bubble.ts

interface Bubble {

text bubbleに表示するデータ

事前に決められたproject順で並んでいる

いずれ他のページも切り替えて表示できるようにする

code:Bubble.ts

pages: {

project: string;

title: string;

lines: Line[];

}[];

card bubblesに表示するデータ

事前に決められたproject順で並んでいる

同じprojectのcardsの並び順は特に決めていない

APIに入っていた並び順をそのまま使っている

いずれ並び順を変えられるようにしてもいいかもしれない

code:Bubble.ts

cards: (RelatedPage & {project: string})[];

/** bubblesを表示するための位置情報 */

position: Position;

/** (optional) スクロール先 */

scrollTo?: ScrollTo;

/** bubbleの発生源 */

type: LinkType;

}

show()

指定した階層で指定したリンクのbubblesを表示する

hide()

指定した階層とそれ以降のbubblesを消す

個別のbubbleに子bubblesの管理を任せるのではなく、このhookで全てのbubblesを管理している

個別に管理するとDOMが入れ子になり、描画処理に問題が発生する

具体的には子bubbleが親bubbleからはみ出させ描画させるのが困難になるなど

2022-01-15

試しにやってみたつもりだったが、意外とすんなりできてしまった

動作確認もした

折角なので先にこれだけmergeする