scrapbox-text-bubble-2の吹き出し制御方法
配列を使って制御する
親から順に格納する
DOM
#editor の中に直接入れる入れ子にはしない
入れ子にするとカードが変に細長くなってしまうことがある
入れ子構造の再現
mouseleave時のbubbleの挙動
bubble消去処理の起動条件
リンクから離したとき
bubbleから離したとき
消去の判定
何らかのbubble内 or リンクにカーソルが存在する
そのbubbleの子全てを消すtimerを起動する
どのbubble or リンクにもカーソルがない
全てのbubbleを消すtimerを起動する
cursorがbubbleにあるかどうかを判定する方法
Shadow DOMでカプセル化しているCustom Elementの場合は、Custom Elementだけしか判定に入らないので便利
内部のDOMが判定に混ざらない
scrapbox-card-bubble-2と組み合わせる場合は、構造変えないとまずいな
案1
配列ではなく、ネスト構造を用いるべき
js{
card: {
element: cardContainer,
child: {
card: { ... },
text: { ... },
},
},
text: {
element: previewBox,
child: {
card: { ... },
text: undefined,
},
},
}案2
配列とobjectの組み合わせ
要素番号でtreeの深さを表す
DOMの方にもCSS custom propertyで要素番号を入れておけば、簡単に対応させられる
tstype List = {
card: cardContainer;
text: textBubble;
}[];
card bubbbleからネスト
text bubbleからネスト
