diff --git a/public/counter.html b/public/counter.html index 23e4137c7..7e910cf02 100644 --- a/public/counter.html +++ b/public/counter.html @@ -13,26 +13,30 @@ -
peers:
-
+
Online clients:
+
- - + - + main(); + + diff --git a/public/editor.html b/public/editor.html deleted file mode 100644 index 99257a263..000000000 --- a/public/editor.html +++ /dev/null @@ -1,220 +0,0 @@ - - - - - Simple Editor Example - - - -
-
status:
-
-
- - - - - - - -
-
peers:
-
-
document:
-
-
- - - - - - - diff --git a/public/index.html b/public/index.html index d30f47e99..0f53308b3 100644 --- a/public/index.html +++ b/public/index.html @@ -14,8 +14,10 @@
status:
-
peers:
-
+
online clients:
+
document:
text:
@@ -31,7 +33,9 @@ const statusHolder = document.getElementById('network-status'); const placeholder = document.getElementById('placeholder'); - const peersHolder = document.getElementById('peers-holder'); + const onlineClientsHolder = document.getElementById( + 'online-clients-holder', + ); const logHolder = document.getElementById('log-holder'); const textLogHolder = document.getElementById('text-log-holder'); const selectionMap = new Map(); @@ -42,14 +46,14 @@ textLogHolder.innerText = doc.getRoot().content.toTestString(); } - function displayPeers(peers, myClientID) { + function displayOnlineClients(presences, myClientID) { const usernames = []; - for (const { clientID, presence } of peers) { + for (const { clientID, presence } of presences) { usernames.push( clientID === myClientID ? `${clientID}` : clientID, ); } - peersHolder.innerHTML = JSON.stringify(usernames); + onlineClientsHolder.innerHTML = JSON.stringify(usernames); } // https://github.com/codemirror/CodeMirror/pull/5619 @@ -131,19 +135,17 @@ const client = new yorkie.Client('http://localhost:8080'); // 01-2. subscribe client event. client.subscribe(network.statusListener(statusHolder)); - client.subscribe((event) => { - if (event.type === 'peers-changed') { - displayPeers( - client.getPeersByDocKey(doc.getKey()), - client.getID(), - ); - } - }); + // 01-3. activate client await client.activate(); // 02. create a document then attach it into the client. const doc = new yorkie.Document('codemirror'); + doc.subscribe('my-presence', (event) => { + if (event.type === 'initialized') { + displayOnlineClients(doc.getPresences(), client.getID()); + } + }); await client.attach(doc); doc.update((root) => { @@ -160,6 +162,37 @@ displayLog(doc, codemirror); }); + doc.subscribe('others', (event) => { + if (event.type === 'watched') { + displayOnlineClients(doc.getPresences(), client.getID()); + } else if (event.type === 'unwatched') { + displayOnlineClients(doc.getPresences(), client.getID()); + const { clientID } = event.value; + if (selectionMap.has(clientID)) { + const selection = selectionMap.get(clientID); + selection.marker.clear(); + } + } else if (event.type === 'presence-changed') { + const { clientID, presence } = event.value; + const range = doc + .getRoot() + .content.posRangeToIndexRange(presence.selection); + displayRemoteSelection( + codemirror, + { + from: range[0], + to: range[1], + }, + clientID, + ); + } + }); + + doc.subscribe((event) => { + // TODO(hackerwins): Do we need to receive the presence changed events here? + console.log(event); + }); + doc.subscribe('$.content', (event) => { if (event.type === 'remote-change') { const { actor, operations } = event.value; @@ -193,10 +226,12 @@ const to = cm.indexFromPos(change.to); const content = change.text.join('\n'); - doc.update((root) => { - root.content.edit(from, to, content); + doc.update((root, presence) => { + const range = root.content.edit(from, to, content); + presence.set({ + selection: root.content.indexRangeToPosRange(range), + }); }, `update content by ${client.getID()}`); - console.log(`%c local: ${from}-${to}: ${content}`, 'color: green'); }); codemirror.on('change', (cm, change) => { @@ -215,7 +250,6 @@ }); codemirror.on('beforeSelectionChange', (cm, change) => { - // Fix concurrent issue. // NOTE: The following conditional statement ignores cursor changes // that occur while applying remote changes to CodeMirror // and handles only movement by keyboard and mouse. @@ -226,8 +260,10 @@ const from = cm.indexFromPos(change.ranges[0].anchor); const to = cm.indexFromPos(change.ranges[0].head); - doc.update((root) => { - root.content.select(from, to); + doc.update((root, presence) => { + presence.set({ + selection: root.content.indexRangeToPosRange([from, to]), + }); }, `update selection by ${client.getID()}`); }); @@ -246,9 +282,6 @@ const fromIdx = codemirror.posFromIndex(from); const toIdx = codemirror.posFromIndex(to); replaceRangeFix(codemirror, content, fromIdx, toIdx, 'yorkie'); - } else if (op.type === 'select') { - console.log('%c remote selection', 'color: skyblue'); - displayRemoteSelection(codemirror, op, actor); } } } diff --git a/public/multi.html b/public/multi.html index cdb143959..3985629ab 100644 --- a/public/multi.html +++ b/public/multi.html @@ -16,8 +16,10 @@
status:
-
peers:
-
+
online clients:
+

Counter