From 8423cceac4f45f3d08d92ae969d17d488674717f Mon Sep 17 00:00:00 2001 From: hwc487 Date: Mon, 2 Apr 2012 16:28:09 -0700 Subject: Translate 3D fix for multi-selection Z translation --- js/tools/Translate3DToolBase.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/js/tools/Translate3DToolBase.js b/js/tools/Translate3DToolBase.js index 18e2b610..bd2b3af1 100755 --- a/js/tools/Translate3DToolBase.js +++ b/js/tools/Translate3DToolBase.js @@ -147,8 +147,8 @@ exports.Translate3DToolBase = Montage.create(ModifierToolBase, _translateGlobally: { value: function (transMat) { - //console.log( "_translateGlobally, startMat: " + this._startMat + ", transMat: " + transMat ); //console.log( "_translateGlobally, transMat: " + transMat ); + //console.log( "_translateGlobally, startMat: " + this._startMat + ", transMat: " + transMat ); var len = this._targets.length, i = 0, item, @@ -160,6 +160,7 @@ exports.Translate3DToolBase = Montage.create(ModifierToolBase, if (this._mode === 1) { + if (len > 1) curMat = this._targets[0].mat.slice(); var curInv = glmat4.inverse( curMat, [] ); transMat = glmat4.multiply( nMat, curInv, [] ); } -- cgit v1.2.3 From b6fa38e2680ccce73f4a195f9adffa552f1d237c Mon Sep 17 00:00:00 2001 From: hwc487 Date: Wed, 4 Apr 2012 12:37:43 -0700 Subject: turned off translation handles during a multi-object drag. --- js/tools/Translate3DToolBase.js | 175 ++++++++++++++++++++-------------------- js/tools/modifier-tool-base.js | 13 ++- 2 files changed, 100 insertions(+), 88 deletions(-) diff --git a/js/tools/Translate3DToolBase.js b/js/tools/Translate3DToolBase.js index bd2b3af1..32132c9a 100755 --- a/js/tools/Translate3DToolBase.js +++ b/js/tools/Translate3DToolBase.js @@ -73,13 +73,13 @@ exports.Translate3DToolBase = Montage.create(ModifierToolBase, var transMat = Matrix.Translation( delta ); - //console.log( "Translate: " + delta ); if(this._inLocalMode && (this._targets.length === 1) ) { this._translateLocally(transMat); } else { + console.log( "modifyElements delta: " + delta ); this._translateGlobally(transMat); } } @@ -147,23 +147,23 @@ exports.Translate3DToolBase = Montage.create(ModifierToolBase, _translateGlobally: { value: function (transMat) { - //console.log( "_translateGlobally, transMat: " + transMat ); - //console.log( "_translateGlobally, startMat: " + this._startMat + ", transMat: " + transMat ); + //console.log( "_translateGlobally, transMat: " + transMat ); + //console.log( "_translateGlobally, startMat: " + this._startMat + ", transMat: " + transMat ); var len = this._targets.length, i = 0, item, elt, curMat = viewUtils.getMatrixFromElement( this._target ), - matInv = glmat4.inverse(this._startMat, []), - nMat = glmat4.multiply(transMat, this._startMat, [] ), - qMat = glmat4.multiply(matInv, nMat, []); - - if (this._mode === 1) - { - if (len > 1) curMat = this._targets[0].mat.slice(); - var curInv = glmat4.inverse( curMat, [] ); - transMat = glmat4.multiply( nMat, curInv, [] ); - } + matInv = glmat4.inverse(this._startMat, []), + nMat = glmat4.multiply(transMat, this._startMat, [] ), + qMat = glmat4.multiply(matInv, nMat, []); + + if (this._mode === 1) + { + if (len > 1) curMat = this._targets[0].mat.slice(); + var curInv = glmat4.inverse( curMat, [] ); + transMat = glmat4.multiply( nMat, curInv, [] ); + } var shouldUpdateStartMat = true; @@ -185,27 +185,27 @@ exports.Translate3DToolBase = Montage.create(ModifierToolBase, // glmat4.multiply(curMat, qMat, curMat); // // viewUtils.setMatrixForElement( elt, curMat, true); - curMat[12] += transMat[12]; - curMat[13] += transMat[13]; - curMat[14] += transMat[14]; - viewUtils.setMatrixForElement( elt, curMat, true); + curMat[12] += transMat[12]; + curMat[13] += transMat[13]; + curMat[14] += transMat[14]; + viewUtils.setMatrixForElement( elt, curMat, true); if(shouldUpdateStartMat) { - //console.log( "\t\tshouldUpdateStartMat" ); + //console.log( "\t\tshouldUpdateStartMat" ); this._targets[i].mat = curMat; } } } }, - _updateTargets: { + _updateTargets: { value: function(addToUndoStack) - { - console.log( "_updateTargets" ); - var newStyles = [], - previousStyles = [], - len = this.application.ninja.selectedElements.length; + { + //console.log( "_updateTargets" ); + var newStyles = [], + previousStyles = [], + len = this.application.ninja.selectedElements.length; this._targets = []; for(var i = 0; i < len; i++) { @@ -215,47 +215,47 @@ exports.Translate3DToolBase = Montage.create(ModifierToolBase, var curMatInv = glmat4.inverse(curMat, []); this._targets.push({elt:elt, mat:curMat, matInv:curMatInv}); - if(addToUndoStack) - { - var previousStyleStr = {dist:this._undoArray[i].dist, mat:MathUtils.scientificToDecimal(this._undoArray[i].mat.slice(0), 5)}; + if(addToUndoStack) + { + var previousStyleStr = {dist:this._undoArray[i].dist, mat:MathUtils.scientificToDecimal(this._undoArray[i].mat.slice(0), 5)}; - var newStyleStr = {dist:viewUtils.getPerspectiveDistFromElement(elt), mat:MathUtils.scientificToDecimal(curMat, 5)}; + var newStyleStr = {dist:viewUtils.getPerspectiveDistFromElement(elt), mat:MathUtils.scientificToDecimal(curMat, 5)}; - previousStyles.push(previousStyleStr); - newStyles.push(newStyleStr); - } + previousStyles.push(previousStyleStr); + newStyles.push(newStyleStr); + } } if(addToUndoStack) { - ElementsMediator.set3DProperties(this.application.ninja.selectedElements, - newStyles, - "Change", - "translateTool", - previousStyles - ); - if(this._origin && this._delta) - { - if(this._handleMode !== null) - { - this._origin[this._handleMode] += this._delta; - } - else - { - this._origin[0] += this._delta[0]; - this._origin[1] += this._delta[1]; - } - } - this._delta = null; - } - // Save previous value for undo/redo - this._undoArray = []; - for(i = 0, len = this._targets.length; i < len; i++) - { - var elt = this._targets[i].elt; - var _mat = viewUtils.getMatrixFromElement(elt); - var _dist = viewUtils.getPerspectiveDistFromElement(elt); - this._undoArray.push({mat:_mat, dist:_dist}); - } + ElementsMediator.set3DProperties(this.application.ninja.selectedElements, + newStyles, + "Change", + "translateTool", + previousStyles + ); + if(this._origin && this._delta) + { + if(this._handleMode !== null) + { + this._origin[this._handleMode] += this._delta; + } + else + { + this._origin[0] += this._delta[0]; + this._origin[1] += this._delta[1]; + } + } + this._delta = null; + } + // Save previous value for undo/redo + this._undoArray = []; + for(i = 0, len = this._targets.length; i < len; i++) + { + var elt = this._targets[i].elt; + var _mat = viewUtils.getMatrixFromElement(elt); + var _dist = viewUtils.getPerspectiveDistFromElement(elt); + this._undoArray.push({mat:_mat, dist:_dist}); + } } }, @@ -305,27 +305,27 @@ exports.Translate3DToolBase = Montage.create(ModifierToolBase, } else { - if(this._origin) - { - if(this._delta) - { - if(this._handleMode !== null) - { + if(this._origin) + { + if(this._delta) + { + if(this._handleMode !== null) + { // this._origin[this._handleMode] = this._delta; - } - else - { - this._origin[0] += this._delta[0]; - this._origin[1] += this._delta[1]; - } - } - } - else - { - this._origin = drawUtils._selectionCtr.slice(0); - this._origin[0] += this.application.ninja.stage.userContentLeft; - this._origin[1] += this.application.ninja.stage.userContentTop; - } + } + else + { + this._origin[0] += this._delta[0]; + this._origin[1] += this._delta[1]; + } + } + } + else + { + this._origin = drawUtils._selectionCtr.slice(0); + this._origin[0] += this.application.ninja.stage.userContentLeft; + this._origin[1] += this.application.ninja.stage.userContentTop; + } } } } @@ -364,10 +364,13 @@ exports.Translate3DToolBase = Montage.create(ModifierToolBase, } // Draw tool handles - - this._updateHandlesOrigin(); + + this._updateHandlesOrigin(); var base = this._origin.slice(0); +// if (this.isDrawing) +// console.log( "handle origin: " + base ); + var len = this.application.ninja.selectedElements.length; var lMode = this._inLocalMode; if(len === 1) @@ -397,10 +400,10 @@ exports.Translate3DToolBase = Montage.create(ModifierToolBase, this._handles[1]._strokeStyle = 'rgba(0, 255, 0, 0.2)'; break; } - if( delta && (len > 1) ) - { - base[this._handleMode] += ~~delta; - } + if( delta && (len > 1) ) + { + base[this._handleMode] += ~~delta; + } } this._handles[0].draw(base, item, lMode); this._handles[1].draw(base, item, lMode); diff --git a/js/tools/modifier-tool-base.js b/js/tools/modifier-tool-base.js index 07b28747..e684f58a 100755 --- a/js/tools/modifier-tool-base.js +++ b/js/tools/modifier-tool-base.js @@ -852,8 +852,10 @@ exports.ModifierToolBase = Montage.create(DrawingTool, { } } - this.DrawHandles(this._delta); - if(this._canSnap) + if (!this._isDrawing || (this.application.ninja.selectedElements.length == 1)) + this.DrawHandles(this._delta); + + if(this._canSnap) { snapManager.drawLastHit(); } @@ -892,6 +894,13 @@ exports.ModifierToolBase = Montage.create(DrawingTool, { this._delta = null; } this.endDraw(event); + + this.application.ninja.stage.draw(); + if (this._targets && (this._targets.length > 1)) + { + this._origin = null; + this._updateHandlesOrigin(); + } this.DrawHandles(); } }, -- cgit v1.2.3 From 16f62ca09cc428043e8fef8bdeea11a989e62bc0 Mon Sep 17 00:00:00 2001 From: hwc487 Date: Wed, 4 Apr 2012 16:29:16 -0700 Subject: Cap fix for vecUtils. --- js/tools/TranslateObject3DTool.js | 3 ++- js/tools/modifier-tool-base.js | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/js/tools/TranslateObject3DTool.js b/js/tools/TranslateObject3DTool.js index 7163f005..867bec7f 100755 --- a/js/tools/TranslateObject3DTool.js +++ b/js/tools/TranslateObject3DTool.js @@ -7,6 +7,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot var Translate3DToolBase = require("js/tools/Translate3DToolBase").Translate3DToolBase, drawUtils = require("js/helper-classes/3D/draw-utils").DrawUtils, viewUtils = require("js/helper-classes/3D/view-utils").ViewUtils, + vecUtils = require("js/helper-classes/3D/vec-utils").VecUtils, snapManager = require("js/helper-classes/3D/snap-manager").SnapManager; exports.TranslateObject3DTool = Object.create(Translate3DToolBase, { @@ -128,7 +129,7 @@ exports.TranslateObject3DTool = Object.create(Translate3DToolBase, { // only do quadrant snapping if the 4 corners of the element are in the drag plane - var sign = MathUtils.fpSign( VecUtils.vecDot(3,this._dragPlane,[0,0,1]) + this._dragPlane[3] - 1.0); + var sign = MathUtils.fpSign( vecUtils.vecDot(3,this._dragPlane,[0,0,1]) + this._dragPlane[3] - 1.0); this._shouldUseQuadPt = (sign == 0); var wpHitRec = hitRec.convertToWorkingPlane( this._dragPlane ); diff --git a/js/tools/modifier-tool-base.js b/js/tools/modifier-tool-base.js index e684f58a..b6589cba 100755 --- a/js/tools/modifier-tool-base.js +++ b/js/tools/modifier-tool-base.js @@ -177,7 +177,7 @@ exports.ModifierToolBase = Montage.create(DrawingTool, { } // only do quadrant snapping if the 4 corners of the element are in the drag plane - var sign = MathUtils.fpSign( VecUtils.vecDot(3,this._dragPlane,[0,0,1]) + this._dragPlane[3] - 1.0); + var sign = MathUtils.fpSign( vecUtils.vecDot(3,this._dragPlane,[0,0,1]) + this._dragPlane[3] - 1.0); this._shouldUseQuadPt = (sign == 0) var wpHitRec = hitRec.convertToWorkingPlane( this._dragPlane ); -- cgit v1.2.3 From 96bfeee2e6b735b87e8482d6e2cf24d5224c6417 Mon Sep 17 00:00:00 2001 From: hwc487 Date: Thu, 5 Apr 2012 17:03:14 -0700 Subject: translate3DObject tool fixes. --- js/helper-classes/3D/hit-record.js | 46 +++++++++++++++++++++++++++++++++++- js/helper-classes/3D/snap-manager.js | 1 + js/helper-classes/3D/view-utils.js | 45 ++++++++++++++++++----------------- js/tools/Translate3DToolBase.js | 7 +++--- js/tools/modifier-tool-base.js | 2 ++ 5 files changed, 75 insertions(+), 26 deletions(-) diff --git a/js/helper-classes/3D/hit-record.js b/js/helper-classes/3D/hit-record.js index 2c60adc6..96f87c24 100755 --- a/js/helper-classes/3D/hit-record.js +++ b/js/helper-classes/3D/hit-record.js @@ -284,6 +284,50 @@ var HitRecord = exports.HitRecord = Object.create(Object.prototype, return str; } - } + }, + + test: + { + value: function() + { + var elt = this.getElement(); + var stage = viewUtils.getStage(); + if (elt === stage) return; + + var localPt = this.calculateElementPreTransformScreenPoint(); + var stageWorldPt = this.calculateStageWorldPoint(); + var globalPt = this.getScreenPoint(); + var err = false; + + var test1 = viewUtils.localToGlobal( localPt, elt ); + var dist = vecUtils.vecDist(3, test1, globalPt); + if (MathUtils.fpSign(dist) != 0) + { + err = true; + console.log( "**** transform error 1 ***** " + dist + ", localPt: " + localPt ); + } + + var stageWorldToGlobal = viewUtils.getStageWorldToGlobalMatrix(); + var test2 = MathUtils.transformAndDivideHomogeneousPoint( stageWorldPt, stageWorldToGlobal ); + dist = vecUtils.vecDist(3, test2, globalPt); + if (MathUtils.fpSign(dist) != 0) + { + err = true; + console.log( "**** transform error 2 ***** " + dist + ", localPt: " + localPt ); + } + + var localToGlobal = viewUtils.getLocalToGlobalMatrix( elt ); + var globalToLocal = glmat4.inverse( localToGlobal, [] ); + var test3 = MathUtils.transformAndDivideHomogeneousPoint( globalPt, globalToLocal ); + dist = vecUtils.vecDist(3, test3, localPt); + if (MathUtils.fpSign( vecUtils.vecDist(3, test3, localPt)) != 0) + { + err = true; + console.log( "**** transform error 3 ***** " + dist + ", localPt: " + localPt ); + } + + if (!err) console.log( "no hitRecord error" ); + } + } }); diff --git a/js/helper-classes/3D/snap-manager.js b/js/helper-classes/3D/snap-manager.js index 9f6b9ed1..8eafa7e9 100755 --- a/js/helper-classes/3D/snap-manager.js +++ b/js/helper-classes/3D/snap-manager.js @@ -300,6 +300,7 @@ var SnapManager = exports.SnapManager = Montage.create(Component, { this.deactivateDragPlane(); this.setLastHit( rtnHit ); + //rtnHit.test(); // DEBUG CODE. REMOVE THIS return rtnHit; } }, diff --git a/js/helper-classes/3D/view-utils.js b/js/helper-classes/3D/view-utils.js index a72b7906..392de0be 100755 --- a/js/helper-classes/3D/view-utils.js +++ b/js/helper-classes/3D/view-utils.js @@ -112,6 +112,13 @@ exports.ViewUtils = Montage.create(Component, { var mat = this.getMatrixFromElement(elt); var plane = [mat[8], mat[9], mat[10], mat[11]]; + var stage = this.application.ninja.currentDocument.documentRoot; + if (elt === stage) + { + xVec = [1,0,0]; + yVec = [0,1,0]; + } + // The translation value is a point on the plane this.pushViewportObj( elt ); var ptOnPlane = this.getCenterOfProjection(); @@ -137,6 +144,12 @@ exports.ViewUtils = Montage.create(Component, { var stageMat = this.getMatrixFromElement(stage); var stagePlane = [stageMat[8], stageMat[9], stageMat[10], stageMat[11]]; + if (elt === stage) + { + xVec = [1,0,0]; + yVec = [0,1,0]; + } + var xDot = Math.abs(vecUtils.vecDot(3, xVec, stagePlane)); var yDot = Math.abs(vecUtils.vecDot(3, yVec, stagePlane)); @@ -788,35 +801,23 @@ exports.ViewUtils = Montage.create(Component, { } }, - getStageWorldToGlobalMatrix: { - value: function() { + getStageWorldToGlobalMatrix: + { + value: function() + { var stage = this.application.ninja.currentDocument.documentRoot; 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; + + // put the point into screen space of the stage - requires + // a translation to the top/left only var cop = this.getCenterOfProjection(); var v2s = Matrix.Translation([cop[0], cop[1], 0]); - //mat = v2s.multiply( projMat ); - mat = glmat4.multiply( v2s, projMat, [] ); - - // 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(); - // var mat2 = this.getLocalToGlobalMatrix( stage.parentElement ); - var mat2 = this.getLocalToGlobalMatrix( this._rootElement ); - //var mat = mat2.multiply( mat ); - glmat4.multiply( mat2, mat, mat ); + // append the localToGlobal matrix of the stage. + var mat = this.getLocalToGlobalMatrix( stage ); + glmat4.multiply( mat, v2s ); return mat; } diff --git a/js/tools/Translate3DToolBase.js b/js/tools/Translate3DToolBase.js index 4799b840..2276178c 100755 --- a/js/tools/Translate3DToolBase.js +++ b/js/tools/Translate3DToolBase.js @@ -71,6 +71,7 @@ exports.Translate3DToolBase = Montage.create(ModifierToolBase, this._delta = delta.slice(0); } + //console.log( "modifyElements delta: " + delta ); var transMat = Matrix.Translation( delta ); if(this._inLocalMode && (this._targets.length === 1) ) @@ -79,7 +80,6 @@ exports.Translate3DToolBase = Montage.create(ModifierToolBase, } else { - console.log( "modifyElements delta: " + delta ); this._translateGlobally(transMat); } } @@ -148,7 +148,7 @@ exports.Translate3DToolBase = Montage.create(ModifierToolBase, _translateGlobally: { value: function (transMat) { //console.log( "_translateGlobally, transMat: " + transMat ); - //console.log( "_translateGlobally, startMat: " + this._startMat + ", transMat: " + transMat ); + //console.log( "_translateGlobally, startMat: " + this._startMat + ", transMat: " + transMat[12] + ", " + transMat[13] + ", " + transMat[14] ); var len = this._targets.length, i = 0, item, @@ -167,7 +167,8 @@ exports.Translate3DToolBase = Montage.create(ModifierToolBase, var shouldUpdateStartMat = true; - if(this._clickedOnStage) + //if (this._clickedOnStage) + if(this._clickedOnStage || ((this._handleMode === 2) && (this._targets.length > 1))) { shouldUpdateStartMat = false; } diff --git a/js/tools/modifier-tool-base.js b/js/tools/modifier-tool-base.js index 2c9b484e..f9fd001c 100755 --- a/js/tools/modifier-tool-base.js +++ b/js/tools/modifier-tool-base.js @@ -405,6 +405,7 @@ exports.ModifierToolBase = Montage.create(DrawingTool, { var index = this._snapIndex; var pt0; var useViewPoint = (this._inLocalMode && (this._targets.length === 1)); + //console.log( "useViewPoint: " + useViewPoint ); if (this._useQuadPt) { pt0 = this.GetQuadrantPoint(useViewPoint); @@ -427,6 +428,7 @@ exports.ModifierToolBase = Montage.create(DrawingTool, { pt1 = MathUtils.transformPoint( pt1, this._startMat ); } + //console.log( "getMousePoints, useViewPoint: " + useViewPoint + ", " + pt0 + " => " + pt1 ); return {pt0:pt0, pt1:pt1}; } else -- cgit v1.2.3 From 4900f2e6e346df18b1b5a2ac89da5019644ac98a Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Mon, 9 Apr 2012 16:47:35 -0700 Subject: adding a history panel Signed-off-by: Valerio Virgillito --- js/data/panels-data.js | 12 +++ js/panels/Panel.reel/Panel.js | 5 +- js/panels/PanelContainer.reel/PanelContainer.html | 11 ++- .../history-item.reel/history-item.css | 0 .../history-item.reel/history-item.html | 29 ++++++ .../history-item.reel/history-item.js | 32 +++++++ js/panels/history-panel/history.reel/history.css | 34 +++++++ js/panels/history-panel/history.reel/history.html | 106 +++++++++++++++++++++ js/panels/history-panel/history.reel/history.js | 26 +++++ 9 files changed, 253 insertions(+), 2 deletions(-) create mode 100644 js/panels/history-panel/history-item.reel/history-item.css create mode 100644 js/panels/history-panel/history-item.reel/history-item.html create mode 100644 js/panels/history-panel/history-item.reel/history-item.js create mode 100644 js/panels/history-panel/history.reel/history.css create mode 100644 js/panels/history-panel/history.reel/history.html create mode 100644 js/panels/history-panel/history.reel/history.js diff --git a/js/data/panels-data.js b/js/data/panels-data.js index 7a2d817a..f613a3be 100644 --- a/js/data/panels-data.js +++ b/js/data/panels-data.js @@ -93,6 +93,18 @@ exports.PanelsData = Montage.create(Montage, { open: true, modulePath: "js/panels/presets/content.reel", moduleName: "content" + }, + { + name: "History", + minHeight: 100, + height: 100, + maxHeight: null, + flexible: true, + collapsed: true, + scrollable: true, + open: true, + modulePath: "js/panels/history-panel/history.reel", + moduleName: "History" } ] } diff --git a/js/panels/Panel.reel/Panel.js b/js/panels/Panel.reel/Panel.js index 33f9b3a7..613bef4b 100755 --- a/js/panels/Panel.reel/Panel.js +++ b/js/panels/Panel.reel/Panel.js @@ -125,7 +125,10 @@ exports.Panel = Montage.create(Component, { require.async(this.modulePath) .then(function(panelContent) { var componentRequire = panelContent[that.moduleName]; - that.panelContent.content = componentRequire.create(); + var componentInstance = componentRequire.create(); + + componentInstance.ownerComponent = that.ownerComponent; + that.panelContent.content = componentInstance; }) .end(); } diff --git a/js/panels/PanelContainer.reel/PanelContainer.html b/js/panels/PanelContainer.reel/PanelContainer.html index 251e86e4..d3673105 100755 --- a/js/panels/PanelContainer.reel/PanelContainer.html +++ b/js/panels/PanelContainer.reel/PanelContainer.html @@ -62,6 +62,13 @@ } }, + "panel_6": { + "prototype": "js/panels/Panel.reel", + "properties": { + "element": {"#": "panel_6"} + } + }, + "owner": { "module": "js/panels/PanelContainer.reel", "name": "PanelContainer", @@ -74,7 +81,8 @@ "panel_2": {"@": "panel_2"}, "panel_3": {"@": "panel_3"}, "panel_4": {"@": "panel_4"}, - "panel_5": {"@": "panel_5"} + "panel_5": {"@": "panel_5"}, + "panel_6": {"@": "panel_6"} }, "listeners": [ { @@ -104,6 +112,7 @@
+
diff --git a/js/panels/history-panel/history-item.reel/history-item.css b/js/panels/history-panel/history-item.reel/history-item.css new file mode 100644 index 00000000..e69de29b diff --git a/js/panels/history-panel/history-item.reel/history-item.html b/js/panels/history-panel/history-item.reel/history-item.html new file mode 100644 index 00000000..2db27846 --- /dev/null +++ b/js/panels/history-panel/history-item.reel/history-item.html @@ -0,0 +1,29 @@ + + + + + + + + + + + + +
  • + + + \ No newline at end of file diff --git a/js/panels/history-panel/history-item.reel/history-item.js b/js/panels/history-panel/history-item.reel/history-item.js new file mode 100644 index 00000000..8a6e7654 --- /dev/null +++ b/js/panels/history-panel/history-item.reel/history-item.js @@ -0,0 +1,32 @@ +/* +This file contains proprietary software owned by Motorola Mobility, Inc.
    +No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
    +(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. +     */ + +var Montage = require("montage/core/core").Montage, + Component = require("montage/ui/component").Component; + +exports.HistoryItem = Montage.create(Component, { + _title: { + value: null + }, + + title: { + get: function() { + return this._title; + }, + set: function(value) { + if(value !== this._title) { + this._title = value; + this.needsDraw = true; + } + } + }, + + draw: { + value: function() { + this.element.innerHTML = this.title; + } + } +}); \ No newline at end of file diff --git a/js/panels/history-panel/history.reel/history.css b/js/panels/history-panel/history.reel/history.css new file mode 100644 index 00000000..44c4c74b --- /dev/null +++ b/js/panels/history-panel/history.reel/history.css @@ -0,0 +1,34 @@ +.history_panel { + height: 100%; + overflow: hidden; +} + +.scroller { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; +} + +.history_panel ul { + padding: 0; + margin: 0; +} + +.history_panel li { + padding: 10px 15px; + list-style: none; +} + +.undo_list li { + background-color: hsl(0, 0%, 94%); + border-top: 1px solid hsl(0, 0%, 100%); + border-bottom: 1px solid hsl(0, 0%, 85%); +} + +.redo_list li { + background-color: hsl(199, 71%, 79%); + border-top: 1px solid hsl(0, 0%, 100%); + border-bottom: 1px solid hsl(0, 0%, 85%); +} \ No newline at end of file diff --git a/js/panels/history-panel/history.reel/history.html b/js/panels/history-panel/history.reel/history.html new file mode 100644 index 00000000..f2e3c6ae --- /dev/null +++ b/js/panels/history-panel/history.reel/history.html @@ -0,0 +1,106 @@ + + + + + + + + + + + + +
    +
    +
      +
    • +
    +
      +
    • +
    +
    +
    + + + \ No newline at end of file diff --git a/js/panels/history-panel/history.reel/history.js b/js/panels/history-panel/history.reel/history.js new file mode 100644 index 00000000..241286fb --- /dev/null +++ b/js/panels/history-panel/history.reel/history.js @@ -0,0 +1,26 @@ +/* +This file contains proprietary software owned by Motorola Mobility, Inc.
    +No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
    +(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. +     */ + +var Montage = require("montage/core/core").Montage, + Component = require("montage/ui/component").Component; + +exports.History = Montage.create(Component, { + historyList: { + value: null + }, + + didCreate: { + value: function() { + } + }, + + templateDidLoad: { + value: function() { + } + } + + +}); \ No newline at end of file -- cgit v1.2.3 From 48d4dd0f0570f4ac3556f228846ed0fd98a674e5 Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Mon, 9 Apr 2012 16:47:56 -0700 Subject: setProperties to the montage undo/redo Signed-off-by: Valerio Virgillito --- js/controllers/elements/element-controller.js | 16 +++++-- js/mediators/element-mediator.js | 62 +++++++-------------------- js/tools/SelectionTool.js | 57 ++++++------------------ 3 files changed, 42 insertions(+), 93 deletions(-) diff --git a/js/controllers/elements/element-controller.js b/js/controllers/elements/element-controller.js index fda3a3c5..adac1420 100755 --- a/js/controllers/elements/element-controller.js +++ b/js/controllers/elements/element-controller.js @@ -47,9 +47,19 @@ exports.ElementController = Montage.create(Component, { }, setProperties: { - value: function(el, props, index) { - for(var p in props) { - this.application.ninja.stylesController.setElementStyle(el, p, props[p][index]); + value: function(element, properties) { + /* Array of properties is not supported yet + if(Array.isArray(properties)) { + + elements.forEach(function(property) { + this.application.ninja.stylesController.setElementStyle(element, p, props[p][index]); + }); + } else { + } + */ + + for(var property in properties) { + this.application.ninja.stylesController.setElementStyle(element, property, properties[property]); } } }, diff --git a/js/mediators/element-mediator.js b/js/mediators/element-mediator.js index a05ca631..738e65fc 100755 --- a/js/mediators/element-mediator.js +++ b/js/mediators/element-mediator.js @@ -272,60 +272,28 @@ exports.ElementMediator = Montage.create(Component, { }, /** - Set a property change command for an element or array of elements + Sets a property object for an element or array of elements. The same properties object gets applied to all the elements @param els: Array of elements. Can contain 1 or more elements - @param props: Property/ies object containing both the value and property + @param properties: Properties object containing both the value and property + @param currentProperties: current properties object for undo/redo. Must be an valid object or null @param eventType: Change/Changing. Will be passed to the dispatched event @param source: String for the source object making the call - @param currentProps *OPTIONAL*: current properties objects array. If not found it will be calculated - @param stageRedraw: *OPTIONAL*: True. If set to false the stage will not redraw the selection/outline */ setProperties: { - value: function(els, props, eventType, source, currentProps, stageRedraw) { - if(eventType === "Changing") { - this._setProperties(els, props, eventType, source); - } else { - var command = Montage.create(Command, { - _els: { value: els }, - _props: { value: props }, - _previous: { value: currentProps }, - _eventType: { value: eventType}, - _source: { value: "undo-redo"}, - description: { value: "Set Properties"}, - receiver: { value: this}, - - execute: { - value: function(senderObject) { - if(senderObject) this._source = senderObject; - this.receiver._setProperties(this._els, this._props, this._eventType, this._source); - this._source = "undo-redo"; - return ""; - } - }, - - unexecute: { - value: function() { - this.receiver._setProperties(this._els, this._previous, this._eventType, this._source); - return ""; - } - } - }); - - NJevent("sendToUndo", command); - command.execute(source); - } - } - }, - - _setProperties: { - value: function(els, props, eventType, source) { - var propsArray; - - for(var i=0, item; item = els[i]; i++) { - item.elementModel.controller["setProperties"](item, props, i); + value: function(elements, properties, currentProperties, eventType, source) { + // Assume elements is an array of elements always + elements.forEach(function(element) { + element.elementModel.controller["setProperties"](element, properties); + }); + + // Add to undo only when a change is requested + if(eventType !== "Changing") { + var undoLabel = "Properties change"; + document.application.undoManager.add(undoLabel, this.setProperties, this, elements, currentProperties, properties, eventType, source); } - NJevent("element" + eventType, {type : "setProperties", source: source, data: {"els": els, "prop": props, "value": props}, redraw: null}); + // Dispatch the element change/changing event. + NJevent("element" + eventType, {type : "setProperties", source: source, data: {"els": elements, "prop": properties, "value": properties}, redraw: null}); } }, diff --git a/js/tools/SelectionTool.js b/js/tools/SelectionTool.js index 94cc6b83..6dec781b 100755 --- a/js/tools/SelectionTool.js +++ b/js/tools/SelectionTool.js @@ -372,46 +372,21 @@ var SelectionTool = exports.SelectionTool = Montage.create(ModifierToolBase, { } } } - if(addToUndoStack) - { - if(!this._use3DMode) - { + + if(addToUndoStack) { + if(!this._use3DMode) { // if we have a delta, that means the transform handles were used and // we should update the width and height too. Otherwise, just update left and top. - if(this._delta) - { - ElementsMediator.setProperties(this.application.ninja.selectedElements, - { "left": newLeft, "top": newTop, "width": newWidth, "height": newHeight }, - "Change", - "selectionTool", - { "left" : previousLeft, "top" : previousTop, "width": previousWidth, "height": previousHeight} - ); - } - else - { - ElementsMediator.setProperties(this.application.ninja.selectedElements, - { "left": newLeft, "top": newTop }, - "Change", - "selectionTool", - { "left" : previousLeft, "top" : previousTop } - ); + if(this._delta) { + ElementsMediator.setProperties(this.application.ninja.selectedElements, {"left": newLeft, "top": newTop, "width": newWidth, "height": newHeight }, + { "left" : previousLeft, "top" : previousTop, "width": previousWidth, "height": previousHeight}, "Change", "selectionTool"); + } else { + ElementsMediator.setProperties(this.application.ninja.selectedElements, {"left": newLeft, "top": newTop }, {"left": previousLeft, "top": previousTop}, "Change", "selectionTool"); } - } - else - { + } else { // TODO - We don't support transform handles in 3d space for now - ElementsMediator.setProperties(this.application.ninja.selectedElements, - { "width": newWidth, "height": newHeight }, - "Change", - "selectionTool", - { "width": previousWidth, "height": previousHeight} - ); - ElementsMediator.set3DProperties(this.application.ninja.selectedElements, - newStyles, - "Change", - "translateTool", - previousStyles - ); + ElementsMediator.setProperties(this.application.ninja.selectedElements, {"width": newWidth, "height": newHeight }, {"width": previousWidth, "height": previousHeight}, "Change", "selectionTool"); + ElementsMediator.set3DProperties(this.application.ninja.selectedElements, newStyles, "Change", "translateTool", previousStyles); } } // Save previous value for undo/redo @@ -471,13 +446,9 @@ var SelectionTool = exports.SelectionTool = Montage.create(ModifierToolBase, { } } - if(newLeft.length) - { - ElementsMediator.setProperties(this.application.ninja.selectedElements, - { "left": newLeft, "top": newTop }, "Changing", "SelectionTool" ); - } - else - { + if(newLeft.length) { + ElementsMediator.setProperties(this.application.ninja.selectedElements, {"left": newLeft, "top": newTop }, null, "Changing", "SelectionTool" ); + } else { NJevent("elementChanging", {type : "Changing", redraw: false}); } } -- cgit v1.2.3 From 45ae62302b175774c1e1af82ff144ecb2fe770d7 Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Mon, 9 Apr 2012 22:58:10 -0700 Subject: setAttribute added to the undo/redo Signed-off-by: Valerio Virgillito --- js/mediators/element-mediator.js | 71 ++++++--------------------------- js/panels/properties.reel/properties.js | 5 ++- 2 files changed, 16 insertions(+), 60 deletions(-) diff --git a/js/mediators/element-mediator.js b/js/mediators/element-mediator.js index 738e65fc..6ab33eff 100755 --- a/js/mediators/element-mediator.js +++ b/js/mediators/element-mediator.js @@ -138,70 +138,25 @@ exports.ElementMediator = Montage.create(Component, { }, /** - Set a property change command for an element or array of elements - @param els: Array of elements. Can contain 1 or more elements - @param p: Property to set - @param value: Value to be set. This is an array of values corresponding to the array of elements - @param eventType: Change/Changing. Will be passed to the dispatched event - @param source: String for the source object making the call - @param currentValue *OPTIONAL*: current value array. If not found the current value is calculated - @param stageRedraw: *OPTIONAL*: True. If set to false the stage will not redraw the selection/outline - */ + Set a property change command for an element or array of elements + @param element: Element + @param attribute: Attribute to set + @param value: Value to be set. + @param currentValue: current value + @param source: String for the source object making the call + */ setAttribute: { - value: function(el, att, value, eventType, source, currentValue) { + value: function(element, attribute, value, currentValue, source) { + element.elementModel.controller["setAttribute"](element, attribute, value); - if(eventType === "Changing") { - this._setAttribute(el, att, value, eventType, source); - } else { - // Calculate currentValue if not found for each element - if(currentValue === null) { - currentValue = el.getAttribute(att); - } - - var command = Montage.create(Command, { - _el: { value: el }, - _att: { value: att }, - _value: { value: value }, - _previous: { value: currentValue }, - _eventType: { value: eventType}, - _source: { value: "undo-redo"}, - description: { value: "Set Attribute"}, - receiver: { value: this}, - - execute: { - value: function(senderObject) { - if(senderObject) this._source = senderObject; - this.receiver._setAttribute(this._el, this._att, this._value, this._eventType, this._source); - this._source = "undo-redo"; - return ""; - } - }, - - unexecute: { - value: function() { - this.receiver._setAttribute(this._el, this._att, this._previous, this._eventType, this._source); - return ""; - } - } - }); - - NJevent("sendToUndo", command); - command.execute(source); - } + // Add to the undo + var undoLabel = "Attribute change"; + document.application.undoManager.add(undoLabel, this.setAttribute, this, element, attribute, currentValue, value, source); + NJevent("attributeChange"); } }, - _setAttribute: { - value: function(el, att, value, eventType, source) { - el.elementModel.controller["setAttribute"](el, att, value); - - NJevent("attribute" + eventType, {type : "setAttribute", source: source, data: {"els": el, "prop": att, "value": value}, redraw: null}); - } - }, - - - /** Set a property change command for an element or array of elements @param els: Array of elements. Can contain 1 or more elements diff --git a/js/panels/properties.reel/properties.js b/js/panels/properties.reel/properties.js index 625e3eb6..d9dca538 100755 --- a/js/panels/properties.reel/properties.js +++ b/js/panels/properties.reel/properties.js @@ -113,13 +113,14 @@ exports.Properties = Montage.create(Component, { } if(this.application.ninja.selectedElements.length) { - ElementsMediator.setAttribute(this.application.ninja.selectedElements[0], "id", this.elementId.value, "Change", "pi"); +// ElementsMediator.setAttribute(this.application.ninja.selectedElements[0], "id", this.elementId.value, "Change", "pi"); + ElementsMediator.setAttribute(this.application.ninja.selectedElements[0], "id", this.elementId.value, this.application.ninja.selectedElements[0].id, "pi"); } else { ElementsMediator.setAttribute(this.application.ninja.currentDocument.documentRoot, "id", this.elementId.value, "Change", "pi", this.application.ninja.currentDocument.documentRoot.elementModel.id); } } else if(event.target.id === "elementClass") { if(this.application.ninja.selectedElements.length) { - ElementsMediator.setAttribute(this.application.ninja.selectedElements[0], "class", this.elementClass.value, "Change", "pi"); + ElementsMediator.setAttribute(this.application.ninja.selectedElements[0], "class", this.elementClass.value, this.application.ninja.selectedElements[0].className, "pi"); } else { ElementsMediator.setAttribute(this.application.ninja.currentDocument.documentRoot, "class", this.elementClass.value, "Change", "pi", this.application.ninja.currentDocument.documentRoot.elementModel.elementClass); } -- cgit v1.2.3 From 6885e66a1f668f34699145f0da231c5d4ecbe666 Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Tue, 10 Apr 2012 11:07:36 -0700 Subject: some code cleanup Signed-off-by: Valerio Virgillito --- js/controllers/elements/element-controller.js | 90 +++++++++------------------ 1 file changed, 29 insertions(+), 61 deletions(-) diff --git a/js/controllers/elements/element-controller.js b/js/controllers/elements/element-controller.js index adac1420..b8411ac0 100755 --- a/js/controllers/elements/element-controller.js +++ b/js/controllers/elements/element-controller.js @@ -75,37 +75,29 @@ exports.ElementController = Montage.create(Component, { // borderSide : "top", "right", "bottom", or "left" getColor: { value: function(el, isFill, borderSide) { - var colorObj, - color, - image; + var colorObj, color, image; // Return cached value if one exists - if(isFill) - { - if(el.elementModel.fill) - { + if(isFill) { + if(el.elementModel.fill) { return el.elementModel.fill; } //TODO: Once logic for color and gradient is established, this needs to be revised color = this.getProperty(el, "background-color"); image = this.getProperty(el, "background-image"); - } - else - { + } else { // Try getting border color from specific side first - if(borderSide) - { + if(borderSide) { color = this.getProperty(el, "border-" + borderSide + "-color"); image = this.getProperty(el, "border-" + borderSide + "-image"); } // If no color was found, look up the shared border color - if(!color && !image) - { - if(el.elementModel.stroke) - { + if(!color && !image) { + if(el.elementModel.stroke) { return el.elementModel.stroke; } + color = this.getProperty(el, "border-color"); image = this.getProperty(el, "border-image"); } @@ -122,17 +114,12 @@ exports.ElementController = Montage.create(Component, { } // Update cache - if(isFill) - { + if(isFill) { el.elementModel.fill = colorObj; - } - else if(!borderSide) - { + } else if(!borderSide) { // TODO - Need to update border style and width also el.elementModel.stroke = colorObj; - } - else - { + } else { // TODO - Should update specific border sides too } @@ -143,10 +130,9 @@ exports.ElementController = Montage.create(Component, { setColor: { value: function(el, color, isFill) { var mode = color.mode; - if(isFill) - { - if(mode) - { + + if(isFill) { + if(mode) { switch (mode) { case 'nocolor': this.setProperty(el, "background-image", "none"); @@ -162,12 +148,10 @@ exports.ElementController = Montage.create(Component, { this.setProperty(el, "background-color", color.color.css); } } + el.elementModel.fill = color; - } - else - { - if(mode) - { + } else { + if(mode) { switch (mode) { case 'nocolor': this.setProperty(el, "border-image", "none"); @@ -177,20 +161,16 @@ exports.ElementController = Montage.create(Component, { case 'gradient': this.setProperty(el, "border-image", color.color.css); this.setProperty(el, "border-color", "none"); - if(color.borderInfo) - { - this.setProperty(el, "border-width", color.borderInfo.borderWidth + - color.borderInfo.borderUnits); + if(color.borderInfo) { + this.setProperty(el, "border-width", color.borderInfo.borderWidth + color.borderInfo.borderUnits); this.setProperty(el, "border-style", color.borderInfo.borderStyle); } break; default: this.setProperty(el, "border-image", "none"); this.setProperty(el, "border-color", color.color.css); - if(color.borderInfo) - { - this.setProperty(el, "border-width", color.borderInfo.borderWidth + - color.borderInfo.borderUnits); + if(color.borderInfo) { + this.setProperty(el, "border-width", color.borderInfo.borderWidth + color.borderInfo.borderUnits); this.setProperty(el, "border-style", color.borderInfo.borderStyle); } } @@ -219,8 +199,7 @@ exports.ElementController = Montage.create(Component, { // Routines to get/set 3D properties get3DProperty: { value: function(el, prop) { - if(el.elementModel && el.elementModel.props3D) - { + if(el.elementModel && el.elementModel.props3D) { return el.elementModel.props3D[prop]; } } @@ -228,16 +207,12 @@ exports.ElementController = Montage.create(Component, { getMatrix: { value: function(el) { - if(el.elementModel && el.elementModel.props3D && el.elementModel.props3D.matrix3d) - { + if(el.elementModel && el.elementModel.props3D && el.elementModel.props3D.matrix3d) { return el.elementModel.props3D.matrix3d.slice(0); - } - else - { + } else { var mat; - if (el) - { + if (el) { mat = this.application.ninja.stylesController.getMatrixFromElement(el, false); if (!mat) { mat = Matrix.I(4); @@ -252,12 +227,9 @@ exports.ElementController = Montage.create(Component, { getPerspectiveDist: { value: function(el) { - if(el.elementModel && el.elementModel.props3D && el.elementModel.props3D.perspectiveDist) - { + if(el.elementModel && el.elementModel.props3D && el.elementModel.props3D.perspectiveDist) { return el.elementModel.props3D.perspectiveDist; - } - else - { + } else { var dist = this.application.ninja.stylesController.getPerspectiveDistFromElement(el, false); if(dist == null) { dist = 1400; @@ -274,16 +246,12 @@ exports.ElementController = Montage.create(Component, { value: function(el, props, index, update3DModel) { var dist = props[index]["dist"], mat = props[index]["mat"]; - this.application.ninja.stylesController.setElementStyle(el, - "-webkit-transform", - "perspective(" + dist + ") " + - "matrix3d(" + MathUtils.scientificToDecimal(mat, 5) + ")"); + this.application.ninja.stylesController.setElementStyle(el, "-webkit-transform", "perspective(" + dist + ") " + "matrix3d(" + MathUtils.scientificToDecimal(mat, 5) + ")"); el.elementModel.props3D.matrix3d = mat; el.elementModel.props3D.perspectiveDist = dist; - if(update3DModel) - { + if(update3DModel) { this._update3DProperties(el, mat, dist); } } -- 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/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]