Init

29 files changed, 853 insertions, 0 deletions

diff --git a/static/js/wpaint/plugins/file/img/icons-menu-main-file.png b/static/js/wpaint/plugins/file/img/icons-menu-main-file.png
new file mode 100644
index 0000000..cda4bde
--- /dev/null
+++ b/static/js/wpaint/plugins/file/img/icons-menu-main-file.png
diff --git a/static/js/wpaint/plugins/file/src/wPaint.menu.main.file.js b/static/js/wpaint/plugins/file/src/wPaint.menu.main.file.js
new file mode 100644
index 0000000..15cfa46
--- /dev/null
+++ b/static/js/wpaint/plugins/file/src/wPaint.menu.main.file.js
@@ -0,0 +1,75 @@
+(function ($) {
+  var img = 'plugins/file/img/icons-menu-main-file.png';
+
+  // extend menu
+  $.extend(true, $.fn.wPaint.menus.main.items, {
+    save: {
+      icon: 'generic',
+      title: 'Save Image',
+      img: img,
+      index: 0,
+      callback: function () {
+        this.options.saveImg.apply(this, [this.getImage()]);
+      }
+    },
+    loadBg: {
+      icon: 'generic',
+      group: 'loadImg',
+      title: 'Load Image to Foreground',
+      img: img,
+      index: 2,
+      callback: function () {
+        this.options.loadImgFg.apply(this, []);
+      }
+    },
+    loadFg: {
+      icon: 'generic',
+      group: 'loadImg',
+      title: 'Load Image to Background',
+      img: img,
+      index: 1,
+      callback: function () {
+        this.options.loadImgBg.apply(this, []);
+      }
+    }  
+  });
+
+  // extend defaults
+  $.extend($.fn.wPaint.defaults, {
+    saveImg: null,   // callback triggerd on image save
+    loadImgFg: null, // callback triggered on image fg
+    loadImgBg: null  // callback triggerd on image bg
+  });
+
+  // extend functions
+  $.fn.wPaint.extend({
+    _showFileModal: function (type, images) {
+      var _this = this,
+          $content = $('<div></div>'),
+          $img = null;
+
+      function appendContent(type, image) {
+        function imgClick(e) {
+
+          // just in case to not draw on canvas
+          e.stopPropagation();
+          if (type === 'fg') { _this.setImage(image); }
+          else if (type === 'bg') { _this.setBg(image, null, null, true); }
+        }
+
+        $img.on('click', imgClick);
+      }
+
+      for (var i = 0, ii = images.length; i < ii; i++) {
+        $img = $('<img class="wPaint-modal-img"/>').attr('src', images[i]);
+        $img = $('<div class="wPaint-modal-img-holder"></div>').append($img);
+
+        (appendContent)(type, images[i]);
+
+        $content.append($img);
+      }
+
+      this._showModal($content);
+    }
+  });
+})(jQuery);
\ No newline at end of file
diff --git a/static/js/wpaint/plugins/file/wPaint.menu.main.file.min.js b/static/js/wpaint/plugins/file/wPaint.menu.main.file.min.js
new file mode 100644
index 0000000..a2631b7
--- /dev/null
+++ b/static/js/wpaint/plugins/file/wPaint.menu.main.file.min.js
@@ -0,0 +1 @@
+/*! wPaint - v2.5.0 - 2014-03-01 */!function(a){var b="plugins/file/img/icons-menu-main-file.png";a.extend(!0,a.fn.wPaint.menus.main.items,{save:{icon:"generic",title:"Save Image",img:b,index:0,callback:function(){this.options.saveImg.apply(this,[this.getImage()])}},loadBg:{icon:"generic",group:"loadImg",title:"Load Image to Foreground",img:b,index:2,callback:function(){this.options.loadImgFg.apply(this,[])}},loadFg:{icon:"generic",group:"loadImg",title:"Load Image to Background",img:b,index:1,callback:function(){this.options.loadImgBg.apply(this,[])}}}),a.extend(a.fn.wPaint.defaults,{saveImg:null,loadImgFg:null,loadImgBg:null}),a.fn.wPaint.extend({_showFileModal:function(b,c){function d(a,b){function c(c){c.stopPropagation(),"fg"===a?e.setImage(b):"bg"===a&&e.setBg(b,null,null,!0)}g.on("click",c)}for(var e=this,f=a("<div></div>"),g=null,h=0,i=c.length;i>h;h++)g=a('<img class="wPaint-modal-img"/>').attr("src",c[h]),g=a('<div class="wPaint-modal-img-holder"></div>').append(g),d(b,c[h]),f.append(g);this._showModal(f)}})}(jQuery);
\ No newline at end of file
diff --git a/static/js/wpaint/plugins/main/img/cursor-bucket.png b/static/js/wpaint/plugins/main/img/cursor-bucket.png
new file mode 100644
index 0000000..b6757ad
--- /dev/null
+++ b/static/js/wpaint/plugins/main/img/cursor-bucket.png
diff --git a/static/js/wpaint/plugins/main/img/cursor-crosshair.png b/static/js/wpaint/plugins/main/img/cursor-crosshair.png
new file mode 100644
index 0000000..362e069
--- /dev/null
+++ b/static/js/wpaint/plugins/main/img/cursor-crosshair.png
diff --git a/static/js/wpaint/plugins/main/img/cursor-dropper.png b/static/js/wpaint/plugins/main/img/cursor-dropper.png
new file mode 100644
index 0000000..e8396d1
--- /dev/null
+++ b/static/js/wpaint/plugins/main/img/cursor-dropper.png
diff --git a/static/js/wpaint/plugins/main/img/cursor-eraser1.png b/static/js/wpaint/plugins/main/img/cursor-eraser1.png
new file mode 100644
index 0000000..1a25ec5
--- /dev/null
+++ b/static/js/wpaint/plugins/main/img/cursor-eraser1.png
diff --git a/static/js/wpaint/plugins/main/img/cursor-eraser10.png b/static/js/wpaint/plugins/main/img/cursor-eraser10.png
new file mode 100644
index 0000000..5f5d83f
--- /dev/null
+++ b/static/js/wpaint/plugins/main/img/cursor-eraser10.png
diff --git a/static/js/wpaint/plugins/main/img/cursor-eraser2.png b/static/js/wpaint/plugins/main/img/cursor-eraser2.png
new file mode 100644
index 0000000..d15f875
--- /dev/null
+++ b/static/js/wpaint/plugins/main/img/cursor-eraser2.png
diff --git a/static/js/wpaint/plugins/main/img/cursor-eraser3.png b/static/js/wpaint/plugins/main/img/cursor-eraser3.png
new file mode 100644
index 0000000..c81814d
--- /dev/null
+++ b/static/js/wpaint/plugins/main/img/cursor-eraser3.png
diff --git a/static/js/wpaint/plugins/main/img/cursor-eraser4.png b/static/js/wpaint/plugins/main/img/cursor-eraser4.png
new file mode 100644
index 0000000..c512bfc
--- /dev/null
+++ b/static/js/wpaint/plugins/main/img/cursor-eraser4.png
diff --git a/static/js/wpaint/plugins/main/img/cursor-eraser5.png b/static/js/wpaint/plugins/main/img/cursor-eraser5.png
new file mode 100644
index 0000000..fff0873
--- /dev/null
+++ b/static/js/wpaint/plugins/main/img/cursor-eraser5.png
diff --git a/static/js/wpaint/plugins/main/img/cursor-eraser6.png b/static/js/wpaint/plugins/main/img/cursor-eraser6.png
new file mode 100644
index 0000000..d413f05
--- /dev/null
+++ b/static/js/wpaint/plugins/main/img/cursor-eraser6.png
diff --git a/static/js/wpaint/plugins/main/img/cursor-eraser7.png b/static/js/wpaint/plugins/main/img/cursor-eraser7.png
new file mode 100644
index 0000000..52876a5
--- /dev/null
+++ b/static/js/wpaint/plugins/main/img/cursor-eraser7.png
diff --git a/static/js/wpaint/plugins/main/img/cursor-eraser8.png b/static/js/wpaint/plugins/main/img/cursor-eraser8.png
new file mode 100644
index 0000000..6c1577b
--- /dev/null
+++ b/static/js/wpaint/plugins/main/img/cursor-eraser8.png
diff --git a/static/js/wpaint/plugins/main/img/cursor-eraser9.png b/static/js/wpaint/plugins/main/img/cursor-eraser9.png
new file mode 100644
index 0000000..4441a3e
--- /dev/null
+++ b/static/js/wpaint/plugins/main/img/cursor-eraser9.png
diff --git a/static/js/wpaint/plugins/main/img/cursor-pencil.png b/static/js/wpaint/plugins/main/img/cursor-pencil.png
new file mode 100644
index 0000000..d54322d
--- /dev/null
+++ b/static/js/wpaint/plugins/main/img/cursor-pencil.png
diff --git a/static/js/wpaint/plugins/main/img/icon-group-arrow.png b/static/js/wpaint/plugins/main/img/icon-group-arrow.png
new file mode 100644
index 0000000..ff501ac
--- /dev/null
+++ b/static/js/wpaint/plugins/main/img/icon-group-arrow.png
diff --git a/static/js/wpaint/plugins/main/img/icons-menu-main.png b/static/js/wpaint/plugins/main/img/icons-menu-main.png
new file mode 100644
index 0000000..4b1a90b
--- /dev/null
+++ b/static/js/wpaint/plugins/main/img/icons-menu-main.png
diff --git a/static/js/wpaint/plugins/main/src/fillArea.min.js b/static/js/wpaint/plugins/main/src/fillArea.min.js
new file mode 100644
index 0000000..08aa950
--- /dev/null
+++ b/static/js/wpaint/plugins/main/src/fillArea.min.js
@@ -0,0 +1 @@
+!function(){window.CanvasRenderingContext2D&&(CanvasRenderingContext2D.prototype.fillArea=function(a,b,c){function d(a){return{r:p[a],g:p[a+1],b:p[a+2],a:p[a+3]}}function e(a){p[a]=c.r,p[a+1]=c.g,p[a+2]=c.b,p[a+3]=c.a}function f(a){return g.r===a.r&&g.g===a.g&&g.b===a.b&&g.a===a.a}if(!a||!b||!c)return!0;var g,h,i,j,k,l,m=this.canvas.width,n=this.canvas.height,o=this.getImageData(0,0,m,n),p=o.data,q=[[a,b]];if(g=d(4*(b*m+a)),l=this.canvas.style.color,this.canvas.style.color=c,c=this.canvas.style.color.match(/^rgba?\((.*)\);?$/)[1].split(","),this.canvas.style.color=l,c={r:parseInt(c[0],10),g:parseInt(c[1],10),b:parseInt(c[2],10),a:parseInt(c[3]||255,10)},f(c))return!0;for(;q.length;){for(h=q.pop(),i=4*(h[1]*m+h[0]);h[1]-->=0&&f(d(i));)i-=4*m;for(i+=4*m,++h[1],j=!1,k=!1;h[1]++<n-1&&f(d(i));)e(i),h[0]>0&&(f(d(i-4))?j||(q.push([h[0]-1,h[1]]),j=!0):j&&(j=!1)),h[0]<m-1&&(f(d(i+4))?k||(q.push([h[0]+1,h[1]]),k=!0):k&&(k=!1)),i+=4*m}this.putImageData(o,0,0)})}();
\ No newline at end of file
diff --git a/static/js/wpaint/plugins/main/src/wPaint.menu.main.js b/static/js/wpaint/plugins/main/src/wPaint.menu.main.js
new file mode 100644
index 0000000..459bb73
--- /dev/null
+++ b/static/js/wpaint/plugins/main/src/wPaint.menu.main.js
@@ -0,0 +1,338 @@
+(function ($) {
+
+  // setup menu
+  $.fn.wPaint.menus.main = {
+    img: 'plugins/main/img/icons-menu-main.png',
+    items: {
+      undo: {
+        icon: 'generic',
+        title: 'Undo',
+        index: 0,
+        callback: function () { this.undo(); }
+      },
+      redo: {
+        icon: 'generic',
+        title: 'Redo',
+        index: 1,
+        callback: function () { this.redo(); }
+      },
+      clear: {
+        icon: 'generic',
+        title: 'Clear',
+        index: 2,
+        callback: function () { this.clear(); }
+      },
+      rectangle: {
+        icon: 'activate',
+        title: 'Rectangle',
+        index: 3,
+        callback: function () { this.setMode('rectangle'); }
+      },
+      ellipse: {
+        icon: 'activate',
+        title: 'Ellipse',
+        index: 4,
+        callback: function () { this.setMode('ellipse'); }
+      },
+      line: {
+        icon: 'activate',
+        title: 'Line',
+        index: 5,
+        callback: function () { this.setMode('line'); }
+      },
+      pencil: {
+        icon: 'activate',
+        title: 'Pencil',
+        index: 6,
+        callback: function () { this.setMode('pencil'); }
+      },
+      eraser: {
+        icon: 'activate',
+        title: 'Eraser',
+        index: 8,
+        callback: function () { this.setMode('eraser'); }
+      },
+      bucket: {
+        icon: 'activate',
+        title: 'Bucket',
+        index: 9,
+        callback: function () { this.setMode('bucket'); }
+      },
+      fillStyle: {
+        title: 'Fill Color',
+        icon: 'colorPicker',
+        callback: function (color) { this.setFillStyle(color); }
+      },
+      lineWidth: {
+        icon: 'select',
+        title: 'Stroke Width',
+        range: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
+        value: 2,
+        callback: function (width) { this.setLineWidth(width); }
+      },
+      strokeStyle: {
+        icon: 'colorPicker',
+        title: 'Stroke Color',
+        callback: function (color) { this.setStrokeStyle(color); }
+      }      
+    }
+  };
+
+  // extend cursors
+  $.extend($.fn.wPaint.cursors, {
+    'default': {path: 'plugins/main/img/cursor-crosshair.png', left: 7, top: 7},
+    dropper:   {path: 'plugins/main/img/cursor-dropper.png', left: 0, top: 12},
+    pencil:    {path: 'plugins/main/img/cursor-pencil.png', left: 0, top: 11.99},
+    bucket:    {path: 'plugins/main/img/cursor-bucket.png', left: 0, top: 10},
+    eraser1:   {path: 'plugins/main/img/cursor-eraser1.png', left: 1, top: 1},
+    eraser2:   {path: 'plugins/main/img/cursor-eraser2.png', left: 2, top: 2},
+    eraser3:   {path: 'plugins/main/img/cursor-eraser3.png', left: 2, top: 2},
+    eraser4:   {path: 'plugins/main/img/cursor-eraser4.png', left: 3, top: 3},
+    eraser5:   {path: 'plugins/main/img/cursor-eraser5.png', left: 3, top: 3},
+    eraser6:   {path: 'plugins/main/img/cursor-eraser6.png', left: 4, top: 4},
+    eraser7:   {path: 'plugins/main/img/cursor-eraser7.png', left: 4, top: 4},
+    eraser8:   {path: 'plugins/main/img/cursor-eraser8.png', left: 5, top: 5 },
+    eraser9:   {path: 'plugins/main/img/cursor-eraser9.png', left: 5, top: 5},
+    eraser10:  {path: 'plugins/main/img/cursor-eraser10.png', left: 6, top: 6}
+  });
+
+  // extend defaults
+  $.extend($.fn.wPaint.defaults, {
+    mode:        'pencil',  // set mode
+    lineWidth:   '3',       // starting line width
+    fillStyle:   '#FFFFFF', // starting fill style
+    strokeStyle: '#FFFF00'  // start stroke style
+  });
+
+  // extend functions
+  $.fn.wPaint.extend({
+    undoCurrent: -1,
+    undoArray: [],
+    setUndoFlag: true,
+
+    generate: function () {
+      this.menus.all.main = this._createMenu('main', {
+        offsetLeft: this.options.menuOffsetLeft,
+        offsetTop: this.options.menuOffsetTop
+      });
+    },
+
+    _init: function () {
+      // must add undo on init to set the first undo as the initial drawing (bg or blank)
+      this._addUndo();
+      this.menus.all.main._setIconDisabled('clear', true);
+    },
+
+    setStrokeStyle: function (color) {
+      this.options.strokeStyle = color;
+      this.menus.all.main._setColorPickerValue('strokeStyle', color);
+    },
+
+    setLineWidth: function (width) {
+      this.options.lineWidth = width;
+      this.menus.all.main._setSelectValue('lineWidth', width);
+
+      // reset cursor here based on mode in case we need to update cursor (for instance when changing cursor for eraser sizes)
+      this.setCursor(this.options.mode);
+    },
+
+    setFillStyle: function (color) {
+      this.options.fillStyle = color;
+      this.menus.all.main._setColorPickerValue('fillStyle', color);
+    },
+
+    setCursor: function (cursor) {
+      if (cursor === 'eraser') {
+        this.setCursor('eraser' + this.options.lineWidth);
+      }
+    },
+
+    /****************************************
+     * undo / redo
+     ****************************************/
+    undo: function () {
+      if (this.undoArray[this.undoCurrent - 1]) {
+        this._setUndo(--this.undoCurrent);
+      }
+
+      this._undoToggleIcons();
+    },
+
+    redo: function () {
+      if (this.undoArray[this.undoCurrent + 1]) {
+        this._setUndo(++this.undoCurrent);
+      }
+
+      this._undoToggleIcons();
+    },
+
+    _addUndo: function () {
+
+      //if it's not at the end of the array we need to repalce the current array position
+      if (this.undoCurrent < this.undoArray.length - 1) {
+        this.undoArray[++this.undoCurrent] = this.getImage(false);
+      }
+      else { // owtherwise we push normally here
+        this.undoArray.push(this.getImage(false));
+
+        //if we're at the end of the array we need to slice off the front - in increment required
+        if (this.undoArray.length > this.undoMax) {
+          this.undoArray = this.undoArray.slice(1, this.undoArray.length);
+        }
+        //if we're NOT at the end of the array, we just increment
+        else { this.undoCurrent++; }
+      }
+
+      //for undo's then a new draw we want to remove everything afterwards - in most cases nothing will happen here
+      while (this.undoCurrent !== this.undoArray.length - 1) { this.undoArray.pop(); }
+
+      this._undoToggleIcons();
+      this.menus.all.main._setIconDisabled('clear', false);
+    },
+
+    _undoToggleIcons: function () {
+      var undoIndex = (this.undoCurrent > 0 && this.undoArray.length > 1) ? 0 : 1,
+          redoIndex = (this.undoCurrent < this.undoArray.length - 1) ? 2 : 3;
+
+      this.menus.all.main._setIconDisabled('undo', undoIndex === 1 ? true : false);
+      this.menus.all.main._setIconDisabled('redo', redoIndex === 3 ? true : false);
+    },
+
+    _setUndo: function (undoCurrent) {
+      this.setImage(this.undoArray[undoCurrent], null, null, true);
+    },
+
+    /****************************************
+     * clear
+     ****************************************/
+    clear: function () {
+
+      // only run if not disabled (make sure we only run one clear at a time)
+      if (!this.menus.all.main._isIconDisabled('clear')) {
+        this.ctx.clearRect(0, 0, this.width, this.height);
+        this._addUndo();
+        this.menus.all.main._setIconDisabled('clear', true);
+      }
+    },
+
+    /****************************************
+     * rectangle
+     ****************************************/
+    _drawRectangleDown: function (e) { this._drawShapeDown(e); },
+
+    _drawRectangleMove: function (e) {
+      this._drawShapeMove(e);
+
+      this.ctxTemp.rect(e.x, e.y, e.w, e.h);
+      this.ctxTemp.stroke();
+      this.ctxTemp.fill();
+    },
+
+    _drawRectangleUp: function (e) {
+      this._drawShapeUp(e);
+      this._addUndo();
+    },
+
+    /****************************************
+     * ellipse
+     ****************************************/
+    _drawEllipseDown: function (e) { this._drawShapeDown(e); },
+
+    _drawEllipseMove: function (e) {
+      this._drawShapeMove(e);
+
+      this.ctxTemp.ellipse(e.x, e.y, e.w, e.h);
+      this.ctxTemp.stroke();
+      this.ctxTemp.fill();
+    },
+
+    _drawEllipseUp: function (e) {
+      this._drawShapeUp(e);
+      this._addUndo();
+    },
+
+    /****************************************
+     * line
+     ****************************************/
+    _drawLineDown: function (e) { this._drawShapeDown(e); },
+
+    _drawLineMove: function (e) {
+      this._drawShapeMove(e, 1);
+
+      var xo = this.canvasTempLeftOriginal;
+      var yo = this.canvasTempTopOriginal;
+      
+      if (e.pageX < xo) { e.x = e.x + e.w; e.w = e.w * - 1; }
+      if (e.pageY < yo) { e.y = e.y + e.h; e.h = e.h * - 1; }
+      
+      this.ctxTemp.lineJoin = 'round';
+      this.ctxTemp.beginPath();
+      this.ctxTemp.moveTo(e.x, e.y);
+      this.ctxTemp.lineTo(e.x + e.w, e.y + e.h);
+      this.ctxTemp.closePath();
+      this.ctxTemp.stroke();
+    },
+
+    _drawLineUp: function (e) {
+      this._drawShapeUp(e);
+      this._addUndo();
+    },
+
+    /****************************************
+     * pencil
+     ****************************************/
+    _drawPencilDown: function (e) {
+      this.ctx.lineJoin = 'round';
+      this.ctx.lineCap = 'round';
+      this.ctx.strokeStyle = this.options.strokeStyle;
+      this.ctx.fillStyle = this.options.strokeStyle;
+      this.ctx.lineWidth = this.options.lineWidth;
+      
+      //draw single dot in case of a click without a move
+      this.ctx.beginPath();
+      this.ctx.arc(e.pageX, e.pageY, this.options.lineWidth / 2, 0, Math.PI * 2, true);
+      this.ctx.closePath();
+      this.ctx.fill();
+      
+      //start the path for a drag
+      this.ctx.beginPath();
+      this.ctx.moveTo(e.pageX, e.pageY);
+    },
+    
+    _drawPencilMove: function (e) {
+      this.ctx.lineTo(e.pageX, e.pageY);
+      this.ctx.stroke();
+    },
+    
+    _drawPencilUp: function () {
+      this.ctx.closePath();
+      this._addUndo();
+    },
+
+    /****************************************
+     * eraser
+     ****************************************/
+    _drawEraserDown: function (e) {
+      this.ctx.save();
+      this.ctx.globalCompositeOperation = 'destination-out';
+      this._drawPencilDown(e);
+    },
+    
+    _drawEraserMove: function (e) {
+      this._drawPencilMove(e);
+    },
+    
+    _drawEraserUp: function (e) {
+      this._drawPencilUp(e);
+      this.ctx.restore();
+    },
+
+    /****************************************
+     * bucket
+     ****************************************/
+    _drawBucketDown: function (e) {
+      this.ctx.fillArea(e.pageX, e.pageY, this.options.fillStyle);
+      this._addUndo();
+    }
+  });
+})(jQuery);
diff --git a/static/js/wpaint/plugins/main/wPaint.menu.main.min.js b/static/js/wpaint/plugins/main/wPaint.menu.main.min.js
new file mode 100644
index 0000000..0a950c5
--- /dev/null
+++ b/static/js/wpaint/plugins/main/wPaint.menu.main.min.js
@@ -0,0 +1 @@
+/*! wPaint - v2.5.0 - 2014-03-01 */!function(a){a.fn.wPaint.menus.main={img:"plugins/main/img/icons-menu-main.png",items:{undo:{icon:"generic",title:"Undo",index:0,callback:function(){this.undo()}},redo:{icon:"generic",title:"Redo",index:1,callback:function(){this.redo()}},clear:{icon:"generic",title:"Clear",index:2,callback:function(){this.clear()}},rectangle:{icon:"activate",title:"Rectangle",index:3,callback:function(){this.setMode("rectangle")}},ellipse:{icon:"activate",title:"Ellipse",index:4,callback:function(){this.setMode("ellipse")}},line:{icon:"activate",title:"Line",index:5,callback:function(){this.setMode("line")}},pencil:{icon:"activate",title:"Pencil",index:6,callback:function(){this.setMode("pencil")}},eraser:{icon:"activate",title:"Eraser",index:8,callback:function(){this.setMode("eraser")}},bucket:{icon:"activate",title:"Bucket",index:9,callback:function(){this.setMode("bucket")}},fillStyle:{title:"Fill Color",icon:"colorPicker",callback:function(a){this.setFillStyle(a)}},lineWidth:{icon:"select",title:"Stroke Width",range:[1,2,3,4,5,6,7,8,9,10],value:2,callback:function(a){this.setLineWidth(a)}},strokeStyle:{icon:"colorPicker",title:"Stroke Color",callback:function(a){this.setStrokeStyle(a)}}}},a.extend(a.fn.wPaint.cursors,{"default":{path:"plugins/main/img/cursor-crosshair.png",left:7,top:7},dropper:{path:"plugins/main/img/cursor-dropper.png",left:0,top:12},pencil:{path:"plugins/main/img/cursor-pencil.png",left:0,top:11.99},bucket:{path:"plugins/main/img/cursor-bucket.png",left:0,top:10},eraser1:{path:"plugins/main/img/cursor-eraser1.png",left:1,top:1},eraser2:{path:"plugins/main/img/cursor-eraser2.png",left:2,top:2},eraser3:{path:"plugins/main/img/cursor-eraser3.png",left:2,top:2},eraser4:{path:"plugins/main/img/cursor-eraser4.png",left:3,top:3},eraser5:{path:"plugins/main/img/cursor-eraser5.png",left:3,top:3},eraser6:{path:"plugins/main/img/cursor-eraser6.png",left:4,top:4},eraser7:{path:"plugins/main/img/cursor-eraser7.png",left:4,top:4},eraser8:{path:"plugins/main/img/cursor-eraser8.png",left:5,top:5},eraser9:{path:"plugins/main/img/cursor-eraser9.png",left:5,top:5},eraser10:{path:"plugins/main/img/cursor-eraser10.png",left:6,top:6}}),a.extend(a.fn.wPaint.defaults,{mode:"pencil",lineWidth:"3",fillStyle:"#FFFFFF",strokeStyle:"#FFFF00"}),a.fn.wPaint.extend({undoCurrent:-1,undoArray:[],setUndoFlag:!0,generate:function(){this.menus.all.main=this._createMenu("main",{offsetLeft:this.options.menuOffsetLeft,offsetTop:this.options.menuOffsetTop})},_init:function(){this._addUndo(),this.menus.all.main._setIconDisabled("clear",!0)},setStrokeStyle:function(a){this.options.strokeStyle=a,this.menus.all.main._setColorPickerValue("strokeStyle",a)},setLineWidth:function(a){this.options.lineWidth=a,this.menus.all.main._setSelectValue("lineWidth",a),this.setCursor(this.options.mode)},setFillStyle:function(a){this.options.fillStyle=a,this.menus.all.main._setColorPickerValue("fillStyle",a)},setCursor:function(a){"eraser"===a&&this.setCursor("eraser"+this.options.lineWidth)},undo:function(){this.undoArray[this.undoCurrent-1]&&this._setUndo(--this.undoCurrent),this._undoToggleIcons()},redo:function(){this.undoArray[this.undoCurrent+1]&&this._setUndo(++this.undoCurrent),this._undoToggleIcons()},_addUndo:function(){for(this.undoCurrent<this.undoArray.length-1?this.undoArray[++this.undoCurrent]=this.getImage(!1):(this.undoArray.push(this.getImage(!1)),this.undoArray.length>this.undoMax?this.undoArray=this.undoArray.slice(1,this.undoArray.length):this.undoCurrent++);this.undoCurrent!==this.undoArray.length-1;)this.undoArray.pop();this._undoToggleIcons(),this.menus.all.main._setIconDisabled("clear",!1)},_undoToggleIcons:function(){var a=this.undoCurrent>0&&this.undoArray.length>1?0:1,b=this.undoCurrent<this.undoArray.length-1?2:3;this.menus.all.main._setIconDisabled("undo",1===a?!0:!1),this.menus.all.main._setIconDisabled("redo",3===b?!0:!1)},_setUndo:function(a){this.setImage(this.undoArray[a],null,null,!0)},clear:function(){this.menus.all.main._isIconDisabled("clear")||(this.ctx.clearRect(0,0,this.width,this.height),this._addUndo(),this.menus.all.main._setIconDisabled("clear",!0))},_drawRectangleDown:function(a){this._drawShapeDown(a)},_drawRectangleMove:function(a){this._drawShapeMove(a),this.ctxTemp.rect(a.x,a.y,a.w,a.h),this.ctxTemp.stroke(),this.ctxTemp.fill()},_drawRectangleUp:function(a){this._drawShapeUp(a),this._addUndo()},_drawEllipseDown:function(a){this._drawShapeDown(a)},_drawEllipseMove:function(a){this._drawShapeMove(a),this.ctxTemp.ellipse(a.x,a.y,a.w,a.h),this.ctxTemp.stroke(),this.ctxTemp.fill()},_drawEllipseUp:function(a){this._drawShapeUp(a),this._addUndo()},_drawLineDown:function(a){this._drawShapeDown(a)},_drawLineMove:function(a){this._drawShapeMove(a,1);var b=this.canvasTempLeftOriginal,c=this.canvasTempTopOriginal;a.pageX<b&&(a.x=a.x+a.w,a.w=-1*a.w),a.pageY<c&&(a.y=a.y+a.h,a.h=-1*a.h),this.ctxTemp.lineJoin="round",this.ctxTemp.beginPath(),this.ctxTemp.moveTo(a.x,a.y),this.ctxTemp.lineTo(a.x+a.w,a.y+a.h),this.ctxTemp.closePath(),this.ctxTemp.stroke()},_drawLineUp:function(a){this._drawShapeUp(a),this._addUndo()},_drawPencilDown:function(a){this.ctx.lineJoin="round",this.ctx.lineCap="round",this.ctx.strokeStyle=this.options.strokeStyle,this.ctx.fillStyle=this.options.strokeStyle,this.ctx.lineWidth=this.options.lineWidth,this.ctx.beginPath(),this.ctx.arc(a.pageX,a.pageY,this.options.lineWidth/2,0,2*Math.PI,!0),this.ctx.closePath(),this.ctx.fill(),this.ctx.beginPath(),this.ctx.moveTo(a.pageX,a.pageY)},_drawPencilMove:function(a){this.ctx.lineTo(a.pageX,a.pageY),this.ctx.stroke()},_drawPencilUp:function(){this.ctx.closePath(),this._addUndo()},_drawEraserDown:function(a){this.ctx.save(),this.ctx.globalCompositeOperation="destination-out",this._drawPencilDown(a)},_drawEraserMove:function(a){this._drawPencilMove(a)},_drawEraserUp:function(a){this._drawPencilUp(a),this.ctx.restore()},_drawBucketDown:function(a){this.ctx.fillArea(a.pageX,a.pageY,this.options.fillStyle),this._addUndo()}})}(jQuery),!function(){window.CanvasRenderingContext2D&&(CanvasRenderingContext2D.prototype.fillArea=function(a,b,c){function d(a){return{r:p[a],g:p[a+1],b:p[a+2],a:p[a+3]}}function e(a){p[a]=c.r,p[a+1]=c.g,p[a+2]=c.b,p[a+3]=c.a}function f(a){return g.r===a.r&&g.g===a.g&&g.b===a.b&&g.a===a.a}if(!a||!b||!c)return!0;var g,h,i,j,k,l,m=this.canvas.width,n=this.canvas.height,o=this.getImageData(0,0,m,n),p=o.data,q=[[a,b]];if(g=d(4*(b*m+a)),l=this.canvas.style.color,this.canvas.style.color=c,c=this.canvas.style.color.match(/^rgba?\((.*)\);?$/)[1].split(","),this.canvas.style.color=l,c={r:parseInt(c[0],10),g:parseInt(c[1],10),b:parseInt(c[2],10),a:parseInt(c[3]||255,10)},f(c))return!0;for(;q.length;){for(h=q.pop(),i=4*(h[1]*m+h[0]);h[1]-->=0&&f(d(i));)i-=4*m;for(i+=4*m,++h[1],j=!1,k=!1;h[1]++<n-1&&f(d(i));)e(i),h[0]>0&&(f(d(i-4))?j||(q.push([h[0]-1,h[1]]),j=!0):j&&(j=!1)),h[0]<m-1&&(f(d(i+4))?k||(q.push([h[0]+1,h[1]]),k=!0):k&&(k=!1)),i+=4*m}this.putImageData(o,0,0)})}();
\ No newline at end of file
diff --git a/static/js/wpaint/plugins/shapes/img/icons-menu-main-shapes.png b/static/js/wpaint/plugins/shapes/img/icons-menu-main-shapes.png
new file mode 100644
index 0000000..b2cb874
--- /dev/null
+++ b/static/js/wpaint/plugins/shapes/img/icons-menu-main-shapes.png
diff --git a/static/js/wpaint/plugins/shapes/src/shapes.min.js b/static/js/wpaint/plugins/shapes/src/shapes.min.js
new file mode 100644
index 0000000..585aa85
--- /dev/null
+++ b/static/js/wpaint/plugins/shapes/src/shapes.min.js
@@ -0,0 +1 @@
+!function(){window.CanvasRenderingContext2D&&(CanvasRenderingContext2D.prototype.diamond=function(a,b,c,d){return a&&b&&c&&d?(this.beginPath(),this.moveTo(a+.5*c,b),this.lineTo(a,b+.5*d),this.lineTo(a+.5*c,b+d),this.lineTo(a+c,b+.5*d),this.lineTo(a+.5*c,b),this.closePath(),void 0):!0}),window.CanvasRenderingContext2D&&(CanvasRenderingContext2D.prototype.ellipse=function(a,b,c,d){if(!(a&&b&&c&&d))return!0;var e=.5522848,f=c/2*e,g=d/2*e,h=a+c,i=b+d,j=a+c/2,k=b+d/2;this.beginPath(),this.moveTo(a,k),this.bezierCurveTo(a,k-g,j-f,b,j,b),this.bezierCurveTo(j+f,b,h,k-g,h,k),this.bezierCurveTo(h,k+g,j+f,i,j,i),this.bezierCurveTo(j-f,i,a,k+g,a,k),this.closePath()}),window.CanvasRenderingContext2D&&(CanvasRenderingContext2D.prototype.hexagon=function(a,b,c,d){if(!(a&&b&&c&&d))return!0;var e=.225,f=1-e;this.beginPath(),this.moveTo(a+.5*c,b),this.lineTo(a,b+d*e),this.lineTo(a,b+d*f),this.lineTo(a+.5*c,b+d),this.lineTo(a+c,b+d*f),this.lineTo(a+c,b+d*e),this.lineTo(a+.5*c,b),this.closePath()}),window.CanvasRenderingContext2D&&(CanvasRenderingContext2D.prototype.pentagon=function(a,b,c,d){return a&&b&&c&&d?(this.beginPath(),this.moveTo(a+c/2,b),this.lineTo(a,b+.4*d),this.lineTo(a+.2*c,b+d),this.lineTo(a+.8*c,b+d),this.lineTo(a+c,b+.4*d),this.lineTo(a+c/2,b),this.closePath(),void 0):!0}),window.CanvasRenderingContext2D&&(CanvasRenderingContext2D.prototype.roundedRect=function(a,b,c,d,e){return a&&b&&c&&d?(e||(e=5),this.beginPath(),this.moveTo(a+e,b),this.lineTo(a+c-e,b),this.quadraticCurveTo(a+c,b,a+c,b+e),this.lineTo(a+c,b+d-e),this.quadraticCurveTo(a+c,b+d,a+c-e,b+d),this.lineTo(a+e,b+d),this.quadraticCurveTo(a,b+d,a,b+d-e),this.lineTo(a,b+e),this.quadraticCurveTo(a,b,a+e,b),this.closePath(),void 0):!0})}();
\ No newline at end of file
diff --git a/static/js/wpaint/plugins/shapes/src/wPaint.menu.main.shapes.js b/static/js/wpaint/plugins/shapes/src/wPaint.menu.main.shapes.js
new file mode 100644
index 0000000..1d4daeb
--- /dev/null
+++ b/static/js/wpaint/plugins/shapes/src/wPaint.menu.main.shapes.js
@@ -0,0 +1,207 @@
+(function ($) {
+  var img = 'plugins/shapes/img/icons-menu-main-shapes.png';
+
+  // extend menu
+  $.extend(true, $.fn.wPaint.menus.main.items, {
+    rectangle: {
+      group: 'shapes'
+    },
+    roundedRect: {
+      icon: 'activate',
+      group: 'shapes',
+      title: 'Rounded Rectangle',
+      img: img,
+      index: 0,
+      callback: function () { this.setMode('roundedRect'); }
+    },
+    square: {
+      icon: 'activate',
+      group: 'shapes',
+      title: 'Square',
+      img: img,
+      index: 1,
+      callback: function () { this.setMode('square'); }
+    },
+    roundedSquare: {
+      icon: 'activate',
+      group: 'shapes',
+      title: 'Rounded Square',
+      img: img,
+      index: 2,
+      callback: function () { this.setMode('roundedSquare'); }
+    },
+    diamond: {
+      icon: 'activate',
+      group: 'shapes',
+      title: 'Diamond',
+      img: img,
+      index: 4,
+      callback: function () { this.setMode('diamond'); }
+    },
+
+    ellipse: {
+      group: 'shapes2'
+    },
+    circle: {
+      icon: 'activate',
+      group: 'shapes2',
+      title: 'Circle',
+      img: img,
+      index: 3,
+      callback: function () { this.setMode('circle'); }
+    },
+    pentagon: {
+      icon: 'activate',
+      group: 'shapes2',
+      title: 'Pentagon',
+      img: img,
+      index: 5,
+      callback: function () { this.setMode('pentagon'); }
+    },
+    hexagon: {
+      icon: 'activate',
+      group: 'shapes2',
+      title: 'Hexagon',
+      img: img,
+      index: 6,
+      callback: function () { this.setMode('hexagon'); }
+    }
+  });
+
+  // extend functions
+  $.fn.wPaint.extend({
+    /****************************************
+     * roundedRect
+     ****************************************/
+    _drawRoundedRectDown: function (e) { this._drawShapeDown(e); },
+
+    _drawRoundedRectMove: function (e) {
+      this._drawShapeMove(e);
+
+      var radius = e.w > e.h ? e.h / e.w : e.w / e.h;
+
+      this.ctxTemp.roundedRect(e.x, e.y, e.w, e.h, Math.ceil(radius * (e.w * e.h * 0.001)));
+      this.ctxTemp.stroke();
+      this.ctxTemp.fill();
+    },
+
+    _drawRoundedRectUp: function (e) {
+      this._drawShapeUp(e);
+      this._addUndo();
+    },
+
+    /****************************************
+     * square
+     ****************************************/
+    _drawSquareDown: function (e) { this._drawShapeDown(e); },
+
+    _drawSquareMove: function (e) {
+      this._drawShapeMove(e);
+
+      var l = e.w > e.h ? e.h : e.w;
+
+      this.ctxTemp.rect(e.x, e.y, l, l);
+      this.ctxTemp.stroke();
+      this.ctxTemp.fill();
+    },
+
+    _drawSquareUp: function (e) {
+      this._drawShapeUp(e);
+      this._addUndo();
+    },
+
+    /****************************************
+     * roundedSquare
+     ****************************************/
+    _drawRoundedSquareDown: function (e) { this._drawShapeDown(e); },
+
+    _drawRoundedSquareMove: function (e) {
+      this._drawShapeMove(e);
+
+      var l = e.w > e.h ? e.h : e.w;
+
+      this.ctxTemp.roundedRect(e.x, e.y, l, l, Math.ceil(l * l * 0.001));
+      this.ctxTemp.stroke();
+      this.ctxTemp.fill();
+    },
+
+    _drawRoundedSquareUp: function (e) {
+      this._drawShapeUp(e);
+      this._addUndo();
+    },
+
+    /****************************************
+     * diamond
+     ****************************************/
+    _drawDiamondDown: function (e) { this._drawShapeDown(e); },
+
+    _drawDiamondMove: function (e) {
+      this._drawShapeMove(e);
+
+      this.ctxTemp.diamond(e.x, e.y, e.w, e.h);
+      this.ctxTemp.stroke();
+      this.ctxTemp.fill();
+    },
+
+    _drawDiamondUp: function (e) {
+      this._drawShapeUp(e);
+      this._addUndo();
+    },
+
+    /****************************************
+     * circle
+     ****************************************/
+    _drawCircleDown: function (e) { this._drawShapeDown(e); },
+
+    _drawCircleMove: function (e) {
+      this._drawShapeMove(e);
+
+      var l = e.w > e.h ? e.h : e.w;
+
+      this.ctxTemp.ellipse(e.x, e.y, l, l);
+      this.ctxTemp.stroke();
+      this.ctxTemp.fill();
+    },
+
+    _drawCircleUp: function (e) {
+      this._drawShapeUp(e);
+      this._addUndo();
+    },
+
+    /****************************************
+     * pentagon
+     ****************************************/
+    _drawPentagonDown: function (e) { this._drawShapeDown(e); },
+
+    _drawPentagonMove: function (e) {
+      this._drawShapeMove(e);
+
+      this.ctxTemp.pentagon(e.x, e.y, e.w, e.h);
+      this.ctxTemp.stroke();
+      this.ctxTemp.fill();
+    },
+
+    _drawPentagonUp: function (e) {
+      this._drawShapeUp(e);
+      this._addUndo();
+    },
+
+    /****************************************
+     * hexagon
+     ****************************************/
+    _drawHexagonDown: function (e) { this._drawShapeDown(e); },
+
+    _drawHexagonMove: function (e) {
+      this._drawShapeMove(e);
+
+      this.ctxTemp.hexagon(e.x, e.y, e.w, e.h);
+      this.ctxTemp.stroke();
+      this.ctxTemp.fill();
+    },
+
+    _drawHexagonUp: function (e) {
+      this._drawShapeUp(e);
+      this._addUndo();
+    }
+  });
+})(jQuery);
diff --git a/static/js/wpaint/plugins/shapes/wPaint.menu.main.shapes.min.js b/static/js/wpaint/plugins/shapes/wPaint.menu.main.shapes.min.js
new file mode 100644
index 0000000..ac765bd
--- /dev/null
+++ b/static/js/wpaint/plugins/shapes/wPaint.menu.main.shapes.min.js
@@ -0,0 +1 @@
+/*! wPaint - v2.5.0 - 2014-03-01 */!function(a){var b="plugins/shapes/img/icons-menu-main-shapes.png";a.extend(!0,a.fn.wPaint.menus.main.items,{rectangle:{group:"shapes"},roundedRect:{icon:"activate",group:"shapes",title:"Rounded Rectangle",img:b,index:0,callback:function(){this.setMode("roundedRect")}},square:{icon:"activate",group:"shapes",title:"Square",img:b,index:1,callback:function(){this.setMode("square")}},roundedSquare:{icon:"activate",group:"shapes",title:"Rounded Square",img:b,index:2,callback:function(){this.setMode("roundedSquare")}},diamond:{icon:"activate",group:"shapes",title:"Diamond",img:b,index:4,callback:function(){this.setMode("diamond")}},ellipse:{group:"shapes2"},circle:{icon:"activate",group:"shapes2",title:"Circle",img:b,index:3,callback:function(){this.setMode("circle")}},pentagon:{icon:"activate",group:"shapes2",title:"Pentagon",img:b,index:5,callback:function(){this.setMode("pentagon")}},hexagon:{icon:"activate",group:"shapes2",title:"Hexagon",img:b,index:6,callback:function(){this.setMode("hexagon")}}}),a.fn.wPaint.extend({_drawRoundedRectDown:function(a){this._drawShapeDown(a)},_drawRoundedRectMove:function(a){this._drawShapeMove(a);var b=a.w>a.h?a.h/a.w:a.w/a.h;this.ctxTemp.roundedRect(a.x,a.y,a.w,a.h,Math.ceil(b*a.w*a.h*.001)),this.ctxTemp.stroke(),this.ctxTemp.fill()},_drawRoundedRectUp:function(a){this._drawShapeUp(a),this._addUndo()},_drawSquareDown:function(a){this._drawShapeDown(a)},_drawSquareMove:function(a){this._drawShapeMove(a);var b=a.w>a.h?a.h:a.w;this.ctxTemp.rect(a.x,a.y,b,b),this.ctxTemp.stroke(),this.ctxTemp.fill()},_drawSquareUp:function(a){this._drawShapeUp(a),this._addUndo()},_drawRoundedSquareDown:function(a){this._drawShapeDown(a)},_drawRoundedSquareMove:function(a){this._drawShapeMove(a);var b=a.w>a.h?a.h:a.w;this.ctxTemp.roundedRect(a.x,a.y,b,b,Math.ceil(b*b*.001)),this.ctxTemp.stroke(),this.ctxTemp.fill()},_drawRoundedSquareUp:function(a){this._drawShapeUp(a),this._addUndo()},_drawDiamondDown:function(a){this._drawShapeDown(a)},_drawDiamondMove:function(a){this._drawShapeMove(a),this.ctxTemp.diamond(a.x,a.y,a.w,a.h),this.ctxTemp.stroke(),this.ctxTemp.fill()},_drawDiamondUp:function(a){this._drawShapeUp(a),this._addUndo()},_drawCircleDown:function(a){this._drawShapeDown(a)},_drawCircleMove:function(a){this._drawShapeMove(a);var b=a.w>a.h?a.h:a.w;this.ctxTemp.ellipse(a.x,a.y,b,b),this.ctxTemp.stroke(),this.ctxTemp.fill()},_drawCircleUp:function(a){this._drawShapeUp(a),this._addUndo()},_drawPentagonDown:function(a){this._drawShapeDown(a)},_drawPentagonMove:function(a){this._drawShapeMove(a),this.ctxTemp.pentagon(a.x,a.y,a.w,a.h),this.ctxTemp.stroke(),this.ctxTemp.fill()},_drawPentagonUp:function(a){this._drawShapeUp(a),this._addUndo()},_drawHexagonDown:function(a){this._drawShapeDown(a)},_drawHexagonMove:function(a){this._drawShapeMove(a),this.ctxTemp.hexagon(a.x,a.y,a.w,a.h),this.ctxTemp.stroke(),this.ctxTemp.fill()},_drawHexagonUp:function(a){this._drawShapeUp(a),this._addUndo()}})}(jQuery),!function(){window.CanvasRenderingContext2D&&(CanvasRenderingContext2D.prototype.diamond=function(a,b,c,d){return a&&b&&c&&d?(this.beginPath(),this.moveTo(a+.5*c,b),this.lineTo(a,b+.5*d),this.lineTo(a+.5*c,b+d),this.lineTo(a+c,b+.5*d),this.lineTo(a+.5*c,b),void this.closePath()):!0}),window.CanvasRenderingContext2D&&(CanvasRenderingContext2D.prototype.ellipse=function(a,b,c,d){if(!(a&&b&&c&&d))return!0;var e=.5522848,f=c/2*e,g=d/2*e,h=a+c,i=b+d,j=a+c/2,k=b+d/2;this.beginPath(),this.moveTo(a,k),this.bezierCurveTo(a,k-g,j-f,b,j,b),this.bezierCurveTo(j+f,b,h,k-g,h,k),this.bezierCurveTo(h,k+g,j+f,i,j,i),this.bezierCurveTo(j-f,i,a,k+g,a,k),this.closePath()}),window.CanvasRenderingContext2D&&(CanvasRenderingContext2D.prototype.hexagon=function(a,b,c,d){if(!(a&&b&&c&&d))return!0;var e=.225,f=1-e;this.beginPath(),this.moveTo(a+.5*c,b),this.lineTo(a,b+d*e),this.lineTo(a,b+d*f),this.lineTo(a+.5*c,b+d),this.lineTo(a+c,b+d*f),this.lineTo(a+c,b+d*e),this.lineTo(a+.5*c,b),this.closePath()}),window.CanvasRenderingContext2D&&(CanvasRenderingContext2D.prototype.pentagon=function(a,b,c,d){return a&&b&&c&&d?(this.beginPath(),this.moveTo(a+c/2,b),this.lineTo(a,b+.4*d),this.lineTo(a+.2*c,b+d),this.lineTo(a+.8*c,b+d),this.lineTo(a+c,b+.4*d),this.lineTo(a+c/2,b),void this.closePath()):!0}),window.CanvasRenderingContext2D&&(CanvasRenderingContext2D.prototype.roundedRect=function(a,b,c,d,e){return a&&b&&c&&d?(e||(e=5),this.beginPath(),this.moveTo(a+e,b),this.lineTo(a+c-e,b),this.quadraticCurveTo(a+c,b,a+c,b+e),this.lineTo(a+c,b+d-e),this.quadraticCurveTo(a+c,b+d,a+c-e,b+d),this.lineTo(a+e,b+d),this.quadraticCurveTo(a,b+d,a,b+d-e),this.lineTo(a,b+e),this.quadraticCurveTo(a,b,a+e,b),void this.closePath()):!0})}();
\ No newline at end of file
diff --git a/static/js/wpaint/plugins/text/img/icons-menu-text.png b/static/js/wpaint/plugins/text/img/icons-menu-text.png
new file mode 100644
index 0000000..d7bed8c
--- /dev/null
+++ b/static/js/wpaint/plugins/text/img/icons-menu-text.png
diff --git a/static/js/wpaint/plugins/text/src/wPaint.menu.text.js b/static/js/wpaint/plugins/text/src/wPaint.menu.text.js
new file mode 100644
index 0000000..5a15ac0
--- /dev/null
+++ b/static/js/wpaint/plugins/text/src/wPaint.menu.text.js
@@ -0,0 +1,227 @@
+(function ($) {
+
+  // setup menu
+  $.fn.wPaint.menus.text = {
+    img: 'plugins/text/img/icons-menu-text.png',
+    items: {
+      bold: {
+        icon: 'toggle',
+        title: 'Bold',
+        index: 0,
+        callback: function (toggle) { this.setFontBold(toggle); }
+      },
+      italic: {
+        icon: 'toggle',
+        title: 'Italic',
+        index: 1,
+        callback: function (toggle) { this.setFontItalic(toggle); }
+      },
+      /*underline: {
+        icon: 'toggle',
+        title: 'Undelrine',
+        index: 2,
+        callback: function (toggle) { this.setFontUnderline(toggle); }
+      },*/
+      fontSize: {
+        title: 'Font Size',
+        icon: 'select',
+        range: [8, 9, 10, 12, 14, 16, 20, 24, 30],
+        value: 12,
+        callback: function (size) { this.setFontSize(size); }
+      },
+      fontFamily: {
+        icon: 'select',
+        title: 'Font Family',
+        range: ['Arial', 'Courier', 'Times', 'Verdana'],
+        useRange: true,
+        value: 'Arial',
+        callback: function (family) { this.setFontFamily(family); }
+      }
+    }
+  };
+
+  // add icon to main menu
+  $.fn.wPaint.menus.main.items.text = {
+    icon: 'menu',
+    after: 'pencil',
+    title: 'Text',
+    index: 7,
+    callback: function () { this.setMode('text'); }
+  };
+
+  // extend defaults
+  $.extend($.fn.wPaint.defaults, {
+    fontSize       : '12',    // current font size for text input
+    fontFamily     : 'Arial', // active font family for text input
+    fontBold       : false,   // text input bold enable/disable
+    fontItalic     : false,   // text input italic enable/disable
+    fontUnderline  : false    // text input italic enable/disable
+  });
+
+  // extend functions
+  $.fn.wPaint.extend({
+    generate: function () {
+      this.$textCalc = $('<div></div>').hide();
+
+      // make sure clicking on the text-tnput doesn't trigger another textInput
+      this.$textInput = $('<textarea class="wPaint-text-input" spellcheck="false"></textarea>')
+      .on('mousedown', this._stopPropagation) 
+      .css({position: 'absolute'})
+      .hide();
+      
+      $('body').append(this.$textCalc);
+      this.$el.append(this.$textInput);
+
+      this.menus.all.text = this._createMenu('text');
+    },
+
+    _init: function () {
+      var _this = this;
+
+      function inputClick() {
+        _this._drawTextIfNotEmpty();
+        _this.$textInput.hide();
+        _this.$canvasTemp.hide();
+      }
+
+      // in case we click on another element while typing - just auto set the text
+      for (var i in this.menus.all) {
+        this.menus.all[i].$menu
+        .on('click', inputClick)
+        .on('mousedown', this._stopPropagation);
+      }
+
+      // same idea here for clicking outside of the canvas area
+      $(document).on('mousedown', inputClick);
+    },
+
+    /****************************************
+     * setters
+     ****************************************/
+    setFillStyle: function (fillStyle) {
+      this.$textInput.css('color', fillStyle);
+    },
+
+    setFontSize: function (size) {
+      this.options.fontSize = parseInt(size, 10);
+      this._setFont({fontSize: size + 'px', lineHeight: size + 'px'});
+      this.menus.all.text._setSelectValue('fontSize', size);
+    },
+
+    setFontFamily: function (family) {
+      this.options.fontFamily = family;
+      this._setFont({fontFamily: family});
+      this.menus.all.text._setSelectValue('fontFamily', family);
+    },
+
+    setFontBold: function (bold) {
+      this.options.fontBold = bold;
+      this._setFont({fontWeight: (bold ? 'bold' : '')});
+    },
+
+    setFontItalic: function (italic) {
+      this.options.fontItalic = italic;
+      this._setFont({fontStyle: (italic ? 'italic' : '')});
+    },
+
+    setFontUnderline: function (underline) {
+      this.options.fontUnderline = underline;
+      this._setFont({fontWeight: (underline ? 'underline' : '')});
+    },
+
+    _setFont: function (css) {
+      this.$textInput.css(css);
+      this.$textCalc.css(css);
+    },
+
+    /****************************************
+     * Text
+     ****************************************/
+    _drawTextDown: function (e) {
+      this._drawTextIfNotEmpty();
+      this._drawShapeDown(e, 1);
+
+      this.$textInput
+      .css({left: e.pageX - 1, top: e.pageY - 1, width: 0, height: 0})
+      .show().focus();
+    },
+    
+    _drawTextMove: function (e) {
+      this._drawShapeMove(e, 1);
+
+      this.$textInput.css({left: e.left - 1, top: e.top - 1, width: e.width, height: e.height});
+    },
+
+    _drawTextIfNotEmpty: function () {
+      if (this.$textInput.val() !== '') { this._drawText(); }
+    },
+
+    // just draw text - don't want to trigger up here since we are just copying text from input box here
+    _drawText: function () {
+      var fontString = '',
+          lines = this.$textInput.val().split('\n'),
+          linesNew = [],
+          textInputWidth = this.$textInput.width() - 2,
+          width = 0,
+          lastj = 0,
+          offset = this.$textInput.position(),
+          left = offset.left + 1,
+          top = offset.top + 1,
+          //underlineOffset = 0,
+          i, ii, j, jj;
+
+      if (this.options.fontItalic) { fontString += 'italic '; }
+      //if(this.settings.fontUnderline) { fontString += 'underline '; }
+      if (this.options.fontBold) { fontString += 'bold '; }
+      
+      fontString += this.options.fontSize + 'px ' + this.options.fontFamily;
+      
+      for (i = 0, ii = lines.length; i < ii; i++) {
+        this.$textCalc.html('');
+        lastj = 0;
+        
+        for (j = 0, jj = lines[0].length; j < jj; j++) {
+          width = this.$textCalc.append(lines[i][j]).width();
+          
+          if (width > textInputWidth) {
+            linesNew.push(lines[i].substring(lastj, j));
+            lastj = j;
+            this.$textCalc.html(lines[i][j]);
+          }
+        }
+        
+        if (lastj !== j) { linesNew.push(lines[i].substring(lastj, j)); }
+      }
+      
+      lines = this.$textInput.val(linesNew.join('\n')).val().split('\n');
+
+      for (i = 0, ii = lines.length; i < ii; i++) {
+        this.ctx.fillStyle = this.options.fillStyle;
+        this.ctx.textBaseline = 'top';
+        this.ctx.font = fontString;
+        this.ctx.fillText(lines[i], left, top);
+        
+        top += this.options.fontSize;
+        
+        /*if(lines[i] !== '' && this.options.fontTypeUnderline) {
+          width = this.$textCalc.html(lines[i]).width();
+          
+          //manually set pixels for underline since to avoid antialiasing 1px issue, and lack of support for underline in canvas
+          var imgData = this.ctx.getImageData(0, top+underlineOffset, width, 1);
+          
+          for (j=0; j<imgData.width*imgData.height*4; j+=4) {
+            imgData.data[j] = parseInt(this.options.fillStyle.substring(1,3), 16);
+            imgData.data[j+1] = parseInt(this.options.fillStyle.substring(3,5), 16);
+            imgData.data[j+2] = parseInt(this.options.fillStyle.substring(5,7), 16);
+            imgData.data[j+3] = 255;
+          }
+          
+          this.ctx.putImageData(imgData, left, top+underlineOffset);
+        }*/
+      }
+
+      this.$textInput.val('');
+      this._addUndo();
+    }
+  });
+})(jQuery);
diff --git a/static/js/wpaint/plugins/text/wPaint.menu.text.min.js b/static/js/wpaint/plugins/text/wPaint.menu.text.min.js
new file mode 100644
index 0000000..6cd1f3d
--- /dev/null
+++ b/static/js/wpaint/plugins/text/wPaint.menu.text.min.js
@@ -0,0 +1 @@
+/*! wPaint - v2.5.0 - 2014-03-01 */!function(a){a.fn.wPaint.menus.text={img:"plugins/text/img/icons-menu-text.png",items:{bold:{icon:"toggle",title:"Bold",index:0,callback:function(a){this.setFontBold(a)}},italic:{icon:"toggle",title:"Italic",index:1,callback:function(a){this.setFontItalic(a)}},fontSize:{title:"Font Size",icon:"select",range:[8,9,10,12,14,16,20,24,30],value:12,callback:function(a){this.setFontSize(a)}},fontFamily:{icon:"select",title:"Font Family",range:["Arial","Courier","Times","Verdana"],useRange:!0,value:"Arial",callback:function(a){this.setFontFamily(a)}}}},a.fn.wPaint.menus.main.items.text={icon:"menu",after:"pencil",title:"Text",index:7,callback:function(){this.setMode("text")}},a.extend(a.fn.wPaint.defaults,{fontSize:"12",fontFamily:"Arial",fontBold:!1,fontItalic:!1,fontUnderline:!1}),a.fn.wPaint.extend({generate:function(){this.$textCalc=a("<div></div>").hide(),this.$textInput=a('<textarea class="wPaint-text-input" spellcheck="false"></textarea>').on("mousedown",this._stopPropagation).css({position:"absolute"}).hide(),a("body").append(this.$textCalc),this.$el.append(this.$textInput),this.menus.all.text=this._createMenu("text")},_init:function(){function b(){c._drawTextIfNotEmpty(),c.$textInput.hide(),c.$canvasTemp.hide()}var c=this;for(var d in this.menus.all)this.menus.all[d].$menu.on("click",b).on("mousedown",this._stopPropagation);a(document).on("mousedown",b)},setFillStyle:function(a){this.$textInput.css("color",a)},setFontSize:function(a){this.options.fontSize=parseInt(a,10),this._setFont({fontSize:a+"px",lineHeight:a+"px"}),this.menus.all.text._setSelectValue("fontSize",a)},setFontFamily:function(a){this.options.fontFamily=a,this._setFont({fontFamily:a}),this.menus.all.text._setSelectValue("fontFamily",a)},setFontBold:function(a){this.options.fontBold=a,this._setFont({fontWeight:a?"bold":""})},setFontItalic:function(a){this.options.fontItalic=a,this._setFont({fontStyle:a?"italic":""})},setFontUnderline:function(a){this.options.fontUnderline=a,this._setFont({fontWeight:a?"underline":""})},_setFont:function(a){this.$textInput.css(a),this.$textCalc.css(a)},_drawTextDown:function(a){this._drawTextIfNotEmpty(),this._drawShapeDown(a,1),this.$textInput.css({left:a.pageX-1,top:a.pageY-1,width:0,height:0}).show().focus()},_drawTextMove:function(a){this._drawShapeMove(a,1),this.$textInput.css({left:a.left-1,top:a.top-1,width:a.width,height:a.height})},_drawTextIfNotEmpty:function(){""!==this.$textInput.val()&&this._drawText()},_drawText:function(){var a,b,c,d,e="",f=this.$textInput.val().split("\n"),g=[],h=this.$textInput.width()-2,i=0,j=0,k=this.$textInput.position(),l=k.left+1,m=k.top+1;for(this.options.fontItalic&&(e+="italic "),this.options.fontBold&&(e+="bold "),e+=this.options.fontSize+"px "+this.options.fontFamily,a=0,b=f.length;b>a;a++){for(this.$textCalc.html(""),j=0,c=0,d=f[0].length;d>c;c++)i=this.$textCalc.append(f[a][c]).width(),i>h&&(g.push(f[a].substring(j,c)),j=c,this.$textCalc.html(f[a][c]));j!==c&&g.push(f[a].substring(j,c))}for(f=this.$textInput.val(g.join("\n")).val().split("\n"),a=0,b=f.length;b>a;a++)this.ctx.fillStyle=this.options.fillStyle,this.ctx.textBaseline="top",this.ctx.font=e,this.ctx.fillText(f[a],l,m),m+=this.options.fontSize;this.$textInput.val(""),this._addUndo()}})}(jQuery);
\ No newline at end of file