init
This commit is contained in:
呈祥
+42
@@ -0,0 +1,42 @@
|
||||
#root {
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 6em;
|
||||
padding: 1.5em;
|
||||
will-change: filter;
|
||||
transition: filter 300ms;
|
||||
}
|
||||
.logo:hover {
|
||||
filter: drop-shadow(0 0 2em #646cffaa);
|
||||
}
|
||||
.logo.react:hover {
|
||||
filter: drop-shadow(0 0 2em #61dafbaa);
|
||||
}
|
||||
|
||||
@keyframes logo-spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
a:nth-of-type(2) .logo {
|
||||
animation: logo-spin infinite 20s linear;
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 2em;
|
||||
}
|
||||
|
||||
.read-the-docs {
|
||||
color: #888;
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
import "./App.css";
|
||||
|
||||
function App() {
|
||||
return <div>he</div>;
|
||||
}
|
||||
|
||||
export default App;
|
||||
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 4.0 KiB |
@@ -0,0 +1,68 @@
|
||||
:root {
|
||||
font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
font-weight: 400;
|
||||
|
||||
color-scheme: light dark;
|
||||
color: rgba(255, 255, 255, 0.87);
|
||||
background-color: #242424;
|
||||
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
a {
|
||||
font-weight: 500;
|
||||
color: #646cff;
|
||||
text-decoration: inherit;
|
||||
}
|
||||
a:hover {
|
||||
color: #535bf2;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
place-items: center;
|
||||
min-width: 320px;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 3.2em;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
button {
|
||||
border-radius: 8px;
|
||||
border: 1px solid transparent;
|
||||
padding: 0.6em 1.2em;
|
||||
font-size: 1em;
|
||||
font-weight: 500;
|
||||
font-family: inherit;
|
||||
background-color: #1a1a1a;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.25s;
|
||||
}
|
||||
button:hover {
|
||||
border-color: #646cff;
|
||||
}
|
||||
button:focus,
|
||||
button:focus-visible {
|
||||
outline: 4px auto -webkit-focus-ring-color;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root {
|
||||
color: #213547;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
a:hover {
|
||||
color: #747bff;
|
||||
}
|
||||
button {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
import { StrictMode } from 'react'
|
||||
import { createRoot } from 'react-dom/client'
|
||||
import './index.css'
|
||||
import App from './App.tsx'
|
||||
|
||||
createRoot(document.getElementById('root')!).render(
|
||||
<StrictMode>
|
||||
<App />
|
||||
</StrictMode>,
|
||||
)
|
||||
@@ -0,0 +1,83 @@
|
||||
// 客户端实现
|
||||
import { SimpleTextOperation as TextOperation } from "./op";
|
||||
import { getDemoServerInstance } from "./server";
|
||||
|
||||
// 直接获取server实例，这里省略了网络过程
|
||||
const server = getDemoServerInstance();
|
||||
|
||||
export class Client {
|
||||
// 当前文档
|
||||
public document: string = "";
|
||||
// 当前服务端文档状态
|
||||
public syncedDoc: string = "";
|
||||
// 下一个期望的修订号
|
||||
public revision: number;
|
||||
// 正在处理的操作，已经发送给服务端等待确认
|
||||
public outstanding: TextOperation | null = null;
|
||||
// 本地缓存的待发送操作队列（包含outstanding）
|
||||
public buffer: TextOperation[] = [];
|
||||
|
||||
constructor() {
|
||||
// 模拟连接服务器，获取初始文档状态和修订版本号
|
||||
const { document, revision } = server.connect(this);
|
||||
this.revision = revision;
|
||||
this.document = document;
|
||||
}
|
||||
|
||||
// 当用户更改文档时调用此方法
|
||||
applyClient(operation: TextOperation): void {
|
||||
this.document = operation.apply(this.document);
|
||||
this.buffer.push(operation);
|
||||
this.sendOperationIfNeed();
|
||||
}
|
||||
|
||||
// 接收到来自服务器的新操作，可能是另一个客户端的操作，也可能是服务端确认本地操作的响应
|
||||
applyServer(revision: number, operation: TextOperation): void {
|
||||
if (revision < 0 || this.revision < revision) {
|
||||
throw new Error("operation revision not in history");
|
||||
}
|
||||
|
||||
for (let i = 0; i < this.buffer.length; i++) {
|
||||
// TODO: check
|
||||
// 将buffer中的操作转换为基于服务端文档状态的操作
|
||||
this.buffer[i] = TextOperation.transform(this.buffer[i], this.buffer[i - 1] || operation)[0];
|
||||
}
|
||||
|
||||
// 本地重新应用buffer中的操作，合并其它客户端的操作到本地
|
||||
let newDoc = this.syncedDoc;
|
||||
for (let i = 0; i < this.buffer.length; i++) {
|
||||
newDoc = this.buffer[i].apply(newDoc);
|
||||
}
|
||||
this.document = newDoc;
|
||||
|
||||
// 更新本地同步状态
|
||||
this.syncedDoc = operation.apply(this.syncedDoc);
|
||||
this.revision = revision;
|
||||
|
||||
// 操作来自服务端确认本地操作的响应
|
||||
if (operation.id === this.outstanding?.id) {
|
||||
this.outstanding = null;
|
||||
this.serverAck();
|
||||
}
|
||||
}
|
||||
|
||||
// 服务端已确认收到发送的操作，从buffer中移除该操作，尝试发送下一个
|
||||
serverAck(): void {
|
||||
this.outstanding = null;
|
||||
this.buffer.shift();
|
||||
this.sendOperationIfNeed();
|
||||
}
|
||||
|
||||
// 逐个向服务端发送本地待提交的操作。发送后等待服务端确认，触发serverAck方法后继续发送下一个操作
|
||||
async sendOperationIfNeed() {
|
||||
if (this.outstanding || this.buffer.length === 0) {
|
||||
// 有正在发送的操作，或者没有待提交的操作，no-op
|
||||
return;
|
||||
}
|
||||
// 向服务端发送本地待提交的操作，这里没有实现操作压缩，我们一个一个发送
|
||||
this.outstanding = this.buffer[0];
|
||||
// 模拟向服务端发送操作，实际实现应该通过网络
|
||||
server.receiveOperation(this.revision, this.outstanding);
|
||||
// 应该有超时重发机制，这里没有实现
|
||||
}
|
||||
}
|
||||
+155
@@ -0,0 +1,155 @@
|
||||
// 简单文本操作的实现
|
||||
import { v4 as uuidv4 } from 'uuid';
|
||||
|
||||
export abstract class SimpleTextOperation {
|
||||
id: string = uuidv4();
|
||||
abstract toString(): string;
|
||||
abstract equals(other: SimpleTextOperation): boolean;
|
||||
abstract apply(doc: string): string;
|
||||
|
||||
static transform(a: SimpleTextOperation, b: SimpleTextOperation): [SimpleTextOperation, SimpleTextOperation] {
|
||||
if (a instanceof Noop || b instanceof Noop) {
|
||||
return [a, b];
|
||||
}
|
||||
|
||||
if (a instanceof Insert && b instanceof Insert) {
|
||||
if (a.position < b.position || (a.position === b.position && a.str < b.str)) {
|
||||
return [a, new Insert(b.str, b.position + a.str.length)];
|
||||
}
|
||||
if (a.position > b.position || (a.position === b.position && a.str > b.str)) {
|
||||
return [new Insert(a.str, a.position + b.str.length), b];
|
||||
}
|
||||
return [noop, noop];
|
||||
}
|
||||
|
||||
if (a instanceof Insert && b instanceof Delete) {
|
||||
if (a.position <= b.position) {
|
||||
return [a, new Delete(b.count, b.position + a.str.length)];
|
||||
}
|
||||
if (a.position >= b.position + b.count) {
|
||||
return [new Insert(a.str, a.position - b.count), b];
|
||||
}
|
||||
// 这里，我们必须删除操作 a 插入的字符串。
|
||||
// 这不能保留操作 a 的意图，但这是获得有效转换函数的唯一方法。
|
||||
return [noop, new Delete(b.count + a.str.length, b.position)];
|
||||
}
|
||||
|
||||
if (a instanceof Delete && b instanceof Insert) {
|
||||
if (a.position >= b.position) {
|
||||
return [new Delete(a.count, a.position + b.str.length), b];
|
||||
}
|
||||
if (a.position + a.count <= b.position) {
|
||||
return [a, new Insert(b.str, b.position - a.count)];
|
||||
}
|
||||
// 与上面相同的问题。我们必须删除操作 b 中插入的字符串。
|
||||
return [new Delete(a.count + b.str.length, a.position), noop];
|
||||
}
|
||||
|
||||
if (a instanceof Delete && b instanceof Delete) {
|
||||
if (a.position === b.position) {
|
||||
if (a.count === b.count) {
|
||||
return [noop, noop];
|
||||
} else if (a.count < b.count) {
|
||||
return [noop, new Delete(b.count - a.count, b.position)];
|
||||
}
|
||||
return [new Delete(a.count - b.count, a.position), noop];
|
||||
}
|
||||
if (a.position < b.position) {
|
||||
if (a.position + a.count <= b.position) {
|
||||
return [a, new Delete(b.count, b.position - a.count)];
|
||||
}
|
||||
if (a.position + a.count >= b.position + b.count) {
|
||||
return [new Delete(a.count - b.count, a.position), noop];
|
||||
}
|
||||
return [
|
||||
new Delete(b.position - a.position, a.position),
|
||||
new Delete(b.position + b.count - (a.position + a.count), a.position)
|
||||
];
|
||||
}
|
||||
if (a.position > b.position) {
|
||||
if (a.position >= b.position + b.count) {
|
||||
return [new Delete(a.count, a.position - b.count), b];
|
||||
}
|
||||
if (a.position + a.count <= b.position + b.count) {
|
||||
return [noop, new Delete(b.count - a.count, b.position)];
|
||||
}
|
||||
return [
|
||||
new Delete(a.position + a.count - (b.position + b.count), b.position),
|
||||
new Delete(a.position - b.position, b.position)
|
||||
];
|
||||
}
|
||||
}
|
||||
|
||||
throw new Error('Unsupported operation types for transformation');
|
||||
}
|
||||
}
|
||||
|
||||
// 在文档的从零开始的位置 `position` 插入字符串 `str`
|
||||
export class Insert extends SimpleTextOperation {
|
||||
public str: string;
|
||||
public position: number;
|
||||
|
||||
constructor(str: string, position: number) {
|
||||
super();
|
||||
this.str = str;
|
||||
this.position = position;
|
||||
}
|
||||
|
||||
toString(): string {
|
||||
return 'Insert(' + JSON.stringify(this.str) + ', ' + this.position + ')';
|
||||
}
|
||||
|
||||
equals(other: SimpleTextOperation): boolean {
|
||||
return other instanceof Insert &&
|
||||
this.str === other.str &&
|
||||
this.position === other.position;
|
||||
}
|
||||
|
||||
apply(doc: string): string {
|
||||
return doc.slice(0, this.position) + this.str + doc.slice(this.position);
|
||||
}
|
||||
}
|
||||
|
||||
// 在文档的从零开始的位置 `position` 删除 `count` 个字符
|
||||
export class Delete extends SimpleTextOperation {
|
||||
public count: number;
|
||||
public position: number;
|
||||
|
||||
constructor(count: number, position: number) {
|
||||
super();
|
||||
this.count = count;
|
||||
this.position = position;
|
||||
}
|
||||
|
||||
toString(): string {
|
||||
return 'Delete(' + this.count + ', ' + this.position + ')';
|
||||
}
|
||||
|
||||
equals(other: SimpleTextOperation): boolean {
|
||||
return other instanceof Delete &&
|
||||
this.count === other.count &&
|
||||
this.position === other.position;
|
||||
}
|
||||
|
||||
apply(doc: string): string {
|
||||
return doc.slice(0, this.position) + doc.slice(this.position + this.count);
|
||||
}
|
||||
}
|
||||
|
||||
// 不执行任何操作的操作。这对于转换两个删除相同字符的结果是必需的
|
||||
export class Noop extends SimpleTextOperation {
|
||||
toString(): string {
|
||||
return 'Noop()';
|
||||
}
|
||||
|
||||
equals(other: SimpleTextOperation): boolean {
|
||||
return other instanceof Noop;
|
||||
}
|
||||
|
||||
apply(doc: string): string {
|
||||
return doc;
|
||||
}
|
||||
}
|
||||
|
||||
const noop = new Noop();
|
||||
|
||||
@@ -0,0 +1,56 @@
|
||||
// 操作转换服务器
|
||||
// 接收客户端操作并应用转换
|
||||
|
||||
import type { Client } from './client';
|
||||
import { SimpleTextOperation as TextOperation } from './op';
|
||||
|
||||
class Server {
|
||||
public document: string;
|
||||
public operations: TextOperation[];
|
||||
public clients: Client[] = [];
|
||||
|
||||
// 构造函数。接收当前文档字符串和可选的操作数组
|
||||
constructor(document: string, operations?: TextOperation[]) {
|
||||
this.document = document;
|
||||
this.operations = operations || [];
|
||||
}
|
||||
|
||||
// 每当从客户端接收到操作时调用此方法
|
||||
async receiveOperation(revision: number, operation: TextOperation) {
|
||||
if (revision < 0 || this.operations.length < revision) {
|
||||
throw new Error("operation revision not in history");
|
||||
}
|
||||
// 查找客户端发送操作时不知道的所有操作...
|
||||
const concurrentOperations = this.operations.slice(revision);
|
||||
|
||||
// ...并将操作与所有这些操作进行转换...
|
||||
const transform = TextOperation.transform;
|
||||
for (let i = 0; i < concurrentOperations.length; i++) {
|
||||
// op' = transform(op, op1)
|
||||
// op基于 revision+i 版本的文档操作，op'基于 revision+i+1 版本的文档操作
|
||||
operation = transform(operation, concurrentOperations[i])[0];
|
||||
}
|
||||
|
||||
// ...并将其应用到文档上
|
||||
this.document = operation.apply(this.document);
|
||||
// 将操作存储到历史记录中
|
||||
this.operations.push(operation);
|
||||
|
||||
// 调用者有责任将操作发送给所有连接的客户端并向创建者发送确认
|
||||
return operation;
|
||||
}
|
||||
|
||||
// 模拟客户端连接
|
||||
connect(client: Client) {
|
||||
this.clients.push(client);
|
||||
return {
|
||||
document: this.document,
|
||||
revision: this.operations.length,
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const demoServer = new Server("");
|
||||
export function getDemoServerInstance() {
|
||||
return demoServer;
|
||||
}
|
||||
@@ -0,0 +1,510 @@
|
||||
// TextOperation 类型定义
|
||||
export type Op = number | string; // 正数表示 retain，负数表示 delete，字符串表示 insert
|
||||
|
||||
export class TextOperation {
|
||||
// 操作数组：正数表示 retain，负数表示 delete，字符串表示 insert
|
||||
public ops: Op[] = [];
|
||||
// 操作可以应用到的字符串长度
|
||||
public baseLength: number = 0;
|
||||
// 应用操作后结果字符串的长度
|
||||
public targetLength: number = 0;
|
||||
|
||||
constructor() {
|
||||
// 空构造函数，属性已初始化
|
||||
}
|
||||
|
||||
// 判断操作是否相等
|
||||
equals(other: TextOperation): boolean {
|
||||
if (this.baseLength !== other.baseLength) return false;
|
||||
if (this.targetLength !== other.targetLength) return false;
|
||||
if (this.ops.length !== other.ops.length) return false;
|
||||
for (let i = 0; i < this.ops.length; i++) {
|
||||
if (this.ops[i] !== other.ops[i]) return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
// 判断是否为 retain 操作（正数）
|
||||
static isRetain(op: Op): boolean {
|
||||
return typeof op === 'number' && op > 0;
|
||||
}
|
||||
|
||||
// 判断是否为 insert 操作（字符串）
|
||||
static isInsert(op: Op): boolean {
|
||||
return typeof op === 'string';
|
||||
}
|
||||
|
||||
// 判断是否为 delete 操作（负数）
|
||||
static isDelete(op: Op): boolean {
|
||||
return typeof op === 'number' && op < 0;
|
||||
}
|
||||
|
||||
// 跳过指定数量的字符
|
||||
retain(n: number): this {
|
||||
if (typeof n !== 'number') {
|
||||
throw new Error("retain expects an integer");
|
||||
}
|
||||
if (n === 0) return this;
|
||||
this.baseLength += n;
|
||||
this.targetLength += n;
|
||||
const lastOp = this.ops[this.ops.length - 1];
|
||||
if (TextOperation.isRetain(lastOp)) {
|
||||
// 最后一个操作是 retain，可以合并
|
||||
this.ops[this.ops.length - 1] = (lastOp as number) + n;
|
||||
} else {
|
||||
// 创建新操作
|
||||
this.ops.push(n);
|
||||
}
|
||||
return this;
|
||||
}
|
||||
|
||||
// 在当前位置插入字符串
|
||||
insert(str: string): this {
|
||||
if (typeof str !== 'string') {
|
||||
throw new Error("insert expects a string");
|
||||
}
|
||||
if (str === '') return this;
|
||||
this.targetLength += str.length;
|
||||
const ops = this.ops;
|
||||
const lastOp = ops[ops.length - 1];
|
||||
if (TextOperation.isInsert(lastOp)) {
|
||||
// 合并 insert 操作
|
||||
ops[ops.length - 1] = (lastOp as string) + str;
|
||||
} else if (TextOperation.isDelete(lastOp)) {
|
||||
// 无论操作是 delete(3), insert("something") 还是 insert("something"), delete(3)
|
||||
// 应用时效果相同。这里我们强制 insert 操作总是在 delete 之前
|
||||
// 这使得所有对正确长度文档具有相同效果的操作在 `equals` 方法下相等
|
||||
const secondLastOp = ops[ops.length - 2];
|
||||
if (TextOperation.isInsert(secondLastOp)) {
|
||||
ops[ops.length - 2] = (secondLastOp as string) + str;
|
||||
} else {
|
||||
ops[ops.length] = ops[ops.length - 1];
|
||||
ops[ops.length - 2] = str;
|
||||
}
|
||||
} else {
|
||||
ops.push(str);
|
||||
}
|
||||
return this;
|
||||
}
|
||||
|
||||
// 删除当前位置的字符串
|
||||
delete(n: number | string): this {
|
||||
if (typeof n === 'string') {
|
||||
n = n.length;
|
||||
}
|
||||
if (typeof n !== 'number') {
|
||||
throw new Error("delete expects an integer or a string");
|
||||
}
|
||||
if (n === 0) return this;
|
||||
if (n > 0) n = -n;
|
||||
this.baseLength -= n;
|
||||
const lastOp = this.ops[this.ops.length - 1];
|
||||
if (TextOperation.isDelete(lastOp)) {
|
||||
this.ops[this.ops.length - 1] = (lastOp as number) + n;
|
||||
} else {
|
||||
this.ops.push(n);
|
||||
}
|
||||
return this;
|
||||
}
|
||||
|
||||
// 测试操作是否无效
|
||||
isNoop(): boolean {
|
||||
return this.ops.length === 0 || (this.ops.length === 1 && TextOperation.isRetain(this.ops[0]));
|
||||
}
|
||||
|
||||
// 转换为字符串表示
|
||||
toString(): string {
|
||||
return this.ops.map((op) => {
|
||||
if (TextOperation.isRetain(op)) {
|
||||
return `retain ${op}`;
|
||||
} else if (TextOperation.isInsert(op)) {
|
||||
return `insert '${op}'`;
|
||||
} else {
|
||||
return `delete ${-(op as number)}`;
|
||||
}
|
||||
}).join(', ');
|
||||
}
|
||||
|
||||
// 转换为 JSON
|
||||
toJSON(): Op[] {
|
||||
return this.ops;
|
||||
}
|
||||
|
||||
// 从 JSON 创建操作并验证
|
||||
static fromJSON(ops: Op[]): TextOperation {
|
||||
const o = new TextOperation();
|
||||
for (let i = 0; i < ops.length; i++) {
|
||||
const op = ops[i];
|
||||
if (TextOperation.isRetain(op)) {
|
||||
o.retain(op as number);
|
||||
} else if (TextOperation.isInsert(op)) {
|
||||
o.insert(op as string);
|
||||
} else if (TextOperation.isDelete(op)) {
|
||||
o.delete(op as number);
|
||||
} else {
|
||||
throw new Error(`unknown operation: ${JSON.stringify(op)}`);
|
||||
}
|
||||
}
|
||||
return o;
|
||||
}
|
||||
|
||||
// 将操作应用到字符串，返回新字符串。如果输入字符串和操作不匹配则抛出错误
|
||||
apply(str: string): string {
|
||||
if (str.length !== this.baseLength) {
|
||||
throw new Error("The operation's base length must be equal to the string's length.");
|
||||
}
|
||||
const newStr: string[] = [];
|
||||
let j = 0;
|
||||
let strIndex = 0;
|
||||
const ops = this.ops;
|
||||
for (let i = 0; i < ops.length; i++) {
|
||||
const op = ops[i];
|
||||
if (TextOperation.isRetain(op)) {
|
||||
const retainCount = op as number;
|
||||
if (strIndex + retainCount > str.length) {
|
||||
throw new Error("Operation can't retain more characters than are left in the string.");
|
||||
}
|
||||
// 复制跳过的旧字符串部分
|
||||
newStr[j++] = str.slice(strIndex, strIndex + retainCount);
|
||||
strIndex += retainCount;
|
||||
} else if (TextOperation.isInsert(op)) {
|
||||
// 插入字符串
|
||||
newStr[j++] = op as string;
|
||||
} else {
|
||||
// delete 操作
|
||||
const deleteCount = op as number;
|
||||
strIndex -= deleteCount;
|
||||
}
|
||||
}
|
||||
if (strIndex !== str.length) {
|
||||
throw new Error("The operation didn't operate on the whole string.");
|
||||
}
|
||||
return newStr.join('');
|
||||
}
|
||||
|
||||
// 计算操作的逆操作。逆操作是撤销操作效果的操作
|
||||
invert(str: string): TextOperation {
|
||||
let strIndex = 0;
|
||||
const inverse = new TextOperation();
|
||||
const ops = this.ops;
|
||||
for (let i = 0; i < ops.length; i++) {
|
||||
const op = ops[i];
|
||||
if (TextOperation.isRetain(op)) {
|
||||
const retainCount = op as number;
|
||||
inverse.retain(retainCount);
|
||||
strIndex += retainCount;
|
||||
} else if (TextOperation.isInsert(op)) {
|
||||
inverse.delete((op as string).length);
|
||||
} else {
|
||||
// delete 操作
|
||||
const deleteCount = op as number;
|
||||
inverse.insert(str.slice(strIndex, strIndex - deleteCount));
|
||||
strIndex -= deleteCount;
|
||||
}
|
||||
}
|
||||
return inverse;
|
||||
}
|
||||
|
||||
// 组合两个连续操作为一个操作，保留两者的更改
|
||||
compose(operation2: TextOperation): TextOperation {
|
||||
if (this.targetLength !== operation2.baseLength) {
|
||||
throw new Error("The base length of the second operation has to be the target length of the first operation");
|
||||
}
|
||||
|
||||
const operation = new TextOperation(); // 组合后的操作
|
||||
const ops1 = this.ops;
|
||||
const ops2 = operation2.ops; // 快速访问
|
||||
let i1 = 0;
|
||||
let i2 = 0; // ops1 和 ops2 的当前索引
|
||||
let op1: Op | undefined = ops1[i1++];
|
||||
let op2: Op | undefined = ops2[i2++]; // 当前操作
|
||||
while (true) {
|
||||
// 根据 op1 和 op2 的类型进行分发
|
||||
if (op1 === undefined && op2 === undefined) {
|
||||
// 结束条件：ops1 和 ops2 都已处理
|
||||
break;
|
||||
}
|
||||
|
||||
if (op1 !== undefined && TextOperation.isDelete(op1)) {
|
||||
operation.delete(op1 as number);
|
||||
op1 = ops1[i1++];
|
||||
continue;
|
||||
}
|
||||
if (op2 !== undefined && TextOperation.isInsert(op2)) {
|
||||
operation.insert(op2 as string);
|
||||
op2 = ops2[i2++];
|
||||
continue;
|
||||
}
|
||||
|
||||
if (op1 === undefined) {
|
||||
throw new Error("Cannot compose operations: first operation is too short.");
|
||||
}
|
||||
if (op2 === undefined) {
|
||||
throw new Error("Cannot compose operations: first operation is too long.");
|
||||
}
|
||||
|
||||
if (TextOperation.isRetain(op1) && TextOperation.isRetain(op2)) {
|
||||
const retain1 = op1 as number;
|
||||
const retain2 = op2 as number;
|
||||
if (retain1 > retain2) {
|
||||
operation.retain(retain2);
|
||||
op1 = retain1 - retain2;
|
||||
op2 = ops2[i2++];
|
||||
} else if (retain1 === retain2) {
|
||||
operation.retain(retain1);
|
||||
op1 = ops1[i1++];
|
||||
op2 = ops2[i2++];
|
||||
} else {
|
||||
operation.retain(retain1);
|
||||
op2 = retain2 - retain1;
|
||||
op1 = ops1[i1++];
|
||||
}
|
||||
} else if (TextOperation.isInsert(op1) && TextOperation.isDelete(op2)) {
|
||||
const insert1 = op1 as string;
|
||||
const delete2 = op2 as number;
|
||||
if (insert1.length > -delete2) {
|
||||
op1 = insert1.slice(-delete2);
|
||||
op2 = ops2[i2++];
|
||||
} else if (insert1.length === -delete2) {
|
||||
op1 = ops1[i1++];
|
||||
op2 = ops2[i2++];
|
||||
} else {
|
||||
op2 = delete2 + insert1.length;
|
||||
op1 = ops1[i1++];
|
||||
}
|
||||
} else if (TextOperation.isInsert(op1) && TextOperation.isRetain(op2)) {
|
||||
const insert1 = op1 as string;
|
||||
const retain2 = op2 as number;
|
||||
if (insert1.length > retain2) {
|
||||
operation.insert(insert1.slice(0, retain2));
|
||||
op1 = insert1.slice(retain2);
|
||||
op2 = ops2[i2++];
|
||||
} else if (insert1.length === retain2) {
|
||||
operation.insert(insert1);
|
||||
op1 = ops1[i1++];
|
||||
op2 = ops2[i2++];
|
||||
} else {
|
||||
operation.insert(insert1);
|
||||
op2 = retain2 - insert1.length;
|
||||
op1 = ops1[i1++];
|
||||
}
|
||||
} else if (TextOperation.isRetain(op1) && TextOperation.isDelete(op2)) {
|
||||
const retain1 = op1 as number;
|
||||
const delete2 = op2 as number;
|
||||
if (retain1 > -delete2) {
|
||||
operation.delete(delete2);
|
||||
op1 = retain1 + delete2;
|
||||
op2 = ops2[i2++];
|
||||
} else if (retain1 === -delete2) {
|
||||
operation.delete(delete2);
|
||||
op1 = ops1[i1++];
|
||||
op2 = ops2[i2++];
|
||||
} else {
|
||||
operation.delete(retain1);
|
||||
op2 = delete2 + retain1;
|
||||
op1 = ops1[i1++];
|
||||
}
|
||||
} else {
|
||||
throw new Error(
|
||||
`This shouldn't happen: op1: ${JSON.stringify(op1)}, op2: ${JSON.stringify(op2)}`
|
||||
);
|
||||
}
|
||||
}
|
||||
return operation;
|
||||
}
|
||||
|
||||
// 判断两个操作是否应该组合
|
||||
shouldBeComposedWith(other: TextOperation): boolean {
|
||||
if (this.isNoop() || other.isNoop()) return true;
|
||||
|
||||
const startA = getStartIndex(this);
|
||||
const startB = getStartIndex(other);
|
||||
const simpleA = getSimpleOp(this);
|
||||
const simpleB = getSimpleOp(other);
|
||||
if (!simpleA || !simpleB) return false;
|
||||
|
||||
if (TextOperation.isInsert(simpleA) && TextOperation.isInsert(simpleB)) {
|
||||
return startA + (simpleA as string).length === startB;
|
||||
}
|
||||
|
||||
if (TextOperation.isDelete(simpleA) && TextOperation.isDelete(simpleB)) {
|
||||
// 有两种删除方式：使用退格键和使用删除键
|
||||
const deleteB = simpleB as number;
|
||||
return (startB - deleteB === startA) || startA === startB;
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
// 判断两个操作在反转后是否应该组合
|
||||
shouldBeComposedWithInverted(other: TextOperation): boolean {
|
||||
if (this.isNoop() || other.isNoop()) return true;
|
||||
|
||||
const startA = getStartIndex(this);
|
||||
const startB = getStartIndex(other);
|
||||
const simpleA = getSimpleOp(this);
|
||||
const simpleB = getSimpleOp(other);
|
||||
if (!simpleA || !simpleB) return false;
|
||||
|
||||
if (TextOperation.isInsert(simpleA) && TextOperation.isInsert(simpleB)) {
|
||||
return startA + (simpleA as string).length === startB || startA === startB;
|
||||
}
|
||||
|
||||
if (TextOperation.isDelete(simpleA) && TextOperation.isDelete(simpleB)) {
|
||||
const deleteB = simpleB as number;
|
||||
return startB - deleteB === startA;
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
// 转换两个并发操作，产生两个操作 A' 和 B'，使得
|
||||
// apply(apply(S, A), B') = apply(apply(S, B), A')
|
||||
static transform(operation1: TextOperation, operation2: TextOperation): [TextOperation, TextOperation] {
|
||||
if (operation1.baseLength !== operation2.baseLength) {
|
||||
throw new Error("Both operations have to have the same base length");
|
||||
}
|
||||
|
||||
const operation1prime = new TextOperation();
|
||||
const operation2prime = new TextOperation();
|
||||
const ops1 = operation1.ops;
|
||||
const ops2 = operation2.ops;
|
||||
let i1 = 0;
|
||||
let i2 = 0;
|
||||
let op1: Op | undefined = ops1[i1++];
|
||||
let op2: Op | undefined = ops2[i2++];
|
||||
while (true) {
|
||||
// 在循环的每次迭代中，操作 operation1 和 operation2 的
|
||||
// 在输入字符串上操作的假想光标必须在输入字符串中具有相同的位置
|
||||
|
||||
if (op1 === undefined && op2 === undefined) {
|
||||
// 结束条件：ops1 和 ops2 都已处理
|
||||
break;
|
||||
}
|
||||
|
||||
// 接下来两种情况：一个或两个操作都是 insert 操作
|
||||
// => 在相应的 prime 操作中插入字符串，在另一个中跳过
|
||||
// 如果 op1 和 op2 都是 insert 操作，优先 op1
|
||||
if (op1 !== undefined && TextOperation.isInsert(op1)) {
|
||||
operation1prime.insert(op1 as string);
|
||||
operation2prime.retain((op1 as string).length);
|
||||
op1 = ops1[i1++];
|
||||
continue;
|
||||
}
|
||||
if (op2 !== undefined && TextOperation.isInsert(op2)) {
|
||||
operation1prime.retain((op2 as string).length);
|
||||
operation2prime.insert(op2 as string);
|
||||
op2 = ops2[i2++];
|
||||
continue;
|
||||
}
|
||||
|
||||
if (op1 === undefined) {
|
||||
throw new Error("Cannot compose operations: first operation is too short.");
|
||||
}
|
||||
if (op2 === undefined) {
|
||||
throw new Error("Cannot compose operations: first operation is too long.");
|
||||
}
|
||||
|
||||
let minl: number;
|
||||
if (TextOperation.isRetain(op1) && TextOperation.isRetain(op2)) {
|
||||
// 简单情况：retain/retain
|
||||
const retain1 = op1 as number;
|
||||
const retain2 = op2 as number;
|
||||
if (retain1 > retain2) {
|
||||
minl = retain2;
|
||||
op1 = retain1 - retain2;
|
||||
op2 = ops2[i2++];
|
||||
} else if (retain1 === retain2) {
|
||||
minl = retain2;
|
||||
op1 = ops1[i1++];
|
||||
op2 = ops2[i2++];
|
||||
} else {
|
||||
minl = retain1;
|
||||
op2 = retain2 - retain1;
|
||||
op1 = ops1[i1++];
|
||||
}
|
||||
operation1prime.retain(minl);
|
||||
operation2prime.retain(minl);
|
||||
} else if (TextOperation.isDelete(op1) && TextOperation.isDelete(op2)) {
|
||||
// 两个操作都在同一位置删除相同的字符串
|
||||
// 我们不需要产生任何操作，只需跳过 delete 操作并处理一个操作删除比另一个更多的情况
|
||||
const delete1 = op1 as number;
|
||||
const delete2 = op2 as number;
|
||||
if (-delete1 > -delete2) {
|
||||
op1 = delete1 - delete2;
|
||||
op2 = ops2[i2++];
|
||||
} else if (delete1 === delete2) {
|
||||
op1 = ops1[i1++];
|
||||
op2 = ops2[i2++];
|
||||
} else {
|
||||
op2 = delete2 - delete1;
|
||||
op1 = ops1[i1++];
|
||||
}
|
||||
// 接下来两种情况：delete/retain 和 retain/delete
|
||||
} else if (TextOperation.isDelete(op1) && TextOperation.isRetain(op2)) {
|
||||
const delete1 = op1 as number;
|
||||
const retain2 = op2 as number;
|
||||
if (-delete1 > retain2) {
|
||||
minl = retain2;
|
||||
op1 = delete1 + retain2;
|
||||
op2 = ops2[i2++];
|
||||
} else if (-delete1 === retain2) {
|
||||
minl = retain2;
|
||||
op1 = ops1[i1++];
|
||||
op2 = ops2[i2++];
|
||||
} else {
|
||||
minl = -delete1;
|
||||
op2 = retain2 + delete1;
|
||||
op1 = ops1[i1++];
|
||||
}
|
||||
operation1prime.delete(minl);
|
||||
} else if (TextOperation.isRetain(op1) && TextOperation.isDelete(op2)) {
|
||||
const retain1 = op1 as number;
|
||||
const delete2 = op2 as number;
|
||||
if (retain1 > -delete2) {
|
||||
minl = -delete2;
|
||||
op1 = retain1 + delete2;
|
||||
op2 = ops2[i2++];
|
||||
} else if (retain1 === -delete2) {
|
||||
minl = retain1;
|
||||
op1 = ops1[i1++];
|
||||
op2 = ops2[i2++];
|
||||
} else {
|
||||
minl = retain1;
|
||||
op2 = delete2 + retain1;
|
||||
op1 = ops1[i1++];
|
||||
}
|
||||
operation2prime.delete(minl);
|
||||
} else {
|
||||
throw new Error("The two operations aren't compatible");
|
||||
}
|
||||
}
|
||||
|
||||
return [operation1prime, operation2prime];
|
||||
}
|
||||
}
|
||||
|
||||
// 辅助函数：获取简单操作
|
||||
function getSimpleOp(operation: TextOperation): Op | null {
|
||||
const ops = operation.ops;
|
||||
switch (ops.length) {
|
||||
case 1:
|
||||
return ops[0];
|
||||
case 2:
|
||||
return TextOperation.isRetain(ops[0]) ? ops[1] : (TextOperation.isRetain(ops[1]) ? ops[0] : null);
|
||||
case 3:
|
||||
if (TextOperation.isRetain(ops[0]) && TextOperation.isRetain(ops[2])) {
|
||||
return ops[1];
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
// 辅助函数：获取起始索引
|
||||
function getStartIndex(operation: TextOperation): number {
|
||||
const firstOp = operation.ops[0];
|
||||
if (firstOp !== undefined && TextOperation.isRetain(firstOp)) {
|
||||
return firstOp as number;
|
||||
}
|
||||
return 0;
|
||||
}
|
||||
Reference in New Issue
Block a user