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/snap-manager.js | 8 ++++---- js/helper-classes/3D/view-utils.js | 18 +++++++++--------- 2 files changed, 13 insertions(+), 13 deletions(-) diff --git a/js/helper-classes/3D/snap-manager.js b/js/helper-classes/3D/snap-manager.js index 61f5bc97..02e81a62 100755 --- a/js/helper-classes/3D/snap-manager.js +++ b/js/helper-classes/3D/snap-manager.js @@ -1354,7 +1354,7 @@ var SnapManager = exports.SnapManager = Montage.create(Component, { var offset = viewUtils.getElementOffset( elt ); MathUtils.makeDimension3( offset ); var parentPt = vecUtils.vecAdd(3, scrPt, offset ); - var globalPt = viewUtils.localToGlobal( parentPt, elt.parentElement ); + var globalPt = viewUtils.localToGlobal( parentPt, elt.offsetParent ); var dist = vecUtils.vecDist(2, globalPt, targetScrPt ); if (dist < this.ELEMENT_VERTEX_HIT_RAD) @@ -1392,7 +1392,7 @@ var SnapManager = exports.SnapManager = Montage.create(Component, { var offset = viewUtils.getElementOffset( elt ); MathUtils.makeDimension3( offset ); var parentPt = vecUtils.vecAdd(3, scrPt, offset ); - var globalPt = viewUtils.localToGlobal( parentPt, elt.parentElement ); + var globalPt = viewUtils.localToGlobal( parentPt, elt.offsetParent ); var dist = vecUtils.vecDist(2, globalPt, targetScrPt ); if (dist < this.ELEMENT_EDGE_HIT_RAD) @@ -1445,7 +1445,7 @@ var SnapManager = exports.SnapManager = Montage.create(Component, { var offset = viewUtils.getElementOffset( elt ); MathUtils.makeDimension3( offset ); var parentPt = vecUtils.vecAdd(3, scrPt, offset ); - var globalPt = viewUtils.localToGlobal( parentPt, elt.parentElement ); + var globalPt = viewUtils.localToGlobal( parentPt, elt.offsetParent ); var dist = vecUtils.vecDist(2, globalPt, targetScrPt ); if (dist < this.ELEMENT_VERTEX_HIT_RAD) @@ -1483,7 +1483,7 @@ var SnapManager = exports.SnapManager = Montage.create(Component, { var offset = viewUtils.getElementOffset( elt ); MathUtils.makeDimension3( offset ); var parentPt = vecUtils.vecAdd(3, scrPt, offset ); - var globalPt = viewUtils.localToGlobal( parentPt, elt.parentElement ); + var globalPt = viewUtils.localToGlobal( parentPt, elt.offsetParent ); var dist = vecUtils.vecDist(2, globalPt, targetScrPt ); if (dist < this.ELEMENT_EDGE_HIT_RAD) 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/controllers/elements/element-controller.js | 4 ++++ js/helper-classes/3D/view-utils.js | 15 +++++++++++++++ 2 files changed, 19 insertions(+) diff --git a/js/controllers/elements/element-controller.js b/js/controllers/elements/element-controller.js index 7ab6664f..2ac84452 100755 --- a/js/controllers/elements/element-controller.js +++ b/js/controllers/elements/element-controller.js @@ -264,6 +264,10 @@ exports.ElementController = Montage.create(Component, { "-webkit-transform", "matrix3d(" + MathUtils.scientificToDecimal(mat, 5) + ")"); + this.application.ninja.stylesController.setElementStyle(el, + "-webkit-transform-style", + "preserve-3d"); + // TODO - We don't support perspective on individual elements yet // this.application.ninja.stylesController.setElementStyle(el, // "-webkit-perspective", 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/data/pi/pi-data.js | 2 ++ js/helper-classes/3D/view-utils.js | 13 ------------- 2 files changed, 2 insertions(+), 13 deletions(-) diff --git a/js/data/pi/pi-data.js b/js/data/pi/pi-data.js index 07017f09..157c54ec 100755 --- a/js/data/pi/pi-data.js +++ b/js/data/pi/pi-data.js @@ -131,6 +131,8 @@ exports.PiData = Montage.create( Montage, { type : "hottext", id : "borderWidth", prop : "border-width", + defaultValue: 0, + valueMutator: parseFloat, label : "Border", min : 0, max : 100, 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