Socket
Socket
Sign inDemoInstall

canvas-designer

Package Overview
Dependencies
0
Maintainers
1
Versions
21
Alerts
File Explorer

Advanced tools

npm Scripts

Install Socket

Detect and block malicious and high-risk dependencies

Install

Comparing version 1.2.1 to 1.2.2

dev/data-uris.js
dev/pdf-handler.js
dev/webrtc-handler.js
LICENSE

2

bower.json
{
"name": "canvas-designer",
"preferGlobal": false,
"version": "1.2.1",
"version": "1.2.2",
"author": {

@@ -6,0 +6,0 @@ "name": "Muaz Khan",

56

canvas-designer-widget.js

@@ -28,5 +28,33 @@ // _______________

image: true,
marker: true
pdf: true,
marker: true,
zoom: true,
lineWidth: true,
colorsPicker: true,
extraOptions: true,
code: true
};
designer.icons = {
line: null,
arrow: null,
pencil: null,
dragSingle: null,
dragMultiple: null,
eraser: null,
rectangle: null,
arc: null,
bezier: null,
quadratic: null,
text: null,
image: null,
pdf: null,
marker: null,
zoom: null,
lineWidth: null,
colorsPicker: null,
extraOptions: null,
code: null
};
var selectedIcon = 'pencil';

@@ -44,2 +72,3 @@

var dataURLListener = function(dataURL) {};
var captureStreamCallback = function() {};

@@ -49,5 +78,18 @@ function onMessage(event) {

if(!!event.data.sdp) {
webrtcHandler.createAnswer(event.data, function(response) {
if(response.sdp) {
designer.postMessage(response);
return;
}
captureStreamCallback(response.stream);
});
return;
}
if (!!event.data.canvasDesignerSyncData) {
designer.pointsLength = event.data.canvasDesignerSyncData.points.length;
syncDataListener(event.data.canvasDesignerSyncData);
return;
}

@@ -57,2 +99,3 @@

dataURLListener(event.data.dataURL);
return;
}

@@ -78,3 +121,3 @@ }

designer.iframe = document.createElement('iframe');
designer.iframe.src = designer.widgetHtmlURL + '?widgetJsURL=' + designer.widgetJsURL + '&tools=' + JSON.stringify(tools) + '&selectedIcon=' + selectedIcon;
designer.iframe.src = designer.widgetHtmlURL + '?widgetJsURL=' + designer.widgetJsURL + '&tools=' + JSON.stringify(tools) + '&selectedIcon=' + selectedIcon + '&icons=' + JSON.stringify(designer.icons);
designer.iframe.style.width = '100%';

@@ -149,4 +192,13 @@ designer.iframe.style.height = '100%';

designer.captureStream = function(callback) {
if (!designer.iframe) return;
captureStreamCallback = callback;
designer.postMessage({
captureStream: true
});
};
designer.widgetHtmlURL = 'widget.html';
designer.widgetJsURL = 'widget.min.js';
}

0

dev/amd.js

@@ -0,0 +0,0 @@ var browserFakeUserAgent = 'Fake/5.0 (FakeOS) AppleWebKit/123 (KHTML, like Gecko) Fake/12.3.4567.89 Fake/123.45';

0

dev/arc-handler.js

@@ -0,0 +0,0 @@ var arcHandler = {

0

dev/arrow-handler.js

@@ -0,0 +0,0 @@ var arrowHandler = {

0

dev/bezier-handler.js

@@ -0,0 +0,0 @@ var bezierHandler = {

61

dev/common.js

@@ -15,2 +15,3 @@ var is = {

isImage: false,
isPdf: false,

@@ -20,3 +21,3 @@ set: function(shape) {

cache.isLine = cache.isArrow = cache.isArc = cache.isDragLastPath = cache.isDragAllPaths = cache.isRectangle = cache.isQuadraticCurve = cache.isBezierCurve = cache.isPencil = cache.isMarker = cache.isEraser = cache.isText = cache.isImage = false;
cache.isLine = cache.isArrow = cache.isArc = cache.isDragLastPath = cache.isDragAllPaths = cache.isRectangle = cache.isQuadraticCurve = cache.isBezierCurve = cache.isPencil = cache.isMarker = cache.isEraser = cache.isText = cache.isImage = cache.isPdf = false;
cache['is' + shape] = true;

@@ -29,3 +30,3 @@ }

var events = eventType.split(' ');
for (var i = 0; i < events; i++) {
for (var i = 0; i < events.length; i++) {
addEvent(element, events[i], callback);

@@ -55,3 +56,3 @@ }

strokeStyle = '#6c96c8',
fillStyle = 'transparent',
fillStyle = 'rgba(0,0,0,0)',
globalAlpha = 1,

@@ -321,4 +322,4 @@ globalCompositeOperation = 'source-over',

+
this.strokeOrFill(p[2]);
+
this.strokeOrFill(p[2]);
}

@@ -329,4 +330,4 @@

+
this.strokeOrFill(p[2]);
+
this.strokeOrFill(p[2]);
}

@@ -337,4 +338,4 @@

+
this.strokeOrFill(p[2]);
+
this.strokeOrFill(p[2]);
}

@@ -345,4 +346,4 @@

+
this.strokeOrFill(p[2]);
+
this.strokeOrFill(p[2]);
}

@@ -353,4 +354,4 @@

+
this.strokeOrFill(p[2]);
+
this.strokeOrFill(p[2]);
}

@@ -373,4 +374,4 @@

+
this.strokeOrFill(p[2]);
+
this.strokeOrFill(p[2]);
}

@@ -381,4 +382,4 @@

+
this.strokeOrFill(p[2]);
+
this.strokeOrFill(p[2]);
}

@@ -394,3 +395,3 @@

// globals
// globals
+

@@ -402,3 +403,3 @@ ' if(p[2]) { \n' + '\tcontext.lineWidth = p[2][0];\n' + '\tcontext.strokeStyle = p[2][1];\n' + '\tcontext.fillStyle = p[2][2];\n'

