78 lines
1.9 KiB
JavaScript
78 lines
1.9 KiB
JavaScript
/* globals Y, d3 */
|
|
|
|
let y = new Y({
|
|
connector: {
|
|
name: 'websockets-client',
|
|
url: 'http://127.0.0.1:1234',
|
|
room: 'drawing-example'
|
|
// maxBufferLength: 100
|
|
}
|
|
})
|
|
|
|
window.yDrawing = y
|
|
var drawing = y.share.drawing
|
|
var renderPath = d3.svg.line()
|
|
.x(function (d) { return d[0] })
|
|
.y(function (d) { return d[1] })
|
|
.interpolate('basis')
|
|
|
|
var svg = d3.select('#drawingCanvas')
|
|
.call(d3.behavior.drag()
|
|
.on('dragstart', dragstart)
|
|
.on('drag', drag)
|
|
.on('dragend', dragend))
|
|
|
|
// create line from a shared array object and update the line when the array changes
|
|
function drawLine (yarray) {
|
|
var line = svg.append('path').datum(yarray.toArray())
|
|
line.attr('d', renderPath)
|
|
yarray.observe(function (event) {
|
|
line.remove()
|
|
line = svg.append('path').datum(yarray.toArray())
|
|
line.attr('d', renderPath)
|
|
})
|
|
}
|
|
// call drawLine every time an array is appended
|
|
y.share.drawing.observe(function (event) {
|
|
event.changedKeys.forEach(function (key) {
|
|
let path = y.share.drawing.get(key)
|
|
if (path === undefined) {
|
|
svg.selectAll('path').remove()
|
|
} else {
|
|
drawLine(path)
|
|
}
|
|
})
|
|
})
|
|
// draw all existing content
|
|
for (var i = 0; i < drawing.length; i++) {
|
|
drawLine(drawing.get(i))
|
|
}
|
|
|
|
// clear canvas on request
|
|
document.querySelector('#clearDrawingCanvas').onclick = function () {
|
|
drawing.delete(0, drawing.length)
|
|
}
|
|
|
|
var sharedLine = null
|
|
function dragstart () {
|
|
drawing.insert(drawing.length, [Y.Array])
|
|
sharedLine = drawing.get(drawing.length - 1)
|
|
}
|
|
|
|
// After one dragged event is recognized, we ignore them for 33ms.
|
|
var ignoreDrag = null
|
|
function drag () {
|
|
if (sharedLine != null && ignoreDrag == null) {
|
|
ignoreDrag = window.setTimeout(function () {
|
|
ignoreDrag = null
|
|
}, 33)
|
|
sharedLine.push([d3.mouse(this)])
|
|
}
|
|
}
|
|
|
|
function dragend () {
|
|
sharedLine = null
|
|
window.clearTimeout(ignoreDrag)
|
|
ignoreDrag = null
|
|
}
|