From e5fa742aff44ee9f8f7564c90c1a94ba4792e262 Mon Sep 17 00:00:00 2001
From: kangax <kangax@gmail.com>
Date: Mon, 26 Jul 2010 14:58:49 -0400
Subject: [PATCH] Alias some methods in `fabric.Element` for perf. reasons. Few
 improvements to demo.

---
 src/element.class.js |   8 ++-
 test/demo/demo.js    | 151 ++++++++++++++++++++++---------------------
 test/demo/index.html |  16 ++++-
 3 files changed, 98 insertions(+), 77 deletions(-)

diff --git a/src/element.class.js b/src/element.class.js
index dd97a217..0f24d54f 100644
--- a/src/element.class.js
+++ b/src/element.class.js
@@ -3,6 +3,8 @@
   var global = this,
       window = global.window,
       document = window.document,
+      capitalize = fabric.util.string.capitalize,
+      camelize = fabric.util.string.camelize,
       
       Canvas = global.Canvas || (global.Canvas = { });
       
@@ -1066,7 +1068,7 @@
           activeGroup = this.getActiveGroup();
       
       if (length) {  
-        for (var i=0; i<length; ++i) {
+        for (var i = 0; i < length; ++i) {
           
           // only render objects which are not in the group (if one exists)
           if (!activeGroup || 
@@ -1503,7 +1505,7 @@
         switch (o.type) {
           case 'image':
           case 'font':
-            fabric[fabric.util.string.capitalize(o.type)].fromObject(o, function (o) {
+            fabric[capitalize(o.type)].fromObject(o, function (o) {
               _this.add(o);
               if (++numLoadedImages === numTotalImages) {
                 if (callback) callback();
@@ -1511,7 +1513,7 @@
             });
             break;
           default:
-            var klass = fabric[fabric.util.string.camelize(fabric.util.string.capitalize(o.type))];
+            var klass = fabric[camelize(capitalize(o.type))];
             if (klass && klass.fromObject) {
               _this.add(klass.fromObject(o));
             }
diff --git a/test/demo/demo.js b/test/demo/demo.js
index d449b7c9..d8bee5bd 100644
--- a/test/demo/demo.js
+++ b/test/demo/demo.js
@@ -1,44 +1,14 @@
 (function() {
-
-  var canvas = this.canvas = new fabric.Element('canvas');
-
-  var rect = new fabric.Rect({
-    fill: "red",
-    left: 100,
-    top: 100,
-    width: 50,
-    height: 60
-  });
-
-  var circle = new fabric.Circle({
-    fill: 'green',
-    radius: 30,
-    left: 70,
-    top: 120
-  });
   
-  var ellipse = new fabric.Ellipse({
-    fill: 'blue',
-    rx: 40,
-    ry: 20,
-    left: 150,
-    top: 145,
-    opacity: 0.5,
-    angle: 15
-  });
-  
-  fabric.Image.fromURL('http://www.google.com/intl/en_ALL/images/srpr/logo1w.png', function(image) {
-    image.set('left', 300).set('top', 500).set('angle', -25).setCoords();
-    canvas.add(image);
-  });
-  
-  fabric.Image.fromURL('http://www.dooziedog.com/dog_breeds/pug/images/full/Pug-Puppy.jpg', function(image) {
-    image.set('left', 450).set('top', 150).set('angle', -5).scale(0.3).setCoords();
-    canvas.add(image);
-  });
-
-  canvas.add(rect).add(circle).add(ellipse.scale(2));
-
+  var getRandomInt = fabric.util.getRandomInt;
+  function getRandomColor() {
+    return getRandomInt(0, 255).toString(16) 
+      + getRandomInt(0, 255).toString(16) 
+      + getRandomInt(0, 255).toString(16);
+  }
+  function getRandomNum(min, max) {
+    return Math.random() * (max - min) + min;
+  }
   function loadSVGFromURL(url, callback) {
     var req = new fabric.util.request(url, {
       method: 'get',
@@ -52,66 +22,101 @@
     })
   }
   
+  var canvas = this.canvas = new fabric.Element('canvas');
+  
   document.getElementById('commands').onclick = function(ev) {
     ev.preventDefault();
     
-    var className = ev.target.className,
-        left = fabric.util.getRandomInt(100, 700),
-        top = fabric.util.getRandomInt(100, 500),
-        angle = fabric.util.getRandomInt(-20, 20);
+    var element = ev.target || ev.srcElement,
+        className = element.className,
+        offset = 50,
+        left = fabric.util.getRandomInt(0 + offset, 700 - offset),
+        top = fabric.util.getRandomInt(0 + offset, 500 - offset),
+        angle = fabric.util.getRandomInt(-20, 40),
+        width = fabric.util.getRandomInt(30, 50),
+        opacity = (function(min, max){ return Math.random() * (max - min) + min; })(0.5, 1);
     
     switch (className) {
       case 'rect':
-        canvas.add(new fabric.Rect({ left: left, top: top, fill: 'rgb(255,0,0)', width: 50, height: 50, opacity: 0.8 }));
+        canvas.add(new fabric.Rect({ 
+          left: left, 
+          top: top, 
+          fill: '#' + getRandomColor(), 
+          width: 50, 
+          height: 50, 
+          opacity: 0.8 
+        }));
         break;
         
       case 'circle':
-        canvas.add(new fabric.Circle({ left: left, top: top, fill: 'rgb(0,0,255)', radius: 50, opacity: 0.8 }));
+        canvas.add(new fabric.Circle({ 
+          left: left, 
+          top: top, 
+          fill: '#' + getRandomColor(), 
+          radius: 50, 
+          opacity: 0.8 
+        }));
         break;
       
       case 'triangle':
-        canvas.add(new fabric.Triangle({ left: left, top: top, fill: 'rgb(0,255,0)', width: 50, height: 50, opacity: 0.8 }));
+        canvas.add(new fabric.Triangle({ 
+          left: left, 
+          top: top, 
+          fill: '#' + getRandomColor(), 
+          width: 50, 
+          height: 50, 
+          opacity: 0.8 
+        }));
         break;
       
-      case 'image':
+      case 'image1':
         fabric.Image.fromURL('http://www.dooziedog.com/dog_breeds/pug/images/full/Pug-Puppy.jpg', function(image) {
-          image.set('left', left).set('top', top).set('angle', angle).scale(0.1).setCoords();
+          image.set('left', left).set('top', top).set('angle', angle).scale(getRandomNum(0.05, 0.25)).setCoords();
           canvas.add(image);
         });
         break;
       
+      case 'image2':
+        fabric.Image.fromURL('http://www.google.com/intl/en_ALL/images/srpr/logo1w.png', function(image) {
+          image.set('left', left).set('top', top).set('angle', angle).scale(getRandomNum(0.1, 1)).setCoords();
+          canvas.add(image);
+        });
+        break;
+      
+      case 'shape':
+        var id = element.id, match;
+        if (match = /\d+$/.exec(id)) {
+          loadSVGFromURL('assets/' + match[0] + '.svg', function(objects, options) {
+            var pathGroup = new fabric.PathGroup(objects, options);
+            pathGroup
+              .set('left', left)
+              .set('top', top)
+              .set('angle', angle)
+              .set('fill', '#' + getRandomColor())
+              .scale(getRandomNum(0.75, 1.25))
+              .setCoords();
+              
+            canvas.add(pathGroup);
+          });
+        }
+        break;
+      
       case 'clear':
         if (confirm('Are you sure?')) {
           canvas.clear();
         }
     }
   };
-
-  loadSVGFromURL('assets/1.svg', function(objects) {
-    var o = objects[0];
-    o.set('left', 250).set('top', 300).setCoords();
-    canvas.add(o)
-  });
   
+  document.getElementById('execute').onclick = function() {
+    var code = document.getElementById('canvas-console').value;
+    if (!(/^\s+$/).test(code)) {
+      eval(code);
+    }
+  };
   
-  loadSVGFromURL('assets/2.svg', function(objects) {
-    var o = objects[0];
-    o.set('left', 650).set('top', 380).setCoords();
-    canvas.add(o)
-  });
-
-  /*
-  loadSVGFromURL('assets/3.svg', function(objects, options) {
-    var pathGroup = new fabric.PathGroup(objects, options);
-    pathGroup.set('left', 550).set('top', 300).set('angle', 20).setCoords();
-    canvas.add(pathGroup);
-  });
-  
-  loadSVGFromURL('assets/5.svg', function(objects, options) {
-    var pathGroup = new fabric.PathGroup(objects, options);
-    pathGroup.set('left', 800).set('top', 200).set('angle', -3).setCoords();
-    canvas.add(pathGroup);
-  });
-  */
+  document.getElementById('rasterize').onclick = function() {
+    window.open(canvas.toDataURL('png'));
+  };
   
 })();
\ No newline at end of file
diff --git a/test/demo/index.html b/test/demo/index.html
index 41ea1b25..52168967 100644
--- a/test/demo/index.html
+++ b/test/demo/index.html
@@ -16,6 +16,8 @@
       .canvas_container { margin: 0 auto; position: relative; float: left; border: 1px solid #aaa; }
       #commands { float: left; margin-left: 20px; list-style: none; }
       .clear { color: red; font-weight: bold; margin-top: 1em; }
+      #canvas-console { display: block; }
+      #rasterize { margin-top: 10px; color: green; }
     </style>
     
   </head>
@@ -28,9 +30,21 @@
       <li><button class="rect">Rectangle</button></li>
       <li><button class="circle">Circle</button></li>
       <li><button class="triangle">Triangle</button></li>
-      <li><button class="image">Image</button></li>
+      <li><button class="image1">Image 1</button></li>
+      <li><button class="image2">Image 2</button></li>
+      <li><button class="shape" id="shape1">SVG shape 1</button></li>
+      <li><button class="shape" id="shape2">SVG shape 2</button></li>
+      <li><button class="shape" id="shape3">SVG shape 3</button></li>
+      <li><button class="shape" id="shape4">SVG shape 4</button></li>
+      
+      <li><button id="rasterize">Rasterize canvas to image</button></li>
       
       <li><button class="clear">Clear canvas</button></li>
+      <li style="margin-top:20px;">
+        <label for="canvas-console">Execute code:</label>
+        <textarea rows="8" cols="40" id="canvas-console">canvas.clear(); // clears canvas</textarea>
+        <button type="button" id="execute">Execute</button>
+      </li>
     </ul>
     
     <script src="demo.js" type="text/javascript"></script>