85 lines
2.1 KiB
JavaScript
85 lines
2.1 KiB
JavaScript
/* globals Y, d3 */
|
|
'strict mode'
|
|
|
|
Y({
|
|
db: {
|
|
name: 'memory'
|
|
},
|
|
connector: {
|
|
name: 'websockets-client',
|
|
room: 'drawing-example'
|
|
// url: 'localhost:1234'
|
|
},
|
|
sourceDir: '/bower_components',
|
|
share: {
|
|
drawing: 'Array'
|
|
}
|
|
}).then(function (y) {
|
|
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) {
|
|
// we only implement insert events that are appended to the end of the array
|
|
event.values.forEach(function (value) {
|
|
line.datum().push(value)
|
|
})
|
|
line.attr('d', renderPath)
|
|
})
|
|
}
|
|
// call drawLine every time an array is appended
|
|
y.share.drawing.observe(function (event) {
|
|
if (event.type === 'insert') {
|
|
event.values.forEach(drawLine)
|
|
} else {
|
|
// just remove all elements (thats what we do anyway)
|
|
svg.selectAll('path').remove()
|
|
}
|
|
})
|
|
// 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
|
|
}
|
|
})
|