scrapbox-text-bubble-2の吹き出し制御方法

配列を使って制御する

親から順に格納する

DOM

#editorの中に直接入れる

入れ子にはしない

入れ子にするとカードが変に細長くなってしまうことがある

入れ子構造の再現

https://kakeru.app/6b72e8c5c2442b8a0bb36aa11e35f12e https://i.kakeru.app/6b72e8c5c2442b8a0bb36aa11e35f12e.svg

mouseleave時のbubbleの挙動

bubble消去処理の起動条件

リンクから離したとき

bubbleから離したとき

消去の判定

何らかのbubble内 or リンクにカーソルが存在する

そのbubbleの子全てを消すtimerを起動する

どのbubble or リンクにもカーソルがない

全てのbubbleを消すtimerを起動する

https://kakeru.app/2617ff1c85b45020b1b824e66090604e https://i.kakeru.app/2617ff1c85b45020b1b824e66090604e.svg

cursorがbubbleにあるかどうかを判定する方法

DocumentOrShadowRoot.elementsFromPoint()で特定できる

Shadow DOMでカプセル化しているCustom Elementの場合は、Custom Elementだけしか判定に入らないので便利

内部のDOMが判定に混ざらない

scrapbox-card-bubble-2と組み合わせる場合は、構造変えないとまずいな

案1

配列ではなく、ネスト構造を用いるべき

code:js

{

card: {

element: cardContainer,

child: {

card: { ... },

text: { ... },

text: {

element: previewBox,

child: {

card: { ... },

text: undefined,

}

案2

配列とobjectの組み合わせ

要素番号でtreeの深さを表す

DOMの方にもCSS custom propertyで要素番号を入れておけば、簡単に対応させられる

code:ts

type List = {

card: cardContainer;

text: textBubble;

}[];

https://kakeru.app/2a13b62c5970e8fb931cac2b3901f0de https://i.kakeru.app/2a13b62c5970e8fb931cac2b3901f0de.svg

card bubbbleからネスト

https://kakeru.app/6203dc63eabf92ef41de15a3137dcfc3 https://i.kakeru.app/6203dc63eabf92ef41de15a3137dcfc3.svg

text bubbleからネスト

https://kakeru.app/8014fd7629b7795677d1dfce2ba18690 https://i.kakeru.app/8014fd7629b7795677d1dfce2ba18690.svg

#scrapbox-text-bubble-2