Skip to content

Commit

Permalink
Added [email protected] Now pencil also allows you select line-wi…
Browse files Browse the repository at this point in the history 
…dth or color.
  • Loading branch information
@muaz-khan
muaz-khan committed Nov 16, 2016
1 parent 519461c commit 8fb5deb
Show file tree
Hide file tree
Showing 14 changed files with 570 additions and 208 deletions.
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.2.0",
"version": "1.2.1",
"author": {
"name": "Muaz Khan",
"email": "[email protected]",
Expand Down
53 changes: 53 additions & 0 deletions dev/common.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,14 @@ 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;
Expand Down Expand Up @@ -585,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)
]
}
92 changes: 92 additions & 0 deletions dev/decorator.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -312,6 +312,19 @@ window.addEventListener('load', function() {
}

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;
Expand All @@ -325,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) {
Expand Down Expand Up @@ -756,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';
}
11 changes: 5 additions & 6 deletions dev/draw-helper.js
View file
Original file line number Diff line number Diff line change
@@ -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) {
Expand Down
17 changes: 15 additions & 2 deletions dev/events-handler.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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) {
Expand All @@ -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;
Expand Down Expand Up @@ -151,7 +162,7 @@ function onkeyup(e) {
points.length = points.length - 1;
drawHelper.redraw();

syncPoints(true);
syncPoints(is.isDragAllPaths || is.isDragLastPath ? true : false);
}
}

Expand All @@ -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
Expand Down
52 changes: 4 additions & 48 deletions dev/marker-handler.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,56 +44,12 @@ var markerHandler = {
}
}

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 markerLineWidth = 8,
markerGlobalAlpha = 0.1,
markerStrokeStyle = '#FF7373';
var markerLineWidth = document.getElementById('marker-stroke-style').value,
markerStrokeStyle = '#' + document.getElementById('marker-fill-style').value,
markerGlobalAlpha = 0.7;

var markerDrawHelper = clone(drawHelper);

markerDrawHelper.getOptions = function() {
return [markerLineWidth, markerStrokeStyle, fillStyle, globalAlpha, globalCompositeOperation, lineCap, lineJoin, font];
return [markerLineWidth, markerStrokeStyle, fillStyle, markerGlobalAlpha, globalCompositeOperation, lineCap, lineJoin, font];
}
19 changes: 14 additions & 5 deletions dev/pencil-handler.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,9 +16,9 @@ var pencilHandler = {
// make sure that pencil is drawing shapes even
// if mouse is down but mouse isn't moving
tempContext.lineCap = 'round';
drawHelper.line(tempContext, [t.prevX, t.prevY, x, y]);
pencilDrawHelper.line(tempContext, [t.prevX, t.prevY, x, y]);

points[points.length] = ['line', [t.prevX, t.prevY, x, y], drawHelper.getOptions()];
points[points.length] = ['line', [t.prevX, t.prevY, x, y], pencilDrawHelper.getOptions()];

t.prevX = x;
t.prevY = y;
Expand All @@ -34,12 +34,21 @@ var pencilHandler = {

if (t.ismousedown) {
tempContext.lineCap = 'round';
drawHelper.line(tempContext, [t.prevX, t.prevY, x, y]);
pencilDrawHelper.line(tempContext, [t.prevX, t.prevY, x, y]);

points[points.length] = ['line', [t.prevX, t.prevY, x, y], drawHelper.getOptions()];
points[points.length] = ['line', [t.prevX, t.prevY, x, y], pencilDrawHelper.getOptions()];

t.prevX = x;
t.prevY = y;
}
}
};
}

var pencilLineWidth = document.getElementById('pencil-stroke-style').value,
pencilStrokeStyle = '#' + document.getElementById('pencil-fill-style').value;

var pencilDrawHelper = clone(drawHelper);

pencilDrawHelper.getOptions = function() {
return [pencilLineWidth, pencilStrokeStyle, fillStyle, globalAlpha, globalCompositeOperation, lineCap, lineJoin, font];
}
2 changes: 1 addition & 1 deletion dev/share-drawings.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,7 @@ window.addEventListener('message', function(event) {
lastPointIndex = points.length;

// redraw the <canvas> surfaces
drawHelper.redraw(true);
drawHelper.redraw();
}, false);

function syncPoints(isSyncAll) {
Expand Down
Loading

0 comments on commit 8fb5deb

Please sign in to comment.