Kozaneba開発日記2021-08-21
code:js
localStorage.setItem("onLoad", "console.log('hello')")
ロード時に実行するスクリプトをユーザが定義できる
トップページにアクセスした時にチュートリアルがでる挙動をユーザが上書きできる
AppBarにユーザがボタンを追加できる
タッチデバイスで使えないバグ
2021-08-23 nishio.icon直そうとしてるけど、簡単に直る感じではない
Usually, we can use overflow: hidden on the <body> element to prevent scrolling. But unfortunately, that does not work on older versions of iOS.
iPhoneではなかなか期待通りに動かないな
iPhoneはさておき、iPadでは動いて欲しいよな
---
ScrapboxのカードをKozaneba上で動かすことを考えた時に、振る舞いとしてはこざねだけどDOM構造の違うものが作れる必要があるよなぁ
この「振る舞いとしては同じ」も曖昧な表現で、正確には「結構多くの要素は共有」ぐらい
---
2021-08-23
ついつい「まだやったことのないこと」をやりたくなってしまう
既にやって、そして便利だった機能より優先しそうになる
iPadで動くようにするのは泥臭い
iPadで動くようにしたら手書き加筆したくなる
手書き加筆したものをSVGにする
アンカーポイント
自動位置調整オブジェクト
https://gyazo.com/59a3112074719fb8922802a663c939a5
https://gyazo.com/d7a9ad76fabdfd867c14497827967780
依存関係を赤矢印で書いたけど一方通行更新では循環参照が発生するからそれぞれの点を「距離を最小化する制約」にして勾配法で解くのが良さそう
シェア用リンクにサムネイルをつける
スキップチュートリアルではなく、最初に行う処理をユーザカスタマイズ可能にすれば良い
ペースト
JSONのペースト
→フォーマットを判断
Regroup
Kozaneba
テキストのペースト
Add Kozaneダイアログを開く
画像のペースト
GyazoにアップロードしてGyazoこざねにする
まずGyazoこざねが必要
こざねのオプションでレンダリング手法を切り替え可能にする
将来的にはユーザから拡張できると良い
そもそもこれは「こざね」なのか？
GroupItem, KozaneItem, のレベルに並ぶべきものでは
つまり「item.typeの追加」
リードオンリー共有
サムネイル表示
メニューの「チュートリアル」はなくそう✅
ホイールとタッチパッドで個別にズームの際の速度を設定できる
ホイールとタッチパッドの区別、deprecatedなプロパティがホイールだと典型的なデバイスでは120になってることを利用した判別とかになってる(2020年の議論)
実装自体は難しくないので「今のところ動くと思う」というくらいの信頼度でなら出せる
done
https://gyazo.com/4d804026c6f5a45f2ae61d6692f22f7f
閉じたグループのドラッグで位置がズレる
https://gyazo.com/7518e22178b2f14a79dbb6f4da996cca
グループが開いた状態で他のグループに出し入れする時には問題ないが、閉じた状態で入ると場所がズレるA
この時「閉じた時の位置」と「開いた時の位置」がズレてる状態なので、閉じたまま置きたかった位置に戻すと開いた時にAと逆方向にズレる
とりあえず問題の半分「閉じたグループをグループの中に入れた時に開いたグループの場合とズレる」は直した
それとは別に「グループの中でものを動かした時におかしくなる」が起きる
うーん、見た目の辻褄を合わせるのはできそうだけど、ズレがなぜ発生してるのかの根本原因がわからないなぁ
あ、これ閉じたグループでなくても起きるや。同一グループ内での移動でおかしくなるのだな
直った
原因
グループの中身は、グループによってオフセットが発生する
しかし閉じたグループの描画の際にこの値を参照してなかったのでグループの中に入れた時だけ表示がズレる
同一グループ内のドラッグでだけ位置がおかしくなる
ドラッグ中にグループにmousemoveを発生させた時だけ発生する、ユーザの操作では当然発生するがテストコードでは発生していなかった
グループから出入りする時はDOMの構造が変わる、この時には起こらない
トップレベルでの移動は問題の現象自体は起きているがグループの中にいなくてオフセットが0だから見た目が同じ
ドラッグ中にmousemoveイベントでReactNの状態を書き換えるとコストが高いのでもっさりする
そこでDOMのstyleを直接編集していた
このスタイルが、Reactによって再描画された後でも残ってしまう
なぜならReactからの再描画はstyled-componentsのスタイルを更新するが、これはクラスを介してエレメントに適用されるので「エレメント自体のstyle」より優先度が低い
一度「エレメント自体のstyle」を設定してしまうとそちらが優先される
styleがdeleteできないので空文字列を入れる
これで削除できることがどこに記載されてるかわからなかった
この時、次のドラッグでその値を読んでドラッグ開始位置としてparseFloatしようとするとNaNになってしまう
https://gyazo.com/6df22125da66b4ad8eb7d3a04dc19cd8
こんなdiffが出せるんだね(インデントしても対応付けを理解してる)