- first commit.

README.md

@@ -0,0 +1,3 @@
+# MooTools A.R.T.
+
+Vector-based drawing for widgets, icons, and all that stuff. Pre-alpha.

art.button.js

@@ -0,0 +1,84 @@
+// art.button.js
+
+// Button Widget. Work in progress.
+
+ART.Button = new Class({
+
+	Extends: ART.Widget,
+
+	name: 'button',
+
+	style: {
+
+		base: {
+			'pill': false,
+			'corner-radius': 3,
+			'background-color': {0: hsb(0, 0, 80), 1: hsb(0, 0, 50)},
+			'border-color': hsb(0, 0, 0, 0.8),
+			'reflection-color': {0: hsb(0, 0, 100, 1), 1: hsb(0, 0, 0, 0)}
+		},
+
+		active: {
+			'background-color': hsb(0, 0, 40),
+			'border-color': hsb(0, 0, 0, 0.8),
+			'reflection-color': {0: hsb(0, 0, 30, 1), 1: hsb(0, 0, 0, 0)}
+		}
+
+	},
+
+	options: {
+		height: 20,
+		width: 200
+	},
+
+	initialize: function(options){
+		this.parent(options);
+
+		this.paint = new ART.Paint();
+		$(this.paint).inject(this.element);
+
+		$extend(this.style.now, {height: this.options.height, width: this.options.width});
+
+		var self = this;
+
+		var deactivate = function(){
+			self.deactivate();
+			document.removeEvent('mouseup', deactivate);
+		};
+
+		this.element.addEvent('mousedown', function(){
+			self.activate();
+			document.addEvent('mouseup', deactivate);
+		});
+
+		this.render();
+	},
+
+	render: function(style){
+		if (!this.paint) return this;
+		if (style) $extend(this.style.now, style);
+
+		var now = {};
+		for (var p in this.style.now) now[p.camelCase()] = this.style.now[p];
+
+		this.paint.resize({x: now.width, y: now.height});
+		this.element.setStyles({height: now.height, width: now.width});
+
+		var shape = (now.pill) ? (now.width > now.height) ? 'horizontal-pill' : 'vertical-pill' : 'rounded-rectangle';
+
+		this.paint.start();
+		this.paint.shape(shape, {x: now.width, y: now.height}, now.cornerRadius + 1);
+		this.paint.render({'fill': now.borderColor});
+
+		this.paint.start({x: 1, y: 1});
+		this.paint.shape(shape, {x: now.width - 2, y: now.height - 2}, now.cornerRadius);
+		this.paint.render({fill: now.reflectionColor});
+
+		this.paint.start({x: 1, y: 2});
+		this.paint.shape(shape, {x: now.width - 2, y: now.height - 3}, now.cornerRadius);
+		this.paint.render({fill: now.backgroundColor});
+
+		return this;
+	}
+
+});

art.js

