diff --git a/buttons.js b/buttons.js index 8a5d658..6a9b229 100644 --- a/buttons.js +++ b/buttons.js @@ -15,11 +15,9 @@ var Buttons = (function () { var refresh = function () { for (var i = 0; i < elements.length; ++i) { - if (elements[i] === activeElement) { - elements[i].className = 'quality-selected'; - } else { - elements[i].className = 'quality-unselected'; - } + var qualityStatus = ''; + qualityStatus = (elements[i] === activeElement) ? 'selected' : 'unselected'; + elements[i].className = 'quality-'+qualityStatus; } }; diff --git a/images/lock.png b/images/lock.png new file mode 100644 index 0000000..d17b245 Binary files /dev/null and b/images/lock.png differ diff --git a/images/unlock.png b/images/unlock.png new file mode 100644 index 0000000..8d57127 Binary files /dev/null and b/images/unlock.png differ diff --git a/index.html b/index.html index 94fdc35..0fbad97 100644 --- a/index.html +++ b/index.html @@ -12,7 +12,6 @@ @@ -50,8 +52,6 @@
- - @@ -93,6 +93,14 @@ document.getElementById('error').innerHTML = 'Unfortunately, your browser does not support WebGL floating point textures.'; } } + + // Event listener for the drag to resize canvas button + document.addEventListener("DOMContentLoaded", function() { + document.getElementById('canvasLockImage').addEventListener('click', function(){ + painter.topggleCanvasResizeLock(); + }); + }); + diff --git a/paint.css b/paint.css index 568c99b..36d2fc1 100644 --- a/paint.css +++ b/paint.css @@ -199,3 +199,13 @@ body { #backlink { margin-top: 20px; } +.canvasLockContainer{ + display: inline-block;width: 13px; +} +#canvasLockImage{ + position: absolute; + top: 0; + left: 0; + cursor: pointer; + width: 13px; +} diff --git a/paint.js b/paint.js index 43d7140..3843a85 100644 --- a/paint.js +++ b/paint.js @@ -75,7 +75,7 @@ var Paint = (function () { var COLOR_PICKER_TOP = 467; var RESIZING_RADIUS = 20; - var RESIZING_FEATHER_SIZE = 8; //in pixels + var RESIZING_FEATHER_SIZE = 8; //in pixels //box shadow parameters var BOX_SHADOW_SIGMA = 5.0; @@ -92,6 +92,9 @@ var Paint = (function () { var DIFFUSE_SCALE = 0.15; var LIGHT_DIRECTION = [0, 1, 1]; + //canvas resizing + var CANVAS_RESIZE = false; + function pascalRow (n) { var line = [1]; @@ -108,10 +111,10 @@ var Paint = (function () { //take the 1s off the ends coefficients.shift(); coefficients.pop(); - + var normalizationFactor = 0; for (var i = 0; i < coefficients.length; ++i) { - normalizationFactor += coefficients[i]; + normalizationFactor += coefficients[i]; } var shader = [ @@ -308,13 +311,13 @@ var Paint = (function () { }).bind(this)); - + this.qualityButtons = new Buttons(document.getElementById('qualities'), QUALITIES.map(function (q) { return q.name }) , INITIAL_QUALITY, (function (index) { this.resolutionScale = QUALITIES[index].resolutionScale; this.simulator.changeResolution(this.getPaintingResolutionWidth(), this.getPaintingResolutionHeight()); - }).bind(this)); + }).bind(this)); this.colorPicker = new ColorPicker(this, 'brushColorHSVA', wgl, canvas, shaderSources, COLOR_PICKER_LEFT, 0); @@ -326,7 +329,7 @@ var Paint = (function () { this.saveButton.addEventListener('click', this.save.bind(this)); - this.clearButton = document.getElementById('clear-button'); + this.clearButton = document.getElementById('clear-button'); this.clearButton.addEventListener('click', (function () { this.simulator.clear(); }).bind(this)); @@ -359,7 +362,7 @@ var Paint = (function () { this.onResize(); window.addEventListener('resize', this.onResize.bind(this)); - + this.mouseX = 0; this.mouseY = 0; @@ -397,7 +400,7 @@ var Paint = (function () { //when we finish resizing, we then resize the simulator to match this.newPaintingRectangle = null; - + this.interactionState = InteractionMode.NONE; @@ -424,8 +427,8 @@ var Paint = (function () { var shadowDrawState = wgl.createDrawState() .uniform2f('u_bottomLeft', rectangle.left, rectangle.bottom) .uniform2f('u_topRight', rectangle.getRight(), rectangle.getTop()) - .uniform1f('u_sigma', BOX_SHADOW_SIGMA) - .uniform1f('u_alpha', alpha) + .uniform1f('u_sigma', BOX_SHADOW_SIGMA) + .uniform1f('u_alpha', alpha) .enable(wgl.BLEND) .blendFunc(wgl.ONE, wgl.ONE_MINUS_SRC_ALPHA) .useProgram(this.shadowProgram) @@ -672,7 +675,7 @@ var Paint = (function () { wgl.drawArrays(panelDrawState, wgl.TRIANGLE_STRIP, 0, 4); - + //shadow for panel @@ -779,11 +782,11 @@ var Paint = (function () { this.paintingRectangle.getRight() - MIN_PAINTING_WIDTH); this.newPaintingRectangle.width = this.paintingRectangle.left + this.paintingRectangle.width - this.newPaintingRectangle.left; } - + if (this.resizingSide === ResizingSide.RIGHT || this.resizingSide === ResizingSide.TOP_RIGHT || this.resizingSide === ResizingSide.BOTTOM_RIGHT) { this.newPaintingRectangle.width = Utilities.clamp(mouseX - this.paintingRectangle.left, MIN_PAINTING_WIDTH, this.maxPaintingWidth); } - + if (this.resizingSide === ResizingSide.BOTTOM || this.resizingSide === ResizingSide.BOTTOM_LEFT || this.resizingSide === ResizingSide.BOTTOM_RIGHT) { this.newPaintingRectangle.bottom = Utilities.clamp(mouseY, this.paintingRectangle.getTop() - this.maxPaintingWidth, @@ -791,7 +794,7 @@ var Paint = (function () { this.newPaintingRectangle.height = this.paintingRectangle.bottom + this.paintingRectangle.height - this.newPaintingRectangle.bottom; } - + if (this.resizingSide === ResizingSide.TOP || this.resizingSide === ResizingSide.TOP_LEFT || this.resizingSide === ResizingSide.TOP_RIGHT) { this.newPaintingRectangle.height = Utilities.clamp(mouseY - this.paintingRectangle.bottom, MIN_PAINTING_WIDTH, this.maxPaintingWidth); } @@ -804,41 +807,50 @@ var Paint = (function () { this.mouseY = mouseY; }; + Paint.prototype.topggleCanvasResizeLock = function(){ + // toggle drag to unlock canvas + CANVAS_RESIZE=!CANVAS_RESIZE; + var img = CANVAS_RESIZE ? 'lock' : 'unlock'; + document.getElementById('canvasLockImage').src='images/'+img+'.png'; + } + + Paint.prototype.allowCanvasResize = function(i){ + return !CANVAS_RESIZE ? i: ''; + } Paint.prototype.getResizingSide = function (mouseX, mouseY) { //the side we'd be resizing with the current mouse position //we can resize if our perpendicular distance to an edge is less than RESIZING_RADIUS - if (Math.abs(mouseX - this.paintingRectangle.left) <= RESIZING_RADIUS && Math.abs(mouseY - this.paintingRectangle.getTop()) <= RESIZING_RADIUS) { //top left - return ResizingSide.TOP_LEFT; + return this.allowCanvasResize(ResizingSide.TOP_LEFT); } if (Math.abs(mouseX - this.paintingRectangle.getRight()) <= RESIZING_RADIUS && Math.abs(mouseY - this.paintingRectangle.getTop()) <= RESIZING_RADIUS) { //top right - return ResizingSide.TOP_RIGHT; + return this.allowCanvasResize(ResizingSide.TOP_RIGHT); } if (Math.abs(mouseX - this.paintingRectangle.left) <= RESIZING_RADIUS && Math.abs(mouseY - this.paintingRectangle.bottom) <= RESIZING_RADIUS) { //bottom left - return ResizingSide.BOTTOM_LEFT; + return this.allowCanvasResize(ResizingSide.BOTTOM_LEFT); } if (Math.abs(mouseX - this.paintingRectangle.getRight()) <= RESIZING_RADIUS && Math.abs(mouseY - this.paintingRectangle.bottom) <= RESIZING_RADIUS) { //bottom right - return ResizingSide.BOTTOM_RIGHT; + return this.allowCanvasResize(ResizingSide.BOTTOM_RIGHT); } if (mouseY > this.paintingRectangle.bottom && mouseY <= this.paintingRectangle.getTop()) { //left or right if (Math.abs(mouseX - this.paintingRectangle.left) <= RESIZING_RADIUS) { //left - return ResizingSide.LEFT; + return this.allowCanvasResize(ResizingSide.LEFT); } else if (Math.abs(mouseX - this.paintingRectangle.getRight()) <= RESIZING_RADIUS) { //right - return ResizingSide.RIGHT; + return this.allowCanvasResize(ResizingSide.RIGHT); } } - + if (mouseX > this.paintingRectangle.left && mouseX <= this.paintingRectangle.getRight()) { //bottom or top if (Math.abs(mouseY - this.paintingRectangle.bottom) <= RESIZING_RADIUS) { //bottom - return ResizingSide.BOTTOM; + return this.allowCanvasResize(ResizingSide.BOTTOM); } else if (Math.abs(mouseY - this.paintingRectangle.getTop()) <= RESIZING_RADIUS) { //top - return ResizingSide.TOP; + return this.allowCanvasResize(ResizingSide.TOP); } } @@ -846,7 +858,7 @@ var Paint = (function () { }; //what interaction mode would be triggered if we clicked with given mouse position - Paint.prototype.desiredInteractionMode = function (mouseX, mouseY) { + Paint.prototype.desiredInteractionMode = function (mouseX, mouseY) { var mouseOverPanel = mouseX < PANEL_WIDTH && mouseY > this.canvas.height - PANEL_HEIGHT; if (mouseOverPanel) { @@ -907,7 +919,7 @@ var Paint = (function () { if (this.resizingSide === ResizingSide.LEFT || this.resizingSide === ResizingSide.TOP_LEFT || this.resizingSide === ResizingSide.BOTTOM_LEFT) { offsetX = (this.paintingRectangle.left - this.newPaintingRectangle.left) * this.resolutionScale; } - + if (this.resizingSide === ResizingSide.BOTTOM || this.resizingSide === ResizingSide.BOTTOM_LEFT || this.resizingSide === ResizingSide.BOTTOM_RIGHT) { offsetY = (this.paintingRectangle.bottom - this.newPaintingRectangle.bottom) * this.resolutionScale; }