// line
// line

@@ -408,3 +409,3 @@ +

// arrow
// arrow

@@ -414,3 +415,3 @@ +

// pencil
// pencil

@@ -420,3 +421,3 @@ +

// marker
// marker

@@ -427,3 +428,3 @@ +

// text
// text

@@ -433,3 +434,3 @@ +

// eraser
// eraser

@@ -439,3 +440,3 @@ +

// arc
// arc

@@ -445,3 +446,3 @@ +

// rect
// rect

@@ -454,3 +455,3 @@ +

// quadratic
// quadratic

@@ -460,3 +461,3 @@ +

// bezier
// bezier

@@ -466,3 +467,3 @@ +

// end-fill
// end-fill

@@ -514,3 +515,3 @@ +

opt.strokeStyle || '#6c96c8',
opt.fillStyle || 'transparent',
opt.fillStyle || 'rgba(0,0,0,0)',
opt.globalAlpha || 1,

@@ -517,0 +518,0 @@ opt.globalCompositeOperation || 'source-over',

432

dev/decorator.js

@@ -15,3 +15,9 @@ var tools = {

image: true,
zoom: true
pdf: true,
zoom: true,
lineWidth: true,
colorsPicker: true,
extraOptions: true,
code: true,
undo: true
};

@@ -26,2 +32,6 @@

if (tools.code === true) {
document.querySelector('.preview-panel').style.display = 'block';
}
function setSelection(element, prop) {

@@ -85,2 +95,4 @@ endLastPath();

addEvent(context.canvas, 'click', function() {
pdfHandler.pdfPageContainer.style.display = 'none';
if (textHandler.text.length) {

@@ -114,2 +126,3 @@ textHandler.appendPoints();

var selector = new FileSelector();
selector.accept = 'image/*';
selector.selectSingleFile(function(file) {

@@ -128,3 +141,6 @@ if (!file) return;

imageHandler.images.push(image);
imageHandler.load(image.clientWidth, image.clientHeight);
};
image.style = 'position: absolute; top: -99999999999; left: -999999999;'
document.body.appendChild(image);
image.src = event.target.result;

@@ -136,2 +152,19 @@ };

if (this.id === 'pdf-icon') {
var selector = new FileSelector();
selector.selectSingleFile(function(file) {
if (!file) return;
function onGettingPdf() {
var reader = new FileReader();
reader.onload = function(event) {
pdfHandler.pdf = null; // to make sure we call "getDocument" again
pdfHandler.load(event.target.result);
};
reader.readAsDataURL(file);
}
onGettingPdf();
}, null, 'application/pdf');
}
if (this.id === 'pencil-icon' || this.id === 'eraser-icon' || this.id === 'marker-icon') {

@@ -164,3 +197,3 @@ cache.lineCap = lineCap;

var toolBox = find('tool-box');
toolBox.style.height = (innerHeight /* - toolBox.offsetTop - 77 */ ) + 'px';
toolBox.style.height = (innerHeight) + 'px'; // -toolBox.offsetTop - 77

@@ -170,33 +203,8 @@ function decorateDragLastPath() {

var x = 10,
y = 6,
line = "line",
points = [
[line, x, y, x + 5, y + 27],
[line, x, y, x + 18, y + 19],
[line, x + 17, y + 19, x + 9, y + 20],
[line, x + 9, y + 20, x + 5, y + 27],
[line, x + 16, y + 22, x + 16, y + 31],
[line, x + 12, y + 27, x + 20, y + 27]
],
length = points.length,
point, i;
for (i = 0; i < length; i++) {
point = points[i];
if (point[0] === "line") {
context.beginPath();
context.moveTo(point[1], point[2]);
context.lineTo(point[3], point[4]);
context.closePath();
context.stroke();
}
}
context.fillStyle = 'Gray';
context.font = '9px Verdana';
context.fillText('Last', 18, 12);
bindEvent(context, 'DragLastPath');
var image = new Image();
image.onload = function() {
context.drawImage(image, 4, 4, 32, 32);
bindEvent(context, 'DragLastPath');
};
image.src = data_uris.dragSingle;
}

@@ -206,3 +214,4 @@

decorateDragLastPath();
} else document.getElementById('drag-last-path').style.display = 'none';
document.getElementById('drag-last-path').style.display = 'block';
}

@@ -212,33 +221,8 @@ function decorateDragAllPaths() {

var x = 10,
y = 6,
line = "line",
points = [
[line, x, y, x + 5, y + 27],
[line, x, y, x + 18, y + 19],
[line, x + 17, y + 19, x + 9, y + 20],
[line, x + 9, y + 20, x + 5, y + 27],
[line, x + 16, y + 22, x + 16, y + 31],
[line, x + 12, y + 27, x + 20, y + 27]
],
length = points.length,
point, i;
for (i = 0; i < length; i++) {
point = points[i];
if (point[0] === "line") {
context.beginPath();
context.moveTo(point[1], point[2]);
context.lineTo(point[3], point[4]);
context.closePath();
context.stroke();
}
}
context.fillStyle = 'Gray';
context.font = '10px Verdana';
context.fillText('All', 20, 12);
bindEvent(context, 'DragAllPaths');
var image = new Image();
image.onload = function() {
context.drawImage(image, 4, 4, 32, 32);
bindEvent(context, 'DragAllPaths');
};
image.src = data_uris.dragMultiple;
}

@@ -248,3 +232,4 @@

decorateDragAllPaths();
} else document.getElementById('drag-all-paths').style.display = 'none';
document.getElementById('drag-all-paths').style.display = 'block';
}

@@ -254,11 +239,8 @@ function decorateLine() {

context.moveTo(10, 15);
context.lineTo(30, 35);
context.stroke();
context.fillStyle = 'Gray';
context.font = '9px Verdana';
context.fillText('Line', 16, 12);
bindEvent(context, 'Line');
var image = new Image();
image.onload = function() {
context.drawImage(image, 4, 4, 32, 32);
bindEvent(context, 'Line');
};
image.src = data_uris.line;
}

@@ -268,30 +250,39 @@

decorateLine();
} else document.getElementById('line').style.display = 'none';
document.getElementById('line').style.display = 'block';
}
function decorateArrow() {
var context = getContext('arrow');
function decorateUndo() {
var context = getContext('undo');
var x = 10;
var y = 35;
var image = new Image();
image.onload = function() {
context.drawImage(image, 4, 4, 32, 32);
context.beginPath();
context.moveTo(x, y);
context.lineTo(x + 20, y - 20);
context.stroke();
document.querySelector('#undo').onclick = function() {
if (points.length) {
points.length = points.length - 1;
drawHelper.redraw();
}
context.beginPath();
context.moveTo(x + 15, y - 5);
context.lineTo(x + 20, y - 20);
context.stroke();
// share to webrtc
syncPoints(true);
};
};
image.src = data_uris.undo;
}
context.beginPath();
context.moveTo(x + 5, y - 15);
context.lineTo(x + 20, y - 20);
context.stroke();
if (tools.undo === true) {
decorateUndo();
document.getElementById('undo').style.display = 'block';
}
context.fillStyle = 'Gray';
context.font = '9px Verdana';
context.fillText('Arrow', 5, 12);
function decorateArrow() {
var context = getContext('arrow');
bindEvent(context, 'Arrow');
var image = new Image();
image.onload = function() {
context.drawImage(image, 4, 4, 32, 32);
bindEvent(context, 'Arrow');
};
image.src = data_uris.arrow;
}

@@ -301,10 +292,17 @@

decorateArrow();
} else document.getElementById('arrow').style.display = 'none';
document.getElementById('arrow').style.display = 'block';
}
function decoreZoomUp() {
var context = getContext('zoom-up');
zoomHandler.icons.up(context);
// zoomHandler.icons.up(context);
addEvent(context.canvas, 'click', function() {
zoomHandler.up();
});
var image = new Image();
image.onload = function() {
context.drawImage(image, 4, 4, 32, 32);
};
image.src = data_uris.zoom_in;
}

