diff --git a/resources/css/bcPaint.css b/resources/css/bcPaint.css
index 14b37c4..0483cce 100644
--- a/resources/css/bcPaint.css
+++ b/resources/css/bcPaint.css
@@ -5,8 +5,28 @@
cursor: pointer;
border-radius: 5px;
margin: 0 5px;
+ border: 1px #ccc solid;
}
+.bcPaint-palette-stroke {
+
+ background-color:#AAA;
+ display: inline-block;
+ margin: 2px;
+ border: 2px #ccc solid;
+ border-radius: 15px;
-#bcPaint-palette > .selected {
- border: 2px solid #343a40;
-}
\ No newline at end of file
+}
+#bcPaint-palette > .selectedColor {
+ border: 2px solid #777;
+}
+#bcPaint-palette > .selectedStroke {
+ border: 3px solid #777;
+}
+#bcPaint-palette {
+ width:1100px;
+}
+#bcPaint-canvas-container {
+ height:800px;
+ width:1100px;
+ border: 1px #ccc solid;
+}
diff --git a/resources/js/bcPaint.js b/resources/js/bcPaint.js
index db5058c..05157b4 100644
--- a/resources/js/bcPaint.js
+++ b/resources/js/bcPaint.js
@@ -3,41 +3,28 @@
* Copyright (c) 2018-2021 Alexandre Bobkov
* Licensed under MIT
* @author Alexandre Bobkov
- * @version 0.7.3
+ * @contributor Jeppe Bundsgaard
+ * @version 0.8
*/
-$(document).ready(function(){
- $('body').on('click', '.bcPaint-palette-color', function(){
- $(this).parent().find('.selected').removeClass('selected');
- $(this).addClass('selected');
- $.fn.bcPaint.setColor($(this).css('background-color'));
- });
-
- $('body').on('click', '#bcPaint-reset', function(){
- $.fn.bcPaint.clearCanvas();
- });
-
- $('body').on('click', '#bcPaint-export', function(){
- $.fn.bcPaint.export();
- });
-});
-
-
(function( $ ) {
/**
* Private variables
**/
var isDragged = false,
+ isEraser = false,
startPoint = { x:0, y:0 },
templates = {
container : $(''),
- palette : $('Color Palette
'),
+ palette : $(''),
color : $(''),
+ stroke : $(''),
canvasContainer : $(''),
canvasPane : $(''),
bottom : $(''),
buttonReset : $(''),
- buttonSave : $('')
+ buttonSave : $(''),
+ eraser : $('')
},
paintCanvas,
paintContext;
@@ -50,7 +37,9 @@ $(document).ready(function(){
return this.each(function () {
var rootElement = $(this),
colorSet = $.extend({}, $.fn.bcPaint.defaults, options),
+ strokeSet = $.extend({}, $.fn.bcPaint.defaults, options),
defaultColor = (rootElement.val().length > 0) ? rootElement.val() : colorSet.defaultColor,
+ defaultStroke = strokeSet.defaultStroke,
container = templates.container.clone(),
// header = templates.header.clone(),
palette = templates.palette.clone(),
@@ -59,7 +48,9 @@ $(document).ready(function(){
bottom = templates.bottom.clone(),
buttonReset = templates.buttonReset.clone(),
buttonSave = templates.buttonSave.clone(),
- color;
+ color,
+ stroke,
+ eraser = templates.eraser.clone();
// assembly pane
rootElement.append(container);
@@ -69,15 +60,26 @@ $(document).ready(function(){
container.append(bottom);
// header.append(palette);
canvasContainer.append(canvasPane);
- bottom.append(buttonReset);
- bottom.append(buttonSave);
+// bottom.append(buttonReset);
+// bottom.append(buttonSave);
// assembly color palette
$.each(colorSet.colors, function (i) {
color = templates.color.clone();
color.css('background-color', $.fn.bcPaint.toHex(colorSet.colors[i]));
+ color.attr('data-color',colorSet.colors[i])
palette.append(color);
});
+ $.each(strokeSet.strokes, function (i) {
+ stroke = templates.stroke.clone();
+ stroke.css('height', strokeSet.strokes[i]+"px"); //.find('.bcPaint-palette-stroke')
+ stroke.css('width', strokeSet.strokes[i]+"px");
+ stroke.attr('data-stroke',strokeSet.strokes[i])
+ palette.append(stroke);
+ });
+// eraser.css("float","right");
+ palette.append(eraser)
+
// set canvas pane width and height
var bcCanvas = rootElement.find('canvas');
@@ -91,6 +93,8 @@ $(document).ready(function(){
// set color
$.fn.bcPaint.setColor(defaultColor);
+ // set color
+ $.fn.bcPaint.setStroke(defaultStroke);
// bind mouse actions
paintCanvas.onmousedown = $.fn.bcPaint.onMouseDown;
@@ -124,6 +128,24 @@ $(document).ready(function(){
e.preventDefault();
}
}, false);
+
+ // Palette events
+ palette.on('click', '.bcPaint-palette-color', function(){
+ $.fn.bcPaint.setColor($(this).data('color'));
+ });
+ palette.on('click', '.bcPaint-palette-stroke', function(){
+ $.fn.bcPaint.setStroke($(this).data('stroke'));
+ });
+ palette.on('click', '#bcPaint-eraser', function(){
+ $.fn.bcPaint.setEraser()
+ });
+ palette.on('click', '#bcPaint-reset', function(){
+ $.fn.bcPaint.clearCanvas();
+ });
+ palette.on('click', '#bcPaint-export', function(){
+ $.fn.bcPaint.export();
+ });
+
});
}
@@ -131,7 +153,6 @@ $(document).ready(function(){
* Extend plugin
**/
$.extend(true, $.fn.bcPaint, {
-
/**
* Dispatch mouse event
*/
@@ -179,16 +200,41 @@ $(document).ready(function(){
**/
onMouseMove : function(e){
if(isDragged){
- paintContext.lineTo(e.offsetX, e.offsetY);
- paintContext.stroke();
+ if(isEraser) {
+ paintContext.clearRect(e.offsetX, e.offsetY,paintContext.lineWidth*2,paintContext.lineWidth*2);
+ }
+ else {
+ paintContext.lineTo(e.offsetX, e.offsetY);
+ paintContext.stroke();
+ }
}
},
/**
- * Set selected color
+ * Set selected color, disable eraser
**/
setColor : function(color){
+ $('.selectedColor').removeClass('selectedColor');
+ $('.bcPaint-palette-color[data-color="'+color+'"]').addClass('selectedColor');
paintContext.strokeStyle = $.fn.bcPaint.toHex(color);
+ isEraser=false
+ },
+ /**
+ * Set selected stroke
+ **/
+ setStroke : function(stroke){
+ $('.bcPaint-palette-stroke.selectedStroke').removeClass('selectedStroke');
+ $('.bcPaint-palette-stroke[data-stroke="'+stroke+'"]').addClass('selectedStroke');
+
+ paintContext.lineWidth = stroke;
+ },
+ /**
+ * enable eraser
+ **/
+ setEraser : function(){
+ $('.selectedColor').removeClass('selectedColor');
+ $('#bcPaint-eraser').addClass('selectedColor');
+ isEraser=!isEraser
},
/**
@@ -242,11 +288,13 @@ $(document).ready(function(){
// default color set
colors : [
'000000', '444444', '999999', 'DDDDDD', '#e83e8c', '#dc3545',
- '#fd7e14', '#ffc107', '#28a745', '#20c997', '#6f42c1', '#007bff'
+ '#fd7e14', '#ffc107', '#28a745', '#20c997', '#6f42c1', '#007bff','#FFFFFF'
],
// extend default set
addColors : [],
+ strokes : [ 1, 2, 4, 8, 16, 24],
+ defaultStroke : 2,
};
})(jQuery);