From b35c9e8a6e034515c15b3579642fd5151c7080d6 Mon Sep 17 00:00:00 2001 From: RaymondLim Date: Wed, 6 Nov 2013 10:20:05 -0800 Subject: [PATCH 01/16] Implement cursor info tip showing image coordinates under the cursor. --- src/editor/ImageViewer.js | 82 +++++++++++++++++++++++++++++++++++---- src/styles/brackets.less | 19 ++++++++- 2 files changed, 93 insertions(+), 8 deletions(-) diff --git a/src/editor/ImageViewer.js b/src/editor/ImageViewer.js index 850bd870bce..a094f91eea1 100644 --- a/src/editor/ImageViewer.js +++ b/src/editor/ImageViewer.js @@ -23,7 +23,7 @@ /*jslint vars: true, plusplus: true, devel: true, nomen: true, indent: 4, maxerr: 50 */ -/*global define, $, Mustache */ +/*global define, $, window, Mustache */ define(function (require, exports, module) { "use strict"; @@ -36,15 +36,18 @@ define(function (require, exports, module) { Strings = require("strings"), StringUtils = require("utils/StringUtils"); - var _naturalWidth = 0; + var _naturalWidth = 0, + _scale = 100; /** Update the scale element, i.e. on resize * @param {!string} currentWidth actual width of image in view */ function _updateScale(currentWidth) { if (currentWidth < _naturalWidth) { - var scale = Math.floor(currentWidth / _naturalWidth * 100); - $("#img-scale").text(scale + "%") + _scale = currentWidth / _naturalWidth * 100; + $("#img-scale").text(Math.floor(_scale) + "%") + // Keep the position of the image scale div relative to the image. + .css("left", $("#img-preview").position().left + 5) .show(); } else { $("#img-scale").hide(); @@ -68,6 +71,68 @@ define(function (require, exports, module) { } } + /** + * Create a DOM node to show the image coordinates under the cursor + * and two event handlers -- mousemove handler to show the cursor info + * and mouseleave handler to hide the cursor info + */ + function _addCursorInfoTip() { + var $cursorInfo = $("
").appendTo($("#img")).hide(); + + $("#img-preview").on("mousemove", function (e) { + var x = Math.floor(e.offsetX * 100 / _scale), + y = Math.floor(e.offsetY * 100 / _scale), + tip = "x: ", + position = $("#img-preview").position(), + left = e.offsetX + position.left, + top = e.offsetY + position.top, + xyDigitDelta = x.toString().length - y.toString().length, + windowWidth = $(window).width(), + fourDigitImageWidth = _naturalWidth.toString().length === 4, + infoWidth1 = 112, // info div width 96px + vertical toolbar width 16px + infoWidth2 = 120, // info div width 104px (for 4-digit image width) + vertical toolbar width 16px + tipOffsetX = 6, // adjustment for info div left from x coordinate of cursor + tipOffsetY = -48, // adjustment for info div top from y coordinate of cursor + tipMinusOffsetX1 = -84, // for less than 4-digit image width + tipMinusOffsetX2 = -92; // for 4-digit image width + + if ((e.pageX + infoWidth1) > windowWidth || + (fourDigitImageWidth && (e.pageX + infoWidth2) > windowWidth)) { + tipOffsetX = fourDigitImageWidth ? tipMinusOffsetX2 : tipMinusOffsetX1; + } + + // Pad non-breaking spaces before x coordinate so that x and y are vertically aligned. + while (xyDigitDelta < 0) { + tip += " "; + xyDigitDelta++; + } + + // For some reason we're getting -1 for e.offset when hovering over the very + // first pixel of a scaled image. So adjust x to 0 if it is negative. + if (x < 0) { + x = 0; + } + + tip += x + " px
y: "; + + // Pad non-breaking spaces before y coordinate so that x and y are vertically aligned. + while (xyDigitDelta > 0) { + tip += " "; + xyDigitDelta--; + } + tip += y + " px"; + + $cursorInfo.html(tip).css({ + left: left + tipOffsetX, + top: top + tipOffsetY + }).show(); + }); + + $("#img-preview").on("mouseleave", function () { + $cursorInfo.hide(); + }); + } + /** * creates a DOM node to place in the editor-holder * in order to display an image. @@ -87,9 +152,10 @@ define(function (require, exports, module) { $(DocumentManager).off("fileNameChange", _onFileNameChange); } - /** Perform decorations on the view that require loading the image in the browser, - * i.e. getting actual and natural width and height andplacing the scale sticker - * @param {!string} fullPath path to the image file + /** + * Perform decorations on the view that require loading the image in the browser, + * i.e. getting actual and natural width and height andplacing the scale sticker + * @param {!string} fullPath path to the image file */ function render(fullPath) { var relPath = ProjectManager.makeProjectRelativeIfPossible(fullPath); @@ -120,8 +186,10 @@ define(function (require, exports, module) { $(EditorManager).on("removeCustomViewer", _removeListeners); $(DocumentManager).on("fileNameChange", _onFileNameChange); _updateScale($(this).width()); + _addCursorInfoTip(); }); } + exports.getCustomViewHolder = getCustomViewHolder; exports.render = render; }); diff --git a/src/styles/brackets.less b/src/styles/brackets.less index 7423d536f5e..410bd8d567e 100644 --- a/src/styles/brackets.less +++ b/src/styles/brackets.less @@ -235,6 +235,7 @@ a, img { .box-align(center); background: @background-color-3 url('images/no_content_bg.svg') no-repeat center 45%; } + /* Image Preview */ #image-holder { overflow: hidden; @@ -285,12 +286,13 @@ a, img { #img-path { margin: 0 0 15px; } + #img { position: relative; + cursor: crosshair; } #img-scale { - display: none; display: block; position: absolute; top: 5px; @@ -302,6 +304,21 @@ a, img { border-radius: 3px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); } + + #cursor-info { + display: block; + position: absolute; + text-align: left; + white-space: nowrap; + padding: 6px 8px; + color: #fff; + background-color: rgba(0, 0, 0, 0.8); + font-size: 11px; + font-family: SourceCodePro; + line-height: 13px; + border-radius: 3px; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.24); + } } .vert-resizer { From 75d10da11abf41f2e31af1ec4ea4e0b0f21e86fa Mon Sep 17 00:00:00 2001 From: RaymondLim Date: Wed, 6 Nov 2013 12:40:36 -0800 Subject: [PATCH 02/16] Switch to custom cursor --- src/styles/brackets.less | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/styles/brackets.less b/src/styles/brackets.less index 286120fe49c..3bfe360ebf5 100644 --- a/src/styles/brackets.less +++ b/src/styles/brackets.less @@ -296,7 +296,8 @@ a, img { #img { position: relative; - cursor: crosshair; + cursor: url("images/crosshair_cursor.png") 11 11, auto; /* for non-webkit-fallback */ + cursor: -webkit-image-set( url("images/crosshair_cursor.png") 1x, url("images/crosshair_cursor@2x.png") 2x ) 11 11, auto; } #img-scale { From 42a11cf05946ab93f052f8e8f1983c924d14516d Mon Sep 17 00:00:00 2001 From: RaymondLim Date: Wed, 6 Nov 2013 12:42:26 -0800 Subject: [PATCH 03/16] Adding cursor images from Larz. --- src/styles/images/crosshair_cursor.png | Bin 0 -> 1001 bytes src/styles/images/crosshair_cursor@2x.png | Bin 0 -> 1056 bytes 2 files changed, 0 insertions(+), 0 deletions(-) create mode 100644 src/styles/images/crosshair_cursor.png create mode 100644 src/styles/images/crosshair_cursor@2x.png diff --git a/src/styles/images/crosshair_cursor.png b/src/styles/images/crosshair_cursor.png new file mode 100644 index 0000000000000000000000000000000000000000..576e51344839a86ae3f81f73f04784a789d5b8b2 GIT binary patch literal 1001 zcmaJ=O=#0l91nAoS)JfbJ?Jw7zp(jeR@cO3vrSr8Fr##3R`6h&ysoiJUQFJWtR93Z zqBjrIqY7Rog6PG|81Cp01y6(FVFwWp13fAT`qH(X2W#Nvz5nC)`~5%Py~4zWf!N^~ zMNtF!akWVHgVE~WP5zsK{DW+VaJGymQ56Te2dT7)DiGvteHs>_Zq8p{gCi8RYtSl{ zaap@48OUbz2*ZT7OV|`OG8VeJQHK~*;I!q)^ta_VG_XvWzLeBB%~fE{8gF=TvN2II z8g)Z7>9J8T5=unChFAxoJ>&RNDAP?{iJYTrmIh4-uFLdxP-U$E6y!mWWRh`%Jl=viQeKhgrnN_K%=32gpCDS#GU5RCbAYcN4LEbdW zi=xPK2{w_46GYsfcd#DD9e=Q`phDm9EEikI0g<9!L9+7$f-;;| zb6iHrrc|-bRgp1kLkG9H<_{HKbFYLK|e(DvIewQ5WTW@Su=8S9a%pz%Ukl%ld_I2j<=W4uD<_tE_EFFFtbD{@pFfTsUp_mbzQ|l%_yY&qKpg-8 literal 0 HcmV?d00001 diff --git a/src/styles/images/crosshair_cursor@2x.png b/src/styles/images/crosshair_cursor@2x.png new file mode 100644 index 0000000000000000000000000000000000000000..10ae7514075d89fc20c2ab192232aa2fed8530b9 GIT binary patch literal 1056 zcmaJ=K}^$77%nObL{4fH5AsqjlCZU18PJ9STf4ywC1fnJi_xxqY|Ut2X&NIY>MBqpfgLP*5d!G;I0$?JRnpa1**@BiQbW`~FR z8yl`SP!!de9FS9FXZ=-op8QA8>^&n}6OL!_2pYph)qzx0M_CAxrkaB(sOnP_pJ6ve zoozAF8JtlDMGcuj)sG2!rcKZk)!pmas#bs)WMR&*BJ|G3RT>z2gdPnmtYS+rZw!qxArsTv?E@DOKJjS-jFvVgq zSmcAq$uXQD2n-uyLZJYO2)I)gR=t4bwp18o=xUB(V*^>hXH>Ij5=UsF^sofeuF_iW zQJYA^7*DksF39>NRRR^||DmQ?jdpPg9_u}k*iBE_kV!!oO*$I6xUm*Ll`TpRR55bW z2#r^|IGjfqxp`y*Ndh+&RWmH#ZY={8MNC>QRxJ%CrcE--&@t{qJ>eh|lxr4^6SVMM zdB`2ul0!p$GPg4W#2zJ<+&+iTMdn%S3bt#8-t+}%``_8*{w?cKMp`gUPy zE4L@t*Dkwv=60l-5Vv@(mcX0ArMX!n>yuN|pE|parGEYb?v?&8O}-}?AClk2?oIy% Dg(g#y literal 0 HcmV?d00001 From 2c479a9b68a44e3ccf99f935dbbf8e55e8092fdc Mon Sep 17 00:00:00 2001 From: RaymondLim Date: Wed, 6 Nov 2013 12:52:09 -0800 Subject: [PATCH 04/16] Remove the code that I accidently reintroduced when resolving the merge conflict. --- src/styles/brackets.less | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/styles/brackets.less b/src/styles/brackets.less index 3bfe360ebf5..228ec98129d 100644 --- a/src/styles/brackets.less +++ b/src/styles/brackets.less @@ -290,10 +290,6 @@ a, img { background: @selection-color-focused; } - #img-path { - margin: 0 0 15px; - } - #img { position: relative; cursor: url("images/crosshair_cursor.png") 11 11, auto; /* for non-webkit-fallback */ From b371230e30dcfb9bc606cab175ccd7e6c9ea9474 Mon Sep 17 00:00:00 2001 From: RaymondLim Date: Wed, 6 Nov 2013 13:31:12 -0800 Subject: [PATCH 05/16] Prevent a possible divide-by-zero error and a minor coordinate alignment issue near top left corner of the image. --- src/editor/ImageViewer.js | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/src/editor/ImageViewer.js b/src/editor/ImageViewer.js index a094f91eea1..3a8d2f6da1f 100644 --- a/src/editor/ImageViewer.js +++ b/src/editor/ImageViewer.js @@ -80,8 +80,8 @@ define(function (require, exports, module) { var $cursorInfo = $("
").appendTo($("#img")).hide(); $("#img-preview").on("mousemove", function (e) { - var x = Math.floor(e.offsetX * 100 / _scale), - y = Math.floor(e.offsetY * 100 / _scale), + var x = _scale ? Math.floor(e.offsetX * 100 / _scale) : e.offsetX, + y = _scale ? Math.floor(e.offsetY * 100 / _scale) : e.offsetY, tip = "x: ", position = $("#img-preview").position(), left = e.offsetX + position.left, @@ -101,18 +101,19 @@ define(function (require, exports, module) { tipOffsetX = fourDigitImageWidth ? tipMinusOffsetX2 : tipMinusOffsetX1; } - // Pad non-breaking spaces before x coordinate so that x and y are vertically aligned. - while (xyDigitDelta < 0) { - tip += " "; - xyDigitDelta++; - } - // For some reason we're getting -1 for e.offset when hovering over the very // first pixel of a scaled image. So adjust x to 0 if it is negative. if (x < 0) { x = 0; + xyDigitDelta--; // Skip the minus sign in x coordinate } + // Pad non-breaking spaces before x coordinate so that x and y are vertically aligned. + while (xyDigitDelta < 0) { + tip += " "; + xyDigitDelta++; + } + tip += x + " px
y: "; // Pad non-breaking spaces before y coordinate so that x and y are vertically aligned. From 3a38e61a87e160e2871745e49a351c8f614928a4 Mon Sep 17 00:00:00 2001 From: Lawrence Hsu Date: Wed, 6 Nov 2013 16:31:22 -0800 Subject: [PATCH 06/16] New cursor images and minor tweak to cursor-info padding --- src/styles/brackets.less | 2 +- src/styles/images/crosshair_cursor.png | Bin 1001 -> 1035 bytes src/styles/images/crosshair_cursor@2x.png | Bin 1056 -> 1057 bytes 3 files changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/brackets.less b/src/styles/brackets.less index 228ec98129d..ee5f5a4b0d9 100644 --- a/src/styles/brackets.less +++ b/src/styles/brackets.less @@ -314,7 +314,7 @@ a, img { position: absolute; text-align: left; white-space: nowrap; - padding: 6px 8px; + padding: 6px 9px; color: #fff; background-color: rgba(0, 0, 0, 0.8); font-size: 11px; diff --git a/src/styles/images/crosshair_cursor.png b/src/styles/images/crosshair_cursor.png index 576e51344839a86ae3f81f73f04784a789d5b8b2..f480d06b42b98ec480858226a0841aa59057873c 100644 GIT binary patch delta 257 zcmaFK-p#S0ka6-X#+1ofjG8J1zP?s2`N^fZsd*)yF1AV)xdnPDnJHF|mS*OT&IZQD zZpJQ??=y)_)@737feISI1^+M_OkTodHrbC!dh%B$#mQYvQj-ms9qZX&NNi0tlMePLi1^DZQHn2lvb)wyCQjC{Dg(VBCWv9 zNr!Jr&q>$6(7j!96ZhAOUM>N)$1O6COrle6Cj~?uZY#E8J}-V?TSW9Jne*Y_o_1Wf z*gyH?4<4Bf&%bJ$&Yf+OHu-tK^f&uP=LSXwa|3s_hTr8?K&LQxy85}Sb4q9e03Ft3 AXaE2J delta 181 zcmV;m080Oh2-s(j46||7&TQ2e0{B4@{>z*Q}aqZU2K&qatriQGE=M!ja>~5U5#9g z-OLOo-)9n=tji?D0~K_E3;tm=n7o8Zf3iE1(&Vp9Qj?pR6ek-nJJx&J>Sr@BFii1u zaSW-r_2#-KSA&6oOQ3R`KmTg>9_AN*J~Ev9nsSmdewf*YbQp%Iu3pC_4%EOe?mvv4FO#pRwVh{iT delta 259 zcmZ3;v4CSkA>-sbj7pQU7_%prG3jwAROA-;`dWETKEPx;`46MiWPWDF$xE2@d5kTL z%?u6P+>G6fEhpb+GJpse8W=zYL?;_CJJv7zWM{>|z%bd<#WAGf)|=^$Tn7|*Sngi> zUvJquO|JRKEs@!r6+tb9p4X<%+&VQoyIUNnn&H6qt@{g>r|UR1`Y?DtU&Ia+YABK4 zaYjKieSyQY$J4?NH0kFz|91Ae_LA{^{A1tQziaaUzx=XlvBQ_ts^{rHT{u}66~|6~ z?`*(mWH?iT6{ufcL3na!W)jGB28Mqe1snzpA3iD+i@Kkd1c`XM`njxgN@xNAH}79T From e12d708b0364c226e6424e552d05ad94d8d11dfb Mon Sep 17 00:00:00 2001 From: RaymondLim Date: Fri, 8 Nov 2013 11:38:58 -0800 Subject: [PATCH 07/16] Temporarily hide scale sticker to show cursor info behind it. Make some improvements based on the review feedback. --- src/editor/ImageViewer.js | 175 ++++++++++++++++++++---------- src/htmlContent/image-holder.html | 4 + src/styles/brackets.less | 5 +- 3 files changed, 127 insertions(+), 57 deletions(-) diff --git a/src/editor/ImageViewer.js b/src/editor/ImageViewer.js index 3a8d2f6da1f..8096dea5754 100644 --- a/src/editor/ImageViewer.js +++ b/src/editor/ImageViewer.js @@ -37,7 +37,8 @@ define(function (require, exports, module) { StringUtils = require("utils/StringUtils"); var _naturalWidth = 0, - _scale = 100; + _scale = 100, + _scaleDivInfo = null; // coordinates of hidden scale sticker /** Update the scale element, i.e. on resize * @param {!string} currentWidth actual width of image in view @@ -72,68 +73,124 @@ define(function (require, exports, module) { } /** - * Create a DOM node to show the image coordinates under the cursor - * and two event handlers -- mousemove handler to show the cursor info - * and mouseleave handler to hide the cursor info + * Check mouse entering/exiting the scale sticker. + * Hide it when entering and show it again when exiting. + * + * @param {MouseEvent} e mouse move/leave event + * @return {boolean} true if mouse entering into the scale sticker */ - function _addCursorInfoTip() { - var $cursorInfo = $("
").appendTo($("#img")).hide(); - - $("#img-preview").on("mousemove", function (e) { - var x = _scale ? Math.floor(e.offsetX * 100 / _scale) : e.offsetX, - y = _scale ? Math.floor(e.offsetY * 100 / _scale) : e.offsetY, - tip = "x: ", - position = $("#img-preview").position(), - left = e.offsetX + position.left, - top = e.offsetY + position.top, - xyDigitDelta = x.toString().length - y.toString().length, - windowWidth = $(window).width(), - fourDigitImageWidth = _naturalWidth.toString().length === 4, - infoWidth1 = 112, // info div width 96px + vertical toolbar width 16px - infoWidth2 = 120, // info div width 104px (for 4-digit image width) + vertical toolbar width 16px - tipOffsetX = 6, // adjustment for info div left from x coordinate of cursor - tipOffsetY = -48, // adjustment for info div top from y coordinate of cursor - tipMinusOffsetX1 = -84, // for less than 4-digit image width - tipMinusOffsetX2 = -92; // for 4-digit image width + function _handleMouseEnterOrExitScaleSticker(e) { + var imagePos = $("#img-preview").position(), + scaleDivPos = $("#img-scale").position(), + left = e.offsetX + imagePos.left, + top = e.offsetY + imagePos.top, + mouseInScaleDiv = $(e.target).is("#img-scale"); - if ((e.pageX + infoWidth1) > windowWidth || - (fourDigitImageWidth && (e.pageX + infoWidth2) > windowWidth)) { - tipOffsetX = fourDigitImageWidth ? tipMinusOffsetX2 : tipMinusOffsetX1; + if (mouseInScaleDiv) { + // Handle mouse inside image scale div. + // But hide it only if the pixel under mouse is also in the image. + if ((e.offsetX + scaleDivPos.left) < (imagePos.left + $("#img-preview").width()) && + (e.offsetY + scaleDivPos.top) < (imagePos.top + $("#img-preview").height())) { + // Remember image scale div coordinates before hiding it. + _scaleDivInfo = {left: scaleDivPos.left, + top: scaleDivPos.top, + right: scaleDivPos.left + $("#img-scale").width(), + bottom: scaleDivPos.top + $("#img-scale").height()}; + $("#img-scale").hide(); } - - // For some reason we're getting -1 for e.offset when hovering over the very - // first pixel of a scaled image. So adjust x to 0 if it is negative. - if (x < 0) { - x = 0; - xyDigitDelta--; // Skip the minus sign in x coordinate - } - - // Pad non-breaking spaces before x coordinate so that x and y are vertically aligned. - while (xyDigitDelta < 0) { - tip += " "; - xyDigitDelta++; + } else if (_scaleDivInfo) { + // See whether the cursor is no longer inside the hidden scale div. + // If so, show it again. + if ((left < _scaleDivInfo.left || left > _scaleDivInfo.right) || + (top < _scaleDivInfo.top || top > _scaleDivInfo.bottom)) { + _scaleDivInfo = null; + $("#img-scale").show(); } + } + return mouseInScaleDiv; + } + + /** + * Show image coordinates under the mouse cursor + * + * @param {MouseEvent} e mouse move event + */ + function _showImageTip(e) { + // Don't show image tip if _scale is close to zero. + // since we won't have enough room to show tip anyway. + if (Math.floor(_scale) === 0) { + return; + } + + var x = Math.floor(e.offsetX * 100 / _scale), + y = Math.floor(e.offsetY * 100 / _scale), + spacePadding = "", + imagePos = $("#img-preview").position(), + left = e.offsetX + imagePos.left, + top = e.offsetY + imagePos.top, + xyDigitDelta = x.toString().length - y.toString().length, + windowWidth = $(window).width(), + fourDigitImageWidth = _naturalWidth.toString().length === 4, + infoWidth1 = 112, // info div width 96px + vertical toolbar width 16px + infoWidth2 = 120, // info div width 104px (for 4-digit image width) + vertical toolbar width 16px + tipOffsetX = 6, // adjustment for info div left from x coordinate of cursor + tipOffsetY = -48, // adjustment for info div top from y coordinate of cursor + tipMinusOffsetX1 = -84, // for less than 4-digit image width + tipMinusOffsetX2 = -92; // for 4-digit image width + + if (_handleMouseEnterOrExitScaleSticker(e)) { + // If we're in the scale sticker, then just return. + return; + } + + // Check whether to show the image tip on the left. + if ((e.pageX + infoWidth1) > windowWidth || + (fourDigitImageWidth && (e.pageX + infoWidth2) > windowWidth)) { + tipOffsetX = fourDigitImageWidth ? tipMinusOffsetX2 : tipMinusOffsetX1; + } + + // For some reason we're getting -1 for e.offset when hovering over the very + // first pixel of a scaled image. So adjust x to 0 if it is negative. + if (x < 0) { + x = 0; + xyDigitDelta--; // Skip the minus sign in x coordinate + } + + // Pad non-breaking spaces before x coordinate so that x and y are vertically aligned. + while (xyDigitDelta < 0) { + spacePadding += " "; + xyDigitDelta++; + } + $("#x-coordinate").html("x: " + spacePadding + x + " px"); - tip += x + " px
y: "; - - // Pad non-breaking spaces before y coordinate so that x and y are vertically aligned. - while (xyDigitDelta > 0) { - tip += " "; - xyDigitDelta--; - } - tip += y + " px"; + spacePadding = ""; + // Pad non-breaking spaces before y coordinate so that x and y are vertically aligned. + while (xyDigitDelta > 0) { + spacePadding += " "; + xyDigitDelta--; + } + $("#y-coordinate").html("y: " + spacePadding + y + " px"); - $cursorInfo.html(tip).css({ - left: left + tipOffsetX, - top: top + tipOffsetY - }).show(); - }); - - $("#img-preview").on("mouseleave", function () { - $cursorInfo.hide(); - }); + $("#img-tip").css({ + left: left + tipOffsetX, + top: top + tipOffsetY + }).show(); } + /** + * Show image coordinates under the mouse cursor + * + * @param {MouseEvent} e mouse leave event + */ + function _hideImageTip(e) { + $("#img-tip").hide(); + + // Ensure image scale div is visible when mouse is outside of the image. + if ($(e.target).is("#img-preview")) { + $("#img-scale").show(); + } + } + /** * creates a DOM node to place in the editor-holder * in order to display an image. @@ -151,6 +208,8 @@ define(function (require, exports, module) { function _removeListeners() { $(PanelManager).off("editorAreaResize", _onEditorAreaResize); $(DocumentManager).off("fileNameChange", _onFileNameChange); + $("#img").off("mousemove", "#img-preview, #img-scale", _showImageTip) + .off("mouseleave", "#img-preview, #img-scale", _hideImageTip); } /** @@ -186,8 +245,12 @@ define(function (require, exports, module) { // listen to removal to stop listening to resize events $(EditorManager).on("removeCustomViewer", _removeListeners); $(DocumentManager).on("fileNameChange", _onFileNameChange); + + $("#img-tip").hide(); + $("#img").on("mousemove", "#img-preview, #img-scale", _showImageTip) + .on("mouseleave", "#img-preview, #img-scale", _hideImageTip); + _updateScale($(this).width()); - _addCursorInfoTip(); }); } diff --git a/src/htmlContent/image-holder.html b/src/htmlContent/image-holder.html index ee616d352bc..36a362b51b8 100644 --- a/src/htmlContent/image-holder.html +++ b/src/htmlContent/image-holder.html @@ -7,6 +7,10 @@
+
+
+ +
\ No newline at end of file diff --git a/src/styles/brackets.less b/src/styles/brackets.less index ee5f5a4b0d9..297188abc27 100644 --- a/src/styles/brackets.less +++ b/src/styles/brackets.less @@ -292,6 +292,9 @@ a, img { #img { position: relative; + } + + #img-preview { cursor: url("images/crosshair_cursor.png") 11 11, auto; /* for non-webkit-fallback */ cursor: -webkit-image-set( url("images/crosshair_cursor.png") 1x, url("images/crosshair_cursor@2x.png") 2x ) 11 11, auto; } @@ -309,7 +312,7 @@ a, img { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); } - #cursor-info { + #img-tip { display: block; position: absolute; text-align: left; From 6bc2023d5127cbc8426b4ef2ab0be68c21db40ab Mon Sep 17 00:00:00 2001 From: RaymondLim Date: Fri, 8 Nov 2013 16:10:21 -0800 Subject: [PATCH 08/16] Use table to format the x and y coordinate values as suggested by Larz. --- src/editor/ImageViewer.js | 19 ++----------------- src/htmlContent/image-holder.html | 12 ++++++++++-- src/styles/brackets.less | 9 +++++++++ 3 files changed, 21 insertions(+), 19 deletions(-) diff --git a/src/editor/ImageViewer.js b/src/editor/ImageViewer.js index 8096dea5754..cb2054d21bc 100644 --- a/src/editor/ImageViewer.js +++ b/src/editor/ImageViewer.js @@ -124,11 +124,9 @@ define(function (require, exports, module) { var x = Math.floor(e.offsetX * 100 / _scale), y = Math.floor(e.offsetY * 100 / _scale), - spacePadding = "", imagePos = $("#img-preview").position(), left = e.offsetX + imagePos.left, top = e.offsetY + imagePos.top, - xyDigitDelta = x.toString().length - y.toString().length, windowWidth = $(window).width(), fourDigitImageWidth = _naturalWidth.toString().length === 4, infoWidth1 = 112, // info div width 96px + vertical toolbar width 16px @@ -153,23 +151,10 @@ define(function (require, exports, module) { // first pixel of a scaled image. So adjust x to 0 if it is negative. if (x < 0) { x = 0; - xyDigitDelta--; // Skip the minus sign in x coordinate } - - // Pad non-breaking spaces before x coordinate so that x and y are vertically aligned. - while (xyDigitDelta < 0) { - spacePadding += " "; - xyDigitDelta++; - } - $("#x-coordinate").html("x: " + spacePadding + x + " px"); - spacePadding = ""; - // Pad non-breaking spaces before y coordinate so that x and y are vertically aligned. - while (xyDigitDelta > 0) { - spacePadding += " "; - xyDigitDelta--; - } - $("#y-coordinate").html("y: " + spacePadding + y + " px"); + $("#x-value").text(x + "px"); + $("#y-value").text(y + "px"); $("#img-tip").css({ left: left + tipOffsetX, diff --git a/src/htmlContent/image-holder.html b/src/htmlContent/image-holder.html index 36a362b51b8..be816dca18e 100644 --- a/src/htmlContent/image-holder.html +++ b/src/htmlContent/image-holder.html @@ -8,8 +8,16 @@
-
- + + + + + + + + + +
x:
y:
diff --git a/src/styles/brackets.less b/src/styles/brackets.less index 297188abc27..5b21e952e6e 100644 --- a/src/styles/brackets.less +++ b/src/styles/brackets.less @@ -326,6 +326,15 @@ a, img { border-radius: 3px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.24); } + + #x-value, + #y-value { + text-align: right; + } + + .tip-container { + border: 0; + } } .vert-resizer { From 20b2a829275f836a90d47fc2f0f0730bc297986f Mon Sep 17 00:00:00 2001 From: RaymondLim Date: Fri, 8 Nov 2013 16:28:02 -0800 Subject: [PATCH 09/16] Initialize _scale to 100 for every image load. --- src/editor/ImageViewer.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/editor/ImageViewer.js b/src/editor/ImageViewer.js index cb2054d21bc..5cf6b5f0f78 100644 --- a/src/editor/ImageViewer.js +++ b/src/editor/ImageViewer.js @@ -235,6 +235,7 @@ define(function (require, exports, module) { $("#img").on("mousemove", "#img-preview, #img-scale", _showImageTip) .on("mouseleave", "#img-preview, #img-scale", _hideImageTip); + _scale = 100; // initialize to 100 _updateScale($(this).width()); }); } From d58c351b254b190081102ee664064fdf921452f2 Mon Sep 17 00:00:00 2001 From: RaymondLim Date: Fri, 8 Nov 2013 16:49:13 -0800 Subject: [PATCH 10/16] Moving the initialization to the top of render function. --- src/editor/ImageViewer.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/editor/ImageViewer.js b/src/editor/ImageViewer.js index 5cf6b5f0f78..e76b9a77537 100644 --- a/src/editor/ImageViewer.js +++ b/src/editor/ImageViewer.js @@ -205,6 +205,7 @@ define(function (require, exports, module) { function render(fullPath) { var relPath = ProjectManager.makeProjectRelativeIfPossible(fullPath); + _scale = 100; // initialize to 100 $("#img-path").text(relPath); $("#img-preview").on("load", function () { // add dimensions and size @@ -235,7 +236,6 @@ define(function (require, exports, module) { $("#img").on("mousemove", "#img-preview, #img-scale", _showImageTip) .on("mouseleave", "#img-preview, #img-scale", _hideImageTip); - _scale = 100; // initialize to 100 _updateScale($(this).width()); }); } From 627230e8b461aa700e644d6894f32cb17b14da46 Mon Sep 17 00:00:00 2001 From: RaymondLim Date: Mon, 11 Nov 2013 09:21:34 -0800 Subject: [PATCH 11/16] Use cross guides instead of crosshair cursor. --- src/editor/ImageViewer.js | 159 ++++++++++++++++++++------ src/htmlContent/image-holder.html | 2 + src/styles/brackets.less | 24 +++- src/styles/images/horizontal-dash.svg | 4 + src/styles/images/vertical-dash.svg | 4 + 5 files changed, 153 insertions(+), 40 deletions(-) create mode 100644 src/styles/images/horizontal-dash.svg create mode 100644 src/styles/images/vertical-dash.svg diff --git a/src/editor/ImageViewer.js b/src/editor/ImageViewer.js index e73503b8bac..f733320fd91 100644 --- a/src/editor/ImageViewer.js +++ b/src/editor/ImageViewer.js @@ -78,38 +78,53 @@ define(function (require, exports, module) { * Check mouse entering/exiting the scale sticker. * Hide it when entering and show it again when exiting. * - * @param {MouseEvent} e mouse move/leave event - * @return {boolean} true if mouse entering into the scale sticker + * @param {number} offsetX mouse offset from the left of the previewing image + * @param {number} offsetY mouseoffset from the top of the previewing image */ - function _handleMouseEnterOrExitScaleSticker(e) { - var imagePos = $("#img-preview").position(), - scaleDivPos = $("#img-scale").position(), - left = e.offsetX + imagePos.left, - top = e.offsetY + imagePos.top, - mouseInScaleDiv = $(e.target).is("#img-scale"); - - if (mouseInScaleDiv) { + function _handleMouseEnterOrExitScaleSticker(offsetX, offsetY) { + var imagePos = $("#img-preview").position(), + scaleDivPos = $("#img-scale").position(), + imgWidth = $("#img-preview").width(), + imgHeight = $("#img-preview").height(), + scaleDivLeft, + scaleDivTop, + scaleDivRight, + scaleDivBottom; + + if (_scaleDivInfo) { + scaleDivLeft = _scaleDivInfo.left; + scaleDivTop = _scaleDivInfo.top; + scaleDivRight = _scaleDivInfo.right; + scaleDivBottom = _scaleDivInfo.bottom; + } else { + scaleDivLeft = scaleDivPos.left; + scaleDivTop = scaleDivPos.top; + scaleDivRight = $("#img-scale").width() - scaleDivLeft; + scaleDivBottom = $("#img-scale").height() - scaleDivTop; + } + + if ((offsetX >= scaleDivLeft && offsetX <= scaleDivRight) && + (offsetY >= scaleDivTop && offsetY <= scaleDivBottom)) { // Handle mouse inside image scale div. // But hide it only if the pixel under mouse is also in the image. - if ((e.offsetX + scaleDivPos.left) < (imagePos.left + $("#img-preview").width()) && - (e.offsetY + scaleDivPos.top) < (imagePos.top + $("#img-preview").height())) { + if (offsetX < (imagePos.left + imgWidth) && + offsetY < (imagePos.top + imgHeight)) { // Remember image scale div coordinates before hiding it. _scaleDivInfo = {left: scaleDivPos.left, top: scaleDivPos.top, - right: scaleDivPos.left + $("#img-scale").width(), - bottom: scaleDivPos.top + $("#img-scale").height()}; + right: scaleDivRight, + bottom: scaleDivBottom}; $("#img-scale").hide(); } } else if (_scaleDivInfo) { // See whether the cursor is no longer inside the hidden scale div. // If so, show it again. - if ((left < _scaleDivInfo.left || left > _scaleDivInfo.right) || - (top < _scaleDivInfo.top || top > _scaleDivInfo.bottom)) { + if ((offsetX < _scaleDivInfo.left || offsetX > _scaleDivInfo.right) || + (offsetY < _scaleDivInfo.top || offsetY > _scaleDivInfo.bottom)) { _scaleDivInfo = null; $("#img-scale").show(); } } - return mouseInScaleDiv; } /** @@ -124,21 +139,62 @@ define(function (require, exports, module) { return; } - var x = Math.floor(e.offsetX * 100 / _scale), - y = Math.floor(e.offsetY * 100 / _scale), - imagePos = $("#img-preview").position(), - left = e.offsetX + imagePos.left, - top = e.offsetY + imagePos.top, - windowWidth = $(window).width(), + var x = Math.floor(e.offsetX * 100 / _scale), + y = Math.floor(e.offsetY * 100 / _scale), + $target = $(e.target), + targetPos = $target.position(), + tipPos = $("#img-tip").position(), + imagePos = $("#img-preview").position(), + scaleDivPos = $("#img-scale").position(), + left = e.offsetX + imagePos.left, + top = e.offsetY + imagePos.top, + width = $("#img-preview").width(), + height = $("#img-preview").height(), + windowWidth = $(window).width(), fourDigitImageWidth = _naturalWidth.toString().length === 4, - infoWidth1 = 112, // info div width 96px + vertical toolbar width 16px - infoWidth2 = 120, // info div width 104px (for 4-digit image width) + vertical toolbar width 16px - tipOffsetX = 6, // adjustment for info div left from x coordinate of cursor - tipOffsetY = -48, // adjustment for info div top from y coordinate of cursor - tipMinusOffsetX1 = -84, // for less than 4-digit image width - tipMinusOffsetX2 = -92; // for 4-digit image width + infoWidth1 = 112, // info div width 96px + vertical toolbar width 16px + infoWidth2 = 120, // info div width 104px (for 4-digit image width) + vertical toolbar width 16px + tipOffsetX = 10, // adjustment for info div left from x coordinate of cursor + tipOffsetY = -54, // adjustment for info div top from y coordinate of cursor + tipMinusOffsetX1 = -84, // for less than 4-digit image width + tipMinusOffsetX2 = -90; // for 4-digit image width - if (_handleMouseEnterOrExitScaleSticker(e)) { + // Adjust left, top, x and y based on which element contains the cursor. + // Return if the target element is no longer available as in the case of + // a vertical guide that has its left equals to zero. + if ($target.is(".img-guide")) { + if ($target.is("#vert-guide")) { + if (targetPos.left === 0) { + return; + } + left = targetPos.left; + x = Math.floor(left * 100 / _scale); + } else { + if (targetPos.top === 0) { + return; + } + top = targetPos.top; + y = Math.floor(top * 100 / _scale); + } + } else if (!$target.is("#img-preview")) { + if ($target.is("#img-scale")) { + left = scaleDivPos.left + e.offsetX; + top = scaleDivPos.top + e.offsetY; + x = Math.floor(left * 100 / _scale); + y = Math.floor(top * 100 / _scale); + } else if (tipPos.left && tipPos.top) { + // Cursor must be inside the image tip. + left = tipPos.left + e.offsetX; + top = tipPos.top + e.offsetY; + x = Math.floor(left * 100 / _scale); + y = Math.floor(top * 100 / _scale); + } else { + return; + } + } + + _handleMouseEnterOrExitScaleSticker(left, top); + if ($(e.target).is("#img-scale")) { // If we're in the scale sticker, then just return. return; } @@ -162,6 +218,18 @@ define(function (require, exports, module) { left: left + tipOffsetX, top: top + tipOffsetY }).show(); + + $("#horiz-guide").css({ + left: imagePos.left, + top: top, + width: width - 1 + }).show(); + + $("#vert-guide").css({ + left: left, + top: imagePos.top, + height: height - 1 + }).show(); } /** @@ -170,11 +238,25 @@ define(function (require, exports, module) { * @param {MouseEvent} e mouse leave event */ function _hideImageTip(e) { - $("#img-tip").hide(); + var $target = $(e.target), + targetPos = $target.position(), + imagePos = $("#img-preview").position(), + right = imagePos.left + $("#img-preview").width(), + bottom = imagePos.top + $("#img-preview").height(), + offsetX = e.offsetX, + offsetY = e.offsetY; + + if ($target.is(".img-guide")) { + offsetX = targetPos.left + offsetX; + offsetY = targetPos.top + offsetY; + } - // Ensure image scale div is visible when mouse is outside of the image. - if ($(e.target).is("#img-preview")) { - $("#img-scale").show(); + // Hide image tip and guides only if the cursor is outside of the image. + if (offsetX < imagePos.left || offsetX >= right || + offsetY < imagePos.top || offsetY >= bottom) { + $("#img-tip").hide(); + $(".img-guide").hide(); +// $("#img-scale").show(); } } @@ -195,8 +277,8 @@ define(function (require, exports, module) { function _removeListeners() { $(PanelManager).off("editorAreaResize", _onEditorAreaResize); $(DocumentManager).off("fileNameChange", _onFileNameChange); - $("#img").off("mousemove", "#img-preview, #img-scale", _showImageTip) - .off("mouseleave", "#img-preview, #img-scale", _hideImageTip); + $("#img").off("mousemove", "#img-preview, #img-scale, #img-tip, .img-guide", _showImageTip) + .off("mouseleave", "#img-preview, #img-scale, #img-tip, .img-guide", _hideImageTip); } /** @@ -239,8 +321,9 @@ define(function (require, exports, module) { $(DocumentManager).on("fileNameChange", _onFileNameChange); $("#img-tip").hide(); - $("#img").on("mousemove", "#img-preview, #img-scale", _showImageTip) - .on("mouseleave", "#img-preview, #img-scale", _hideImageTip); + $(".img-guide").hide(); + $("#img").on("mousemove", "#img-preview, #img-scale, #img-tip, .img-guide", _showImageTip) + .on("mouseleave", "#img-preview, #img-scale, #img-tip, .img-guide", _hideImageTip); _updateScale($(this).width()); }); diff --git a/src/htmlContent/image-holder.html b/src/htmlContent/image-holder.html index be816dca18e..f82100825b3 100644 --- a/src/htmlContent/image-holder.html +++ b/src/htmlContent/image-holder.html @@ -19,6 +19,8 @@ +
+
\ No newline at end of file diff --git a/src/styles/brackets.less b/src/styles/brackets.less index 03d4f5c3080..7f885583cb5 100644 --- a/src/styles/brackets.less +++ b/src/styles/brackets.less @@ -297,9 +297,9 @@ a, img { position: relative; } + .img-guide, #img-preview { - cursor: url("images/crosshair_cursor.png") 11 11, auto; /* for non-webkit-fallback */ - cursor: -webkit-image-set( url("images/crosshair_cursor.png") 1x, url("images/crosshair_cursor@2x.png") 2x ) 11 11, auto; + cursor: none; } #img-scale { @@ -338,6 +338,26 @@ a, img { .tip-container { border: 0; } + + #horiz-guide { + background-image: url("images/horizontal-dash.svg"); + background-repeat: repeat-x; + width: 8px; + height: 1px; + } + + #vert-guide { + background-image: url("images/vertical-dash.svg"); + background-repeat: repeat-y; + width: 1px; + height: 8px; + } + + #horiz-guide, + #vert-guide { + position: absolute; + display: block; + } } .vert-resizer { diff --git a/src/styles/images/horizontal-dash.svg b/src/styles/images/horizontal-dash.svg new file mode 100644 index 00000000000..41b40a6f1d1 --- /dev/null +++ b/src/styles/images/horizontal-dash.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/styles/images/vertical-dash.svg b/src/styles/images/vertical-dash.svg new file mode 100644 index 00000000000..ad97c732195 --- /dev/null +++ b/src/styles/images/vertical-dash.svg @@ -0,0 +1,4 @@ + + + + From 210739ab598cc10678397a1a8ab0d6b1b2036656 Mon Sep 17 00:00:00 2001 From: RaymondLim Date: Mon, 11 Nov 2013 13:45:20 -0800 Subject: [PATCH 12/16] Fix some issues with mouse entering/exiting image scale sticker. Show crosshair cursor if the image is too narrow in width or height. --- src/editor/ImageViewer.js | 42 +++++++++++++++++++++++++++------------ src/styles/brackets.less | 6 ++++++ 2 files changed, 35 insertions(+), 13 deletions(-) diff --git a/src/editor/ImageViewer.js b/src/editor/ImageViewer.js index f733320fd91..1e6e59bf899 100644 --- a/src/editor/ImageViewer.js +++ b/src/editor/ImageViewer.js @@ -96,14 +96,31 @@ define(function (require, exports, module) { scaleDivTop = _scaleDivInfo.top; scaleDivRight = _scaleDivInfo.right; scaleDivBottom = _scaleDivInfo.bottom; + + if ((imgWidth + imagePos.left) < scaleDivRight) { + scaleDivRight = imgWidth + imagePos.left; + } + + if ((imgHeight + imagePos.top) < scaleDivBottom) { + scaleDivBottom = imgHeight + imagePos.top; + } + } else { scaleDivLeft = scaleDivPos.left; scaleDivTop = scaleDivPos.top; - scaleDivRight = $("#img-scale").width() - scaleDivLeft; - scaleDivBottom = $("#img-scale").height() - scaleDivTop; + scaleDivRight = $("#img-scale").width() + scaleDivLeft; + scaleDivBottom = $("#img-scale").height() + scaleDivTop; } - if ((offsetX >= scaleDivLeft && offsetX <= scaleDivRight) && + if (_scaleDivInfo) { + // See whether the cursor is no longer inside the hidden scale div. + // If so, show it again. + if ((offsetX < scaleDivLeft || offsetX > scaleDivRight) || + (offsetY < scaleDivTop || offsetY > scaleDivBottom)) { + _scaleDivInfo = null; + $("#img-scale").show(); + } + } else if ((offsetX >= scaleDivLeft && offsetX <= scaleDivRight) && (offsetY >= scaleDivTop && offsetY <= scaleDivBottom)) { // Handle mouse inside image scale div. // But hide it only if the pixel under mouse is also in the image. @@ -116,14 +133,6 @@ define(function (require, exports, module) { bottom: scaleDivBottom}; $("#img-scale").hide(); } - } else if (_scaleDivInfo) { - // See whether the cursor is no longer inside the hidden scale div. - // If so, show it again. - if ((offsetX < _scaleDivInfo.left || offsetX > _scaleDivInfo.right) || - (offsetY < _scaleDivInfo.top || offsetY > _scaleDivInfo.bottom)) { - _scaleDivInfo = null; - $("#img-scale").show(); - } } } @@ -156,7 +165,7 @@ define(function (require, exports, module) { infoWidth2 = 120, // info div width 104px (for 4-digit image width) + vertical toolbar width 16px tipOffsetX = 10, // adjustment for info div left from x coordinate of cursor tipOffsetY = -54, // adjustment for info div top from y coordinate of cursor - tipMinusOffsetX1 = -84, // for less than 4-digit image width + tipMinusOffsetX1 = -82, // for less than 4-digit image width tipMinusOffsetX2 = -90; // for 4-digit image width // Adjust left, top, x and y based on which element contains the cursor. @@ -256,7 +265,6 @@ define(function (require, exports, module) { offsetY < imagePos.top || offsetY >= bottom) { $("#img-tip").hide(); $(".img-guide").hide(); -// $("#img-scale").show(); } } @@ -320,6 +328,14 @@ define(function (require, exports, module) { $(EditorManager).on("removeCustomViewer", _removeListeners); $(DocumentManager).on("fileNameChange", _onFileNameChange); + // If the image size is too narrow in width or height, then + // show the crosshair cursor since guides are almost invisible + // in narrow images. + if (this.naturalWidth < 20 || this.naturalHeight < 20) { + $("#img-preview").css("cursor", "crosshair"); + $(".img-guide").css("cursor", "crosshair"); + } + $("#img-tip").hide(); $(".img-guide").hide(); $("#img").on("mousemove", "#img-preview, #img-scale, #img-tip, .img-guide", _showImageTip) diff --git a/src/styles/brackets.less b/src/styles/brackets.less index 7f885583cb5..a67745c2874 100644 --- a/src/styles/brackets.less +++ b/src/styles/brackets.less @@ -301,6 +301,12 @@ a, img { #img-preview { cursor: none; } + + .img-cursor { + /*cursor: url("images/crosshair_cursor.png") 11 11, auto; /* for non-webkit-fallback * + cursor: -webkit-image-set( url("images/crosshair_cursor.png") 1x, url("images/crosshair_cursor@2x.png") 2x ) 11 11, auto;*/ + cursor: crosshair; + } #img-scale { display: block; From 160cedc458fc2cc348a1092bc46bad31f2538e09 Mon Sep 17 00:00:00 2001 From: RaymondLim Date: Mon, 11 Nov 2013 13:58:59 -0800 Subject: [PATCH 13/16] Adjust the color of guides with alpha value. --- src/styles/images/horizontal-dash.svg | 2 +- src/styles/images/vertical-dash.svg | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/styles/images/horizontal-dash.svg b/src/styles/images/horizontal-dash.svg index 41b40a6f1d1..f5034b79866 100644 --- a/src/styles/images/horizontal-dash.svg +++ b/src/styles/images/horizontal-dash.svg @@ -1,4 +1,4 @@ - + diff --git a/src/styles/images/vertical-dash.svg b/src/styles/images/vertical-dash.svg index ad97c732195..d3234ee6c89 100644 --- a/src/styles/images/vertical-dash.svg +++ b/src/styles/images/vertical-dash.svg @@ -1,4 +1,4 @@ - + From 0ca7e552d3ab8d83582106b75bd75161b57eea88 Mon Sep 17 00:00:00 2001 From: RaymondLim Date: Mon, 11 Nov 2013 14:11:59 -0800 Subject: [PATCH 14/16] Remove the custom cursor files no longer needed. --- src/styles/images/crosshair_cursor.png | Bin 1035 -> 0 bytes src/styles/images/crosshair_cursor@2x.png | Bin 1057 -> 0 bytes 2 files changed, 0 insertions(+), 0 deletions(-) delete mode 100644 src/styles/images/crosshair_cursor.png delete mode 100644 src/styles/images/crosshair_cursor@2x.png diff --git a/src/styles/images/crosshair_cursor.png b/src/styles/images/crosshair_cursor.png deleted file mode 100644 index f480d06b42b98ec480858226a0841aa59057873c..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1035 zcmaJ=O=#0l9FGjD>_fcG=?;%f@UuqUcbBoi+wueCgWFLtWtIz5nC)`~QFck9Q+8 zJlNHKsGT5)uGEm2#rr{b?epOOmr8UKZ#^iHMRifl*FiodT0hZOF zss%@?!#TM+E^`Vwa2iA$9y`z=l7OR4=r->}$+}-2pWSPU1a$}+kCI!W^63l^3=4vw zFX)wNCICX5j|nn?Fmnp{X@;d}mSR{h{gmJD#R#uGr6bAl>ULk#g9vTeQca{9I&eKo1!EFLNvw1$1{BaEVPYDOUC^u_BF}4cDo01fmjVM z8uFwDb(9jLB);(}s=~*({!mPySvJXv43l8vT!0lqF)>NUg+y57n%tCbBT1KGldJA< z{kw8`!GaPptejy?G`p868_2NBh6w}#97{{Gs=M}ax3&$b&{8i!C21KNs27JTYmMcZS~o*=l)E5{$6OVR$J&eLOwV;_pax2_v?FT&HuJwKmj47WAne#7eHs7|={bC_M_NI4bbmRN=_u<9a trOnRXN2}{6gLiL7inFV?HU_Q;(|d>zJ?NSKQ>nVoGnE(?AI2|S{R{1iQPThb diff --git a/src/styles/images/crosshair_cursor@2x.png b/src/styles/images/crosshair_cursor@2x.png deleted file mode 100644 index 9c165659a06aa86889ae66c73c168111e615e484..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1057 zcmaJ=&rj1(9Iq@9T|y)=N;DjvU5uKzwOtv|hC;S=gBdpFScH?>wGURe_LcU*3h^LB zqa=DTaNy#JixC5VfIsl6iF(jzA_qMY4;qh%iP6`wfrrUU+V}l_^Zk6kpYM-1pUw2Q z_)q#NifTy>$T@Pe-goFA`HwVh-zL`yoEXK!Xbe{r8&XjX6(C3%$~eqHMVp>@3418Y z7tr&gcr-mIs>lc_o=?a%EP|$}o<7%7)Dpy?0LOJxqJKPDr-80X^hhMlrmZ+E>H{-2 z9G=PK)tQniXmnpM=y637z<^i*u2D7}(Us_GT#?A0nV~_|1(zgxhty~~3*yLzAQFlM zRhH`jT|$V9a2?&;c@Snfo?&^0g%xa5zXjg3h#w6*p))fqDcPI;yQ(SVt!CA}R$mi6xpa-6_Ga(&^p6 zrc-MaX&K`x7Q=;D#xT6Ps@@LH!95xcy`B8D1(_Ul(4?)Bd5i_>VA8w&6M2q=jVL2^ z(tsvT$r4R0Ax+mrj!$r0BAnopoh%Xfn9#w;yP|TEjl~n)vQWpSOb08b3hP*X4=eAB z72`HkFtYOqmFv^X77<2H5m_J}2WQiYs+*pE&g*TBDzx<}s3mP=fNFC@y#ax!(AgD@ zC8KGaB~zs-9^*H<=Ym%hLG z4ScBSX6vu*hX;u9X>arKbno)Q?Bdkx`^U0Aqwx6DMBA%-XM7vx!aL)`R{!U Date: Mon, 11 Nov 2013 14:21:44 -0800 Subject: [PATCH 15/16] Remove the unused css rule. --- src/styles/brackets.less | 6 ------ 1 file changed, 6 deletions(-) diff --git a/src/styles/brackets.less b/src/styles/brackets.less index a67745c2874..d2339b69daf 100644 --- a/src/styles/brackets.less +++ b/src/styles/brackets.less @@ -302,12 +302,6 @@ a, img { cursor: none; } - .img-cursor { - /*cursor: url("images/crosshair_cursor.png") 11 11, auto; /* for non-webkit-fallback * - cursor: -webkit-image-set( url("images/crosshair_cursor.png") 1x, url("images/crosshair_cursor@2x.png") 2x ) 11 11, auto;*/ - cursor: crosshair; - } - #img-scale { display: block; position: absolute; From 925997aabd440da495c1fada5999331d2515459a Mon Sep 17 00:00:00 2001 From: RaymondLim Date: Mon, 11 Nov 2013 15:41:14 -0800 Subject: [PATCH 16/16] Made some changes for review feedback. --- src/editor/ImageViewer.js | 20 ++++++++++++-------- 1 file changed, 12 insertions(+), 8 deletions(-) diff --git a/src/editor/ImageViewer.js b/src/editor/ImageViewer.js index 1e6e59bf899..e4bf8a1585b 100644 --- a/src/editor/ImageViewer.js +++ b/src/editor/ImageViewer.js @@ -298,6 +298,8 @@ define(function (require, exports, module) { var relPath = ProjectManager.makeProjectRelativeIfPossible(fullPath); _scale = 100; // initialize to 100 + _scaleDivInfo = null; + $("#img-path").text(relPath) .attr("title", relPath); $("#img-preview").on("load", function () { @@ -306,6 +308,7 @@ define(function (require, exports, module) { var dimensionString = _naturalWidth + " × " + this.naturalHeight + " " + Strings.UNIT_PIXELS; // get image size var file = FileSystem.getFileForPath(fullPath); + var minimumPixels = 20; // for showing crosshair cursor file.stat(function (err, stat) { if (err) { $("#img-data").html(dimensionString); @@ -328,20 +331,21 @@ define(function (require, exports, module) { $(EditorManager).on("removeCustomViewer", _removeListeners); $(DocumentManager).on("fileNameChange", _onFileNameChange); - // If the image size is too narrow in width or height, then - // show the crosshair cursor since guides are almost invisible - // in narrow images. - if (this.naturalWidth < 20 || this.naturalHeight < 20) { - $("#img-preview").css("cursor", "crosshair"); - $(".img-guide").css("cursor", "crosshair"); - } - $("#img-tip").hide(); $(".img-guide").hide(); $("#img").on("mousemove", "#img-preview, #img-scale, #img-tip, .img-guide", _showImageTip) .on("mouseleave", "#img-preview, #img-scale, #img-tip, .img-guide", _hideImageTip); _updateScale($(this).width()); + minimumPixels = Math.floor(minimumPixels * 100 / _scale); + + // If the image size is too narrow in width or height, then + // show the crosshair cursor since guides are almost invisible + // in narrow images. + if (this.naturalWidth < minimumPixels || this.naturalHeight < minimumPixels) { + $("#img-preview").css("cursor", "crosshair"); + $(".img-guide").css("cursor", "crosshair"); + } }); }