Added [email protected] Fixed #16

Now you can paste any language’s text from the clipboard.

README.md

@@ -46,9 +46,7 @@ The correct name for `dragMultiple` should be: `drag-move all-shapes`.
 **Upcoming** tools & features:
 
 1. `arrow` --- to draw arrows
-2. Set font-size for texts
-3. Set font-family for texts
-4. Resize all shapes at once (currently you can resize last selected shape only)
+2. Resize all shapes at once (currently you can resize last selected shape only)
 
 # Features
 
@@ -63,6 +61,23 @@ The correct name for `dragMultiple` should be: `drag-move all-shapes`.
 
 More importantly, you can use unlimited designers on a single page. Each will have its own surface and its own tools.
 
+# Chinese, Arabic, other languages
+
+You can install following chrome extension for multi-language input tools:
+
+* https://chrome.google.com/webstore/detail/google-input-tools/mclkkofklkfljcocdinagocijmpgbhab?hl=en
+
+Now type your own language text in any `<input>` box or anywhere, and simply copy that text.
+
+Now click `T` tool icon from the tool-box and press `ctrl+v` to paste your own language's text.
+
+To repeat it:
+
+1. Write your own language texts anywhere and make sure to copy to clipboard using `ctrl+v`
+2. Then click `T` icon, and try press `ctrl+v` to paste your copied text
+
+You can paste any text: English, Arabic, Chinese or whatever!
+
 # How to Use
 
 1. Download/link `canvas-designer-widget.js` from [this github repository](https://github.com/muaz-khan/Canvas-Designer).
@@ -73,20 +88,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.5` with latest version)
+E.g. (Please don't forget replacing `1.0.6` with latest version)
 
 ```html
 <!-- 1st step -->
-<script src="https://github.com/muaz-khan/Canvas-Designer/releases/download/1.0.5/canvas-designer-widget.js"></script>
+<script src="https://github.com/muaz-khan/Canvas-Designer/releases/download/1.0.6/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.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
+designer.widgetHtmlURL = 'https://github.com/muaz-khan/Canvas-Designer/releases/download/1.0.6/widget.html'; // you can place this file anywhere
+designer.widgetJsURL = 'https://github.com/muaz-khan/Canvas-Designer/releases/download/1.0.6/widget.js';     // you can place this file anywhere
 </script>
 
 <!-- 3rd i.e. last step -->

bower.json

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

canvas-designer-widget.js

@@ -1,5 +1,3 @@
-// Last time updated: 2016-04-17 6:42:16 AM UTC
-
 // _______________
 // Canvas-Designer
 

dev/common.js

@@ -121,7 +121,7 @@ var common = {
             }
 
             if (p[0] === 'text') {
-                tempArray[i] = ['context.fillText(' + point[0] + ', ' + point[1] + ', ' + point[2] + ');\n' + this.strokeOrFill(p[2])];
+                tempArray[i] = [this.strokeOrFill(p[2]) + '\ncontext.fillText(' + point[0] + ', ' + point[1] + ', ' + point[2] + ');'];
             }
 
             if (p[0] === 'arc') {
@@ -297,7 +297,7 @@ var common = {
             }
 
             if (p[0] === 'text') {
-                output += 'context.fillText(' + point[0] + ', ' + getPoint(point[1], x, 'x') + ', ' + getPoint(point[2], y, 'y') + ');\n' + this.strokeOrFill(p[2]);
+                output += this.strokeOrFill(p[2]) + '\n' + 'context.fillText(' + point[0] + ', ' + getPoint(point[1], x, 'x') + ', ' + getPoint(point[2], y, 'y') + ');';
             }
 
             if (p[0] === 'rect') {
@@ -380,18 +380,18 @@ var common = {
         if (!this.prevProps || this.prevProps !== p.join(',')) {
             this.prevProps = p.join(',');
 
-            return 'strokeOrFill("' + p.join('", "') + '");';
+            return 'strokeOrFill(\'' + p.join('\', \'') + '\');';
         }
 
         return 'strokeOrFill();';
     },
     prevProps: null,
     shortenHelper: function(name, p1, p2) {
-        var result = '["' + name + '", [' + p1.join(', ') + ']';
+        var result = '[\'' + name + '\', [' + p1.join(', ') + ']';
 
         if (!this.prevProps || this.prevProps !== p2.join(',')) {
             this.prevProps = p2.join(',');
-            result += ', ["' + p2.join('", "') + '"]';
+            result += ', [\'' + p2.join('\', \'') + '\']';
         }
 
         return result + '], ';

dev/events-handler.js

@@ -195,3 +195,18 @@ function onkeypress(e) {
 }
 
 addEvent(document, 'keypress', onkeypress);
+
+function onTextFromClipboard(e) {
+    if (!is.isText) return;
+    var pastedText = undefined;
+    if (window.clipboardData && window.clipboardData.getData) { // IE
+        pastedText = window.clipboardData.getData('Text');
+    } else if (e.clipboardData && e.clipboardData.getData) {
+        pastedText = e.clipboardData.getData('text/plain');
+    }
+    if (pastedText && pastedText.length) {
+        textHandler.writeText(pastedText);
+    }
+}
+
+addEvent(document, 'paste', onTextFromClipboard);

package.json

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

widget.js

@@ -1,4 +1,4 @@
-// Last time updated: 2016-05-06 3:46:17 AM UTC
+// Last time updated: 2016-05-10 6:26:39 AM UTC
 
 // _______________
 // Canvas-Designer
@@ -132,7 +132,7 @@
                 }
 
                 if (p[0] === 'text') {
-                    tempArray[i] = ['context.fillText(' + point[0] + ', ' + point[1] + ', ' + point[2] + ');\n' + this.strokeOrFill(p[2])];
+                    tempArray[i] = [this.strokeOrFill(p[2]) + '\ncontext.fillText(' + point[0] + ', ' + point[1] + ', ' + point[2] + ');'];
                 }
 
                 if (p[0] === 'arc') {
@@ -308,7 +308,7 @@
                 }
 
                 if (p[0] === 'text') {
-                    output += 'context.fillText(' + point[0] + ', ' + getPoint(point[1], x, 'x') + ', ' + getPoint(point[2], y, 'y') + ');\n' + this.strokeOrFill(p[2]);
+                    output += this.strokeOrFill(p[2]) + '\n' + 'context.fillText(' + point[0] + ', ' + getPoint(point[1], x, 'x') + ', ' + getPoint(point[2], y, 'y') + ');';
                 }
 
                 if (p[0] === 'rect') {
@@ -391,18 +391,18 @@
             if (!this.prevProps || this.prevProps !== p.join(',')) {
                 this.prevProps = p.join(',');
 
-                return 'strokeOrFill("' + p.join('", "') + '");';
+                return 'strokeOrFill(\'' + p.join('\', \'') + '\');';
             }
 
             return 'strokeOrFill();';
         },
         prevProps: null,
         shortenHelper: function(name, p1, p2) {
-            var result = '["' + name + '", [' + p1.join(', ') + ']';
+            var result = '[\'' + name + '\', [' + p1.join(', ') + ']';
 
             if (!this.prevProps || this.prevProps !== p2.join(',')) {
                 this.prevProps = p2.join(',');
-                result += ', ["' + p2.join('", "') + '"]';
+                result += ', [\'' + p2.join('\', \'') + '\']';
             }
 
             return result + '], ';
@@ -2782,6 +2782,21 @@
 
     addEvent(document, 'keypress', onkeypress);
 
+    function onTextFromClipboard(e) {
+        if (!is.isText) return;
+        var pastedText = undefined;
+        if (window.clipboardData && window.clipboardData.getData) { // IE
+            pastedText = window.clipboardData.getData('Text');
+        } else if (e.clipboardData && e.clipboardData.getData) {
+            pastedText = e.clipboardData.getData('text/plain');
+        }
+        if (pastedText && pastedText.length) {
+            textHandler.writeText(pastedText);
+        }
+    }
+
+    addEvent(document, 'paste', onTextFromClipboard);
+
     // scripts on this page directly touches DOM-elements
     // removing or altering anything may cause failures in the UI event handlers
     // it is used only to bring collaboration for canvas-surface