横長のテーブル記法のはみ出した部分をスクロール表示する
(2022/1ごろの作業記録)
エディタからはみ出すほどの横長のテーブル記法を、もしかしたらそろそろいい感じにできるかもしれないshokai.icon overflow-x: scroll;等の挙動がブラウザごとに違った
うまくいかないのでoverflowさせないようにした
2020年ごろから、Githubでは横長テーブルがいい感じにoverflow-x: scroll;されている
もしかしたら各ブラウザのoverflow挙動がまともになったのかも
table:test
date total image video audio model text pdf total size image size video size audio size model size text size pdf size foo bar baz aaaaaaaaaaaaaaaaaa
2020/08/13 449 257 40 49 0 13 65 1,404,298,729 142976307 864245114 101883640 0 165556 249623713
2020/08/14 468 272 40 49 0 13 67 1,415,956,713 149107405 864245114 101883640 0 165556 250404288
2020/08/15 505 302 40 49 0 13 73 1,457,088,432 177168832 864245114 101883640 0 165556 263326280
2020/08/16 578 366 40 54 0 14 75 1,482,183,296 200798120 864245114 103174193 0 174824 263471664
2020/08/17 583 370 40 55 0 14 75 1,492,339,454 205380876 864245114 108747595 0 174824 263471664
1つ1つの行にoverflow-x: scrollを指定すると、行がバラバラにスクロールされてしまう
https://gyazo.com/a9923aa75c20b54ff2efacb305257f88
行ごとではなく、テーブル全体をまとめて左右スクロールしたいshokai.icon
1テーブルをまとめて左右スクロールするには、テーブルの行全体が1つのDOM Elementの中に入って、グループになっていなければならない
https://gyazo.com/cb1439d9963a43f0f4769c329101778b
変更
これを
code:html
<div class="line"><Telomere><TableBlock>
<div class="line"><Telomere><TableBlock>
<div class="line"><Telomere><TableBlock>
<div class="line"><Telomere><TableBlock>
こうして
code:html
<div class="table-block-block">
<div class="line"><Telomere><TableBlock>
<div class="line"><Telomere><TableBlock>
<div class="line"><Telomere><TableBlock>
<div class="line"><Telomere><TableBlock>
</div>
テーブルのはみ出した部分をスクロールさせるようにした
code:css
.table-block-block {
max-width: 100%;
overflow-x: scroll;
}
だいたい良い感じだshokai.icon
でもテロメアまでoverflow: scrollで消えてしまった テロメアだけposition: fixedか何かで固定して、overflowしてても表示させたりできないかな？
無理そう
DOMの構成を全体的に直す必要がある
挙動としては、これが一番キレイだとは思う
<Page>全体にoverflow-x: scrollを設定
Chrome/Safari/Firefox/Android/iOSで動いた！shokai.icon
https://gyazo.com/8e9d4bb2d50eb816a1628b847c80e3f4
https://gyazo.com/0ea9bb4fc23576d8386249b6d383b54e
カーソルを横移動させた時に<Page>をスクロールさせたい
テキスト入力するとoverflowした<Page>がスクロールしてくれる
これはブラウザがやってる
カーソル移動した時の移動は、jsで自分で書かなければならない
上下移動はclient/js/components/cursor/desktop-cursor.jsのscrollInViewでやっている
同様の補助を左右移動にも追加する
やったぜshokai.icon
https://gyazo.com/1b2182b66e3686c682c87c18898c55ba
jQuery無しで書けた
縦スクロールの方はjQueryで書かれている。この後の別プルリクでjQuery外しをやるぞ
とりあえず、mobileでは<Page>にoverflow-x: scrollを指定しない？
mobileではカーソル移動に追従した自動スクロールをしなければ、とりあえず大丈夫そうshokai.icon
mobile popup menuの位置がおかしい
左右スクロールしていると、カーソルの真上にpopup buttonが表示されない
https://gyazo.com/3d13679f8a332ce65f181fb6f0f28b6d
気合いで調整したshokai.icon
LTR
https://gyazo.com/1dfcecef4bd362e46a11511ce90f1c9a
RTL
https://gyazo.com/2fa51d5d681312d2c1c8c7563324b007
https://gyazo.com/417f84f65e8a65710f021657f4836fe5
リリースしたが、たまに<Page>に縦スクロールが発生してしまうのでrevertしたshokai.icon (2022/1/11 15:20)
画面遷移直後にのみ発生する
テーブルが無いページ同士を移動した時も発生する
エディタ内をクリックすると解消する
https://gyazo.com/4f2f3c3bd731b8944b5628290b1f0959
heightが大きいページから小さいページに画面遷移した時に発生する
Pageのheightが縮まらずにスクロール状態になる？
発生したページ間の移動をもう一度再現しようとしても、なかなか再現しない
今の所、safariやfirefoxでは全く発生しないshokai.icon
つまりchromeだけの現象かもしれない
<Editor>のposition: relative;を外すと発生しなくなる
しかしカーソル位置計算が狂うので、外すわけにはいかない
<Page>が上下に動かないようにposition: relativeとtop: 0;を指定してみたが、効果は無かった
page-wrapperに付いてるenter/leave animationも何か関係してるかもな
enter/leave中はoverflowを付けないようにしてみるか
低速回線環境にすると発生確率が上がる事がわかったshokai.icon*4 準備
Chrome devtoolでSlow 3Gにする
2回ほど画面遷移する
ページ→ページの画面遷移でok
↓のリンクをクリックするとほぼ100%発生する
table:arabic
ىسميىسميىسمي ىسمي ىسمي ىسمي ىسمي ىسمي ىسمي ىسمي ىسمي ىسمي ىسمي ىسمي ىسمي ىسمي ىسمي ىسمي ىسمي ىسمي ىسمي ىسمي ىسمي ىسمي ىسمي ىسمي ىسمي ىسمي ىسمي ىسمي ىسمي ىسمي
https://gyazo.com/d6838fd38103cdfa81a402c865983043
解決：縦スクロールさせない
overflow-y: clip;を指定する
はみだした部分をスクロールせず、非表示にする指定
実装できた
元々popupはエディタの外側にはみだしていたのだが
https://gyazo.com/3ec16c07648ff53b4c2fa36f241a062b
5574では、白いエディタの外に出た部分が見切れてしまうようになる
https://gyazo.com/6b727ec6b73f18285191da8cfb0871e6
でもまあ、これぐらいならそんなに問題ないかな？shokai.icon
画面幅が狭い時に、タイトル行のcopy plainがちょっと隠れる
https://scrapbox.io/files/638dc29dabe9a6001d4141c8.png
これもちょっとクリックしづらいだけなので、大きな問題ではないshokai.icon
でも気になるので直したい
どちらの問題もReact Element同士の位置関係を変更しなければ解決できない
現状
page/editor/cursor&linesという入れ子になってる
pageと同レベルにcursorを置けばいい
cursor, page/editor/linesにする
と思っていたが、リンク補完popupはcursorに付いているのではなく、<PageLink>内のElementだった
親がoverflow: scrollの時に、子が親の外側にはみだす方法
子にposition: fixed;を設定すれば可能
しかしスクロールすると位置がずれる
カーソルがテーブル記法の中にいる時だけpageにoverflow-x: auto;をつける
入ってない時の表示が、テーブルが外にはみ出してる風になるのが
やっぱテーブル部分だけスクロールしたいshokai.icon
これの唯一の問題はテロメアが消えてる事
https://gyazo.com/cb1439d9963a43f0f4769c329101778b
テロメアが消える理由
pageとeditorの間にmarginがある
page/editor/lines/line/telomereという階層になっていて
telomereの座標はposition: absoluteとleftで、<Line>よりも左側に飛び出して指定されている
code:css
.telomere-border {
position: absolute;
@include when-xs {
left: $page-horizontal-padding-xs * -1;
width: 5px;
}
@include when-sm {
left: $page-horizontal-padding-sm * -1;
}
ここを実装し直したら、テーブル部分だけスクロールできる気がしてきたshokai.icon
テーブルの中でpopup menuが全く表示されない
少し位置調整だけした
これが
https://gyazo.com/9c0f96b0f6144d7335071348f861dc1c
こうなる
https://gyazo.com/a2ec4e8e6e9c0a80c9499fd50d6c43cc
やっぱり見切れるのがどうしても我慢ならないのでrevertしましたshokai.icon
これ以上は地獄だ！！
座標系の計算も関わっているので、やりすぎるとパラメータと条件分岐だらけで他の機能にも影響がでてくる