@@ -314,6 +312,12 @@

var context = getContext('zoom-down');
zoomHandler.icons.down(context);
// zoomHandler.icons.down(context);
addEvent(context.canvas, 'click', function() {
zoomHandler.down();
});
var image = new Image();
image.onload = function() {
context.drawImage(image, 4, 4, 32, 32);
};
image.src = data_uris.zoom_out;
}

@@ -324,5 +328,5 @@

decoreZoomDown();
} else {
document.getElementById('zoom-up').style.display = 'none';
document.getElementById('zoom-down').style.display = 'none';
document.getElementById('zoom-up').style.display = 'block';
document.getElementById('zoom-down').style.display = 'block';
}

@@ -346,14 +350,9 @@

context.lineWidth = 5;
context.lineCap = 'round';
context.moveTo(35, 20);
context.lineTo(5, 35);
context.stroke();
var image = new Image();
image.onload = function() {
context.drawImage(image, 4, 4, 32, 32);
bindEvent(context, 'Pencil');
};
image.src = data_uris.pencil;
context.fillStyle = 'Gray';
context.font = '9px Verdana';
context.fillText('Pencil', 6, 12);
bindEvent(context, 'Pencil');
var pencilContainer = find('pencil-container'),

@@ -390,3 +389,2 @@ pencilColorContainer = find('pencil-fill-colors'),

// console.log(pencilColorsList.getElementsByTagName('td'))
Array.prototype.slice.call(pencilColorsList.getElementsByTagName('td')).forEach(function(td) {

@@ -438,3 +436,4 @@ addEvent(td, 'mouseover', function() {

decoratePencil();
} else document.getElementById('pencil-icon').style.display = 'none';
document.getElementById('pencil-icon').style.display = 'block';
}

@@ -456,15 +455,9 @@ function decorateMarker() {

context.lineWidth = 9;
context.lineCap = 'round';
context.strokeStyle = 'green';
context.moveTo(35, 20);
context.lineTo(5, 25);
context.stroke();
var image = new Image();
image.onload = function() {
context.drawImage(image, 4, 4, 32, 32);
bindEvent(context, 'Marker');
};
image.src = data_uris.marker;
context.fillStyle = 'Gray';
context.font = '9px Verdana';
context.fillText('Marker', 6, 12);
bindEvent(context, 'Marker');
var markerContainer = find('marker-container'),

@@ -501,3 +494,2 @@ markerColorContainer = find('marker-fill-colors'),

// console.log(markerColorsList.getElementsByTagName('td'))
Array.prototype.slice.call(markerColorsList.getElementsByTagName('td')).forEach(function(td) {

@@ -549,3 +541,4 @@ addEvent(td, 'mouseover', function() {

decorateMarker();
} else document.getElementById('marker-icon').style.display = 'none';
document.getElementById('marker-icon').style.display = 'block';
}

@@ -555,13 +548,8 @@ function decorateEraser() {

context.lineWidth = 9;
context.lineCap = 'round';
context.moveTo(35, 20);
context.lineTo(5, 25);
context.stroke();
context.fillStyle = 'Gray';
context.font = '9px Verdana';
context.fillText('Eraser', 6, 12);
bindEvent(context, 'Eraser');
var image = new Image();
image.onload = function() {
context.drawImage(image, 4, 4, 32, 32);
bindEvent(context, 'Eraser');
};
image.src = data_uris.eraser;
}

@@ -571,3 +559,4 @@

decorateEraser();
} else document.getElementById('eraser-icon').style.display = 'none';
document.getElementById('eraser-icon').style.display = 'block';
}

@@ -577,6 +566,8 @@ function decorateText() {

context.font = '22px Verdana';
context.strokeText('T', 15, 30);
bindEvent(context, 'Text');
var image = new Image();
image.onload = function() {
context.drawImage(image, 4, 4, 32, 32);
bindEvent(context, 'Text');
};
image.src = data_uris.text;
}

@@ -586,3 +577,4 @@

decorateText();
} else document.getElementById('text-icon').style.display = 'none';
document.getElementById('text-icon').style.display = 'block';
}

@@ -597,3 +589,3 @@ function decorateImage() {

};
image.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAADFBMVEVYWFhVVVUAAABUVFTqqlXjAAAAA3RSTlMxdACUjPeLAAAATElEQVR42u3SQQrAMAwDQSn7/z+XFExTcOxroN3zgC4STecApy1gpP2gBgZXQMwKwJ23QITYACLlQBC9gAFNwJMXoJhVc7lBA/gsuAArEgqPcT12VgAAAABJRU5ErkJggg==';
image.src = data_uris.image;
}

