Feature/fix pencil and keyboard on mobile devices

Gruntfile.js

@@ -135,5 +135,6 @@ module.exports = function(grunt) {
     // set default tasks to run when grunt is called without parameters
     // http://gruntjs.com/api/grunt.task
     grunt.registerTask('default', ['concat', 'jsbeautifier', 'uglify']);
+    grunt.registerTask('watch', ['watch']);
     grunt.loadNpmTasks('grunt-contrib-watch');
 };

dev/events-handler.js

@@ -1,5 +1,5 @@
 var canvas = tempContext.canvas,
-    isTouch = 'createTouch' in document;
+    isTouch = 'createTouch' in document || 'ontouchstart' in window;
 
 addEvent(canvas, isTouch ? 'touchstart mousedown' : 'mousedown', function(e) {
     if (isTouch) e = e.pageX ? e : e.touches.length ? e.touches[0] : {
@@ -161,13 +161,15 @@ function onkeyup(e) {
     keyCode = e.which || e.keyCode || 0;
 
     if (keyCode === 13 && is.isText) {
-        textHandler.onReturnKeyPressed();
+        // no handle anumore
+        // textHandler.onReturnKeyPressed();
         return;
     }
 
     if (keyCode == 8 || keyCode == 46) {
         if (isBackKey(e, keyCode)) {
-            textHandler.writeText(textHandler.lastKeyPress, true);
+            // no handle anymore
+            // textHandler.writeText(textHandler.lastKeyPress, true);
         }
         return;
     }
@@ -231,7 +233,8 @@ function onkeypress(e) {
 
     var inp = String.fromCharCode(keyCode);
     if (/[a-zA-Z0-9-_ !?|\/'",.=:;(){}\[\]`~@#$%^&*+-]/.test(inp)) {
-        textHandler.writeText(String.fromCharCode(keyCode));
+        // no handle anymore
+        // textHandler.writeText(String.fromCharCode(keyCode));
     }
 }
 

dev/text-handler.js

@@ -102,6 +102,7 @@ var textHandler = {
         textHandler.blinkCursorInterval = setInterval(textHandler.blinkCursor, 700);
 
         this.showTextTools();
+        this.focusVirtualTextbox();
     },
     mouseup: function(e) {},
     mousemove: function(e) {},
@@ -157,6 +158,32 @@ var textHandler = {
             // child.style.fontSize = child.innerHTML + 'px';
         });
     },
+
+    /**
+     * In order to support mobile devices,
+     * or support some special language
+     * It will create an hidden textbox
+     * User will type into this textbox
+     */
+    focusVirtualTextbox: function() {
+        var textbox = document.getElementById('virtual-textbox');
+
+        if (!textbox) {
+            textbox = document.createElement('input');
+            textbox.id = 'virtual-textbox';
+            textbox.setAttribute('type', 'text');
+            textbox.style.opacity = '0';
+
+            textbox.addEventListener('keyup', function(e) {
+                this.text = e.target.value;
+                this.fillText(e.target.value);
+            }.bind(this))
+        }
+
+        textbox.value = '';
+        document.body.append(textbox);
+        textbox.focus();
+    },
     eachFontFamily: function(callback) {
         var childs = this.fontFamilyBox.querySelectorAll('li');
         for (var i = 0; i < childs.length; i++) {

widget.js

@@ -1,4 +1,4 @@
-// Last time updated: 2019-03-08 2:53:41 PM UTC
+// Last time updated: 2020-12-21 6:53:15 AM UTC
 
 // _______________
 // Canvas-Designer
@@ -1939,6 +1939,7 @@
             textHandler.blinkCursorInterval = setInterval(textHandler.blinkCursor, 700);
 
             this.showTextTools();
+            this.focusVirtualTextbox();
         },
         mouseup: function(e) {},
         mousemove: function(e) {},
@@ -1994,6 +1995,32 @@
                 // child.style.fontSize = child.innerHTML + 'px';
             });
         },
+
+        /**
+         * In order to support mobile devices,
+         * or support some special language
+         * It will create an hidden textbox
+         * User will type into this textbox
+         */
+        focusVirtualTextbox: function() {
+            var textbox = document.getElementById('virtual-textbox');
+
+            if (!textbox) {
+                textbox = document.createElement('input');
+                textbox.id = 'virtual-textbox';
+                textbox.setAttribute('type', 'text');
+                textbox.style.opacity = '0';
+
+                textbox.addEventListener('keyup', function(e) {
+                    this.text = e.target.value;
+                    this.fillText(e.target.value);
+                }.bind(this))
+            }
+
+            textbox.value = '';
+            document.body.append(textbox);
+            textbox.focus();
+        },
         eachFontFamily: function(callback) {
             var childs = this.fontFamilyBox.querySelectorAll('li');
             for (var i = 0; i < childs.length; i++) {
@@ -2498,12 +2525,17 @@
 
     var zoomHandler = {
         scale: 1.0,
+        lastZoomState: null,
         up: function(e) {
+            this.scale = this.lastZoomState !== 'up' ? 1 : this.scale;
             this.scale += .01;
+            this.lastZoomState = 'up';
             this.apply();
         },
         down: function(e) {
+            this.scale = this.lastZoomState !== 'down' ? 1 : this.scale;
             this.scale -= .01;
+            this.lastZoomState = 'down';
             this.apply();
         },
         apply: function() {
@@ -2518,7 +2550,7 @@
             },
             down: function(ctx) {
                 ctx.font = '22px Verdana';
-                ctx.strokeText('-', 15, 30);
+                ctx.strokeText('-', 10, 30);
             }
         }
     };
@@ -3728,7 +3760,7 @@
     }
 
     var canvas = tempContext.canvas,
-        isTouch = 'createTouch' in document;
+        isTouch = 'createTouch' in document || 'ontouchstart' in window;
 
     addEvent(canvas, isTouch ? 'touchstart mousedown' : 'mousedown', function(e) {
         if (isTouch) e = e.pageX ? e : e.touches.length ? e.touches[0] : {
@@ -3890,13 +3922,15 @@
         keyCode = e.which || e.keyCode || 0;
 
         if (keyCode === 13 && is.isText) {
-            textHandler.onReturnKeyPressed();
+            // no handle anumore
+            // textHandler.onReturnKeyPressed();
             return;
         }
 
         if (keyCode == 8 || keyCode == 46) {
             if (isBackKey(e, keyCode)) {
-                textHandler.writeText(textHandler.lastKeyPress, true);
+                // no handle anymore
+                // textHandler.writeText(textHandler.lastKeyPress, true);
             }
             return;
         }
@@ -3960,7 +3994,8 @@
 
         var inp = String.fromCharCode(keyCode);
         if (/[a-zA-Z0-9-_ !?|\/'",.=:;(){}\[\]`~@#$%^&*+-]/.test(inp)) {
-            textHandler.writeText(String.fromCharCode(keyCode));
+            // no handle anymore
+            // textHandler.writeText(String.fromCharCode(keyCode));
         }
     }
 
@@ -4061,21 +4096,23 @@
             }
 
             if (index === -1) {
-                if (points.length && points[points.length - 1][0] === 'pencil') {
+                if (points.length && (points[points.length - 1][0] === 'pencil' || points[points.length - 1][0] === 'marker')) {
                     var newArray = [];
                     var length = points.length;
-                    var reverse = points.reverse();
-                    var ended;
+
+                    /* modification start*/
+                    var index;
                     for (var i = 0; i < length; i++) {
-                        var point = reverse[i];
-                        if (point[3] == 'start') {
-                            ended = true;
-                        } else if (ended) {
-                            newArray.push(point);
-                        }
+                        var point = points[i];
+                        if (point[3] === 'start') index = i;
+                    }
+                    var copy = [];
+                    for (var i = 0; i < index; i++) {
+                        copy.push(points[i]);
                     }
+                    points = copy;
+                    /*modification ends*/
 
-                    points = newArray.reverse();
                     drawHelper.redraw();
                     syncPoints(true);
                     return;