├── .gitignore ├── README.md ├── demo.html ├── LICENSE └── jquery.imageviewerclient.js /.gitignore: -------------------------------------------------------------------------------- 1 | jquery-vendor.js 2 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | kb-imageviewer-client 2 | ===================== 3 | 4 | Interactive client for the imageviewer service of the KB 5 | -------------------------------------------------------------------------------- /demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 34 | 35 | 36 | 37 |
38 | 39 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | GNU GENERAL PUBLIC LICENSE 2 | Version 2, June 1991 3 | 4 | Copyright (C) 1989, 1991 Free Software Foundation, Inc., 5 | 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA 6 | Everyone is permitted to copy and distribute verbatim copies 7 | of this license document, but changing it is not allowed. 8 | 9 | Preamble 10 | 11 | The licenses for most software are designed to take away your 12 | freedom to share and change it. By contrast, the GNU General Public 13 | License is intended to guarantee your freedom to share and change free 14 | software--to make sure the software is free for all its users. This 15 | General Public License applies to most of the Free Software 16 | Foundation's software and to any other program whose authors commit to 17 | using it. (Some other Free Software Foundation software is covered by 18 | the GNU Lesser General Public License instead.) You can apply it to 19 | your programs, too. 20 | 21 | When we speak of free software, we are referring to freedom, not 22 | price. Our General Public Licenses are designed to make sure that you 23 | have the freedom to distribute copies of free software (and charge for 24 | this service if you wish), that you receive source code or can get it 25 | if you want it, that you can change the software or use pieces of it 26 | in new free programs; and that you know you can do these things. 27 | 28 | To protect your rights, we need to make restrictions that forbid 29 | anyone to deny you these rights or to ask you to surrender the rights. 30 | These restrictions translate to certain responsibilities for you if you 31 | distribute copies of the software, or if you modify it. 32 | 33 | For example, if you distribute copies of such a program, whether 34 | gratis or for a fee, you must give the recipients all the rights that 35 | you have. You must make sure that they, too, receive or can get the 36 | source code. And you must show them these terms so they know their 37 | rights. 38 | 39 | We protect your rights with two steps: (1) copyright the software, and 40 | (2) offer you this license which gives you legal permission to copy, 41 | distribute and/or modify the software. 42 | 43 | Also, for each author's protection and ours, we want to make certain 44 | that everyone understands that there is no warranty for this free 45 | software. If the software is modified by someone else and passed on, we 46 | want its recipients to know that what they have is not the original, so 47 | that any problems introduced by others will not reflect on the original 48 | authors' reputations. 49 | 50 | Finally, any free program is threatened constantly by software 51 | patents. We wish to avoid the danger that redistributors of a free 52 | program will individually obtain patent licenses, in effect making the 53 | program proprietary. To prevent this, we have made it clear that any 54 | patent must be licensed for everyone's free use or not licensed at all. 55 | 56 | The precise terms and conditions for copying, distribution and 57 | modification follow. 58 | 59 | GNU GENERAL PUBLIC LICENSE 60 | TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION 61 | 62 | 0. This License applies to any program or other work which contains 63 | a notice placed by the copyright holder saying it may be distributed 64 | under the terms of this General Public License. The "Program", below, 65 | refers to any such program or work, and a "work based on the Program" 66 | means either the Program or any derivative work under copyright law: 67 | that is to say, a work containing the Program or a portion of it, 68 | either verbatim or with modifications and/or translated into another 69 | language. (Hereinafter, translation is included without limitation in 70 | the term "modification".) Each licensee is addressed as "you". 71 | 72 | Activities other than copying, distribution and modification are not 73 | covered by this License; they are outside its scope. The act of 74 | running the Program is not restricted, and the output from the Program 75 | is covered only if its contents constitute a work based on the 76 | Program (independent of having been made by running the Program). 77 | Whether that is true depends on what the Program does. 78 | 79 | 1. You may copy and distribute verbatim copies of the Program's 80 | source code as you receive it, in any medium, provided that you 81 | conspicuously and appropriately publish on each copy an appropriate 82 | copyright notice and disclaimer of warranty; keep intact all the 83 | notices that refer to this License and to the absence of any warranty; 84 | and give any other recipients of the Program a copy of this License 85 | along with the Program. 86 | 87 | You may charge a fee for the physical act of transferring a copy, and 88 | you may at your option offer warranty protection in exchange for a fee. 89 | 90 | 2. You may modify your copy or copies of the Program or any portion 91 | of it, thus forming a work based on the Program, and copy and 92 | distribute such modifications or work under the terms of Section 1 93 | above, provided that you also meet all of these conditions: 94 | 95 | a) You must cause the modified files to carry prominent notices 96 | stating that you changed the files and the date of any change. 97 | 98 | b) You must cause any work that you distribute or publish, that in 99 | whole or in part contains or is derived from the Program or any 100 | part thereof, to be licensed as a whole at no charge to all third 101 | parties under the terms of this License. 102 | 103 | c) If the modified program normally reads commands interactively 104 | when run, you must cause it, when started running for such 105 | interactive use in the most ordinary way, to print or display an 106 | announcement including an appropriate copyright notice and a 107 | notice that there is no warranty (or else, saying that you provide 108 | a warranty) and that users may redistribute the program under 109 | these conditions, and telling the user how to view a copy of this 110 | License. (Exception: if the Program itself is interactive but 111 | does not normally print such an announcement, your work based on 112 | the Program is not required to print an announcement.) 113 | 114 | These requirements apply to the modified work as a whole. If 115 | identifiable sections of that work are not derived from the Program, 116 | and can be reasonably considered independent and separate works in 117 | themselves, then this License, and its terms, do not apply to those 118 | sections when you distribute them as separate works. But when you 119 | distribute the same sections as part of a whole which is a work based 120 | on the Program, the distribution of the whole must be on the terms of 121 | this License, whose permissions for other licensees extend to the 122 | entire whole, and thus to each and every part regardless of who wrote it. 123 | 124 | Thus, it is not the intent of this section to claim rights or contest 125 | your rights to work written entirely by you; rather, the intent is to 126 | exercise the right to control the distribution of derivative or 127 | collective works based on the Program. 128 | 129 | In addition, mere aggregation of another work not based on the Program 130 | with the Program (or with a work based on the Program) on a volume of 131 | a storage or distribution medium does not bring the other work under 132 | the scope of this License. 133 | 134 | 3. You may copy and distribute the Program (or a work based on it, 135 | under Section 2) in object code or executable form under the terms of 136 | Sections 1 and 2 above provided that you also do one of the following: 137 | 138 | a) Accompany it with the complete corresponding machine-readable 139 | source code, which must be distributed under the terms of Sections 140 | 1 and 2 above on a medium customarily used for software interchange; or, 141 | 142 | b) Accompany it with a written offer, valid for at least three 143 | years, to give any third party, for a charge no more than your 144 | cost of physically performing source distribution, a complete 145 | machine-readable copy of the corresponding source code, to be 146 | distributed under the terms of Sections 1 and 2 above on a medium 147 | customarily used for software interchange; or, 148 | 149 | c) Accompany it with the information you received as to the offer 150 | to distribute corresponding source code. (This alternative is 151 | allowed only for noncommercial distribution and only if you 152 | received the program in object code or executable form with such 153 | an offer, in accord with Subsection b above.) 154 | 155 | The source code for a work means the preferred form of the work for 156 | making modifications to it. For an executable work, complete source 157 | code means all the source code for all modules it contains, plus any 158 | associated interface definition files, plus the scripts used to 159 | control compilation and installation of the executable. However, as a 160 | special exception, the source code distributed need not include 161 | anything that is normally distributed (in either source or binary 162 | form) with the major components (compiler, kernel, and so on) of the 163 | operating system on which the executable runs, unless that component 164 | itself accompanies the executable. 165 | 166 | If distribution of executable or object code is made by offering 167 | access to copy from a designated place, then offering equivalent 168 | access to copy the source code from the same place counts as 169 | distribution of the source code, even though third parties are not 170 | compelled to copy the source along with the object code. 171 | 172 | 4. You may not copy, modify, sublicense, or distribute the Program 173 | except as expressly provided under this License. Any attempt 174 | otherwise to copy, modify, sublicense or distribute the Program is 175 | void, and will automatically terminate your rights under this License. 176 | However, parties who have received copies, or rights, from you under 177 | this License will not have their licenses terminated so long as such 178 | parties remain in full compliance. 179 | 180 | 5. You are not required to accept this License, since you have not 181 | signed it. However, nothing else grants you permission to modify or 182 | distribute the Program or its derivative works. These actions are 183 | prohibited by law if you do not accept this License. Therefore, by 184 | modifying or distributing the Program (or any work based on the 185 | Program), you indicate your acceptance of this License to do so, and 186 | all its terms and conditions for copying, distributing or modifying 187 | the Program or works based on it. 188 | 189 | 6. Each time you redistribute the Program (or any work based on the 190 | Program), the recipient automatically receives a license from the 191 | original licensor to copy, distribute or modify the Program subject to 192 | these terms and conditions. You may not impose any further 193 | restrictions on the recipients' exercise of the rights granted herein. 194 | You are not responsible for enforcing compliance by third parties to 195 | this License. 196 | 197 | 7. If, as a consequence of a court judgment or allegation of patent 198 | infringement or for any other reason (not limited to patent issues), 199 | conditions are imposed on you (whether by court order, agreement or 200 | otherwise) that contradict the conditions of this License, they do not 201 | excuse you from the conditions of this License. If you cannot 202 | distribute so as to satisfy simultaneously your obligations under this 203 | License and any other pertinent obligations, then as a consequence you 204 | may not distribute the Program at all. For example, if a patent 205 | license would not permit royalty-free redistribution of the Program by 206 | all those who receive copies directly or indirectly through you, then 207 | the only way you could satisfy both it and this License would be to 208 | refrain entirely from distribution of the Program. 209 | 210 | If any portion of this section is held invalid or unenforceable under 211 | any particular circumstance, the balance of the section is intended to 212 | apply and the section as a whole is intended to apply in other 213 | circumstances. 214 | 215 | It is not the purpose of this section to induce you to infringe any 216 | patents or other property right claims or to contest validity of any 217 | such claims; this section has the sole purpose of protecting the 218 | integrity of the free software distribution system, which is 219 | implemented by public license practices. Many people have made 220 | generous contributions to the wide range of software distributed 221 | through that system in reliance on consistent application of that 222 | system; it is up to the author/donor to decide if he or she is willing 223 | to distribute software through any other system and a licensee cannot 224 | impose that choice. 225 | 226 | This section is intended to make thoroughly clear what is believed to 227 | be a consequence of the rest of this License. 228 | 229 | 8. If the distribution and/or use of the Program is restricted in 230 | certain countries either by patents or by copyrighted interfaces, the 231 | original copyright holder who places the Program under this License 232 | may add an explicit geographical distribution limitation excluding 233 | those countries, so that distribution is permitted only in or among 234 | countries not thus excluded. In such case, this License incorporates 235 | the limitation as if written in the body of this License. 236 | 237 | 9. The Free Software Foundation may publish revised and/or new versions 238 | of the General Public License from time to time. Such new versions will 239 | be similar in spirit to the present version, but may differ in detail to 240 | address new problems or concerns. 241 | 242 | Each version is given a distinguishing version number. If the Program 243 | specifies a version number of this License which applies to it and "any 244 | later version", you have the option of following the terms and conditions 245 | either of that version or of any later version published by the Free 246 | Software Foundation. If the Program does not specify a version number of 247 | this License, you may choose any version ever published by the Free Software 248 | Foundation. 249 | 250 | 10. If you wish to incorporate parts of the Program into other free 251 | programs whose distribution conditions are different, write to the author 252 | to ask for permission. For software which is copyrighted by the Free 253 | Software Foundation, write to the Free Software Foundation; we sometimes 254 | make exceptions for this. Our decision will be guided by the two goals 255 | of preserving the free status of all derivatives of our free software and 256 | of promoting the sharing and reuse of software generally. 257 | 258 | NO WARRANTY 259 | 260 | 11. BECAUSE THE PROGRAM IS LICENSED FREE OF CHARGE, THERE IS NO WARRANTY 261 | FOR THE PROGRAM, TO THE EXTENT PERMITTED BY APPLICABLE LAW. EXCEPT WHEN 262 | OTHERWISE STATED IN WRITING THE COPYRIGHT HOLDERS AND/OR OTHER PARTIES 263 | PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESSED 264 | OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF 265 | MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE. THE ENTIRE RISK AS 266 | TO THE QUALITY AND PERFORMANCE OF THE PROGRAM IS WITH YOU. SHOULD THE 267 | PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF ALL NECESSARY SERVICING, 268 | REPAIR OR CORRECTION. 269 | 270 | 12. IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING 271 | WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MAY MODIFY AND/OR 272 | REDISTRIBUTE THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, 273 | INCLUDING ANY GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING 274 | OUT OF THE USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED 275 | TO LOSS OF DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY 276 | YOU OR THIRD PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER 277 | PROGRAMS), EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE 278 | POSSIBILITY OF SUCH DAMAGES. 279 | 280 | END OF TERMS AND CONDITIONS 281 | 282 | How to Apply These Terms to Your New Programs 283 | 284 | If you develop a new program, and you want it to be of the greatest 285 | possible use to the public, the best way to achieve this is to make it 286 | free software which everyone can redistribute and change under these terms. 287 | 288 | To do so, attach the following notices to the program. It is safest 289 | to attach them to the start of each source file to most effectively 290 | convey the exclusion of warranty; and each file should have at least 291 | the "copyright" line and a pointer to where the full notice is found. 292 | 293 | {description} 294 | Copyright (C) {year} {fullname} 295 | 296 | This program is free software; you can redistribute it and/or modify 297 | it under the terms of the GNU General Public License as published by 298 | the Free Software Foundation; either version 2 of the License, or 299 | (at your option) any later version. 300 | 301 | This program is distributed in the hope that it will be useful, 302 | but WITHOUT ANY WARRANTY; without even the implied warranty of 303 | MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the 304 | GNU General Public License for more details. 305 | 306 | You should have received a copy of the GNU General Public License along 307 | with this program; if not, write to the Free Software Foundation, Inc., 308 | 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA. 309 | 310 | Also add information on how to contact you by electronic and paper mail. 311 | 312 | If the program is interactive, make it output a short notice like this 313 | when it starts in an interactive mode: 314 | 315 | Gnomovision version 69, Copyright (C) year name of author 316 | Gnomovision comes with ABSOLUTELY NO WARRANTY; for details type `show w'. 317 | This is free software, and you are welcome to redistribute it 318 | under certain conditions; type `show c' for details. 319 | 320 | The hypothetical commands `show w' and `show c' should show the appropriate 321 | parts of the General Public License. Of course, the commands you use may 322 | be called something other than `show w' and `show c'; they could even be 323 | mouse-clicks or menu items--whatever suits your program. 324 | 325 | You should also get your employer (if you work as a programmer) or your 326 | school, if any, to sign a "copyright disclaimer" for the program, if 327 | necessary. Here is a sample; alter the names: 328 | 329 | Yoyodyne, Inc., hereby disclaims all copyright interest in the program 330 | `Gnomovision' (which makes passes at compilers) written by James Hacker. 331 | 332 | {signature of Ty Coon}, 1 April 1989 333 | Ty Coon, President of Vice 334 | 335 | This General Public License does not permit incorporating your program into 336 | proprietary programs. If your program is a subroutine library, you may 337 | consider it more useful to permit linking proprietary applications with the 338 | library. If this is what you want to do, use the GNU Lesser General 339 | Public License instead of this License. 340 | 341 | -------------------------------------------------------------------------------- /jquery.imageviewerclient.js: -------------------------------------------------------------------------------- 1 | /* 2 | * jquery-imageviewerclient.js: interactive client for the imageviewer service of the KB 3 | * Copyright (C) 2014 R. van der Ark, Koninklijke Bibliotheek - National Library of the Netherlands 4 | * 5 | * This program is free software: you can redistribute it and/or modify 6 | * it under the terms of the GNU General Public License as published by 7 | * the Free Software Foundation, either version 3 of the License, or 8 | * (at your option) any later version. 9 | * 10 | * This program is distributed in the hope that it will be useful, 11 | * but WITHOUT ANY WARRANTY; without even the implied warranty of 12 | * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the 13 | * GNU General Public License for more details. 14 | * 15 | * You should have received a copy of the GNU General Public License 16 | * along with this program. If not, see . 17 | */ 18 | 19 | /*global window, history, jQuery*/ 20 | (function ($) { 21 | /** 22 | * Builds a client for the KB imageviewer service 23 | * where options.href contains a :page part to be replaced. 24 | * @class imageViewerClient 25 | * @member jQuery.fn 26 | * @param {String} serviceUrl the base url of the service 27 | * @param {Object} opts 28 | * @returns {jQuery} the element as an interactive image canvas 29 | */ 30 | $.fn.imageViewerClient = function (serviceUrl, opts) { 31 | var _self = this, 32 | popup = null, 33 | previewImage = null, 34 | canvasImage = null, 35 | spinner = null, 36 | storedWidth = 0, 37 | slider = opts.slider, 38 | minimap = opts.minimap, 39 | minimapOptions = opts.minimapOptions, 40 | words = opts.params.words || null, 41 | coords = opts.params.coords || null, 42 | userCallback = opts.userCallback || null, 43 | previewScale = opts.previewScale || 0.2, 44 | maxScale = opts.maxScale || 4.0, 45 | minScale = opts.minScale || 0.01, 46 | fullImageDims = null, 47 | sliding = false, 48 | initialZoom = opts.initialZoom || "scaleToFullWidth", 49 | canvas2DContext = _self.get(0).getContext('2d'), 50 | previewParams = $.extend({}, opts.params), // Used to retrieve preview image (blurry thing) 51 | params = $.extend({}, opts.params), // Used to retrieve the canvas image 52 | storedCenter = null, 53 | _overlaysDrawn = []; 54 | 55 | 56 | $(_self).attr("width", _self.width()); 57 | $(_self).attr("height", _self.height()); 58 | canvas2DContext.width = _self.width(); 59 | canvas2DContext.height = _self.height(); 60 | 61 | if (opts.legacy) { 62 | $.extend(previewParams, { 63 | zoom: previewScale 64 | }); 65 | if (opts.params.format && opts.params.format === "SGD") { 66 | $.extend(previewParams, {s: 2.083}); 67 | } 68 | } else { 69 | $.extend(previewParams, { 70 | s: previewScale 71 | }); 72 | } 73 | 74 | $.extend(params, { 75 | r: 0, 76 | s: 1.0, 77 | x: 0, 78 | y: 0, 79 | w: _self.width(), 80 | h: _self.height() 81 | }); 82 | 83 | if (opts.spinner) { 84 | spinner = $("").attr("src", opts.spinner).addClass("spinner"); 85 | _self.before(spinner); 86 | } 87 | 88 | function normalize(orig) { 89 | var p = $.extend(true, {}, orig); 90 | if (opts.legacy) { 91 | p.zoom = p.s; 92 | delete (p.s); 93 | if (p.x) { 94 | p.x /= p.zoom; 95 | } 96 | if (p.y) { 97 | p.y /= p.zoom; 98 | } 99 | if (p.w) { 100 | p.w /= p.zoom; 101 | } 102 | if (p.h) { 103 | p.h /= p.zoom; 104 | } 105 | if (p.format && p.format === "SGD") { 106 | p.s = 2.083; 107 | } 108 | } 109 | if (p.x) { 110 | p.x = parseInt(p.x, 10); 111 | } 112 | if (p.y) { 113 | p.y = parseInt(p.y, 10); 114 | } 115 | if (p.w) { 116 | p.w = parseInt(p.w, 10); 117 | } 118 | if (p.h) { 119 | p.h = parseInt(p.h, 10); 120 | } 121 | return p; 122 | } 123 | 124 | function repositionMinimap() { 125 | if (minimap) { 126 | minimap.trigger("repositionViewerZone", { 127 | x: params.x / params.s, 128 | y: params.y / params.s, 129 | w: params.w / params.s, 130 | h: params.h / params.s 131 | }); 132 | } 133 | } 134 | 135 | 136 | function initMinimap() { 137 | if (minimap && minimapOptions) { 138 | var minimapScale = minimap.width() / fullImageDims.w, 139 | p = { 140 | r: params.r, 141 | s: minimapScale, 142 | id: params.id, 143 | useresolver: params.useresolver === "false" ? false : true 144 | }, 145 | img = serviceUrl + "?" + new Date().getTime() + "&" + $.param(normalize(p)); 146 | 147 | minimap.html(""); 148 | minimap.minimap(minimapScale, fullImageDims.h * minimapScale, 149 | $.extend(minimapOptions, {image: img})); 150 | setTimeout(repositionMinimap, 200); 151 | } 152 | } 153 | 154 | 155 | function onImageError() { 156 | if (spinner) { spinner.hide(); } 157 | if (opts.onImageError) { opts.onImageError(); return; } 158 | 159 | var errorMessage = $("
"), 160 | tryAgain = $("") 161 | .attr("href", window.location.href.replace(/#.*$/, '')) 162 | .html(opts.tryAgainMessage || "Opnieuw proberen"); 163 | if ($.browser.msie) { 164 | tryAgain.click(function () { history.go(0); }); 165 | } 166 | errorMessage.html(opts.errorMessage || 167 | "Er is iets fout gegaan bij het ophalen van de afbeelding. "); 168 | errorMessage.append(tryAgain); 169 | if (_self.prop("tagName").toLowerCase() === 'canvas') { 170 | $(_self.parents()[0]).prepend(errorMessage); 171 | } else { 172 | _self.append(errorMessage); 173 | } 174 | } 175 | 176 | function onCanvasImageLoad(image) { 177 | canvas2DContext.clearRect(0, 0, canvas2DContext.width, canvas2DContext.height); 178 | var x = 0; 179 | if (image.width < canvas2DContext.width) { 180 | x += Math.floor((canvas2DContext.width - image.width) / 2); 181 | } 182 | storedWidth = image.width; 183 | canvas2DContext.drawImage(image, x, 0); 184 | } 185 | 186 | function onPreviewImageLoad(image, callback) { 187 | if (!fullImageDims) { 188 | fullImageDims = { 189 | w: image.width / previewScale, 190 | h: image.height / previewScale 191 | }; 192 | var trans = image.width / _self.width(); 193 | 194 | if (spinner) { 195 | spinner.hide(); 196 | } 197 | canvas2DContext.clearRect(0, 0, canvas2DContext.width, canvas2DContext.height); 198 | 199 | if (minimap) { initMinimap(); } 200 | if (slider) { slider.slider("enable"); } 201 | if (callback) { callback(true); } 202 | if (userCallback) { 203 | userCallback(); 204 | } else { 205 | canvas2DContext.drawImage(image, 0, 0, _self.width(), parseInt(image.height / trans, 10)); 206 | } 207 | $(image).off("load"); 208 | } 209 | 210 | // de minimale zoom factor is ingesteld op de waarde waarbij de 211 | // afbeelding in het geheel getoond kan worden. 212 | // de initiele waarden van de variable minScale en object slider 213 | // worden dus opnieuw herschreven. 214 | if (params.r === 0 || params.r === 180) { 215 | minScale = opts.minScale || _self.height() / fullImageDims.h; 216 | } else { 217 | minScale = opts.minScale || _self.width() / fullImageDims.w; 218 | } 219 | if (slider) { 220 | slider.slider({ 221 | min: Math.floor(minScale * 100) 222 | }); 223 | } 224 | } 225 | 226 | 227 | 228 | function loadPreviewImage(callback) { 229 | if (spinner) { 230 | spinner.show(); 231 | } 232 | previewImage = $("") 233 | .error(onImageError) 234 | .on("load", function () { 235 | onPreviewImageLoad(this, callback); 236 | }) 237 | .attr("src", serviceUrl + "?" + new Date().getTime() + "&" + $.param(previewParams)); 238 | } 239 | 240 | function loadCanvas() { 241 | if (canvasImage) { 242 | canvasImage.remove(); 243 | } 244 | canvasImage = $("") 245 | .error(onImageError) 246 | .on("load", function () { onCanvasImageLoad(this); }); 247 | canvasImage[0].src = serviceUrl + "?" + 248 | new Date().getTime() + "&" + $.param(normalize(params)); 249 | 250 | if (opts.onpaint) { 251 | opts.onpaint(normalize(params)); 252 | } 253 | } 254 | 255 | function setRealCanvasPosition(x, y) { 256 | if (fullImageDims) { 257 | params.x = x + _self.width() > (fullImageDims.w * params.s) ? 258 | (fullImageDims.w * params.s) - _self.width() : x; 259 | params.y = y + _self.height() > (fullImageDims.h * params.s) ? 260 | (fullImageDims.h * params.s) - _self.height() : y; 261 | } 262 | params.x = params.x < 0 ? 0 : params.x; 263 | params.y = params.y < 0 ? 0 : params.y; 264 | repositionMinimap(); 265 | } 266 | 267 | function getCenteredX() { 268 | var x = 0; 269 | if (storedWidth < canvas2DContext.width) { 270 | x += Math.floor((canvas2DContext.width - storedWidth) / 2); 271 | } 272 | return x; 273 | } 274 | 275 | function centerParams(orig) { 276 | var p = $.extend(true, {}, orig), 277 | diff; 278 | 279 | if (fullImageDims.w * orig.s < _self.width() - 1) { 280 | diff = _self.width() - fullImageDims.w * orig.s; 281 | p.x -= diff / 2; 282 | } 283 | return p; 284 | } 285 | 286 | function scaleCanvas(commit) { 287 | if (fullImageDims) { 288 | setRealCanvasPosition(params.x, params.y); 289 | if (previewImage) { 290 | canvas2DContext.clearRect(0, 0, canvas2DContext.width, canvas2DContext.height); 291 | var p = centerParams(params); 292 | canvas2DContext.drawImage(previewImage.get(0), -p.x, -params.y, 293 | parseInt(fullImageDims.w * params.s, 10), parseInt(fullImageDims.h * params.s, 10)); 294 | } 295 | 296 | if (slider) { 297 | slider.slider("value", Math.ceil(params.s * 100)); 298 | } 299 | 300 | if (commit) { 301 | loadCanvas(); 302 | } 303 | if (opts.onzoom) { 304 | opts.onzoom(params.s); 305 | } 306 | } 307 | } 308 | 309 | function rotateCanvas() { 310 | fullImageDims = null; 311 | previewParams.r = params.r; 312 | loadPreviewImage(scaleCanvas); 313 | } 314 | 315 | function storeCanvasCenter(center) { 316 | var top = _self.offset().top - $(window).scrollTop(), 317 | left = _self.offset().left, 318 | x = center && center.x ? center.x : _self.width() / 2 + left, 319 | y = center && center.y ? center.y : _self.height() / 2 + top; 320 | 321 | storedCenter = { 322 | x: (params.x + (x || _self.width() / 2) - left) / params.s, 323 | y: (params.y + (y || _self.height() / 2) - top) / params.s 324 | }; 325 | } 326 | 327 | function moveToStoredCenter(commit) { 328 | if (storedCenter && storedCenter.x && storedCenter.y) { 329 | var x = (storedCenter.x * params.s) - (_self.width() / 2), 330 | y = (storedCenter.y * params.s) - (_self.height() / 2); 331 | setRealCanvasPosition(x, y); 332 | scaleCanvas(commit); 333 | } 334 | } 335 | 336 | function setHighlights(set) { 337 | if (set && params.words) { return; } // nothing changed 338 | if (!set && !params.words) { return; } // nothing changed 339 | 340 | if (set && words && coords) { 341 | params.words = words; 342 | params.coords = coords; 343 | previewParams.words = words; 344 | previewParams.coords = coords; 345 | } else { 346 | delete (params.words); 347 | delete (params.coords); 348 | delete (previewParams.words); 349 | delete (previewParams.coords); 350 | } 351 | if (previewImage) { 352 | previewImage.attr("src", 353 | serviceUrl + "?" + new Date().getTime() + "&" + $.param(previewParams)); 354 | loadCanvas(); 355 | } 356 | } 357 | 358 | this.bind("setHighlights", function (e, set) { 359 | setHighlights(set); 360 | }); 361 | 362 | this.bind("recalibrate", function (e) { 363 | params.w = $(this).width(); 364 | params.h = $(this).height(); 365 | canvas2DContext.height = params.h; 366 | canvas2DContext.width = params.w; 367 | scaleCanvas(true); 368 | }); 369 | 370 | 371 | this.bind("moveTo", function (e, dims, commit, rescale) { 372 | if (rescale) { 373 | dims.x *= params.s; 374 | dims.y *= params.s; 375 | } 376 | var x = dims.x, 377 | y = dims.y; 378 | 379 | setRealCanvasPosition(x, y); 380 | scaleCanvas(commit); 381 | }); 382 | 383 | this.bind("moveBy", function (e, dims, commit, rescale) { 384 | if (rescale) { 385 | dims.x *= params.s; 386 | dims.y *= params.s; 387 | } 388 | var x = params.x - dims.x, 389 | y = params.y - dims.y; 390 | 391 | setRealCanvasPosition(x, y); 392 | scaleCanvas(commit); 393 | }); 394 | 395 | this.bind("scaleBy", function (e, factor, commit, center, scalingTo, options) { 396 | var opts = options || {}; 397 | storeCanvasCenter(center); 398 | if (scalingTo) { 399 | params.s = factor; 400 | } else { 401 | params.s *= factor; 402 | } 403 | 404 | if (params.s > maxScale) { 405 | params.s = maxScale; 406 | } 407 | 408 | if (params.s < minScale) { 409 | params.s = minScale; 410 | } 411 | 412 | moveToStoredCenter(commit); 413 | if (opts.callback) { opts.callback(params.s); } 414 | }); 415 | 416 | this.bind("rotateBy", function (e, factor) { 417 | params.r += factor; 418 | if (params.r < 0) { 419 | params.r = 270; 420 | } else if (params.r > 270) { 421 | params.r = 0; 422 | } 423 | rotateCanvas(); 424 | }); 425 | 426 | this.bind("scaleToFullWidth", function (e) { 427 | if (fullImageDims && fullImageDims.w) { 428 | params.x = 0; 429 | params.s = (_self.width()) / fullImageDims.w; 430 | scaleCanvas(true); 431 | } 432 | }); 433 | 434 | this.bind("paint", function (e) { 435 | scaleCanvas(true); 436 | }); 437 | 438 | this.bind("scaleToFullHeight", function (e) { 439 | if (fullImageDims && fullImageDims.h) { 440 | params.y = 0; 441 | params.s = _self.height() / fullImageDims.h; 442 | scaleCanvas(true); 443 | } 444 | }); 445 | 446 | 447 | this.bind("redraw", function (e) { 448 | if (canvasImage.length > 0 && canvasImage.get(0).complete) { 449 | canvas2DContext.drawImage(canvasImage.get(0), getCenteredX(), 0); 450 | } else if (previewImage.length > 0 && previewImage.get(0).complete) { 451 | canvas2DContext.drawImage(previewImage.get(0), -params.x, -params.y, 452 | parseInt(fullImageDims.w * params.s, 10), parseInt(fullImageDims.h * params.s, 10)); 453 | } // else nothing to redraw 454 | }); 455 | 456 | this.bind("drawRect", function (e, c1, c2) { 457 | _self.trigger("redraw"); 458 | canvas2DContext.beginPath(); 459 | if (getCenteredX() > c1.x) { 460 | c1.x = getCenteredX() + 1; 461 | } 462 | if (getCenteredX() > c2.x) { 463 | c2.x = getCenteredX() + 1; 464 | } 465 | if (canvasImage[0].height < c1.y) { 466 | c1.y = canvasImage[0].height; 467 | } 468 | if (canvasImage[0].height < c2.y) { 469 | c2.y = canvasImage[0].height; 470 | } 471 | if (getCenteredX() + canvasImage[0].width < c1.x) { 472 | c1.x = getCenteredX() + canvasImage[0].width; 473 | } 474 | if (getCenteredX() + canvasImage[0].width < c2.x) { 475 | c2.x = getCenteredX() + canvasImage[0].width; 476 | } 477 | 478 | canvas2DContext.rect(c1.x, c1.y, c2.x - c1.x, c2.y - c1.y); 479 | canvas2DContext.lineWidth = opts.boxWidth || 1; 480 | canvas2DContext.strokeStyle = opts.boxStroke || "red"; 481 | canvas2DContext.fillStyle = opts.boxFill || "rgba(128,128,255,0.1)"; 482 | canvas2DContext.fill(); 483 | canvas2DContext.stroke(); 484 | canvas2DContext.closePath(); 485 | }); 486 | 487 | this.bind("addOverlays", function (e, data) { 488 | if (!data.zones || data.zones.length === 0 || 489 | $.inArray(data.id, _overlaysDrawn) > -1) { return; } 490 | 491 | var i; 492 | 493 | canvas2DContext.beginPath(); 494 | canvas2DContext.fillStyle = opts.overlayFill || "rgba(255,255,0,0.1)"; 495 | for (i = 0; i < data.zones.length; i++) { 496 | if (!data.zones[i].x) { break; } 497 | 498 | canvas2DContext.rect( 499 | parseInt(data.zones[i].x * parseFloat(params.s), 10) - params.x + getCenteredX(), 500 | parseInt(data.zones[i].y * parseFloat(params.s), 10) - params.y, 501 | parseInt(data.zones[i].w * parseFloat(params.s), 10), 502 | parseInt(data.zones[i].h * parseFloat(params.s), 10) 503 | ); 504 | } 505 | canvas2DContext.fill(); 506 | canvas2DContext.closePath(); 507 | _overlaysDrawn.push(data.id); 508 | }); 509 | 510 | this.bind("dropOverlays", function (e, data) { 511 | if (!canvasImage.get(0)) { 512 | return; 513 | } 514 | if (canvasImage.get(0).complete) { 515 | _self.trigger("redraw"); 516 | } else { 517 | canvasImage.on("load", function () { 518 | _self.trigger("redraw"); 519 | }); 520 | } 521 | _overlaysDrawn.splice(_overlaysDrawn.indexOf(data.id), 1); 522 | }); 523 | 524 | this.bind("save", function (e, scriptPath, fullImage) { 525 | var p = $.extend(true, {}, params); 526 | if (fullImage) { 527 | delete (p.w); 528 | delete (p.h); 529 | delete (p.x); 530 | delete (p.y); 531 | } 532 | if (popup) { 533 | popup.close(); 534 | } 535 | popup = window.open(scriptPath + "?" + new Date().getTime() + "&" + $.param(normalize(p))); 536 | return false; 537 | }); 538 | 539 | this.bind("clip", function (e, cc1, cc2) { 540 | if (opts.onClip) { 541 | var p = $.extend(true, {}, params); 542 | p.x = ((cc1.x < cc2.x ? cc1.x : cc2.x)) + p.x - getCenteredX(); 543 | p.y = ((cc1.y < cc2.y ? cc1.y : cc2.y)) + p.y; 544 | p.w = ((cc1.x < cc2.x ? cc2.x - cc1.x : cc1.x - cc2.x)); 545 | p.h = ((cc1.y < cc2.y ? cc2.y - cc1.y : cc1.y - cc2.y)); 546 | opts.onClip(serviceUrl + "?" + $.param(normalize(p)), normalize(p)); 547 | } 548 | 549 | }); 550 | 551 | function _init() { 552 | loadPreviewImage(function () { 553 | _self.trigger(initialZoom); 554 | }); 555 | } 556 | 557 | if (slider) { 558 | slider.slider({ 559 | max: Math.ceil(maxScale * 100), 560 | min: Math.ceil(minScale * 100), 561 | slide: function (e, x) { 562 | var newScale = x.value / 100.0; 563 | _self.trigger("scaleBy", [newScale, false, null, true]); 564 | scaleCanvas(false); 565 | sliding = true; 566 | $(this).attr("title", x.value + "%"); 567 | }, 568 | change: function (e, x) { 569 | if (sliding) { 570 | loadCanvas(); 571 | sliding = false; 572 | } 573 | $(this).attr("title", x.value + "%"); 574 | }, 575 | orientation: "vertical" 576 | }); 577 | } 578 | 579 | if (opts.highlightsOff) { 580 | setHighlights(false); 581 | } 582 | 583 | _init(); 584 | 585 | return this; 586 | }; 587 | 588 | }(jQuery)); 589 | 590 | 591 | (function ($) { 592 | $.fn.imageViewerHandlers = function (opts) { 593 | var lastCursorPos = {x: 0, y: 0}, 594 | storedPos = {x: 0, y: 0}, 595 | dragging = false, 596 | clipping = false, 597 | deferDelay = null, 598 | deferring = false, 599 | _self = this, 600 | _availableStates = ["default", "clipping"], 601 | _state = "default", 602 | _scrollLock = false; 603 | 604 | function getBox() { 605 | return { 606 | y0: $(_self).offset().top - $(window).scrollTop(), 607 | x0: $(_self).offset().left, 608 | y1: $(_self).offset().top + $(this).height() - $(window).scrollTop(), 609 | x1: $(_self).offset().left + $(this).width() 610 | }; 611 | } 612 | 613 | function deferCommit() { 614 | var diff = deferDelay - new Date().getTime(); 615 | if (new Date().getTime() < deferDelay) { 616 | setTimeout(deferCommit, 1); 617 | } else { 618 | deferring = false; 619 | _self.trigger('paint'); 620 | } 621 | } 622 | 623 | if (opts && opts.mousewheel) { 624 | this.mousewheel(function (e, which) { 625 | e.preventDefault(); 626 | if (_scrollLock) { 627 | if (which < 0) { 628 | $(this).trigger('moveBy', [{x: 0, y: -30}, false]); 629 | } else if (which > 0) { 630 | $(this).trigger('moveBy', [{x: 0, y: 30}, false]); 631 | } 632 | } else { 633 | if (which < 0) { 634 | $(this).trigger('scaleBy', [0.9, false]); 635 | } else if (which > 0) { 636 | $(this).trigger('scaleBy', [1.1, false]); 637 | } 638 | } 639 | deferDelay = new Date().getTime() + 800; 640 | if (!deferring) { 641 | deferring = true; 642 | deferCommit(); 643 | } 644 | 645 | return false; 646 | }); 647 | } 648 | 649 | this.on("setScrollLock", function (e, lock) { 650 | _scrollLock = lock; 651 | }); 652 | 653 | this.on("setState", function (e, state) { 654 | if ($.inArray(state, _availableStates) > -1) { 655 | _state = state; 656 | if (_state === 'clipping') { 657 | $(this).css({cursor: "crosshair"}); 658 | } else { 659 | $(this).attr("style", ""); 660 | } 661 | } else { 662 | _state = "default"; 663 | } 664 | }); 665 | 666 | this.on("mousedown", function (e) { 667 | if ($(this).hasClass("touchactive")) { 668 | e.preventDefault(); 669 | e.stopPropagation(); 670 | return false; 671 | } 672 | e.preventDefault(); 673 | lastCursorPos = {x: e.clientX, y: e.clientY}; 674 | 675 | if (_state === "default") { 676 | $(this).addClass("dragging-cursor"); 677 | dragging = true; 678 | } else if (_state === "clipping") { 679 | clipping = true; 680 | var box = getBox(); 681 | storedPos = {x: e.clientX - box.x0, y: e.clientY - box.y0}; 682 | } 683 | }).on("mousemove", function (e) { 684 | if ($(this).hasClass("touchactive")) { 685 | e.preventDefault(); 686 | e.stopPropagation(); 687 | return false; 688 | } 689 | 690 | var movement = {x: e.clientX - lastCursorPos.x, y: e.clientY - lastCursorPos.y}, 691 | box; 692 | if (dragging) { 693 | e.preventDefault(); 694 | $(this).trigger('moveBy', [movement, false]); 695 | } else if (clipping && (movement.x !== 0 || movement.y !== 0)) { 696 | box = getBox(); 697 | $(this).trigger('drawRect', [storedPos, {x: e.clientX - box.x0, y: e.clientY - box.y0}]); 698 | } 699 | lastCursorPos = {x: e.clientX, y: e.clientY}; 700 | }).on("mouseup", function (e) { 701 | if ($(this).hasClass("touchactive")) { 702 | e.preventDefault(); 703 | e.stopPropagation(); 704 | return false; 705 | } 706 | var movement, box; 707 | if (dragging) { 708 | e.preventDefault(); 709 | movement = {x: e.clientX - lastCursorPos.x, y: e.clientY - lastCursorPos.y}; 710 | $(this).trigger('moveBy', [movement, true]); 711 | } else if (clipping) { 712 | box = getBox(); 713 | $(this).trigger('clip', [storedPos, {x: e.clientX - box.x0, y: e.clientY - box.y0}]); 714 | } 715 | $(this).removeClass("dragging-cursor"); 716 | clipping = false; 717 | dragging = false; 718 | }).on("mouseout", function (e) { 719 | if ($(this).hasClass("touchactive")) { 720 | e.preventDefault(); 721 | e.stopPropagation(); 722 | return false; 723 | } 724 | var box = getBox(), 725 | movement; 726 | if (e.clientX < box.x0 || e.clientX > box.x1 || e.clientY < box.y0 || e.clientY > box.y1) { 727 | e.preventDefault(); 728 | if (dragging) { 729 | movement = {x: e.clientX - lastCursorPos.x, y: e.clientY - lastCursorPos.y}; 730 | $(this).trigger('moveBy', [movement, true]); 731 | dragging = false; 732 | $(this).removeClass("dragging-cursor"); 733 | } 734 | } 735 | }).on("click", function (e) { 736 | if ($(this).hasClass("touchactive")) { 737 | e.preventDefault(); 738 | e.stopPropagation(); 739 | return false; 740 | } 741 | }).on(); 742 | 743 | return this; 744 | }; 745 | 746 | }(jQuery)); 747 | 748 | (function ($) { 749 | $.fn.imageviewerTouchHandlers = function (opts) { 750 | var _self = this, 751 | _availableStates = ["default", "clipping"], 752 | _state = "default", 753 | lastPos = false, 754 | touchmap = { 755 | startPos: false, 756 | positions: [], 757 | tapStart: 0, 758 | lastTap: 0, 759 | pinchDelta: 0, 760 | pinchDistance: 0 761 | }; 762 | 763 | function getBox() { 764 | return { 765 | y0: $(_self).offset().top - $(window).scrollTop(), 766 | x0: $(_self).offset().left, 767 | y1: $(_self).offset().top + $(this).height() - $(window).scrollTop(), 768 | x1: $(_self).offset().left + $(this).width() 769 | }; 770 | } 771 | 772 | this.on("setState", function (e, state) { 773 | if ($.inArray(state, _availableStates) > -1) { 774 | _state = state; 775 | } else { 776 | _state = "default"; 777 | } 778 | }); 779 | 780 | 781 | $(this).on("touchstart", function (e) { 782 | var touches = e.originalEvent.touches, 783 | box; 784 | if (touches.length === 1) { 785 | touchmap.tapStart = new Date().getTime(); 786 | box = getBox(); 787 | touchmap.startPos = {x: touches[0].pageX - box.x0, y: touches[0].pageY - box.y0}; 788 | } 789 | $(this).addClass("touchactive"); 790 | e.preventDefault(); 791 | e.stopPropagation(); 792 | return false; 793 | }); 794 | 795 | $(this).on("touchend", function (e) { 796 | var touches = e.originalEvent.touches, 797 | box; 798 | $(this).trigger('moveBy', [{x: 0, y: 0}, true]); 799 | lastPos = false; 800 | if (new Date().getTime() - touchmap.lastTap < 400) { 801 | if (opts.ondoubletap) { 802 | opts.ondoubletap(); 803 | } 804 | touchmap.lastTap = 0; 805 | } else if (new Date().getTime() - touchmap.tapStart < 200) { 806 | touchmap.lastTap = new Date().getTime(); 807 | touchmap.tapStart = 0; 808 | } 809 | if (touches.length === 0) { 810 | $(this).removeClass("touchactive"); 811 | } 812 | 813 | if (_state === 'clipping' && touchmap.startPos) { 814 | box = getBox(); 815 | $(this).trigger('clip', [touchmap.startPos, { 816 | x: touchmap.positions[0].x - box.x0, 817 | y: touchmap.positions[0].y - box.y0 818 | }]); 819 | } 820 | 821 | touchmap.startPos = false; 822 | e.preventDefault(); 823 | e.stopPropagation(); 824 | return false; 825 | }); 826 | 827 | $(this).on("touchmove", function (e) { 828 | e.preventDefault(); 829 | var touches = e.originalEvent.touches, 830 | i, 831 | cur, 832 | oldD, 833 | sHeur, 834 | movement, 835 | box; 836 | 837 | for (i = 0; i < touches.length; i++) { 838 | cur = {x: touches[i].pageX, y: touches[i].pageY}; 839 | touchmap.positions[i] = cur; 840 | } 841 | 842 | if (_state === 'default') { 843 | if (touches.length === 2) { 844 | oldD = touchmap.pinchDistance; 845 | touchmap.pinchDistance = parseInt(Math.sqrt( 846 | ( 847 | (touchmap.positions[0].x - touchmap.positions[1].x) * 848 | (touchmap.positions[0].x - touchmap.positions[1].x) 849 | ) + ( 850 | (touchmap.positions[0].y - touchmap.positions[1].y) * 851 | (touchmap.positions[0].y - touchmap.positions[1].y) 852 | ) 853 | ), 10); 854 | touchmap.pinchDelta = oldD - touchmap.pinchDistance; 855 | if (touchmap.pinchDelta < 20 && touchmap.pinchDelta > -20) { 856 | sHeur = 1.0 - (touchmap.pinchDelta * 0.01); 857 | $(this).trigger('scaleBy', [sHeur, false]); 858 | } 859 | } else if (touches.length === 1) { 860 | if (lastPos !== false) { 861 | movement = { 862 | x: touchmap.positions[0].x - lastPos.x, 863 | y: touchmap.positions[0].y - lastPos.y 864 | }; 865 | $(this).trigger('moveBy', [movement, false]); 866 | } 867 | lastPos = {x: touchmap.positions[0].x, y: touchmap.positions[0].y}; 868 | } 869 | } else if (_state === 'clipping' && touchmap.startPos) { 870 | box = getBox(); 871 | $(this).trigger('drawRect', [touchmap.startPos, { 872 | x: touchmap.positions[0].x - box.x0, 873 | y: touchmap.positions[0].y - box.y0 874 | }]); 875 | } 876 | e.preventDefault(); 877 | e.stopPropagation(); 878 | return false; 879 | }); 880 | return this; 881 | }; 882 | }(jQuery)); 883 | 884 | 885 | (function ($) { 886 | 887 | $.fn.minimap = function (scale, height, options) { 888 | var opts = options || {}, 889 | _self = this, 890 | viewerLayer = $("") 891 | .attr("width", $(this).width()) 892 | .attr("height", $(this).height()), 893 | dragging, 894 | pos; 895 | 896 | _self.css({height: height}); 897 | 898 | if (opts.onload) { 899 | opts.onload($(this).height()); 900 | } 901 | 902 | if (opts.image) { 903 | _self.css({ 904 | backgroundImage: "url(" + opts.image + ")" 905 | }); 906 | } 907 | 908 | this.append(viewerLayer); 909 | this.bind("repositionViewerZone", function (e, box) { 910 | var y = box.y * scale, 911 | x = box.x * scale, 912 | w = box.w * scale - 913 | (box.x * scale + box.w * scale > _self.width() ? 914 | box.x * scale + box.w * scale - _self.width() : 0) - 2, 915 | h = box.h * scale - 916 | (box.y * scale + box.h * scale > _self.height() ? 917 | box.y * scale + box.h * scale - _self.height() : 0) - 2, 918 | ctx = viewerLayer[0].getContext('2d'); 919 | 920 | ctx.clearRect(0, 0, viewerLayer[0].width, viewerLayer[0].height); 921 | ctx.beginPath(); 922 | ctx.strokeStyle = (opts.color || "black"); 923 | ctx.rect(x, y, w, h); 924 | ctx.stroke(); 925 | }); 926 | 927 | function moveBy(movement) { 928 | return {x: -movement.x / scale, y: -movement.y / scale}; 929 | } 930 | 931 | 932 | if (opts.interactive && opts.canvas) { 933 | dragging = false; 934 | pos = {x: 0, y: 0}; 935 | 936 | viewerLayer.on("mousedown", function (e) { 937 | e.preventDefault(); 938 | dragging = true; 939 | pos = {x: e.pageX, y: e.pageY}; 940 | 941 | if (opts.ondown) { 942 | opts.ondown({ 943 | x: (pos.x - $(this).offset().left - 5) / scale, 944 | y: (pos.y - $(this).offset().top - 5) / scale 945 | }); 946 | } 947 | }); 948 | 949 | viewerLayer.on("mouseup", function (e) { 950 | dragging = false; 951 | var movement = {x: e.pageX - pos.x, y: e.pageY - pos.y}, 952 | canvasMovement = moveBy(movement); 953 | if (opts.onup) { 954 | opts.onup(canvasMovement); 955 | } 956 | }); 957 | 958 | viewerLayer.on("mouseout", function (e) { 959 | if (dragging) { 960 | dragging = false; 961 | var movement = {x: e.pageX - pos.x, y: e.pageY - pos.y}, 962 | canvasMovement = moveBy(movement); 963 | if (opts.onup) { 964 | opts.onup(canvasMovement); 965 | } 966 | } 967 | }); 968 | 969 | viewerLayer.on("mousemove", function (e) { 970 | if (dragging) { 971 | var movement = {x: e.pageX - pos.x, y: e.pageY - pos.y}, 972 | canvasMovement = moveBy(movement); 973 | pos = {x: e.pageX, y: e.pageY}; 974 | if (opts.onmove) { 975 | opts.onmove(canvasMovement); 976 | } 977 | } 978 | }); 979 | 980 | } 981 | 982 | return this; 983 | }; 984 | }(jQuery)); --------------------------------------------------------------------------------