@@ -603,20 +595,37 @@

decorateImage();
} else document.getElementById('image-icon').style.display = 'none';
document.getElementById('image-icon').style.display = 'block';
}
function decorateArc() {
var context = getContext('arc');
context.arc(20, 20, 16.3, Math.PI * 2, 0, 1);
context.stroke();
function decoratePDF() {
var context = getContext('pdf-icon');
context.fillStyle = 'Gray';
context.font = '9px Verdana';
context.fillText('Arc', 10, 24);
var image = new Image();
image.onload = function() {
context.drawImage(image, 4, 4, 32, 32);
bindEvent(context, 'Pdf');
};
image.src = data_uris.pdf;
}
bindEvent(context, 'Arc');
if (tools.pdf === true) {
decoratePDF();
document.getElementById('pdf-icon').style.display = 'block';
}
function decorateArc() {
var context = getContext('arc');
var image = new Image();
image.onload = function() {
context.drawImage(image, 4, 4, 32, 32);
bindEvent(context, 'Arc');
};
image.src = data_uris.arc;
}
if (tools.arc === true) {
decorateArc();
} else document.getElementById('arc').style.display = 'none';
document.getElementById('arc').style.display = 'block';
}

@@ -626,9 +635,8 @@ function decorateRect() {

context.strokeRect(5, 5, 30, 30);
context.fillStyle = 'Gray';
context.font = '9px Verdana';
context.fillText('Rect', 8, 24);
bindEvent(context, 'Rectangle');
var image = new Image();
image.onload = function() {
context.drawImage(image, 4, 4, 32, 32);
bindEvent(context, 'Rectangle');
};
image.src = data_uris.rectangle;
}

@@ -638,3 +646,4 @@

decorateRect();
} else document.getElementById('rectangle').style.display = 'none';
document.getElementById('rectangle').style.display = 'block';
}

@@ -644,11 +653,8 @@ function decorateQuadratic() {

context.moveTo(0, 0);
context.quadraticCurveTo(50, 10, 30, 40);
context.stroke();
context.fillStyle = 'Gray';
context.font = '9px Verdana';
context.fillText('quad..', 2, 24);
bindEvent(context, 'QuadraticCurve');
var image = new Image();
image.onload = function() {
context.drawImage(image, 4, 4, 32, 32);
bindEvent(context, 'QuadraticCurve');
};
image.src = data_uris.quadratic;
}

@@ -658,3 +664,4 @@

decorateQuadratic();
} else document.getElementById('quadratic-curve').style.display = 'none';
document.getElementById('quadratic-curve').style.display = 'block';
}

@@ -664,15 +671,8 @@ function decorateBezier() {

var x = 0,
y = 4;
context.moveTo(x, y);
context.bezierCurveTo(x + 86, y + 16, x - 45, y + 24, x + 48, y + 34);
context.stroke();
context.fillStyle = 'Gray';
context.font = '9px Verdana';
context.fillText('Bezier', 10, 8);
bindEvent(context, 'BezierCurve');
var image = new Image();
image.onload = function() {
context.drawImage(image, 4, 4, 32, 32);
bindEvent(context, 'Bezier');
};
image.src = data_uris.bezier;
}

@@ -682,3 +682,4 @@

decorateBezier();
} else document.getElementById('bezier-curve').style.display = 'none';
document.getElementById('bezier-curve').style.display = 'block';
}

