OT の型
js-collaboration-ot は、操作変換（Operational Transformation、OT）による複数ユーザーの共同編集をサポートします。OT Type は、オペレーション（Ops）の変換と適用 ロジックを定義し、クライアント側とサーバー側の両方に登録します。OT Type は、オペレーションの競合の処理と適用を担当し、複数ユーザーのオペレーションが正しく同期されるようにします。このドキュメントでは、OT Type の定義と使用方法を説明します。
OT_Typeはサーバーとクライアントの両方に登録する必要があります。
前提条件
以降のセクションを読む前に、競合と変換を理解するため、 「競合と変換」を参照することをお勧めします。
定義
一般的な OT_Type インターフェースは次のメソッドで構成されます。
/**
* OTタイプのインターフェイスです。ユーザーは共同編集のOTの挙動をユーザー定義できます。
* @template S スナップショットの型です。
* @template T Op の型です。
*/
export interface OT_Type<S = unknown, T = unknown> {
/**
* ドキュメントのタイプURIです。
*/
uri: string;
/**
* 初期データからスナップショットを作成します。
* @param data - スナップショット
* @returns スナップショット
*/
create?(data: any): S;
/**
* 競合を処理するために、op1 を変換します。
* @param op1 変換対象の op です。
* @param op2 変換の基準となるオペレーションです（op1 は op2 を基準に変換されます）。
* @param side どちらのパラメータに対応する op がサーバーに後から到着するかを示します。
* @returns 変換後の op1 です。
*/
transform(op1: T, op2: T, side: 'left' | 'right'): T;
/**
* スナップショットに op を適用します。
* @param snapshot - スナップショット
* @param op - op
* @returns スナップショット
*/
apply(snapshot: S, op: T): S;
}このドキュメントでは OT の型の基本的な機能のみを説明します。追加の拡張機能については、「フラグメント」を参照してください。
例: シンプルなテキスト OT の型
次は、テキスト挿入オペレーションのみをサポートし、テキスト削除などのオペレーションはサポートしない、簡略化したテキスト OT の型の例です。
次の例のオペレーション（Ops）は、説明目的で簡略化しています。実際のシナリオでは、Ops の構造と内容は、ドキュメントの種類、オペレーションの複雑さ、実装によって異なる場合があります。
type ISnapshot = string;
interface IOp {
pos: number;
text: string;
};
const textType: OT_Type<ISnapshot, IOp> = {
uri: 'rich-text-ot-type',
create: (data) => data || '', // 空文字列として初期化します
transform: (op1, op2, side) => {
if (op1.pos > op2.pos || (op1.pos === op2.pos && side === 'left')) {
return { pos: op1.pos + op2.text.length, text: op1.text };
}
return op1;
},
apply: (snapshot, op) => {
return snapshot.slice(0, op.pos) + op.text + snapshot.slice(op.pos);
}
};登録
クライアント側の登録
import { TypesManager } from '@mescius/js-collaboration-ot-client';
// OT の型を登録します
TypesManager.register(textType);サーバー側の登録
import { TypesManager } from '@mescius/js-collaboration-ot';
// OT の型を登録します
TypesManager.register(textType);