Fixed #471 Updated: RecordRTC, RTCMultiConnection, DetectRTC, DataCha…

…nnel, Canvas-Designer, Chrome-Extensions, Firefox-Extensions, getScreenId, FileBufferReader and Ffmpeg.js

Canvas-Designer/Gruntfile.js

@@ -22,9 +22,8 @@ module.exports = function(grunt) {
             dist: {
                 src: [
                     'dev/head.js',
-
                     'dev/common.js',
-                    'dev/decorator.js',
+
                     'dev/draw-helper.js',
                     'dev/drag-helper.js',
                     'dev/pencil-handler.js',
@@ -37,10 +36,13 @@ module.exports = function(grunt) {
                     'dev/rect-handler.js',
                     'dev/quadratic-handler.js',
                     'dev/bezier-handler.js',
+                    'dev/zoom-handler.js',
                     'dev/file-selector.js',
                     'dev/image-handler.js',
+
+                    'dev/decorator.js',
                     'dev/events-handler.js',
-                    
+
                     'dev/share-drawings.js',
                     'dev/canvas-designer-widget.js',
 

Canvas-Designer/README.md

@@ -265,7 +265,8 @@ designer.setTools({
     bezier: true,
     quadratic: true,
     text: true,
-    image: true
+    image: true,
+    zoom: true
 });
 ```
 
@@ -308,7 +309,7 @@ designer.iframe.style.border = '5px solid red';
 
 ## `toDataURL`
 
-Get data-URL of your drawings! 
+Get data-URL of your drawings!
 
 ```javascript
 designer.toDataURL('image/png', function(dataURL) {
@@ -442,7 +443,7 @@ You merely need to set `isYourNewToolIconSelected:true` also `cache.isYourNewToo
 
 ## Fourth Step
 
-Create new file in the [`dev`](https://github.com/muaz-khan/Canvas-Designer/tree/master/dev) directory. Name this file as `yourNewToolIcon-handler.js`. 
+Create new file in the [`dev`](https://github.com/muaz-khan/Canvas-Designer/tree/master/dev) directory. Name this file as `yourNewToolIcon-handler.js`.
 
 This file MUST look like this:
 
@@ -453,11 +454,11 @@ var yourNewToolIconHandler = {
     mousedown: function(e) {
         this.ismousedown = true;
     },
-    
-    mouseup: function(e) { 
+
+    mouseup: function(e) {
         this.ismousedown = false;
     },
-    
+
     mousemove: function(e) {
         if(this.ismousedown) { ... }
     }

Canvas-Designer/bower.json

@@ -1,7 +1,7 @@
 {
   "name": "canvas-designer",
   "preferGlobal": false,
-  "version": "1.0.9",
+  "version": "1.2.1",
   "author": {
     "name": "Muaz Khan",
     "email": "muazkh@gmail.com",

Canvas-Designer/dev/common.js

@@ -22,11 +22,22 @@ var is = {
 };
 
 function addEvent(element, eventType, callback) {
+    if (eventType.split(' ').length > 1) {
+        var events = eventType.split(' ');
+        for (var i = 0; i < events; i++) {
+            addEvent(element, events[i], callback);
+        }
+        return;
+    }
+
     if (element.addEventListener) {
         element.addEventListener(eventType, callback, !1);
         return true;
-    } else if (element.attachEvent) return element.attachEvent('on' + eventType, callback);
-    else element['on' + eventType] = callback;
+    } else if (element.attachEvent) {
+        return element.attachEvent('on' + eventType, callback);
+    } else {
+        element['on' + eventType] = callback;
+    }
     return this;
 }
 
@@ -582,3 +593,48 @@ function paste() {
         setSelection(find('drag-all-paths'), 'DragAllPaths');
     }
 }
+
+// marker + pencil
+function hexToR(h) {
+    return parseInt((cutHex(h)).substring(0, 2), 16)
+}
+
+function hexToG(h) {
+    return parseInt((cutHex(h)).substring(2, 4), 16)
+}
+
+function hexToB(h) {
+    return parseInt((cutHex(h)).substring(4, 6), 16)
+}
+
+function cutHex(h) {
+    return (h.charAt(0) == "#") ? h.substring(1, 7) : h
+}
+
+function clone(obj) {
+    if (obj === null || typeof(obj) !== 'object' || 'isActiveClone' in obj)
+        return obj;
+
+    if (obj instanceof Date)
+        var temp = new obj.constructor(); //or new Date(obj);
+    else
+        var temp = obj.constructor();
+
+    for (var key in obj) {
+        if (Object.prototype.hasOwnProperty.call(obj, key)) {
+            obj['isActiveClone'] = null;
+            temp[key] = clone(obj[key]);
+            delete obj['isActiveClone'];
+        }
+    }
+
+    return temp;
+}
+
+function hexToRGB(h) {
+    return [
+        hexToR(h),
+        hexToG(h),
+        hexToB(h)
+    ]
+}

Canvas-Designer/dev/decorator.js

@@ -11,7 +11,8 @@ var tools = {
     bezier: true,
     quadratic: true,
     text: true,
-    image: true
+    image: true,
+    zoom: true
 };
 
 if (params.tools) {
@@ -286,7 +287,44 @@ window.addEventListener('load', function() {
         decorateArrow();
     } else document.getElementById('arrow').style.display = 'none';
 
+    function decoreZoomUp() {
+        var context = getContext('zoom-up');
+        zoomHandler.icons.up(context);
+        addEvent(context.canvas, 'click', function() {
+            zoomHandler.up();
+        });
+    }
+
+    function decoreZoomDown() {
+        var context = getContext('zoom-down');
+        zoomHandler.icons.down(context);
+        addEvent(context.canvas, 'click', function() {
+            zoomHandler.down();
+        });
+    }
+
+    if (tools.zoom === true) {
+        decoreZoomUp();
+        decoreZoomDown();
+    } else {
+        document.getElementById('zoom-up').style.display = 'none';
+        document.getElementById('zoom-down').style.display = 'none';
+    }
+
     function decoratePencil() {
+
+        function hexToRGBA(h, alpha) {
+            return 'rgba(' + hexToRGB(h).join(',') + ',1)';
+        }
+
+        var colors = [
+            ['FFFFFF', '006600', '000099', 'CC0000', '8C4600'],
+            ['CCCCCC', '00CC00', '6633CC', 'FF0000', 'B28500'],
+            ['666666', '66FFB2', '006DD9', 'FF7373', 'FF9933'],
+            ['333333', '26FF26', '6699FF', 'CC33FF', 'FFCC99'],
+            ['000000', 'CCFF99', 'BFDFFF', 'FFBFBF', 'FFFF33']
+        ];
+
         var context = getContext('pencil-icon');
 
         context.lineWidth = 5;
@@ -300,6 +338,81 @@ window.addEventListener('load', function() {
         context.fillText('Pencil', 6, 12);
 
         bindEvent(context, 'Pencil');
+
+        var pencilContainer = find('pencil-container'),
+            pencilColorContainer = find('pencil-fill-colors'),
+            strokeStyleText = find('pencil-stroke-style'),
+            pencilColorsList = find("pencil-colors-list"),
+            fillStyleText = find('pencil-fill-style'),
+            pencilSelectedColor = find('pencil-selected-color'),
+            pencilSelectedColor2 = find('pencil-selected-color-2'),
+            btnPencilDone = find('pencil-done'),
+            canvas = context.canvas,
+            alpha = 0.2;
+
+        // START INIT PENCIL
+
+
+
+        pencilStrokeStyle = hexToRGBA(fillStyleText.value, alpha)
+
+        pencilSelectedColor.style.backgroundColor =
+            pencilSelectedColor2.style.backgroundColor = '#' + fillStyleText.value;
+
+        colors.forEach(function(colorRow) {
+            var row = '<tr>';
+
+            colorRow.forEach(function(color) {
+                row += '<td style="background-color:#' + color + '" data-color="' + color + '"></td>';
+            })
+            row += '</tr>';
+
+            pencilColorsList.innerHTML += row;
+        })
+
+        // console.log(pencilColorsList.getElementsByTagName('td'))
+        Array.prototype.slice.call(pencilColorsList.getElementsByTagName('td')).forEach(function(td) {
+            addEvent(td, 'mouseover', function() {
+                var elColor = td.getAttribute('data-color');
+                pencilSelectedColor2.style.backgroundColor = '#' + elColor;
+                fillStyleText.value = elColor
+            });
+
+            addEvent(td, 'click', function() {
+                var elColor = td.getAttribute('data-color');
+                pencilSelectedColor.style.backgroundColor =
+                    pencilSelectedColor2.style.backgroundColor = '#' + elColor;
+
+                fillStyleText.value = elColor;
+
+
+                pencilColorContainer.style.display = 'none';
+            });
+        })
+
+        // END INIT PENCIL
+
+        addEvent(canvas, 'click', function() {
+            hideContainers();
+
+            pencilContainer.style.display = 'block';
+            pencilContainer.style.top = (canvas.offsetTop + 1) + 'px';
+            pencilContainer.style.left = (canvas.offsetLeft + canvas.clientWidth) + 'px';
+
+            fillStyleText.focus();
+        });
+
+        addEvent(btnPencilDone, 'click', function() {
+            pencilContainer.style.display = 'none';
+            pencilColorContainer.style.display = 'none';
+
+            pencilLineWidth = strokeStyleText.value;
+            pencilStrokeStyle = hexToRGBA(fillStyleText.value, alpha);
+        });
+
+        addEvent(pencilSelectedColor, 'click', function() {
+            pencilColorContainer.style.display = 'block';
+        });
     }
 
     if (tools.pencil === true) {
@@ -731,11 +844,15 @@ function hideContainers() {
         colorsContainer = find('colors-container'),
         markerContainer = find('marker-container'),
         markerColorContainer = find('marker-fill-colors'),
+        pencilContainer = find('pencil-container'),
+        pencilColorContainer = find('pencil-fill-colors'),
         lineWidthContainer = find('line-width-container');
 
     additionalContainer.style.display =
         colorsContainer.style.display =
         markerColorContainer.style.display =
         markerContainer.style.display =
+        pencilColorContainer.style.display =
+        pencilContainer.style.display =
         lineWidthContainer.style.display = 'none';
 }

Canvas-Designer/dev/draw-helper.js

@@ -1,16 +1,15 @@
 var drawHelper = {
-    redraw: function(skipSync) {
+    redraw: function() {
         tempContext.clearRect(0, 0, innerWidth, innerHeight);
         context.clearRect(0, 0, innerWidth, innerHeight);
 
         var i, point, length = points.length;
         for (i = 0; i < length; i++) {
             point = points[i];
-            this[point[0]](context, point[1], point[2]);
-        }
-
-        if (!skipSync && typeof syncPoints !== 'undefined') {
-            syncPoints(is.isDragAllPaths || is.isDragLastPath ? true : false);
+            if (point && point.length && this[point[0]]) {
+                this[point[0]](context, point[1], point[2]);
+            }
+            // else warn
         }
     },
     getOptions: function(opt) {

Canvas-Designer/dev/events-handler.js

@@ -23,9 +23,12 @@ addEvent(canvas, isTouch ? 'touchstart' : 'mousedown', function(e) {
     else if (cache.isMarker) markerHandler.mousedown(e);
 
     drawHelper.redraw();
+
+    e.preventDefault();
+    e.stopPropagation();
 });
 
-addEvent(canvas, isTouch ? 'touchend' : 'mouseup', function(e) {
+addEvent(canvas, isTouch ? 'touchend touchcancel' : 'mouseup', function(e) {
     if (isTouch) e = e.pageX ? e : e.touches.length ? e.touches[0] : {
         pageX: 0,
         pageY: 0
@@ -47,6 +50,11 @@ addEvent(canvas, isTouch ? 'touchend' : 'mouseup', function(e) {
     else if (cache.isMarker) markerHandler.mouseup(e);
 
     drawHelper.redraw();
+
+    syncPoints(is.isDragAllPaths || is.isDragLastPath ? true : false);
+
+    e.preventDefault();
+    e.stopPropagation();
 });
 
 addEvent(canvas, isTouch ? 'touchmove' : 'mousemove', function(e) {
@@ -69,6 +77,9 @@ addEvent(canvas, isTouch ? 'touchmove' : 'mousemove', function(e) {
     else if (cache.isImage) imageHandler.mousemove(e);
     else if (cache.isArrow) arrowHandler.mousemove(e);
     else if (cache.isMarker) markerHandler.mousemove(e);
+
+    e.preventDefault();
+    e.stopPropagation();
 });
 
 var keyCode;
@@ -151,7 +162,7 @@ function onkeyup(e) {
             points.length = points.length - 1;
             drawHelper.redraw();
 
-            syncPoints(true);
+            syncPoints(is.isDragAllPaths || is.isDragLastPath ? true : false);
         }
     }
 
@@ -172,6 +183,8 @@ function onkeyup(e) {
     // Ctrl + v
     if (isControlKeyPressed && keyCode === 86 && copiedStuff.length) {
         paste();
+
+        syncPoints(is.isDragAllPaths || is.isDragLastPath ? true : false);
     }
 
     // Ending the Control Key

Canvas-Designer/dev/file-selector.js

@@ -14,6 +14,8 @@ var FileSelector = function() {
             file.multiple = true;
         }
 
+        file.accept = 'image/*';
+
         file.onchange = function() {
             if (multiple) {
                 if (!file.files.length) {