@textbus/collaborate 4.0.0-alpha.6 → 4.0.0-alpha.61

Sign up to get free protection for your applications and to get access to all the features.
package/bundles/index.js CHANGED
@@ -4,6 +4,7 @@ var core$1 = require('@viewfly/core');
4
4
  var stream = require('@tanbo/stream');
5
5
  var core = require('@textbus/core');
6
6
  var yjs = require('yjs');
7
+ var yWebsocket = require('y-websocket');
7
8
 
8
9
  /******************************************************************************
9
10
  Copyright (c) Microsoft Corporation.
@@ -43,38 +44,38 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
43
44
  };
44
45
 
45
46
  const collaborateErrorFn = core.makeError('Collaborate');
46
- class ContentMap {
47
+ class SlotMap {
47
48
  constructor() {
48
49
  this.slotAndYTextMap = new WeakMap();
49
- this.yTextAndSLotMap = new WeakMap();
50
+ this.yTextAndSlotMap = new WeakMap();
50
51
  }
51
52
  set(key, value) {
52
53
  if (key instanceof core.Slot) {
53
54
  this.slotAndYTextMap.set(key, value);
54
- this.yTextAndSLotMap.set(value, key);
55
+ this.yTextAndSlotMap.set(value, key);
55
56
  }
56
57
  else {
57
58
  this.slotAndYTextMap.set(value, key);
58
- this.yTextAndSLotMap.set(key, value);
59
+ this.yTextAndSlotMap.set(key, value);
59
60
  }
60
61
  }
61
62
  get(key) {
62
63
  if (key instanceof core.Slot) {
63
64
  return this.slotAndYTextMap.get(key) || null;
64
65
  }
65
- return this.yTextAndSLotMap.get(key) || null;
66
+ return this.yTextAndSlotMap.get(key) || null;
66
67
  }
67
68
  delete(key) {
68
69
  if (key instanceof core.Slot) {
69
70
  const v = this.slotAndYTextMap.get(key);
70
71
  this.slotAndYTextMap.delete(key);
71
72
  if (v) {
72
- this.yTextAndSLotMap.delete(v);
73
+ this.yTextAndSlotMap.delete(v);
73
74
  }
74
75
  }
75
76
  else {
76
- const v = this.yTextAndSLotMap.get(key);
77
- this.yTextAndSLotMap.delete(key);
77
+ const v = this.yTextAndSlotMap.get(key);
78
+ this.yTextAndSlotMap.delete(key);
78
79
  if (v) {
79
80
  this.slotAndYTextMap.delete(v);
80
81
  }
@@ -107,13 +108,9 @@ exports.Collaborate = class Collaborate {
107
108
  this.manager = null;
108
109
  this.subscriptions = [];
109
110
  this.updateFromRemote = false;
110
- this.contentSyncCaches = new WeakMap();
111
- this.slotStateSyncCaches = new WeakMap();
112
- this.slotsSyncCaches = new WeakMap();
113
- this.componentStateSyncCaches = new WeakMap();
114
111
  this.localChangesAppliedEvent = new stream.Subject();
115
112
  this.selectionChangeEvent = new stream.Subject();
116
- this.contentMap = new ContentMap();
113
+ this.slotMap = new SlotMap();
117
114
  this.updateRemoteActions = [];
118
115
  this.noRecord = {};
119
116
  this.historyItems = [];
@@ -148,7 +145,7 @@ exports.Collaborate = class Collaborate {
148
145
  this.subscriptions.push(this.scheduler.onLocalChangeBefore.subscribe(() => {
149
146
  beforePosition = this.getRelativeCursorLocation();
150
147
  }));
151
- manager.on('stack-item-added', event => {
148
+ manager.on('stack-item-added', (event) => {
152
149
  if (event.type === 'undo') {
153
150
  if (event.origin === manager) {
154
151
  this.index++;
@@ -260,50 +257,145 @@ exports.Collaborate = class Collaborate {
260
257
  (_a = this.manager) === null || _a === void 0 ? void 0 : _a.destroy();
261
258
  }
262
259
  syncRootComponent(root, rootComponent) {
263
- let slots = root.get('slots');
264
- if (!slots) {
265
- slots = new yjs.Array();
266
- rootComponent.slots.toArray().forEach(i => {
267
- const sharedSlot = this.createSharedSlotBySlot(i);
268
- slots.push([sharedSlot]);
269
- });
260
+ let state = root.get('state');
261
+ if (!state) {
262
+ state = new yjs.Map();
263
+ this.syncLocalMapToSharedMap(rootComponent.state, state);
270
264
  this.yDoc.transact(() => {
271
- root.set('state', rootComponent.state);
272
- root.set('slots', slots);
265
+ root.set('state', state);
273
266
  });
274
267
  }
275
- else if (slots.length === 0) {
276
- rootComponent.updateState(() => {
277
- return root.get('state');
268
+ else {
269
+ Object.keys(rootComponent.state).forEach(key => {
270
+ Reflect.deleteProperty(rootComponent.state, key);
278
271
  });
279
- this.yDoc.transact(() => {
280
- rootComponent.slots.toArray().forEach(i => {
281
- const sharedSlot = this.createSharedSlotBySlot(i);
282
- slots.push([sharedSlot]);
272
+ this.syncSharedMapToLocalMap(state, rootComponent.state);
273
+ }
274
+ }
275
+ syncSharedMapToLocalMap(sharedMap, localMap) {
276
+ sharedMap.forEach((value, key) => {
277
+ localMap[key] = this.createLocalModelBySharedByModel(value);
278
+ });
279
+ this.syncObject(sharedMap, localMap);
280
+ }
281
+ createLocalMapBySharedMap(sharedMap) {
282
+ const localMap = core.createObjectProxy({});
283
+ this.syncSharedMapToLocalMap(sharedMap, localMap);
284
+ return localMap;
285
+ }
286
+ createLocalArrayBySharedArray(sharedArray) {
287
+ const localArray = core.createArrayProxy([]);
288
+ localArray.push(...sharedArray.map(item => this.createLocalModelBySharedByModel(item)));
289
+ this.syncArray(sharedArray, localArray);
290
+ return localArray;
291
+ }
292
+ syncLocalMapToSharedMap(localMap, sharedMap) {
293
+ Object.entries(localMap).forEach(([key, value]) => {
294
+ sharedMap.set(key, this.createSharedModelByLocalModel(value));
295
+ });
296
+ this.syncObject(sharedMap, localMap);
297
+ }
298
+ createSharedMapByLocalMap(localMap) {
299
+ const sharedMap = new yjs.Map();
300
+ this.syncLocalMapToSharedMap(localMap, sharedMap);
301
+ return sharedMap;
302
+ }
303
+ createSharedArrayByLocalArray(localArray) {
304
+ const sharedArray = new yjs.Array();
305
+ localArray.forEach(value => {
306
+ sharedArray.push([this.createSharedModelByLocalModel(value)]);
307
+ });
308
+ this.syncArray(sharedArray, localArray);
309
+ return sharedArray;
310
+ }
311
+ createSharedSlotByLocalSlot(localSlot) {
312
+ const sharedSlot = new yjs.Text();
313
+ sharedSlot.setAttribute('__schema__', [...localSlot.schema]);
314
+ let offset = 0;
315
+ localSlot.toDelta().forEach(i => {
316
+ let formats = {};
317
+ if (i.formats) {
318
+ i.formats.forEach(item => {
319
+ formats[item[0].name] = item[1];
283
320
  });
284
- });
321
+ }
322
+ else {
323
+ formats = null;
324
+ }
325
+ if (typeof i.insert === 'string') {
326
+ sharedSlot.insert(offset, i.insert, formats);
327
+ }
328
+ else {
329
+ const sharedComponent = this.createSharedComponentByLocalComponent(i.insert);
330
+ sharedSlot.insertEmbed(offset, sharedComponent, formats);
331
+ }
332
+ offset += i.insert.length;
333
+ });
334
+ localSlot.getAttributes().forEach(item => {
335
+ sharedSlot.setAttribute(item[0].name, item[1]);
336
+ });
337
+ this.syncSlot(sharedSlot, localSlot);
338
+ return sharedSlot;
339
+ }
340
+ createLocalSlotBySharedSlot(sharedSlot) {
341
+ const delta = sharedSlot.toDelta();
342
+ const localSlot = new core.Slot(sharedSlot.getAttribute('__schema__') || []); // TODO 这里有潜在的问题
343
+ const attrs = sharedSlot.getAttributes();
344
+ Object.keys(attrs).forEach(key => {
345
+ const attribute = this.registry.getAttribute(key);
346
+ if (attribute) {
347
+ localSlot.setAttribute(attribute, attrs[key]);
348
+ }
349
+ });
350
+ for (const action of delta) {
351
+ if (action.insert) {
352
+ if (typeof action.insert === 'string') {
353
+ const formats = remoteFormatsToLocal(this.registry, action.attributes);
354
+ localSlot.insert(action.insert, formats);
355
+ }
356
+ else {
357
+ const sharedComponent = action.insert;
358
+ const component = this.createLocalComponentBySharedComponent(sharedComponent);
359
+ localSlot.insert(component, remoteFormatsToLocal(this.registry, action.attributes));
360
+ }
361
+ }
362
+ else {
363
+ throw collaborateErrorFn('unexpected delta action.');
364
+ }
285
365
  }
286
- else {
287
- rootComponent.updateState(() => {
288
- return root.get('state');
289
- });
290
- rootComponent.slots.clean();
291
- slots.forEach(sharedSlot => {
292
- const slot = this.createSlotBySharedSlot(sharedSlot);
293
- this.syncSlotContent(sharedSlot.get('content'), slot);
294
- this.syncSlotState(sharedSlot, slot);
295
- rootComponent.slots.insert(slot);
296
- });
366
+ this.syncSlot(sharedSlot, localSlot);
367
+ return localSlot;
368
+ }
369
+ createSharedModelByLocalModel(localModel) {
370
+ if (localModel instanceof core.Slot) {
371
+ return this.createSharedSlotByLocalSlot(localModel);
372
+ }
373
+ if (Array.isArray(localModel)) {
374
+ return this.createSharedArrayByLocalArray(localModel);
375
+ }
376
+ if (typeof localModel === 'object' && localModel !== null) {
377
+ return this.createSharedMapByLocalMap(localModel);
297
378
  }
298
- this.syncComponentState(root, rootComponent);
299
- this.syncComponentSlots(slots, rootComponent);
379
+ return localModel;
380
+ }
381
+ createLocalModelBySharedByModel(sharedModel) {
382
+ if (sharedModel instanceof yjs.Map) {
383
+ return this.createLocalMapBySharedMap(sharedModel);
384
+ }
385
+ if (sharedModel instanceof yjs.Array) {
386
+ return this.createLocalArrayBySharedArray(sharedModel);
387
+ }
388
+ if (sharedModel instanceof yjs.Text) {
389
+ return this.createLocalSlotBySharedSlot(sharedModel);
390
+ }
391
+ return sharedModel;
300
392
  }
301
393
  getAbstractSelection(position) {
302
394
  const anchorPosition = yjs.createAbsolutePositionFromRelativePosition(position.anchor, this.yDoc);
303
395
  const focusPosition = yjs.createAbsolutePositionFromRelativePosition(position.focus, this.yDoc);
304
396
  if (anchorPosition && focusPosition) {
305
- const focusSlot = this.contentMap.get(focusPosition.type);
306
- const anchorSlot = this.contentMap.get(anchorPosition.type);
397
+ const focusSlot = this.slotMap.get(focusPosition.type);
398
+ const anchorSlot = this.slotMap.get(anchorPosition.type);
307
399
  if (focusSlot && anchorSlot) {
308
400
  return {
309
401
  anchorSlot,
@@ -318,11 +410,11 @@ exports.Collaborate = class Collaborate {
318
410
  getRelativeCursorLocation() {
319
411
  const { anchorSlot, anchorOffset, focusSlot, focusOffset } = this.selection;
320
412
  if (anchorSlot) {
321
- const anchorYText = this.contentMap.get(anchorSlot);
413
+ const anchorYText = this.slotMap.get(anchorSlot);
322
414
  if (anchorYText) {
323
415
  const anchorPosition = yjs.createRelativePositionFromTypeIndex(anchorYText, anchorOffset);
324
416
  if (focusSlot) {
325
- const focusYText = this.contentMap.get(focusSlot);
417
+ const focusYText = this.slotMap.get(focusSlot);
326
418
  if (focusYText) {
327
419
  const focusPosition = yjs.createRelativePositionFromTypeIndex(focusYText, focusOffset);
328
420
  return {
@@ -335,11 +427,10 @@ exports.Collaborate = class Collaborate {
335
427
  }
336
428
  return null;
337
429
  }
338
- syncSlotContent(content, slot) {
339
- this.contentMap.set(slot, content);
430
+ syncSlot(sharedSlot, localSlot) {
340
431
  const syncRemote = (ev, tr) => {
341
432
  this.runRemoteUpdate(tr, () => {
342
- slot.retain(0);
433
+ localSlot.retain(0);
343
434
  ev.keysChanged.forEach(key => {
344
435
  const change = ev.keys.get(key);
345
436
  if (!change) {
@@ -349,13 +440,13 @@ exports.Collaborate = class Collaborate {
349
440
  if (updateType === 'update' || updateType === 'add') {
350
441
  const attribute = this.registry.getAttribute(key);
351
442
  if (attribute) {
352
- slot.setAttribute(attribute, content.getAttribute(key));
443
+ localSlot.setAttribute(attribute, sharedSlot.getAttribute(key));
353
444
  }
354
445
  }
355
446
  else if (updateType === 'delete') {
356
447
  const attribute = this.registry.getAttribute(key);
357
448
  if (attribute) {
358
- slot.removeAttribute(attribute);
449
+ localSlot.removeAttribute(attribute);
359
450
  }
360
451
  }
361
452
  });
@@ -364,54 +455,52 @@ exports.Collaborate = class Collaborate {
364
455
  if (action.attributes) {
365
456
  const formats = remoteFormatsToLocal(this.registry, action.attributes);
366
457
  if (formats.length) {
367
- slot.retain(action.retain, formats);
458
+ localSlot.retain(action.retain, formats);
368
459
  }
369
- slot.retain(slot.index + action.retain);
460
+ localSlot.retain(localSlot.index + action.retain);
370
461
  }
371
462
  else {
372
- slot.retain(action.retain);
463
+ localSlot.retain(action.retain);
373
464
  }
374
465
  }
375
466
  else if (action.insert) {
376
- const index = slot.index;
467
+ const index = localSlot.index;
377
468
  let length = 1;
378
469
  if (typeof action.insert === 'string') {
379
470
  length = action.insert.length;
380
- slot.insert(action.insert, remoteFormatsToLocal(this.registry, action.attributes));
471
+ localSlot.insert(action.insert, remoteFormatsToLocal(this.registry, action.attributes));
381
472
  }
382
473
  else {
383
474
  const sharedComponent = action.insert;
384
- const component = this.createComponentBySharedComponent(sharedComponent);
385
- this.syncComponentSlots(sharedComponent.get('slots'), component);
386
- this.syncComponentState(sharedComponent, component);
387
- slot.insert(component);
475
+ const component = this.createLocalComponentBySharedComponent(sharedComponent);
476
+ localSlot.insert(component);
388
477
  }
389
478
  if (this.selection.isSelected && tr.origin !== this.manager) {
390
- if (slot === this.selection.anchorSlot && this.selection.anchorOffset > index) {
391
- this.selection.setAnchor(slot, this.selection.anchorOffset + length);
479
+ if (localSlot === this.selection.anchorSlot && this.selection.anchorOffset > index) {
480
+ this.selection.setAnchor(localSlot, this.selection.anchorOffset + length);
392
481
  }
393
- if (slot === this.selection.focusSlot && this.selection.focusOffset > index) {
394
- this.selection.setFocus(slot, this.selection.focusOffset + length);
482
+ if (localSlot === this.selection.focusSlot && this.selection.focusOffset > index) {
483
+ this.selection.setFocus(localSlot, this.selection.focusOffset + length);
395
484
  }
396
485
  }
397
486
  }
398
487
  else if (action.delete) {
399
- const index = slot.index;
400
- slot.delete(action.delete);
488
+ const index = localSlot.index;
489
+ localSlot.delete(action.delete);
401
490
  if (this.selection.isSelected && tr.origin !== this.manager) {
402
- if (slot === this.selection.anchorSlot && this.selection.anchorOffset >= index) {
403
- this.selection.setAnchor(slot, this.selection.startOffset - action.delete);
491
+ if (localSlot === this.selection.anchorSlot && this.selection.anchorOffset >= index) {
492
+ this.selection.setAnchor(localSlot, this.selection.startOffset - action.delete);
404
493
  }
405
- if (slot === this.selection.focusSlot && this.selection.focusOffset >= index) {
406
- this.selection.setFocus(slot, this.selection.focusOffset - action.delete);
494
+ if (localSlot === this.selection.focusSlot && this.selection.focusOffset >= index) {
495
+ this.selection.setFocus(localSlot, this.selection.focusOffset - action.delete);
407
496
  }
408
497
  }
409
498
  }
410
499
  });
411
500
  });
412
501
  };
413
- content.observe(syncRemote);
414
- const sub = slot.onContentChange.subscribe(actions => {
502
+ sharedSlot.observe(syncRemote);
503
+ const sub = localSlot.onContentChange.subscribe(actions => {
415
504
  this.runLocalUpdate(() => {
416
505
  var _a;
417
506
  let offset = 0;
@@ -430,170 +519,176 @@ exports.Collaborate = class Collaborate {
430
519
  }
431
520
  });
432
521
  if (length) {
433
- content.format(offset, action.offset, formats);
522
+ sharedSlot.format(offset, action.offset, formats);
434
523
  }
435
524
  }
436
525
  else {
437
526
  offset = action.offset;
438
527
  }
439
528
  }
440
- else if (action.type === 'insert') {
441
- const delta = content.toDelta();
529
+ else if (action.type === 'contentInsert') {
530
+ const delta = sharedSlot.toDelta();
442
531
  const isEmpty = delta.length === 1 && delta[0].insert === core.Slot.emptyPlaceholder;
443
532
  if (typeof action.content === 'string') {
444
533
  length = action.content.length;
445
- content.insert(offset, action.content, action.formats || {});
534
+ sharedSlot.insert(offset, action.content, action.formats || {});
446
535
  }
447
536
  else {
448
537
  length = 1;
449
- const sharedComponent = this.createSharedComponentByComponent(action.ref);
450
- content.insertEmbed(offset, sharedComponent, action.formats || {});
538
+ const sharedComponent = this.createSharedComponentByLocalComponent(action.ref);
539
+ sharedSlot.insertEmbed(offset, sharedComponent, action.formats || {});
451
540
  }
452
541
  if (isEmpty && offset === 0) {
453
- content.delete(content.length - 1, 1);
542
+ sharedSlot.delete(sharedSlot.length - 1, 1);
454
543
  }
455
544
  offset += length;
456
545
  }
457
546
  else if (action.type === 'delete') {
458
- const delta = content.toDelta();
459
- if (content.length) {
460
- content.delete(offset, action.count);
547
+ const delta = sharedSlot.toDelta();
548
+ if (sharedSlot.length) {
549
+ sharedSlot.delete(offset, action.count);
461
550
  }
462
- if (content.length === 0) {
463
- content.insert(0, '\n', (_a = delta[0]) === null || _a === void 0 ? void 0 : _a.attributes);
551
+ if (sharedSlot.length === 0) {
552
+ sharedSlot.insert(0, '\n', (_a = delta[0]) === null || _a === void 0 ? void 0 : _a.attributes);
464
553
  }
465
554
  }
466
555
  else if (action.type === 'attrSet') {
467
- content.setAttribute(action.name, action.value);
556
+ sharedSlot.setAttribute(action.name, action.value);
468
557
  }
469
- else if (action.type === 'attrRemove') {
470
- content.removeAttribute(action.name);
558
+ else if (action.type === 'attrDelete') {
559
+ sharedSlot.removeAttribute(action.name);
471
560
  }
472
561
  }
473
562
  });
474
563
  });
475
- sub.add(slot.onChildComponentRemove.subscribe(components => {
476
- components.forEach(c => {
477
- this.cleanSubscriptionsByComponent(c);
478
- });
479
- }));
480
- this.contentSyncCaches.set(slot, () => {
481
- content.unobserve(syncRemote);
564
+ this.slotMap.set(localSlot, sharedSlot);
565
+ localSlot.__changeMarker__.destroyCallbacks.push(() => {
566
+ this.slotMap.delete(localSlot);
567
+ sharedSlot.unobserve(syncRemote);
482
568
  sub.unsubscribe();
483
569
  });
484
570
  }
485
- syncSlotState(remoteSlot, slot) {
486
- const syncRemote = (ev, tr) => {
487
- this.runRemoteUpdate(tr, () => {
488
- ev.keysChanged.forEach(key => {
489
- if (key === 'state') {
490
- const state = ev.target.get('state');
491
- slot.updateState(draft => {
492
- if (typeof draft === 'object' && draft !== null) {
493
- Object.assign(draft, state);
571
+ createSharedComponentByLocalComponent(component) {
572
+ const sharedComponent = new yjs.Map();
573
+ const sharedState = this.createSharedMapByLocalMap(component.state);
574
+ sharedComponent.set('name', component.name);
575
+ sharedComponent.set('state', sharedState);
576
+ return sharedComponent;
577
+ }
578
+ createLocalComponentBySharedComponent(yMap) {
579
+ const componentName = yMap.get('name');
580
+ const sharedState = yMap.get('state');
581
+ const state = this.createLocalMapBySharedMap(sharedState);
582
+ const instance = this.registry.createComponentByData(componentName, state);
583
+ if (instance) {
584
+ return instance;
585
+ }
586
+ throw collaborateErrorFn(`cannot find component factory \`${componentName}\`.`);
587
+ }
588
+ /**
589
+ * 双向同步数组
590
+ * @param sharedArray
591
+ * @param localArray
592
+ * @private
593
+ */
594
+ syncArray(sharedArray, localArray) {
595
+ const sub = localArray.__changeMarker__.onSelfChange.subscribe((actions) => {
596
+ this.runLocalUpdate(() => {
597
+ let index = 0;
598
+ for (const action of actions) {
599
+ switch (action.type) {
600
+ case 'retain':
601
+ index = action.offset;
602
+ break;
603
+ case 'insert':
604
+ {
605
+ const ref = action.ref;
606
+ if (!Array.isArray(ref)) {
607
+ throw collaborateErrorFn('The insertion action must have a reference value.');
608
+ }
609
+ const data = ref.map(item => {
610
+ return this.createSharedModelByLocalModel(item);
611
+ });
612
+ sharedArray.insert(index, data);
494
613
  }
495
- else {
496
- return state;
614
+ break;
615
+ case 'delete':
616
+ if (action.count <= 0) {
617
+ break;
497
618
  }
498
- });
619
+ sharedArray.delete(index, action.count);
620
+ break;
621
+ case 'setIndex':
622
+ sharedArray.delete(action.index, 1);
623
+ sharedArray.insert(action.index, [this.createSharedModelByLocalModel(action.ref)]);
624
+ break;
499
625
  }
500
- });
626
+ }
501
627
  });
