CRDT Operations & Rendering

// Yjs, Automerge 등에서 받는 CRDT operation 예제
interface CRDTOperation {
  type: 'insert' | 'delete' | 'update' | 'format';
  position: PositionId; // 전역 고유 위치 식별자
  after?: PositionId; // 이 위치 뒤에 삽입
  positions?: PositionId[]; // 범위에 대한 여러 위치
  content?: string | Node;
  attributes?: Record<string, any>;
  siteId: string;
  clock: number;
}

// 위치 식별자 (CRDT 라이브러리마다 다름)
interface PositionId {
  siteId: string;
  clock: number;
  offset?: number; // 분수 위치용
}

// 예제: Yjs operation
const yjsOperation = {
  type: 'insert',
  after: { siteId: 'user1', clock: 42 },
  positions: [
    { siteId: 'user2', clock: 100, offset: 0.1 },
    { siteId: 'user2', clock: 100, offset: 0.2 }
  ],
  content: 'hi',
  siteId: 'user2',
  clock: 100
};

class CRDTEditorAdapter {
  constructor(
    private editor: Editor,
    private converter: CRDTOperationConverter,
    private positionMapper: CRDTPositionMapper
  ) {}
  
  // 들어오는 CRDT operation 처리
  handleCRDTOperation(crdtOp: CRDTOperation) {
    // 우리 자신의 operation이면 건너뛰기
    if (crdtOp.siteId === this.editor.getSiteId()) {
      return;
    }
    
    // 에디터 operation으로 변환
    const editorOps = this.converter.convert(crdtOp);
    
    if (!editorOps) {
      console.warn('CRDT operation 변환 실패', crdtOp);
      return;
    }
    
    // 배열로 정규화
    const operations = Array.isArray(editorOps) ? editorOps : [editorOps];
    
    // Transaction을 통해 적용
    const tx = this.editor.beginTransaction();
    
    for (const op of operations) {
      tx.add(op);
      
      // 향후 매핑을 위해 모델에 CRDT position 저장
      this.storeCRDTPositions(op, crdtOp);
    }
    
    // Transaction 커밋 (렌더링 트리거)
    tx.commit();
    
    // 모델 변경 후 위치 캐시 무효화
    this.positionMapper.invalidate();
  }
  
  // CRDT operation 배치 처리
  handleCRDTOperations(crdtOps: CRDTOperation[]) {
    // Transaction별로 그룹화 (같은 clock)
    const transactions = this.groupByTransaction(crdtOps);
    
    for (const transactionOps of transactions) {
      const tx = this.editor.beginTransaction();
      
      for (const crdtOp of transactionOps) {
        const editorOps = this.converter.convert(crdtOp);
        if (editorOps) {
          const ops = Array.isArray(editorOps) ? editorOps : [editorOps];
          for (const op of ops) {
            tx.add(op);
            this.storeCRDTPositions(op, crdtOp);
          }
        }
      }
      
      tx.commit();
    }
    
    this.positionMapper.invalidate();
  }
}

// 에디터는 이미 렌더링을 처리해야 함
class Editor {
  beginTransaction(): Transaction {
    return new Transaction(this);
  }
  
  // Transaction 커밋이 렌더링 트리거
  commitTransaction(tx: Transaction) {
    // 모델에 operation 적용
    for (const op of tx.operations) {
      this.applyOperationToModel(op);
    }
    
    // 렌더 업데이트 트리거
    this.renderer.update(this.model);
    
    // 필요 시 선택 영역 업데이트
    this.updateSelection(tx.afterSelection);
  }
}

// 렌더러는 모델 변경에 따라 DOM 업데이트
class Renderer {
  update(model: DocumentModel) {
    // 모델과 DOM 차이 계산
    const changes = this.diffModelAndDOM(model, this.currentDOM);
    
    // 변경 사항을 증분적으로 적용
    for (const change of changes) {
      this.applyChange(change);
    }
    
    this.currentDOM = this.serializeModel(model);
  }
}

class CRDTSelectionManager {
  constructor(private editor: Editor, private positionMapper: CRDTPositionMapper) {}
  
  // 원격 operation 도착 시 선택 영역 조정
  adjustSelectionForRemoteOperation(
    currentSelection: Selection,
    crdtOp: CRDTOperation
  ): Selection {
    const editorOp = this.editor.getConverter().convert(crdtOp);
    if (!editorOp) return currentSelection;
    
    // Operation이 선택 영역에 영향을 주는지 확인
    if (this.operationAffectsSelection(editorOp, currentSelection)) {
      return this.adjustSelection(editorOp, currentSelection);
    }
    
    return currentSelection;
  }
  
  private adjustSelection(op: EditorOperation, selection: Selection): Selection {
    if (op.type === 'insertText') {
      // 삽입이 선택 시작 전이면 선택 영역 이동
      if (this.isBefore(op.path, op.offset, selection.start.path, selection.start.offset)) {
        return {
          start: {
            path: selection.start.path,
            offset: selection.start.offset + op.text.length
          },
          end: {
            path: selection.end.path,
            offset: selection.end.offset + op.text.length
          }
        };
      }
    } else if (op.type === 'deleteContent') {
      // 삭제가 선택 전이면 선택 영역을 뒤로 이동
      if (this.isBefore(op.path, op.offset, selection.start.path, selection.start.offset)) {
        const deletedLength = op.length;
        return {
          start: {
            path: selection.start.path,
            offset: Math.max(0, selection.start.offset - deletedLength)
          },
          end: {
            path: selection.end.path,
            offset: Math.max(0, selection.end.offset - deletedLength)
          }
        };
      }
    }
    
    return selection;
  }
}