From 826f9c10a2815f7898462ce229f510cd0c2e4f89 Mon Sep 17 00:00:00 2001
From: kangax <kangax@gmail.com>
Date: Wed, 6 Jul 2011 16:45:33 -0400
Subject: [PATCH] Few more demo tweaks.

---
 demos/events/index.html      | 13 +++++++++++-
 demos/kitchensink/demo.css   |  5 +++--
 demos/kitchensink/index.html | 41 ++++++++++++++----------------------
 3 files changed, 31 insertions(+), 28 deletions(-)

diff --git a/demos/events/index.html b/demos/events/index.html
index ec715351..0c61006c 100644
--- a/demos/events/index.html
+++ b/demos/events/index.html
@@ -23,10 +23,14 @@
     <div id="bd-wrapper">
 
       <h2><span>Fabric.js demos</span> &middot; Event inspector</h2>
-
+      
       <canvas id="c1" width="200" height="200"></canvas>
       <canvas id="c2" width="200" height="200"></canvas>
       
+      <div id="observing-events-log" style="position:absolute;top:110px;left:450px;">
+        <strong style="margin-bottom:10px;display:block">Observing these events:</strong>
+      </div>
+      
       <div>
         <div id="log1">&nbsp;</div>
         <div id="log2">&nbsp;</div>
@@ -50,8 +54,15 @@
           var containerEl = (where === 1 ? log1 : log2);
           containerEl.insertBefore(el, containerEl.firstChild);
         }
+        function logObservingEvent(eventName) {
+          var el = document.getElementById('observing-events-log');
+          var para = document.createElement('p');
+          para.appendChild(document.createTextNode(eventName));
+          el.appendChild(para);
+        }
   
         function observe(eventName) {
+          logObservingEvent(eventName);
           canvas1.observe(eventName, function(){ log(eventName, 1) });
           canvas2.observe(eventName, function(){ log(eventName, 2) });
         }
diff --git a/demos/kitchensink/demo.css b/demos/kitchensink/demo.css
index 2bc8a0eb..ef3926c4 100644
--- a/demos/kitchensink/demo.css
+++ b/demos/kitchensink/demo.css
@@ -1,6 +1,6 @@
 #bd-wrapper { overflow: hidden; position: relative; }
 #fps { position: absolute; left: 1px; top: 0; background: rgb(200,200,200); width: 70px; z-index: 1000; }
-#commands { float: left; font-size: 14px; margin-left: 10px; }
+#commands { float: left; font-size: 14px; margin-left: 15px; margin-top: -80px }
 #commands ul { list-style: none; padding-left: 0; }
 #canvas-console { display: block; font-size: 11px; }
 #rasterize { margin-top: 10px; color: green; }
@@ -25,7 +25,8 @@
 #drawing-mode { color: blue; }
 #drawing-mode.is-drawing { color: red; }
 
-.svg-shapes { overflow: hidden; width: 320px; }
+.svg-shapes { overflow: hidden; width: 450px; }
 .svg-shapes li { display: inline; }
+.object-controls { width: 450px }
 
 button.selected { font-weight: bold; vertical-align: top }
\ No newline at end of file
diff --git a/demos/kitchensink/index.html b/demos/kitchensink/index.html
index 8654a335..80c5abe1 100644
--- a/demos/kitchensink/index.html
+++ b/demos/kitchensink/index.html
@@ -89,14 +89,19 @@
           <li><button class="shape" id="shape17"><strong>87</strong> paths</button></li>
           <li><button class="shape" id="shape2"><strong>90</strong> paths</button></li>
           <li><button class="shape" id="shape69">HTML5 logo (<strong>96</strong> paths)</button></li>
+          <li><button class="shape" id="shape115"><strong>124</strong> paths</button></li>
           <li><button class="shape" id="shape47"><strong>133</strong> paths</button></li>
           <li><button class="shape" id="shape51"><strong>141</strong> paths</button></li>
+          <li><button class="shape" id="shape109"><strong>153</strong> paths</button></li>
           <li><button class="shape" id="shape50"><strong>167</strong> paths</button></li>
           <li><button class="shape" id="shape99"><strong>174</strong> paths</button></li>
+          <li><button class="shape" id="shape112"><strong>183</strong> paths</button></li>
           <li><button class="shape" id="shape63"><strong>202</strong> paths</button></li>
           <li><button class="shape" id="shape64"><strong>224</strong> paths</button></li>
           <li><button class="shape" id="shape14"><strong>226</strong> paths</button></li>
