lfzawacki/bbb-whiteboard.css

## bbb-whiteboard.css
/* CSS declarations go here */

svg {
    border: 1px solid #000;
}

#messages {
  margin-left: 400px;
}

#entryfields {
  margin-left: 400px;
}

## bbb-whiteboard.html
<head>
  <title>Whiteboard Example</title>
</head>

<body>
  <div id="entryfields">
  {{> entryfields}}
  </div>
  {{> canvas}}
</body>

<template name="canvas">
  <div id="canvas"></div>

  <div class="message" id="messages">
    {{#each messages}}
    <p>
      {{shape}} - x: {{x}} - y: {{y}}
    </p>
    {{/each}}
  </div>
</template>

<template name="entryfields">
   <h2>Create shape</h2>
   <select class="selectpicker span2" id="shape">
   <option selected value="ellipse">ellipse</option>
   <option value="rect">rect</option>
   <option value="line">line</option>
   <option value="triangle">triangle</option>
   <option value="text">text</option>
   </select>
   <input type="text" id="x" placeholder="x" />
   <input type="text" id="y" placeholder="y" />
   <a class="button" href="#" id="submit">Create</a>
   <a href="#" id="redraw">Redraw</a>
</template>

## bbb-whiteboard.js
Messages = new Meteor.Collection('messages');

if (Meteor.isClient) {

function polygonPath(points) {
  if(!points||points.length < 2)
    return [];
  var path = []; //will use path object type
  path.push(['m',points[0], points[1]]);
  for(var i = 2; i<points.length; i+=2) {
    path.push(['l', points[i], points[i+1]]);
  }
  path.push(['z']);
  return path;
}


function randomColor() {
  return "#" + (Math.random().toString(16) + '000000').slice(2, 8);
}

draw = {
  ellipse : function(paper, x, y) {
    var shape = paper.circle(x, y, 10);
    shape.attr("fill", randomColor());
    shape.attr("stroke", randomColor());
  },

  rect : function(paper, x, y) {
    var shape = paper.rect(x, y, 10, 10);
    shape.attr("fill", randomColor());
    shape.attr("stroke", randomColor());
  },

  triangle : function(paper, x, y) {
    var shape = paper.path(polygonPath([x, y, x+10, y-10, x-20, y-10, x, y]));
    shape.attr("fill", randomColor());
    shape.attr("stroke", randomColor());
  },

  line : function(paper, x, y) {
    var shape = paper.rect(x, y, .01, 10);
    shape.attr("fill", randomColor());
    shape.attr("stroke", randomColor());
  },
}

function clearInput() {
  _.forEach(['x','y'], function(i){
    document.getElementById(i).value = '';
  });
}

function getInput() {
  var shape = document.getElementById('shape').value;
  var x = document.getElementById('x').value;
  var y = document.getElementById('y').value;

  if (x != '' && y != '' && shape != '') {

    Messages.insert({
      shape: shape,
      x: x,
      y: y
    });
  }

  clearInput();
}

function getPaper() {
  return Template.canvas.canvas;
}

function drawMessages() {
  var paper = getPaper();
  paper.clear();

  var messages = Template.canvas.messages();

  messages.forEach( function(message) {
    drawMessage(paper, message);
  });
}

function drawMessage(paper, m) {
  draw[m.shape](paper, m.x, m.y);
}

Template.canvas.rendered = function() {
  Template.canvas.canvas = Raphael(10, 50, 320, 200);

  Messages.find().observeChanges({
    added: function(id, doc) {
      drawMessage(getPaper(), doc);
    }
  });
}

Template.canvas.messages = function() {
  return Messages.find({});
}

Template.canvas.events = {
}

Template.entryfields.events = {
  "click #submit": function(event) {
    getInput();
  },
  "click #redraw": function(event) {
    drawMessages();
  }
}

}

if (Meteor.isServer) {
  Meteor.startup(function () {
  });
}

## smart.json
{
  "packages": {
    "raphaeljs-package": {
      "git": "https://github.com/tomconnors/raphaeljs-package.git"
    }
  }
}
	/* CSS declarations go here */

	svg {
	border: 1px solid #000;
	}

	#messages {
	margin-left: 400px;
	}

	#entryfields {
	margin-left: 400px;
	}
	<head>
	<title>Whiteboard Example</title>
	</head>

	<body>
	<div id="entryfields">
	{{> entryfields}}
	</div>
	{{> canvas}}
	</body>

	<template name="canvas">
	<div id="canvas"></div>

	<div class="message" id="messages">
	{{#each messages}}
	<p>
	{{shape}} - x: {{x}} - y: {{y}}
	</p>
	{{/each}}
	</div>
	</template>

	<template name="entryfields">
	<h2>Create shape</h2>
	<select class="selectpicker span2" id="shape">
	<option selected value="ellipse">ellipse</option>
	<option value="rect">rect</option>
	<option value="line">line</option>
	<option value="triangle">triangle</option>
	<option value="text">text</option>
	</select>
	<input type="text" id="x" placeholder="x" />
	<input type="text" id="y" placeholder="y" />
	<a class="button" href="#" id="submit">Create</a>
	<a href="#" id="redraw">Redraw</a>
	</template>
	Messages = new Meteor.Collection('messages');

	if (Meteor.isClient) {

	function polygonPath(points) {
	if(!points\|\|points.length < 2)
	return [];
	var path = []; //will use path object type
	path.push(['m',points[0], points[1]]);
	for(var i = 2; i<points.length; i+=2) {
	path.push(['l', points[i], points[i+1]]);
	}
	path.push(['z']);
	return path;
	}


	function randomColor() {
	return "#" + (Math.random().toString(16) + '000000').slice(2, 8);
	}

	draw = {
	ellipse : function(paper, x, y) {
	var shape = paper.circle(x, y, 10);
	shape.attr("fill", randomColor());
	shape.attr("stroke", randomColor());
	},

	rect : function(paper, x, y) {
	var shape = paper.rect(x, y, 10, 10);
	shape.attr("fill", randomColor());
	shape.attr("stroke", randomColor());
	},

	triangle : function(paper, x, y) {
	var shape = paper.path(polygonPath([x, y, x+10, y-10, x-20, y-10, x, y]));
	shape.attr("fill", randomColor());
	shape.attr("stroke", randomColor());
	},

	line : function(paper, x, y) {
	var shape = paper.rect(x, y, .01, 10);
	shape.attr("fill", randomColor());
	shape.attr("stroke", randomColor());
	},
	}

	function clearInput() {
	_.forEach(['x','y'], function(i){
	document.getElementById(i).value = '';
	});
	}

	function getInput() {
	var shape = document.getElementById('shape').value;
	var x = document.getElementById('x').value;
	var y = document.getElementById('y').value;

	if (x != '' && y != '' && shape != '') {

	Messages.insert({
	shape: shape,
	x: x,
	y: y
	});
	}

	clearInput();
	}

	function getPaper() {
	return Template.canvas.canvas;
	}

	function drawMessages() {
	var paper = getPaper();
	paper.clear();

	var messages = Template.canvas.messages();

	messages.forEach( function(message) {
	drawMessage(paper, message);
	});
	}

	function drawMessage(paper, m) {
	draw[m.shape](paper, m.x, m.y);
	}

	Template.canvas.rendered = function() {
	Template.canvas.canvas = Raphael(10, 50, 320, 200);

	Messages.find().observeChanges({
	added: function(id, doc) {
	drawMessage(getPaper(), doc);
	}
	});
	}

	Template.canvas.messages = function() {
	return Messages.find({});
	}

	Template.canvas.events = {
	}

	Template.entryfields.events = {
	"click #submit": function(event) {
	getInput();
	},
	"click #redraw": function(event) {
	drawMessages();
	}
	}

	}

	if (Meteor.isServer) {
	Meteor.startup(function () {
	});
	}
	{
	"packages": {
	"raphaeljs-package": {
	"git": "https://github.com/tomconnors/raphaeljs-package.git"
	}
	}
	}