Skip to content

Commit

Permalink
Added [email protected]
Browse files Browse the repository at this point in the history
  • Loading branch information
@muaz-khan
muaz-khan committed Jul 1, 2016
1 parent 9150c6e commit 61221ee
Show file tree
Hide file tree
Showing 12 changed files with 901 additions and 833 deletions.
19 changes: 18 additions & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -463,6 +463,10 @@ var yourNewToolIconHandler = {

You can check other `*-handler.js` from [`dev`](https://github.com/muaz-khan/Canvas-Designer/tree/master/dev) directory to get the idea how exactly it works.

Now open [`Gruntfile.js#L43`](https://github.com/muaz-khan/Canvas-Designer/blob/master/Gruntfile.js#L43) and add link to your new file: `dev/events-handler.js`.

Now compile all your changes using `grunt`.

## Fifth Step

Open [`events-handler.js`](https://github.com/muaz-khan/Canvas-Designer/blob/master/dev/events-handler.js) and make sure that your above `yourNewToolIconHandler` object is called for mouse up/down/move events.
Expand Down Expand Up @@ -525,7 +529,18 @@ Open [`common.js`](https://github.com/muaz-khan/Canvas-Designer/blob/master/dev/

This allows end-users to copy your shape's code and use anywhere on their own web-pages.

For more information:
Open [`common.js`](https://github.com/muaz-khan/Canvas-Designer/blob/master/dev/common.js) file; there is a function [`updateTextArea`](https://github.com/muaz-khan/Canvas-Designer/blob/master/dev/common.js#L67) inside the "common" object – which is aimed to output into textarea element.

You don't have to change [`updateTextArea`](https://github.com/muaz-khan/Canvas-Designer/blob/master/dev/common.js#L67). For simplicity purpose, code is separated in different functions/properties that you've to edit:

1. [`forLoop`](https://github.com/muaz-khan/Canvas-Designer/blob/master/dev/common.js#L363)
2. [`absoluteNOTShortened`](https://github.com/muaz-khan/Canvas-Designer/blob/master/dev/common.js#L105)
3. [`relativeShortened`](https://github.com/muaz-khan/Canvas-Designer/blob/master/dev/common.js#L158)
4. [`relativeNOTShortened`](https://github.com/muaz-khan/Canvas-Designer/blob/master/dev/common.js#L281)

Search for `p[0] === 'line'` and add similar code-blocks for your shape (new-tool-icon) as well.

### For more information

* https://www.webrtc-experiment.com/Canvas-Designer/Help/#contribute

Expand All @@ -540,6 +555,8 @@ ctrl+c (copy last-selected shape)
ctrl+v (paste last-copied shape)
```

`ctrl+mousedown` allows you quickly copy/paste all shapes. (i.e. ctrl button + mouse down)

# Contributors

1. [Muaz Khan](https://github.com/muaz-khan)
Expand Down
2 changes: 1 addition & 1 deletion bower.json
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "canvas-designer",
"preferGlobal": false,
"version": "1.0.8",
"version": "1.0.9",
"author": {
"name": "Muaz Khan",
"email": "[email protected]",
Expand Down
4 changes: 2 additions & 2 deletions canvas-designer-widget.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@ function CanvasDesigner() {
designer.iframe.style.width = '100%';
designer.iframe.style.height = '100%';
designer.iframe.style.border = 0;

window.removeEventListener('message', onMessage);
window.addEventListener('message', onMessage, false);

Expand Down Expand Up @@ -108,7 +108,7 @@ function CanvasDesigner() {

designer.toDataURL = function(format, callback) {
dataURLListener = callback;

if (!designer.iframe) return;
designer.postMessage({
genDataURL: true,
Expand Down
75 changes: 50 additions & 25 deletions dev/common.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -303,31 +303,36 @@ var common = {
if (p[0] === 'arc') {
output += 'context.beginPath();\n' + 'context.arc(' + getPoint(point[0], x, 'x') + ', ' + getPoint(point[1], y, 'y') + ', ' + point[2] + ', ' + point[3] + ', 0, ' + point[4] + ');\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]);
+
this.strokeOrFill(p[2]);
}

if (p[0] === 'marker') {
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] === 'eraser') {
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] === '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'

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

if (p[0] === 'arrow') {
Expand All @@ -345,13 +350,15 @@ var common = {
if (p[0] === 'quadratic') {
output += 'context.beginPath();\n' + 'context.moveTo(' + getPoint(point[0], x, 'x') + ', ' + getPoint(point[1], y, 'y') + ');\n' + 'context.quadraticCurveTo(' + getPoint(point[2], x, 'x') + ', ' + getPoint(point[3], y, 'y') + ', ' + getPoint(point[4], x, 'x') + ', ' + getPoint(point[5], y, 'y') + ');\n'

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

if (p[0] === 'bezier') {
output += 'context.beginPath();\n' + 'context.moveTo(' + getPoint(point[0], x, 'x') + ', ' + getPoint(point[1], y, 'y') + ');\n' + 'context.bezierCurveTo(' + getPoint(point[2], x, 'x') + ', ' + getPoint(point[3], y, 'y') + ', ' + getPoint(point[4], x, 'x') + ', ' + getPoint(point[5], y, 'y') + ', ' + getPoint(point[6], x, 'x') + ', ' + getPoint(point[7], y, 'y') + ');\n'

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

if (i !== length - 1) output += '\n\n';
Expand All @@ -363,66 +370,84 @@ var common = {
forLoop: 'for(i; i < length; i++) {\n' + ' p = points[i];\n' + ' point = p[1];\n' + ' context.beginPath();\n\n'

// globals
+ ' if(p[2]) { \n' + '\tcontext.lineWidth = p[2][0];\n' + '\tcontext.strokeStyle = p[2][1];\n' + '\tcontext.fillStyle = p[2][2];\n'
+
' if(p[2]) { \n' + '\tcontext.lineWidth = p[2][0];\n' + '\tcontext.strokeStyle = p[2][1];\n' + '\tcontext.fillStyle = p[2][2];\n'

+ '\tcontext.globalAlpha = p[2][3];\n' + '\tcontext.globalCompositeOperation = p[2][4];\n' + '\tcontext.lineCap = p[2][5];\n' + '\tcontext.lineJoin = p[2][6];\n' + '\tcontext.font = p[2][7];\n' + ' }\n\n'
+
'\tcontext.globalAlpha = p[2][3];\n' + '\tcontext.globalCompositeOperation = p[2][4];\n' + '\tcontext.lineCap = p[2][5];\n' + '\tcontext.lineJoin = p[2][6];\n' + '\tcontext.font = p[2][7];\n' + ' }\n\n'

// line

+ ' if(p[0] === "line") { \n' + '\tcontext.moveTo(point[0], point[1]);\n' + '\tcontext.lineTo(point[2], point[3]);\n' + ' }\n\n'
+
' if(p[0] === "line") { \n' + '\tcontext.moveTo(point[0], point[1]);\n' + '\tcontext.lineTo(point[2], point[3]);\n' + ' }\n\n'

// arrow

+ ' if(p[0] === "arrow") { \n' + '\tdrawArrow(point[0], point[1], point[2], point[3], p[2]);\n' + ' }\n\n'
+
' if(p[0] === "arrow") { \n' + '\tdrawArrow(point[0], point[1], point[2], point[3], p[2]);\n' + ' }\n\n'

// pencil

+ ' if(p[0] === "pencil") { \n' + '\tcontext.moveTo(point[0], point[1]);\n' + '\tcontext.lineTo(point[2], point[3]);\n' + ' }\n\n'
+
' if(p[0] === "pencil") { \n' + '\tcontext.moveTo(point[0], point[1]);\n' + '\tcontext.lineTo(point[2], point[3]);\n' + ' }\n\n'

// marker

+ ' if(p[0] === "marker") { \n' + '\tcontext.moveTo(point[0], point[1]);\n' + '\tcontext.lineTo(point[2], point[3]);\n' + ' }\n\n'
+
' if(p[0] === "marker") { \n' + '\tcontext.moveTo(point[0], point[1]);\n' + '\tcontext.lineTo(point[2], point[3]);\n' + ' }\n\n'


// text

+ ' if(p[0] === "text") { \n' + '\tcontext.fillText(point[0], point[1], point[2]);\n' + ' }\n\n'
+
' if(p[0] === "text") { \n' + '\tcontext.fillText(point[0], point[1], point[2]);\n' + ' }\n\n'

// eraser

+ ' if(p[0] === "eraser") { \n' + '\tcontext.moveTo(point[0], point[1]);\n' + '\tcontext.lineTo(point[2], point[3]);\n' + ' }\n\n'
+
' if(p[0] === "eraser") { \n' + '\tcontext.moveTo(point[0], point[1]);\n' + '\tcontext.lineTo(point[2], point[3]);\n' + ' }\n\n'

// arc

+ ' if(p[0] === "arc") context.arc(point[0], point[1], point[2], point[3], 0, point[4]); \n\n'
+
' if(p[0] === "arc") context.arc(point[0], point[1], point[2], point[3], 0, point[4]); \n\n'

// rect

+ ' if(p[0] === "rect") {\n' + '\tcontext.strokeRect(point[0], point[1], point[2], point[3]);\n' + '\tcontext.fillRect(point[0], point[1], point[2], point[3]);\n'
+
' if(p[0] === "rect") {\n' + '\tcontext.strokeRect(point[0], point[1], point[2], point[3]);\n' + '\tcontext.fillRect(point[0], point[1], point[2], point[3]);\n'

+ ' }\n\n'
+
' }\n\n'

// quadratic

+ ' if(p[0] === "quadratic") {\n' + '\tcontext.moveTo(point[0], point[1]);\n' + '\tcontext.quadraticCurveTo(point[2], point[3], point[4], point[5]);\n' + ' }\n\n'
+
' if(p[0] === "quadratic") {\n' + '\tcontext.moveTo(point[0], point[1]);\n' + '\tcontext.quadraticCurveTo(point[2], point[3], point[4], point[5]);\n' + ' }\n\n'

// bezier

+ ' if(p[0] === "bezier") {\n' + '\tcontext.moveTo(point[0], point[1]);\n' + '\tcontext.bezierCurveTo(point[2], point[3], point[4], point[5], point[6], point[7]);\n' + ' }\n\n'
+
' if(p[0] === "bezier") {\n' + '\tcontext.moveTo(point[0], point[1]);\n' + '\tcontext.bezierCurveTo(point[2], point[3], point[4], point[5], point[6], point[7]);\n' + ' }\n\n'

// end-fill

+ ' context.stroke();\n' + ' context.fill();\n'
+
' context.stroke();\n' + ' context.fill();\n'

+ '}',
+
'}',

strokeFillText: '\n\nfunction strokeOrFill(lineWidth, strokeStyle, fillStyle, globalAlpha, globalCompositeOperation, lineCap, lineJoin, font) { \n' + ' if(lineWidth) { \n' + '\tcontext.globalAlpha = globalAlpha;\n' + '\tcontext.globalCompositeOperation = globalCompositeOperation;\n' + '\tcontext.lineCap = lineCap;\n' + '\tcontext.lineJoin = lineJoin;\n'

+ '\tcontext.lineWidth = lineWidth;\n' + '\tcontext.strokeStyle = strokeStyle;\n' + '\tcontext.fillStyle = fillStyle;\n' + '\tcontext.font = font;\n' + ' } \n\n'
+
'\tcontext.lineWidth = lineWidth;\n' + '\tcontext.strokeStyle = strokeStyle;\n' + '\tcontext.fillStyle = fillStyle;\n' + '\tcontext.font = font;\n' + ' } \n\n'

+ ' context.stroke();\n' + ' context.fill();\n'
+
' context.stroke();\n' + ' context.fill();\n'

+ '}',
+
'}',
strokeOrFill: function(p) {
if (!this.prevProps || this.prevProps !== p.join(',')) {
this.prevProps = p.join(',');
Expand Down
54 changes: 36 additions & 18 deletions dev/decorator.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,10 @@ var tools = {
};

if (params.tools) {
tools = JSON.parse(params.tools);
try {
var t = JSON.parse(params.tools);
tools = t;
} catch (e) {}
}

function setSelection(element, prop) {
Expand Down Expand Up @@ -304,17 +307,10 @@ window.addEventListener('load', function() {
} else document.getElementById('pencil-icon').style.display = 'none';

function decorateMarker() {

function hexToRGBA(h, alpha) {
return 'rgba(' + hexToRGB(h).join(',') + ',' + alpha + ')';
}

function doneHandler() {
markerContainer.style.display = 'none';

markerLineWidth = strokeStyleText.value;
markerStrokeStyle = hexToRGBA(fillStyleText.value, alpha);
}

var colors = [
['FFFFFF', '006600', '000099', 'CC0000', '8C4600'],
['CCCCCC', '00CC00', '6633CC', 'FF0000', 'B28500'],
Expand All @@ -339,18 +335,25 @@ window.addEventListener('load', function() {
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);

var html = '';

markerStrokeStyle = hexToRGBA(fillStyleText.value, alpha)

markerSelectedColor.style.backgroundColor =
markerSelectedColor2.style.backgroundColor = '#' + fillStyleText.value;

colors.forEach(function(colorRow) {
var row = '<tr>';

Expand All @@ -359,25 +362,28 @@ window.addEventListener('load', function() {
})
row += '</tr>';

html += row;
});

markerColorsList.innerHTML = html;
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;

doneHandler();

markerColorContainer.style.display = 'none';
});
});
})

// END INIT MARKER

Expand All @@ -391,7 +397,17 @@ window.addEventListener('load', function() {
fillStyleText.focus();
});

addEvent(btnMarkerDone, 'click', doneHandler);
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) {
Expand Down Expand Up @@ -714,10 +730,12 @@ 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 =
markerColorContainer.style.display =
markerContainer.style.display =
lineWidthContainer.style.display = 'none';
}
Loading

0 comments on commit 61221ee

Please sign in to comment.