yonote/yjs
23
0
Fork 0
Code Pull Requests 1 Releases Activity

added drawing example

Browse Source
This commit is contained in:
Kevin Jahns 2016-04-30 23:00:23 +01:00
parent 76ebd3043d
commit e2f93af86e
7 changed files with 6809 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
Examples/Drawing/index.html Normal file
View File

@ -0,0 +1,19 @@
<!DOCTYPE html>
<html>
<body>
<style>
path {
fill: none;
stroke: blue;
stroke-width: 1px;
stroke-linejoin: round;
stroke-linecap: round;
}
</style>
<button type="button" id="clearDrawingCanvas">Clear Drawing</button>
<svg id="drawingCanvas" viewbox="0 0 100 100" width="100%"></svg>
<script src="../bower_components/yjs/y.js"></script>
<script src="../bower_components/d3/d3.js"></script>
<script src="./index.js"></script>
</body>
</html>

88
Examples/Drawing/index.js Normal file
View File

@ -0,0 +1,88 @@
/* 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().then(function (values) {
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++) {
drawing.get(i).then(drawLine)
}
// 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])
drawing.get(drawing.length - 1).then(function (array) {
sharedLine = array
})
}
// 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
}
})

5
Examples/bower.json
View File

@ -18,10 +18,11 @@
"y-websockets-client": "latest",
"y-text": "latest",
"y-indexeddb": "latest",
"y-xml": "latest",
"y-xml": "latest",
"quill": "~0.20.1",
"ace": "~1.2.3",
"ace-builds": "~1.2.3",
"jquery": "~2.2.2"
"jquery": "~2.2.2",
"d3": "^3.5.16"
}
}

4
y.es6
View File

@ -2894,9 +2894,9 @@ module.exports = function (Y /* : any*/) {
I tried to optimize this for performance, therefore no highlevel operations.
*/
class SmallLookupBuffer extends Store {
constructor (arg) {
constructor (arg1, arg2) {
// super(...arguments) -- do this when this is supported by stable nodejs
super(arg)
super(arg1, arg2)
this.writeBuffer = createEmptyOpsArray(5)
this.readBuffer = createEmptyOpsArray(10)
}

2
y.es6.map
View File

File diff suppressed because one or more lines are too long

6698
y.js
View File

File diff suppressed because one or more lines are too long

2
y.js.map
View File

File diff suppressed because one or more lines are too long