🧭

Figmaの共同編集について

2024/05/03に公開

基本的なデータのやりとりに関して

Map<オブジェクトID, Map<Prop, Val>>のようなデータ構造になっており、サーバーのデータを正として中央管理の仕組みをとっている

An animation showing two clients sending updates without any conflicts: (*1)

An animation showing two clients sending updates without any conflicts: (*1)

同じオブジェクトIDを編集しようとしたとき(=データのコンフリクトおきるとき)は、自分の変更内容がサーバーから返ってくる間に他の人からの変更があった場合は破棄している

破棄されたデータはサーバー側からも削除するが削除を実行するクライアントのUndoバッファに保存される

An animation showing how to avoid “flickering” during a conflict between two clients: (*1)

An animation showing how to avoid “flickering” during a conflict between two clients: (*1)

オブジェクトIDにクライアントIDを含めることで同一のオブジェクトIDが生まれずにこの仕組みを実現させることができる

親子関係のあるデータに関して

親子関係の同時編集は、各オブジェクトに親子のIDをリンクづける

競合する場合、サーバー側で親子の関係がループしたときに変更を破棄する内容を送り返す

An animation of a reparenting conflict: (*1)

An animation of a reparenting conflict: (*1)

ヒストリーに関して

オブジェクトを編集するまで、サーバーにデータを送らずにUndo, Redo バッファに保存する

An animation showing undo and redo history modification: (*1)

An animation showing undo and redo history modification: (*1)

並び順に関して

順序に関してはフラクショナルインデックス(*2)を使う
0から1までの数値でオブジェクトを作成する際は挿入する両端のインデックスの平均をインデックスにして挿入する

An animation of reordering using fractional indexing: (*1)

An animation of reordering using fractional indexing: (*1)

Discussion