update

2015-12-01 19:27:03 +01:00
parent b471c91d1d
commit 434432a742
11 changed files with 5620 additions and 902 deletions
--- a/Examples/Puzzle/index.html
+++ b/Examples/Puzzle/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <style type="text/css">
+    .cell {
+      fill: black;
+      cursor: move;
+    }
+  </style>
+</head>
+<body>
+  <svg id="puzzle-example" width="100%" viewBox="0 0 1 1"></svg>
+
+  <script src="../bower_components/yjs/y.es6"></script>
+  <script src="../bower_components/d3/d3.js"></script>
+  <script src="./index.js"></script>
+</body>
+</html>
--- a/Examples/Puzzle/index.js
+++ b/Examples/Puzzle/index.js
@@ -0,0 +1,63 @@
+/* @flow */
+/* global Y, d3 */
+
+// initialize a shared object. This function call returns a promise!
+Y({
+  db: {
+    name: 'memory'
+  },
+  connector: {
+    name: 'websockets-client',
+    room: 'Puzzle-example'
+  },
+  sourceDir: '/bower_components',
+  share: {
+    piece1: 'Map',
+    piece2: 'Map',
+    piece3: 'Map'
+  }
+}).then(function (y) {
+  window.y = y
+
+  var dragX, dragY // x,y coordinates of drag event
+  var drag = d3.behavior.drag()
+    .on("drag", function(){
+      dragX = d3.event.x-0.05
+      dragY = d3.event.y-0.05
+      d3.select(this)
+        //.transition()
+        .attr("transform", "translate(" + dragX + "," + dragY+ ")")
+    })
+    .on('dragend', function (piece) {
+      // change the shared model of the puzzle
+      piece.set('x', dragX)
+      piece.set('y', dragY)
+    })
+
+  var data = [y.share.piece1, y.share.piece2, y.share.piece3]
+  var nodes = d3.select(document.querySelector("#puzzle-example")).append('g').selectAll("rect").data(data)
+  nodes
+    .enter()
+    .append('rect')
+    .attr('width', 0.1)
+    .attr('height', 0.1)
+    .attr("class", "cell")
+    .attr("transform", function (piece, i) {
+      var x = piece.get('x') || i/3
+      var y = piece.get('y') || i/3
+      return "translate(" + x + "," + y + ")"
+    }).call(drag)
+  
+  function repaint () {
+    nodes
+      .transition()
+      .attr("transform", function (piece, i) {
+        var x = piece.get('x') || i/3
+        var y = piece.get('y') || i/3
+        return "translate(" + x + "," + y + ")"
+      })
+  }
+  data.forEach(function(piece){
+    piece.observe(repaint)
+  })
+})