work on drawing demo

examples/drawing/index.html

@@ -12,12 +12,8 @@
   </style>
   <button type="button" id="clearDrawingCanvas">Clear Drawing</button>
   <svg id="drawingCanvas" viewbox="0 0 100 100" width="100%"></svg>
-  <script src="../../y.js"></script>
-  <script src="../../../y-array/y-array.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="../yjs-dist.js"></script>
+  <script src="./canvasjs.min.js"></script>
   <script src="./index.js"></script>
 </body>
 </html>

examples/drawing/index.js

@@ -1,20 +1,14 @@
 /* globals Y, d3 */
-'strict mode'
 
-Y({
-  db: {
-    name: 'memory'
-  },
+let y = new Y({
   connector: {
     name: 'websockets-client',
-    room: 'drawing-example',
-    url: 'localhost:1234'
-  },
-  sourceDir: '/bower_components',
-  share: {
-    drawing: 'Array'
+    url: 'http://127.0.0.1:1234',
+    room: 'drawing-example'
+    // maxBufferLength: 100
   }
-}).then(function (y) {
+})
+
 window.yDrawing = y
 var drawing = y.share.drawing
 var renderPath = d3.svg.line()
@@ -33,22 +27,22 @@ Y({
   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.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) {
-    if (event.type === 'insert') {
-      event.values.forEach(drawLine)
-    } else {
-      // just remove all elements (thats what we do anyway)
+  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))
@@ -81,4 +75,3 @@ Y({
   window.clearTimeout(ignoreDrag)
   ignoreDrag = null
 }
-})