Chrome-Extensions, RecordRTC, Canvas-Designer, DetectRTC, RTCMultiCon…

…nection updated.
muaz-khan · Feb 9, 2019 · 0df9fde · 0df9fde
1 parent 2329b0b
commit 0df9fde
Show file tree

Hide file tree

Showing 57 changed files with 2,824 additions and 567 deletions.
diff --git a/Canvas-Designer/README.md b/Canvas-Designer/README.md
@@ -130,17 +130,6 @@ designer.appendTo(document.body || document.documentElement);
 </script>
 ```
 
-You can even download TAR:
-
-```
-mkdir Canvas-Designer && cd Canvas-Designer
-wget http://dl.webrtc-experiment.com/canvas-designer.tar.gz
-tar -zxvf canvas-designer.tar.gz
-ls -a
-```
-
-* For windows, use 7Zip or WinRAR to extract this: [canvas-designer.tar.gz](http://dl.webrtc-experiment.com/canvas-designer.tar.gz)
-
 # Complete Usage
 
 ```javascript
@@ -469,6 +458,11 @@ designer.undo('all');
 designer.undo({
     numberOfLastShapes: 10
 })
+
+// to remove all occurrences of a specific shape
+designer.undo('pencil');
+designer.undo('arrow');
+designer.undo('rect');
 ```
 
 `designer.pointsLength` shows number of shapes; and `designer.undo` accepts shape-index as well.
@@ -681,6 +675,12 @@ For more info:
 
 Please make pull-request to update this list.
 
+# Disclaimer
+
+There is no warranty, expressed or implied, associated with this product. Use at your own risk.
+
+* https://www.webrtc-experiment.com/disclaimer/
+
 # License
 
-[Canvas Designer](https://github.com/muaz-khan/Canvas-Designer) is released under [MIT licence](https://www.webrtc-experiment.com/licence/) . Copyright (c) [Muaz Khan](http://www.MuazKhan.com).
+[Canvas Designer](https://github.com/muaz-khan/Canvas-Designer) is released under [MIT license](https://github.com/muaz-khan/RecordRTC/blob/master/LICENSE) . Copyright (c) [Muaz Khan](https://MuazKhan.com).
diff --git a/Canvas-Designer/bower.json b/Canvas-Designer/bower.json
@@ -1,7 +1,7 @@
 {
   "name": "canvas-designer",
   "preferGlobal": false,
-  "version": "1.3.0",
+  "version": "1.3.1",
   "author": {
     "name": "Muaz Khan",
     "email": "muazkh@gmail.com",

diff --git a/Canvas-Designer/canvas-designer-widget.js b/Canvas-Designer/canvas-designer-widget.js
@@ -183,6 +183,14 @@ function CanvasDesigner() {
     designer.undo = function(index) {
         if (!designer.iframe) return;
 
+        if(typeof index === 'string' && tools[index]) {
+            designer.postMessage({
+                undo: true,
+                tool: index
+            });
+            return;
+        }
+
         designer.postMessage({
             undo: true,
             index: index || designer.pointsLength - 1 || -1

diff --git a/Canvas-Designer/dev/common.js b/Canvas-Designer/dev/common.js
@@ -138,6 +138,10 @@ var common = {
                 tempArray[i] = ['context.beginPath();\n' + 'context.moveTo(' + point[0] + ', ' + point[1] + ');\n' + 'context.lineTo(' + point[2] + ', ' + point[3] + ');\n' + this.strokeOrFill(p[2])];
             }
 
+            if (p[0] === 'pencil') {
+                tempArray[i] = ['context.beginPath();\n' + 'context.moveTo(' + point[0] + ', ' + point[1] + ');\n' + 'context.lineTo(' + point[2] + ', ' + point[3] + ');\n' + this.strokeOrFill(p[2])];
+            }
+
             if (p[0] === 'text') {
                 tempArray[i] = [this.strokeOrFill(p[2]) + '\ncontext.fillText(' + point[0] + ', ' + point[1] + ', ' + point[2] + ');'];
             }
@@ -224,6 +228,15 @@ var common = {
                 ], p[2]);
             }
 
+            if (p[0] === 'pencil') {
+                output += this.shortenHelper(p[0], [
+                    getPoint(point[0], x, 'x'),
+                    getPoint(point[1], y, 'y'),
+                    getPoint(point[2], x, 'x'),
+                    getPoint(point[3], y, 'y')
+                ], p[2]);
+            }
+
             if (p[0] === 'arrow') {
                 output += this.shortenHelper(p[0], [
                     getPoint(point[0], x, 'x'),
@@ -341,10 +354,11 @@ var common = {
             }
 
             if (p[0] === 'line') {
-                output += 'context.beginPath();\n' + 'context.moveTo(' + getPoint(point[0], x, 'x') + ', ' + getPoint(point[1], y, 'y') + ');\n' + 'context.lineTo(' + getPoint(point[2], x, 'x') + ', ' + getPoint(point[3], y, 'y') + ');\n'
+                output += 'context.beginPath();\n' + 'context.moveTo(' + getPoint(point[0], x, 'x') + ', ' + getPoint(point[1], y, 'y') + ');\n' + 'context.lineTo(' + getPoint(point[2], x, 'x') + ', ' + getPoint(point[3], y, 'y') + ');\n' + this.strokeOrFill(p[2]);
+            }
 
-                    +
-                    this.strokeOrFill(p[2]);
+            if (p[0] === 'pencil') {
+                output += 'context.beginPath();\n' + 'context.moveTo(' + getPoint(point[0], x, 'x') + ', ' + getPoint(point[1], y, 'y') + ');\n' + 'context.lineTo(' + getPoint(point[2], x, 'x') + ', ' + getPoint(point[3], y, 'y') + ');\n' + this.strokeOrFill(p[2]);
             }
 
             if (p[0] === 'arrow') {

diff --git a/Canvas-Designer/dev/drag-helper.js b/Canvas-Designer/dev/drag-helper.js
@@ -39,6 +39,17 @@ var dragHelper = {
                 }
             }
 
+            if (p[0] === 'pencil') {
+
+                if (dHelper.isPointInPath(x, y, point[0], point[1])) {
+                    g.pointsToMove = 'head';
+                }
+
+                if (dHelper.isPointInPath(x, y, point[2], point[3])) {
+                    g.pointsToMove = 'tail';
+                }
+            }
+
             if (p[0] === 'arrow') {
 
                 if (dHelper.isPointInPath(x, y, point[0], point[1])) {
@@ -211,6 +222,16 @@ var dragHelper = {
             tempContext.fill();
         }
 
+        if (p[0] === 'pencil') {
+
+            tempContext.beginPath();
+
+            tempContext.arc(point[0], point[1], 10, Math.PI * 2, 0, !1);
+            tempContext.arc(point[2], point[3], 10, Math.PI * 2, 0, !1);
+
+            tempContext.fill();
+        }
+
         if (p[0] === 'arrow') {
 
             tempContext.beginPath();
@@ -396,6 +417,17 @@ var dragHelper = {
                 ];
             }
 
+            if (p[0] === 'pencil') {
+                points[i] = [p[0],
+                    [
+                        getPoint(x, prevX, point[0]),
+                        getPoint(y, prevY, point[1]),
+                        getPoint(x, prevX, point[2]),
+                        getPoint(y, prevY, point[3])
+                    ], p[2]
+                ];
+            }
+
             if (p[0] === 'arrow') {
                 points[i] = [p[0],
                     [
@@ -523,6 +555,21 @@ var dragHelper = {
             points[points.length - 1] = [p[0], point, p[2]];
         }
 
+        if (p[0] === 'pencil') {
+
+            if (g.pointsToMove === 'head' || isMoveAllPoints) {
+                point[0] = getPoint(x, prevX, point[0]);
+                point[1] = getPoint(y, prevY, point[1]);
+            }
+
+            if (g.pointsToMove === 'tail' || isMoveAllPoints) {
+                point[2] = getPoint(x, prevX, point[2]);
+                point[3] = getPoint(y, prevY, point[3]);
+            }
+
+            points[points.length - 1] = [p[0], point, p[2]];
+        }
+
         if (p[0] === 'arrow') {
 
             if (g.pointsToMove === 'head' || isMoveAllPoints) {

diff --git a/Canvas-Designer/dev/draw-helper.js b/Canvas-Designer/dev/draw-helper.js
@@ -53,6 +53,13 @@ var drawHelper = {
 
         this.handleOptions(context, options);
     },
+    pencil: function(context, point, options) {
+        context.beginPath();
+        context.moveTo(point[0], point[1]);
+        context.lineTo(point[2], point[3]);
+
+        this.handleOptions(context, options);
+    },
     marker: function(context, point, options) {
         context.beginPath();
         context.moveTo(point[0], point[1]);

diff --git a/Canvas-Designer/dev/pencil-handler.js b/Canvas-Designer/dev/pencil-handler.js
@@ -16,14 +16,29 @@ var pencilHandler = {
         // make sure that pencil is drawing shapes even 
         // if mouse is down but mouse isn't moving
         tempContext.lineCap = 'round';
-        pencilDrawHelper.line(tempContext, [t.prevX, t.prevY, x, y]);
+        pencilDrawHelper.pencil(tempContext, [t.prevX, t.prevY, x, y]);
 
-        points[points.length] = ['line', [t.prevX, t.prevY, x, y], pencilDrawHelper.getOptions()];
+        points[points.length] = ['pencil', [t.prevX, t.prevY, x, y], pencilDrawHelper.getOptions(), 'start'];
 
         t.prevX = x;
         t.prevY = y;
     },
     mouseup: function(e) {
+        var x = e.pageX - canvas.offsetLeft,
+            y = e.pageY - canvas.offsetTop;
+
+        var t = this;
+
+        if (t.ismousedown) {
+            tempContext.lineCap = 'round';
+            pencilDrawHelper.pencil(tempContext, [t.prevX, t.prevY, x, y]);
+
+            points[points.length] = ['pencil', [t.prevX, t.prevY, x, y], pencilDrawHelper.getOptions(), 'end'];
+
+            t.prevX = x;
+            t.prevY = y;
+        }
+
         this.ismousedown = false;
     },
     mousemove: function(e) {
@@ -34,9 +49,9 @@ var pencilHandler = {
 
         if (t.ismousedown) {
             tempContext.lineCap = 'round';
-            pencilDrawHelper.line(tempContext, [t.prevX, t.prevY, x, y]);
+            pencilDrawHelper.pencil(tempContext, [t.prevX, t.prevY, x, y]);
 
-            points[points.length] = ['line', [t.prevX, t.prevY, x, y], pencilDrawHelper.getOptions()];
+            points[points.length] = ['pencil', [t.prevX, t.prevY, x, y], pencilDrawHelper.getOptions()];
 
             t.prevX = x;
             t.prevY = y;

diff --git a/Canvas-Designer/dev/share-drawings.js b/Canvas-Designer/dev/share-drawings.js
@@ -42,6 +42,22 @@ window.addEventListener('message', function(event) {
     if (event.data.undo && points.length) {
         var index = event.data.index;
 
+        if (event.data.tool) {
+            var newArray = [];
+            var length = points.length;
+            var reverse = points.reverse();
+            for (var i = 0; i < length; i++) {
+                var point = reverse[i];
+                if (point[0] !== event.data.tool) {
+                    newArray.push(point);
+                }
+            }
+            points = newArray.reverse();
+            drawHelper.redraw();
+            syncPoints(true);
+            return;
+        }
+
         if (index === 'all') {
             points = [];
             drawHelper.redraw();
@@ -62,6 +78,26 @@ window.addEventListener('message', function(event) {
         }
 
         if (index === -1) {
+            if (points.length && points[points.length - 1][0] === 'pencil') {
+                var newArray = [];
+                var length = points.length;
+                var reverse = points.reverse();
+                var ended;
+                for (var i = 0; i < length; i++) {
+                    var point = reverse[i];
+                    if (point[3] == 'start') {
+                        ended = true;
+                    } else if (ended) {
+                        newArray.push(point);
+                    }
+                }
+
+                points = newArray.reverse();
+                drawHelper.redraw();
+                syncPoints(true);
+                return;
+            }
+
             points.length = points.length - 1;
             drawHelper.redraw();
             syncPoints(true);

diff --git a/Canvas-Designer/package.json b/Canvas-Designer/package.json
@@ -1,7 +1,7 @@
 {
   "name": "canvas-designer",
   "preferGlobal": false,
-  "version": "1.3.0",
+  "version": "1.3.1",
   "author": {
     "name": "Muaz Khan",
     "email": "muazkh@gmail.com",