further work on packaging: now PaintWeb loads properly when packaged.…

… assorted code fixes, fixed the swapFillStroke command, got the jsdoc API reference almost ready for prime time, and more. --HG-- extra : convert_revision : svn%3Afc1ba2b4-ac28-11dd-a772-7fcde58d38e6/trunk%4056
mihaisucan · Jul 1, 2009 · ce30dac · ce30dac
1 parent 88c2e57
commit ce30dac
Show file tree

Hide file tree

Showing 18 changed files with 316 additions and 191 deletions.
diff --git a/CHANGES b/CHANGES
@@ -1,3 +1,21 @@
+2009-07-01:
+===========
+
+- Fixed the "swap fill / stroke colors" command. It now works - you can press 
+X to swap the two colors.
+- General fixes for undefined/unused variables across multiple JS files.
+- Packaging scripts for generating the jsdoc API reference.
+- Made demo1.html use the packaged PaintWeb script. I also added a timer, so 
+I can check how long it takes to load PaintWeb.
+- Minor fixes for the CSS images inliner script: don't try to inline external 
+images, and include the "base64" string in the data URI.
+- Fixed PaintWeb so that it loads successfully when running as a packaged build.  
+Mainly I made it properly read the interface markup, and I made sure the screen 
+resolution is detected even if the interface stylesheet is not yet loaded.  
+Typically PaintWeb completes initialization before the style loads and that 
+caused problems.
+- Made minor code adjustments for jsdoc-toolkit.
+
 2009-06-30:
 ===========
 

diff --git a/Makefile b/Makefile
@@ -18,7 +18,7 @@
 # along with PaintWeb.  If not, see <http://www.gnu.org/licenses/>.
 # 
 # $URL: http://code.google.com/p/paintweb $
-# $Date: 2009-06-30 23:00:23 +0300 $
+# $Date: 2009-07-01 21:02:26 +0300 $
 
 
 #### Config:start #####################################################
@@ -39,14 +39,17 @@ BIN_JSON=scripts/json_encode.php
 # The XHTML minifier script
 BIN_XHTML=scripts/xhtml_minify.php
 
+# The compressor used for CSS files
+BIN_CSS=scripts/yuicompressor
+
 # The CSS images inliner script
 BIN_CSS_IMAGES=scripts/css_images.php
 
 # The compressor used for JavaScript files
 BIN_JS=scripts/yuicompressor
 
-# The compressor used for CSS files
-BIN_CSS=scripts/yuicompressor
+# The jsdoc script
+BIN_JSDOC=scripts/jsdoc
 
 # Folders
 FOLDER_BUILD=build
@@ -57,6 +60,7 @@ FOLDER_EXTENSIONS=extensions
 FOLDER_INTERFACES=interfaces
 FOLDER_LANG=lang
 FOLDER_COLORS=colors
+FOLDER_DOCS_API=docs/api-ref
 
 # Changes below this line are not recommended
 #### Config:end #######################################################
@@ -114,7 +118,7 @@ $(FOLDER_BUILD)/$(FILE_PAINTWEB): $(FILE_PAINTWEB_DEPS)
 	mkdir -p $(FOLDER_BUILD)
 	cat $(FILE_PAINTWEB_CAT) > $(@:.js=.src.js)
 	# Add the interface layout.
-	echo "$(JSVAR_fileCache)'$(INTERFACE_LAYOUT)']=" >> $(@:.js=.src.js)
+	echo "$(JSVAR_fileCache)'$(INTERFACE_LAYOUT)'] = " >> $(@:.js=.src.js)
 	$(BIN_XHTML) < $(FOLDER_SRC)/$(INTERFACE_LAYOUT) | $(BIN_JSON) >> $(@:.js=.src.js)
 	echo ";" >> $(@:.js=.src.js)
 	# Add the final script: PaintWeb itself
@@ -148,9 +152,9 @@ $(FOLDER_BUILD)/$(FILE_CONFIG): $(FOLDER_SRC)/$(FILE_CONFIG)
 	cp $^ $@
 
 
