diff options
Diffstat (limited to 'js/helper-classes/3D/view-utils.js')
-rwxr-xr-x | js/helper-classes/3D/view-utils.js | 250 |
1 files changed, 148 insertions, 102 deletions
diff --git a/js/helper-classes/3D/view-utils.js b/js/helper-classes/3D/view-utils.js index f803a274..ee822f1f 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; } }, |
@@ -267,7 +265,7 @@ exports.ViewUtils = Montage.create(Component, { | |||
267 | 265 | ||
268 | // transform the point up the tree | 266 | // transform the point up the tree |
269 | var child = elt; | 267 | var child = elt; |
270 | var parent = elt.parentElement; | 268 | var parent = elt.offsetParent; |
271 | while ( parent ) | 269 | while ( parent ) |
272 | { | 270 | { |
273 | // go to screen space of the current child | 271 | // go to screen space of the current child |
@@ -295,7 +293,7 @@ exports.ViewUtils = Montage.create(Component, { | |||
295 | } | 293 | } |
296 | 294 | ||
297 | child = parent; | 295 | child = parent; |
298 | parent = parent.parentElement; | 296 | parent = parent.offsetParent; |
299 | } | 297 | } |
300 | 298 | ||
301 | return pt; | 299 | return pt; |
@@ -311,7 +309,7 @@ exports.ViewUtils = Montage.create(Component, { | |||
311 | 309 | ||
312 | // transform the bounds up the tree | 310 | // transform the bounds up the tree |
313 | var child = elt; | 311 | var child = elt; |
314 | var parent = elt.parentElement; | 312 | var parent = elt.offsetParent; |
315 | while ( parent ) | 313 | while ( parent ) |
316 | { | 314 | { |
317 | pt = this.childToParent( pt, child ); | 315 | pt = this.childToParent( pt, child ); |
@@ -319,7 +317,7 @@ exports.ViewUtils = Montage.create(Component, { | |||
319 | if (parent === this._rootElement) break; | 317 | if (parent === this._rootElement) break; |
320 | 318 | ||
321 | child = parent; | 319 | child = parent; |
322 | parent = parent.parentElement; | 320 | parent = parent.offsetParent; |
323 | } | 321 | } |
324 | 322 | ||
325 | ///////////////////////////////////////////////////////// | 323 | ///////////////////////////////////////////////////////// |
@@ -354,7 +352,7 @@ exports.ViewUtils = Montage.create(Component, { | |||
354 | if (pt.length == 2) pt[2] = 0; | 352 | if (pt.length == 2) pt[2] = 0; |
355 | 353 | ||
356 | // transform the bounds up the tree | 354 | // transform the bounds up the tree |
357 | var parent = child.parentElement; | 355 | var parent = child.offsetParent; |
358 | if ( parent ) | 356 | if ( parent ) |
359 | { | 357 | { |
360 | this.setViewportObj( child ); | 358 | this.setViewportObj( child ); |
@@ -366,11 +364,21 @@ exports.ViewUtils = Montage.create(Component, { | |||
366 | 364 | ||
367 | if (this.elementHas3D( child )) | 365 | if (this.elementHas3D( child )) |
368 | { | 366 | { |
367 | // TODO - Commenting out flatten support until new perspective workflow is fully working | ||
369 | // if (flatten) pt[2] = 0; | 368 | // if (flatten) pt[2] = 0; |
369 | // var flatten = (parent !== this._rootElement) && (ElementsMediator.getProperty(parent, "-webkit-transform-style") !== "preserve-3d"); | ||
370 | // if(flatten) | ||
371 | // { | ||
372 | // pt[2] = 0; | ||
373 | // } | ||
370 | pt = this.screenToView( pt[0], pt[1], pt[2] ); | 374 | pt = this.screenToView( pt[0], pt[1], pt[2] ); |
371 | pt[3] = 1; | 375 | pt[3] = 1; |
372 | //var wPt = childMat.multiply( pt ); | 376 | //var wPt = childMat.multiply( pt ); |
373 | var wPt = glmat4.multiplyVec3( childMat, pt, [] ); | 377 | var wPt = glmat4.multiplyVec3( childMat, pt, [] ); |
378 | // if(flatten) | ||
379 | // { | ||
380 | // wPt[2] = 0; | ||
381 | // } | ||
374 | var scrPt = this.viewToScreen( wPt ); | 382 | var scrPt = this.viewToScreen( wPt ); |
375 | pt = scrPt; | 383 | pt = scrPt; |
376 | } | 384 | } |
@@ -392,7 +400,7 @@ exports.ViewUtils = Montage.create(Component, { | |||
392 | pt[3] = 1; | 400 | pt[3] = 1; |
393 | 401 | ||
394 | // transform the bounds up the tree | 402 | // transform the bounds up the tree |
395 | var parent = child.parentElement; | 403 | var parent = child.offsetParent; |
396 | if ( parent ) | 404 | if ( parent ) |
397 | { | 405 | { |
398 | this.setViewportObj( child ); | 406 | this.setViewportObj( child ); |
@@ -427,7 +435,7 @@ exports.ViewUtils = Montage.create(Component, { | |||
427 | 435 | ||
428 | /* | 436 | /* |
429 | this.pushViewportObj( elt ); | 437 | this.pushViewportObj( elt ); |
430 | var parent = elt.parentElement; | 438 | var parent = elt.offsetParent; |
431 | var offset = this.getElementOffset( elt ); | 439 | var offset = this.getElementOffset( elt ); |
432 | offset[2] = 0; | 440 | offset[2] = 0; |
433 | var localEyePt = this.getCenterOfProjection(); | 441 | var localEyePt = this.getCenterOfProjection(); |
@@ -486,7 +494,15 @@ exports.ViewUtils = Montage.create(Component, { | |||
486 | var plane = MathUtils.transformPlane( [0,0,1,0], mat ); | 494 | var plane = MathUtils.transformPlane( [0,0,1,0], mat ); |
487 | 495 | ||
488 | // project the view point onto the plane | 496 | // project the view point onto the plane |
489 | var eyePt = this.getEyePoint(); | 497 | var eyePt; |
498 | if(this.getPerspectiveDistFromElement(child)) | ||
499 | { | ||
500 | eyePt = this.getEyePoint(); | ||
501 | } | ||
502 | else | ||
503 | { | ||
504 | eyePt = [viewPt[0], viewPt[1], 1400]; | ||
505 | } | ||
490 | var projPt = MathUtils.vecIntersectPlane( eyePt, MathUtils.vecSubtract(viewPt,eyePt), plane ); | 506 | var projPt = MathUtils.vecIntersectPlane( eyePt, MathUtils.vecSubtract(viewPt,eyePt), plane ); |
491 | 507 | ||
492 | var childPt; | 508 | var childPt; |
@@ -528,7 +544,15 @@ exports.ViewUtils = Montage.create(Component, { | |||
528 | var plane = MathUtils.transformPlane( [0,0,1,0], mat ); | 544 | var plane = MathUtils.transformPlane( [0,0,1,0], mat ); |
529 | 545 | ||
530 | // project the view point onto the plane | 546 | // project the view point onto the plane |
531 | var eyePt = this.getEyePoint(); | 547 | var eyePt; |
548 | if(this.getPerspectiveDistFromElement(child)) | ||
549 | { | ||
550 | eyePt = this.getEyePoint(); | ||
551 | } | ||
552 | else | ||
553 | { | ||
554 | eyePt = [viewPt[0], viewPt[1], 1400]; | ||
555 | } | ||
532 | var projPt = MathUtils.vecIntersectPlane( eyePt, MathUtils.vecSubtract(viewPt,eyePt), plane ); | 556 | var projPt = MathUtils.vecIntersectPlane( eyePt, MathUtils.vecSubtract(viewPt,eyePt), plane ); |
533 | 557 | ||
534 | this.popViewportObj(); | 558 | this.popViewportObj(); |
@@ -539,7 +563,7 @@ exports.ViewUtils = Montage.create(Component, { | |||
539 | 563 | ||
540 | 564 | ||
541 | parentToChildVec: { | 565 | parentToChildVec: { |
542 | value: function( parentPt, child ) { | 566 | value: function( parentPt, child, rtnEyePt ) { |
543 | var pt = parentPt.slice(0); | 567 | var pt = parentPt.slice(0); |
544 | if (pt.length == 2) pt[2] = 0.0; | 568 | if (pt.length == 2) pt[2] = 0.0; |
545 | 569 | ||
@@ -552,12 +576,24 @@ exports.ViewUtils = Montage.create(Component, { | |||
552 | this.setViewportObj( child ); | 576 | this.setViewportObj( child ); |
553 | pt = this.screenToView( pt[0], pt[1], pt[2] ); | 577 | pt = this.screenToView( pt[0], pt[1], pt[2] ); |
554 | 578 | ||
555 | var eyePt = this.getEyePoint(); | 579 | var eyePt; |
556 | //var eyePt = [0, 0, 0]; | 580 | if(this.getPerspectiveDistFromElement(child)) |
557 | //var vec = [pt[0], pt[1], pt[2]].subtract( eyePt ); | 581 | { |
582 | eyePt = this.getEyePoint(); | ||
583 | } | ||
584 | else | ||
585 | { | ||
586 | eyePt = [pt[0], pt[1], 1400]; | ||
587 | } | ||
558 | var vec = vecUtils.vecSubtract(3, [pt[0], pt[1], pt[2]], eyePt); | 588 | var vec = vecUtils.vecSubtract(3, [pt[0], pt[1], pt[2]], eyePt); |
559 | vec = vecUtils.vecNormalize( 3, vec ); | 589 | vec = vecUtils.vecNormalize( 3, vec ); |
560 | 590 | ||
591 | if(rtnEyePt) | ||
592 | { | ||
593 | rtnEyePt[0] = eyePt[0]; | ||
594 | rtnEyePt[1] = eyePt[1]; | ||
595 | rtnEyePt[2] = eyePt[2]; | ||
596 | } | ||
561 | return vec; | 597 | return vec; |
562 | } | 598 | } |
563 | }, | 599 | }, |
@@ -573,19 +609,6 @@ exports.ViewUtils = Montage.create(Component, { | |||
573 | w = elt.offsetWidth, | 609 | w = elt.offsetWidth, |
574 | h = elt.offsetHeight; | 610 | h = elt.offsetHeight; |
575 | 611 | ||
576 | if(elt.width) | ||
577 | w = elt.width; | ||
578 | if(elt.height) | ||
579 | h = elt.height; | ||
580 | |||
581 | if (elt.style) | ||
582 | { | ||
583 | if (elt.style.left) left = MathUtils.styleToNumber(elt.style.left); | ||
584 | if (elt.style.top) top = MathUtils.styleToNumber(elt.style.top); | ||
585 | if (elt.style.width) w = MathUtils.styleToNumber(elt.style.width); | ||
586 | if (elt.style.height) h = MathUtils.styleToNumber(elt.style.height); | ||
587 | } | ||
588 | |||
589 | // if (elt instanceof SVGSVGElement) { | 612 | // if (elt instanceof SVGSVGElement) { |
590 | if(elt.nodeName.toLowerCase() === "svg") { | 613 | if(elt.nodeName.toLowerCase() === "svg") { |
591 | if(w instanceof SVGAnimatedLength) | 614 | if(w instanceof SVGAnimatedLength) |
@@ -628,6 +651,21 @@ exports.ViewUtils = Montage.create(Component, { | |||
628 | // if (elt.__ninjaXOff) xOff = elt.__ninjaXOff; | 651 | // if (elt.__ninjaXOff) xOff = elt.__ninjaXOff; |
629 | // if (elt.__ninjaYOff) yOff = elt.__ninjaYOff; | 652 | // if (elt.__ninjaYOff) yOff = elt.__ninjaYOff; |
630 | var offset = [xOff, yOff]; |