Added [email protected] Text tool now supports text-return

muaz-khan · May 6, 2016 · 4c21fc0 · 4c21fc0
1 parent 7180113
commit 4c21fc0
Show file tree

Hide file tree

Showing 10 changed files with 130 additions and 36 deletions.
diff --git a/README.md b/README.md
@@ -36,7 +36,7 @@ You can use [`designer.setSelected`](https://github.com/muaz-khan/Canvas-Designe
 7. `arc` --- to draw circles
 8. `bezier` --- to draw bezier curves
 9. `quadratic` --- to draw quadratic curves
-10. `text` --- to write texts
+10. `text` --- to write texts on single or multiple lines, select font families/sizes and more
 11. `image` --- add external images
 
 The correct name for `dragSingle` should be: `drag-move-resize last-selected-shape`.
@@ -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.4` with latest version)
+E.g. (Please don't forget replacing `1.0.5` with latest version)
 
 ```html
 <!-- 1st step -->
-<script src="https://github.com/muaz-khan/Canvas-Designer/releases/download/1.0.4/canvas-designer-widget.js"></script>
+<script src="https://github.com/muaz-khan/Canvas-Designer/releases/download/1.0.5/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.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
+designer.widgetHtmlURL = 'https://github.com/muaz-khan/Canvas-Designer/releases/download/1.0.5/widget.html'; // you can place this file anywhere
+designer.widgetJsURL = 'https://github.com/muaz-khan/Canvas-Designer/releases/download/1.0.5/widget.js';     // you can place this file anywhere
 </script>
 
 <!-- 3rd i.e. last step -->
@@ -351,6 +351,16 @@ It is not too much complex to add new tools :) Its easy.
 
 * https://www.webrtc-experiment.com/Canvas-Designer/Help/#contribute
 
+# Shortcut Keys
+
+```
+ctrl+t (to display text-fonts box)
+ctrl+z (to undo last-single shape)
+ctrl+a (to select all shapes)
+ctrl+c (copy last-selected shape)
+ctrl+v (paste last-copied shape)
+```
+
 # Demos
 
 * http://muaz-khan.github.io/Everything/Canvas/ (A-to-zee all shapes, and animations on this page is created using canvas-designer)

diff --git a/dev/common.js b/dev/common.js
@@ -406,6 +406,12 @@ function endLastPath() {
     else if (cache.isBezierCurve) bezierHandler.end();
 
     drawHelper.redraw();
+
+    if (textHandler.text && textHandler.text.length) {
+        textHandler.appendPoints();
+        textHandler.onShapeUnSelected();
+    }
+    textHandler.showOrHideTextTools('hide');
 }
 
 var copiedStuff = [],