-.PHONY : clean
-clean:
-	rm $(FILE_PAINTWEB:.js=.src.js)
+.PHONY : docs
+docs:
+	$(BIN_JSDOC) $(FOLDER_SRC) $(FOLDER_DOCS_API)
 
 
 # vim:set spell spl=en fo=wan1croql tw=80 ts=2 sw=2 sts=0 sta noet ai cin fenc=utf-8 ff=unix:

diff --git a/demos/demo1.html b/demos/demo1.html
@@ -10,7 +10,7 @@
     --></style>
 
     <!-- $URL: http://code.google.com/p/paintweb $
-         $Date: 2009-06-30 18:57:29 +0300 $ -->
+         $Date: 2009-07-01 19:23:47 +0300 $ -->
   </head>
   <body>
     <p>Welcome to PaintWeb!</p>
@@ -39,26 +39,32 @@
     <![endif]-->
 
     <script type="text/javascript" src="../src/includes/debug.js"></script>
-    <script type="text/javascript" src="../src/paintweb.js"></script>
+    <script type="text/javascript" src="../build/paintweb.js"></script>
 
     <script type="text/javascript"><!--
 (function () {
   // Function called when the user clicks the "Edit image" button.
   function pwStart () {
     document.body.insertBefore(loadp, btn.parentNode);
+
+    timeStart = (new Date()).getTime();
     pw.init(pwInit);
   };
 
   // Function called when the PaintWeb application fires the "initApp" event.
   function pwInit (ev) {
+    var initTime = (new Date()).getTime() - timeStart;
+
     document.body.removeChild(loadp);
 
     if (ev.state === PaintWeb.INIT_ERROR) {
       alert('Demo: PaintWeb initialization failed.');
       return;
 
     } else if (ev.state === PaintWeb.INIT_DONE && window.console && console.log) {
-      console.log('Demo: Yay, PaintWeb loaded! ' + pw.toString());
+      console.log('Demo: Yay, PaintWeb loaded in ' + initTime + ' ms! ' +
+        pw.toString());
+
     } else {
       alert('Demo: Unrecognized PaintWeb initialization state ' + ev.state);
 
@@ -73,6 +79,7 @@
       btn    = document.getElementById('buttonEditImage'),
       target = document.getElementById('PaintWebTarget'),
       loadp  = document.createElement('p'),
+      timeStart = null,
 
       // Create a PaintWeb instance.
       pw = new PaintWeb();

diff --git a/scripts/css_images.php b/scripts/css_images.php
@@ -19,7 +19,7 @@
  * along with PaintWeb.  If not, see <http://www.gnu.org/licenses/>.
  *
  * $URL: http://code.google.com/p/paintweb $
- * $Date: 2009-06-30 22:48:01 +0300 $
+ * $Date: 2009-07-01 19:00:43 +0300 $
  */
 
 // This file takes a CSS file as input, and outputs the same file with all the 
@@ -38,6 +38,13 @@
 
 function replace_callback ($matches) {
   $image = $matches[3];
+
+  // If the URL points to some external image, or if the file is not found then 
+  // we make no change to the code.
+  if (substr($image, 0, 7) === 'http://' || !file_exists($image)) {
+    return $matches[1] . ':' . $matches[2] . "url('" . $image . "')";
+  }
+
   $base64 = base64_encode(file_get_contents($image));
 
   $ext = strtolower(pathinfo($image, PATHINFO_EXTENSION));
@@ -53,7 +60,7 @@ function replace_callback ($matches) {
     $type = 'image/gif';
   }
 
-  $uri = 'data:' . $type . ',' . $base64;
+  $uri = 'data:' . $type . ';base64,' . $base64;
   $output = $matches[1] . ':' . $matches[2] . "url('" . $uri . "')";
 
   return $output;

diff --git a/scripts/jsdoc b/scripts/jsdoc
@@ -0,0 +1,82 @@
+#!/bin/bash
+#
+# Copyright (C) 2008, 2009 Mihai Şucan
+# 
+# This file is part of PaintWeb.
+# 
+# PaintWeb is free software: you can redistribute it and/or modify
+# it under the terms of the GNU General Public License as published by
+# the Free Software Foundation, either version 3 of the License, or
+# (at your option) any later version.
+# 
+# PaintWeb is distributed in the hope that it will be useful,
+# but WITHOUT ANY WARRANTY; without even the implied warranty of
+# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+# GNU General Public License for more details.
+# 
+# You should have received a copy of the GNU General Public License
+# along with PaintWeb.  If not, see <http://www.gnu.org/licenses/>.
+# 
+# $URL: http://code.google.com/p/paintweb $
+# $Date: 2009-07-01 21:57:39 +0300 $
+
+shopt -s nullglob
+
+SRC_FOLDER="$1"
+DOC_FOLDER="$2"
+
+# Make sure you point to your jsdoc-toolkit installation folder
+JSDOC_FOLDER="${HOME}/src/jsdoc-toolkit"
+JSDOC_JAR="${JSDOC_FOLDER}/jsrun.jar"
+JSDOC_JS="${JSDOC_FOLDER}/app/run.js"
+JSDOC_TEMPLATE="${JSDOC_FOLDER}/templates/jsdoc"
+
+if [[ ! -d "$SRC_FOLDER" ]]
+then
+  echo "The source folder does not exist: $SRC_FOLDER"
+  exit 1
+fi
+
+if [[ ! -d "$JSDOC_FOLDER" ]]
+then
+	echo "The JSDoc folder does not exist: $JSDOC_FOLDER"
+	exit 1
+fi
+
+if [[ ! -f "$JSDOC_JAR" ]]
+then
+  echo "The JSDoc-Toolkit .jar file does not exist!"
+  exit 1
+fi
+
+if [[ ! -f "$JSDOC_JS" ]]
+then
+  echo "The JSDoc-Toolkit run.js file does not exist!"
+  exit 1
+fi
+
+if [[ ! -d "$JSDOC_TEMPLATE" ]]
+then
+  echo "The JSDoc-Toolkit template folder does not exist: $JSDOC_TEMPLATE"
+  exit 1
+fi
+
+mkdir -p "$DOC_FOLDER"
+
+# Simple cleanup
+cd "$DOC_FOLDER"
+rm *html *css *js
+   symbols/*html \
+   symbols/*css \
+   symbos/*js \
+   symbols/src/*html \
+   symbols/src/*css \
+   symbos/src/*js
+
+cd -
+
+java -jar "$JSDOC_JAR" "$JSDOC_JS" -r=10 -a -p -t=${JSDOC_TEMPLATE} \
+     -d=${DOC_FOLDER} "$SRC_FOLDER"
+
+# vim:set spell spl=en fo=wan1croql tw=80 ts=2 sw=2 sts=0 sta noet ai cin fenc=utf-8 ff=unix:
+
diff --git a/scripts/yuicompressor b/scripts/yuicompressor
@@ -18,7 +18,7 @@
 # along with PaintWeb.  If not, see <http://www.gnu.org/licenses/>.
 # 
 # $URL: http://code.google.com/p/paintweb $
-# $Date: 2009-06-30 22:58:59 +0300 $
+# $Date: 2009-07-01 22:03:22 +0300 $
 
 # This script allows quicker access to the YUICompressor tool.
 # Make sure you get the latest YUICompressor from 
@@ -29,7 +29,7 @@ shopt -s nullglob
 MY_PWD="$PWD"
 
 # Update this value to point to your yuicompressor folder.
-YUIC_FOLDER="${HOME}/bin/yuicompressor-latest"
+YUIC_FOLDER="${HOME}/src/yuicompressor"
 
 if [[ ! -d "$YUIC_FOLDER" ]]
 then

diff --git a/src/extensions/colormixer.js b/src/extensions/colormixer.js
@@ -17,7 +17,7 @@
  * along with PaintWeb.  If not, see <http://www.gnu.org/licenses/>.
  *
  * $URL: http://code.google.com/p/paintweb $
- * $Date: 2009-06-29 23:07:03 +0300 $
+ * $Date: 2009-07-01 22:31:25 +0300 $
  */
 
 /**
@@ -45,8 +45,7 @@ pwlib.extensions.colormixer = function (app) {
       MathMin   = Math.min,
       MathPow   = Math.pow,
       MathRound = Math.round,
-      resScale  = app.resolution.scale,
-      win       = app.win;
+      resScale  = app.resolution.scale;
 
   /**
    * Holds references to various DOM elements.
@@ -106,7 +105,7 @@ pwlib.extensions.colormixer = function (app) {
    * Reference to the Color Mixer floating panel GUI component object.
    *
    * @private
-   * @type Object
+   * @type pwlib.guiFloatingPanel
    */
   this.panel = null;
 
@@ -115,7 +114,7 @@ pwlib.extensions.colormixer = function (app) {
    * inputs.
    *
    * @private
-   * @type Object
+   * @type pwlib.guiTabPanel
    */
   this.panelInputs = null;
 
@@ -124,7 +123,7 @@ pwlib.extensions.colormixer = function (app) {
    * Canvas used for color space visualisation and the color palettes selector.
    *
    * @private
-   * @type Object
+   * @type pwlib.guiTabPanel
    */
   this.panelSelector = null;
 
@@ -152,7 +151,6 @@ pwlib.extensions.colormixer = function (app) {
    * property: <var>configProperty</var>, <var>configGroup</var> and 
    * <var>configGroupRef</var>.
    *
-   * @private
    * @type Object
    */
   this.targetInput = null;
@@ -475,7 +473,7 @@ pwlib.extensions.colormixer = function (app) {
         m   = [x_r, y_r, z_r,
                x_g, y_g, z_g,
                x_b, y_b, z_b],
-        m_i = _self.calc_m3inv(m);
+        m_i = _self.calc_m3inv(m),
         s   = _self.calc_m1x3([w_x, w_y, w_z], m_i);
 
     // The 3x3 matrix used by rgb2xyz().
@@ -677,7 +675,7 @@ pwlib.extensions.colormixer = function (app) {
       return false;
     }
 
-    var color, li, anchor, rgbValue,
+    var color, anchor, rgbValue,
         frag = doc.createDocumentFragment(),
         dest = this.elems.cpaletteOutput;
 
@@ -756,7 +754,6 @@ pwlib.extensions.colormixer = function (app) {
       return;
     }
 
-    var prevScale = resScale;
     resScale = app.resolution.scale;
 
     var canvas  = _self.context2d.canvas,
@@ -1049,7 +1046,8 @@ pwlib.extensions.colormixer = function (app) {
    * other formats. Additionally, this method updates the color preview, the 
    * controls on the Canvas and the input values.
    *
-   * @private
+   * <p>You need to call this function whenever you update the color manually.
+   *
    * @param {String} ckey The color key that was updated.
    */
   this.update_color = function (ckey) {
@@ -1643,8 +1641,7 @@ pwlib.extensions.colormixer = function (app) {
       doc.removeEventListener('mouseup', _self.ev_canvas, false);
     }
 
-    var tid = ev.target.id,
-        elems = _self.elems;
+    var elems = _self.elems;
 
     // If the user is on top of the 'controls' element, determine the mouse coordinates and the 'mode' for this function: the user is either working with the slider, or he/she is working with the color chart itself.
     if (ev.target === elems.controls) {
@@ -1743,8 +1740,7 @@ pwlib.extensions.colormixer = function (app) {
    * to determine if the Canvas needs to be updated or not.
    */
   this.draw_chart = function (updated_ckey) {
-    var canvas  = _self.context2d.canvas,
-        context = _self.context2d,
+    var context = _self.context2d,
         gradient, color, opacity, i;
 
     if (updated_ckey === _self.ckey_adjoint[0] || updated_ckey === 
@@ -1975,7 +1971,7 @@ pwlib.extensions.colormixer = function (app) {
         slider_h = _self.sliderHeight,
         slider_x = _self.sliderX,
         slider_y = 0,
-        gradient, color, opacity, i;
+        gradient, color, i;
 
     gradient = context.createLinearGradient(slider_x, slider_y, slider_x, slider_h);