Scrapboxのundo/redo
ショートカットキー
undo
ctrl(command) + z
redo
ctrl(command) + shift + z
undoできるのは自分の編集だけ(上の方で編集してる人と下の方で編集してる人がかち合うと悲惨なので)
他人の編集はundoしない
1. 自分が編集
2. 他人が編集
3. 自分がundo
1だけが巻き戻る
2で行われた編集内容は変化しない
2の他人の編集の内容次第でundoできない場合がある
状況
undo対象の行がまるごと無くなった
insert命令で指定している目印の行が無くなった
undo stackをクリアする
ユーザーにはエラーメッセージ等は何も表示しない
Scrapboxのページ編集命令は3種類ある
insert
{ _insert: "行ID", text: "insertするテキスト" }
指定したIDの下に新しい行を作成する
update
{ _update: "行ID", text: "updateするテキスト" }
指定したIDの行を更新する
delete
{ _delete: "行ID" }
指定したIDの行を削除
箇条書きの多い、行ごとに編集が多いモデルなので行単位にしている
ちなみに行IDとは
全ての行に付いているID
ページ内でユニーク
https://gyazo.com/35db7d2f7ba1cd89e3a768081436b2dc
insertの逆はdelete
{ _delete: "行ID" }
updateの逆は元テキストでのupdate
{ _update: "行ID", text: "updateされる前のテキスト" }
deleteの逆はinsert
{ _insert: "行ID", text: "deleteされる前のテキスト" }
他のユーザーから見るとただの変更コマンド
それがundoとはわからない
サーバー側からもわからない
逆操作を貯める
stackに貯める
最後の変更が最初にundoされる
貯めるタイミング
自分の編集がサーバーに受け入れられた事を確認してから
scrapboxの編集は、他人の編集とコンフリクトしてサーバーに受け入れられない事があるので
各自のローカルで貯める
他人の編集はundoできない
できちゃうと混乱する
同じページ内の離れた箇所を2人が同時に編集している可能性があるので
redo
undoを実行した時に、さらにその逆操作をredo stackに貯めておく
undoした位置にカーソルも戻す
undoで復元した位置が画面外になる場合に、undo成功した事に気づけない
https://gyazo.com/fdceca7f617fa0bb97d0bfa56da3020e
画面外の行をundoした場合でも、画面がスクロールしてその行まで戻る
undo命令にカーソルのx座標は含まれていない
テキストの差分からカーソル位置(x座標)を決定する
y座標は行IDで探す
「start presentation」を「スタートプレゼンテーション」に変更してからundoしている様子
https://gyazo.com/c68eed178fd44da32447bb62d3dde8e6
undoで復元した内容の末尾にカーソルが移動しているのがわかる
ページ移動するとアンドゥスタックが消える
広義のundoと言えなくもない機能たち
以下は全てsnapshotで実装していますshokai.icon
snapshot自体の実装は簡単
見せ方にちょっと工夫が必要
page history
https://gyazo.com/c97d5cb327f234e899541c453bf44719
いわゆるsnapshot
undo/redoは自分の変更だけを扱う
page historyは他人が書き換える前のテキストを取り出せる
snapshotの作成頻度が多すぎると探しにくくなるshokai.icon*5
スライダー、シークバーが超細くなってしまう
作成タイミング
編集した時に、前回のhistory作成から6時間経過していたら作成
もしくは大きな変更を加えた時
10行以上をまとめて削除した時など
Auto project backup
https://gyazo.com/eb0d53910d1644042b75c21548efbfdc
project内の全ページを1つのJSONにして定期バックアップしている
ページをまるごと削除してしまった時に取り出せる
流れるゴミ箱
https://gyazo.com/e55a4ece88d7ce016844f2ab8ff6e448
自動的に流れる
30日後に消える
手動で流すのは複数人で使うシステムではうまくいかないので
ゴミ箱を空にするボタン等
windowsのゴミ箱でバージョン管理してしまうケースがあるらしい。
ゴミ箱の中でなら同じファイル名のまま、複数バージョンを同時に存在させられるので
というレポートを見たshokai.icon
共同編集システムにゴミ箱を実装するのは難しい
お絵かき機能のundo
canvasから画像データを取り出して配列に保存しておく
直近の10件だけ保存
undoでcanvasに書き戻す
https://nota.gyazo.com/fb2fc9dcd12ba945830b6b2c151236f3
なるべく何でもやり直しができるようになっていると、思い切って元気に操作できるようになる
ユーザーの学習効率も良くなる