diff --git a/dev/decorator.js b/dev/decorator.js
@@ -79,16 +79,9 @@ window.addEventListener('load', function() {
             }
 
             if (shape === 'Text') {
-                tempContext.canvas.style.cursor = 'text';
-                textHandler.x = textHandler.y = 0;
-                textHandler.text = '';
+                textHandler.onShapeSelected();
             } else {
-                textHandler.text = '';
-                textHandler.showOrHideTextTools('hide');
-                tempContext.canvas.style.cursor = 'default';
-                if (typeof textHandler.blinkCursorInterval !== 'undefined') {
-                    clearInterval(textHandler.blinkCursorInterval);
-                }
+                textHandler.onShapeUnSelected();
             }
 
             if (shape === 'Pencil') {

diff --git a/dev/events-handler.js b/dev/events-handler.js
@@ -121,14 +121,25 @@ function onkeyup(e) {
 
     keyCode = e.which || e.keyCode || 0;
 
+    if (keyCode === 13 && is.isText) {
+        textHandler.onReturnKeyPressed();
+        return;
+    }
+
     if (keyCode == 8 || keyCode == 46) {
         if (isBackKey(e, keyCode)) {
             textHandler.writeText(textHandler.lastKeyPress, true);
         }
         return;
     }
 
-    // Ctrl + Z
+    // Ctrl + t
+    if (isControlKeyPressed && keyCode === 84 && is.isText) {
+        textHandler.showTextTools();
+        return;
+    }
+
+    // Ctrl + z
     if (isControlKeyPressed && keyCode === 90) {
         if (points.length) {
             points.length = points.length - 1;
@@ -138,7 +149,7 @@ function onkeyup(e) {
         }
     }
 
-    // Ctrl + A
+    // Ctrl + a
     if (isControlKeyPressed && keyCode === 65) {
         dragHelper.global.startingIndex = 0;
 
@@ -147,12 +158,12 @@ function onkeyup(e) {
         setSelection(find('drag-all-paths'), 'DragAllPaths');
     }
 
-    // Ctrl + C
+    // Ctrl + c
     if (isControlKeyPressed && keyCode === 67 && points.length) {
         copy();
     }
 
-    // Ctrl + V
+    // Ctrl + v
     if (isControlKeyPressed && keyCode === 86 && copiedStuff.length) {
         paste();
     }

diff --git a/dev/text-handler.js b/dev/text-handler.js
@@ -2,6 +2,20 @@ var textHandler = {
     text: '',
     selectedFontFamily: 'Arial',
     selectedFontSize: '15',
+    onShapeSelected: function() {
+        tempContext.canvas.style.cursor = 'text';
+        this.x = this.y = this.pageX = this.pageY = 0;
+        this.text = '';
+    },
+    onShapeUnSelected: function() {
+        this.text = '';
+        this.showOrHideTextTools('hide');
+        tempContext.canvas.style.cursor = 'default';
+
+        if (typeof this.blinkCursorInterval !== 'undefined') {
+            clearInterval(this.blinkCursorInterval);
+        }
+    },
     getFillColor: function(color) {
         color = (color || fillStyle).toLowerCase();
 
@@ -160,6 +174,16 @@ var textHandler = {
             }
         });
     },
+    onReturnKeyPressed: function() {
+        if (!textHandler.text || !textHandler.text.length) return;
+        var fontSize = parseInt(textHandler.selectedFontSize) || 15;
+        this.mousedown({
+            pageX: this.pageX,
+            // pageY: parseInt(tempContext.measureText(textHandler.text).height * 2) + 10
+            pageY: this.pageY + fontSize + 5
+        });
+        drawHelper.redraw();
+    },
     fontFamilyBox: document.querySelector('.fontSelectUl'),
     fontSizeBox: document.querySelector('.fontSizeUl')
 };
diff --git a/index.html b/index.html
@@ -206,6 +206,14 @@ <h2>Select Tools</h2>
             <button id="open-room">Open</button>
         </div>
     </div>
+
+    <hr>
+    <h2>Shortcut Keys</h2>
+    ctrl+t (to display text-fonts box)<br>
+    ctrl+z (to undo last-single shape)<br>
+    ctrl+a (to select all shapes)<br>
+    ctrl+c (copy last-selected shape)<br>
+    ctrl+v (paste last-copied shape)
 </div>
 
 <div class="extra-controls">

diff --git a/multiple.html b/multiple.html
@@ -208,6 +208,14 @@ <h2>Select Tools</h2>
             <button id="open-room">Open</button>
         </div>
     </div>
+
+    <hr>
+    <h2>Shortcut Keys</h2>
+    ctrl+t (to display text-fonts box)<br>
+    ctrl+z (to undo last-single shape)<br>
+    ctrl+a (to select all shapes)<br>
+    ctrl+c (copy last-selected shape)<br>
+    ctrl+v (paste last-copied shape)
 </div>
 
 <div class="extra-controls">

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "canvas-designer",
   "preferGlobal": false,
-  "version": "1.0.4",
+  "version": "1.0.5",
   "author": {
     "name": "Muaz Khan",
     "email": "[email protected]",

diff --git a/widget.js b/widget.js
@@ -1,4 +1,4 @@
-// Last time updated: 2016-05-05 3:40:52 PM UTC
+// Last time updated: 2016-05-06 3:46:17 AM UTC
 
 // _______________
 // Canvas-Designer
@@ -417,6 +417,12 @@
         else if (cache.isBezierCurve) bezierHandler.end();
 
         drawHelper.redraw();
+
+        if (textHandler.text && textHandler.text.length) {
+            textHandler.appendPoints();
+            textHandler.onShapeUnSelected();
+        }
+        textHandler.showOrHideTextTools('hide');
     }
 
     var copiedStuff = [],
@@ -541,16 +547,9 @@
                 }
 
                 if (shape === 'Text') {
-                    tempContext.canvas.style.cursor = 'text';
-                    textHandler.x = textHandler.y = 0;
-                    textHandler.text = '';
+                    textHandler.onShapeSelected();
                 } else {
-                    textHandler.text = '';
-                    textHandler.showOrHideTextTools('hide');
-                    tempContext.canvas.style.cursor = 'default';
-                    if (typeof textHandler.blinkCursorInterval !== 'undefined') {
-                        clearInterval(textHandler.blinkCursorInterval);
-                    }
+                    textHandler.onShapeUnSelected();
                 }
 
                 if (shape === 'Pencil') {
@@ -1882,6 +1881,20 @@
         text: '',
         selectedFontFamily: 'Arial',
         selectedFontSize: '15',
+        onShapeSelected: function() {
+            tempContext.canvas.style.cursor = 'text';
+            this.x = this.y = this.pageX = this.pageY = 0;
+            this.text = '';
+        },
+        onShapeUnSelected: function() {
+            this.text = '';
+            this.showOrHideTextTools('hide');
+            tempContext.canvas.style.cursor = 'default';
+
+            if (typeof this.blinkCursorInterval !== 'undefined') {
+                clearInterval(this.blinkCursorInterval);
+            }
+        },
         getFillColor: function(color) {
             color = (color || fillStyle).toLowerCase();
 
@@ -2040,6 +2053,16 @@
                 }
             });
         },