+          <li><button class="shape" id="shape108"><strong>236</strong> paths</button></li>
           <li><button class="shape" id="shape62"><strong>237</strong> paths</button></li>
+          <li><button class="shape" id="shape113"><strong>278</strong> paths</button></li>
           <li><button class="shape" id="shape98"><strong>280</strong> paths</button></li>
           <li><button class="shape" id="shape57"><strong>321</strong> paths</button></li>
           <li><button class="shape" id="shape90"><strong>363</strong> paths</button></li>
@@ -114,11 +119,14 @@
           <li><button class="shape" id="shape101"><strong>832</strong> paths</button></li>
           <li><button class="shape" id="shape102"><strong>850</strong> paths</button></li>
           <li><button class="shape" id="shape43"><strong>936</strong> paths</button></li>
+          <li><button class="shape" id="shape110"><strong>1004</strong> paths</button></li>
           <li><button class="shape" id="shape7"><strong>1018</strong> paths</button></li>
           <li><button class="shape" id="shape95"><strong>1066</strong> paths</button></li>
           <li><button class="shape" id="shape97"><strong>1126</strong> paths</button></li>
+          <li><button class="shape" id="shape116"><strong>1196</strong> paths</button></li>
           <li><button class="shape" id="shape3"><strong>1197</strong> paths</button></li>
           <li><button class="shape" id="shape26"><strong>1215</strong> paths</button></li>
+          <li><button class="shape" id="shape114"><strong>1269</strong> paths</button></li>
           <li><button class="shape" id="shape77"><strong>1424</strong> paths</button></li>
           <li><button class="shape" id="shape32"><strong>1515</strong> paths</button></li>
           <li><button class="shape" id="shape13"><strong>1652</strong> paths</button></li>
@@ -151,17 +159,6 @@
           <li><button class="shape" id="shape72"><strong>29303</strong> paths</button></li>
           <li><button class="shape" id="shape48"><strong>41787</strong> paths</button></li>
           
-          <br><br>
-          
-          <li><button class="shape" id="shape108"><strong>236</strong> paths</button></li>
-          <li><button class="shape" id="shape109"><strong>153</strong> paths</button></li>
-          <li><button class="shape" id="shape110"><strong>1004</strong> paths</button></li>
-          <li><button class="shape" id="shape112"><strong>183</strong> paths</button></li>
-          <li><button class="shape" id="shape113"><strong>278</strong> paths</button></li>
-          <li><button class="shape" id="shape114"><strong>1269</strong> paths</button></li>
-          <li><button class="shape" id="shape115"><strong>124</strong> paths</button></li>
-          <li><button class="shape" id="shape116"><strong>1196</strong> paths</button></li>
-          
           <!-- <li><button class="shape" id="shape111"><strong>18229</strong> paths</button></li> -->
           
           <br><br>
@@ -178,25 +175,19 @@
           <!-- <li><button class="shape" id="shape103"><strong>xxx</strong> paths</button></li> -->
         </ul>
         
-        <ul>
-          <li><button id="rasterize">Rasterize canvas to image</button></li>
-
-          <li><button class="clear">Clear canvas</button></li>
-          <li><button id="remove-selected">Remove selected object/group</button></li>
+        <ul class="object-controls">
+          <li>
+            <button id="rasterize">Rasterize canvas to image</button>
+            <button class="clear">Clear canvas</button>
+          </li>
+          
+          <li style="margin-top:10px;"><button id="remove-selected">Remove selected object/group</button></li>
         
           <li style="margin-top:10px;">
             <button id="lock-horizontally">Lock horizontal movement</button>
-          </li>
-          <li>
             <button id="lock-vertically">Lock vertical movement</button>
-          </li>
-          <li>
             <button id="lock-scaling-x">Lock horizontal scaling</button>
-          </li>
-          <li>
             <button id="lock-scaling-y">Lock vertical scaling</button>
-          </li>
-          <li>
             <button id="lock-rotation">Lock rotation</button>
           </li>
           
@@ -216,7 +207,7 @@
         
           <li style="margin-top:10px;">
             <label for="canvas-console">Execute code:</label>
-  <textarea rows="17" cols="45" id="canvas-console">
+  <textarea rows="15" cols="55" id="canvas-console">
   /*
   // clear canvas
   canvas.clear();