8 files changed, 256 insertions, 0 deletions

diff --git a/html/lib/canvas/Canvas.js b/html/lib/canvas/Canvas.js
new file mode 100644
index 0000000..408047a
--- /dev/null
+++ b/html/lib/canvas/Canvas.js
@@ -0,0 +1,68 @@
+/**
+	_enyo.Canvas_ is a control that generates a <canvas> HTML tag. It may
+	contain other canvas components that are derived not from
+	<a href="#enyo.Control">enyo.Control</a>, but from 
+	<a href="#enyo.canvas.Control">enyo.canvas.Control</a>.  These aren't true
+	controls in the sense of being DOM elements; they are, rather, shapes drawn
+	into the canvas.
+*/
+enyo.kind({
+	name: "enyo.Canvas",
+	kind: enyo.Control,
+	tag: "canvas",
+	attributes: {
+		//* Width of the canvas element
+		width: 500,
+		//* Height of the canvas element
+		height: 500
+	},
+	defaultKind: "enyo.canvas.Control",
+	//* @protected
+	generateInnerHtml: function() {
+		return '';
+	},
+	teardownChildren: function() {
+	},
+	rendered: function() {
+		this.renderChildren();
+	},
+	/*
+		addChild and removeChild of Control kind assumes children are Controls.
+		CanvasControls are not, so we use UiComponent's version, the superkind of Control
+	*/
+	addChild: function() {
+		enyo.UiComponent.prototype.addChild.apply(this, arguments);
+	},
+	removeChild: function() {
+		enyo.UiComponent.prototype.removeChild.apply(this, arguments);
+	},
+	renderChildren: function(inContext) {
+		var ctx = inContext;
+		var canvas = this.hasNode();
+		if (!ctx) {
+			if (canvas.getContext) {
+				ctx = canvas.getContext('2d');
+			}
+		}
+		if (ctx) {
+			for (var i=0, c; c=this.children[i]; i++) {
+				c.render(ctx);
+			}
+		}
+	},
+	//* @public
+	/**
+		Refreshes the canvas context, clears existing drawings, and redraws all
+		of the children.
+	*/
+	update: function() {
+		var canvas = this.hasNode();
+		if (canvas.getContext) {
+			var ctx = canvas.getContext('2d');
+			var b = this.getBounds();
+			// clear canvas
+			ctx.clearRect(0, 0, b.width, b.height);
+			this.renderChildren(ctx);
+		}
+	}
+});
diff --git a/html/lib/canvas/CanvasControl.js b/html/lib/canvas/CanvasControl.js
new file mode 100644
index 0000000..ce16446
--- /dev/null
+++ b/html/lib/canvas/CanvasControl.js
@@ -0,0 +1,52 @@
+/**
+	The base kind for items that live inside an
+	<a href="#enyo.Canvas">enyo.Canvas</a> control.
+
+	If you're using this kind directly, you may implement an _onRender_ event
+	handler in the owner to handle drawing into the canvas.
+
+	If you're deriving a new kind based on this one, override the _renderSelf_
+	method and use that for your drawing code.
+*/
+enyo.kind({
+	name: "enyo.canvas.Control",
+	kind: enyo.UiComponent,
+	defaultKind: "enyo.canvas.Control",
+	published: {
+		//* Structure with l (left), t (top), w (width), and h (height) members.
+		//* The default constructor sets those properties to random values.
+		bounds: null
+	},
+	events: {
+		//* Event providing hook to render this control. The event structure 
+		//* includes a _context_ member holding the active canvas context.
+		onRender: ""
+	},
+	//* @protected
+	constructor: function() {
+		this.bounds = {l: enyo.irand(400), t: enyo.irand(400), w: enyo.irand(100), h: enyo.irand(100)};
+		this.inherited(arguments);
+	},
+	importProps: function(inProps) {
+		this.inherited(arguments);
+		if (inProps.bounds) {
+			enyo.mixin(this.bounds, inProps.bounds);
+			delete inProps.bounds;
+		}
+	},
+	renderSelf: function(inContext) {
+		this.doRender({context: inContext});
+	},
+	render: function(inContext) {
+		if (this.children.length) {
+			this.renderChildren(inContext);
+		} else {
+			this.renderSelf(inContext);
+		}
+	},
+	renderChildren: function(inContext) {
+		for (var i=0, c; c=this.children[i]; i++) {
+			c.render(inContext);
+		}
+	}
+});
diff --git a/html/lib/canvas/Circle.js b/html/lib/canvas/Circle.js
new file mode 100644
index 0000000..dfe8283
--- /dev/null
+++ b/html/lib/canvas/Circle.js
@@ -0,0 +1,14 @@
+/**
+	Canvas control that draws a circle fitting the parameters specified in the
+	_bounds_ property.
+*/
+enyo.kind({
+	name: "enyo.canvas.Circle",
+	kind: enyo.canvas.Shape,
+	//@ protected
+	renderSelf: function(ctx) {
+		ctx.beginPath();
+		ctx.arc(this.bounds.l, this.bounds.t, this.bounds.w, 0, Math.PI*2);
+		this.draw(ctx);
+	}
+});
diff --git a/html/lib/canvas/Image.js b/html/lib/canvas/Image.js
new file mode 100644
index 0000000..018f275
--- /dev/null
+++ b/html/lib/canvas/Image.js
@@ -0,0 +1,26 @@
+/**
+	Canvas control that draws an image, stretched to fit the rectangle specified
+	by the _bounds_ property.
+*/
+enyo.kind({
+	name: "enyo.canvas.Image",
+	kind: enyo.canvas.Control,
+	published: {
+		//* Source URL for the image
+		src: ""
+	},
+	//* @protected
+	create: function() {
+		this.image = new Image();
+		this.inherited(arguments);
+		this.srcChanged();
+	},
+	srcChanged: function() {
+		if (this.src) {
+			this.image.src = this.src;
+		}
+	},
+	renderSelf: function(ctx) {
+		ctx.drawImage(this.image, this.bounds.l, this.bounds.t);
+	}
+});
\ No newline at end of file
diff --git a/html/lib/canvas/Rectangle.js b/html/lib/canvas/Rectangle.js
new file mode 100644
index 0000000..8f53412
--- /dev/null
+++ b/html/lib/canvas/Rectangle.js
@@ -0,0 +1,25 @@
+/**
+	Canvas control that draws a rectangle fitting the parameters specified in
+	the _bounds_ property.
+*/
+enyo.kind({
+	name: "enyo.canvas.Rectangle",
+	kind: enyo.canvas.Shape,
+	published: {
+		clear: false
+	},
+	//* @protected
+	renderSelf: function(ctx) {
+		if (this.clear) {
+			ctx.clearRect(this.bounds.l, this.bounds.t, this.bounds.w, this.bounds.h);
+		} else {
+			this.draw(ctx);
+		}
+	},
+	fill: function(ctx) {
+		ctx.fillRect(this.bounds.l, this.bounds.t, this.bounds.w, this.bounds.h);
+	},
+	outline: function(ctx) {
+		ctx.strokeRect(this.bounds.l, this.bounds.t, this.bounds.w, this.bounds.h);
+	}
+});
diff --git a/html/lib/canvas/Shape.js b/html/lib/canvas/Shape.js
new file mode 100644
index 0000000..14b0d9a
--- /dev/null
+++ b/html/lib/canvas/Shape.js
@@ -0,0 +1,37 @@
+/**
+	The base kind for shapes that can be drawn into the canvas.
+	This doesn't have a default rendering, but an event handler
+	may call the _draw_ method on it.
+
+	Kinds derived from this one should provide their own implementation of
+	_renderSelf_.  If more complex operations are needed for filled mode or
+	outline	mode, override the _fill_ or _outline_ methods, respectively.
+*/
+enyo.kind({
+	name: "enyo.canvas.Shape",
+	kind: enyo.canvas.Control,
+	published: {
+		//* Color used to draw the interior of the shape
+		color: "red",
+		//* Color used to draw the outline of the shape
+		outlineColor: ""
+	},
+	//* @protected
+	fill: function(inContext) {
+		inContext.fill();
+	},
+	outline: function(inContext) {
+		inContext.stroke();
+	},
+	//* @public
+	draw: function(inContext) {
+		if (this.color) {
+			inContext.fillStyle = this.color;
+			this.fill(inContext);
+		}
+		if (this.outlineColor) {
+			inContext.strokeStyle = this.outlineColor;
+			this.outline(inContext);
+		}
+	}
+});
diff --git a/html/lib/canvas/Text.js b/html/lib/canvas/Text.js
new file mode 100644
index 0000000..a470be9
--- /dev/null
+++ b/html/lib/canvas/Text.js
@@ -0,0 +1,25 @@
+//* Canvas control that draws a text string.
+enyo.kind({
+	name: "enyo.canvas.Text",
+	kind: enyo.canvas.Shape,
+	published: {
+		//* The text to draw
+		text: "",
+		//* CSS font specification used to select a font for drawing
+		font: "12pt Arial",
+		//* Text alignment within the rectangle specified by the _bounds_ property
+		align: "left"
+	},
+	//* @protected
+	renderSelf: function(ctx) {
+		ctx.textAlign = this.align;
+		ctx.font = this.font;
+		this.draw(ctx);
+	},
+	fill: function(ctx) {
+		ctx.fillText(this.text, this.bounds.l, this.bounds.t);
+	},
+	outline: function(ctx) {
+		ctx.strokeText(this.text, this.bounds.l, this.bounds.t);
+	}
+});
diff --git a/html/lib/canvas/package.js b/html/lib/canvas/package.js
new file mode 100644
index 0000000..0c62c5d
--- /dev/null
+++ b/html/lib/canvas/package.js
@@ -0,0 +1,9 @@
+enyo.depends(
+	"Canvas.js",
+	"CanvasControl.js",
+	"Shape.js",
+	"Circle.js",
+	"Rectangle.js",
+	"Text.js",
+	"Image.js"
+);