Added [email protected] Added font-family and font-size tools.

.travis.yml

@@ -1,10 +1,12 @@
+
 language: node_js
 node_js:
   - "0.11"
 install: npm install
 before_script:
-  - npm install grunt-cli
-  - npm install grunt
+  - npm install grunt-cli@0.1.13 -g
+  - npm install grunt@0.4.5
   - grunt
+after_failure: npm install && grunt
 matrix:
   fast_finish: true

README.md

@@ -73,20 +73,20 @@ More importantly, you can use unlimited designers on a single page. Each will ha
 
    `designer.appendTo(document.body);`
 
-E.g. (Please don't forget replacing `1.0.0` with latest version)
+E.g. (Please don't forget replacing `1.0.4` with latest version)
 
 ```html
 <!-- 1st step -->
-<script src="https://github.com/muaz-khan/Canvas-Designer/releases/download/1.0.3/canvas-designer-widget.js"></script>
+<script src="https://github.com/muaz-khan/Canvas-Designer/releases/download/1.0.4/canvas-designer-widget.js"></script>
 
 <!-- 2nd step -->
 <script>
 var designer = new CanvasDesigner();
 
 // both links are mandatory
 // widget.html will internally use widget.js
-designer.widgetHtmlURL = 'https://github.com/muaz-khan/Canvas-Designer/releases/download/1.0.3/widget.html'; // you can place this file anywhere
-designer.widgetJsURL = 'https://github.com/muaz-khan/Canvas-Designer/releases/download/1.0.3/widget.js';     // you can place this file anywhere
+designer.widgetHtmlURL = 'https://github.com/muaz-khan/Canvas-Designer/releases/download/1.0.4/widget.html'; // you can place this file anywhere
+designer.widgetJsURL = 'https://github.com/muaz-khan/Canvas-Designer/releases/download/1.0.4/widget.js';     // you can place this file anywhere
 </script>
 
 <!-- 3rd i.e. last step -->

bower.json

@@ -0,0 +1,47 @@
+{
+  "name": "canvas-designer",
+  "preferGlobal": false,
+  "version": "1.0.4",
+  "author": {
+    "name": "Muaz Khan",
+    "email": "[email protected]",
+    "url": "http://www.muazkhan.com/"
+  },
+  "description": "Collaborative, extendable, JavaScript Canvas2D drawing tool, supporting dozens of builtin tools.",
+  "main": "server.js",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/muaz-khan/Canvas-Designer.git"
+  },
+  "keywords": [
+    "canvas-designer",
+    "drawing",
+    "tool",
+    "canvas2d",
+    "javascript",
+    "muaz",
+    "muaz-khan"
+  ],
+  "analyze": false,
+  "license": "MIT",
+  "readmeFilename": "README.md",
+  "bugs": {
+    "url": "https://github.com/muaz-khan/Canvas-Designer/issues",
+    "email": "[email protected]"
+  },
+  "homepage": "https://www.webrtc-experiment.com/Canvas-Designer/",
+  "ignore": [
+        "**/.*",
+        "node_modules"
+   ],
+  "_from": "canvas-designer@",
+  "devDependencies": {
+    "grunt": "0.4.5",
+    "grunt-cli": "0.1.13",
+    "load-grunt-tasks": "3.3.0",
+    "grunt-contrib-concat": "0.5.1",
+    "grunt-contrib-uglify": "0.9.2",
+    "grunt-jsbeautifier": "0.2.10",
+    "grunt-bump": "0.6.0"
+  }
+}

dev/amd.js

@@ -0,0 +1,59 @@
+var browserFakeUserAgent = 'Fake/5.0 (FakeOS) AppleWebKit/123 (KHTML, like Gecko) Fake/12.3.4567.89 Fake/123.45';
+
+(function(that) {
+    if (typeof window !== 'undefined') {
+        return;
+    }
+
+    if (typeof window === 'undefined' && typeof global !== 'undefined') {
+        global.navigator = {
+            userAgent: browserFakeUserAgent,
+            getUserMedia: function() {}
+        };
+
+        /*global window:true */
+        that.window = global;
+    } else if (typeof window === 'undefined') {
+        // window = this;
+    }
+
+    if (typeof document === 'undefined') {
+        /*global document:true */
+        that.document = {};
+
+        document.createElement = document.captureStream = document.mozCaptureStream = function() {
+            return {};
+        };
+    }
+
+    if (typeof location === 'undefined') {
+        /*global location:true */
+        that.location = {
+            protocol: 'file:',
+            href: '',
+            hash: ''
+        };
+    }
+
+    if (typeof screen === 'undefined') {
+        /*global screen:true */
+        that.screen = {
+            width: 0,
+            height: 0
+        };
+    }
+})(typeof global !== 'undefined' ? global : window);
+
+if (typeof CanvasDesigner !== 'undefined') {
+    window.CanvasDesigner = CanvasDesigner;
+
+    if (typeof module !== 'undefined' /* && !!module.exports*/ ) {
+        module.exports = CanvasDesigner;
+    }
+
+    if (typeof define === 'function' && define.amd) {
+        define('CanvasDesigner', [], function() {
+            return CanvasDesigner;
+        });
+    }
+}

dev/common.js

@@ -39,9 +39,9 @@ var points = [],
     fillStyle = 'transparent',
     globalAlpha = 1,
     globalCompositeOperation = 'source-over',
-    lineCap = 'butt',
-    font = '15px Verdana',
-    lineJoin = 'miter';
+    lineCap = 'round',
+    font = '15px "Arial"',
+    lineJoin = 'round';
 
 function getContext(id) {
     var canv = find(id),

dev/decorator.js

@@ -75,7 +75,7 @@ window.addEventListener('load', function() {
 
         addEvent(context.canvas, 'click', function() {
             if (textHandler.text.length) {
-                points[points.length] = ['text', ['"' + textHandler.text + '"', textHandler.x, textHandler.y], drawHelper.getOptions()];
+                textHandler.appendPoints();
             }
 
             if (shape === 'Text') {
@@ -84,6 +84,7 @@ window.addEventListener('load', function() {
                 textHandler.text = '';
             } else {
                 textHandler.text = '';
+                textHandler.showOrHideTextTools('hide');
                 tempContext.canvas.style.cursor = 'default';
                 if (typeof textHandler.blinkCursorInterval !== 'undefined') {
                     clearInterval(textHandler.blinkCursorInterval);

dev/draw-helper.js

@@ -13,8 +13,18 @@ var drawHelper = {
             syncPoints();
         }
     },
-    getOptions: function() {
-        return [lineWidth, strokeStyle, fillStyle, globalAlpha, globalCompositeOperation, lineCap, lineJoin, font];
+    getOptions: function(opt) {
+        opt = opt || {};
+        return [
+            opt.lineWidth || lineWidth,
+            opt.strokeStyle || strokeStyle,
+            opt.fillStyle || fillStyle,
+            opt.globalAlpha || globalAlpha,
+            opt.globalCompositeOperation || globalCompositeOperation,
+            opt.lineCap || lineCap,
+            opt.lineJoin || lineJoin,
+            opt.font || font
+        ];
     },
     handleOptions: function(context, opt, isNoFillStroke) {
         opt = opt || this.getOptions();
@@ -29,6 +39,8 @@ var drawHelper = {
         context.strokeStyle = opt[1];
         context.fillStyle = opt[2];
 
+        context.font = opt[7];
+
         if (!isNoFillStroke) {
             context.stroke();
             context.fill();
@@ -42,13 +54,9 @@ var drawHelper = {
         this.handleOptions(context, options);
     },
     text: function(context, point, options) {
-        var oldFillStyle = fillStyle;
-        context.fillStyle = fillStyle === 'transparent' || fillStyle === 'White' ? 'Black' : fillStyle;
-        context.font = '15px Verdana';
-        context.fillText(point[0].substr(1, point[0].length - 2), point[1], point[2]);
-        fillStyle = oldFillStyle;
-
         this.handleOptions(context, options);
+        context.fillStyle = textHandler.getFillColor(options[2]);
+        context.fillText(point[0].substr(1, point[0].length - 2), point[1], point[2]);
     },
     arc: function(context, point, options) {
         context.beginPath();

dev/text-handler.js

@@ -1,6 +1,19 @@
 var textHandler = {
     text: '',
+    selectedFontFamily: 'Arial',
+    selectedFontSize: '15',
+    getFillColor: function(color) {
+        color = (color || fillStyle).toLowerCase();
+
+        if (color == 'rgba(255, 255, 255, 0)' || color == 'transparent' || color === 'white') {
+            return 'black';
+        }
+
+        return color;
+    },
     writeText: function(keyPressed, isBackKeyPressed) {
+        if (!is.isText) return;
+
         if (isBackKeyPressed) {
             textHandler.text = textHandler.text.substr(0, textHandler.text.length - 1);
             textHandler.fillText(textHandler.text);
@@ -11,10 +24,15 @@ var textHandler = {
         textHandler.fillText(textHandler.text);
     },
     fillText: function(text) {
+        if (!is.isText) return;
+
         tempContext.clearRect(0, 0, tempContext.canvas.width, tempContext.canvas.height);
 
-        tempContext.fillStyle = 'black';
-        tempContext.font = font;
+        var options = textHandler.getOptions();
+        drawHelper.handleOptions(tempContext, options);
+        tempContext.fillStyle = textHandler.getFillColor(options[2]);
+        tempContext.font = textHandler.selectedFontSize + 'px "' + textHandler.selectedFontFamily + '"';
+
         tempContext.fillText(text, textHandler.x, textHandler.y);
     },
     blinkCursorInterval: null,
@@ -27,9 +45,29 @@ var textHandler = {
             textHandler.fillText(textHandler.text);
         }
     },
+    getOptions: function() {
+        var options = {
+            font: textHandler.selectedFontSize + 'px "' + textHandler.selectedFontFamily + '"',
+            fillStyle: textHandler.getFillColor(),
+            strokeStyle: '#6c96c8',
+            globalCompositeOperation: 'source-over',
+            globalAlpha: 1,
+            lineJoin: 'round',
+            lineCap: 'round',
+            lineWidth: 2
+        };
+        font = options.font;
+        return options;
+    },
+    appendPoints: function() {
+        var options = textHandler.getOptions();
+        points[points.length] = ['text', ['"' + textHandler.text + '"', textHandler.x, textHandler.y], drawHelper.getOptions(options)];
+    },
     mousedown: function(e) {
+        if (!is.isText) return;
+
         if (textHandler.text.length) {
-            points[points.length] = ['text', ['"' + textHandler.text + '"', textHandler.x, textHandler.y], drawHelper.getOptions()];
+            this.appendPoints();
         }
 
         textHandler.x = textHandler.y = 0;
@@ -47,7 +85,81 @@ var textHandler = {
 
         textHandler.blinkCursor();
         textHandler.blinkCursorInterval = setInterval(textHandler.blinkCursor, 700);
+
+        this.showTextTools();
     },
     mouseup: function(e) {},
-    mousemove: function(e) {}
+    mousemove: function(e) {},
+    showOrHideTextTools: function(show) {
+        this.fontFamilyBox.style.display = show == 'show' ? 'block' : 'none';
+        this.fontSizeBox.style.display = show == 'show' ? 'block' : 'none';
+
+        this.fontSizeBox.style.left = this.x + 'px';
+        this.fontFamilyBox.style.left = (this.fontSizeBox.clientWidth + this.x) + 'px';
+
+        this.fontSizeBox.style.top = this.y + 'px';
+        this.fontFamilyBox.style.top = this.y + 'px';
+    },
+    showTextTools: function() {
+        if (!this.fontFamilyBox || !this.fontSizeBox) return;
+
+        this.unselectAllFontFamilies();
+        this.unselectAllFontSizes();
+
+        this.showOrHideTextTools('show');
+
+        this.eachFontFamily(function(child) {
+            child.onclick = function(e) {
+                e.preventDefault();
+
+                textHandler.showOrHideTextTools('hide');
+
+                textHandler.selectedFontFamily = this.innerHTML;
+                this.className = 'font-family-selected';
+            };
+            child.style.fontFamily = child.innerHTML;
+        });
+
+        this.eachFontSize(function(child) {
+            child.onclick = function(e) {
+                e.preventDefault();
+
+                textHandler.showOrHideTextTools('hide');
+
+                textHandler.selectedFontSize = this.innerHTML;
+                this.className = 'font-family-selected';
+            };
+            // child.style.fontSize = child.innerHTML + 'px';
+        });
+    },
+    eachFontFamily: function(callback) {
+        var childs = this.fontFamilyBox.querySelectorAll('li');
+        for (var i = 0; i < childs.length; i++) {
+            callback(childs[i]);
+        }
+    },
+    unselectAllFontFamilies: function() {
+        this.eachFontFamily(function(child) {
+            child.className = '';
+            if (child.innerHTML === textHandler.selectedFontFamily) {
+                child.className = 'font-family-selected';
+            }
+        });
+    },
+    eachFontSize: function(callback) {
+        var childs = this.fontSizeBox.querySelectorAll('li');
+        for (var i = 0; i < childs.length; i++) {
+            callback(childs[i]);
+        }
+    },
+    unselectAllFontSizes: function() {
+        this.eachFontSize(function(child) {
+            child.className = '';
+            if (child.innerHTML === textHandler.selectedFontSize) {
+                child.className = 'font-size-selected';
+            }
+        });
+    },
+    fontFamilyBox: document.querySelector('.fontSelectUl'),
+    fontSizeBox: document.querySelector('.fontSizeUl')
 };

package.json

@@ -1,7 +1,7 @@
 {
   "name": "canvas-designer",
   "preferGlobal": false,
-  "version": "1.0.3",
+  "version": "1.0.4",
   "author": {
     "name": "Muaz Khan",
     "email": "[email protected]",