lsd_rails 0.1

data/Packages/lsd/README.md

@@ -0,0 +1,233 @@
+LSD - Lovely Scalable Drawings
+=========================
+
+An interface library that blows the mind, does things that were obvious but never really done and put together: CSS-driven customizable interfaces that render into SVG/VML. The goal is to generate phat ass amount of clean, clear, reusable, lightweight, modular and powerful code to use whenever it comes to UI.
+
+![Screenshot](http://img.skitch.com/20100913-cddxp3qi29bphck9iuartyce8b.png)
+
+
+Pictures
+-----------
+
+It can do much more than this, but this is my tech demos. There are more things that is untested (like scrollbars) but is there. 
+
+* [Desktop demo](http://img.skitch.com/20101007-mkm3th7j29ikjhhi7ah816n19s.png)
+* [HUD theme](http://img.skitch.com/20100915-r5wsspyameb81mbm2mq1unyax3.png)
+* [Aristo theme (in two colors)](http://img.skitch.com/20100928-eas6h46ddfbe7di25qwrsrkwp5.png)
+
+Things we have
+--------------
+
+* **Vector paths for widget** - Ever wanted a triangle window? A cloud for a comment? A star button for bookmark? Here it's all possible. Draw a shape in Inkscape or write a function that draws a path and have everything done for you. The widget will have the border, shadow, everything. For free.
+
+* **Box model** - One guy told me the worst things of SVG embedded in HTML is that it doesnt flow. It has no real width or height that can push the widgets and float around. Here, widgets do have that and act as regular HTML elements. Everything works: inline blocks, floats, position absolute or fixed, etc.
+
+* **Layers** - Each widget consist of a few SVG paths. You can add as many of them as you want, we have presets (stroke layer, shadow layer, fill layer). Just provide the name of a layer and CSS properties it works with.
+
+* **Stylesheets** - Remember the times when you had to hardcode widget styles into javascript? I don't, because it is always a bad idea. But here you dont need anything like that anymore. Our way of styling everything is specially baked CSS (includes a cool module for guys who use ruby and sass) with special CSS properties for everything. 
+  
+**Input: window.sass**
+  
+  window.hud
+    button
+      &:active
+        :font-size 110%
+        :reflection-color hsl(0, 0, 0, 0.5)
+      &:hover
+        :reflection-color hsl(0, 0, 0, 0.7)
+        
+**Output: window.css**
+
+  .art.window.hud .art.button.pseudo-active {
+    font-size: 110%;                           /* set by browser, usual CSS, speedy! */
+    -lsd-reflection-color: hsl(0, 0, 0, 0.5)   /* custom property that has to be applied by LSD */
+  }
+  .art.window.hud .art.button.pseudo-hover {
+    -lsd-reflection-color: hsl(0, 0, 0, 0.7)
+  }
+  
+* **Document** - The single most useful thing in mootools 1.3 for me was Slick. The engine that blazingly fast retrieves elements from the DOM using selectors. Our widget trees are partially DOM-compatible, so Slick can just walk through widgets like if they were regular elements. 
+
+    var button = Slick.search($d, "button + button")[0]
+    var previous = Slick.search(button, "! + button");
+    var nextWindow = Slick.search(button, "! window + window"); //finds button's window and the next window after that
+    
+* **Modularity** - I believe that there is not enough multiple inheritance in javascript world, so I'd like to change that. We have our own special class mutator and all the code split to small modules (One window widget consists of 20+ modules all chainted together). I believe common things like Lists, Grids, Resizing and things like that can be done one time and used everywhere. It's just a shame to copy and paste tons of crap to create a new widget. No more!
+    
+* **Best practices** - There are a lot of things that are (or to be) done right in this library. Focus handling, keyboard access, events DSL, Dropdown menus, dialogs, overlays, etc. 
+    
+* **Made to be extended** - Trust me, alright? The idea is to make something that makes it a pleasure to add another widget, or set of widgets, or widget state, or one more layer of behaviour, whatever! Just do it, like i did.
+
+* **Lightweight codebase** - It's hard to believe, but when compressed and gzipped the whole library with dependencies (mootools, mootools-more) and SVG art takes less than 90 kb total. True story.
+
+* **Laziness** - Always trying not to do something unless it is needed now. You've got that dropdown menu? We dont care until we show it.
+
+* **Themes** - There is a whole submodule full of different themes (currently 2) for your application. There is also a theme skeleton provided in sass sources for anyone to create a new one. 
+
+Free goodies
+------------
+
+These are the things that come for free (by using other libraries):
+
+- Vector imageless UIs that can be zoomed in forever without pixelization
+- Multiple inheritance (that adds a whole lot of fun into creating of new mutators)
+- Safari tabindex emulation
+
+    
+Call for help
+-------------
+
+This is already almost an year of my time and I'm willing to spend half more year (until february-march 2011) to finish everythings. There are small bugs here and there, but that is because the foundation gets changed so hard getting better each time so it's hard to keep everything working all the time.
+
+For anyone starting a similar library I encourage you to **fork and co-work**. Dont waste your time man. You can do it, i know, but do you really want all that time to be wasted on another wheel reinvention? Trust me, together we can make better. 
+
+
+Browser Support
+---------------
+
+In the early days (I dare to call that "early") of development, I only make on Firefox/Safari compatability. But let's face it, we have all tools to make it compatible with ie7+ (art has all the vml sweetness we need) pretty fast when we need to.
+
+At the same time I try to provide quality support for nice browsers based both on gecko and webkit. I had to port Google Closure's keyboard events library to mootools custom event keypress. Why is it important? To be able to hold left button to scroll items all the way to the left. 
+
+There's also QFocuser that aims to provide the same native focusing experience in Safari too. 
+
+
+Dependencies
+------------
+
+This is a second library in a set. It requires lsd-base to function properly. And both of them work with the latest (1.3) mootools. 
+
+* [lsd-base](http://github.com/inviz/lsd-base) (Public domain)
+* [mootools-ext](http://github.com/inviz/mootools-ext) (Public domain)
+* [mootools-core](http://github.com/mootools/mootools-core) (MIT Licesnse)
+* [mootools-more](http://github.com/mootools/mootools-more) (MIT Licesnse)
+* [art](http://github.com/kamicane/art) (MIT Licesnse)
+* [qfocuser](http://github.com/inviz/qfocuser) (MIT Licesnse)
+* [mootools-color](http://github.com/kamicane/mootools-color) (MIT Licesnse)
+* [cssparser](http://github.com/inviz/cssparser) (MIT Licesnse)
+
+Extras:
+
+* [lsd-examples](http://github.com/inviz/lsd-examples) (Public domain)
+* [lsd-themes](http://github.com/inviz/lsd-themes) (Public domain)
+* [lsd-specs](http://github.com/inviz/lsd-specs) (Public domain)
+
+
+How to Use
+----------
+
+Well, the framework is overwhelmingly feature rich, so it's up to you. 
+
+First, a stylesheet (example is sass, check generated css to bake it by hand):
+  
+    window
+      :width 100px
+      :height 100px
+      :background-color hsb(0, 0, 0, 0.5)
+      :stroke-width 3px
+      :stroke-color hsb(0, 0, 100, 0.3)
+      button
+        :width auto
+        :height 20px
+        :background-color gradient(hsb(0, 100, 30, 0.9), hsb(20, 30, 10, 0.2))
+        
+        &.submit
+          :color white
+
+
+Ok, here is an example of everyday coolness that i'm exposed to, because I'm working with LSD (this library). Let's create a widget tree:
+
+    var document = new ART.Document;
+    var window = new (new Class({
+      Includes: [
+        ART.Widget.Window,
+        ARTLSD.Trait.Draggable.Stateful //adds Draggable trait & a state (this.dragged) and two methods (this.drag & this.drop)
+      ]
+    }))
+    
+    ART.Widget.Button = new Class({
+
+      Includes: [
+        ART.Widget.Paint,
+        LSD.Mixin.Touchable.Stateful
+      ],
+
+      options: {
+        tag: 'button',
+        layers: {
+          shadow:  ['shadow'],
+          stroke: ['stroke'],
+          background:  [ART.Layer.Fill.Background.Offset],
+          reflection:  [ART.Layer.Fill.Reflection.Offset],
+          glyph: ['glyph']
+        },
+        label: ''
+      },
+
+      write: function(content) {
+        this.setState('text');
+        return this.parent.apply(this, arguments);
+      }
+
+    });
+    
+    ART.Widget.Button.Submit = new Class({
+      Extends: ART.Widget.Button,
+      
+      options: {
+        layout: {
+          self: 'button.submit'
+        }
+      },
+      
+      onClick: function() {
+        if (this.condition()) this.parent.apply(this, arguments);
+      },
+      
+      condition: function() {
+        return this.getForm().validate() //only submit if the form is valid
+      }
+    });
+    
+    var button = new ART.Widget.Button;
+    var submit = new ART.Widget.Button.Submit;  
+    window.inject(document);
+    window.adopt(button)
+    submit.inject(window);
+    
+    //no, i changed my mind
+    Slick.search(document, "window button + button.submit").dispose();
+
+
+Installation
+------------
+
+Only jsus (http://github.com/markiz/jsus) can save you. You need it is a gem to build the package. Jsus is an alternative (to Packager) javascript packager written in ruby. Currently, it is possible to browse demos without using jsus, because they include generated file tree.
+
+Library wants the raw body of stylesheets, so it makes an ajax call to that file (making it impossible to work on local filesystem). You need to use web server like apache or nginx to host it, and then access it. Sorry for this limitation for right now.
+  
+    # Mandatory: Get files
+    git clone git://github.com/Inviz/lsd.git
+    cd lsd
+    git submodule update --init
+    # open dependencies/lsd-examples/demos/index.html in the browser
+    
+    # Optional: Use jsus to pack files
+    sudo gem install jsus
+    cd dependencies/lsd-examples
+    jsus -i . -o Scripts -d ../.. -g -b
+  
+  
+[Changelog](http://github.com/Inviz/lsd/blob/master/CHANGELOG)
+---------
+    0.23 Layer offsets, Resizing/Scrolling. Cleaning.
+
+    0.22 Actions revamp. Disabled attribute support. Cleaning.
+    
+    0.21 Expressions support, focus propagation, bugfixes & speedups
+      
+    0.2 Themes release
+    
+    0.11 First public demo
+    
+    0.1 Initial public release

data/Packages/lsd/Source/ART/ART.Element.js

@@ -0,0 +1,51 @@
+/*
+---
+ 
+script: ART.Element.js
+ 
+description: Smarter injection methods
+ 
+license: Public domain (http://unlicense.org).
+
+authors: Yaroslaff Fedin
+
+extends: ART/ART.Element
+
+provides: ART.Element.inserters
+ 
+...
+*/
+
+!function() {
+  
+var inserters = {
+
+  before: function(context, element){
+    var parent = element.parentNode;
+    if (parent) parent.insertBefore(context, element);
+  },
+
+  after: function(context, element){
+    var parent = element.parentNode;
+    if (parent) parent.insertBefore(context, element.nextSibling);
+  },
+
+  bottom: function(context, element){
+    element.appendChild(context);
+  },
+
+  top: function(context, element){
+    element.insertBefore(context, element.firstChild);
+  }
+
+};
+
+ART.Element.implement({
+  inject: function(element, where){
+    if (element.element) element = element.element;
+    inserters[where || 'bottom'](this.element, element, true);
+    return this;
+  }
+});
+
+}();

data/Packages/lsd/Source/ART/ART.Glyphs.js

@@ -0,0 +1,51 @@
+/*
+---
+ 
+script: Glyphs.js
+ 
+description: Glyph library
+ 
+license: Public domain (http://unlicense.org).
+
+authors: Yaroslaff Fedin
+ 
+requires:
+- ART/ART
+ 
+provides: [ART.Glyphs]
+ 
+...
+*/
+
+ART.Glyphs = {
+  
+  wrench: 'M11.414,11.415c-0.781,0.78-2.048,0.78-2.829,0L3.17,5.999C3.112,6.002,3.058,6.016,3,6.016c-1.657,0-3-1.347-3-3.008c0-0.464,0.114-0.899,0.302-1.292l1.987,1.988c0.391,0.39,1.023,0.39,1.414,0c0.391-0.391,0.391-1.023,0-1.414L1.715,0.3C2.105,0.113,2.538,0,3,0c1.657,0,3,1.347,3,3.008c0,0.051-0.012,0.099-0.015,0.149l5.429,5.429C12.195,9.368,12.195,10.634,11.414,11.415z M11,9.501c0-0.276-0.224-0.5-0.5-0.5h-1c-0.277,0-0.501,0.224-0.501,0.5v1c0,0.275,0.224,0.5,0.501,0.5h1c0.276,0,0.5-0.225,0.5-0.5V9.501z',
+  
+  refresh: 'M0,0M5.142,6.504l-2,1.174c1.07,1.899,3.709,2.232,5.203,0.661l1.603,0.688c-2.096,2.846-6.494,2.559-8.234-0.508L0,9.524c0.199-1.665,0.398-3.329,0.597-4.993C2.112,5.189,3.626,5.847,5.142,6.504M6.858,5.51L6.844,5.505l0.013-0.008L6.858,5.51 M5.142,6.491C5.16,6.494,5.16,6.498,5.143,6.503L5.142,6.491 M11.402,7.466L12,2.477l-1.714,1.007C8.549,0.411,4.147,0.131,2.054,2.971L3.655,3.66C5.156,2.089,7.78,2.425,8.857,4.322l-2,1.175L11.402,7.466M12,12z',
+  
+  search: 'M0,0M11.707,11.707c-0.391,0.391-1.024,0.391-1.415,0L7.759,9.174c-0.791,0.523-1.736,0.832-2.755,0.832C2.24,10.006,0,7.766,0,5.003S2.24,0,5.003,0s5.003,2.24,5.003,5.003c0,1.02-0.309,1.966-0.833,2.755l2.533,2.533C12.098,10.683,12.098,11.315,11.707,11.707z M5.003,2.002c-1.658,0-3.002,1.344-3.002,3.001c0,1.658,1.344,3.002,3.002,3.002c1.657,0,3.001-1.344,3.001-3.002C8.005,3.346,6.66,2.002,5.003,2.002M12,12z',
+  
+  smallCross: 'M0,0M8.708,4.706L7.414,6l1.294,1.294c0.391,0.391,0.391,1.023,0,1.414s-1.023,0.391-1.414,0L6,7.414L4.706,8.708c-0.391,0.391-1.023,0.391-1.415,0c-0.39-0.391-0.39-1.023,0-1.414L4.586,6L3.292,4.706c-0.39-0.391-0.39-1.024,0-1.415c0.391-0.391,1.024-0.39,1.415,0L6,4.586l1.294-1.294c0.391-0.391,1.023-0.39,1.414,0C9.099,3.683,9.099,4.315,8.708,4.706M12,12z',
+  
+  smallPlus: 'M0,0M7,3.17V5h1.83c0.552,0,1,0.448,1,1c0,0.553-0.448,1-1,1H7v1.83c0,0.553-0.448,1-1,1.001c-0.552-0.001-1-0.448-1-1V7L3.17,7c-0.552,0-1-0.448-1-1c0-0.553,0.448-1,1-1H5v-1.83c0-0.552,0.448-1,1-1C6.552,2.17,7,2.617,7,3.17M12,12z',
+  
+  smallMinus: 'M0,0M8.83,5c0.553,0,1,0.448,1,1l0,0c0,0.552-0.447,1-1,1H3.17c-0.552,0-1-0.448-1-1l0,0c0-0.552,0.448-1,1-1H8.83M12,12z',
+  
+  resize: 'M0,0M8.299,12L12,8.299v1.414L9.713,12H8.299z M4.244,12L12,4.244v1.414L5.658,12H4.244z M0.231,12L12,0.231v1.414L1.646,12H0.231M12,12z',
+  
+  checkMark: 'M8.277,0.046L6.301,0L2.754,4.224L0.967,2.611L0,3.633l3.464,3.51L8.277,0.046z',
+  radio: 'M2.5,0C3.881,0,5,1.119,5,2.5S3.881,5,2.5,5S0,3.881,0,2.5S1.119,0,2.5,0z',
+  
+  //triangles
+  
+  triangleUp: "M0,8L4,0L8,8L0,8",
+  triangleDown: "M0,0L8,0L4,8L0,0",
+  triangleLeft: "M0,4L8,0L8,8L0,4",
+  triangleRight: "M0,0L8,4L0,8L0,0",
+  triangles: "M0,6L3,0L6,6L0,6M0,10L6,10L3,16L0,10",
+  
+  plus: "M3,0L6,0L6,3L9,3L9,6L6,6L6,9L3,9L3,6L0,6L0,3L3,3Z",
+  minus: "M9,9M0,1.5L9,1.5L9,4.5L0,4.5Z",
+  shutdown: "M21.816,3.999c-0.993-0.481-2.189-0.068-2.673,0.927c-0.482,0.995-0.066,2.191,0.927,2.673c3.115,1.516,5.265,4.705,5.263,8.401c-0.01,5.154-4.18,9.324-9.333,9.333c-5.154-0.01-9.324-4.18-9.334-9.333c-0.002-3.698,2.149-6.89,5.267-8.403c0.995-0.482,1.408-1.678,0.927-2.673c-0.482-0.993-1.676-1.409-2.671-0.927C5.737,6.152,2.667,10.72,2.665,16C2.667,23.364,8.634,29.332,16,29.334c7.365-0.002,13.333-5.97,13.334-13.334C29.332,10.722,26.266,6.157,21.816,3.999z M16,13.833c1.104,0,1.999-0.894,1.999-2V2.499C17.999,1.394,17.104,0.5,16,0.5c-1.106,0-2,0.895-2,1.999v9.333C14,12.938,14.894,13.833,16,13.833z"
+  
+};

data/Packages/lsd/Source/ART/ART.SVG.js

@@ -0,0 +1,122 @@
+/*
+---
+ 
+script: ART.SVG.js
+ 
+description: Some extensions (filters, dash, shadow blur)
+ 
+license: Public domain (http://unlicense.org).
+
+authors: Yaroslaff Fedin
+
+extends: ART/ART.SVG
+
+provides: [ART.SVG.prototype.dash, ART.SVG.prototype.strokeLinear, ART.SVG.prototype.fillRadial]
+ 
+...
+*/
+
+!function() {
+var NS = 'http://www.w3.org/2000/svg', XLINK = 'http://www.w3.org/1999/xlink', UID = 0, createElement = function(tag){
+  return document.createElementNS(NS, tag);
+};
+  
+ART.SVG.Base.implement({
+  dash: function(dash) {
+    if (dash) {
+      this.dashed = true;
+      this.element.setAttribute('stroke-dasharray', dash);
+    } else if (this.dashed) {
+      this.dashed = false;
+      this.element.removeAttribute('stroke-dasharray')
+    }
+  },
+  
+  
+  inject: function(container){
+    this.eject();
+    if (container instanceof ART.SVG.Group) container.children.push(this);
+    this.parent.apply(this, arguments);
+    this.container = container.defs ? container : container.container;
+		this._injectBrush('fill');
+		this._injectBrush('stroke');
+    this._injectFilter('blur');
+    return this;
+  },
+  
+  strokeLinear: function(stops, angle){
+    var gradient = this._createGradient('stroke', 'linear', stops);
+
+    angle = ((angle == null) ? 270 : angle) * Math.PI / 180;
+
+    var x = Math.cos(angle), y = -Math.sin(angle),
+      l = (Math.abs(x) + Math.abs(y)) / 2;
+
+    x *= l; y *= l;
+
+    gradient.setAttribute('x1', 0.5 - x);
+    gradient.setAttribute('x2', 0.5 + x);
+    gradient.setAttribute('y1', 0.5 - y);
+    gradient.setAttribute('y2', 0.5 + y);
+
+    return this;
+  },
+  
+  _writeTransform: function(){
+    if (Object.equals(this.transformed, this.transform)) return;
+    this.transformed = $unlink(this.transform);
+    var transforms = [];
+    for (var transform in this.transform) transforms.push(transform + '(' + this.transform[transform].join(',') + ')');
+    this.element.setAttribute('transform', transforms.join(' '));
+  },
+
+  blur: function(radius){
+    if (radius == null) radius = 4;
+    if (radius == this.blurred) return;
+    this.blurred = radius;
+    
+    var filter = this._createFilter();
+    var blur = createElement('feGaussianBlur');
+    blur.setAttribute('stdDeviation', radius * 0.25);
+    blur.setAttribute('result', 'blur');
+    filter.appendChild(blur);
+    //in=SourceGraphic
+    //stdDeviation="4" result="blur"
+    return this;
+  },
+
+  unblur: function() {
+    delete this.blurred;
+    this._ejectFilter();
+  },
+  
+  _injectFilter: function(type){
+    if (!this.container) return;
+    var filter = this.filter;
+    if (filter) this.container.defs.appendChild(filter);
+  },
+  
+  _ejectFilter: function(type){
+    if (!this.container) return;
+    var filter = this.filter;
+    delete this.filter;
+    if (filter) this.container.defs.removeChild(filter);
+  },
+  
+  _createFilter: function(){
+    this._ejectFilter();
+  
+    var filter = this.filter = createElement('filter');
+  
+    var id = 'filter-e' + this.uid;
+    filter.setAttribute('id', id);
+  
+    this._injectFilter();
+  
+    this.element.setAttribute('filter', 'url(#' + id + ')');
+  
+    return filter;
+  }
+});
+
+}();

data/Packages/lsd/Source/ART/ART.Shape.Arrow.js

@@ -0,0 +1,104 @@
+/*
+---
+ 
+script: Arrow.js
+ 
+description: An arrow shape. Useful for all the chat bubbles and validation errors.
+ 
+license: Public domain (http://unlicense.org).
+
+authors: Yaroslaff Fedin
+ 
+requires:
+  - ART/ART.Shape
+ 
+provides: 
+  - ART.Shape.Arrow
+ 
+...
+*/
+
+ART.Shape.Arrow = new Class({
+
+  Extends: ART.Shape,
+  
+  properties: ['width', 'height', 'radius', 'arrowWidth', 'arrowHeight', 'arrowSide', 'arrowPosition', 'arrowX', 'arrowY'],
+  
+  draw: function(width, height, radius, aw, ah, as, ap, ax, ay){
+
+    var path = new ART.Path;
+    
+    if (!radius) radius = 0;
+
+    if (typeof radius == 'number') radius = [radius, radius, radius, radius];
+
+    var tl = radius[0], tr = radius[1], br = radius[2], bl = radius[3];
+
+    if (tl < 0) tl = 0;
+    if (tr < 0) tr = 0;
+    if (bl < 0) bl = 0;
+    if (br < 0) br = 0;
+    
+    var sides = {
+      top: Math.abs(width) - (tr + tl),
+      right: Math.abs(height) - (tr + br),
+      bottom: Math.abs(width) - (br + bl),
+      left: Math.abs(height) - (bl + tl)
+    };
+    
+    switch (as){
+      case 'top': path.move(0, ah); break;
+      case 'left': path.move(ah, 0); break;
+    }
+
+    path.move(0, tl);
+    
+    if (typeof ap == 'string') ap = ((sides[as] - aw) * (ap.toFloat() / 100));
+    if (ap < 0) ap = 0;
+    else if (ap > sides[as] - aw) ap = sides[as] - aw;
+    var ae = sides[as] - ap - aw, aw2 = aw / 2;
+
+    if (width < 0) path.move(width, 0);
+    if (height < 0) path.move(0, height);
+    
+    // top
+
+    if (tl > 0) path.arc(tl, -tl);
+    if (as == 'top') path.line(ap, 0).line(aw2, -ah).line(aw2, ah).line(ae, 0);
+    else path.line(sides.top, 0);
+    
+    // right
+
+    if (tr > 0) path.arc(tr, tr);
+    if (as == 'right') path.line(0, ap).line(ah, aw2).line(-ah, aw2).line(0, ae);
+    else path.line(0, sides.right);
+    
+    // bottom
+
+    if (br > 0) path.arc(-br, br);
+    if (as == 'bottom') path.line(-ap, 0).line(-aw2, ah).line(-aw2, -ah).line(-ae, 0);
+    else path.line(-sides.bottom, 0);
+    
+    // left
+
+    if (bl > 0) path.arc(-bl, -bl);
+    if (as == 'left') path.line(0, -ap).line(-ah, -aw2).line(ah, -aw2).line(0, -ae);
+    else path.line(0, -sides.left);
+
+    return this.parent(path);
+  },
+
+  getOffset: function(styles) {
+    return {
+      left: (styles.arrowSide == 'left') ? styles.arrowWidth : 0,
+      right: (styles.arrowSide == 'right') ? styles.arrowWidth : 0,
+      top: (styles.arrowSide == 'top') ? styles.arrowHeight : 0,
+      bottom: (styles.arrowSide == 'bottom') ? styles.arrowHeight : 0
+    }
+  },
+  
+  render: function(context) {
+    return this.draw(context.size.width, context.size.height, context.radius)
+  }
+
+});

data/Packages/lsd/Source/ART/ART.Shape.Ellipse.js

@@ -0,0 +1,42 @@
+/*
+---
+ 
+script: Ellipse.js
+ 
+description: Draw ellipses and circles without a hassle
+ 
+license: Public domain (http://unlicense.org).
+
+authors: Yaroslaff Fedin
+ 
+requires:
+- ART/ART.Shape
+ 
+provides: [ART.Shape.Ellipse]
+ 
+...
+*/
+
+ART.Shape.Ellipse = new Class({
+  
+  Extends: ART.Shape,
+  
+  properties: ['width', 'height'],
+  
+  initialize: function(width, height){
+    this.parent();
+    if (width != null && height != null) this.draw(width, height);
+  },
+  
+  draw: function(width, height){
+    var path = new ART.Path;
+    var rx = width / 2, ry = height / 2;
+    path.move(0, ry).arc(width, 0, rx, ry).arc(-width, 0, rx, ry);
+    return this.parent(path);
+  },
+  
+  produce: function(delta) {
+    return new ART.Shapes.Ellipse(this.style.width + delta * 2, this.style.height + delta * 2)
+  }
+
+});

data/Packages/lsd/Source/ART/ART.Shape.Flower.js

@@ -0,0 +1,71 @@
+/*
+---
+ 
+script: Flower.js
+ 
+description: Ever wanted a flower button? Here you go
+ 
+license: Public domain (http://unlicense.org).
+
+authors: Yaroslaff Fedin
+ 
+requires:
+- ART/ART.Shape
+ 
+provides: [ART.Shape.Flower]
+ 
+...
+*/
+
+ART.Shape.Flower = new Class({
+  
+  Extends: ART.Shape,
+  
+  properties: ['width', 'height', 'leaves', 'radius'],
+  
+  draw: function(width, height, leaves, radius){
+     var path = new ART.Path,
+         outside = width / 2,
+         cx = width / 2,
+         cy = cx,
+         inside = outside * (radius || 0.5);
+     
+    leaves = Math.max(leaves || 0, 5);
+    path.move(0, inside);
+    var points = ["M", cx, cy + rin, "Q"],
+        R;
+    for (var i = 1; i < leaves * 2 + 1; i++) {
+        R = i % 2 ? rout : rin;
+        points = points.concat([+(cx + R * Math.sin(i * Math.PI / n)).toFixed(3), +(cy + R * Math.cos(i * Math.PI / n)).toFixed(3)]);
+    }
+    points.push("z");
+    return this.path(points);
+    
+    
+    return this.parent(path.close());
+  },
+
+  getOffset: function(styles, offset) {
+    var stroke = (styles.strokeWidth || 0);
+    return {
+      left: ((styles.width == 'auto') ? Math.max(stroke - offset.left, 0) : stroke),
+      top: 0,
+      right: ((styles.width == 'auto') ? Math.max(stroke - offset.right, 0) : stroke),
+      bottom: stroke
+    }
+  }
+
+});  
+
+//Raphael.fn.flower = function (cx, cy, rout, rin, n) {
+//    rin = rin || rout * .5;
+//    n = +n < 3 || !n ? 5 : n;
+//    var points = ["M", cx, cy + rin, "Q"],
+//        R;
+//    for (var i = 1; i < n * 2 + 1; i++) {
+//        R = i % 2 ? rout : rin;
+//        points = points.concat([+(cx + R * Math.sin(i * Math.PI / n)).toFixed(3), +(cy + R * Math.cos(i * Math.PI / n)).toFixed(3)]);
+//    }
+//    points.push("z");
+//    return this.path(points);
+//};