Back to index A simple box handling its own events:
Click output:
var CompositeBox = canvascontrols.CompositeShape.extend({
	init: function (options) {
		this._super(options);
		this.l = options.l;
		this.hovered = false;

		this.on("mouseover", this, function () {
			this.hovered = true;
			this.invalidate();
		});

		this.on("mouseout", this, function () {
			this.hovered = false;
			this.invalidate();
		});

		this.on("click", this, function () {
			$("output").text(
				"You clicked " + this.l + "<br />" + $("output").text()
			);
		});
	},
	paint: function (context) {
		context.save();
		context.fillStyle = this.hovered ? "#CCCCCC" : "#FFFFFF";
		context.strokeStyle = this.hovered ? "#0000FF" : "#000000";
		context.fillRect(0, 0, this.width(), this.height());
		context.strokeRect(0, 0, this.width(), this.height());
		context.fillStyle = "#000000";
		context.fillText(this.l, 0, this.height());
		context.restore();
		this._super(context);
	}
});

var canvasView = new canvascontrols.CanvasView("#canvas");

var root1 = canvasView.add(new CompositeBox({ x: 10, y: 10, l: "1" }));
var root2 = canvasView.add(new CompositeBox({ x: 175, y: 10, l: "2" }));

var child11 = root1.add(new CompositeBox({ x: 5, y: 10, width: 70, height: 100, l: "11" }));
var child12 = root1.add(new CompositeBox({ x: 55, y: 120, width: 45, height: 40, l: "12" }));

var grandChild111 = child11.add(new CompositeBox({ width: 20, height: 20, l: "111" }));

var child21 = root2.add(new CompositeBox({ x: 30, y: 15, width: 130, height: 60, l: "21" }));

canvasView.paint();