502
- };
503
- remoteSlot.observe(syncRemote);
504
- const sub = slot.onStateChange.subscribe(change => {
505
- this.runLocalUpdate(() => {
506
- remoteSlot.set('state', change.newState);
507
- }, change.record);
508
628
  });
509
- this.slotStateSyncCaches.set(slot, () => {
510
- remoteSlot.unobserve(syncRemote);
511
- sub.unsubscribe();
512
- });
513
- }
514
- syncComponentSlots(remoteSlots, component) {
515
- const slots = component.slots;
516
629
  const syncRemote = (ev, tr) => {
517
630
  this.runRemoteUpdate(tr, () => {
518
631
  let index = 0;
519
- slots.retain(index);
520
- ev.delta.forEach(action => {
632
+ ev.delta.forEach((action) => {
521
633
  if (Reflect.has(action, 'retain')) {
522
634
  index += action.retain;
523
- slots.retain(index);
524
635
  }
525
636
  else if (action.insert) {
526
- action.insert.forEach(item => {
527
- const slot = this.createSlotBySharedSlot(item);
528
- slots.insert(slot);
529
- this.syncSlotContent(item.get('content'), slot);
530
- this.syncSlotState(item, slot);
531
- index++;
637
+ const data = action.insert.map((item) => {
638
+ return this.createLocalModelBySharedByModel(item);
532
639
  });
640
+ localArray.splice(index, 0, ...data);
641
+ index += data.length;
533
642
  }
534
643
  else if (action.delete) {
535
- slots.retain(index);
536
- slots.delete(action.delete);
644
+ localArray.splice(index, action.delete);
537
645
  }
538
646
  });
539
647
  });
540
648
  };
541
- remoteSlots.observe(syncRemote);
542
- const sub = slots.onChange.subscribe(operations => {
543
- this.runLocalUpdate(() => {
544
- const applyActions = operations.apply;
545
- let index;
546
- applyActions.forEach(action => {
547
- if (action.type === 'retain') {
548
- index = action.offset;
549
- }
550
- else if (action.type === 'insertSlot') {
551
- const sharedSlot = this.createSharedSlotBySlot(action.ref);
552
- remoteSlots.insert(index, [sharedSlot]);
553
- index++;
554
- }
555
- else if (action.type === 'delete') {
556
- remoteSlots.delete(index, action.count);
557
- }
558
- });
559
- });
560
- });
561
- sub.add(slots.onChildSlotRemove.subscribe(slots => {
562
- slots.forEach(slot => {
563
- this.cleanSubscriptionsBySlot(slot);
564
- });
565
- }));
566
- this.slotsSyncCaches.set(component, () => {
567
- remoteSlots.unobserve(syncRemote);
649
+ sharedArray.observe(syncRemote);
650
+ localArray.__changeMarker__.destroyCallbacks.push(() => {
568
651
  sub.unsubscribe();
652
+ sharedArray.unobserve(syncRemote);
569
653
  });
570
654
  }
571
- syncComponentState(remoteComponent, component) {
655
+ /**
656
+ * 双向同步对象
657
+ * @param sharedObject
658
+ * @param localObject
659
+ * @private
660
+ */
661
+ syncObject(sharedObject, localObject) {
572
662
  const syncRemote = (ev, tr) => {
573
663
  this.runRemoteUpdate(tr, () => {
574
- ev.keysChanged.forEach(key => {
575
- if (key === 'state') {
576
- const state = ev.target.get('state');
577
- component.updateState(draft => {
578
- if (typeof draft === 'object' && draft !== null) {
579
- Object.assign(draft, state);
580
- }
581
- else {
582
- return state;
583
- }
584
- });
664
+ ev.changes.keys.forEach((item, key) => {
665
+ if (item.action === 'add' || item.action === 'update') {
666
+ const value = sharedObject.get(key);
667
+ localObject[key] = this.createLocalModelBySharedByModel(value);
668
+ }
669
+ else {
670
+ Reflect.deleteProperty(localObject, key);
585
671
  }
586
672
  });
587
673
  });
588
674
  };
589
- remoteComponent.observe(syncRemote);
590
- const sub = component.onStateChange.subscribe(change => {
675
+ sharedObject.observe(syncRemote);
676
+ const sub = localObject.__changeMarker__.onSelfChange.subscribe((actions) => {
591
677
  this.runLocalUpdate(() => {
592
- remoteComponent.set('state', change.newState);
593
- }, change.record);
678
+ for (const action of actions) {
679
+ switch (action.type) {
680
+ case 'propSet':
681
+ sharedObject.set(action.key, this.createSharedModelByLocalModel(action.ref));
682
+ break;
683
+ case 'propDelete':
684
+ sharedObject.delete(action.key);
685
+ break;
686
+ }
687
+ }
688
+ });
594
689
  });
595
- this.componentStateSyncCaches.set(component, () => {
596
- remoteComponent.unobserve(syncRemote);
690
+ localObject.__changeMarker__.destroyCallbacks.push(function () {
691
+ sharedObject.unobserve(syncRemote);
597
692
  sub.unsubscribe();
598
693
  });
599
694
  }
@@ -619,140 +714,6 @@ exports.Collaborate = class Collaborate {
619
714
  }
620
715
  this.updateFromRemote = false;
621
716
  }
622
- createSharedComponentByComponent(component) {
623
- const sharedComponent = new yjs.Map();
624
- sharedComponent.set('state', component.state);
625
- sharedComponent.set('name', component.name);
626
- const sharedSlots = new yjs.Array();
627
- sharedComponent.set('slots', sharedSlots);
628
- component.slots.toArray().forEach(slot => {
629
- const sharedSlot = this.createSharedSlotBySlot(slot);
630
- sharedSlots.push([sharedSlot]);
631
- });
632
- this.syncComponentSlots(sharedSlots, component);
633
- this.syncComponentState(sharedComponent, component);
634
- return sharedComponent;
635
- }
636
- createSharedSlotBySlot(slot) {
637
- const sharedSlot = new yjs.Map();
638
- sharedSlot.set('schema', slot.schema);
639
- sharedSlot.set('state', slot.state);
640
- const sharedContent = new yjs.Text();
641
- sharedSlot.set('content', sharedContent);
642
- let offset = 0;
643
- slot.toDelta().forEach(i => {
644
- let formats = {};
645
- if (i.formats) {
646
- i.formats.forEach(item => {
647
- formats[item[0].name] = item[1];
648
- });
649
- }
650
- else {
651
- formats = null;
652
- }
653
- if (typeof i.insert === 'string') {
654
- sharedContent.insert(offset, i.insert, formats);
655
- }
656
- else {
657
- const sharedComponent = this.createSharedComponentByComponent(i.insert);
658
- sharedContent.insertEmbed(offset, sharedComponent, formats);
659
- }
660
- offset += i.insert.length;
661
- });
662
- slot.getAttributes().forEach(item => {
663
- sharedContent.setAttribute(item[0].name, item[1]);
664
- });
665
- this.syncSlotContent(sharedContent, slot);
666
- this.syncSlotState(sharedSlot, slot);
667
- return sharedSlot;
668
- }
669
- createComponentBySharedComponent(yMap) {
670
- const sharedSlots = yMap.get('slots');
671
- const slots = [];
672
- sharedSlots.forEach(sharedSlot => {
673
- const slot = this.createSlotBySharedSlot(sharedSlot);
674
- slots.push(slot);
675
- });
676
- const name = yMap.get('name');
677
- const state = yMap.get('state');
678
- const instance = this.registry.createComponentByData(name, {
679
- state,
680
- slots
681
- });
682
- if (instance) {
683
- instance.slots.toArray().forEach((slot, index) => {
684
- let sharedSlot = sharedSlots.get(index);
685
- if (!sharedSlot) {
686
- sharedSlot = this.createSharedSlotBySlot(slot);
687
- sharedSlots.push([sharedSlot]);
688
- }
689
- this.syncSlotState(sharedSlot, slot);
690
- this.syncSlotContent(sharedSlot.get('content'), slot);
691
- });
692
- return instance;
693
- }
694
- throw collaborateErrorFn(`cannot find component factory \`${name}\`.`);
695
- }
696
- createSlotBySharedSlot(sharedSlot) {
697
- const content = sharedSlot.get('content');
698
- const delta = content.toDelta();
699
- const slot = this.registry.createSlot({
700
- schema: sharedSlot.get('schema'),
701
- state: sharedSlot.get('state'),
702
- attributes: {},
703
- formats: {},
704
- content: []
705
- });
706
- const attrs = content.getAttributes();
707
- Object.keys(attrs).forEach(key => {
708
- const attribute = this.registry.getAttribute(key);
709
- if (attribute) {
710
- slot.setAttribute(attribute, attrs[key]);
711
- }
712
- });
713
- for (const action of delta) {
714
- if (action.insert) {
715
- if (typeof action.insert === 'string') {
716
- const formats = remoteFormatsToLocal(this.registry, action.attributes);
717
- slot.insert(action.insert, formats);
718
- }
719
- else {
720
- const sharedComponent = action.insert;
721
- const component = this.createComponentBySharedComponent(sharedComponent);
722
- slot.insert(component, remoteFormatsToLocal(this.registry, action.attributes));
723
- this.syncComponentSlots(sharedComponent.get('slots'), component);
724
- this.syncComponentState(sharedComponent, component);
725
- }
726
- }
727
- else {
728
- throw collaborateErrorFn('unexpected delta action.');
729
- }
730
- }
731
- return slot;
732
- }
733
- cleanSubscriptionsBySlot(slot) {
734
- this.contentMap.delete(slot);
735
- [this.contentSyncCaches.get(slot), this.slotStateSyncCaches.get(slot)].forEach(fn => {
736
- if (fn) {
737
- fn();
738
- }
739
- });
740
- slot.sliceContent().forEach(i => {
741
- if (typeof i !== 'string') {
742
- this.cleanSubscriptionsByComponent(i);
743
- }
744
- });
745
- }
746
- cleanSubscriptionsByComponent(component) {
747
- [this.slotsSyncCaches.get(component), this.componentStateSyncCaches.get(component)].forEach(fn => {
748
- if (fn) {
749
- fn();
750
- }
751
- });
752
- component.slots.toArray().forEach(slot => {
753
- this.cleanSubscriptionsBySlot(slot);
754
- });
755
- }
756
717
  };
757
718
  exports.Collaborate = __decorate([
758
719
  core$1.Injectable(),
@@ -777,16 +738,82 @@ function remoteFormatsToLocal(registry, attrs) {
777
738
  return formats;
778
739
  }
779
740
 
741
+ exports.UserActivity = class UserActivity {
742
+ constructor(websocketProvider, selection) {
743
+ this.websocketProvider = websocketProvider;
744
+ this.selection = selection;
745
+ this.stateChangeEvent = new stream.Subject();
746
+ this.userChangeEvent = new stream.Subject();
747
+ this.subscription = new stream.Subscription();
748
+ this.onStateChange = this.stateChangeEvent.asObservable();
749
+ this.onUserChange = this.userChangeEvent.asObservable();
750
+ }
751
+ init(userinfo) {
752
+ const provide = this.websocketProvider;
753
+ provide.awareness.setLocalStateField('user', userinfo);
754
+ this.subscription.add(this.selection.onChange.subscribe(() => {
755
+ const selection = this.selection.getPaths();
756
+ provide.awareness.setLocalStateField('selection', Object.assign(Object.assign({}, userinfo), { selection }));
757
+ }));
758
+ provide.awareness.on('update', () => {
759
+ const users = [];
760
+ const remoteSelections = [];
761
+ provide.awareness.getStates().forEach(state => {
762
+ if (state.user) {
763
+ users.push(state.user);
764
+ }
765
+ if (state.selection) {
766
+ remoteSelections.push(state.selection);
767
+ }
768
+ });
769
+ const selections = remoteSelections.filter(i => i.id !== userinfo.id);
770
+ this.userChangeEvent.next(users);
771
+ this.stateChangeEvent.next(selections);
772
+ });
773
+ }
774
+ destroy() {
775
+ this.subscription.unsubscribe();
776
+ }
777
+ };
778
+ exports.UserActivity = __decorate([
779
+ core$1.Injectable(),
780
+ __metadata("design:paramtypes", [yWebsocket.WebsocketProvider,
781
+ core.Selection])
782
+ ], exports.UserActivity);
783
+
780
784
  class CollaborateModule {
781
- constructor() {
785
+ constructor(config) {
786
+ this.config = config;
782
787
  this.providers = [
783
788
  exports.Collaborate,
789
+ exports.UserActivity,
784
790
  {
785
791
  provide: core.History,
786
792
  useExisting: exports.Collaborate
793
+ }, {
794
+ provide: yWebsocket.WebsocketProvider,
795
+ useFactory: (collab) => {
796
+ return new yWebsocket.WebsocketProvider(this.config.url, this.config.roomName, collab.yDoc);
797
+ },
798
+ deps: [exports.Collaborate]
787
799
  }
788
800
  ];
789
801
  }
802
+ setup(textbus) {
803
+ const provide = textbus.get(yWebsocket.WebsocketProvider);
804
+ const userActivity = textbus.get(exports.UserActivity);
805
+ userActivity.init(this.config.userinfo);
806
+ return new Promise((resolve) => {
807
+ provide.on('sync', (is) => {
808
+ if (is) {
809
+ resolve(() => {
810
+ provide.disconnect();
811
+ userActivity.destroy();
812
+ });
813
+ }
814
+ });
815
+ });
816
+ }
790
817
  }
791
818
 
792
819
  exports.CollaborateModule = CollaborateModule;