🪴 Quartz 4.0

Search

SearchSearch

Kozaneba開発日記2021-08-21

Dec 01, 2023, 8 min read

prev Kozaneba開発日記2021-08-20

js

localStorage.setItem("onLoad", "console.log('hello')")

ロード時に実行するスクリプトをユーザが定義できる

- トップページにアクセスした時にチュートリアルがでる挙動をユーザが上書きできる
- AppBarにユーザがボタンを追加できる

タッチデバイスで使えないバグ 2021-08-23 nishio.icon直そうとしてるけど、簡単に直る感じではない https://twitter.com/nishio/status/1428904779703472131?s=20

Usually, we can use overflow: hidden on the 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にする アンカーポイント 自動位置調整オブジェクト

image image 依存関係を赤矢印で書いたけど一方通行更新では循環参照が発生するからそれぞれの点を「距離を最小化する制約」にして勾配法で解くのが良さそう

シェア用リンクにサムネイルをつける

スキップチュートリアルではなく、最初に行う処理をユーザカスタマイズ可能にすれば良い

ペースト

  • JSONのペースト
    • →フォーマットを判断
      • Regroup
      • Kozaneba
  • テキストのペースト
    • Add Kozaneダイアログを開く
  • 画像のペースト
    • GyazoにアップロードしてGyazoこざねにする
      • まずGyazoこざねが必要
        • こざねのオプションでレンダリング手法を切り替え可能にする
        • 将来的にはユーザから拡張できると良い
      • そもそもこれは「こざね」なのか？
        • GroupItem, KozaneItem, のレベルに並ぶべきものでは
        • つまり「item.typeの追加」

リードオンリー共有

  • サムネイル表示

メニューの「チュートリアル」はなくそう✅

ホイールとタッチパッドで個別にズームの際の速度を設定できる

  • ホイールとタッチパッドの区別、deprecatedなプロパティがホイールだと典型的なデバイスでは120になってることを利用した判別とかになってる(2020年の議論)
  • Detect touchpad vs mouse in Javascript - Stack Overflow
  • 実装自体は難しくないので「今のところ動くと思う」というくらいの信頼度でなら出せる
    • done

image

閉じたグループのドラッグで位置がズレる image

グループが開いた状態で他のグループに出し入れする時には問題ないが、閉じた状態で入ると場所がズレるA

  • この時「閉じた時の位置」と「開いた時の位置」がズレてる状態なので、閉じたまま置きたかった位置に戻すと開いた時にAと逆方向にズレる
  • とりあえず問題の半分「閉じたグループをグループの中に入れた時に開いたグループの場合とズレる」は直した
  • それとは別に「グループの中でものを動かした時におかしくなる」が起きる
  • うーん、見た目の辻褄を合わせるのはできそうだけど、ズレがなぜ発生してるのかの根本原因がわからないなぁ
  • あ、これ閉じたグループでなくても起きるや。同一グループ内での移動でおかしくなるのだな
  • 直った

原因

  • グループの中身は、グループによってオフセットが発生する
    • しかし閉じたグループの描画の際にこの値を参照してなかったのでグループの中に入れた時だけ表示がズレる
  • 同一グループ内のドラッグでだけ位置がおかしくなる
    • ドラッグ中にグループにmousemoveを発生させた時だけ発生する、ユーザの操作では当然発生するがテストコードでは発生していなかった
    • グループから出入りする時はDOMの構造が変わる、この時には起こらない
    • トップレベルでの移動は問題の現象自体は起きているがグループの中にいなくてオフセットが0だから見た目が同じ
    • ドラッグ中にmousemoveイベントでReactNの状態を書き換えるとコストが高いのでもっさりする
      • そこでDOMのstyleを直接編集していた
      • このスタイルが、Reactによって再描画された後でも残ってしまう
        • なぜならReactからの再描画はstyled-componentsのスタイルを更新するが、これはクラスを介してエレメントに適用されるので「エレメント自体のstyle」より優先度が低い
        • 一度「エレメント自体のstyle」を設定してしまうとそちらが優先される
    • styleがdeleteできないので空文字列を入れる
      • これで削除できることがどこに記載されてるかわからなかった
      • この時、次のドラッグでその値を読んでドラッグ開始位置としてparseFloatしようとするとNaNになってしまう
      • Window.getComputedStyle() - Web APIs | MDNを使う

image こんなdiffが出せるんだね(インデントしても対応付けを理解してる)

Graph View

Backlinks