From 52fac825174d16e3ff6875fc497d3f3cfaf4812c Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Wed, 21 Mar 2012 12:02:36 -0700 Subject: Get matrix and perspective distance from styles controller. Signed-off-by: Nivesh Rajbhandari --- js/helper-classes/3D/view-utils.js | 48 -------------------------------------- 1 file changed, 48 deletions(-) (limited to 'js/helper-classes/3D/view-utils.js') diff --git a/js/helper-classes/3D/view-utils.js b/js/helper-classes/3D/view-utils.js index 5a820fc2..41fb8d20 100755 --- a/js/helper-classes/3D/view-utils.js +++ b/js/helper-classes/3D/view-utils.js @@ -1099,54 +1099,6 @@ exports.ViewUtils = Montage.create(Component, { } }, - transformStringToMat: { - value: function( str ) { - var rtnMat; - - var index1 = str.indexOf( "matrix3d("); - if (index1 >= 0) - { - index1 += 9; // do not include 'matrix3d(' - var index2 = str.indexOf( ")", index1 ); - if (index2 >= 0) - { - var substr = str.substr( index1, (index2-index1)); - if (substr && (substr.length > 0)) - { - var numArray = substr.split(','); - var nNums = numArray.length; - if (nNums == 16) - { - // gl-matrix wants row order - rtnMat = numArray; - for (var i=0; i<16; i++) - rtnMat[i] = Number( rtnMat[i] ); - - // the matrix as input is column major order. The Matrix - // class expects the numbers in row major order. - /* - var rowArray = new Array; - for (var i=0; i<4; i++) - { - rtnMat.push( numArray[i] ); - var row = new Array; - row.push( Number(numArray[i ]) ); - row.push( Number(numArray[i+ 4]) ); - row.push( Number(numArray[i+ 8]) ); - row.push( Number(numArray[i+12]) ); - rowArray.push( row ); - } - rtnMat = Matrix.create( rowArray ); - */ - } - } - } - } - - return rtnMat; - } - }, - pushViewportObj: { value: function( obj ) { this._viewportObjStack.push( this.m_viewportObj ); -- cgit v1.2.3 From 9b7dac9215fbd7c0fe7a80d3e8f1ff378332fec3 Mon Sep 17 00:00:00 2001 From: Pushkar Joshi Date: Fri, 23 Mar 2012 14:32:46 -0700 Subject: Almost working version of brush tool that uses only local coordinates to store the brush stroke points. Current version does not yet update the width and height of the brush stroke canvas upon changing the brush stroke through the PI. Also, current version does not obtain 3D position of points properly from the drawing tool base (see BrushTool _getUnsnappedPosition) --- js/helper-classes/3D/view-utils.js | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) (limited to 'js/helper-classes/3D/view-utils.js') diff --git a/js/helper-classes/3D/view-utils.js b/js/helper-classes/3D/view-utils.js index 5a820fc2..a72b7906 100755 --- a/js/helper-classes/3D/view-utils.js +++ b/js/helper-classes/3D/view-utils.js @@ -1200,10 +1200,19 @@ exports.ViewUtils = Montage.create(Component, { // MISCELLANEOUS // event.layerX/Y: var pt = viewUtils.getMousePoint(event); + getStageDimension: { + value: function() + { + var width = parseInt(this.application.ninja.stage.documentRoot.elementModel.stageDimension.style.getProperty("width")); + var height= parseInt(this.application.ninja.stage.documentRoot.elementModel.stageDimension.style.getProperty("height")); + return[width,height]; + } + }, + getStage: { value: function() { - return snapManagerModule.SnapManager.getStage(); + return this.application.ninja.stage.snapManager.getStage(); } }, @@ -1303,7 +1312,7 @@ exports.ViewUtils = Montage.create(Component, { { value: function() { - return this.application.ninjs.stage.canvas; + return this.application.ninja.stage.canvas; } }, -- cgit v1.2.3 From 952e0b2c28af081041fa8987c3e865b931d052fa Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Mon, 9 Apr 2012 16:04:24 -0700 Subject: Single perspective fix. Note that rotating multiple objects when the stage is rotated still doesn't work and flatten still doesn't work. Signed-off-by: Nivesh Rajbhandari --- js/helper-classes/3D/view-utils.js | 163 +++++++++++++++++++++++++++---------- 1 file changed, 121 insertions(+), 42 deletions(-) (limited to 'js/helper-classes/3D/view-utils.js') diff --git a/js/helper-classes/3D/view-utils.js b/js/helper-classes/3D/view-utils.js index 63c2cb52..55ecbc59 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, { setViewportObj: { value: function( vp ) { this.m_viewportObj = vp; - this._perspectiveDist = 1400; - var dist = this.getPerspectiveDistFromElement( vp ); - var mode = this.getPerspectiveModeFromElement( vp ); + this._perspectiveDist = this.getPerspectiveDistFromElement( vp ); } }, getViewportObj: { value: function() { return this.m_viewportObj; } }, @@ -360,11 +358,21 @@ exports.ViewUtils = Montage.create(Component, { if (this.elementHas3D( child )) { + // TODO - Commenting out flatten support until new perspective workflow is fully working // if (flatten) pt[2] = 0; +// var flatten = (parent !== this._rootElement) && (ElementsMediator.getProperty(parent, "-webkit-transform-style") !== "preserve-3d"); +// if(flatten) +// { +// pt[2] = 0; +// } pt = this.screenToView( pt[0], pt[1], pt[2] ); pt[3] = 1; //var wPt = childMat.multiply( pt ); var wPt = glmat4.multiplyVec3( childMat, pt, [] ); +// if(flatten) +// { +// wPt[2] = 0; +// } var scrPt = this.viewToScreen( wPt ); pt = scrPt; } @@ -480,7 +488,15 @@ exports.ViewUtils = Montage.create(Component, { var plane = MathUtils.transformPlane( [0,0,1,0], mat ); // project the view point onto the plane - var eyePt = this.getEyePoint(); + var eyePt; + if(this.getPerspectiveDistFromElement(child)) + { + eyePt = this.getEyePoint(); + } + else + { + eyePt = [viewPt[0], viewPt[1], 1400]; + } var projPt = MathUtils.vecIntersectPlane( eyePt, MathUtils.vecSubtract(viewPt,eyePt), plane ); var childPt; @@ -522,7 +538,15 @@ exports.ViewUtils = Montage.create(Component, { var plane = MathUtils.transformPlane( [0,0,1,0], mat ); // project the view point onto the plane - var eyePt = this.getEyePoint(); + var eyePt; + if(this.getPerspectiveDistFromElement(child)) + { + eyePt = this.getEyePoint(); + } + else + { + eyePt = [viewPt[0], viewPt[1], 1400]; + } var projPt = MathUtils.vecIntersectPlane( eyePt, MathUtils.vecSubtract(viewPt,eyePt), plane ); this.popViewportObj(); @@ -533,7 +557,7 @@ exports.ViewUtils = Montage.create(Component, { parentToChildVec: { - value: function( parentPt, child ) { + value: function( parentPt, child, rtnEyePt ) { var pt = parentPt.slice(0); if (pt.length == 2) pt[2] = 0.0; @@ -546,12 +570,24 @@ exports.ViewUtils = Montage.create(Component, { this.setViewportObj( child ); pt = this.screenToView( pt[0], pt[1], pt[2] ); - var eyePt = this.getEyePoint(); - //var eyePt = [0, 0, 0]; - //var vec = [pt[0], pt[1], pt[2]].subtract( eyePt ); + var eyePt; + if(this.getPerspectiveDistFromElement(child)) + { + eyePt = this.getEyePoint(); + } + else + { + eyePt = [pt[0], pt[1], 1400]; + } var vec = vecUtils.vecSubtract(3, [pt[0], pt[1], pt[2]], eyePt); vec = vecUtils.vecNormalize( 3, vec ); + if(rtnEyePt) + { + rtnEyePt[0] = eyePt[0]; + rtnEyePt[1] = eyePt[1]; + rtnEyePt[2] = eyePt[2]; + } return vec; } }, @@ -707,6 +743,10 @@ exports.ViewUtils = Montage.create(Component, { projectToViewPlane: { value: function( viewPos ) { + if(!this._perspectiveDist) + { + return viewPos.slice(0); + } var viewPt; var viewport = this.m_viewportObj; if (viewport) @@ -734,6 +774,10 @@ exports.ViewUtils = Montage.create(Component, { unproject: { value: function( pt ) { + if(!this._perspectiveDist) + { + return pt.slice(0); + } var viewPt; var viewport = this.m_viewportObj; if (viewport) @@ -790,26 +834,33 @@ exports.ViewUtils = Montage.create(Component, { getStageWorldToGlobalMatrix: { value: function() { - var stage = this.application.ninja.currentDocument.documentRoot; + var stage = this.application.ninja.currentDocument.documentRoot, + projMat; this.pushViewportObj( stage ); - // get the matrix to the parent - var mat = Matrix.I(4); - //var projMat = Matrix.I(4).multiply( this.getPerspectiveDistFromElement(stage) ); - var p = this.getPerspectiveDistFromElement(stage); - var projMat = glmat4.scale( Matrix.I(4), [p,p,p], [] ); - projMat[11] = -1; - var cop = this.getCenterOfProjection(); - var v2s = Matrix.Translation([cop[0], cop[1], 0]); + // get the matrix to the parent + var mat = Matrix.I(4); + + var cop = this.getCenterOfProjection(); + var v2s = Matrix.Translation([cop[0], cop[1], 0]); - //mat = v2s.multiply( projMat ); + var p = this.getPerspectiveDistFromElement(stage); + if(p) + { + projMat = glmat4.scale( Matrix.I(4), [p,p,p], [] ); + projMat[11] = -1; mat = glmat4.multiply( v2s, projMat, [] ); + } + else + { + mat = v2s; + } - // offset to the parent - var offset = this.getElementOffset( stage ); - var offMat = Matrix.Translation([offset[0], offset[1], 0]); - //mat = offMat.multiply( mat ); - glmat4.multiply( offMat, mat, mat ); + // offset to the parent + var offset = this.getElementOffset( stage ); + var offMat = Matrix.Translation([offset[0], offset[1], 0]); + //mat = offMat.multiply( mat ); + glmat4.multiply( offMat, mat, mat ); this.popViewportObj(); @@ -837,7 +888,7 @@ exports.ViewUtils = Montage.create(Component, { globalScreenToLocalWorld: { value: function( globalPt, elt ) { var objPt = this.globalToLocal( globalPt, elt ); - var viewPt = this.localScreenToLocalWorld( objPt, elt ) + var viewPt = this.localScreenToLocalWorld( objPt, elt ); /* MathUtils.makeDimension3( objPt ); @@ -882,7 +933,15 @@ exports.ViewUtils = Montage.create(Component, { getLocalToGlobalMatrix: { value: function( elt ) { - var mat = Matrix.I(4); + var mat = Matrix.I(4), + projMat, + pDist; + // TODO - Commenting out flatten support until new perspective workflow is fully working + var zMat = Matrix.I(4); +// zMat[9] = 0; +// zMat[10] = 0; +// zMat[11] = 0; +// zMat[12] = 0; while (elt) { this.pushViewportObj( elt ); @@ -891,17 +950,33 @@ exports.ViewUtils = Montage.create(Component, { var objMat = this.getMatrixFromElement( elt ); //var projMat = Matrix.I(4).multiply( this.getPerspectiveDistFromElement(elt) ); - var pDist = this.getPerspectiveDistFromElement(elt); - var projMat = glmat4.scale(Matrix.I(4), [pDist,pDist,pDist], []); - projMat[11] = -1; - projMat[15] = 1400; + pDist = this.getPerspectiveDistFromElement(elt); + if(pDist) + { + projMat = glmat4.scale(Matrix.I(4), [pDist,pDist,pDist], []); + projMat[11] = -1; + projMat[15] = 1400; + } var v2s = Matrix.Translation([cop[0], cop[1], 0]); glmat4.multiply( s2v, mat, mat ); glmat4.multiply( objMat, mat, mat ); - glmat4.multiply( projMat, mat, mat ); +// glmat4.multiply( projMat, mat, mat ); + if(pDist) + { + //mat = projMat.multiply( mat ); + glmat4.multiply( projMat, mat, mat ); + pDist = null; + } glmat4.multiply( v2s, mat, mat ); + // TODO - Commenting out flatten support until new perspective workflow is fully working +// var flatten = (elt !== this._rootElement) && (elt.parentElement !== this._rootElement) && (ElementsMediator.getProperty(elt.parentElement, "-webkit-transform-style") !== "preserve-3d"); +// if(flatten) +// { +// glmat4.multiply( zMat, mat, mat ); +// } + // offset to the parent var offset = this.getElementOffset( elt ); var offMat = Matrix.Translation([offset[0], offset[1], 0]); @@ -922,21 +997,24 @@ exports.ViewUtils = Montage.create(Component, { getObjToStageWorldMatrix: { value: function( elt, shouldProject ) { - var mat = Matrix.I(4); + var mat = Matrix.I(4), + projMat, + pDist; while (elt) { this.pushViewportObj( elt ); var cop = this.getCenterOfProjection(); var s2v = Matrix.Translation([-cop[0], -cop[1], 0]); var objMat = this.getMatrixFromElement( elt ); - var projMat; if(shouldProject) { - //projMat = Matrix.I(4).multiply( this.getPerspectiveDistFromElement(elt) ); - var pDist = this.getPerspectiveDistFromElement(elt); - var projMat = glmat4.scale(Matrix.I(4), [pDist,pDist,pDist], []); - projMat[11] = -1; - projMat[15] = 1400; + pDist = this.getPerspectiveDistFromElement(elt); + if(pDist) + { + projMat = glmat4.scale(Matrix.I(4), [pDist,pDist,pDist], []); + projMat[11] = -1; + projMat[15] = 1400; + } } var v2s = Matrix.Translation([cop[0], cop[1], 0]); this.popViewportObj(); @@ -947,10 +1025,11 @@ exports.ViewUtils = Montage.create(Component, { if (elt === this._stageElement) break; //mat = objMat.multiply( mat ); glmat4.multiply( objMat, mat, mat ); - if(shouldProject) + if(shouldProject && pDist) { //mat = projMat.multiply( mat ); glmat4.multiply( projMat, mat, mat ); + pDist = null; } //mat = v2s.multiply( mat ); glmat4.multiply( v2s, mat, mat ); @@ -1101,8 +1180,8 @@ exports.ViewUtils = Montage.create(Component, { pushViewportObj: { value: function( obj ) { - this._viewportObjStack.push( this.m_viewportObj ); - this.m_viewportObj = obj; + this.setViewportObj(obj); + this._viewportObjStack.push( obj ); } }, @@ -1115,7 +1194,7 @@ exports.ViewUtils = Montage.create(Component, { } var rtn = this.m_viewportObj; - this.m_viewportObj = this._viewportObjStack.pop(); + this.setViewportObj(this._viewportObjStack.pop()); return rtn; } }, -- cgit v1.2.3 From 2bf707156eafeb5f6166c6f28cd385ef2c4b5a50 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Wed, 11 Apr 2012 11:05:12 -0700 Subject: offsets should be calculated on offsetParent instead of parentElement. Signed-off-by: Nivesh Rajbhandari --- js/helper-classes/3D/view-utils.js | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) (limited to 'js/helper-classes/3D/view-utils.js') diff --git a/js/helper-classes/3D/view-utils.js b/js/helper-classes/3D/view-utils.js index 55ecbc59..4a6c2503 100755 --- a/js/helper-classes/3D/view-utils.js +++ b/js/helper-classes/3D/view-utils.js @@ -259,7 +259,7 @@ exports.ViewUtils = Montage.create(Component, { // transform the point up the tree var child = elt; - var parent = elt.parentElement; + var parent = elt.offsetParent; while ( parent ) { // go to screen space of the current child @@ -287,7 +287,7 @@ exports.ViewUtils = Montage.create(Component, { } child = parent; - parent = parent.parentElement; + parent = parent.offsetParent; } return pt; @@ -303,7 +303,7 @@ exports.ViewUtils = Montage.create(Component, { // transform the bounds up the tree var child = elt; - var parent = elt.parentElement; + var parent = elt.offsetParent; while ( parent ) { pt = this.childToParent( pt, child ); @@ -311,7 +311,7 @@ exports.ViewUtils = Montage.create(Component, { if (parent === this._rootElement) break; child = parent; - parent = parent.parentElement; + parent = parent.offsetParent; } ///////////////////////////////////////////////////////// @@ -346,7 +346,7 @@ exports.ViewUtils = Montage.create(Component, { if (pt.length == 2) pt[2] = 0; // transform the bounds up the tree - var parent = child.parentElement; + var parent = child.offsetParent; if ( parent ) { this.setViewportObj( child ); @@ -394,7 +394,7 @@ exports.ViewUtils = Montage.create(Component, { pt[3] = 1; // transform the bounds up the tree - var parent = child.parentElement; + var parent = child.offsetParent; if ( parent ) { this.setViewportObj( child ); @@ -429,7 +429,7 @@ exports.ViewUtils = Montage.create(Component, { /* this.pushViewportObj( elt ); - var parent = elt.parentElement; + var parent = elt.offsetParent; var offset = this.getElementOffset( elt ); offset[2] = 0; var localEyePt = this.getCenterOfProjection(); @@ -987,7 +987,7 @@ exports.ViewUtils = Montage.create(Component, { if (elt === this._stageElement) break; if (elt === this._rootElement) break; - elt = elt.parentElement; + elt = elt.offsetParent; if (elt === this._rootElement) break; } @@ -1040,7 +1040,7 @@ exports.ViewUtils = Montage.create(Component, { //mat = offMat.multiply( mat ); glmat4.multiply( offMat, mat, mat ); - elt = elt.parentElement; + elt = elt.offsetParent; } return mat; -- cgit v1.2.3 From 3bbf32b285405562471fa594c283e271d347734e Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Thu, 12 Apr 2012 10:52:32 -0700 Subject: Borders are not factored into offset calculations by the browser, so we have to adjust for them. Also, we should set webkit-transform-style to preserve-3d if elements are rotated (until we also support flattened mode). Signed-off-by: Nivesh Rajbhandari --- js/helper-classes/3D/view-utils.js | 15 +++++++++++++++ 1 file changed, 15 insertions(+) (limited to 'js/helper-classes/3D/view-utils.js') diff --git a/js/helper-classes/3D/view-utils.js b/js/helper-classes/3D/view-utils.js index 4a6c2503..addabba5 100755 --- a/js/helper-classes/3D/view-utils.js +++ b/js/helper-classes/3D/view-utils.js @@ -658,6 +658,21 @@ exports.ViewUtils = Montage.create(Component, { // if (elt.__ninjaXOff) xOff = elt.__ninjaXOff; // if (elt.__ninjaYOff) yOff = elt.__ninjaYOff; var offset = [xOff, yOff]; + if(elt.offsetParent && (elt.offsetParent !== this._stageElement)) + { + var pS = elt.ownerDocument.defaultView.getComputedStyle(elt.offsetParent); + + var border = parseInt(pS.getPropertyValue("border")); + + if(border) + { + var bl = parseInt(pS.getPropertyValue("border-left-width")), + bt = parseInt(pS.getPropertyValue("border-top-width")); + + offset[0] += bl; + offset[1] += bt; + } + } if(elt === this._stageElement) { -- cgit v1.2.3 From 77c6ab76ffe9fc380ed6fdb7b29ccd40acaee74d Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Thu, 12 Apr 2012 14:24:25 -0700 Subject: Fixing selection/tag layout drawing when canvas and image elements have borders. Signed-off-by: Nivesh Rajbhandari --- js/helper-classes/3D/view-utils.js | 13 ------------- 1 file changed, 13 deletions(-) (limited to 'js/helper-classes/3D/view-utils.js') diff --git a/js/helper-classes/3D/view-utils.js b/js/helper-classes/3D/view-utils.js index addabba5..1cd1c313 100755 --- a/js/helper-classes/3D/view-utils.js +++ b/js/helper-classes/3D/view-utils.js @@ -603,19 +603,6 @@ exports.ViewUtils = Montage.create(Component, { w = elt.offsetWidth, h = elt.offsetHeight; - if(elt.width) - w = elt.width; - if(elt.height) - h = elt.height; - - if (elt.style) - { - if (elt.style.left) left = MathUtils.styleToNumber(elt.style.left); - if (elt.style.top) top = MathUtils.styleToNumber(elt.style.top); - if (elt.style.width) w = MathUtils.styleToNumber(elt.style.width); - if (elt.style.height) h = MathUtils.styleToNumber(elt.style.height); - } - // if (elt instanceof SVGSVGElement) { if(elt.nodeName.toLowerCase() === "svg") { if(w instanceof SVGAnimatedLength) -- cgit v1.2.3