Permalink
Browse files

- first commit.

  • Loading branch information...
0 parents commit 364d73fcdc426c89f4f2929a69f8bdb450f0022b @kamicane kamicane committed Mar 27, 2009
Showing with 604 additions and 0 deletions.
  1. +3 −0 README.md
  2. +84 −0 art.button.js
  3. +145 −0 art.js
  4. +118 −0 art.paint.js
  5. +92 −0 art.shapes.js
  6. +141 −0 art.widget.js
  7. +21 −0 license.txt
@@ -0,0 +1,3 @@
+# MooTools A.R.T.
+
+Vector-based drawing for widgets, icons, and all that stuff. Pre-alpha.
@@ -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;
+ }
+
+});
145 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);
@@ -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;
+ }
+
+ });
+
+})();
Oops, something went wrong.

0 comments on commit 364d73f

Please sign in to comment.