@@ -696,11 +697,8 @@ function tempStrokeTheLine(context, width, mx, my, lx, ly) {

tempStrokeTheLine(context, 2, 5, 15, 35, 15);
tempStrokeTheLine(context, 3, 5, 20, 35, 20);
tempStrokeTheLine(context, 4, 5, 26, 35, 26);
var image = new Image();
image.onload = function() {
context.drawImage(image, 4, 4, 32, 32);
};
image.src = data_uris.lineWidth;
context.fillStyle = 'Gray';
context.font = '9px Verdana';
context.fillText('Line', 8, 12);
context.fillText('Width', 6, 38);
var lineWidthContainer = find('line-width-container'),

@@ -728,3 +726,6 @@ lineWidthText = find('line-width-text'),

decorateLineWidth();
if (tools.lineWidth === true) {
decorateLineWidth();
document.getElementById('line-width').style.display = 'block';
}

@@ -734,11 +735,8 @@ function decorateColors() {

context.fillStyle = 'red';
context.fillRect(5, 3, 30, 10);
var image = new Image();
image.onload = function() {
context.drawImage(image, 4, 4, 32, 32);
};
image.src = data_uris.colorsPicker;
context.fillStyle = 'green';
context.fillRect(5, 15, 30, 10);
context.fillStyle = 'blue';
context.fillRect(5, 27, 30, 10);
var colorsContainer = find('colors-container'),

@@ -768,3 +766,6 @@ strokeStyleText = find('stroke-style'),

decorateColors();
if (tools.colorsPicker === true) {
decorateColors();
document.getElementById('colors').style.display = 'block';
}

@@ -774,10 +775,8 @@ function decorateAdditionalOptions() {

context.fillStyle = '#6c96c8';
context.font = '35px Verdana';
context.fillText('»', 10, 27);
var image = new Image();
image.onload = function() {
context.drawImage(image, 4, 4, 32, 32);
};
image.src = data_uris.extraOptions;
context.fillStyle = 'Gray';
context.font = '9px Verdana';
context.fillText('Extras!', 2, 38);
var additionalContainer = find('additional-container'),

@@ -808,3 +807,6 @@ btnAdditionalClose = find('additional-close'),

decorateAdditionalOptions();
if (tools.extraOptions === true) {
decorateAdditionalOptions();
document.getElementById('additional').style.display = 'block';
}

@@ -811,0 +813,0 @@ var designPreview = find('design-preview'),

111

dev/drag-helper.js

@@ -91,2 +91,21 @@ var dragHelper = {

if (p[0] === 'pdf') {
if (dHelper.isPointInPath(x, y, point[1], point[2])) {
g.pointsToMove = 'stretch-first';
}
if (dHelper.isPointInPath(x, y, point[1] + point[3], point[2])) {
g.pointsToMove = 'stretch-second';
}
if (dHelper.isPointInPath(x, y, point[1], point[2] + point[4])) {
g.pointsToMove = 'stretch-third';
}
if (dHelper.isPointInPath(x, y, point[1] + point[3], point[2] + point[4])) {
g.pointsToMove = 'stretch-last';
}
}
if (p[0] === 'quadratic') {

@@ -247,2 +266,20 @@

}
if (p[0] === 'pdf') {
tempContext.beginPath();
tempContext.arc(point[1], point[2], 10, Math.PI * 2, 0, !1);
tempContext.fill();
tempContext.beginPath();
tempContext.arc(point[1] + point[3], point[2], 10, Math.PI * 2, 0, !1);
tempContext.fill();
tempContext.beginPath();
tempContext.arc(point[1], point[2] + point[4], 10, Math.PI * 2, 0, !1);
tempContext.fill();
tempContext.beginPath();
tempContext.arc(point[1] + point[3], point[2] + point[4], 10, Math.PI * 2, 0, !1);
tempContext.fill();
}
},

@@ -421,2 +458,15 @@ isPointInPath: function(x, y, first, second) {

if (p[0] === 'pdf') {
points[i] = [p[0],
[
point[0],
getPoint(x, prevX, point[1]),
getPoint(y, prevY, point[2]),
point[3],
point[4],
point[5]
], p[2]
];
}
if (p[0] === 'quadratic') {

@@ -452,2 +502,5 @@ points[i] = [p[0],

dragLastPath: function(x, y) {
// if last past is undefined?
if (!points[points.length - 1]) return;
var g = this.global,

@@ -625,2 +678,60 @@ prevX = g.prevX,

if (p[0] === 'pdf') {
if (isMoveAllPoints) {
point[1] = getPoint(x, prevX, point[1]);
point[2] = getPoint(y, prevY, point[2]);
}
if (g.pointsToMove === 'stretch-first') {
var newPoints = getXYWidthHeight(x, y, prevX, prevY, {
x: point[1],
y: point[2],
width: point[3],
height: point[4],
pointsToMove: g.pointsToMove
});
point[1] = newPoints.x;
point[2] = newPoints.y;
point[3] = newPoints.width;
point[4] = newPoints.height;
}
if (g.pointsToMove === 'stretch-second') {
var newPoints = getXYWidthHeight(x, y, prevX, prevY, {
x: point[1],
y: point[2],
width: point[3],
height: point[4],
pointsToMove: g.pointsToMove
});
point[2] = newPoints.y;
point[3] = newPoints.width;
point[4] = newPoints.height;
}
if (g.pointsToMove === 'stretch-third') {
var newPoints = getXYWidthHeight(x, y, prevX, prevY, {
x: point[1],
y: point[2],
width: point[3],
height: point[4],
pointsToMove: g.pointsToMove
});
point[1] = newPoints.x;
point[3] = newPoints.width;
point[4] = newPoints.height;
}
if (g.pointsToMove === 'stretch-last') {
point[3] = getPoint(x, prevX, point[3]);
point[4] = getPoint(y, prevY, point[4]);
}
points[points.length - 1] = [p[0], point, p[2]];
}
if (p[0] === 'quadratic') {

@@ -627,0 +738,0 @@

23

dev/draw-helper.js

@@ -9,2 +9,3 @@ var drawHelper = {

point = points[i];
// point[0] != 'pdf' &&
if (point && point.length && this[point[0]]) {

@@ -131,2 +132,24 @@ this[point[0]](context, point[1], point[2]);

},
pdf: function(context, point, options) {
this.handleOptions(context, options, true);
var image = pdfHandler.images[point[5]];
if (!image) {
var image = new Image();
image.onload = function() {
var index = imageHandler.images.length;
pdfHandler.lastPage = image.src;
pdfHandler.lastIndex = index;
pdfHandler.images.push(image);
context.drawImage(image, point[1], point[2], point[3], point[4]);
};
image.src = point[0];
return;
}
context.drawImage(image, point[1], point[2], point[3], point[4]);
pdfHandler.reset_pos(point[1], point[2]);
},
quadratic: function(context, point, options) {

@@ -133,0 +156,0 @@ context.beginPath();

0

dev/eraser-handler.js

@@ -0,0 +0,0 @@ var eraserHandler = {

52

dev/events-handler.js
var canvas = tempContext.canvas,
isTouch = 'createTouch' in document;
addEvent(canvas, isTouch ? 'touchstart' : 'mousedown', function(e) {
addEvent(canvas, isTouch ? 'touchstart mousedown' : 'mousedown', function(e) {
if (isTouch) e = e.pageX ? e : e.touches.length ? e.touches[0] : {

@@ -22,17 +22,39 @@ pageX: 0,

else if (cache.isImage) imageHandler.mousedown(e);
else if (cache.isPdf) pdfHandler.mousedown(e);
else if (cache.isArrow) arrowHandler.mousedown(e);
else if (cache.isMarker) markerHandler.mousedown(e);
drawHelper.redraw();
!cache.isPdf && drawHelper.redraw();
e.preventDefault();
e.stopPropagation();
preventStopEvent(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
};
function preventStopEvent(e) {
if (!e) {
return;
}
if (typeof e.preventDefault === 'function') {
e.preventDefault();
}
if (typeof e.stopPropagation === 'function') {
e.stopPropagation();
}
}
addEvent(canvas, isTouch ? 'touchend touchcancel mouseup' : 'mouseup', function(e) {
if (isTouch && (!e || !('pageX' in e))) {
if (e && e.touches && e.touches.length) {
e = e.touches[0];
} else if (e && e.changedTouches && e.changedTouches.length) {
e = e.changedTouches[0];
} else {
e = {
pageX: 0,
pageY: 0
}
}
}
var cache = is;

@@ -50,14 +72,14 @@

else if (cache.isImage) imageHandler.mouseup(e);
else if (cache.isPdf) pdfHandler.mousedown(e);
else if (cache.isArrow) arrowHandler.mouseup(e);
else if (cache.isMarker) markerHandler.mouseup(e);
drawHelper.redraw();
!cache.isPdf && drawHelper.redraw();
syncPoints(is.isDragAllPaths || is.isDragLastPath ? true : false);
e.preventDefault();
e.stopPropagation();
preventStopEvent(e);
});
addEvent(canvas, isTouch ? 'touchmove' : 'mousemove', function(e) {
addEvent(canvas, isTouch ? 'touchmove mousemove' : 'mousemove', function(e) {
if (isTouch) e = e.pageX ? e : e.touches.length ? e.touches[0] : {

@@ -80,7 +102,7 @@ pageX: 0,

else if (cache.isImage) imageHandler.mousemove(e);
else if (cache.isPdf) pdfHandler.mousedown(e);
else if (cache.isArrow) arrowHandler.mousemove(e);
else if (cache.isMarker) markerHandler.mousemove(e);
e.preventDefault();
e.stopPropagation();
preventStopEvent(e);
});

@@ -87,0 +109,0 @@

4

dev/file-selector.js

@@ -9,3 +9,3 @@ var FileSelector = function() {

function selectFile(callback, multiple) {
function selectFile(callback, multiple, accept) {
var file = document.createElement('input');

@@ -18,3 +18,3 @@ file.type = 'file';

file.accept = 'image/*';
file.accept = accept || 'image/*';

@@ -21,0 +21,0 @@ file.onchange = function() {

0

dev/head.js

@@ -0,0 +0,0 @@ // _______________

8

dev/image-handler.js

@@ -9,2 +9,10 @@ var imageHandler = {

prevY: 0,
load: function(width, height) {
var t = imageHandler;
points[points.length] = ['image', [imageHandler.lastImageURL, t.prevX, t.prevY, width, height, imageHandler.lastImageIndex], drawHelper.getOptions()];
document.getElementById('drag-last-path').click();
// share to webrtc
syncPoints(true);
},
mousedown: function(e) {

@@ -11,0 +19,0 @@ var x = e.pageX - canvas.offsetLeft,

0

dev/line-handler.js

@@ -0,0 +0,0 @@ var lineHandler = {

0

dev/marker-handler.js

@@ -0,0 +0,0 @@ var markerHandler = {

0

dev/pencil-handler.js

@@ -0,0 +0,0 @@ var pencilHandler = {

0

dev/quadratic-handler.js

@@ -0,0 +0,0 @@ var quadraticHandler = {

0

dev/rect-handler.js

@@ -0,0 +0,0 @@ var rectHandler = {

13

dev/share-drawings.js

@@ -15,2 +15,15 @@ // scripts on this page directly touches DOM-elements

if (event.data.captureStream) {
webrtcHandler.createOffer(function(sdp) {
sdp.uid = uid;
window.parent.postMessage(sdp, '*');
});
return;
}
if (event.data.sdp) {
webrtcHandler.setRemoteDescription(event.data);
return;
}
if (event.data.genDataURL) {

@@ -17,0 +30,0 @@ var dataURL = context.canvas.toDataURL(event.data.format, 1);

11

dev/text-handler.js

@@ -5,2 +5,3 @@ var textHandler = {

selectedFontSize: '15',
lastFillStyle: '',
onShapeSelected: function() {

@@ -109,2 +110,12 @@ tempContext.canvas.style.cursor = 'text';

showOrHideTextTools: function(show) {
if (show === 'hide') {
if (this.lastFillStyle.length) {
fillStyle = this.lastFillStyle;
this.lastFillStyle = '';
}
} else if (!this.lastFillStyle.length) {
this.lastFillStyle = fillStyle;
fillStyle = 'black';
}
this.fontFamilyBox.style.display = show == 'show' ? 'block' : 'none';

@@ -111,0 +122,0 @@ this.fontSizeBox.style.display = show == 'show' ? 'block' : 'none';

14

dev/zoom-handler.js

@@ -18,16 +18,10 @@ var zoomHandler = {

up: function(ctx) {
var image = new Image();
image.width = 32;
image.height = 32;
image.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuMTJDBGvsAAADiklEQVRoQ+2ZLXMUQRCGT0RERCCQiJMRyEjEiYiIiBOIiIiIiIiIExHIq4qlKiI/AMEPiIhEREREIpAIBAKBQCAQiON9trphcnt787F7lZoqRNfex0x3v909/TE7WiwWo5qpauUx/H8ATx1+g3hgNBptiw5F16Ib0YPoq0g+bp5853f+Z932UMCLAUiJLdGRKfbTlEXhFGI9gNi/1QdMEQAJPRB9DJT9rc/3oguz8J6eL5pDpqeI71ie/1nHegf6SZ+npSCyAEjQWHQXCP+sz6ei5zkKsF50JmK/A4Hvbg6frCwk5hPRNxP4w6zZK5bFgzCcib4HfPdzQCR5wKzsbv+g789yhMTWwk90ayCQcxbb4/9HAZjy7uYrrJbKPHedeF8GIXWasn8tAAsbt/x5CsO+ayTzOPDEJMavE4CYjIOYv4oxGvJ/yZ0bCM7ceB3vdQA82xDz2WETKDEvAaf91AlC9y4bgDaR59lMtik6sAMA2Aki4KALRMsDWFvkReqixHpWwDwMijxgPM7NkOizMgpWAaC8Y32KTHGe7+sBA4AxvdgdrTLmKgAee0lprNO1/w5isQcMBBUbg95EAWBxEY0WqTOrPVhmPoQHDABtB/qgVysiHnlAC2i4QHtfGvt/K+RAHjAQNIDoddgyVPiDFtCvs7D48G4IAF0sel3HAHj8t5DmemSoEDIPeGS0zsFyCDE5gXQvV+FNnQEDwDyBXg8xD/gY2AwjHUrNxOjEaKrnxOilnmMjitDchPbKQgaAoagZT2MAmq5zTWpMGReX15A9vhjhYVoU6L3onRFdKIA7wRqAlm7LIZTiAVpqF0wP7woxGrqiv1xg7rPD88ke2MQZeBuE1qsg5GibT4wa63d5QL8nn4Hqs1D1daD6Slx3L2Q5t95u1ACE80D2KDlkL6TsUzQPsImcTkGalbYUlhbhUVyJtZdbP3igT9pEZl6Y2kZuzJ5qJuY8+k1g591pyq3EbYkX+npA+2k1ym4lzAu7YsCtBEwuS0CU7pG8NyYX+WsvfGM3c/ti4Ddzx6UK5eyTvNcmE7nRi96Uu1EfqnsdyBQQZnk3WNIFbxSAhRPZwBlTJ3ZSFEpdI34cWI/5YW+ng7w+CbIC2YFLp+I6YYYhZWOc8L1DNGxCwyR5IAAxljD6fx9a6nlD8wh1re/IlkDU+5ZyxbBf33vi1Ayz6XVZh3jTypTwrx7AH8HANnr8oqz7AAAAAElFTkSuQmCC';
ctx.drawImage(image, 4, 4, 32, 32);
ctx.font = '22px Verdana';
ctx.strokeText('+', 10, 30);
},
down: function(ctx) {
var image = new Image();
image.width = 32;
image.height = 32;
image.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuMTJDBGvsAAADdUlEQVRoQ+2Zr1IcQRDGTyAQiIiIiIiTiEhkxAkEAnEiAoGIQCAQJxCRVPEACB4AkQdAICMQCGREZERERERERERExOX7bXVXDXu7NzP7h6upylV17e5tT3d/3T09PbOT5XI5KZmKNh7H/wew6fQbJAKTyWRbdCi6Ft2KHkXfRYpxdeWZ/3kP3/ZQwDsDkBFboiMz7LcZi8EpBD+AGL/VB0wnAFJ6IPocGPtX9w+ic/Pwnq6vq0mmq4hnPM97+OB3oF90P+8KIguAFE1F94Hyr7o/Eb3MMQB+0amI8Q4Eubs5crKqkITPRD9M4S/zZq9clgzScCH6GcjdzwGRFAHzsof9k55f5CiJ8SJPdGcg0HMaG+PvowDMeA/zFV5LFZ7LJ9mXQUqdpIxfC8DSxj1/liKwL490HgeRmMXktQKQkGmQ81cxQUO+l94LA8Gcm66TvQ6AVxtyfrS0aTNOOlknSN37bAAaRJ1nMNVm0AmbGinp3Qky4KAVaP0F3hb5InWeqnAMPtlxZo7EnsYsWEkhMbK8430WmV51vi8oc6YvdkdN8poAeO4llbG+RsbGCwQrNg69jQLA4yIaLUpnVnsQM6Tre+wwe7BrJSOeREAMNFygfeiqcIxx2GN2Ha7M2fAPMdGvA2Cjk7ehsNDFYtd1DIDn/wrSMTybKjPIjJV5UE8hdk4g3UsV/hx82GN2PcYi4NvAajPSEMoLCVqI3hvNdZ0ZvdF1arQzJDDJZFNUbU9jAKqus3XVS9su1reU9DPfjIgwLQr0UXRjRBeKcy5iumMAUiJAS+2K6eHdILaGbugf81gdTPS5JfLJERh8DgjIqyC13gYpR9vsqVh5vy0C+j95DhRfhYpfB4pficvuhagA+pXbjRqAcD/w7FvJWm/G5ip7P8AgajrhWAy5oubKkn5O/bADe9J2ZBaFuQ3kxGxTe2Lmo58Etp6dppxK3OV6bgh+GU+r0e1UwqKwKwGcSiDkcgijUmVI3wfTi/61B76xk7l9CfCTueNUA/rwSd8704ne6EFvytmob6qJRGu32MdoH2ued4clHfBGAVg6UQ1cMOvE0P0+E9ZzftjT6cA7s6AqUB04dOq1TjDeSmX43SGaNk/WipzQS9lURP/vfX05X2hqK2SZ38galvkyv1I2bPbL+06cM3fG5E0qo2Ma0Fd28QD+AZqKxdXXwZ1FAAAAAElFTkSuQmCC';
ctx.drawImage(image, 4, 4, 32, 32);
ctx.font = '22px Verdana';
ctx.strokeText('-', 15, 30);
}
}
};

14

Gruntfile.js

@@ -42,3 +42,6 @@ 'use strict';

'dev/image-handler.js',
'dev/pdf-handler.js',
'dev/data-uris.js',
'dev/decorator.js',

@@ -48,2 +51,3 @@ 'dev/events-handler.js',

'dev/share-drawings.js',
'dev/webrtc-handler.js',
'dev/canvas-designer-widget.js',

@@ -119,2 +123,11 @@

}
},
watch: {
scripts: {
files: ['dev/*.js'],
tasks: ['concat', 'jsbeautifier', 'uglify'],
options: {
spawn: false,
},
},
}

@@ -128,2 +141,3 @@ });

grunt.registerTask('default', ['concat', 'jsbeautifier', 'uglify']);
grunt.loadNpmTasks('grunt-contrib-watch');
};

7

package.json
{
"name": "canvas-designer",
"preferGlobal": false,
"version": "1.2.1",
"version": "1.2.2",
"author": {

@@ -36,9 +36,10 @@ "name": "Muaz Khan",

"grunt": "0.4.5",
"grunt-bump": "0.6.0",
"grunt-cli": "0.1.13",
"load-grunt-tasks": "3.3.0",
"grunt-contrib-concat": "0.5.1",
"grunt-contrib-uglify": "0.9.2",
"grunt-contrib-watch": "^1.1.0",
"grunt-jsbeautifier": "0.2.10",
"grunt-bump": "0.6.0"
"load-grunt-tasks": "3.3.0"
}
}

98

README.md
# [Canvas Designer](https://github.com/muaz-khan/Canvas-Designer) / [API Referencee](https://github.com/muaz-khan/Canvas-Designer#api-reference)
* Main demo: https://www.webrtc-experiment.com/Canvas-Designer/
* Multiple designers demo: https://www.webrtc-experiment.com/Canvas-Designer/multiple.html
## Demo: https://www.webrtc-experiment.com/Canvas-Designer/
YouTube video: https://www.youtube.com/watch?v=pvAj5l_v3cM
## Advance Demo: [demos/dashboard.html](https://rtcmulticonnection.herokuapp.com/demos/dashboard.html)
Multiple designers demo: https://www.webrtc-experiment.com/Canvas-Designer/multiple.html
### YouTube video:
* https://www.youtube.com/watch?v=pvAj5l_v3cM
[![npm](https://img.shields.io/npm/v/canvas-designer.svg)](https://npmjs.org/package/canvas-designer) [![downloads](https://img.shields.io/npm/dm/canvas-designer.svg)](https://npmjs.org/package/canvas-designer) [![Build Status: Linux](https://travis-ci.org/muaz-khan/Canvas-Designer.png?branch=master)](https://travis-ci.org/muaz-khan/Canvas-Designer)

@@ -51,2 +56,8 @@

13. `marker` --- draw markers
14. `lineWidth` --- set line width
15. `colorsPicker` --- background and foreground colors picker
16. `extraOptions` --- extra options eg. lineCap, lineJoin, globalAlpha, globalCompositeOperation etc.
17. `pdf` --- to import PDF
18. `code` --- to enable/disable code view
19. `undo` --- undo recent shapes

@@ -270,6 +281,48 @@ The correct name for `dragSingle` should be: `drag-move-resize last-selected-shape`.

image: true,
zoom: true
pdf: true,
zoom: true,
lineWidth: true,
colorsPicker: true,
extraOptions: true,
code: true,
undo: true
});
```
## `icons`
You can force/set your own tool-icons:
```javascript
designer.icons = {
line: '/icons/line.png',
arrow: '/icons/arrow.png',
pencil: '/icons/pencil.png',
dragSingle: '/icons/dragSingle.png',
dragMultiple: '/icons/dragMultiple.png',
eraser: '/icons/eraser.png',
rectangle: '/icons/rectangle.png',
arc: '/icons/arc.png',
bezier: '/icons/bezier.png',
quadratic: '/icons/quadratic.png',
text: '/icons/text.png',
image: '/icons/image.png',
pdf: '/icons/pdf.png',
marker: '/icons/marker.png',
zoom: '/icons/zoom.png',
lineWidth: '/icons/lineWidth.png',
colorsPicker: '/icons/colorsPicker.png',
extraOptions: '/icons/extraOptions.png',
code: '/icons/code.png'
};
```
You can set like this as well:
```javascript
designer.icons.line = '/icons/line.png';
```
Default values are `NULL` to force icons from `/dev/data-dris.js`.
## `appendTo`

@@ -341,2 +394,19 @@

## `captureStream`
Get `MediaStream` object and share in realtime using `RTCPeerConnection.addStream` API.
```html
<script src="dev/webrtc-handler.js"></script>
<script>
designer.captureStream(function(stream) {
var url = URL.createObjectURL(stream);
videoPreview.src = url;
rtcPeerConnection.addStream(stream);
rtcPeerConnection.createOffer(success, failure, params);
});
</script>
```
## `pointsLength`

@@ -567,2 +637,22 @@

# Signaling Server
You need only these two files:
1. [server.js](https://github.com/muaz-khan/RTCMultiConnection/blob/master/server.js)
2. [Signaling-Server.js](https://github.com/muaz-khan/RTCMultiConnection/blob/master/Signaling-Server.js)
You also need to manually install `socket.io`:
```sh
wget https://raw.githubusercontent.com/muaz-khan/RTCMultiConnection/master/server.js
wget https://raw.githubusercontent.com/muaz-khan/RTCMultiConnection/master/Signaling-Server.js
npm install socket.io --save-dev
node server --port=9002 --ssl --ssl_key=/home/ssl/ssl.key --ssl_cert=/home/ssl/ssl.crt
```
For more info:
* https://github.com/muaz-khan/RTCMultiConnection/tree/master/docs/installation-guide.md
# Contributors

@@ -569,0 +659,0 @@

0

server.js

@@ -0,0 +0,0 @@ var server = require('http'),

.travis.yml

Sorry, the diff of this file is not supported yet

Help/index.html

Sorry, the diff of this file is not supported yet

index.html

Sorry, the diff of this file is not supported yet

multiple.html

Sorry, the diff of this file is not supported yet

widget.html

Sorry, the diff of this file is not supported yet

widget.js

Sorry, the diff of this file is too big to display

widget.min.js

Sorry, the diff of this file is too big to display

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

About

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc