Skip to content

Commit

Permalink
Replace selection with presence (#578)
Browse files Browse the repository at this point in the history 
* Replace Text.select with presence and update related examples

* Apply new naming convention

---------

Co-authored-by: Youngteac Hong <[email protected]>
  • Loading branch information
@chacha912 @hackerwins
chacha912 and hackerwins authored Jul 19, 2023
1 parent 9e0c431 commit 77083b8
Show file tree
Hide file tree
Showing 30 changed files with 961 additions and 900 deletions.
33 changes: 19 additions & 14 deletions public/counter.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,45 +13,50 @@
<button id="increaseButton">+</button>
<button id="decreaseButton">-</button>
</div>
<div>peers:</div>
<pre style="white-space: pre-wrap"><code id="peers-holder"></code></pre>
<div>Online clients:</div>
<pre
style="white-space: pre-wrap"
><code id="online-clients-holder"></code></pre>
</div>
<script src="./yorkie.js"></script>
<script src="./util.js"></script>
<script>
const statusHolder = document.getElementById('network-status');
const peersHolder = document.getElementById('peers-holder');
const onlineClientsHolder = document.getElementById(
'online-clients-holder',
);
const counter = document.getElementById('counter');
const counterIncreaseButton = document.getElementById('increaseButton');
const counterDecreaseButton = document.getElementById('decreaseButton');

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 ? `<b>${clientID}</b>` : clientID,
);
}
peersHolder.innerHTML = JSON.stringify(usernames);
onlineClientsHolder.innerHTML = JSON.stringify(usernames);
}

