Kozaneba開発日記2021-08-27
最前面に矢印レイヤーを導入しちゃうのが楽かなぁ
中括弧はオブジェクトレイヤーで良い
別オブジェクトにわかれない方が良い
カスタムスタイルか
複数の箱の間の関係
箱の位置が確定してからなら容易に描画できる
矢印に対して矢印を引けるようにすると？
循環参照が発生しうる
グループも「複数の箱の間の関係」では
子要素のバウンディングボックスを先に計算して自分の位置を決めている
矢印のことを考えてたのだけど、完全に矢印を後から書くレイヤーにしてしまえばさほど難しくない
ただしその場合
矢印が常に最前面だから矢印の上にこざねを置くことはできない
矢印はこざねやグループなどの「箱」とは別種のオブジェクトになるので、矢印に対して矢印を引くことはできない
となる
おそらく僕は「グループ化機能」などのない紙の付箋の状態からこざね的手法を使ってるから無意識に左のやり方を選択している
一方で新機能として「紙の付箋にはできなかったグループ化ができるようになった！」をアピールしてしまうので、それを見てから使い始めた人は無意識に右のやり方を選択するのだろう
紙の付箋になかった「大きくする」ができるぞ！
紙の付箋だと難しかった広い空間を無尽蔵に使って並べることができるぞ！！
---
https://gyazo.com/872f3897132974239c3ad539a6a8df69
うーん、これ、戻せそうに見えるよな
しかしリンクを他人に渡した上でリンクを知ってる人が編集できるモードに戻したら当然編集できちゃう
それでいいのか？
Google Spreadsheet
https://gyazo.com/329041b89912f417de2e5ddc1de21cff
https://gyazo.com/5aadc03eb256d471606454a1f1488b34
https://gyazo.com/492cf77957839cad1f61d9c9b36b56a4
viewの時のリンクとeditの時のリンクは同一
viewの時に開いた画面はreadonlyのままだが、再度開いたら書き込めた
うーん、じゃあ僕が作ろうとしてた形と同じだな、これでいいのか。
viewのリンクとwriteのリンクが分かれてて個別にON/OFFできた方がいいのではと思ったが、まあそんな機能がなくても大部分のケースでは問題なく使えてるってことか
今の設計で問題が起きるケース
viewのリンクを公開した後で、writerを追加したくなった時に追加手段がない
editに戻すと予期しない人がwriterに昇格してしまう可能性がある
これは「編集した人はwriterに昇格し、viewに戻した後もwrite権限を持つ」という仕様だから
そもそも基本的に個人ユース想定なのでwriter追加が必要になる可能性が低いのでは
「UIDを受け取って、それを追加する」もしくは「viewモードのまま、writerに追加するためのinviteリンクを別途発行する」があればいい
後者だけでいい
https://gyazo.com/632a00c807872d619df58dbddc3164ab
https://gyazo.com/aa259e8b528230a5a37dc1c60b9b85bd
リードオンリー共有ができるようになった！Kozaneba Kanbanを画像ではなく直接シェアできるぞ！
なおTwitterとかに投稿した時に画像が出る機能はまだない。
https://gyazo.com/8b4d5297c5a6632c22596fe5b0a2dc57
コピーの作成と削除があれば、うっかり見せてはいけないものをシェアしたとしても、コピーして、元のやつを削除すれば大丈夫。あ、開こうとしたものがなかった時のエラー処理を作ってないな。
あ、あとタッチイベントの対応がまだ終わってないのでスマホでリンクを開いた人は何もできません
将来的には「手書きこざね追加」「開いたダイアログに手書き」「Gyazoこざねになる」という流れが欲しい
グループを開いた時に最前面へ
4枚追加した時もグループマージンが小さいと選択しにくい
GyazoGIFこざね
リードオンリー共有を受けた人がトップページに行ってチュートリアルを見るための動線がない
サービス名をクリックしたらトップページか
リードオンリー共有を自分の別の端末で開いた時に、ログインしてないから編集できないわけだが、編集可能でないからクラウド保存のメニューも出ないのでログインできない
splitメニュー、よく使ってるけど、ほとんどReplaceしてる
これ、クリックしたこざねをcloneすることができればAddとReplaceの使い分けは必要ないのでは
split, add = clone, edit
split, replace = edit
あれ？そうか、Regroupの時にGyazoからの画像を使うのに苦労したのはCanvasだったからで、単にimgで貼るだけなら問題ないのか？
Scrapboxこざねを作る場合、結局Gyazo読み込み機能は必要
この辺、DOMも違うし、ユーザ拡張でやるのは問題を難しくしすぎてる気はするなぁ
code:ts
export const id_to_dom = (id: string, offset: TOffset) => {
const item = get_item(getGlobal(), id);
if (item.type === "kozane") {
return <Kozane value={item} offset={offset} key={id} data-testid={id} />;
} else if (item.type === "group") {
return <Group value={item} offset={offset} key={id} data-testid={id} />;
}
return null;
};
ここにGyazoとScrapboxを追加する感じか
https://gyazo.com/437c10a3d0bc8bdfce44f8d7ef52690a
https://gyazo.com/31a31d26e323a6164445e587a148ac3d
見た目をScrapboxに寄せるのか(CSSを丸写し) 自分の理解したものだけの最小限のにするのか分かれ道ではある
見た目をしっかり合わせるより、目的の機能を果たせる最小限のものにしておいて、もしユーザが見た目をいじりたいなら拡張機能でやってというのがいいかもなぁ
だいたい本家にピッタリ合わせて行ったところで、UserCSSでいじってる人に取っては「慣れた見た目」ですらないからな
やっぱ機能を果たせる最小限の実装にするかー
https://gyazo.com/9de8d92b2785201afdb555801d147cb2
これの2〜3倍くらいのサイズがちょうどいいのかもな…
https://gyazo.com/8d12f6d2292a06af6804b97fddca28d7
よさそう
見た目はできたが
ドラッグ&ドロップできない
範囲選択できない
バウンディングボックスの計算が未実装なのでスペースキーで死ぬ