Browse Source

Mixin example

pr/32
Tony Garnock-Jones 4 years ago
parent
commit
6f70eaf93e
  1. 7
      js/examples/mixin/Makefile
  2. 38
      js/examples/mixin/index.html
  3. 80
      js/examples/mixin/index.js

7
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

38
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>

80
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();
}
}
}
}
}
}
Loading…
Cancel
Save