Mixin example

2017-02-27 04:07:32 -05:00 · 2017-02-27 04:07:32 -05:00 · 6f70eaf93e
parent ee52520a13
commit 6f70eaf93e
3 changed files with 125 additions and 0 deletions
--- a/js/examples/mixin/Makefile
+++ b/js/examples/mixin/Makefile
@ -0,0 +1,7 @@
+all: index.expanded.js
+
+%.expanded.js: %.js
+	../../bin/syndicatec $< > $@ || (rm -f $@; false)
+
+clean:
+	rm -f *.expanded.js
--- a/js/examples/mixin/index.html
+++ b/js/examples/mixin/index.html
@ -0,0 +1,38 @@
+<!doctype html>
+<html>
+  <head>
+    <title>Syndicate: Mixin</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script src="../../dist/syndicate.min.js"></script>
+    <style>
+      #place {
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: -1;
+        width: 100%;
+        height: 100%;
+        line-height: 0;
+      }
+      #instructions {
+        float: right;
+        background: rgba(255,255,255,0.5);
+        padding: 1rem;
+        max-width: 24rem;
+      }
+      #instructions h1, #instructions p {
+        margin: 0.2rem;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="instructions">
+      <h1>Mixin example</h1>
+      <p>Source code: <a href="index.js">index.js</a></p>
+      <p>Drag shapes. Click for rectangles. Shift-click to delete a rectangle.</p>
+    </div>
+    <div id="place"></div>
+    <script src="index.expanded.js"></script>
+  </body>
+</html>
--- a/js/examples/mixin/index.js
+++ b/js/examples/mixin/index.js
@ -0,0 +1,80 @@
+ground dataspace G {
+  message type shiftClicked(fragmentId);
+
+  Syndicate.UI.spawnUIDriver();
+
+  spawn {
+    var uiRoot = new Syndicate.UI.Anchor();
+
+    assert uiRoot.html('#place', '<svg id="svgroot" width="100%" height="100%"/>');
+
+    spawn {
+      var ui = new Syndicate.UI.Anchor();
+      assert ui.html('#svgroot',
+                     '<rect id="underlay" x="0" y="0" width="100%" height="100%" fill="grey"/>',
+                     -1);
+      on message ui.event('.', 'click', $e) {
+        var svg = document.getElementById('svgroot');
+        var pt = svg.createSVGPoint();
+        pt.x = e.clientX;
+        pt.y = e.clientY;
+        pt = pt.matrixTransform(svg.getScreenCTM().inverse());
+        spawnRectangle(pt.x, pt.y);
+      }
+    }
+
+    spawn {
+      field this.x = 50;
+      field this.y = 50;
+      var ui = new Syndicate.UI.Anchor();
+      assert ui.html('#svgroot',
+                     '<circle fill="green" r=45 cx="'+this.x+'" cy="'+this.y+'"/>',
+                     0);
+      draggableMixin(this, ui);
+    }
+
+    ///////////////////////////////////////////////////////////////////////////
+
+    function spawnRectangle(x0, y0) {
+      var length = 90;
+      spawn {
+        field this.x = x0 - length / 2;
+        field this.y = y0 - length / 2;
+        var ui = new Syndicate.UI.Anchor();
+        assert ui.html('#svgroot',
+                       '<rect fill="yellow" stroke="black" stroke-width="3" width="90" height="90"'+
+                       ' x="'+this.x+'" y="'+this.y+'"/>',
+                       0);
+        draggableMixin(this, ui);
+        on message ui.event('.', 'mousedown', $e) {
+          if (e.shiftKey) { :: shiftClicked(ui.fragmentId); }
+        }
+        stop on message shiftClicked(ui.fragmentId);
+      }
+    }
+
+    function draggableMixin(obj, ui) {
+      idle();
+
+      function idle() {
+        react {
+          stop on message ui.event('.', 'mousedown', $e) {
+            dragging(e.clientX - obj.x, e.clientY - obj.y);
+          }
+        }
+      }
+
+      function dragging(dx, dy) {
+        react {
+          on message uiRoot.event('.', 'mousemove', $e) {
+            obj.x = e.clientX - dx;
+            obj.y = e.clientY - dy;
+          }
+          stop on message uiRoot.event('.', 'mouseup', _) {
+            idle();
+          }
+        }
+      }
+    }
+  }
+}