From 813b60b854b417b5b812b3ff73da210cc5537166 Mon Sep 17 00:00:00 2001 From: juliandescottes Date: Fri, 14 Sep 2012 22:20:00 +0200 Subject: [PATCH 1/4] Simplified Rectangle.js and pixelUtils --- css/tools.css | 8 +++++ index.html | 5 +++ js/ToolSelector.js | 1 + js/drawingtools/Rectangle.js | 65 ++++++------------------------------ js/utils/pixelUtils.js | 57 +++++++++++++------------------ 5 files changed, 48 insertions(+), 88 deletions(-) diff --git a/css/tools.css b/css/tools.css index 30ed57bf..61bb321a 100644 --- a/css/tools.css +++ b/css/tools.css @@ -45,6 +45,10 @@ background-image: url(../img/tools/icons/rectangle.png); } +.tool-icon.tool-circle { + background-image: url(../img/tools/cursors/circle.png); +} + .tool-icon.tool-move { background-image: url(../img/tools/icons/hand.png); } @@ -77,6 +81,10 @@ cursor: url(../img/tools/cursors/rectangle.png) 4 21, pointer; } +.tool-circle .drawing-canvas-container:hover { + cursor: url(../img/tools/cursors/circle.png) 4 21, pointer; +} + .tool-move .drawing-canvas-container:hover { cursor: url(../img/tools/cursors/hand.png) 14 12, pointer; } diff --git a/index.html b/index.html index edeafe43..936ec60c 100644 --- a/index.html +++ b/index.html @@ -31,6 +31,7 @@
  • +
  • @@ -113,12 +114,16 @@ + + + + diff --git a/js/ToolSelector.js b/js/ToolSelector.js index 78d4f36d..b954ee84 100644 --- a/js/ToolSelector.js +++ b/js/ToolSelector.js @@ -15,6 +15,7 @@ pskl.ToolSelector = (function() { "paintBucket" : new pskl.drawingtools.PaintBucket(), "stroke" : new pskl.drawingtools.Stroke(), "rectangle" : new pskl.drawingtools.Rectangle(), + "circle" : new pskl.drawingtools.Circle(), "move" : new pskl.drawingtools.Move(), "select" : new pskl.drawingtools.Select() }; diff --git a/js/drawingtools/Rectangle.js b/js/drawingtools/Rectangle.js index 45857054..d1da6b12 100644 --- a/js/drawingtools/Rectangle.js +++ b/js/drawingtools/Rectangle.js @@ -29,20 +29,12 @@ ns.Rectangle.prototype.moveToolAt = function(col, row, color, frame, overlay) { overlay.clear(); - - // When the user moussemove (before releasing), we dynamically compute the - // pixel to draw the line and draw this line in the overlay : - var strokePoints = pskl.PixelUtils.getBoundRectanglePixels(this.startCol, this.startRow, col, row); if(color == Constants.TRANSPARENT_COLOR) { color = Constants.SELECTION_TRANSPARENT_COLOR; } - // Drawing current stroke: - for(var i = 0; i< strokePoints.length; i++) { - - - overlay.setPixel(strokePoints[i].col, strokePoints[i].row, color); - } + // draw in overlay + this.drawRectangle(col, row, color, overlay); }; /** @@ -50,52 +42,17 @@ */ ns.Rectangle.prototype.releaseToolAt = function(col, row, color, frame, overlay) { overlay.clear(); - // If the stroke tool is released outside of the canvas, we cancel the stroke: - if(frame.containsPixel(col, row)) { - var strokePoints = pskl.PixelUtils.getBoundRectanglePixels(this.startCol, this.startRow, col, row); - for(var i = 0; i< strokePoints.length; i++) { - // Change model: - frame.setPixel(strokePoints[i].col, strokePoints[i].row, color); - } - // The user released the tool to draw a line. We will compute the pixel coordinate, impact - // the model and draw them in the drawing canvas (not the fake overlay anymore) + if(frame.containsPixel(col, row)) { // cancel if outside of canvas + // draw in frame to finalize + this.drawRectangle(col, row, color, frame); } }; - /** - * Get an array of pixels representing the rectangle. - * - * @private - */ - ns.Rectangle.prototype.getRectanglePixels_ = function(x0, x1, y0, y1) { - - var pixels = []; - var swap; - - if(x0 > x1) { - swap = x0; - x0 = x1; - x1 = swap; + ns.Rectangle.prototype.drawRectangle = function (col, row, color, targetFrame) { + var strokePoints = pskl.PixelUtils.getBoundRectanglePixels(this.startCol, this.startRow, col, row); + for(var i = 0; i< strokePoints.length; i++) { + // Change model: + targetFrame.setPixel(strokePoints[i].col, strokePoints[i].row, color); } - if(y0 > y1) { - swap = y0; - y0 = y1; - y1 = swap; - } - - // Creating horizontal sides of the rectangle: - for(var x = x0; x <= x1; x++) { - pixels.push({"col": x, "row": y0}); - pixels.push({"col": x, "row": y1}); - } - - // Creating vertical sides of the rectangle: - for(var y = y0; y <= y1; y++) { - pixels.push({"col": x0, "row": y}); - pixels.push({"col": x1, "row": y}); - } - - return pixels; - }; - + } })(); diff --git a/js/utils/pixelUtils.js b/js/utils/pixelUtils.js index 8390aa21..d4ad6c0f 100644 --- a/js/utils/pixelUtils.js +++ b/js/utils/pixelUtils.js @@ -4,22 +4,11 @@ ns.PixelUtils = { getRectanglePixels : function (x0, y0, x1, y1) { + var rectangle = this.getOrderedRectangleCoordinates(x0, y0, x1, y1); var pixels = []; - var swap; - - if(x0 > x1) { - swap = x0; - x0 = x1; - x1 = swap; - } - if(y0 > y1) { - swap = y0; - y0 = y1; - y1 = swap; - } - for(var x = x0; x <= x1; x++) { - for(var y = y0; y <= y1; y++) { + for(var x = rectangle.x0; x <= rectangle.x1; x++) { + for(var y = rectangle.y0; y <= rectangle.y1; y++) { pixels.push({"col": x, "row": y}); } } @@ -28,33 +17,33 @@ }, getBoundRectanglePixels : function (x0, y0, x1, y1) { + var rectangle = this.getOrderedRectangleCoordinates(x0, y0, x1, y1); var pixels = []; - var swap; - - if(x0 > x1) { - swap = x0; - x0 = x1; - x1 = swap; - } - if(y0 > y1) { - swap = y0; - y0 = y1; - y1 = swap; - } - // Creating horizontal sides of the rectangle: - for(var x = x0; x <= x1; x++) { - pixels.push({"col": x, "row": y0}); - pixels.push({"col": x, "row": y1}); + for(var x = rectangle.x0; x <= rectangle.x1; x++) { + pixels.push({"col": x, "row": rectangle.y0}); + pixels.push({"col": x, "row": rectangle.y1}); } // Creating vertical sides of the rectangle: - for(var y = y0; y <= y1; y++) { - pixels.push({"col": x0, "row": y}); - pixels.push({"col": x1, "row": y}); + for(var y = rectangle.y0; y <= rectangle.y1; y++) { + pixels.push({"col": rectangle.x0, "row": y}); + pixels.push({"col": rectangle.x1, "row": y}); } return pixels; - } + }, + + /** + * Return an object of ordered rectangle coordinate. + * In returned object {x0, y0} => top left corner - {x1, y1} => bottom right corner + * @private + */ + getOrderedRectangleCoordinates : function (x0, y0, x1, y1) { + return { + x0 : Math.min(x0, x1), y0 : Math.min(y0, y1), + x1 : Math.max(x0, x1), y1 : Math.max(y0, y1), + }; + } }; })(); \ No newline at end of file From f7d235b116fdeed91a93fb97c4047aaa5e109865 Mon Sep 17 00:00:00 2001 From: juliandescottes Date: Fri, 14 Sep 2012 22:20:34 +0200 Subject: [PATCH 2/4] Adding Circle tool - reusing Rectangle implementation for now --- img/tools/cursors/circle.png | Bin 0 -> 628 bytes js/drawingtools/Circle.js | 62 +++++++++++++++++++++++++++++++++++ 2 files changed, 62 insertions(+) create mode 100644 img/tools/cursors/circle.png create mode 100644 js/drawingtools/Circle.js diff --git a/img/tools/cursors/circle.png b/img/tools/cursors/circle.png new file mode 100644 index 0000000000000000000000000000000000000000..c36e9eb051dbfc468c468efd2eb84c91eb99576c GIT binary patch literal 628 zcmV-)0*n2LP)Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D02*{fSaefwW^{L9 za%BKeVQFr3E>1;MAa*k@H7+qQF!XYv0005wNkl8)%6xf?E@$T z;>Z)QNo9Q@cSL$hUyn_Q1fn7udjk-Oj41%m0>nR;0*07QAvDPPmr;Bw11%x^4x(9`67(Wy{0b(4 zo-c6zSBCEOO!E>`yhICo_q!10MILDX<5RdyFTwdc6FoUGgF@Q?E_wPXJNNz$(18~u zjuW!aStxdl;FLZ8ot(y2a?aWA{)8 Date: Fri, 14 Sep 2012 23:43:49 +0200 Subject: [PATCH 3/4] Finalized first implementation of Circle tool --- img/tools/cursors/circle.png | Bin 628 -> 761 bytes js/controller/PreviewFilmController.js | 1 - js/drawingtools/Circle.js | 56 +++++++++++++++++-------- js/drawingtools/Rectangle.js | 8 ++-- js/model/FrameSheet.js | 8 ++++ 5 files changed, 51 insertions(+), 22 deletions(-) diff --git a/img/tools/cursors/circle.png b/img/tools/cursors/circle.png index c36e9eb051dbfc468c468efd2eb84c91eb99576c..a186a26bbe4846ee539d230d7b0e722df019bf0e 100644 GIT binary patch delta 737 zcmV<70v`SJ1o;J!B!3xnMObuGZ)S9NVRB^vL1b@YWgtmyVP|DhWnpA_ami&o0007; zNkl3fh{%XuQUCZW=l|iT_g(S)(VFnfSgCMdVdh9`>zo934 z4(g#I2p=32fwiDabYSag#pWiuX}ad7*>*Q~xBI=fb8J_1(SJ(^KAiLYe$VHe?>XP| zB`5ApGAM+Qa(xOEVop(%Ii@6F@6#;vx7Y!0aOm+raE+jb^)1{ho$V98%LjskZa}yJvS?N4kf*8mgy*$=J);W!p+B7Y4s6fV6W{wFHo%{tol;(erJCU~8$Y z6!&K0SfT+{7=L>`@BQ#K5deFK$d_tqZ?PC!M~B-6i;|2R`SPpEvO+N-`mCg~VkDl4 z!aBstvWyMsygkr-Oq66z`0dW6Ybh8@BRxo>63=nwezWUf334jAdP9a0D_hvki|T&R z;5ec&8Gp5g7gGyyAH*o);9&QKCzW!`a2pLDKwW-MIj8vBOGL6^*UZ}GU)V= zCWE0s>}LcxA8`cKx|rJTD;izB(`|QlIWL{ITYB2fRUTiA^Y|8H*ZW!=H5Hn~gfAM8 z2EPQwAHg@9{_&z(mO93DfPKhezkLN++LB!u37 z2frjBh2yLSz-}KXVfTO3T^u_}bjEXvn0~wA8U0+^#)-@VayXzw{g(eLzXccocR_wG TMq{CL00000NkvXXu0mjfMUP@b delta 603 zcmV-h0;K)<1@r`vB!2;OQb$4nuFf3k00004XF*Lt006O%3;baP00009a7bBm000id z000id0mpBsWB>pF8gxZibW?9;ba!ELWdKlNX>N2bPDNB8b~7$DE-^4L^m3s900HAk zL_t(IPoLC?}o5elj>uq-(QbSh<^m4A{u)G5Q&T_0M7!%KbHcA zm`))y$oiL2d@2JiA^Z-aS(_5{B53>yCV`$WaQ;_@?)6Ob5>vcH3w!sw5avZ5X#e9= zxJ)m>`8yLmIWdDm+W;v4c8uVZJ^!7Y##VC9+3x;?Ee_U6 zOCO3X_f*hKYZ%^=QD$&0Wl^itc_4~&_WMi~h~bQDI)xk5AngWy6D0thZPKf_Sw|&k pPq~lD*fx^ Date: Fri, 14 Sep 2012 23:47:05 +0200 Subject: [PATCH 4/4] Fixed jshint warnings --- js/KeyManager.js | 80 +++++++++++++++++++++++------------------------- 1 file changed, 39 insertions(+), 41 deletions(-) diff --git a/js/KeyManager.js b/js/KeyManager.js index e6eef300..902b6a6e 100644 --- a/js/KeyManager.js +++ b/js/KeyManager.js @@ -1,50 +1,48 @@ (function () { - var ns = $.namespace("pskl"); + var ns = $.namespace("pskl"); - ns.KeyManager = function () { - $(document.body).keydown($.proxy(this.onKeyUp_, this)); - }; + ns.KeyManager = function () { + $(document.body).keydown($.proxy(this.onKeyUp_, this)); + }; - // Kind of object that make you want to stop front-end _engineering_: - ns.KeyManager.prototype.CharCodeToKeyCodeMap = { + // Kind of object that make you want to stop front-end _engineering_: + ns.KeyManager.prototype.CharCodeToKeyCodeMap = { - 90 : "z", - 89 : "y", - 88 : "x", - 67 : "c", - 86 : "v" - }; + 90 : "z", + 89 : "y", + 88 : "x", + 67 : "c", + 86 : "v" + }; - ns.KeyManager.prototype.KeyboardActions = { + ns.KeyManager.prototype.KeyboardActions = { - "ctrl" : { - "z" : Events.UNDO, - "y" : Events.REDO, - "x" : Events.CUT, - "c" : Events.COPY, - "v" : Events.PASTE - } - }; + "ctrl" : { + "z" : Events.UNDO, + "y" : Events.REDO, + "x" : Events.CUT, + "c" : Events.COPY, + "v" : Events.PASTE + } + }; - - - ns.KeyManager.prototype.onKeyUp_ = function(evt) { - var isMac = false; - if (navigator.appVersion.indexOf("Mac")!=-1) { - // Welcome in mac world where vowels are consons and meta used instead of ctrl: - isMac = true; - } - - if (isMac ? evt.metaKey : evt.ctrlKey) { - // Get key pressed: - var letter = this.CharCodeToKeyCodeMap[evt.which]; - if(letter) { - var eventToTrigger = this.KeyboardActions["ctrl"][letter]; - if(eventToTrigger) { - $.publish(eventToTrigger); - } - }; - } - }; + ns.KeyManager.prototype.onKeyUp_ = function(evt) { + var isMac = false; + if (navigator.appVersion.indexOf("Mac")!=-1) { + // Welcome in mac world where vowels are consons and meta used instead of ctrl: + isMac = true; + } + + if (isMac ? evt.metaKey : evt.ctrlKey) { + // Get key pressed: + var letter = this.CharCodeToKeyCodeMap[evt.which]; + if(letter) { + var eventToTrigger = this.KeyboardActions.ctrl[letter]; + if(eventToTrigger) { + $.publish(eventToTrigger); + } + } + } + }; })(); \ No newline at end of file