+        onReturnKeyPressed: function() {
+            if (!textHandler.text || !textHandler.text.length) return;
+            var fontSize = parseInt(textHandler.selectedFontSize) || 15;
+            this.mousedown({
+                pageX: this.pageX,
+                // pageY: parseInt(tempContext.measureText(textHandler.text).height * 2) + 10
+                pageY: this.pageY + fontSize + 5
+            });
+            drawHelper.redraw();
+        },
         fontFamilyBox: document.querySelector('.fontSelectUl'),
         fontSizeBox: document.querySelector('.fontSizeUl')
     };
@@ -2684,14 +2707,25 @@
 
         keyCode = e.which || e.keyCode || 0;
 
+        if (keyCode === 13 && is.isText) {
+            textHandler.onReturnKeyPressed();
+            return;
+        }
+
         if (keyCode == 8 || keyCode == 46) {
             if (isBackKey(e, keyCode)) {
                 textHandler.writeText(textHandler.lastKeyPress, true);
             }
             return;
         }
 
-        // Ctrl + Z
+        // Ctrl + t
+        if (isControlKeyPressed && keyCode === 84 && is.isText) {
+            textHandler.showTextTools();
+            return;
+        }
+
+        // Ctrl + z
         if (isControlKeyPressed && keyCode === 90) {
             if (points.length) {
                 points.length = points.length - 1;
@@ -2701,7 +2735,7 @@
             }
         }
 
-        // Ctrl + A
+        // Ctrl + a
         if (isControlKeyPressed && keyCode === 65) {
             dragHelper.global.startingIndex = 0;
 
@@ -2710,12 +2744,12 @@
             setSelection(find('drag-all-paths'), 'DragAllPaths');
         }
 
-        // Ctrl + C
+        // Ctrl + c
         if (isControlKeyPressed && keyCode === 67 && points.length) {
             copy();
         }
 
-        // Ctrl + V
+        // Ctrl + v
         if (isControlKeyPressed && keyCode === 86 && copiedStuff.length) {
             paste();
         }

diff --git a/widget.min.js b/widget.min.js