async function main() {
try {
// 01. create client with RPCAddr(envoy) then activate it.
const client = new yorkie.Client('http://localhost:8080');
client.subscribe(network.statusListener(statusHolder));
client.subscribe((event) => {
if (event.type === 'peers-changed') {
displayPeers(
client.getPeersByDocKey(doc.getKey()),
client.getID(),
);
}
});
await client.activate();

// 02. create a document then attach it into the client.
const doc = new yorkie.Document('counter');
doc.subscribe('my-presence', (event) => {
if (event.type === 'initialized') {
displayOnlineClients(doc.getPresences(), client.getID());
}
});
doc.subscribe('others', (event) => {
displayOnlineClients(doc.getPresences(), client.getID());
});

await client.attach(doc);

// 03. initialize document properties
Expand Down
273 changes: 166 additions & 107 deletions public/drawing.html
View file
Original file line number Diff line number Diff line change
@@ -1,127 +1,186 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Drawing Example</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>
<div>status: <span id="network-status"></span></div>
<canvas width="500px" height="500px" id="drawing-panel" style='border: 1px solid black;'></canvas>
<div>document:</div>
<pre style="white-space: pre-wrap;"><code id="log-holder"></code></pre>
</div>
<script src="./yorkie.js"></script>
<script src="./util.js"></script>
<script>
const statusHolder = document.getElementById('network-status');
const drawingPanel = document.getElementById('drawing-panel');
const placeholder = document.getElementById('placeholder');
const logHolder = document.getElementById('log-holder');
<head>
<meta charset="UTF-8" />
<title>Drawing Example</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div>
<div>
There are currently <span id="online-clients-count"></span> users!
</div>
<canvas
width="500px"
height="500px"
id="drawing-panel"
style="border: 1px solid black"
></canvas>
<div>Online clients:</div>
<pre
style="white-space: pre-wrap"
><code id="online-clients-log"></code></pre>
<div>document:</div>
<pre style="white-space: pre-wrap"><code id="doc-log"></code></pre>
</div>
<script src="./yorkie.js"></script>
<script>
const drawingPanel = document.getElementById('drawing-panel');
const docPanel = document.getElementById('doc-log');
const onlineClientsPanel = document.getElementById('online-clients-log');
const onlineClientsCount = document.getElementById(
'online-clients-count',
);

function paintCanvas(shapes) {
// TODO Now repainting the whole thing. Only changed parts should be drawn.
const context = drawingPanel.getContext('2d');
context.clearRect(0, 0, 500, 500);

for (const shape of shapes) {
context.beginPath();
let isMoved = false;
for (const p of shape.points) {
if (isMoved === false) {
isMoved = true;
context.moveTo(p.x, p.y);
} else {
context.lineTo(p.x, p.y);
}
}

context.stroke();
function getPoint(e) {
return {
x: e.clientX - drawingPanel.offsetLeft + window.scrollX,
y: e.clientY - drawingPanel.offsetTop + window.scrollY,
};
}
}

function getPoint(e) {
return {
x: e.clientX - (drawingPanel.offsetLeft) + window.scrollX,
y: e.clientY - (drawingPanel.offsetTop) + window.scrollY
};
}

async function main() {
try {
// 01. create client with RPCAddr(envoy) then activate it.
const client = new yorkie.Client('http://localhost:8080', {
syncLoopDuration: 0,
reconnectStreamDelay: 1000
});
client.subscribe(network.statusListener(statusHolder));
await client.activate();
async function main() {
try {
// 01. create client with RPCAddr(envoy) then activate it.
const client = new yorkie.Client('http://localhost:8080', {
syncLoopDuration: 0,
reconnectStreamDelay: 1000,
});
await client.activate();

// 02. create a document then attach it into the client.
const doc = new yorkie.Document('drawing-panel');
await client.attach(doc);
// 02. create a document then attach it into the client.
const doc = new yorkie.Document('drawing-panel');
doc.subscribe('my-presence', (event) => {
displayOnlineClients(doc.getPresences(), client.getID());
if (event.type === 'presence-changed' && doc.getRoot().shapes) {
paintCanvas();
}
});
doc.subscribe('others', (event) => {
displayOnlineClients(doc.getPresences(), client.getID());
paintCanvas();
});
await client.attach(doc);

doc.update((root) => {
if (!root['shapes']) {
root['shapes'] = [];
let draftShape = null;
function displayLog() {
docPanel.innerText = JSON.stringify(doc.getRoot().toJS(), null, 2);
}
}, 'create points if not exists');

doc.subscribe((event) => {
paintCanvas(doc.getRoot().shapes);
});
await client.sync();
function displayOnlineClients() {
const clients = doc.getPresences();
onlineClientsCount.innerHTML = clients.length;
onlineClientsPanel.innerText = JSON.stringify(clients, null, 2);
}
function paintCanvas() {
// TODO Now repainting the whole thing. Only changed parts should be drawn.
const context = drawingPanel.getContext('2d');
context.clearRect(0, 0, 500, 500);

document.addEventListener('mousedown', (e) => {
if (!window.isMouseDown) {
window.isMouseDown = true;
const point = getPoint(e);
if (point.x < 0 || point.y < 0 ||
point.x > 500 || point.y > 500) {
return;
const shapes = doc.getRoot().shapes;
for (const shape of shapes) {
context.beginPath();
let isMoved = false;
for (const p of shape.points) {
if (isMoved === false) {
isMoved = true;
context.moveTo(p.x, p.y);
} else {
context.lineTo(p.x, p.y);
}
}
context.stroke();
}

doc.update((root) => {
root.shapes.push({
points: [point]
});
const shape = root.shapes.getLast();
window.currentID = shape.getID();
}, `update content by ${client.getID()}`);
const clients = doc.getPresences();
for (const client of clients) {
if (client.presence.draftShape) {
context.beginPath();
let isMoved = false;
for (const p of client.presence.draftShape.points) {
if (isMoved === false) {
isMoved = true;
context.moveTo(p.x, p.y);
} else {
context.lineTo(p.x, p.y);
}
}
context.stroke();
}
}
}
});

document.addEventListener('mousemove', (e) => {
if (window.isMouseDown) {
const point = getPoint(e);
if (point.x < 0 || point.y < 0 ||
point.x > 500 || point.y > 500) {
return;
doc.update((root) => {
if (!root.shapes) {
root.shapes = [];
}
}, 'create points if not exists');

doc.update((root) => {
const shape = root.shapes.getElementByID(window.currentID);
shape.points.push(point);
paintCanvas(root.shapes);
}, `update content by ${client.getID()}`);
}
});
doc.subscribe((event) => {
displayLog();
paintCanvas();
});

document.addEventListener('mouseup', (e) => {
if (window.isMouseDown) {
window.isMouseDown = false;
}
});
document.addEventListener('mousedown', (e) => {
if (!window.isMouseDown) {
const point = getPoint(e);
if (
point.x < 0 ||
point.y < 0 ||
point.x > 500 ||
point.y > 500
) {
return;
}
window.isMouseDown = true;

// 05. set initial value.
paintCanvas(doc.getRoot().shapes);
} catch (e) {
console.error(e);
draftShape = { points: [point] };
doc.update((root, presence) => {
presence.set({ draftShape });
});
}
});

document.addEventListener('mousemove', (e) => {
if (window.isMouseDown) {
const point = getPoint(e);
if (
point.x < 0 ||
point.y < 0 ||
point.x > 500 ||
point.y > 500
) {
return;
}

draftShape.points.push(point);
doc.update((root, presence) => {
presence.set({ draftShape });
});
}
});

document.addEventListener('mouseup', (e) => {
if (window.isMouseDown) {
window.isMouseDown = false;
doc.update((root, presence) => {
if (draftShape) {
root.shapes.push(draftShape);
draftShape = null;
}
presence.set({ draftShape: null });
});
}
});

// 05. set initial value.
paintCanvas();
displayLog();
} catch (e) {
console.error(e);
}
}
}

main();
</script>
</body>
main();
</script>
</body>
</html>
Loading

0 comments on commit 77083b8

Please sign in to comment.