Mercurial > hg > digilib-old
annotate client/digitallibrary/jquery/jquery.digilib.geometry.js @ 877:971b7122930f jquery
arrows: got basic functionality working
| author | hertzhaft |
|---|---|
| date | Thu, 17 Mar 2011 16:43:59 +0100 |
| parents | c662bf335881 |
| children |
| rev | line source |
|---|---|
| 785 | 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 }; | |
|
807
1b1728926534
geometry: overlapsRect() plus some comment clarifications
hertzhaft
parents:
793
diff
changeset
|
181 // adds pos to the position |
| 785 | 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 }; | |
| 877 | 188 // adds pos to the dimensions |
| 189 that.enlarge = function(pos) { | |
| 190 this.width += pos.x; | |
| 191 this.height += pos.y; | |
| 192 return this; | |
| 193 }; | |
| 785 | 194 // sets the lower right corner to position pos |
| 195 that.setPt2 = function(pos) { | |
| 196 this.width = pos.x - this.x; | |
| 197 this.height = pos.y - this.y; | |
| 198 return this; | |
| 199 }; | |
| 200 // returns the center position of this Rectangle | |
| 201 that.getCenter = function() { | |
| 202 return position({ | |
| 203 x : this.x + this.width / 2, | |
| 204 y : this.y + this.height / 2 | |
| 205 }); | |
| 206 }; | |
|
807
1b1728926534
geometry: overlapsRect() plus some comment clarifications
hertzhaft
parents:
793
diff
changeset
|
207 // moves this rectangle's center to position pos |
| 785 | 208 that.setCenter = function(pos) { |
| 209 this.x = pos.x - this.width / 2; | |
| 210 this.y = pos.y - this.height / 2; | |
| 211 return this; | |
| 212 }; | |
|
807
1b1728926534
geometry: overlapsRect() plus some comment clarifications
hertzhaft
parents:
793
diff
changeset
|
213 // returns true if both rectangles have equal position and proportion |
| 785 | 214 that.equals = function(other) { |
| 215 var eq = (this.x === other.x && this.y === other.y && this.width === other.width); | |
| 216 return eq; | |
| 217 }; | |
| 218 // returns the area of this Rectangle | |
| 219 that.getArea = function() { | |
| 220 return (this.width * this.height); | |
| 221 }; | |
| 222 // eliminates negative width and height | |
| 223 that.normalize = function() { | |
| 224 var p = this.getPt2(); | |
| 225 this.x = Math.min(this.x, p.x); | |
| 226 this.y = Math.min(this.y, p.y); | |
| 227 this.width = Math.abs(this.width); | |
| 228 this.height = Math.abs(this.height); | |
| 229 return this; | |
| 230 }; | |
| 231 // returns if Position "pos" lies inside of this rectangle | |
| 232 that.containsPosition = function(pos) { | |
| 233 var ct = ((pos.x >= this.x) && (pos.y >= this.y) | |
| 234 && (pos.x <= this.x + this.width) && (pos.y <= this.y | |
| 235 + this.height)); | |
| 236 return ct; | |
| 237 }; | |
|
807
1b1728926534
geometry: overlapsRect() plus some comment clarifications
hertzhaft
parents:
793
diff
changeset
|
238 // returns true if rectangle "rect" is contained in this rectangle |
| 785 | 239 that.containsRect = function(rect) { |
| 240 return (this.containsPosition(rect.getPt1()) && this | |
| 241 .containsPosition(rect.getPt2())); | |
| 242 }; | |
|
807
1b1728926534
geometry: overlapsRect() plus some comment clarifications
hertzhaft
parents:
793
diff
changeset
|
243 // returns true if rectangle "rect" and this rectangle overlap |
|
1b1728926534
geometry: overlapsRect() plus some comment clarifications
hertzhaft
parents:
793
diff
changeset
|
244 that.overlapsRect = function(rect) { |
| 812 | 245 return this.intersect(rect) != null; |
|
807
1b1728926534
geometry: overlapsRect() plus some comment clarifications
hertzhaft
parents:
793
diff
changeset
|
246 }; |
| 785 | 247 // changes this rectangle's x/y values so it stays inside of rectangle |
|
807
1b1728926534
geometry: overlapsRect() plus some comment clarifications
hertzhaft
parents:
793
diff
changeset
|
248 // "rect", keeping the proportions |
| 785 | 249 that.stayInside = function(rect) { |
| 812 | 250 this.x = Math.max(this.x, rect.x); |
| 251 this.y = Math.max(this.y, rect.y); | |
| 785 | 252 if (this.x + this.width > rect.x + rect.width) { |
| 253 this.x = rect.x + rect.width - this.width; | |
| 254 } | |
| 255 if (this.y + this.height > rect.y + rect.height) { | |
| 256 this.y = rect.y + rect.height - this.height; | |
| 257 } | |
| 258 return this; | |
| 259 }; | |
|
807
1b1728926534
geometry: overlapsRect() plus some comment clarifications
hertzhaft
parents:
793
diff
changeset
|
260 // clips this rectangle so it stays inside of rectangle "rect" |
| 785 | 261 that.clipTo = function(rect) { |
| 262 var p1 = rect.getPt1(); | |
| 263 var p2 = rect.getPt2(); | |
| 264 var this2 = this.getPt2(); | |
| 265 this.setPosition(position(Math.max(this.x, p1.x), Math.max(this.y, p1.y))); | |
| 266 this.setPt2(position(Math.min(this2.x, p2.x), Math.min(this2.y, p2.y))); | |
| 267 return this; | |
| 268 }; | |
|
807
1b1728926534
geometry: overlapsRect() plus some comment clarifications
hertzhaft
parents:
793
diff
changeset
|
269 // returns the intersection of rectangle "rect" and this one |
| 785 | 270 that.intersect = function(rect) { |
| 847 | 271 var r = rect.copy(); |
| 272 var result = r.clipTo(this); | |
| 273 if (result.width < 0 || result.height < 0) result = null; | |
| 274 return result; | |
| 785 | 275 }; |
| 812 | 276 |
|
807
1b1728926534
geometry: overlapsRect() plus some comment clarifications
hertzhaft
parents:
793
diff
changeset
|
277 // returns a copy of rectangle "rect" that fits into this one |
|
1b1728926534
geometry: overlapsRect() plus some comment clarifications
hertzhaft
parents:
793
diff
changeset
|
278 // (moving it first) |
| 785 | 279 that.fit = function(rect) { |
| 847 | 280 var r = rect.copy(); |
| 281 r.x = Math.max(r.x, this.x); | |
| 282 r.y = Math.max(r.y, this.x); | |
| 283 if (r.x + r.width > this.x + this.width) { | |
| 284 r.x = this.x + this.width - r.width; | |
| 785 | 285 } |
| 847 | 286 if (r.y + r.height > this.y + this.height) { |
| 287 r.y = this.y + this.height - r.height; | |
| 785 | 288 } |
| 847 | 289 return r.intersect(this); |
| 785 | 290 }; |
|
807
1b1728926534
geometry: overlapsRect() plus some comment clarifications
hertzhaft
parents:
793
diff
changeset
|
291 // adjusts position and size of jQuery element "$elem" to this rectangle |
| 785 | 292 that.adjustDiv = function($elem) { |
| 293 $elem.offset({ | |
| 294 left : this.x, | |
| 295 top : this.y | |
| 296 }); | |
| 297 $elem.width(this.width).height(this.height); | |
| 298 }; | |
|
807
1b1728926534
geometry: overlapsRect() plus some comment clarifications
hertzhaft
parents:
793
diff
changeset
|
299 // returns position and size of this rectangle in css-compatible format |
| 785 | 300 that.getAsCss = function() { |
| 301 return { | |
| 302 left : this.x, | |
| 303 top : this.y, | |
| 304 width : this.width, | |
| 305 height : this.height | |
| 306 }; | |
| 307 }; | |
|
807
1b1728926534
geometry: overlapsRect() plus some comment clarifications
hertzhaft
parents:
793
diff
changeset
|
308 // returns position and size of this rectangle formatted for SVG attributes |
|
1b1728926534
geometry: overlapsRect() plus some comment clarifications
hertzhaft
parents:
793
diff
changeset
|
309 that.getAsSvg = function() { |
|
1b1728926534
geometry: overlapsRect() plus some comment clarifications
hertzhaft
parents:
793
diff
changeset
|
310 return [this.x, this.y, this.width, this.height].join(" "); |
|
1b1728926534
geometry: overlapsRect() plus some comment clarifications
hertzhaft
parents:
793
diff
changeset
|
311 }; |
|
1b1728926534
geometry: overlapsRect() plus some comment clarifications
hertzhaft
parents:
793
diff
changeset
|
312 // returns size and position of this rectangle formatted for ??? (w x h@x,y) |
| 785 | 313 that.toString = function() { |
| 314 return this.width + "x" + this.height + "@" + this.x + "," + this.y; | |
| 315 }; | |
| 316 return that; | |
| 317 }; | |
| 318 | |
| 319 /* | |
| 320 * Transform class | |
| 321 * | |
| 322 * defines a class of affine transformations | |
| 323 */ | |
| 324 var transform = function(spec) { | |
| 325 var that = { | |
| 326 m00 : 1.0, | |
| 327 m01 : 0.0, | |
| 328 m02 : 0.0, | |
| 329 m10 : 0.0, | |
| 330 m11 : 1.0, | |
| 331 m12 : 0.0, | |
| 332 m20 : 0.0, | |
| 333 m21 : 0.0, | |
| 334 m22 : 1.0 | |
| 335 }; | |
| 336 if (spec) { | |
| 337 jQuery.extend(that, spec); | |
| 338 } | |
| 339 ; | |
| 340 that.concat = function(trafA) { | |
| 341 // add Transform trafA to this Transform (i.e. this = trafC = trafA | |
| 342 // * this) | |
| 343 var trafC = {}; | |
| 344 for ( var i = 0; i < 3; i++) { | |
| 345 for ( var j = 0; j < 3; j++) { | |
| 346 var c = 0.0; | |
| 347 for ( var k = 0; k < 3; k++) { | |
| 348 c += trafA["m" + i + k] * this["m" + k + j]; | |
| 349 } | |
| 350 trafC["m" + i + j] = c; | |
| 351 } | |
| 352 } | |
| 353 jQuery.extend(this, trafC); | |
| 354 return this; | |
| 355 }; | |
| 356 that.transform = function(rect) { | |
| 357 // returns transformed Rectangle or Position with this Transform | |
| 358 // applied | |
| 359 var x = this.m00 * rect.x + this.m01 * rect.y + this.m02; | |
| 360 var y = this.m10 * rect.x + this.m11 * rect.y + this.m12; | |
| 361 var pt = position(x, y); | |
| 362 if (rect.width) { | |
| 363 // transform the other corner point | |
| 364 var pt2 = this.transform(rect.getPt2()); | |
| 365 return rectangle(pt, pt2); | |
| 366 } | |
| 367 return pt; | |
| 368 }; | |
| 369 that.invtransform = function(rect) { | |
| 370 // returns transformed Rectangle or Position with the inverse of | |
| 371 // this Transform applied | |
| 372 var det = this.m00 * this.m11 - this.m01 * this.m10; | |
| 373 var x = (this.m11 * rect.x - this.m01 * rect.y - this.m11 | |
| 374 * this.m02 + this.m01 * this.m12) | |
| 375 / det; | |
| 376 var y = (-this.m10 * rect.x + this.m00 * rect.y + this.m10 | |
| 377 * this.m02 - this.m00 * this.m12) | |
| 378 / det; | |
| 379 var pt = position(x, y); | |
| 380 if (rect.width) { | |
| 381 // transform the other corner point | |
| 382 var pt2 = this.invtransform(rect.getPt2()); | |
| 383 return rectangle(pt, pt2); | |
| 384 } | |
| 385 return pt; | |
| 386 }; | |
| 387 that.toString = function(pretty) { | |
| 388 var s = '['; | |
| 389 if (pretty) | |
| 390 s += '\n'; | |
| 391 for ( var i = 0; i < 3; ++i) { | |
| 392 s += '['; | |
| 393 for ( var j = 0; j < 3; ++j) { | |
| 394 if (j) | |
| 395 s += ','; | |
| 396 s += this['m' + i + j]; | |
| 397 } | |
| 398 s += ']'; | |
| 399 if (pretty) | |
| 400 s += '\n'; | |
| 401 } | |
| 402 s += ']'; | |
| 403 if (pretty) | |
| 404 s += '\n'; | |
| 405 return s; | |
| 406 }; | |
| 407 // add class methods to instance | |
| 408 that.getRotation = transform.getRotation; | |
| 409 that.getRotationAround = transform.getRotationAround; | |
| 410 that.getTranslation = transform.getTranslation; | |
| 411 that.getMirror = transform.getMirror; | |
| 412 that.getScale = transform.getScale; | |
| 413 | |
| 414 return that; | |
| 415 }; | |
| 416 | |
| 417 transform.getRotation = function(angle) { | |
| 418 // returns a Transform that is a rotation by angle degrees around [0,0] | |
| 419 if (angle !== 0) { | |
| 420 var t = Math.PI * parseFloat(angle) / 180.0; | |
| 421 var cost = Math.cos(t); | |
| 422 var sint = Math.sin(t); | |
| 423 var traf = { | |
| 424 m00 : cost, | |
| 425 m01 : -sint, | |
| 426 m10 : sint, | |
| 427 m11 : cost | |
| 428 }; | |
| 429 return transform(traf); | |
| 430 } | |
| 431 return transform(); | |
| 432 }; | |
| 433 | |
| 434 transform.getRotationAround = function(angle, pos) { | |
| 435 // returns a Transform that is a rotation by angle degrees around pos | |
| 436 var traf = transform.getTranslation(pos.neg()); | |
| 437 traf.concat(transform.getRotation(angle)); | |
| 438 traf.concat(transform.getTranslation(pos)); | |
| 439 return traf; | |
| 440 }; | |
| 441 | |
| 442 transform.getTranslation = function(pos) { | |
| 443 // returns a Transform that is a translation by [pos.x, pos,y] | |
| 444 var traf = { | |
| 445 m02 : pos.x, | |
| 446 m12 : pos.y | |
| 447 }; | |
| 448 return transform(traf); | |
| 449 }; | |
| 450 | |
| 451 transform.getMirror = function(type) { | |
| 452 // returns a Transform that is a mirror about the axis type | |
| 453 if (type === 'x') { | |
| 454 var traf = { | |
| 455 m00 : 1, | |
| 456 m11 : -1 | |
| 457 }; | |
| 458 } else { | |
| 459 var traf = { | |
| 460 m00 : -1, | |
| 461 m11 : 1 | |
| 462 }; | |
| 463 } | |
| 464 return transform(traf); | |
| 465 }; | |
| 466 | |
| 467 transform.getScale = function(size) { | |
| 468 // returns a Transform that is a scale by [size.width, size.height] | |
| 469 var traf = { | |
| 470 m00 : size.width, | |
| 471 m11 : size.height | |
| 472 }; | |
| 473 return transform(traf); | |
| 474 }; | |
| 475 | |
| 786 | 476 // export constructor functions to digilib plugin |
|
793
63c1b33e38b1
documentation for new plugin api in jquery-digilib-plugin.txt.
robcast
parents:
788
diff
changeset
|
477 var geometry = { |
| 786 | 478 size : size, |
| 479 position : position, | |
| 480 rectangle : rectangle, | |
| 481 transform : transform | |
|
793
63c1b33e38b1
documentation for new plugin api in jquery-digilib-plugin.txt.
robcast
parents:
788
diff
changeset
|
482 }; |
|
63c1b33e38b1
documentation for new plugin api in jquery-digilib-plugin.txt.
robcast
parents:
788
diff
changeset
|
483 // install function called by digilib on plugin object |
|
63c1b33e38b1
documentation for new plugin api in jquery-digilib-plugin.txt.
robcast
parents:
788
diff
changeset
|
484 var install = function() { |
|
63c1b33e38b1
documentation for new plugin api in jquery-digilib-plugin.txt.
robcast
parents:
788
diff
changeset
|
485 // add constructor object to fn |
|
63c1b33e38b1
documentation for new plugin api in jquery-digilib-plugin.txt.
robcast
parents:
788
diff
changeset
|
486 this.fn.geometry = geometry; |
| 785 | 487 }; |
|
793
63c1b33e38b1
documentation for new plugin api in jquery-digilib-plugin.txt.
robcast
parents:
788
diff
changeset
|
488 // digilib plugin object |
|
63c1b33e38b1
documentation for new plugin api in jquery-digilib-plugin.txt.
robcast
parents:
788
diff
changeset
|
489 var plugin = { |
|
63c1b33e38b1
documentation for new plugin api in jquery-digilib-plugin.txt.
robcast
parents:
788
diff
changeset
|
490 name : 'geometry', |
|
63c1b33e38b1
documentation for new plugin api in jquery-digilib-plugin.txt.
robcast
parents:
788
diff
changeset
|
491 install : install, |
|
63c1b33e38b1
documentation for new plugin api in jquery-digilib-plugin.txt.
robcast
parents:
788
diff
changeset
|
492 fn : {}, |
|
63c1b33e38b1
documentation for new plugin api in jquery-digilib-plugin.txt.
robcast
parents:
788
diff
changeset
|
493 // TODO: remove old init |
|
63c1b33e38b1
documentation for new plugin api in jquery-digilib-plugin.txt.
robcast
parents:
788
diff
changeset
|
494 init : init |
|
63c1b33e38b1
documentation for new plugin api in jquery-digilib-plugin.txt.
robcast
parents:
788
diff
changeset
|
495 }; |
|
63c1b33e38b1
documentation for new plugin api in jquery-digilib-plugin.txt.
robcast
parents:
788
diff
changeset
|
496 // TODO: remove old version of init returning contructor |
|
63c1b33e38b1
documentation for new plugin api in jquery-digilib-plugin.txt.
robcast
parents:
788
diff
changeset
|
497 var init = function () { |
|
63c1b33e38b1
documentation for new plugin api in jquery-digilib-plugin.txt.
robcast
parents:
788
diff
changeset
|
498 return geometry; |
|
63c1b33e38b1
documentation for new plugin api in jquery-digilib-plugin.txt.
robcast
parents:
788
diff
changeset
|
499 }; |
|
63c1b33e38b1
documentation for new plugin api in jquery-digilib-plugin.txt.
robcast
parents:
788
diff
changeset
|
500 // plug into digilib |
| 786 | 501 if ($.fn.digilib == null) { |
| 502 $.error("jquery.digilib.geometry must be loaded after jquery.digilib!"); | |
| 503 } else { | |
|
793
63c1b33e38b1
documentation for new plugin api in jquery-digilib-plugin.txt.
robcast
parents:
788
diff
changeset
|
504 $.fn.digilib('plugin', plugin); |
| 786 | 505 } |
| 785 | 506 })(jQuery); |