It seems you use an obsolete browser. Update it to start drawing.
", + stretchImg: false //when setting the canvas img, strech the image at the whole canvas size when this opt is true +}; + + + +DrawingBoard.Board.prototype = { + + mergeOptions: function(opts) { + opts = $.extend({}, DrawingBoard.Board.defaultOpts, opts); + if (!opts.background && opts.eraserColor === "background") + opts.eraserColor = "transparent"; + return opts; + }, + + /** + * Canvas reset/resize methods: put back the canvas to its default values + * + * depending on options, can set color, size, background back to default values + * and store the reseted canvas in webstorage and history queue + * + * resize values depend on the `enlargeYourContainer` option + */ + + reset: function(opts) { + opts = $.extend({ + color: this.opts.color, + size: this.opts.size, + webStorage: true, + history: true, + background: false + }, opts); + + this.setMode('pencil'); + + if (opts.background) { + this.resetBackground(this.opts.background, $.proxy(function() { + if (opts.history) this.saveHistory(); + }, this)); + } + + if (opts.color) this.setColor(opts.color); + if (opts.size) this.ctx.lineWidth = opts.size; + + this.ctx.lineCap = "round"; + this.ctx.lineJoin = "round"; + // this.ctx.clearRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.width); + + if (opts.webStorage) this.saveWebStorage(); + + // if opts.background we already dealt with the history + if (opts.history && !opts.background) this.saveHistory(); + + this.blankCanvas = this.getImg(); + + this.ev.trigger('board:reset', opts); + }, + + resetBackground: function(background, callback) { + background = background || this.opts.background; + + var bgIsColor = DrawingBoard.Utils.isColor(background); + var prevMode = this.getMode(); + this.setMode('pencil'); + this.ctx.clearRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height); + if (bgIsColor) { + this.ctx.fillStyle = background; + this.ctx.fillRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height); + this.history.initialize(this.getImg()); + if (callback) callback(); + } else if (background) + this.setImg(background, { + callback: $.proxy(function() { + this.history.initialize(this.getImg()); + if (callback) callback(); + }, this) + }); + this.setMode(prevMode); + }, + + resize: function() { + this.dom.$controls.toggleClass('drawing-board-controls-hidden', (!this.controls || !this.controls.length)); + + var canvasWidth, canvasHeight; + var widths = [ + this.$el.width(), + DrawingBoard.Utils.boxBorderWidth(this.$el), + DrawingBoard.Utils.boxBorderWidth(this.dom.$canvasWrapper, true, true) + ]; + var heights = [ + this.$el.height(), + DrawingBoard.Utils.boxBorderHeight(this.$el), + this.dom.$controls.height(), + DrawingBoard.Utils.boxBorderHeight(this.dom.$controls, false, true), + DrawingBoard.Utils.boxBorderHeight(this.dom.$canvasWrapper, true, true) + ]; + var that = this; + var sum = function(values, multiplier) { //make the sum of all array values + multiplier = multiplier || 1; + var res = values[0]; + for (var i = 1; i < values.length; i++) { + res = res + (values[i]*multiplier); + } + return res; + }; + var sub = function(values) { return sum(values, -1); }; //substract all array values from the first one + + if (this.opts.enlargeYourContainer) { + canvasWidth = this.$el.width(); + canvasHeight = this.$el.height(); + + this.$el.width( sum(widths) ); + this.$el.height( sum(heights) ); + } else { + canvasWidth = sub(widths); + canvasHeight = sub(heights); + } + + this.dom.$canvasWrapper.css('width', canvasWidth + 'px'); + this.dom.$canvasWrapper.css('height', canvasHeight + 'px'); + + this.dom.$canvas.css('width', canvasWidth + 'px'); + this.dom.$canvas.css('height', canvasHeight + 'px'); + + this.canvas.width = canvasWidth; + this.canvas.height = canvasHeight; + }, + + + + /** + * Controls: + * the drawing board can has various UI elements to control it. + * one control is represented by a class in the namespace DrawingBoard.Control + * it must have a $el property (jQuery object), representing the html element to append on the drawing board at initialization. + * + */ + + initControls: function() { + this.controls = []; + if (!this.opts.controls.length || !DrawingBoard.Control) return false; + for (var i = 0; i < this.opts.controls.length; i++) { + var c = null; + if (typeof this.opts.controls[i] == "string") + c = new window['DrawingBoard']['Control'][this.opts.controls[i]](this); + else if (typeof this.opts.controls[i] == "object") { + for (var controlName in this.opts.controls[i]) break; + c = new window['DrawingBoard']['Control'][controlName](this, this.opts.controls[i][controlName]); + } + if (c) { + this.addControl(c); + } + } + }, + + //add a new control or an existing one at the position you want in the UI + //to add a totally new control, you can pass a string with the js class as 1st parameter and control options as 2nd ie "addControl('Navigation', { reset: false }" + //the last parameter (2nd or 3rd depending on the situation) is always the position you want to place the control at + addControl: function(control, optsOrPos, pos) { + if (typeof control !== "string" && (typeof control !== "object" || !control instanceof DrawingBoard.Control)) + return false; + + var opts = typeof optsOrPos == "object" ? optsOrPos : {}; + pos = pos ? pos*1 : (typeof optsOrPos == "number" ? optsOrPos : null); + + if (typeof control == "string") + control = new window['DrawingBoard']['Control'][control](this, opts); + + if (pos) + this.dom.$controls.children().eq(pos).before(control.$el); + else + this.dom.$controls.append(control.$el); + + if (!this.controls) + this.controls = []; + this.controls.push(control); + this.dom.$controls.removeClass('drawing-board-controls-hidden'); + }, + + + + /** + * History methods: undo and redo drawed lines + */ + + initHistory: function() { + this.history = new SimpleUndo({ + maxLength: 30, + provider: $.proxy(function(done) { + done(this.getImg()); + }, this), + onUpdate: $.proxy(function() { + this.ev.trigger('historyNavigation'); + }, this) + }); + }, + + saveHistory: function() { + this.history.save(); + }, + + restoreHistory: function(image) { + this.setImg(image, { + callback: $.proxy(function() { + this.saveWebStorage(); + }, this) + }); + }, + + goBackInHistory: function() { + this.history.undo($.proxy(this.restoreHistory, this)); + }, + + goForthInHistory: function() { + this.history.redo($.proxy(this.restoreHistory, this)); + }, + + /** + * Image methods: you can directly put an image on the canvas, get it in base64 data url or start a download + */ + + setImg: function(src, opts) { + opts = $.extend({ + stretch: this.opts.stretchImg, + callback: null + }, opts); + + var ctx = this.ctx; + var img = new Image(); + var oldGCO = ctx.globalCompositeOperation; + img.onload = function() { + ctx.globalCompositeOperation = "source-over"; + ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); + + if (opts.stretch) { + ctx.drawImage(img, 0, 0, ctx.canvas.width, ctx.canvas.height); + } else { + ctx.drawImage(img, 0, 0); + } + + ctx.globalCompositeOperation = oldGCO; + + if (opts.callback) { + opts.callback(); + } + }; + img.src = src; + }, + + getImg: function() { + return this.canvas.toDataURL("image/png"); + }, + + downloadImg: function() { + var img = this.getImg(); + img = img.replace("image/png", "image/octet-stream"); + window.location.href = img; + }, + + + + /** + * WebStorage handling : save and restore to local or session storage + */ + + saveWebStorage: function() { + if (window[this.storage]) { + window[this.storage].setItem('drawing-board-' + this.id, this.getImg()); + this.ev.trigger('board:save' + this.storage.charAt(0).toUpperCase() + this.storage.slice(1), this.getImg()); + } + }, + + restoreWebStorage: function() { + if (window[this.storage] && window[this.storage].getItem('drawing-board-' + this.id) !== null) { + this.setImg(window[this.storage].getItem('drawing-board-' + this.id)); + this.ev.trigger('board:restore' + this.storage.charAt(0).toUpperCase() + this.storage.slice(1), window[this.storage].getItem('drawing-board-' + this.id)); + } + }, + + clearWebStorage: function() { + if (window[this.storage] && window[this.storage].getItem('drawing-board-' + this.id) !== null) { + window[this.storage].removeItem('drawing-board-' + this.id); + this.ev.trigger('board:clear' + this.storage.charAt(0).toUpperCase() + this.storage.slice(1)); + } + }, + + _getStorage: function() { + if (!this.opts.webStorage || !(this.opts.webStorage === 'session' || this.opts.webStorage === 'local')) return false; + return this.opts.webStorage + 'Storage'; + }, + + + + /** + * Drop an image on the canvas to draw on it + */ + + initDropEvents: function() { + if (!this.opts.droppable) + return false; + + this.dom.$canvas.on('dragover dragenter drop', function(e) { + e.stopPropagation(); + e.preventDefault(); + }); + + this.dom.$canvas.on('drop', $.proxy(this._onCanvasDrop, this)); + }, + + _onCanvasDrop: function(e) { + e = e.originalEvent ? e.originalEvent : e; + var files = e.dataTransfer.files; + if (!files || !files.length || files[0].type.indexOf('image') == -1 || !window.FileReader) + return false; + var fr = new FileReader(); + fr.readAsDataURL(files[0]); + fr.onload = $.proxy(function(ev) { + this.setImg(ev.target.result, { + callback: $.proxy(function() { + this.saveHistory(); + }, this) + }); + this.ev.trigger('board:imageDropped', ev.target.result); + this.ev.trigger('board:userAction'); + }, this); + }, + + + + /** + * set and get current drawing mode + * + * possible modes are "pencil" (draw normally), "eraser" (draw transparent, like, erase, you know), "filler" (paint can) + */ + + setMode: function(newMode, silent) { + silent = silent || false; + newMode = newMode || 'pencil'; + + this.ev.unbind('board:startDrawing', $.proxy(this.fill, this)); + + if (this.opts.eraserColor === "transparent") + this.ctx.globalCompositeOperation = newMode === "eraser" ? "destination-out" : "source-over"; + else { + if (newMode === "eraser") { + if (this.opts.eraserColor === "background" && DrawingBoard.Utils.isColor(this.opts.background)) + this.ctx.strokeStyle = this.opts.background; + else if (DrawingBoard.Utils.isColor(this.opts.eraserColor)) + this.ctx.strokeStyle = this.opts.eraserColor; + } else if (!this.mode || this.mode === "eraser") { + this.ctx.strokeStyle = this.color; + } + + if (newMode === "filler") + this.ev.bind('board:startDrawing', $.proxy(this.fill, this)); + } + this.mode = newMode; + if (!silent) + this.ev.trigger('board:mode', this.mode); + }, + + getMode: function() { + return this.mode || "pencil"; + }, + + setColor: function(color) { + var that = this; + color = color || this.color; + if (!DrawingBoard.Utils.isColor(color)) + return false; + this.color = color; + if (this.opts.eraserColor !== "transparent" && this.mode === "eraser") { + var setStrokeStyle = function(mode) { + if (mode !== "eraser") + that.strokeStyle = that.color; + that.ev.unbind('board:mode', setStrokeStyle); + }; + this.ev.bind('board:mode', setStrokeStyle); + } else + this.ctx.strokeStyle = this.color; + }, + + /** + * Fills an area with the current stroke color. + */ + fill: function(e) { + if (this.getImg() === this.blankCanvas) { + this.ctx.clearRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height); + this.ctx.fillStyle = this.color; + this.ctx.fillRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height); + return; + } + + var img = this.ctx.getImageData(0, 0, this.canvas.width, this.canvas.height); + + // constants identifying pixels components + var INDEX = 0, X = 1, Y = 2, COLOR = 3; + + // target color components + var stroke = this.ctx.strokeStyle; + var r = parseInt(stroke.substr(1, 2), 16); + var g = parseInt(stroke.substr(3, 2), 16); + var b = parseInt(stroke.substr(5, 2), 16); + + // starting point + var start = DrawingBoard.Utils.pixelAt(img, parseInt(e.coords.x, 10), parseInt(e.coords.y, 10)); + var startColor = start[COLOR]; + var tolerance = this.opts.fillTolerance; + var useHack = this.opts.fillHack; //see https://github.com/Leimi/drawingboard.js/pull/38 + + // no need to continue if starting and target colors are the same + if (DrawingBoard.Utils.compareColors(startColor, DrawingBoard.Utils.RGBToInt(r, g, b), tolerance)) + return; + + // pixels to evaluate + var queue = [start]; + + // loop vars + var pixel, x, y; + var maxX = img.width - 1; + var maxY = img.height - 1; + + function updatePixelColor(pixel) { + img.data[pixel[INDEX]] = r; + img.data[pixel[INDEX] + 1] = g; + img.data[pixel[INDEX] + 2] = b; + } + + while ((pixel = queue.pop())) { + if (useHack) + updatePixelColor(pixel); + + if (DrawingBoard.Utils.compareColors(pixel[COLOR], startColor, tolerance)) { + if (!useHack) + updatePixelColor(pixel); + if (pixel[X] > 0) // west + queue.push(DrawingBoard.Utils.pixelAt(img, pixel[X] - 1, pixel[Y])); + if (pixel[X] < maxX) // east + queue.push(DrawingBoard.Utils.pixelAt(img, pixel[X] + 1, pixel[Y])); + if (pixel[Y] > 0) // north + queue.push(DrawingBoard.Utils.pixelAt(img, pixel[X], pixel[Y] - 1)); + if (pixel[Y] < maxY) // south + queue.push(DrawingBoard.Utils.pixelAt(img, pixel[X], pixel[Y] + 1)); + } + } + + this.ctx.putImageData(img, 0, 0); + }, + + + /** + * Drawing handling, with mouse or touch + */ + + initDrawEvents: function() { + this.isDrawing = false; + this.isMouseHovering = false; + this.coords = {}; + this.coords.old = this.coords.current = this.coords.oldMid = { x: 0, y: 0 }; + + this.dom.$canvas.on('mousedown touchstart', $.proxy(function(e) { + this._onInputStart(e, this._getInputCoords(e) ); + }, this)); + + this.dom.$canvas.on('mousemove touchmove', $.proxy(function(e) { + this._onInputMove(e, this._getInputCoords(e) ); + }, this)); + + this.dom.$canvas.on('mousemove', $.proxy(function(e) { + + }, this)); + + this.dom.$canvas.on('mouseup touchend', $.proxy(function(e) { + this._onInputStop(e, this._getInputCoords(e) ); + }, this)); + + this.dom.$canvas.on('mouseover', $.proxy(function(e) { + this._onMouseOver(e, this._getInputCoords(e) ); + }, this)); + + this.dom.$canvas.on('mouseout', $.proxy(function(e) { + this._onMouseOut(e, this._getInputCoords(e) ); + + }, this)); + + $('body').on('mouseup touchend', $.proxy(function(e) { + this.isDrawing = false; + }, this)); + + if (window.requestAnimationFrame) requestAnimationFrame( $.proxy(this.draw, this) ); + }, + + draw: function() { + //if the pencil size is big (>10), the small crosshair makes a friend: a circle of the size of the pencil + //todo: have the circle works on every browser - it currently should be added only when CSS pointer-events are supported + //we assume that if requestAnimationFrame is supported, pointer-events is too, but this is terribad. + if (window.requestAnimationFrame && this.ctx.lineWidth > 10 && this.isMouseHovering) { + this.dom.$cursor.css({ width: this.ctx.lineWidth + 'px', height: this.ctx.lineWidth + 'px' }); + var transform = DrawingBoard.Utils.tpl("translateX({{x}}px) translateY({{y}}px)", { x: this.coords.current.x-(this.ctx.lineWidth/2), y: this.coords.current.y-(this.ctx.lineWidth/2) }); + this.dom.$cursor.css({ 'transform': transform, '-webkit-transform': transform, '-ms-transform': transform }); + this.dom.$cursor.removeClass('drawing-board-utils-hidden'); + } else { + this.dom.$cursor.addClass('drawing-board-utils-hidden'); + } + + if (this.isDrawing) { + var currentMid = this._getMidInputCoords(this.coords.current); + this.ctx.beginPath(); + this.ctx.moveTo(currentMid.x, currentMid.y); + this.ctx.quadraticCurveTo(this.coords.old.x, this.coords.old.y, this.coords.oldMid.x, this.coords.oldMid.y); + this.ctx.stroke(); + + this.coords.old = this.coords.current; + this.coords.oldMid = currentMid; + } + + if (window.requestAnimationFrame) requestAnimationFrame( $.proxy(function() { this.draw(); }, this) ); + }, + + _onInputStart: function(e, coords) { + this.coords.current = this.coords.old = coords; + this.coords.oldMid = this._getMidInputCoords(coords); + this.isDrawing = true; + + if (!window.requestAnimationFrame) this.draw(); + + this.ev.trigger('board:startDrawing', {e: e, coords: coords}); + e.stopPropagation(); + e.preventDefault(); + }, + + _onInputMove: function(e, coords) { + this.coords.current = coords; + this.ev.trigger('board:drawing', {e: e, coords: coords}); + + if (!window.requestAnimationFrame) this.draw(); + + e.stopPropagation(); + e.preventDefault(); + }, + + _onInputStop: function(e, coords) { + if (this.isDrawing && (!e.touches || e.touches.length === 0)) { + this.isDrawing = false; + + this.saveWebStorage(); + this.saveHistory(); + + this.ev.trigger('board:stopDrawing', {e: e, coords: coords}); + this.ev.trigger('board:userAction'); + e.stopPropagation(); + e.preventDefault(); + } + }, + + _onMouseOver: function(e, coords) { + this.isMouseHovering = true; + this.coords.old = this._getInputCoords(e); + this.coords.oldMid = this._getMidInputCoords(this.coords.old); + + this.ev.trigger('board:mouseOver', {e: e, coords: coords}); + }, + + _onMouseOut: function(e, coords) { + this.isMouseHovering = false; + + this.ev.trigger('board:mouseOut', {e: e, coords: coords}); + }, + + _getInputCoords: function(e) { + e = e.originalEvent ? e.originalEvent : e; + var + rect = this.canvas.getBoundingClientRect(), + width = this.dom.$canvas.width(), + height = this.dom.$canvas.height() + ; + var x, y; + if (e.touches && e.touches.length == 1) { + x = e.touches[0].pageX; + y = e.touches[0].pageY; + } else { + x = e.pageX; + y = e.pageY; + } + x = x - this.dom.$canvas.offset().left; + y = y - this.dom.$canvas.offset().top; + x *= (width / rect.width); + y *= (height / rect.height); + return { + x: x, + y: y + }; + }, + + _getMidInputCoords: function(coords) { + return { + x: this.coords.old.x + coords.x>>1, + y: this.coords.old.y + coords.y>>1 + }; + } +}; + +DrawingBoard.Control = function(drawingBoard, opts) { + this.board = drawingBoard; + this.opts = $.extend({}, this.defaults, opts); + + this.$el = $(document.createElement('div')).addClass('drawing-board-control'); + if (this.name) + this.$el.addClass('drawing-board-control-' + this.name); + + this.board.ev.bind('board:reset', $.proxy(this.onBoardReset, this)); + + this.initialize.apply(this, arguments); + return this; +}; + +DrawingBoard.Control.prototype = { + + name: '', + + defaults: {}, + + initialize: function() { + + }, + + addToBoard: function() { + this.board.addControl(this); + }, + + onBoardReset: function(opts) { + + } + +}; + +//extend directly taken from backbone.js +DrawingBoard.Control.extend = function(protoProps, staticProps) { + var parent = this; + var child; + if (protoProps && protoProps.hasOwnProperty('constructor')) { + child = protoProps.constructor; + } else { + child = function(){ return parent.apply(this, arguments); }; + } + $.extend(child, parent, staticProps); + var Surrogate = function(){ this.constructor = child; }; + Surrogate.prototype = parent.prototype; + child.prototype = new Surrogate(); + if (protoProps) $.extend(child.prototype, protoProps); + child.__super__ = parent.prototype; + return child; +}; +DrawingBoard.Control.Color = DrawingBoard.Control.extend({ + name: 'colors', + + initialize: function() { + this.initTemplate(); + + var that = this; + this.$el.on('click', '.drawing-board-control-colors-picker', function(e) { + var color = $(this).attr('data-color'); + that.board.setColor(color); + that.$el.find('.drawing-board-control-colors-current') + .css('background-color', color) + .attr('data-color', color); + + that.board.ev.trigger('color:changed', color); + that.$el.find('.drawing-board-control-colors-rainbows').addClass('drawing-board-utils-hidden'); + + e.preventDefault(); + }); + + this.$el.on('click', '.drawing-board-control-colors-current', function(e) { + that.$el.find('.drawing-board-control-colors-rainbows').toggleClass('drawing-board-utils-hidden'); + e.preventDefault(); + }); + + $('body').on('click', function(e) { + var $target = $(e.target); + var $relatedButton = $target.hasClass('drawing-board-control-colors-current') ? $target : $target.closest('.drawing-board-control-colors-current'); + var $myButton = that.$el.find('.drawing-board-control-colors-current'); + var $popup = that.$el.find('.drawing-board-control-colors-rainbows'); + if ( (!$relatedButton.length || $relatedButton.get(0) !== $myButton.get(0)) && !$popup.hasClass('drawing-board-utils-hidden') ) + $popup.addClass('drawing-board-utils-hidden'); + }); + }, + + initTemplate: function() { + var tpl = 'It seems you use an obsolete browser. Update it to start drawing.
',stretchImg:!1},DrawingBoard.Board.prototype={mergeOptions:function(a){return a=$.extend({},DrawingBoard.Board.defaultOpts,a),a.background||"background"!==a.eraserColor||(a.eraserColor="transparent"),a},reset:function(a){a=$.extend({color:this.opts.color,size:this.opts.size,webStorage:!0,history:!0,background:!1},a),this.setMode("pencil"),a.background&&this.resetBackground(this.opts.background,$.proxy(function(){a.history&&this.saveHistory()},this)),a.color&&this.setColor(a.color),a.size&&(this.ctx.lineWidth=a.size),this.ctx.lineCap="round",this.ctx.lineJoin="round",a.webStorage&&this.saveWebStorage(),a.history&&!a.background&&this.saveHistory(),this.blankCanvas=this.getImg(),this.ev.trigger("board:reset",a)},resetBackground:function(a,b){a=a||this.opts.background;var c=DrawingBoard.Utils.isColor(a),d=this.getMode();this.setMode("pencil"),this.ctx.clearRect(0,0,this.ctx.canvas.width,this.ctx.canvas.height),c?(this.ctx.fillStyle=a,this.ctx.fillRect(0,0,this.ctx.canvas.width,this.ctx.canvas.height),this.history.initialize(this.getImg()),b&&b()):a&&this.setImg(a,{callback:$.proxy(function(){this.history.initialize(this.getImg()),b&&b()},this)}),this.setMode(d)},resize:function(){this.dom.$controls.toggleClass("drawing-board-controls-hidden",!this.controls||!this.controls.length);var a,b,c=[this.$el.width(),DrawingBoard.Utils.boxBorderWidth(this.$el),DrawingBoard.Utils.boxBorderWidth(this.dom.$canvasWrapper,!0,!0)],d=[this.$el.height(),DrawingBoard.Utils.boxBorderHeight(this.$el),this.dom.$controls.height(),DrawingBoard.Utils.boxBorderHeight(this.dom.$controls,!1,!0),DrawingBoard.Utils.boxBorderHeight(this.dom.$canvasWrapper,!0,!0)],e=function(a,b){b=b||1;for(var c=a[0],d=1;dIt seems you use an obsolete browser. Update it to start drawing.
", + stretchImg: false //when setting the canvas img, strech the image at the whole canvas size when this opt is true +}; + + + +DrawingBoard.Board.prototype = { + + mergeOptions: function(opts) { + opts = $.extend({}, DrawingBoard.Board.defaultOpts, opts); + if (!opts.background && opts.eraserColor === "background") + opts.eraserColor = "transparent"; + return opts; + }, + + /** + * Canvas reset/resize methods: put back the canvas to its default values + * + * depending on options, can set color, size, background back to default values + * and store the reseted canvas in webstorage and history queue + * + * resize values depend on the `enlargeYourContainer` option + */ + + reset: function(opts) { + opts = $.extend({ + color: this.opts.color, + size: this.opts.size, + webStorage: true, + history: true, + background: false + }, opts); + + this.setMode('pencil'); + + if (opts.background) { + this.resetBackground(this.opts.background, $.proxy(function() { + if (opts.history) this.saveHistory(); + }, this)); + } + + if (opts.color) this.setColor(opts.color); + if (opts.size) this.ctx.lineWidth = opts.size; + + this.ctx.lineCap = "round"; + this.ctx.lineJoin = "round"; + // this.ctx.clearRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.width); + + if (opts.webStorage) this.saveWebStorage(); + + // if opts.background we already dealt with the history + if (opts.history && !opts.background) this.saveHistory(); + + this.blankCanvas = this.getImg(); + + this.ev.trigger('board:reset', opts); + }, + + resetBackground: function(background, callback) { + background = background || this.opts.background; + + var bgIsColor = DrawingBoard.Utils.isColor(background); + var prevMode = this.getMode(); + this.setMode('pencil'); + this.ctx.clearRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height); + if (bgIsColor) { + this.ctx.fillStyle = background; + this.ctx.fillRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height); + this.history.initialize(this.getImg()); + if (callback) callback(); + } else if (background) + this.setImg(background, { + callback: $.proxy(function() { + this.history.initialize(this.getImg()); + if (callback) callback(); + }, this) + }); + this.setMode(prevMode); + }, + + resize: function() { + this.dom.$controls.toggleClass('drawing-board-controls-hidden', (!this.controls || !this.controls.length)); + + var canvasWidth, canvasHeight; + var widths = [ + this.$el.width(), + DrawingBoard.Utils.boxBorderWidth(this.$el), + DrawingBoard.Utils.boxBorderWidth(this.dom.$canvasWrapper, true, true) + ]; + var heights = [ + this.$el.height(), + DrawingBoard.Utils.boxBorderHeight(this.$el), + this.dom.$controls.height(), + DrawingBoard.Utils.boxBorderHeight(this.dom.$controls, false, true), + DrawingBoard.Utils.boxBorderHeight(this.dom.$canvasWrapper, true, true) + ]; + var that = this; + var sum = function(values, multiplier) { //make the sum of all array values + multiplier = multiplier || 1; + var res = values[0]; + for (var i = 1; i < values.length; i++) { + res = res + (values[i]*multiplier); + } + return res; + }; + var sub = function(values) { return sum(values, -1); }; //substract all array values from the first one + + if (this.opts.enlargeYourContainer) { + canvasWidth = this.$el.width(); + canvasHeight = this.$el.height(); + + this.$el.width( sum(widths) ); + this.$el.height( sum(heights) ); + } else { + canvasWidth = sub(widths); + canvasHeight = sub(heights); + } + + this.dom.$canvasWrapper.css('width', canvasWidth + 'px'); + this.dom.$canvasWrapper.css('height', canvasHeight + 'px'); + + this.dom.$canvas.css('width', canvasWidth + 'px'); + this.dom.$canvas.css('height', canvasHeight + 'px'); + + this.canvas.width = canvasWidth; + this.canvas.height = canvasHeight; + }, + + + + /** + * Controls: + * the drawing board can has various UI elements to control it. + * one control is represented by a class in the namespace DrawingBoard.Control + * it must have a $el property (jQuery object), representing the html element to append on the drawing board at initialization. + * + */ + + initControls: function() { + this.controls = []; + if (!this.opts.controls.length || !DrawingBoard.Control) return false; + for (var i = 0; i < this.opts.controls.length; i++) { + var c = null; + if (typeof this.opts.controls[i] == "string") + c = new window['DrawingBoard']['Control'][this.opts.controls[i]](this); + else if (typeof this.opts.controls[i] == "object") { + for (var controlName in this.opts.controls[i]) break; + c = new window['DrawingBoard']['Control'][controlName](this, this.opts.controls[i][controlName]); + } + if (c) { + this.addControl(c); + } + } + }, + + //add a new control or an existing one at the position you want in the UI + //to add a totally new control, you can pass a string with the js class as 1st parameter and control options as 2nd ie "addControl('Navigation', { reset: false }" + //the last parameter (2nd or 3rd depending on the situation) is always the position you want to place the control at + addControl: function(control, optsOrPos, pos) { + if (typeof control !== "string" && (typeof control !== "object" || !control instanceof DrawingBoard.Control)) + return false; + + var opts = typeof optsOrPos == "object" ? optsOrPos : {}; + pos = pos ? pos*1 : (typeof optsOrPos == "number" ? optsOrPos : null); + + if (typeof control == "string") + control = new window['DrawingBoard']['Control'][control](this, opts); + + if (pos) + this.dom.$controls.children().eq(pos).before(control.$el); + else + this.dom.$controls.append(control.$el); + + if (!this.controls) + this.controls = []; + this.controls.push(control); + this.dom.$controls.removeClass('drawing-board-controls-hidden'); + }, + + + + /** + * History methods: undo and redo drawed lines + */ + + initHistory: function() { + this.history = new SimpleUndo({ + maxLength: 30, + provider: $.proxy(function(done) { + done(this.getImg()); + }, this), + onUpdate: $.proxy(function() { + this.ev.trigger('historyNavigation'); + }, this) + }); + }, + + saveHistory: function() { + this.history.save(); + }, + + restoreHistory: function(image) { + this.setImg(image, { + callback: $.proxy(function() { + this.saveWebStorage(); + }, this) + }); + }, + + goBackInHistory: function() { + this.history.undo($.proxy(this.restoreHistory, this)); + }, + + goForthInHistory: function() { + this.history.redo($.proxy(this.restoreHistory, this)); + }, + + /** + * Image methods: you can directly put an image on the canvas, get it in base64 data url or start a download + */ + + setImg: function(src, opts) { + opts = $.extend({ + stretch: this.opts.stretchImg, + callback: null + }, opts); + + var ctx = this.ctx; + var img = new Image(); + var oldGCO = ctx.globalCompositeOperation; + img.onload = function() { + ctx.globalCompositeOperation = "source-over"; + ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); + + if (opts.stretch) { + ctx.drawImage(img, 0, 0, ctx.canvas.width, ctx.canvas.height); + } else { + ctx.drawImage(img, 0, 0); + } + + ctx.globalCompositeOperation = oldGCO; + + if (opts.callback) { + opts.callback(); + } + }; + img.src = src; + }, + + getImg: function() { + return this.canvas.toDataURL("image/png"); + }, + + downloadImg: function() { + var img = this.getImg(); + img = img.replace("image/png", "image/octet-stream"); + window.location.href = img; + }, + + + + /** + * WebStorage handling : save and restore to local or session storage + */ + + saveWebStorage: function() { + if (window[this.storage]) { + window[this.storage].setItem('drawing-board-' + this.id, this.getImg()); + this.ev.trigger('board:save' + this.storage.charAt(0).toUpperCase() + this.storage.slice(1), this.getImg()); + } + }, + + restoreWebStorage: function() { + if (window[this.storage] && window[this.storage].getItem('drawing-board-' + this.id) !== null) { + this.setImg(window[this.storage].getItem('drawing-board-' + this.id)); + this.ev.trigger('board:restore' + this.storage.charAt(0).toUpperCase() + this.storage.slice(1), window[this.storage].getItem('drawing-board-' + this.id)); + } + }, + + clearWebStorage: function() { + if (window[this.storage] && window[this.storage].getItem('drawing-board-' + this.id) !== null) { + window[this.storage].removeItem('drawing-board-' + this.id); + this.ev.trigger('board:clear' + this.storage.charAt(0).toUpperCase() + this.storage.slice(1)); + } + }, + + _getStorage: function() { + if (!this.opts.webStorage || !(this.opts.webStorage === 'session' || this.opts.webStorage === 'local')) return false; + return this.opts.webStorage + 'Storage'; + }, + + + + /** + * Drop an image on the canvas to draw on it + */ + + initDropEvents: function() { + if (!this.opts.droppable) + return false; + + this.dom.$canvas.on('dragover dragenter drop', function(e) { + e.stopPropagation(); + e.preventDefault(); + }); + + this.dom.$canvas.on('drop', $.proxy(this._onCanvasDrop, this)); + }, + + _onCanvasDrop: function(e) { + e = e.originalEvent ? e.originalEvent : e; + var files = e.dataTransfer.files; + if (!files || !files.length || files[0].type.indexOf('image') == -1 || !window.FileReader) + return false; + var fr = new FileReader(); + fr.readAsDataURL(files[0]); + fr.onload = $.proxy(function(ev) { + this.setImg(ev.target.result, { + callback: $.proxy(function() { + this.saveHistory(); + }, this) + }); + this.ev.trigger('board:imageDropped', ev.target.result); + this.ev.trigger('board:userAction'); + }, this); + }, + + + + /** + * set and get current drawing mode + * + * possible modes are "pencil" (draw normally), "eraser" (draw transparent, like, erase, you know), "filler" (paint can) + */ + + setMode: function(newMode, silent) { + silent = silent || false; + newMode = newMode || 'pencil'; + + this.ev.unbind('board:startDrawing', $.proxy(this.fill, this)); + + if (this.opts.eraserColor === "transparent") + this.ctx.globalCompositeOperation = newMode === "eraser" ? "destination-out" : "source-over"; + else { + if (newMode === "eraser") { + if (this.opts.eraserColor === "background" && DrawingBoard.Utils.isColor(this.opts.background)) + this.ctx.strokeStyle = this.opts.background; + else if (DrawingBoard.Utils.isColor(this.opts.eraserColor)) + this.ctx.strokeStyle = this.opts.eraserColor; + } else if (!this.mode || this.mode === "eraser") { + this.ctx.strokeStyle = this.color; + } + + if (newMode === "filler") + this.ev.bind('board:startDrawing', $.proxy(this.fill, this)); + } + this.mode = newMode; + if (!silent) + this.ev.trigger('board:mode', this.mode); + }, + + getMode: function() { + return this.mode || "pencil"; + }, + + setColor: function(color) { + var that = this; + color = color || this.color; + if (!DrawingBoard.Utils.isColor(color)) + return false; + this.color = color; + if (this.opts.eraserColor !== "transparent" && this.mode === "eraser") { + var setStrokeStyle = function(mode) { + if (mode !== "eraser") + that.strokeStyle = that.color; + that.ev.unbind('board:mode', setStrokeStyle); + }; + this.ev.bind('board:mode', setStrokeStyle); + } else + this.ctx.strokeStyle = this.color; + }, + + /** + * Fills an area with the current stroke color. + */ + fill: function(e) { + if (this.getImg() === this.blankCanvas) { + this.ctx.clearRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height); + this.ctx.fillStyle = this.color; + this.ctx.fillRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height); + return; + } + + var img = this.ctx.getImageData(0, 0, this.canvas.width, this.canvas.height); + + // constants identifying pixels components + var INDEX = 0, X = 1, Y = 2, COLOR = 3; + + // target color components + var stroke = this.ctx.strokeStyle; + var r = parseInt(stroke.substr(1, 2), 16); + var g = parseInt(stroke.substr(3, 2), 16); + var b = parseInt(stroke.substr(5, 2), 16); + + // starting point + var start = DrawingBoard.Utils.pixelAt(img, parseInt(e.coords.x, 10), parseInt(e.coords.y, 10)); + var startColor = start[COLOR]; + var tolerance = this.opts.fillTolerance; + var useHack = this.opts.fillHack; //see https://github.com/Leimi/drawingboard.js/pull/38 + + // no need to continue if starting and target colors are the same + if (DrawingBoard.Utils.compareColors(startColor, DrawingBoard.Utils.RGBToInt(r, g, b), tolerance)) + return; + + // pixels to evaluate + var queue = [start]; + + // loop vars + var pixel, x, y; + var maxX = img.width - 1; + var maxY = img.height - 1; + + function updatePixelColor(pixel) { + img.data[pixel[INDEX]] = r; + img.data[pixel[INDEX] + 1] = g; + img.data[pixel[INDEX] + 2] = b; + } + + while ((pixel = queue.pop())) { + if (useHack) + updatePixelColor(pixel); + + if (DrawingBoard.Utils.compareColors(pixel[COLOR], startColor, tolerance)) { + if (!useHack) + updatePixelColor(pixel); + if (pixel[X] > 0) // west + queue.push(DrawingBoard.Utils.pixelAt(img, pixel[X] - 1, pixel[Y])); + if (pixel[X] < maxX) // east + queue.push(DrawingBoard.Utils.pixelAt(img, pixel[X] + 1, pixel[Y])); + if (pixel[Y] > 0) // north + queue.push(DrawingBoard.Utils.pixelAt(img, pixel[X], pixel[Y] - 1)); + if (pixel[Y] < maxY) // south + queue.push(DrawingBoard.Utils.pixelAt(img, pixel[X], pixel[Y] + 1)); + } + } + + this.ctx.putImageData(img, 0, 0); + }, + + + /** + * Drawing handling, with mouse or touch + */ + + initDrawEvents: function() { + this.isDrawing = false; + this.isMouseHovering = false; + this.coords = {}; + this.coords.old = this.coords.current = this.coords.oldMid = { x: 0, y: 0 }; + + this.dom.$canvas.on('mousedown touchstart', $.proxy(function(e) { + this._onInputStart(e, this._getInputCoords(e) ); + }, this)); + + this.dom.$canvas.on('mousemove touchmove', $.proxy(function(e) { + this._onInputMove(e, this._getInputCoords(e) ); + }, this)); + + this.dom.$canvas.on('mousemove', $.proxy(function(e) { + + }, this)); + + this.dom.$canvas.on('mouseup touchend', $.proxy(function(e) { + this._onInputStop(e, this._getInputCoords(e) ); + }, this)); + + this.dom.$canvas.on('mouseover', $.proxy(function(e) { + this._onMouseOver(e, this._getInputCoords(e) ); + }, this)); + + this.dom.$canvas.on('mouseout', $.proxy(function(e) { + this._onMouseOut(e, this._getInputCoords(e) ); + + }, this)); + + $('body').on('mouseup touchend', $.proxy(function(e) { + this.isDrawing = false; + }, this)); + + if (window.requestAnimationFrame) requestAnimationFrame( $.proxy(this.draw, this) ); + }, + + draw: function() { + //if the pencil size is big (>10), the small crosshair makes a friend: a circle of the size of the pencil + //todo: have the circle works on every browser - it currently should be added only when CSS pointer-events are supported + //we assume that if requestAnimationFrame is supported, pointer-events is too, but this is terribad. + if (window.requestAnimationFrame && this.ctx.lineWidth > 10 && this.isMouseHovering) { + this.dom.$cursor.css({ width: this.ctx.lineWidth + 'px', height: this.ctx.lineWidth + 'px' }); + var transform = DrawingBoard.Utils.tpl("translateX({{x}}px) translateY({{y}}px)", { x: this.coords.current.x-(this.ctx.lineWidth/2), y: this.coords.current.y-(this.ctx.lineWidth/2) }); + this.dom.$cursor.css({ 'transform': transform, '-webkit-transform': transform, '-ms-transform': transform }); + this.dom.$cursor.removeClass('drawing-board-utils-hidden'); + } else { + this.dom.$cursor.addClass('drawing-board-utils-hidden'); + } + + if (this.isDrawing) { + var currentMid = this._getMidInputCoords(this.coords.current); + this.ctx.beginPath(); + this.ctx.moveTo(currentMid.x, currentMid.y); + this.ctx.quadraticCurveTo(this.coords.old.x, this.coords.old.y, this.coords.oldMid.x, this.coords.oldMid.y); + this.ctx.stroke(); + + this.coords.old = this.coords.current; + this.coords.oldMid = currentMid; + } + + if (window.requestAnimationFrame) requestAnimationFrame( $.proxy(function() { this.draw(); }, this) ); + }, + + _onInputStart: function(e, coords) { + this.coords.current = this.coords.old = coords; + this.coords.oldMid = this._getMidInputCoords(coords); + this.isDrawing = true; + + if (!window.requestAnimationFrame) this.draw(); + + this.ev.trigger('board:startDrawing', {e: e, coords: coords}); + e.stopPropagation(); + e.preventDefault(); + }, + + _onInputMove: function(e, coords) { + this.coords.current = coords; + this.ev.trigger('board:drawing', {e: e, coords: coords}); + + if (!window.requestAnimationFrame) this.draw(); + + e.stopPropagation(); + e.preventDefault(); + }, + + _onInputStop: function(e, coords) { + if (this.isDrawing && (!e.touches || e.touches.length === 0)) { + this.isDrawing = false; + + this.saveWebStorage(); + this.saveHistory(); + + this.ev.trigger('board:stopDrawing', {e: e, coords: coords}); + this.ev.trigger('board:userAction'); + e.stopPropagation(); + e.preventDefault(); + } + }, + + _onMouseOver: function(e, coords) { + this.isMouseHovering = true; + this.coords.old = this._getInputCoords(e); + this.coords.oldMid = this._getMidInputCoords(this.coords.old); + + this.ev.trigger('board:mouseOver', {e: e, coords: coords}); + }, + + _onMouseOut: function(e, coords) { + this.isMouseHovering = false; + + this.ev.trigger('board:mouseOut', {e: e, coords: coords}); + }, + + _getInputCoords: function(e) { + e = e.originalEvent ? e.originalEvent : e; + var + rect = this.canvas.getBoundingClientRect(), + width = this.dom.$canvas.width(), + height = this.dom.$canvas.height() + ; + var x, y; + if (e.touches && e.touches.length == 1) { + x = e.touches[0].pageX; + y = e.touches[0].pageY; + } else { + x = e.pageX; + y = e.pageY; + } + x = x - this.dom.$canvas.offset().left; + y = y - this.dom.$canvas.offset().top; + x *= (width / rect.width); + y *= (height / rect.height); + return { + x: x, + y: y + }; + }, + + _getMidInputCoords: function(coords) { + return { + x: this.coords.old.x + coords.x>>1, + y: this.coords.old.y + coords.y>>1 + }; + } +}; diff --git a/mondumas/static/dist/drawingboard/drawingboard.nocontrol.min.css b/mondumas/static/dist/drawingboard/drawingboard.nocontrol.min.css new file mode 100644 index 0000000..1ca2893 --- /dev/null +++ b/mondumas/static/dist/drawingboard/drawingboard.nocontrol.min.css @@ -0,0 +1,5 @@ +/* drawingboard.js v0.4.6 - https://github.com/Leimi/drawingboard.js +* Copyright (c) 2015 Emmanuel Pelletier +* Licensed MIT */ + +.drawing-board,.drawing-board *{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}.drawing-board-utils-hidden{display:none!important}.drawing-board{position:relative;display:block}.drawing-board-canvas-wrapper{position:relative;margin:0;border:1px solid #ddd}.drawing-board-canvas{position:absolute;top:0;left:0;width:auto;cursor:crosshair;z-index:20}.drawing-board-cursor{position:absolute;top:0;left:0;pointer-events:none;border-radius:50%;background:#ccc;background:rgba(0,0,0,.2);z-index:30} \ No newline at end of file diff --git a/mondumas/static/dist/drawingboard/drawingboard.nocontrol.min.js b/mondumas/static/dist/drawingboard/drawingboard.nocontrol.min.js new file mode 100644 index 0000000..874de44 --- /dev/null +++ b/mondumas/static/dist/drawingboard/drawingboard.nocontrol.min.js @@ -0,0 +1,4 @@ +/* drawingboard.js v0.4.6 - https://github.com/Leimi/drawingboard.js +* Copyright (c) 2015 Emmanuel Pelletier +* Licensed MIT */ +!function(){"use strict";function a(a,b){for(;a.length>b;)a.shift()}var b=function(a){var b=a?a:{},c={provider:function(){throw new Error("No provider!")},maxLength:30,onUpdate:function(){}};this.provider="undefined"!=typeof b.provider?b.provider:c.provider,this.maxLength="undefined"!=typeof b.maxLength?b.maxLength:c.maxLength,this.onUpdate="undefined"!=typeof b.onUpdate?b.onUpdate:c.onUpdate,this.initialItem=null,this.clear()};b.prototype.initialize=function(a){this.stack[0]=a,this.initialItem=a},b.prototype.clear=function(){this.stack=[this.initialItem],this.position=0,this.onUpdate()},b.prototype.save=function(){this.provider(function(b){a(this.stack,this.maxLength),this.position=Math.min(this.position,this.stack.length-1),this.stack=this.stack.slice(0,this.position+1),this.stack.push(b),this.position++,this.onUpdate()}.bind(this))},b.prototype.undo=function(a){if(this.canUndo()){var b=this.stack[--this.position];this.onUpdate(),a&&a(b)}},b.prototype.redo=function(a){if(this.canRedo()){var b=this.stack[++this.position];this.onUpdate(),a&&a(b)}},b.prototype.canUndo=function(){return this.position>0},b.prototype.canRedo=function(){return this.positionIt seems you use an obsolete browser. Update it to start drawing.
',stretchImg:!1},DrawingBoard.Board.prototype={mergeOptions:function(a){return a=$.extend({},DrawingBoard.Board.defaultOpts,a),a.background||"background"!==a.eraserColor||(a.eraserColor="transparent"),a},reset:function(a){a=$.extend({color:this.opts.color,size:this.opts.size,webStorage:!0,history:!0,background:!1},a),this.setMode("pencil"),a.background&&this.resetBackground(this.opts.background,$.proxy(function(){a.history&&this.saveHistory()},this)),a.color&&this.setColor(a.color),a.size&&(this.ctx.lineWidth=a.size),this.ctx.lineCap="round",this.ctx.lineJoin="round",a.webStorage&&this.saveWebStorage(),a.history&&!a.background&&this.saveHistory(),this.blankCanvas=this.getImg(),this.ev.trigger("board:reset",a)},resetBackground:function(a,b){a=a||this.opts.background;var c=DrawingBoard.Utils.isColor(a),d=this.getMode();this.setMode("pencil"),this.ctx.clearRect(0,0,this.ctx.canvas.width,this.ctx.canvas.height),c?(this.ctx.fillStyle=a,this.ctx.fillRect(0,0,this.ctx.canvas.width,this.ctx.canvas.height),this.history.initialize(this.getImg()),b&&b()):a&&this.setImg(a,{callback:$.proxy(function(){this.history.initialize(this.getImg()),b&&b()},this)}),this.setMode(d)},resize:function(){this.dom.$controls.toggleClass("drawing-board-controls-hidden",!this.controls||!this.controls.length);var a,b,c=[this.$el.width(),DrawingBoard.Utils.boxBorderWidth(this.$el),DrawingBoard.Utils.boxBorderWidth(this.dom.$canvasWrapper,!0,!0)],d=[this.$el.height(),DrawingBoard.Utils.boxBorderHeight(this.$el),this.dom.$controls.height(),DrawingBoard.Utils.boxBorderHeight(this.dom.$controls,!1,!0),DrawingBoard.Utils.boxBorderHeight(this.dom.$canvasWrapper,!0,!0)],e=function(a,b){b=b||1;for(var c=a[0],d=1;d- Notes / Croquis -