diff options
Diffstat (limited to 'js/helper-classes/3D/view-utils.js')
-rwxr-xr-x | js/helper-classes/3D/view-utils.js | 270 |
1 files changed, 156 insertions, 114 deletions
diff --git a/js/helper-classes/3D/view-utils.js b/js/helper-classes/3D/view-utils.js index 5a820fc2..1cd1c313 100755 --- a/js/helper-classes/3D/view-utils.js +++ b/js/helper-classes/3D/view-utils.js | |||
@@ -37,10 +37,8 @@ exports.ViewUtils = Montage.create(Component, { | |||
37 | setViewportObj: { | 37 | setViewportObj: { |
38 | value: function( vp ) { | 38 | value: function( vp ) { |
39 | this.m_viewportObj = vp; | 39 | this.m_viewportObj = vp; |
40 | this._perspectiveDist = 1400; | ||
41 | 40 | ||
42 | var dist = this.getPerspectiveDistFromElement( vp ); | 41 | this._perspectiveDist = this.getPerspectiveDistFromElement( vp ); |
43 | var mode = this.getPerspectiveModeFromElement( vp ); | ||
44 | } | 42 | } |
45 | }, | 43 | }, |
46 | getViewportObj: { value: function() { return this.m_viewportObj; } }, | 44 | getViewportObj: { value: function() { return this.m_viewportObj; } }, |
@@ -261,7 +259,7 @@ exports.ViewUtils = Montage.create(Component, { | |||
261 | 259 | ||
262 | // transform the point up the tree | 260 | // transform the point up the tree |
263 | var child = elt; | 261 | var child = elt; |
264 | var parent = elt.parentElement; | 262 | var parent = elt.offsetParent; |
265 | while ( parent ) | 263 | while ( parent ) |
266 | { | 264 | { |
267 | // go to screen space of the current child | 265 | // go to screen space of the current child |
@@ -289,7 +287,7 @@ exports.ViewUtils = Montage.create(Component, { | |||
289 | } | 287 | } |
290 | 288 | ||
291 | child = parent; | 289 | child = parent; |
292 | parent = parent.parentElement; | 290 | parent = parent.offsetParent; |
293 | } | 291 | } |
294 | 292 | ||
295 | return pt; | 293 | return pt; |
@@ -305,7 +303,7 @@ exports.ViewUtils = Montage.create(Component, { | |||
305 | 303 | ||
306 | // transform the bounds up the tree | 304 | // transform the bounds up the tree |
307 | var child = elt; | 305 | var child = elt; |
308 | var parent = elt.parentElement; | 306 | var parent = elt.offsetParent; |
309 | while ( parent ) | 307 | while ( parent ) |
310 | { | 308 | { |
311 | pt = this.childToParent( pt, child ); | 309 | pt = this.childToParent( pt, child ); |
@@ -313,7 +311,7 @@ exports.ViewUtils = Montage.create(Component, { | |||
313 | if (parent === this._rootElement) break; | 311 | if (parent === this._rootElement) break; |
314 | 312 | ||
315 | child = parent; | 313 | child = parent; |
316 | parent = parent.parentElement; | 314 | parent = parent.offsetParent; |
317 | } | 315 | } |
318 | 316 | ||
319 | ///////////////////////////////////////////////////////// | 317 | ///////////////////////////////////////////////////////// |
@@ -348,7 +346,7 @@ exports.ViewUtils = Montage.create(Component, { | |||
348 | if (pt.length == 2) pt[2] = 0; | 346 | if (pt.length == 2) pt[2] = 0; |
349 | 347 | ||
350 | // transform the bounds up the tree | 348 | // transform the bounds up the tree |
351 | var parent = child.parentElement; | 349 | var parent = child.offsetParent; |
352 | if ( parent ) | 350 | if ( parent ) |
353 | { | 351 | { |
354 | this.setViewportObj( child ); | 352 | this.setViewportObj( child ); |
@@ -360,11 +358,21 @@ exports.ViewUtils = Montage.create(Component, { | |||
360 | 358 | ||
361 | if (this.elementHas3D( child )) | 359 | if (this.elementHas3D( child )) |
362 | { | 360 | { |
361 | // TODO - Commenting out flatten support until new perspective workflow is fully working | ||
363 | // if (flatten) pt[2] = 0; | 362 | // if (flatten) pt[2] = 0; |
363 | // var flatten = (parent !== this._rootElement) && (ElementsMediator.getProperty(parent, "-webkit-transform-style") !== "preserve-3d"); | ||
364 | // if(flatten) | ||
365 | // { | ||
366 | // pt[2] = 0; | ||
367 | // } | ||
364 | pt = this.screenToView( pt[0], pt[1], pt[2] ); | 368 | pt = this.screenToView( pt[0], pt[1], pt[2] ); |
365 | pt[3] = 1; | 369 | pt[3] = 1; |
366 | //var wPt = childMat.multiply( pt ); | 370 | //var wPt = childMat.multiply( pt ); |
367 | var wPt = glmat4.multiplyVec3( childMat, pt, [] ); | 371 | var wPt = glmat4.multiplyVec3( childMat, pt, [] ); |
372 | // if(flatten) | ||
373 | // { | ||
374 | // wPt[2] = 0; | ||
375 | // } | ||
368 | var scrPt = this.viewToScreen( wPt ); | 376 | var scrPt = this.viewToScreen( wPt ); |
369 | pt = scrPt; | 377 | pt = scrPt; |
370 | } | 378 | } |
@@ -386,7 +394,7 @@ exports.ViewUtils = Montage.create(Component, { | |||
386 | pt[3] = 1; | 394 | pt[3] = 1; |
387 | 395 | ||
388 | // transform the bounds up the tree | 396 | // transform the bounds up the tree |
389 | var parent = child.parentElement; | 397 | var parent = child.offsetParent; |
390 | if ( parent ) | 398 | if ( parent ) |
391 | { | 399 | { |
392 | this.setViewportObj( child ); | 400 | this.setViewportObj( child ); |
@@ -421,7 +429,7 @@ exports.ViewUtils = Montage.create(Component, { | |||
421 | 429 | ||
422 | /* | 430 | /* |
423 | this.pushViewportObj( elt ); | 431 | this.pushViewportObj( elt ); |
424 | var parent = elt.parentElement; | 432 | var parent = elt.offsetParent; |
425 | var offset = this.getElementOffset( elt ); | 433 | var offset = this.getElementOffset( elt ); |
426 | offset[2] = 0; | 434 | offset[2] = 0; |
427 | var localEyePt = this.getCenterOfProjection(); | 435 | var localEyePt = this.getCenterOfProjection(); |
@@ -480,7 +488,15 @@ exports.ViewUtils = Montage.create(Component, { | |||
480 | var plane = MathUtils.transformPlane( [0,0,1,0], mat ); | 488 | var plane = MathUtils.transformPlane( [0,0,1,0], mat ); |
481 | 489 | ||
482 | // project the view point onto the plane | 490 | // project the view point onto the plane |
483 | var eyePt = this.getEyePoint(); | 491 | var eyePt; |
492 | if(this.getPerspectiveDistFromElement(child)) | ||
493 | { | ||
494 | eyePt = this.getEyePoint(); | ||
495 | } | ||
496 | else | ||
497 | { | ||
498 | eyePt = [viewPt[0], viewPt[1], 1400]; | ||
499 | } | ||
484 | var projPt = MathUtils.vecIntersectPlane( eyePt, MathUtils.vecSubtract(viewPt,eyePt), plane ); | 500 | var projPt = MathUtils.vecIntersectPlane( eyePt, MathUtils.vecSubtract(viewPt,eyePt), plane ); |
485 | 501 | ||
486 | var childPt; | 502 | var childPt; |
@@ -522,7 +538,15 @@ exports.ViewUtils = Montage.create(Component, { | |||
522 | var plane = MathUtils.transformPlane( [0,0,1,0], mat ); | 538 | var plane = MathUtils.transformPlane( [0,0,1,0], mat ); |
523 | 539 | ||
524 | // project the view point onto the plane | 540 | // project the view point onto the plane |
525 | var eyePt = this.getEyePoint(); | 541 | var eyePt; |
542 | if(this.getPerspectiveDistFromElement(child)) | ||
543 | { | ||
544 | eyePt = this.getEyePoint(); | ||
545 | } | ||
546 | else | ||
547 | { | ||
548 | eyePt = [viewPt[0], viewPt[1], 1400]; | ||
549 | } | ||
526 | var projPt = MathUtils.vecIntersectPlane( eyePt, MathUtils.vecSubtract(viewPt,eyePt), plane ); | 550 | var projPt = MathUtils.vecIntersectPlane( eyePt, MathUtils.vecSubtract(viewPt,eyePt), plane ); |
527 | 551 | ||
528 | this.popViewportObj(); | 552 | this.popViewportObj(); |
@@ -533,7 +557,7 @@ exports.ViewUtils = Montage.create(Component, { | |||
533 | 557 | ||
534 | 558 | ||
535 | parentToChildVec: { | 559 | parentToChildVec: { |
536 | value: function( parentPt, child ) { | 560 | value: function( parentPt, child, rtnEyePt ) { |
537 | var pt = parentPt.slice(0); | 561 | var pt = parentPt.slice(0); |
538 | if (pt.length == 2) pt[2] = 0.0; | 562 | if (pt.length == 2) pt[2] = 0.0; |
539 | 563 | ||
@@ -546,12 +570,24 @@ exports.ViewUtils = Montage.create(Component, { | |||
546 | this.setViewportObj( child ); | 570 | this.setViewportObj( child ); |
547 | pt = this.screenToView( pt[0], pt[1], pt[2] ); | 571 | pt = this.screenToView( pt[0], pt[1], pt[2] ); |
548 | 572 | ||
549 | var eyePt = this.getEyePoint(); | 573 | var eyePt; |
550 | //var eyePt = [0, 0, 0]; | 574 | if(this.getPerspectiveDistFromElement(child)) |
551 | //var vec = [pt[0], pt[1], pt[2]].subtract( eyePt ); | 575 | { |
576 | eyePt = this.getEyePoint(); | ||
577 | } | ||
578 | else | ||
579 | { | ||
580 | eyePt = [pt[0], pt[1], 1400]; | ||
581 | } | ||
552 | var vec = vecUtils.vecSubtract(3, [pt[0], pt[1], pt[2]], eyePt); | 582 | var vec = vecUtils.vecSubtract(3, [pt[0], pt[1], pt[2]], eyePt); |
553 | vec = vecUtils.vecNormalize( 3, vec ); | 583 | vec = vecUtils.vecNormalize( 3, vec ); |
554 | 584 | ||
585 | if(rtnEyePt) | ||
586 | { | ||
587 | rtnEyePt[0] = eyePt[0]; | ||
588 | rtnEyePt[1] = eyePt[1]; | ||
589 | rtnEyePt[2] = eyePt[2]; | ||
590 | } | ||
555 | return vec; | 591 | return vec; |
556 | } | 592 | } |
557 | }, | 593 | }, |
@@ -567,19 +603,6 @@ exports.ViewUtils = Montage.create(Component, { | |||
567 | w = elt.offsetWidth, | 603 | w = elt.offsetWidth, |
568 | h = elt.offsetHeight; | 604 | h = elt.offsetHeight; |
569 | 605 | ||
570 | if(elt.width) | ||
571 | w = elt.width; | ||
572 | if(elt.height) | ||
573 | h = elt.height; | ||
574 | |||
575 | if (elt.style) | ||
576 | { | ||
577 | if (elt.style.left) left = MathUtils.styleToNumber(elt.style.left); | ||
578 | if (elt.style.top) top = MathUtils.styleToNumber(elt.style.top); | ||
579 | if (elt.style.width) w = MathUtils.styleToNumber(elt.style.width); | ||
580 | if (elt.style.height) h = MathUtils.styleToNumber(elt.style.height); | ||
581 | } | ||
582 | |||
583 | // if (elt instanceof SVGSVGElement) { | 606 | // if (elt instanceof SVGSVGElement) { |
584 | if(elt.nodeName.toLowerCase() === "svg") { | 607 | if(elt.nodeName.toLowerCase() === "svg") { |
585 | if(w instanceof SVGAnimatedLength) | 608 | if(w instanceof SVGAnimatedLength) |
@@ -622,6 +645,21 @@ exports.ViewUtils = Montage.create(Component, { | |||
622 | // if (elt.__ninjaXOff) xOff = elt.__ninjaXOff; | 645 | // if (elt.__ninjaXOff) xOff = elt.__ninjaXOff; |
623 | // if (elt.__ninjaYOff) yOff = elt.__ninjaYOff; |