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

work on drawing demo

Browse Source
This commit is contained in:
Kevin Jahns 2017-12-06 19:20:52 -08:00
parent 4efa16e2dd
commit 8105bef1af
2 changed files with 73 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
examples/drawing/index.html
View File

@ -12,12 +12,8 @@
</style> </style>
<button type="button" id="clearDrawingCanvas">Clear Drawing</button> <button type="button" id="clearDrawingCanvas">Clear Drawing</button>
<svg id="drawingCanvas" viewbox="0 0 100 100" width="100%"></svg> <svg id="drawingCanvas" viewbox="0 0 100 100" width="100%"></svg>
<script src="../../y.js"></script> <script src="../yjs-dist.js"></script>
<script src="../../../y-array/y-array.js"></script> <script src="./canvasjs.min.js"></script>
<script src="../../../y-map/dist/y-map.js"></script>
<script src="../../../y-memory/y-memory.js"></script>
<script src="../../../y-websockets-client/y-websockets-client.js"></script>
<script src="../bower_components/d3/d3.js"></script>
<script src="./index.js"></script> <script src="./index.js"></script>
</body> </body>
</html> </html>

35
examples/drawing/index.js
View File

@ -1,20 +1,14 @@
/* globals Y, d3 */ /* globals Y, d3 */
'strict mode'
Y({ let y = new Y({
db: {
name: 'memory'
},
connector: { connector: {
name: 'websockets-client', name: 'websockets-client',
room: 'drawing-example', url: 'http://127.0.0.1:1234',
url: 'localhost:1234' room: 'drawing-example'
}, // maxBufferLength: 100
sourceDir: '/bower_components',
share: {
drawing: 'Array'
} }
}).then(function (y) { })
window.yDrawing = y window.yDrawing = y
var drawing = y.share.drawing var drawing = y.share.drawing
var renderPath = d3.svg.line() var renderPath = d3.svg.line()
@ -33,22 +27,22 @@ Y({
var line = svg.append('path').datum(yarray.toArray()) var line = svg.append('path').datum(yarray.toArray())
line.attr('d', renderPath) line.attr('d', renderPath)
yarray.observe(function (event) { yarray.observe(function (event) {
// we only implement insert events that are appended to the end of the array line.remove()
event.values.forEach(function (value) { line = svg.append('path').datum(yarray.toArray())
line.datum().push(value)
})
line.attr('d', renderPath) line.attr('d', renderPath)
}) })
} }
// call drawLine every time an array is appended // call drawLine every time an array is appended
y.share.drawing.observe(function (event) { y.share.drawing.observe(function (event) {
if (event.type === 'insert') { event.changedKeys.forEach(function (key) {
event.values.forEach(drawLine) let path = y.share.drawing.get(key)
} else { if (path === undefined) {
// just remove all elements (thats what we do anyway)
svg.selectAll('path').remove() svg.selectAll('path').remove()
} else {
drawLine(path)
} }
}) })
})
// draw all existing content // draw all existing content
for (var i = 0; i < drawing.length; i++) { for (var i = 0; i < drawing.length; i++) {
drawLine(drawing.get(i)) drawLine(drawing.get(i))
@ -81,4 +75,3 @@ Y({
window.clearTimeout(ignoreDrag) window.clearTimeout(ignoreDrag)
ignoreDrag = null ignoreDrag = null
} }
})