diff --git a/.gitignore b/.gitignore index dfeff73..6cc8cfe 100755 --- a/.gitignore +++ b/.gitignore @@ -15,4 +15,17 @@ lib-cov .wafpickle-* config.gypi CVS -npm-debug.log \ No newline at end of file +npm-debug.log +.idea/Canvas-Designer.iml + +.idea/.name + +.idea/encodings.xml + +.idea/misc.xml + +.idea/modules.xml + +.idea/vcs.xml + +.idea/workspace.xml diff --git a/canvas-designer-widget.js b/canvas-designer-widget.js index 90b156a..6ca02eb 100644 --- a/canvas-designer-widget.js +++ b/canvas-designer-widget.js @@ -1,19 +1,5 @@ -// Last time updated: 2016-04-17 6:42:16 AM UTC - -// _______________ -// Canvas-Designer - -// Open-Sourced: https://github.com/muaz-khan/Canvas-Designer - -// -------------------------------------------------- -// Muaz Khan - www.MuazKhan.com -// MIT License - www.WebRTC-Experiment.com/licence -// -------------------------------------------------- - -function CanvasDesigner() { - var designer = this; - designer.iframe = null; - +var CanvasDesigner = (function() { + var iframe; var tools = { line: true, pencil: true, @@ -25,27 +11,27 @@ function CanvasDesigner() { bezier: true, quadratic: true, text: true, + marker: true, image: true }; - - var selectedIcon = 'pencil'; + var selectedIcon = 'marker'; function syncData(data) { - if (!designer.iframe) return; + if (!iframe) return; - designer.postMessage({ + iframe.contentWindow.postMessage({ canvasDesignerSyncData: data - }); + }, '*'); } var syncDataListener = function(data) {}; var dataURLListener = function(dataURL) {}; - + function onMessage(event) { - if (!event.data || event.data.uid !== designer.uid) return; + if(!event.data) return; if (!!event.data.canvasDesignerSyncData) { - designer.pointsLength = event.data.canvasDesignerSyncData.points.length; + CanvasDesigner.pointsLength = event.data.canvasDesignerSyncData.points.length; syncDataListener(event.data.canvasDesignerSyncData); } @@ -54,93 +40,60 @@ function CanvasDesigner() { } } - function getRandomString() { - if (window.crypto && window.crypto.getRandomValues && navigator.userAgent.indexOf('Safari') === -1) { - var a = window.crypto.getRandomValues(new Uint32Array(3)), - token = ''; - for (var i = 0, l = a.length; i < l; i++) { - token += a[i].toString(36); + return { + appendTo: function(parentNode) { + iframe = document.createElement('iframe'); + iframe.src = this.widgetHtmlURL + '?widgetJsURL=' + this.widgetJsURL + '&tools=' + JSON.stringify(tools) + '&selectedIcon=' + selectedIcon; + iframe.style.width = '100%'; + iframe.style.height = '100%'; + iframe.style.border = 0; + parentNode.appendChild(iframe); + + window.removeEventListener('message', onMessage); + window.addEventListener('message', onMessage, false); + }, + destroy: function() { + if(iframe) { + iframe.parentNode.removeChild(iframe); } - return token; - } else { - return (Math.random() * new Date().getTime()).toString(36).replace(/\./g, ''); - } - } - - designer.uid = getRandomString(); - - designer.appendTo = function(parentNode) { - designer.iframe = document.createElement('iframe'); - designer.iframe.src = designer.widgetHtmlURL + '?widgetJsURL=' + designer.widgetJsURL + '&tools=' + JSON.stringify(tools) + '&selectedIcon=' + selectedIcon; - designer.iframe.style.width = '100%'; - designer.iframe.style.height = '100%'; - designer.iframe.style.border = 0; - - window.removeEventListener('message', onMessage); - window.addEventListener('message', onMessage, false); - - parentNode.appendChild(designer.iframe); - }; - - designer.destroy = function() { - if (designer.iframe) { - designer.iframe.parentNode.removeChild(designer.iframe); - designer.iframe = null; - } - window.removeEventListener('message', onMessage); - }; - - designer.addSyncListener = function(callback) { - syncDataListener = callback; - }; - - designer.syncData = syncData; - - designer.setTools = function(_tools) { - tools = _tools; - }; - - designer.setSelected = function(icon) { - if (typeof tools[icon] !== 'undefined') { - selectedIcon = icon; - } - }; - - designer.toDataURL = function(format, callback) { - dataURLListener = callback; - - if (!designer.iframe) return; - designer.postMessage({ - genDataURL: true, - format: format - }); - }; - - designer.sync = function() { - if (!designer.iframe) return; - designer.postMessage({ - syncPoints: true - }); - }; - - designer.pointsLength = 0; - - designer.undo = function(index) { - if (!designer.iframe) return; - - designer.postMessage({ - undo: true, - index: index || designer.pointsLength - 1 || -1 - }); - }; - - designer.postMessage = function(message) { - if (!designer.iframe) return; - - message.uid = designer.uid; - designer.iframe.contentWindow.postMessage(message, '*'); + window.removeEventListener('message', onMessage); + }, + addSyncListener: function(callback) { + syncDataListener = callback; + }, + syncData: syncData, + setTools: function(_tools) { + tools = _tools; + }, + setSelected: function(icon) { + if (typeof tools[icon] !== 'undefined') { + selectedIcon = icon; + } + }, + toDataURL: function(format, callback) { + dataURLListener = callback; + if (!iframe) return; + iframe.contentWindow.postMessage({ + genDataURL: true, + format: format + }, '*'); + }, + sync: function() { + if (!iframe) return; + iframe.contentWindow.postMessage({ + syncPoints: true + }, '*'); + }, + pointsLength: 0, + undo: function(index) { + if (!iframe) return; + iframe.contentWindow.postMessage({ + undo: true, + index: index || this.pointsLength - 1 || -1 + }, '*'); + }, + widgetHtmlURL: 'widget.html', + // widgetJsURL: 'widget.min.js' + widgetJsURL: 'widget.js' }; - - designer.widgetHtmlURL = 'widget.html'; - designer.widgetJsURL = 'widget.min.js'; -} +})(); diff --git a/widget.js b/widget.js index 696b71a..4ad1c75 100644 --- a/widget.js +++ b/widget.js @@ -1,4 +1,4 @@ -// Last time updated: 2016-04-17 12:40:31 PM UTC +// Last time updated: 2016-04-02 6:49:49 AM UTC // _______________ // Canvas-Designer @@ -20,6 +20,7 @@ isPencil: false, isEraser: false, isText: false, + isMarker: false, isImage: false, set: function(shape) { @@ -43,10 +44,44 @@ return document.getElementById(selector); } + 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) + ] + } + 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} + var points = [], textarea = find('code-text'), lineWidth = 2, + markerLineWidth = 8, + markerGlobalAlpha = 0.1, strokeStyle = '#6c96c8', + markerStrokeStyle = '#FF7373', fillStyle = 'transparent', globalAlpha = 1, globalCompositeOperation = 'source-over', @@ -123,6 +158,10 @@ 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] === 'marker') { + 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] === 'eraser') { tempArray[i] = ['context.beginPath();\n' + 'context.moveTo(' + point[0] + ', ' + point[1] + ');\n' + 'context.lineTo(' + point[2] + ', ' + point[3] + ');\n' + this.strokeOrFill(p[2])]; } @@ -737,6 +776,115 @@ decoratePencil(); } else document.getElementById('pencil-icon').style.display = 'none'; + function decorateMarker() { + + function hexToRGBA(h, alpha) { + return 'rgba('+hexToRGB(h).join(',')+','+alpha+')'; + } + 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('marker-icon'); + + context.lineWidth = 9; + context.lineCap = 'round'; + context.strokeStyle = 'green'; + context.moveTo(35, 20); + context.lineTo(5, 25); + context.stroke(); + + context.fillStyle = 'Gray'; + context.font = '9px Verdana'; + context.fillText('Marker', 6, 12); + + bindEvent(context, 'Marker'); + + var markerContainer = find('marker-container'), + markerColorContainer = find('marker-fill-colors'), + strokeStyleText = find('marker-stroke-style'), + markerColorsList = find("marker-colors-list"), + fillStyleText = find('marker-fill-style'), + markerSelectedColor = find('marker-selected-color'), + markerSelectedColor2 = find('marker-selected-color-2'), + btnMarkerDone = find('marker-done'), + canvas = context.canvas, + alpha = 0.2; + + // START INIT MARKER + + + + markerStrokeStyle = hexToRGBA(fillStyleText.value, alpha) + + markerSelectedColor.style.backgroundColor = + markerSelectedColor2.style.backgroundColor = '#'+fillStyleText.value; + + colors.forEach(function(colorRow) { + var row = ''; + + colorRow.forEach(function(color) { + row += ''; + }) + row += ''; + + markerColorsList.innerHTML += row; + }) + + // console.log(markerColorsList.getElementsByTagName('td')) + Array.prototype.slice.call(markerColorsList.getElementsByTagName('td')).forEach(function(td) { + addEvent(td, 'mouseover', function() { + var elColor = td.getAttribute('data-color'); + markerSelectedColor2.style.backgroundColor = '#'+elColor; + fillStyleText.value = elColor + }); + + addEvent(td, 'click', function() { + var elColor = td.getAttribute('data-color'); + markerSelectedColor.style.backgroundColor = + markerSelectedColor2.style.backgroundColor = '#'+elColor; + + fillStyleText.value = elColor; + + + markerColorContainer.style.display = 'none'; + }); + }) + + // END INIT MARKER + + addEvent(canvas, 'click', function() { + hideContainers(); + + markerContainer.style.display = 'block'; + markerContainer.style.top = (canvas.offsetTop + 1) + 'px'; + markerContainer.style.left = (canvas.offsetLeft + canvas.clientWidth) + 'px'; + + fillStyleText.focus(); + }); + + addEvent(btnMarkerDone, 'click', function() { + markerContainer.style.display = 'none'; + markerColorContainer.style.display = 'none'; + + markerLineWidth = strokeStyleText.value; + markerStrokeStyle = hexToRGBA(fillStyleText.value, alpha); + }); + + addEvent(markerSelectedColor, 'click', function() { + markerColorContainer.style.display = 'block'; + }); + } + + if (tools.marker === true) { + decorateMarker(); + } else document.getElementById('marker-icon').style.display = 'none'; + + function decorateEraser() { var context = getContext('eraser-icon'); @@ -1052,9 +1200,15 @@ function hideContainers() { var additionalContainer = find('additional-container'), colorsContainer = find('colors-container'), + markerContainer = find('marker-container'), + markerColorContainer = find('marker-fill-colors'), lineWidthContainer = find('line-width-container'); - additionalContainer.style.display = colorsContainer.style.display = lineWidthContainer.style.display = 'none'; + additionalContainer.style.display = + colorsContainer.style.display = + markerColorContainer.style.display = + markerContainer .style.display = + lineWidthContainer.style.display = 'none'; } var drawHelper = { @@ -1158,6 +1312,12 @@ } }; + var markerDrawHelper = clone(drawHelper); + + markerDrawHelper.getOptions = function() { + return [markerLineWidth, markerStrokeStyle, fillStyle, globalAlpha, globalCompositeOperation, lineCap, lineJoin, font]; + } + var dragHelper = { global: { prevX: 0, @@ -1825,6 +1985,53 @@ } }; + + var markerHandler = { + ismousedown: false, + prevX: 0, + prevY: 0, + mousedown: function(e) { + var x = e.pageX - canvas.offsetLeft, + y = e.pageY - canvas.offsetTop; + + var t = this; + + t.prevX = x; + t.prevY = y; + + t.ismousedown = true; + + // make sure that pencil is drawing shapes even + // if mouse is down but mouse isn't moving + tempContext.lineCap = 'round'; + markerDrawHelper.line(tempContext, [t.prevX, t.prevY, x, y]); + + points[points.length] = ['line', [t.prevX, t.prevY, x, y], markerDrawHelper.getOptions()]; + + t.prevX = x; + t.prevY = y; + }, + mouseup: function(e) { + this.ismousedown = false; + }, + mousemove: function(e) { + var x = e.pageX - canvas.offsetLeft, + y = e.pageY - canvas.offsetTop; + + var t = this; + + if (t.ismousedown) { + tempContext.lineCap = 'round'; + markerDrawHelper.line(tempContext, [t.prevX, t.prevY, x, y]); + + points[points.length] = ['line', [t.prevX, t.prevY, x, y], markerDrawHelper.getOptions()]; + + t.prevX = x; + t.prevY = y; + } + } + } + var eraserHandler = { ismousedown: false, prevX: 0, @@ -2460,6 +2667,7 @@ else if (cache.isPencil) pencilHandler.mousedown(e); else if (cache.isEraser) eraserHandler.mousedown(e); else if (cache.isText) textHandler.mousedown(e); + else if (cache.isMarker) markerHandler.mousedown(e); else if (cache.isImage) imageHandler.mousedown(e); drawHelper.redraw(); @@ -2482,6 +2690,7 @@ else if (cache.isPencil) pencilHandler.mouseup(e); else if (cache.isEraser) eraserHandler.mouseup(e); else if (cache.isText) textHandler.mouseup(e); + else if (cache.isMarker) markerHandler.mouseup(e); else if (cache.isImage) imageHandler.mouseup(e); drawHelper.redraw(); @@ -2504,6 +2713,7 @@ else if (cache.isPencil) pencilHandler.mousemove(e); else if (cache.isEraser) eraserHandler.mousemove(e); else if (cache.isText) textHandler.mousemove(e); + else if (cache.isMarker) markerHandler.mousemove(e); else if (cache.isImage) imageHandler.mousemove(e); }); @@ -2632,46 +2842,20 @@ // it is used only to bring collaboration for canvas-surface var lastPointIndex = 0; - var uid; + var selfId = (Math.random() * 10000).toString().replace('.', ''); window.addEventListener('message', function(event) { if (!event.data) return; - - if (!uid) { - uid = event.data.uid; - } - if (event.data.genDataURL) { - var dataURL = context.canvas.toDataURL(event.data.format, 1); + var dataURL = context.canvas.toDataURL(event.data.format); window.parent.postMessage({ - dataURL: dataURL, - uid: uid + dataURL: dataURL }, '*'); return; } if (event.data.undo && points.length) { var index = event.data.index; - - if (index === 'all') { - points = []; - drawHelper.redraw(); - syncPoints(true); - return; - } - - if (index.numberOfLastShapes) { - try { - points.length -= index.numberOfLastShapes; - } catch (e) { - points = []; - } - - drawHelper.redraw(); - syncPoints(true); - return; - } - if (index === -1) { points.length = points.length - 1; drawHelper.redraw(); @@ -2698,7 +2882,9 @@ return; } - if (!event.data.canvasDesignerSyncData) return; + if (!event.data || !event.data.canvasDesignerSyncData) return; + + if (event.data.sender && event.data.sender == selfId) return; // drawing is shared here (array of points) var d = event.data.canvasDesignerSyncData; @@ -2744,7 +2930,7 @@ function syncData(data) { window.parent.postMessage({ canvasDesignerSyncData: data, - uid: uid + sender: selfId }, '*'); }