Mercurial > hg > digilib
annotate client/digitallibrary/jquery/jquery.digilib.geometry.js @ 811:29de310ed4f3 jquery
read regions from HTML (not working yet), show info
| author | hertzhaft |
|---|---|
| date | Mon, 21 Feb 2011 18:37:44 +0100 |
| parents | 1f9940d4bd35 |
| children | 8cfd8223afe6 |
| rev | line source |
|---|---|
| 778 | 1 /** required digilib geometry plugin |
| 2 */ | |
| 3 | |
| 4 (function($) { | |
| 5 //var dlGeometry = function() { | |
| 6 /* | |
| 7 * Size class | |
| 8 */ | |
| 9 var size = function(w, h) { | |
| 10 var that; | |
| 11 if (typeof w === "object") { | |
| 12 // assume its size | |
| 13 that = { | |
| 14 width : w.width, | |
| 15 height : w.height | |
| 16 }; | |
| 17 } else { | |
| 18 that = { | |
| 19 width : parseFloat(w), | |
| 20 height : parseFloat(h) | |
| 21 }; | |
| 22 } | |
| 23 that.equals = function(other) { | |
| 24 return (this.width === other.width && this.height === other.height); | |
| 25 }; | |
| 26 that.toString = function() { | |
| 27 return (this.width + "x" + this.height); | |
| 28 }; | |
| 29 return that; | |
| 30 }; | |
| 31 | |
| 32 /* | |
| 33 * Position class | |
| 34 */ | |
| 35 var position = function(x, y) { | |
| 36 var that; | |
| 37 if (typeof x === "object") { | |
| 38 if (x instanceof jQuery) { | |
| 39 // jQuery object | |
| 40 var pos = x.offset(); | |
| 41 that = { | |
| 42 x : pos.left, | |
| 43 y : pos.top | |
| 44 }; | |
| 45 } else { | |
| 46 if (x.x != null) { | |
| 47 // position object | |
| 48 that = { | |
| 49 x : x.x, | |
| 50 y : x.y | |
| 51 }; | |
| 52 } | |
| 53 if (x.pageX != null) { | |
| 54 // event object | |
| 55 that = { | |
| 56 x : x.pageX, | |
| 57 y : x.pageY | |
| 58 }; | |
| 59 } | |
| 60 } | |
| 61 } else { | |
| 62 that = { | |
| 63 x : parseFloat(x), | |
| 64 y : parseFloat(y) | |
| 65 }; | |
| 66 } | |
| 67 that.equals = function(other) { | |
| 68 return (this.x === other.x && this.y === other.y); | |
| 69 }; | |
| 70 // add position other to this | |
| 71 that.add = function(other) { | |
| 72 this.x += other.x; | |
| 73 this.y += other.y; | |
| 74 return this; | |
| 75 }; | |
| 76 // returns negative position | |
| 77 that.neg = function() { | |
| 78 return position({ | |
| 79 x : -this.x, | |
| 80 y : -this.y | |
| 81 }); | |
| 82 }; | |
| 83 // returns new position that is the difference between this and other | |
| 84 that.delta = function(other) { | |
| 85 return position({ | |
| 86 x : other.x - this.x, | |
| 87 y : other.y - this.y | |
| 88 }); | |
| 89 }; | |
| 90 // adjusts position $elem to this position | |
| 91 that.adjustDiv = function($elem) { | |
| 92 $elem.offset({ | |
| 93 left : this.x, | |
| 94 top : this.y | |
| 95 }); | |
| 96 }; | |
| 97 // returns distance of this position to pos (length if pos == null) | |
| 98 that.distance = function(pos) { | |
| 99 if (pos == null) { | |
| 100 pos = { | |
| 101 x : 0, | |
| 102 y : 0 | |
| 103 }; | |
| 104 } | |
| 105 var dx = pos.x - this.x; | |
| 106 var dy = pos.y - this.y; | |
| 107 return Math.sqrt(dx * dx + dy * dy); | |
| 108 }; | |
| 109 that.toString = function() { | |
| 110 return (this.x + "," + this.y); | |
| 111 }; | |
| 112 return that; | |
| 113 }; | |
| 114 /* | |
| 115 * Rectangle class | |
| 116 */ | |
| 117 var rectangle = function(x, y, w, h) { | |
| 118 var that = {}; | |
| 119 if (typeof x === "object") { | |
| 120 if (x instanceof jQuery) { | |
| 121 // jQuery object | |
| 122 var pos = x.offset(); | |
| 123 that = { | |
| 124 x : pos.left, | |
| 125 y : pos.top, | |
| 126 width : x.width(), | |
| 127 height : x.height() | |
| 128 }; | |
| 129 } else if (y == null) { | |
| 130 // assume x is rectangle | |
| 131 that = { | |
| 132 x : x.x, | |
| 133 y : x.y, | |
| 134 width : x.width, | |
| 135 height : x.height | |
| 136 }; | |
| 137 } else { | |
| 138 // assume x and y are Position | |
| 139 that = { | |
| 140 x : Math.min(x.x, y.x), | |
| 141 y : Math.min(x.y, y.y), | |
| 142 width : Math.abs(y.x - x.x), | |
| 143 height : Math.abs(y.y - x.y) | |
| 144 }; | |
| 145 } | |
| 146 } else { | |
| 147 that = { | |
| 148 x : parseFloat(x), | |
| 149 y : parseFloat(y), | |
| 150 width : parseFloat(w), | |
| 151 height : parseFloat(h) | |
| 152 }; | |
| 153 } | |
| 154 // returns a copy of this Rectangle | |
| 155 that.copy = function() { | |
| 156 return rectangle(this); | |
| 157 }; | |
| 158 // returns the position of this Rectangle | |
| 159 that.getPosition = function() { | |
| 160 return position(this); | |
| 161 }; | |
| 162 // returns the size of this Rectangle | |
| 163 that.getSize = function() { | |
| 164 return size(this); | |
| 165 }; | |
| 166 // returns the upper left corner position | |
| 167 that.getPt1 = that.getPosition; | |
| 168 // returns the lower right corner position of this Rectangle | |
| 169 that.getPt2 = function() { | |
| 170 return position({ | |
| 171 x : this.x + this.width, | |
| 172 y : this.y + this.height | |
| 173 }); | |
| 174 }; | |
| 175 // sets the upper left corner position to pos | |
| 176 that.setPosition = function(pos) { | |
| 177 this.x = pos.x; | |
| 178 this.y = pos.y; | |
| 179 return this; | |
| 180 }; | |
|
800
ac1d6b056a6f
geometry: overlapsRect() plus some comment clarifications
hertzhaft
parents:
786
diff
changeset
|
181 // adds pos to the position |
| 778 | 182 that.setPt1 = that.setPosition; // TODO: not really the same |
| 183 that.addPosition = function(pos) { | |
| 184 this.x += pos.x; | |
| 185 this.y += pos.y; | |
| 186 return this; | |
| 187 }; | |
| 188 // sets the lower right corner to position pos | |
| 189 that.setPt2 = function(pos) { | |
| 190 this.width = pos.x - this.x; | |
| 191 this.height = pos.y - this.y; | |
| 192 return this; | |
| 193 }; | |
| 194 // returns the center position of this Rectangle | |
| 195 that.getCenter = function() { | |
| 196 return position({ | |
| 197 x : this.x + this.width / 2, | |
| 198 y : this.y + this.height / 2 | |
| 199 }); | |
| 200 }; | |
|
800
ac1d6b056a6f
geometry: overlapsRect() plus some comment clarifications
hertzhaft
parents:
786
diff
changeset
|
201 // moves this rectangle's center to position pos |
| 778 | 202 that.setCenter = function(pos) { |
| 203 this.x = pos.x - this.width / 2; | |
| 204 this.y = pos.y - this.height / 2; | |
| 205 return this; | |
| 206 }; | |
|
800
ac1d6b056a6f
geometry: overlapsRect() plus some comment clarifications
hertzhaft
parents:
786
diff
changeset
|
207 // returns true if both rectangles have equal position and proportion |
| 778 | 208 that.equals = function(other) { |
| 209 var eq = (this.x === other.x && this.y === other.y && this.width === other.width); | |
| 210 return eq; | |
| 211 }; | |
| 212 // returns the area of this Rectangle | |
| 213 that.getArea = function() { | |
| 214 return (this.width * this.height); | |
| 215 }; | |
| 216 // eliminates negative width and height | |
| 217 that.normalize = function() { | |
| 218 var p = this.getPt2(); | |
| 219 this.x = Math.min(this.x, p.x); | |
| 220 this.y = Math.min(this.y, p.y); | |
| 221 this.width = Math.abs(this.width); | |
| 222 this.height = Math.abs(this.height); | |
| 223 return this; | |
| 224 }; | |
| 225 // returns if Position "pos" lies inside of this rectangle | |
| 226 that.containsPosition = function(pos) { | |
| 227 var ct = ((pos.x >= this.x) && (pos.y >= this.y) | |
| 228 && (pos.x <= this.x + this.width) && (pos.y <= this.y | |
| 229 + this.height)); | |
| 230 return ct; | |
| 231 }; | |
|
800
ac1d6b056a6f
geometry: overlapsRect() plus some comment clarifications
hertzhaft
parents:
786
diff
changeset
|
232 // returns true if rectangle "rect" is contained in this rectangle |
| 778 | 233 that.containsRect = function(rect) { |
| 234 return (this.containsPosition(rect.getPt1()) && this | |
| 235 .containsPosition(rect.getPt2())); | |
| 236 }; | |
|
800
ac1d6b056a6f
geometry: overlapsRect() plus some comment clarifications
hertzhaft
parents:
786
diff
changeset
|
237 // returns true if rectangle "rect" and this rectangle overlap |
|
ac1d6b056a6f
geometry: overlapsRect() plus some comment clarifications
hertzhaft
parents:
786
diff
changeset
|
238 that.overlapsRect = function(rect) { |
| 805 | 239 return this.intersect(rect) != null; |
|
800
ac1d6b056a6f
geometry: overlapsRect() plus some comment clarifications
hertzhaft
parents:
786
diff
changeset
|
240 }; |
| 778 | 241 // changes this rectangle's x/y values so it stays inside of rectangle |
|
800
ac1d6b056a6f
geometry: overlapsRect() plus some comment clarifications
hertzhaft
parents:
786
diff
changeset
|
242 // "rect", keeping the proportions |
| 778 | 243 that.stayInside = function(rect) { |
| 805 | 244 this.x = Math.max(this.x, rect.x); |
| 245 this.y = Math.max(this.y, rect.y); | |
| 778 | 246 if (this.x + this.width > rect.x + rect.width) { |
| 247 this.x = rect.x + rect.width - this.width; | |
| 248 } | |
| 249 if (this.y + this.height > rect.y + rect.height) { | |
| 250 this.y = rect.y + rect.height - this.height; | |
| 251 } | |
| 252 return this; | |
| 253 }; | |
|
800
ac1d6b056a6f
geometry: overlapsRect() plus some comment clarifications
hertzhaft
parents:
786
diff
changeset
|
254 // clips this rectangle so it stays inside of rectangle "rect" |
| 778 | 255 that.clipTo = function(rect) { |
| 256 var p1 = rect.getPt1(); | |
| 257 var p2 = rect.getPt2(); | |
| 258 var this2 = this.getPt2(); | |
| 259 this.setPosition(position(Math.max(this.x, p1.x), Math.max(this.y, p1.y))); | |
| 260 this.setPt2(position(Math.min(this2.x, p2.x), Math.min(this2.y, p2.y))); | |
| 261 return this; | |
| 262 }; | |
|
800
ac1d6b056a6f
geometry: overlapsRect() plus some comment clarifications
hertzhaft
parents:
786
diff
changeset
|
263 // returns the intersection of rectangle "rect" and this one |
| 778 | 264 that.intersect = function(rect) { |
| 805 | 265 var res = rect.clipTo(this); |
| 266 if (res.width < 0 || res.height < 0) res = null; | |
| 267 return res; | |
| 778 | 268 }; |
| 805 | 269 |
|
800
ac1d6b056a6f
geometry: overlapsRect() plus some comment clarifications
hertzhaft
parents:
786
diff
changeset
|
270 // returns a copy of rectangle "rect" that fits into this one |
|
ac1d6b056a6f
geometry: overlapsRect() plus some comment clarifications
hertzhaft
parents:
786
diff
changeset
|
271 // (moving it first) |
| 778 | 272 that.fit = function(rect) { |
| 273 var sec = rect.copy(); | |
| 274 sec.x = Math.max(sec.x, this.x); | |
| 275 sec.y = Math.max(sec.y, this.x); | |
| 276 if (sec.x + sec.width > this.x + this.width) { | |
| 277 sec.x = this.x + this.width - sec.width; | |
| 278 } | |
| 279 if (sec.y + sec.height > this.y + this.height) { | |
| 280 sec.y = this.y + this.height - sec.height; | |
| 281 } | |
| 282 return sec.intersect(this); | |
| 283 }; | |
|
800
ac1d6b056a6f
geometry: overlapsRect() plus some comment clarifications
hertzhaft
parents:
786
diff
changeset
|
284 // adjusts position and size of jQuery element "$elem" to this rectangle |
| 778 | 285 that.adjustDiv = function($elem) { |
| 286 $elem.offset({ | |
| 287 left : this.x, | |
| 288 top : this.y | |
| 289 }); | |
| 290 $elem.width(this.width).height(this.height); | |
| 291 }; | |
|
800
ac1d6b056a6f
geometry: overlapsRect() plus some comment clarifications
hertzhaft
parents:
786
diff
changeset
|
292 // returns position and size of this rectangle in css-compatible format |
| 778 | 293 that.getAsCss = function() { |
| 294 return { | |
| 295 left : this.x, | |
| 296 top : this.y, | |
| 297 width : this.width, | |
| 298 height : this.height | |
| 299 }; | |
| 300 }; | |
|
800
ac1d6b056a6f
geometry: overlapsRect() plus some comment clarifications
hertzhaft
parents:
786
diff
changeset
|
301 // returns position and size of this rectangle formatted for SVG attributes |
|
ac1d6b056a6f
geometry: overlapsRect() plus some comment clarifications
hertzhaft
parents:
786
diff
changeset
|
302 that.getAsSvg = function() { |
|
ac1d6b056a6f
geometry: overlapsRect() plus some comment clarifications
hertzhaft
parents:
786
diff
changeset
|
303 return [this.x, this.y, this.width, this.height].join(" "); |
|
ac1d6b056a6f
geometry: overlapsRect() plus some comment clarifications
hertzhaft
parents:
786
diff
changeset
|
304 }; |
|
ac1d6b056a6f
geometry: overlapsRect() plus some comment clarifications
hertzhaft
parents:
786
diff
changeset
|
305 // returns size and position of this rectangle formatted for ??? (w x h@x,y) |
| 778 | 306 that.toString = function() { |
| 307 return this.width + "x" + this.height + "@" + this.x + "," + this.y; | |
| 308 }; | |
| 309 return that; | |
| 310 }; | |
| 311 | |
| 312 /* | |
| 313 * Transform class | |
| 314 * | |
| 315 * defines a class of affine transformations | |
| 316 */ | |
| 317 var transform = function(spec) { | |
| 318 var that = { | |
| 319 m00 : 1.0, | |
| 320 m01 : 0.0, | |
| 321 m02 : 0.0, | |
| 322 m10 : 0.0, | |
| 323 m11 : 1.0, | |
| 324 m12 : 0.0, | |
| 325 m20 : 0.0, | |
| 326 m21 : 0.0, | |
| 327 m22 : 1.0 | |
| 328 }; | |
| 329 if (spec) { | |
| 330 jQuery.extend(that, spec); | |
| 331 } | |
| 332 ; | |
| 333 that.concat = function(trafA) { | |
| 334 // add Transform trafA to this Transform (i.e. this = trafC = trafA | |
| 335 // * this) | |
| 336 var trafC = {}; | |
| 337 for ( var i = 0; i < 3; i++) { | |
| 338 for ( var j = 0; j < 3; j++) { | |
| 339 var c = 0.0; | |
| 340 for ( var k = 0; k < 3; k++) { | |
| 341 c += trafA["m" + i + k] * this["m" + k + j]; | |
| 342 } | |
| 343 trafC["m" + i + j] = c; | |
| 344 } | |
| 345 } | |
| 346 jQuery.extend(this, trafC); | |
| 347 return this; | |
| 348 }; | |
| 349 that.transform = function(rect) { | |
| 350 // returns transformed Rectangle or Position with this Transform | |
| 351 // applied | |
| 352 var x = this.m00 * rect.x + this.m01 * rect.y + this.m02; | |
| 353 var y = this.m10 * rect.x + this.m11 * rect.y + this.m12; | |
| 354 var pt = position(x, y); | |
| 355 if (rect.width) { | |
| 356 // transform the other corner point | |
| 357 var pt2 = this.transform(rect.getPt2()); | |
| 358 return rectangle(pt, pt2); | |
| 359 } | |
| 360 return pt; | |
| 361 }; | |
| 362 that.invtransform = function(rect) { | |
| 363 // returns transformed Rectangle or Position with the inverse of | |
| 364 // this Transform applied | |
| 365 var det = this.m00 * this.m11 - this.m01 * this.m10; | |
| 366 var x = (this.m11 * rect.x - this.m01 * rect.y - this.m11 | |
| 367 * this.m02 + this.m01 * this.m12) | |
| 368 / det; | |
| 369 var y = (-this.m10 * rect.x + this.m00 * rect.y + this.m10 | |
| 370 * this.m02 - this.m00 * this.m12) | |
| 371 / det; | |
| 372 var pt = position(x, y); | |
| 373 if (rect.width) { | |
| 374 // transform the other corner point | |
| 375 var pt2 = this.invtransform(rect.getPt2()); | |
| 376 return rectangle(pt, pt2); | |
| 377 } | |
| 378 return pt; | |
| 379 }; | |
| 380 that.toString = function(pretty) { | |
| 381 var s = '['; | |
| 382 if (pretty) | |
| 383 s += '\n'; | |
| 384 for ( var i = 0; i < 3; ++i) { | |
| 385 s += '['; | |
| 386 for ( var j = 0; j < 3; ++j) { | |
| 387 if (j) | |
| 388 s += ','; | |
| 389 s += this['m' + i + j]; | |
| 390 } | |
| 391 s += ']'; | |
| 392 if (pretty) | |
| 393 s += '\n'; | |
| 394 } | |
| 395 s += ']'; | |
| 396 if (pretty) | |
| 397 s += '\n'; | |
| 398 return s; | |
| 399 }; | |
| 400 // add class methods to instance | |
| 401 that.getRotation = transform.getRotation; | |
| 402 that.getRotationAround = transform.getRotationAround; | |
| 403 that.getTranslation = transform.getTranslation; | |
| 404 that.getMirror = transform.getMirror; | |
| 405 that.getScale = transform.getScale; | |
| 406 | |
| 407 return that; | |
| 408 }; | |
| 409 | |
| 410 transform.getRotation = function(angle) { | |
| 411 // returns a Transform that is a rotation by angle degrees around [0,0] | |
| 412 if (angle !== 0) { | |
| 413 var t = Math.PI * parseFloat(angle) / 180.0; | |
| 414 var cost = Math.cos(t); | |
| 415 var sint = Math.sin(t); | |
| 416 var traf = { | |
| 417 m00 : cost, | |
| 418 m01 : -sint, | |
| 419 m10 : sint, | |
| 420 m11 : cost | |
| 421 }; | |
| 422 return transform(traf); | |
| 423 } | |
| 424 return transform(); | |
| 425 }; | |
| 426 | |
| 427 transform.getRotationAround = function(angle, pos) { | |
| 428 // returns a Transform that is a rotation by angle degrees around pos | |
| 429 var traf = transform.getTranslation(pos.neg()); | |
| 430 traf.concat(transform.getRotation(angle)); | |
| 431 traf.concat(transform.getTranslation(pos)); | |
| 432 return traf; | |
| 433 }; | |
| 434 | |
| 435 transform.getTranslation = function(pos) { | |
| 436 // returns a Transform that is a translation by [pos.x, pos,y] | |
| 437 var traf = { | |
| 438 m02 : pos.x, | |
| 439 m12 : pos.y | |
| 440 }; | |
| 441 return transform(traf); | |
| 442 }; | |
| 443 | |
| 444 transform.getMirror = function(type) { | |
| 445 // returns a Transform that is a mirror about the axis type | |
| 446 if (type === 'x') { | |
| 447 var traf = { | |
| 448 m00 : 1, | |
| 449 m11 : -1 | |
| 450 }; | |
| 451 } else { | |
| 452 var traf = { | |
| 453 m00 : -1, | |
| 454 m11 : 1 | |
| 455 }; | |
| 456 } | |
| 457 return transform(traf); | |
| 458 }; | |
| 459 | |
| 460 transform.getScale = function(size) { | |
| 461 // returns a Transform that is a scale by [size.width, size.height] | |
| 462 var traf = { | |
| 463 m00 : size.width, | |
| 464 m11 : size.height | |
| 465 }; | |
| 466 return transform(traf); | |
| 467 }; | |
| 468 | |
| 779 | 469 // export constructor functions to digilib plugin |
|
786
912519475259
documentation for new plugin api in jquery-digilib-plugin.txt.
robcast
parents:
781
diff
changeset
|
470 var geometry = { |
| 779 | 471 size : size, |
| 472 position : position, | |
| 473 rectangle : rectangle, | |
| 474 transform : transform | |
|
786
912519475259
documentation for new plugin api in jquery-digilib-plugin.txt.
robcast
parents:
781
diff
changeset
|
475 }; |
|
912519475259
documentation for new plugin api in jquery-digilib-plugin.txt.
robcast
parents:
781
diff
changeset
|
476 // install function called by digilib on plugin object |
|
912519475259
documentation for new plugin api in jquery-digilib-plugin.txt.
robcast
parents:
781
diff
changeset
|
477 var install = function() { |
|
912519475259
documentation for new plugin api in jquery-digilib-plugin.txt.
robcast
parents:
781
diff
changeset
|
478 // add constructor object to fn |
|
912519475259
documentation for new plugin api in jquery-digilib-plugin.txt.
robcast
parents:
781
diff
changeset
|
479 this.fn.geometry = geometry; |
| 778 | 480 }; |
|
786
912519475259
documentation for new plugin api in jquery-digilib-plugin.txt.
robcast
parents:
781
diff
changeset
|
481 // digilib plugin object |
|
912519475259
documentation for new plugin api in jquery-digilib-plugin.txt.
robcast
parents:
781
diff
changeset
|
482 var plugin = { |
|
912519475259
documentation for new plugin api in jquery-digilib-plugin.txt.
robcast
parents:
781
diff
changeset
|
483 name : 'geometry', |
|
912519475259
documentation for new plugin api in jquery-digilib-plugin.txt.
robcast
parents:
781
diff
changeset
|
484 install : install, |
|
912519475259
documentation for new plugin api in jquery-digilib-plugin.txt.
robcast
parents:
781
diff
changeset
|
485 fn : {}, |
|
912519475259
documentation for new plugin api in jquery-digilib-plugin.txt.
robcast
parents:
781
diff
changeset
|
486 // TODO: remove old init |
|
912519475259
documentation for new plugin api in jquery-digilib-plugin.txt.
robcast
parents:
781
diff
changeset
|
487 init : init |
|
912519475259
documentation for new plugin api in jquery-digilib-plugin.txt.
robcast
parents:
781
diff
changeset
|
488 }; |
|
912519475259
documentation for new plugin api in jquery-digilib-plugin.txt.
robcast
parents:
781
diff
changeset
|
489 // TODO: remove old version of init returning contructor |
|
912519475259
documentation for new plugin api in jquery-digilib-plugin.txt.
robcast
parents:
781
diff
changeset
|
490 var init = function () { |
|
912519475259
documentation for new plugin api in jquery-digilib-plugin.txt.
robcast
parents:
781
diff
changeset
|
491 return geometry; |
|
912519475259
documentation for new plugin api in jquery-digilib-plugin.txt.
robcast
parents:
781
diff
changeset
|
492 }; |
|
912519475259
documentation for new plugin api in jquery-digilib-plugin.txt.
robcast
parents:
781
diff
changeset
|
493 // plug into digilib |
| 779 | 494 if ($.fn.digilib == null) { |
| 495 $.error("jquery.digilib.geometry must be loaded after jquery.digilib!"); | |
| 496 } else { | |
|
786
912519475259
documentation for new plugin api in jquery-digilib-plugin.txt.
robcast
parents:
781
diff
changeset
|
497 $.fn.digilib('plugin', plugin); |
| 779 | 498 } |
| 778 | 499 })(jQuery); |