@@ -0,0 +1,145 @@
+// art.js
+
+// Graphic adapters
+
+var ART = function(){};
+
+// Adapters NS
+
+ART.Adapters = {};
+
+// Canvas adapter
+
+ART.Adapters.Canvas = new Class({
+
+	style: {
+		'fill': null,
+		'stroke': null,
+		'stroke-width': 1,
+		'stroke-cap': 'round',
+		'stroke-join': 'round',
+		'shadow-color': null,
+		'shadow-blur': 0,
+		'shadow-offset-x': 0,
+		'shadow-offset-y': 0
+	},
+
+	initialize: function(id, width, height){
+		this.element = new Element('canvas', {'id': id || 'c-' + $time()});
+		this.context = this.element.getContext('2d');
+		this.resize(width, height);
+	},
+
+	resize: function(x, y){
+		this.element.width = x || 0;
+		this.element.height = y || 0;
+	},
+
+	getUpdatedCursor: function(x, y){
+		return {x: this.cursor.x + x, y: this.cursor.y + y};
+	},
+
+	beginPath: function(x, y){
+		if (this.started) return;
+		this.started = true;
+		this.cursor = {x: 0, y: 0};
+		this.bounds = {min: {x: null, y: null}, max: {x: null, y: null}};
+		this.context.beginPath();
+		this.lift(x, y);
+	},
+
+	closePath: function(){
+		if (!this.started) return;
+		this.context.closePath();
+	},
+
+	lift: function(x, y){
+		if (!this.started) return;
+		this.cursor = this.getUpdatedCursor(x, y);
+		this.context.moveTo(this.cursor.x, this.cursor.y);
+	},
+
+	line: function(x, y){
+		if (!this.started) return;
+		this.checkBounds();
+		this.cursor = this.getUpdatedCursor(x, y);
+		this.checkBounds();
+		this.context.lineTo(this.cursor.x, this.cursor.y);
+	},
+
+	bezier: function(cx1, cy1, cx2, cy2, ex, ey){
+		if (!this.started) return;
+		this.checkBounds();
+		var c1 = this.getUpdatedCursor(cx1, cy1), c2 = this.getUpdatedCursor(cx2, cy2);
+		this.cursor = this.getUpdatedCursor(ex, ey);
+		this.checkBounds();
+		this.context.bezierCurveTo(c1.x, c1.y, c2.x, c2.y, this.cursor.x, this.cursor.y);
+	},
+
+	set: function(key, value){
+		this.context[key] = value;
+	},
+
+	getColor: function(color){
+		if ($type(color) == 'object'){
+			var gradient = this.context.createLinearGradient(0, this.bounds.min.y, 0, this.bounds.max.y);
+			for (var i in color) gradient.addColorStop(i, color[i].valueOf());
+			return gradient;
+		} else {
+			return color.valueOf();
+		}
+	},
+
+	render: function(style){
+		if (!this.started) return;
+		this.started = false;
+
+		style = $merge(this.style, style);
+		var ctx = this.context;
+
+		for (var key in style){
+			var current = style[key];
+			if (current == null) continue;
+			var camel = key.camelCase();
+
+			switch (camel){
+				case 'fill': ctx.fillStyle = this.getColor(current); break;
+				case 'stroke': ctx.strokeStyle = this.getColor(current); break;
+				case 'strokeWidth': ctx.lineWidth = Number(current); break;
+				case 'strokeCap': ctx.lineCap = current; break;
+				case 'strokeJoin': ctx.lineJoin = current; break;
+				case 'shadowColor': ctx.shadowColor = this.getColor(current); break;
+				case 'shadowBlur': ctx.shadowBlur = Number(current); break;
+				case 'shadowOffsetX': ctx.shadowOffsetX = Number(current); break;
+				case 'shadowOffsetY': ctx.shadowOffsetY = Number(current); break;
+			}
+
+			delete style[key];
+			style[camel] = true;
+		}
+
+		if (style.fill) this.context.fill();
+		if (style.stroke && style.strokeWidth) this.context.stroke();
+	},
+
+	clear: function(){
+		this.context.clearRect(0, 0, this.element.width, this.element.height);
+	},
+
+	checkBounds: function(){
+		var b = this.bounds, v = this.cursor;
+		if (b.max.x == null || b.max.x < v.x) b.max.x = v.x;
+		if (b.max.y == null || b.max.y < v.y) b.max.y = v.y;
+		if (b.min.x == null || b.min.x > v.x) b.min.x = v.x;
+		if (b.min.y == null || b.min.y > v.y) b.min.y = v.y;
+	},
+
+	toElement: function(){
+		return this.element;
+	}
+
+});
+
+// Math
+
+Math.kappa = (4 * (Math.sqrt(2) - 1) / 3);

art.paint.js

@@ -0,0 +1,118 @@
+// art.paint.js
+
+// Painter class
+
+ART.Paint = new Class({
+
+	Implements: Options,
+
+	options: {
+		id: null,
+		width: 500,
+		height: 400
+	},
+
+	initialize: function(options, baseStyle){
+		this.setOptions(options);
+		this.adapter = new ART.Adapters.Canvas(this.options.id, this.options.width, this.options.height);
+		this.style = $merge(this.adapter.style, baseStyle);
+		this.global = {x: 0, y: 0};
+	},
+
+	resize: function(size){
+		this.adapter.resize(size.x, size.y);
+		return this;
+	},
+
+	start: function(cursor){
+		cursor = cursor || {x: 0, y: 0};
+		this.adapter.beginPath(cursor.x, cursor.y);
+		return this;
+	},
+
+	move: function(cursor){
+		this.global = {x: cursor.x, y: cursor.y};
+		return this;
+	},
+
+	render: function(style){
+		this.adapter.render($merge(this.style, style));
+		return this;
+	},
+
+	clear: function(){
+		this.adapter.clear();
+		return this;
+	},
+
+	toElement: function(){
+		return this.adapter.toElement();
+	}
+
+});
+
+(function(){
+
+// Painter
+
+	var Painter = new Class({
+
+		initialize: function(paint){
+			this.adapter = paint.adapter;
+		},
+
+		join: function(){
+			this.adapter.closePath();
+			return this;
+		},
+
+		lift: function(cursor){
+			this.adapter.lift(cursor.x, cursor.y);
+			return this;
+		},
+
+		line: function(end){
+			this.adapter.line(end.x, end.y);
+			return this;
+		},
+
+		bezier: function(cv1, cv2, end){
+			this.adapter.bezier(cv1.x, cv1.y, cv2.x, cv2.y, end.x, end.y);
+			return this;
+		}
+
+	});
+
+	// Painter to ART.Paint
+
+	ART.Paint.defineShape = function(name, shape){
+		var object = {};
+		object[name.camelCase()] = function(){
+			shape.apply(this, arguments);
+			return this;
+		};
+		Painter.implement(object);
+		return this;
+	};
+
+	ART.Paint.lookupShape = function(name){
+		return Painter.prototype[name.camelCase()];
+	};
+
+	ART.Paint.defineShapes = function(shapes){
+		for (var shape in shapes) this.defineShape(shape, shapes[shape]);
+		return this;
+	};
+
+	ART.Paint.implement({
+
+		shape: function(name){
+			if (!this.painter) this.painter = new Painter(this);
+			var shape = ART.Paint.lookupShape(name);
+			if (shape) shape.apply(this.painter, Array.slice(arguments, 1));
+			return this;
+		}
+
+	});
+
+})();