From 6f67ca8adc34bd3770a7cdfd93d6a1fcafbcfb40 Mon Sep 17 00:00:00 2001 From: Roni Davelman Date: Wed, 8 Feb 2017 16:26:58 -0500 Subject: [PATCH 1/3] button.js cleaned qualityStatus if --- README.md | 2 +- buttons.js | 8 +++----- 2 files changed, 4 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index 14e3e9f..96d619b 100644 --- a/README.md +++ b/README.md @@ -2,4 +2,4 @@ ![](http://david.li/images/paintgithub.png) -[http://david.li/paint](http://david.li/paint) +Web GL Painting 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; } }; From e50ce5d9594df80ea9072cf78848c5c5c2416317 Mon Sep 17 00:00:00 2001 From: Roni Davelman Date: Thu, 9 Feb 2017 15:12:11 -0500 Subject: [PATCH 2/3] Canvas resize functionality --- README.md | 2 +- images/lock.png | Bin 0 -> 3526 bytes images/unlock.png | Bin 0 -> 3058 bytes index.html | 16 +++++++++--- paint.css | 10 ++++++++ paint.js | 64 +++++++++++++++++++++++++++------------------- 6 files changed, 61 insertions(+), 31 deletions(-) create mode 100644 images/lock.png create mode 100644 images/unlock.png diff --git a/README.md b/README.md index 96d619b..14e3e9f 100644 --- a/README.md +++ b/README.md @@ -2,4 +2,4 @@ ![](http://david.li/images/paintgithub.png) -Web GL Painting +[http://david.li/paint](http://david.li/paint) diff --git a/images/lock.png b/images/lock.png new file mode 100644 index 0000000000000000000000000000000000000000..d17b24558cc3c15241766064e61f4c5c55141734 GIT binary patch literal 3526 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 bsvt@b186a?v7abd`U@u$-3Vu${1g8LK1J{U literal 0 HcmV?d00001 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..ee15f45 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; } From b1f17346897f98961f989147075ce59894ba5b03 Mon Sep 17 00:00:00 2001 From: Roni Davelman Date: Thu, 9 Feb 2017 15:17:16 -0500 Subject: [PATCH 3/3] removed extra ; --- paint.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/paint.js b/paint.js index ee15f45..3843a85 100644 --- a/paint.js +++ b/paint.js @@ -93,7 +93,7 @@ var Paint = (function () { var LIGHT_DIRECTION = [0, 1, 1]; //canvas resizing - var CANVAS_RESIZE = false;; + var CANVAS_RESIZE = false; function pascalRow (n) {