From f04cc0146d8f7573628678613a99c270116768e4 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Wed, 29 Feb 2012 16:45:40 -0800 Subject: Last-used material (instead of FlatMaterial) is applied to shape when turning on use WebGL checkbox in the PI. Signed-off-by: Nivesh Rajbhandari --- js/tools/LineTool.js | 9 ++++++--- js/tools/OvalTool.js | 20 +++++++++++--------- js/tools/RectTool.js | 19 +++++++++++-------- 3 files changed, 28 insertions(+), 20 deletions(-) (limited to 'js') diff --git a/js/tools/LineTool.js b/js/tools/LineTool.js index 0a7c0534..32572af1 100755 --- a/js/tools/LineTool.js +++ b/js/tools/LineTool.js @@ -206,10 +206,13 @@ exports.LineTool = Montage.create(ShapeTool, { // for default stroke and fill/no materials var strokeMaterial = null; - var strokeM = this.options.strokeMaterial; - if(strokeM) + if(this.options.use3D) { - strokeMaterial = Object.create(MaterialsLibrary.getMaterial(strokeM)); + var strokeM = this.options.strokeMaterial; + if(strokeM) + { + strokeMaterial = Object.create(MaterialsLibrary.getMaterial(strokeM)); + } } var world = this.getGLWorld(canvas, this.options.use3D); diff --git a/js/tools/OvalTool.js b/js/tools/OvalTool.js index 14655312..911059a7 100755 --- a/js/tools/OvalTool.js +++ b/js/tools/OvalTool.js @@ -43,19 +43,21 @@ exports.OvalTool = Montage.create(ShapeTool, { var strokeMaterial = null; var fillMaterial = null; - var strokeM = this.options.strokeMaterial; - if(strokeM) + if(this.options.use3D) { - strokeMaterial = Object.create(MaterialsLibrary.getMaterial(strokeM)); - } + var strokeM = this.options.strokeMaterial; + if(strokeM) + { + strokeMaterial = Object.create(MaterialsLibrary.getMaterial(strokeM)); + } - var fillM = this.options.fillMaterial; - if(fillM) - { - fillMaterial = Object.create(MaterialsLibrary.getMaterial(fillM)); + var fillM = this.options.fillMaterial; + if(fillM) + { + fillMaterial = Object.create(MaterialsLibrary.getMaterial(fillM)); + } } - var world = this.getGLWorld(canvas, this.options.use3D); var xOffset = ((left - canvas.offsetLeft + w/2) - canvas.width/2); diff --git a/js/tools/RectTool.js b/js/tools/RectTool.js index 31ac7faa..5e148de3 100755 --- a/js/tools/RectTool.js +++ b/js/tools/RectTool.js @@ -62,16 +62,19 @@ exports.RectTool = Montage.create(ShapeTool, { var strokeMaterial = null; var fillMaterial = null; - var strokeM = this.options.strokeMaterial; - if(strokeM) + if(this.options.use3D) { - strokeMaterial = Object.create(MaterialsLibrary.getMaterial(strokeM)); - } + var strokeM = this.options.strokeMaterial; + if(strokeM) + { + strokeMaterial = Object.create(MaterialsLibrary.getMaterial(strokeM)); + } - var fillM = this.options.fillMaterial; - if(fillM) - { - fillMaterial = Object.create(MaterialsLibrary.getMaterial(fillM)); + var fillM = this.options.fillMaterial; + if(fillM) + { + fillMaterial = Object.create(MaterialsLibrary.getMaterial(fillM)); + } } var world = this.getGLWorld(canvas, this.options.use3D); -- cgit v1.2.3 From 7980d9bde2b43aa5a494ddf6f1db5c4959a57b91 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Thu, 1 Mar 2012 10:04:15 -0800 Subject: Re-fixing IKNinja-940 - Can't select objects when in side/top view. Signed-off-by: Nivesh Rajbhandari --- js/tools/SelectionTool.js | 3 +++ 1 file changed, 3 insertions(+) (limited to 'js') diff --git a/js/tools/SelectionTool.js b/js/tools/SelectionTool.js index caa9e8d6..e8035255 100755 --- a/js/tools/SelectionTool.js +++ b/js/tools/SelectionTool.js @@ -122,6 +122,7 @@ var SelectionTool = exports.SelectionTool = Montage.create(ModifierToolBase, { if(this._escape) { this._escape = false; this._isSelecting = false; + this._canSnap = true; return; } @@ -153,6 +154,7 @@ var SelectionTool = exports.SelectionTool = Montage.create(ModifierToolBase, { } this.endDraw(event); + this._canSnap = true; return; } @@ -180,6 +182,7 @@ var SelectionTool = exports.SelectionTool = Montage.create(ModifierToolBase, { } this.endDraw(event); + this._canSnap = true; } }, -- cgit v1.2.3 From 500426dea0ca95a6b45be8ea8d132cfdb4d2c940 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Thu, 1 Mar 2012 10:11:39 -0800 Subject: Fixed logic error when resizing with the top-left transform handles. Signed-off-by: Nivesh Rajbhandari --- js/tools/SelectionTool.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'js') diff --git a/js/tools/SelectionTool.js b/js/tools/SelectionTool.js index e8035255..3df9a532 100755 --- a/js/tools/SelectionTool.js +++ b/js/tools/SelectionTool.js @@ -403,7 +403,7 @@ var SelectionTool = exports.SelectionTool = Montage.create(ModifierToolBase, { case 0: // Resize North-West delta = ~~(data.pt1[0] - data.pt0[0]); - deltaW = this._undoArray.map(function(item) { return item._w + delta + "px"}); + deltaW = this._undoArray.map(function(item) { return item._w - delta + "px"}); deltaL = this._undoArray.map(function(item) { return item._x + delta + "px"}); delta = ~~(data.pt1[1] - data.pt0[1]); deltaH = this._undoArray.map(function(item) { return item._h - delta + "px"}); -- cgit v1.2.3 From 2c04935f0ccb1cb7c98371fc10b43155f2d956c4 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Thu, 1 Mar 2012 22:20:06 -0800 Subject: Fix for elements flying off into space when moving elements that overlap. This was happening because our hit record's element and the browser's element from point did not match. Signed-off-by: Nivesh Rajbhandari --- js/helper-classes/3D/snap-manager.js | 32 +++++++++++++++++++++++++++++++- js/tools/modifier-tool-base.js | 7 +++++++ 2 files changed, 38 insertions(+), 1 deletion(-) (limited to 'js') diff --git a/js/helper-classes/3D/snap-manager.js b/js/helper-classes/3D/snap-manager.js index 372be345..596ba56a 100755 --- a/js/helper-classes/3D/snap-manager.js +++ b/js/helper-classes/3D/snap-manager.js @@ -40,6 +40,7 @@ var SnapManager = exports.SnapManager = Montage.create(Component, { // keep a reference to the most recent hitRecord. Used for drawing feedback on the stage _lastHit : { value: null, writable: true }, + _hitRecords : { value: [], writable: true }, // keep a list of objects to avoid snapping to _avoidList : { value: [], writable: true }, @@ -274,6 +275,11 @@ var SnapManager = exports.SnapManager = Montage.create(Component, { } //if (hitRecArray.length == 0) var rtnHit; + + // Save reference to hit records to verify last hit record's element matches browser's elementFromPoint + this._hitRecords.length = 0; + this._hitRecords = hitRecArray; + if (hitRecArray.length > 0) { this.sortHitRecords( hitRecArray ); @@ -2246,6 +2252,30 @@ var SnapManager = exports.SnapManager = Montage.create(Component, { drawUtils.setDrawingSurfaceElement(saveContext); } } - } + }, + + findHitRecordForElement: { + value: function(elt) { + var rtnHit; + + if (!this._hitRecords) return; + var nHits = this._hitRecords.length; + + for (var i=0; i --- js/helper-classes/3D/math-utils.js | 33 +++++ js/tools/SelectionTool.js | 277 +++++++++++++++++++++++++++++-------- 2 files changed, 249 insertions(+), 61 deletions(-) (limited to 'js') diff --git a/js/helper-classes/3D/math-utils.js b/js/helper-classes/3D/math-utils.js index 37044763..de63f880 100755 --- a/js/helper-classes/3D/math-utils.js +++ b/js/helper-classes/3D/math-utils.js @@ -538,6 +538,39 @@ var MathUtilsClass = exports.MathUtilsClass = Object.create(Object.prototype, { } }, + isIdentityMatrix: { + value: function( mat ) + { + if(!mat) + { + return false; + } + else + { + if(mat[0] !== 1) return false; + if(mat[1] !== 0) return false; + if(mat[2] !== 0) return false; + if(mat[3] !== 0) return false; + + if(mat[4] !== 0) return false; + if(mat[5] !== 1) return false; + if(mat[6] !== 0) return false; + if(mat[7] !== 0) return false; + + if(mat[8] !== 0) return false; + if(mat[9] !== 0) return false; + if(mat[10] !== 1) return false; + if(mat[11] !== 0) return false; + + if(mat[12] !== 0) return false; + if(mat[13] !== 0) return false; + if(mat[14] !== 0) return false; + if(mat[15] !== 1) return false; + } + return true; + } + }, + rectsOverlap: { value: function( pt, width, height, elt ) diff --git a/js/tools/SelectionTool.js b/js/tools/SelectionTool.js index 3df9a532..1a6bee55 100755 --- a/js/tools/SelectionTool.js +++ b/js/tools/SelectionTool.js @@ -19,6 +19,7 @@ var SelectionTool = exports.SelectionTool = Montage.create(ModifierToolBase, { _canOperateOnStage: { value: true}, _isSelecting: {value: false, writable:true}, _shiftMove: { value: 10}, + _use3DMode: { value: false }, _showTransformHandles: { value: false, enumerable: true }, @@ -29,6 +30,27 @@ var SelectionTool = exports.SelectionTool = Montage.create(ModifierToolBase, { } }, + _areElementsOnSamePlane : { + value: function () { + if(this._targets && this._targets.length) + { + // TODO - drawUtils's elementPlanes check in drawSelectionBounds doesn't seem to work, + // so temporary workaround to simply check if all elements have identity matrix + // TODO - Eventually, this should instead check if all the selected items are on the view plane + var len = this._targets.length; + for(var i = 0; i < len; i++) + { + var mat = this._targets[i].mat; + if(!MathUtils.isIdentityMatrix(mat)) + { + return false; + } + } + } + return true; + } + }, + startDraw: { value: function(event) { if(!this.application.ninja.selectedElements.length) @@ -44,9 +66,13 @@ var SelectionTool = exports.SelectionTool = Montage.create(ModifierToolBase, { this.isDrawing = true; this.application.ninja.stage.showSelectionBounds = false; + this._use3DMode = false; + if(this._canSnap) { this.initializeSnapping(event); + this._use3DMode = !this._areElementsOnSamePlane(); +// console.log("use3DMode = " + this._use3DMode); } else { @@ -123,6 +149,7 @@ var SelectionTool = exports.SelectionTool = Montage.create(ModifierToolBase, { this._escape = false; this._isSelecting = false; this._canSnap = true; + this._use3DMode = false; return; } @@ -155,6 +182,7 @@ var SelectionTool = exports.SelectionTool = Montage.create(ModifierToolBase, { this.endDraw(event); this._canSnap = true; + this._use3DMode = false; return; } @@ -183,6 +211,7 @@ var SelectionTool = exports.SelectionTool = Montage.create(ModifierToolBase, { this.endDraw(event); this._canSnap = true; + this._use3DMode = false; } }, @@ -214,7 +243,7 @@ var SelectionTool = exports.SelectionTool = Montage.create(ModifierToolBase, { case Keyboard.LEFT: var newLeft = []; var leftArr = this.application.ninja.selectedElements.map(function(item) { - newLeft.push( (parseFloat(ElementsMediator.getProperty(item._element, "left")) - inc) + "px" ); + newLeft.push( (parseInt(ElementsMediator.getProperty(item._element, "left")) - inc) + "px" ); return ElementsMediator.getProperty(item._element, "left"); }); @@ -223,7 +252,7 @@ var SelectionTool = exports.SelectionTool = Montage.create(ModifierToolBase, { case Keyboard.UP: var newTop = []; var topArr = this.application.ninja.selectedElements.map(function(item) { - newTop.push( (parseFloat(ElementsMediator.getProperty(item._element, "top")) - inc) + "px" ); + newTop.push( (parseInt(ElementsMediator.getProperty(item._element, "top")) - inc) + "px" ); return ElementsMediator.getProperty(item._element, "top"); }); @@ -232,7 +261,7 @@ var SelectionTool = exports.SelectionTool = Montage.create(ModifierToolBase, { case Keyboard.RIGHT: var newLeft = []; var leftArr = this.application.ninja.selectedElements.map(function(item) { - newLeft.push( (parseFloat(ElementsMediator.getProperty(item._element, "left")) + inc) + "px" ); + newLeft.push( (parseInt(ElementsMediator.getProperty(item._element, "left")) + inc) + "px" ); return ElementsMediator.getProperty(item._element, "left"); }); @@ -241,7 +270,7 @@ var SelectionTool = exports.SelectionTool = Montage.create(ModifierToolBase, { case Keyboard.DOWN: var newTop = []; var topArr = this.application.ninja.selectedElements.map(function(item) { - newTop.push( (parseFloat(ElementsMediator.getProperty(item._element, "top")) + inc) + "px" ); + newTop.push( (parseInt(ElementsMediator.getProperty(item._element, "top")) + inc) + "px" ); return ElementsMediator.getProperty(item._element, "top"); }); @@ -272,10 +301,12 @@ var SelectionTool = exports.SelectionTool = Montage.create(ModifierToolBase, { newTop = [], newWidth = [], newHeight = [], + newStyles = [], previousLeft = [], previousTop = [], previousWidth = [], - previousHeight = []; + previousHeight = [], + previousStyles = []; var len = this.application.ninja.selectedElements.length; this._targets = []; for(var i = 0; i < len; i++) @@ -288,52 +319,97 @@ var SelectionTool = exports.SelectionTool = Montage.create(ModifierToolBase, { this._targets.push({elt:elt, mat:curMat, matInv:curMatInv}); if(addToUndoStack) { - var previousMat = this._undoArray[i].mat.slice(0); - var prevX = this._undoArray[i]._x; - var prevY = this._undoArray[i]._y; - var prevW = this._undoArray[i]._w; - var prevH = this._undoArray[i]._h; - var _x = parseFloat(ElementsMediator.getProperty(elt, "left")) + curMat[12] - previousMat[12]; - var _y = parseFloat(ElementsMediator.getProperty(elt, "top")) + curMat[13] - previousMat[13]; - var _w = parseFloat(ElementsMediator.getProperty(elt, "width")); - var _h = parseFloat(ElementsMediator.getProperty(elt, "height")); - - previousLeft.push(prevX + "px"); - previousTop.push(prevY + "px"); - previousWidth.push(prevW + "px"); - previousHeight.push(prevH + "px"); - newLeft.push(_x + "px"); - newTop.push(_y + "px"); - newWidth.push(_w + "px"); - newHeight.push(_h + "px"); - - viewUtils.setMatrixForElement(elt, previousMat); - this._targets[i].mat = previousMat; - this._targets[i].matInv = glmat4.inverse(previousMat, []); + if(!this._use3DMode) + { + var previousMat = this._undoArray[i].mat.slice(0); + var prevX = this._undoArray[i]._x; + var prevY = this._undoArray[i]._y; + var prevW = this._undoArray[i]._w; + var prevH = this._undoArray[i]._h; + var _x = parseInt(ElementsMediator.getProperty(elt, "left")) + curMat[12] - previousMat[12]; + var _y = parseInt(ElementsMediator.getProperty(elt, "top")) + curMat[13] - previousMat[13]; + var _w = parseInt(ElementsMediator.getProperty(elt, "width")); + var _h = parseInt(ElementsMediator.getProperty(elt, "height")); + + previousLeft.push(prevX + "px"); + previousTop.push(prevY + "px"); + previousWidth.push(prevW + "px"); + previousHeight.push(prevH + "px"); + newLeft.push(_x + "px"); + newTop.push(_y + "px"); + newWidth.push(_w + "px"); + newHeight.push(_h + "px"); + + viewUtils.setMatrixForElement(elt, previousMat); + + this._targets[i].mat = previousMat; + this._targets[i].matInv = glmat4.inverse(previousMat, []); + } + else + { + var previousMat = this._undoArray[i].mat.slice(0); + var prevW = this._undoArray[i]._w; + var prevH = this._undoArray[i]._h; + var _w = parseInt(ElementsMediator.getProperty(elt, "width")); + var _h = parseInt(ElementsMediator.getProperty(elt, "height")); + previousWidth.push(prevW + "px"); + previousHeight.push(prevH + "px"); + newWidth.push(_w + "px"); + newHeight.push(_h + "px"); + + var previousStyleStr = {dist:this._undoArray[i].dist, + mat:MathUtils.scientificToDecimal(previousMat, 5)}; + var newStyleStr = {dist:viewUtils.getPerspectiveDistFromElement(elt), + mat:MathUtils.scientificToDecimal(curMat, 5)}; + previousStyles.push(previousStyleStr); + newStyles.push(newStyleStr); + + this._targets[i].mat = curMat; + this._targets[i].matInv = curMatInv; + } } } if(addToUndoStack) { - // 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) + if(!this._use3DMode) { - ElementsMediator.setProperties(this.application.ninja.selectedElements, - { "left": newLeft, "top": newTop, "width": newWidth, "height": newHeight }, - "Change", - "selectionTool", - { "left" : previousLeft, "top" : previousTop, "width": previousWidth, "height": previousHeight} - ); + // 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 } + ); + } } else { + // TODO - We don't support transform handles in 3d space for now ElementsMediator.setProperties(this.application.ninja.selectedElements, - { "left": newLeft, "top": newTop }, + { "width": newWidth, "height": newHeight }, "Change", "selectionTool", - { "left" : previousLeft, "top" : previousTop } + { "width": previousWidth, "height": previousHeight} ); + ElementsMediator.set3DProperties(this.application.ninja.selectedElements, + newStyles, + "Change", + "translateTool", + previousStyles + ); } } // Save previous value for undo/redo @@ -341,12 +417,13 @@ var SelectionTool = exports.SelectionTool = Montage.create(ModifierToolBase, { for(i = 0, len = this._targets.length; i < len; i++) { var item = this._targets[i]; - var _x = parseFloat(ElementsMediator.getProperty(item.elt, "left")); - var _y = parseFloat(ElementsMediator.getProperty(item.elt, "top")); - var _w = parseFloat(ElementsMediator.getProperty(item.elt, "width")); - var _h = parseFloat(ElementsMediator.getProperty(item.elt, "height")); + _x = parseInt(ElementsMediator.getProperty(item.elt, "left")); + _y = parseInt(ElementsMediator.getProperty(item.elt, "top")); + _w = parseInt(ElementsMediator.getProperty(item.elt, "width")); + _h = parseInt(ElementsMediator.getProperty(item.elt, "height")); var _mat = viewUtils.getMatrixFromElement(item.elt); - this._undoArray.push({_x:_x, _y:_y, _w:_w, _h:_h, mat:_mat}); + var _dist = viewUtils.getPerspectiveDistFromElement(item.elt); + this._undoArray.push({_x:_x, _y:_y, _w:_w, _h:_h, mat:_mat, dist:_dist}); } } @@ -358,7 +435,9 @@ var SelectionTool = exports.SelectionTool = Montage.create(ModifierToolBase, { i, item, elt, - curMat; + curMat, + newLeft = [], + newTop = []; var matInv = glmat4.inverse(this._startMat, []); var nMat = glmat4.multiply(transMat, this._startMat, [] ); @@ -370,16 +449,35 @@ var SelectionTool = exports.SelectionTool = Montage.create(ModifierToolBase, { { item = this._targets[i]; elt = item.elt; - curMat = item.mat; - -// curMat = curMat.multiply(qMat); - glmat4.multiply(curMat, qMat, curMat); - - viewUtils.setMatrixForElement( elt, curMat, true); + if(this._use3DMode) + { + curMat = item.mat; + glmat4.multiply(curMat, qMat, curMat); + viewUtils.setMatrixForElement( elt, curMat, true); + this._targets[i].mat = curMat; + } + else + { + curMat = item.mat.slice(0); + glmat4.multiply(curMat, qMat, curMat); + var previousMat = this._undoArray[i].mat.slice(0); + var _x = parseInt(ElementsMediator.getProperty(elt, "left")) + curMat[12] - previousMat[12]; + var _y = parseInt(ElementsMediator.getProperty(elt, "top")) + curMat[13] - previousMat[13]; - this._targets[i].mat = curMat; + newLeft.push(_x + "px"); + newTop.push(_y + "px"); + } } - NJevent("elementChanging", {type : "Changing", redraw: false}); + + if(newLeft.length) + { + ElementsMediator.setProperties(this.application.ninja.selectedElements, + { "left": newLeft, "top": newTop }, "Changing", "SelectionTool" ); + } + else + { + NJevent("elementChanging", {type : "Changing", redraw: false}); + } } }, @@ -657,8 +755,13 @@ var SelectionTool = exports.SelectionTool = Montage.create(ModifierToolBase, { this.application.ninja.stage.clearDrawingCanvas(); var item = this._target; - if(!item || !this._showTransformHandles) + if(!item) + { + return; + } + if(!this._showTransformHandles) { + this._drawTopLeft(item); return; } @@ -747,13 +850,14 @@ var SelectionTool = exports.SelectionTool = Montage.create(ModifierToolBase, { var left = x; var top = y; - if(delta) +// if(delta) + if(!this._use3DMode && this.isDrawing) { context.font = "10px sans-serif"; context.textAlign = "right"; - context.fillText("( " + (left - this.application.ninja.stage.userContentLeft) + " , " + - (top - this.application.ninja.stage.userContentTop) + " )", x-10, y-4); + context.fillText("( " + ~~(left - this.application.ninja.stage.userContentLeft) + " , " + + ~~(top - this.application.ninja.stage.userContentTop) + " )", x-10, y-4); } // W @@ -782,10 +886,11 @@ var SelectionTool = exports.SelectionTool = Montage.create(ModifierToolBase, { context.moveTo( x, y ); this._handles[4].draw(x, y); - if(delta) +// if(delta) + if(!this._use3DMode && this.isDrawing) { - context.fillText("H: " + (y - top), x+38, y - 4); - context.fillText("W: " + (x - left), x-5, y + 12); + context.fillText("H: " + ~~(y - top), x+38, y - 4); + context.fillText("W: " + ~~(x - left), x-5, y + 12); } // E @@ -812,9 +917,59 @@ var SelectionTool = exports.SelectionTool = Montage.create(ModifierToolBase, { } }, + _drawTopLeft: { + value: function(item) + { + if(!this.isDrawing || this._use3DMode) + { + return; + } + viewUtils.setViewportObj( item ); + var bounds3D = viewUtils.getElementViewBounds3D( item ); + + var zoomFactor = 1; + var viewPort = this.application.ninja.stage._viewport; + if (viewPort.style && viewPort.style.zoom) + { + zoomFactor = Number(viewPort.style.zoom); + } + var tmpMat = viewUtils.getLocalToGlobalMatrix( item ); + for (var j=0; j<4; j++) + { + var localPt = bounds3D[j]; + var tmpPt = viewUtils.localToGlobal2(localPt, tmpMat); + + if(zoomFactor !== 1) + { + tmpPt = vecUtils.vecScale(3, tmpPt, zoomFactor); + + tmpPt[0] += this.application.ninja.stage._scrollLeft*(zoomFactor - 1); + tmpPt[1] += this.application.ninja.stage._scrollTop*(zoomFactor - 1); + } + bounds3D[j] = tmpPt; + } + + // Draw tool handles + var context = this.application.ninja.stage.drawingContext; + context.beginPath(); + + // NW + var x = bounds3D[0][0]; + var y = bounds3D[0][1]; + context.moveTo(x, y); + + context.font = "10px sans-serif"; + context.textAlign = "right"; + + context.fillText("( " + ~~(x - this.application.ninja.stage.userContentLeft) + " , " + + ~~(y - this.application.ninja.stage.userContentTop) + " )", x-10, y-4); + + context.closePath(); + } + }, + // TODO : Use the new element mediator to get element offsets - _complicatedCollisionDetection: - { + _complicatedCollisionDetection: { value: function(elt, box) { var left, top, width, height; -- cgit v1.2.3 From 5425be91e7125c22955b4459a62412ff574e49a8 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Fri, 2 Mar 2012 11:11:48 -0800 Subject: Timeline: Fix for animation iteration count Add default webkit css properties to allow animations with integer iteration counts. Signed-off-by: Jonathan Duran --- js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'js') diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index 74a7f962..296af8f8 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -530,7 +530,8 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this.animationName = "animation_" + this.animatedElement.classList[0]; this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-name", this.animationName); this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-duration", animationDuration); - this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-iteration-count", "infinite"); + this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-iteration-count", 1); + this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-fill-mode", "both"); var initRule = "@-webkit-keyframes " + this.animationName + " { 0% {top: " + this.animatedElement.offsetTop + "px; left: " + this.animatedElement.offsetLeft + "px;} 100% {top: " + this.animatedElement.offsetTop + "px; left: " + this.animatedElement.offsetLeft + "px;} }"; this.currentKeyframeRule = this.ninjaStylesContoller.addRule(initRule); this.insertTween(tweenEvent.offsetX); -- cgit v1.2.3 From f3207f39ea9d8c1c34246217a23d3a689671903d Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Fri, 2 Mar 2012 11:21:29 -0800 Subject: Don't draw transform handles if the stage is the target element. Signed-off-by: Nivesh Rajbhandari --- js/tools/SelectionTool.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'js') diff --git a/js/tools/SelectionTool.js b/js/tools/SelectionTool.js index 1a6bee55..6d8ff175 100755 --- a/js/tools/SelectionTool.js +++ b/js/tools/SelectionTool.js @@ -755,7 +755,7 @@ var SelectionTool = exports.SelectionTool = Montage.create(ModifierToolBase, { this.application.ninja.stage.clearDrawingCanvas(); var item = this._target; - if(!item) + if(!item || (item === this.application.ninja.currentDocument.documentRoot)) { return; } -- cgit v1.2.3 From aabb48a1c8d34bc968f4c6b0ffee4e31c1d5d286 Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Fri, 2 Mar 2012 11:22:44 -0800 Subject: Presets Panel - Fix single-click activation, and transition cut-off bug. Use double-click as the activation event for transition presets. Also fixed the bug when applying a style preset before the transition preset, which disabled transitions after the first one. --- js/panels/presets/style-presets.reel/style-presets.js | 4 +++- js/panels/presets/transitions-presets.reel/transitions-presets.html | 1 + 2 files changed, 4 insertions(+), 1 deletion(-) (limited to 'js') diff --git a/js/panels/presets/style-presets.reel/style-presets.js b/js/panels/presets/style-presets.reel/style-presets.js index 7871683e..11f41822 100644 --- a/js/panels/presets/style-presets.reel/style-presets.js +++ b/js/panels/presets/style-presets.reel/style-presets.js @@ -47,9 +47,11 @@ exports.StylesLibrary = Montage.create(Component, { selection.forEach(function(el) { el._element.style.webkitTransition = "all 450ms linear"; - el._element.addEventListener("webkitTransitionEnd", function(e) { + el._element.addEventListener("webkitTransitionEnd", function presetTransition(e) { el._element.style.webkitTransition = ''; setStopRuleSelector("*"); + this.removeEventListener("webkitTransitionEnd", presetTransition, true); + }, true); setStopRuleSelector("transitionStopRule"); el._element.classList.add(selectorBase); diff --git a/js/panels/presets/transitions-presets.reel/transitions-presets.html b/js/panels/presets/transitions-presets.reel/transitions-presets.html index c22ed351..5dc28edf 100644 --- a/js/panels/presets/transitions-presets.reel/transitions-presets.html +++ b/js/panels/presets/transitions-presets.reel/transitions-presets.html @@ -40,6 +40,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot "element" : {"#": "libraryContainer"}, "branchComponent" : {"@": "branch" }, "contentController": {"@": "presetsController"}, + "activationEvent" : "dblclick", "showRoot": false } }, -- cgit v1.2.3 From abc04f3d50311ed1c21067344bc7e448686f8c5c Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Fri, 2 Mar 2012 11:26:25 -0800 Subject: Timeline Fix timing function Signed-off-by: Jonathan Duran --- js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | 1 + 1 file changed, 1 insertion(+) (limited to 'js') diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index 296af8f8..9894e6f9 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -532,6 +532,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-duration", animationDuration); this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-iteration-count", 1); this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-fill-mode", "both"); + this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-transition-timing-function", "linear"); var initRule = "@-webkit-keyframes " + this.animationName + " { 0% {top: " + this.animatedElement.offsetTop + "px; left: " + this.animatedElement.offsetLeft + "px;} 100% {top: " + this.animatedElement.offsetTop + "px; left: " + this.animatedElement.offsetLeft + "px;} }"; this.currentKeyframeRule = this.ninjaStylesContoller.addRule(initRule); this.insertTween(tweenEvent.offsetX); -- cgit v1.2.3 From cc772ef3333ed419d269a2bda7aea5b0150a7bd9 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Fri, 2 Mar 2012 11:34:58 -0800 Subject: Fixing flying off into space bug for translate tool too. Signed-off-by: Nivesh Rajbhandari --- js/tools/TranslateObject3DTool.js | 7 +++++++ 1 file changed, 7 insertions(+) (limited to 'js') diff --git a/js/tools/TranslateObject3DTool.js b/js/tools/TranslateObject3DTool.js index bbbbc871..5157e39c 100755 --- a/js/tools/TranslateObject3DTool.js +++ b/js/tools/TranslateObject3DTool.js @@ -65,6 +65,13 @@ exports.TranslateObject3DTool = Object.create(Translate3DToolBase, { // a snap on the mouse down var hitRec = snapManager.snap(point.x, point.y, do3DSnap); + // TODO - Check that hitRec's element matches element that browser says we clicked on + var elt = this.application.ninja.stage.GetElement(event); + if(elt !== hitRec.getElement()) + { + hitRec = snapManager.findHitRecordForElement(elt); + } + // we don't want to snap to selected objects during the drag var len = this._targets.length; for(var i=0; i --- js/data/panels-data.js | 25 --- js/ninja.reel/ninja.html | 2 +- .../ComponentsPanelBase.js | 2 +- js/panels/Panel.reel/Panel.js | 101 ++++++----- js/panels/PanelContainer.reel/PanelContainer.html | 110 ++++++++++++ js/panels/PanelContainer.reel/PanelContainer.js | 193 +++++++++++++++++++++ .../PanelContainer.reel/PanelContainer.html | 146 ---------------- .../PanelContainer.reel/PanelContainer.js | 180 ------------------- 8 files changed, 366 insertions(+), 393 deletions(-) create mode 100755 js/panels/PanelContainer.reel/PanelContainer.html create mode 100755 js/panels/PanelContainer.reel/PanelContainer.js delete mode 100755 js/panels/PanelContainer/PanelContainer.reel/PanelContainer.html delete mode 100755 js/panels/PanelContainer/PanelContainer.reel/PanelContainer.js (limited to 'js') diff --git a/js/data/panels-data.js b/js/data/panels-data.js index aa5057a2..2422f5e7 100644 --- a/js/data/panels-data.js +++ b/js/data/panels-data.js @@ -19,7 +19,6 @@ exports.PanelsData = Montage.create(Montage, { scrollable: false, collapsed: false, open: true, - contentComponent: null, modulePath: "js/panels/Color/colorpanelbase.reel", moduleName: "ColorPanelBase" }, @@ -32,7 +31,6 @@ exports.PanelsData = Montage.create(Montage, { scrollable: true, collapsed: false, open: true, - contentComponent: null, modulePath: "js/panels/properties.reel", moduleName: "Properties" }, @@ -45,7 +43,6 @@ exports.PanelsData = Montage.create(Montage, { collapsed: true, scrollable: true, open: true, - contentComponent: null, modulePath: "js/panels/Materials/materials-library-panel.reel", moduleName: "MaterialsLibraryPanel" }, @@ -58,7 +55,6 @@ exports.PanelsData = Montage.create(Montage, { scrollable: true, collapsed: true, open: true, - contentComponent: null, modulePath: "js/panels/Components/ComponentsPanelBase.reel", moduleName: "ComponentsPanelBase" }, @@ -71,7 +67,6 @@ exports.PanelsData = Montage.create(Montage, { // scrollable: true, // collapsed: false, // open: true, -// content: null, // modulePath: "js/panels/Project/projectpanelbase.reel", // moduleName: "ProjectPanelBase" // }, @@ -84,7 +79,6 @@ exports.PanelsData = Montage.create(Montage, { scrollable: true, collapsed: true, open: true, - contentComponent: null, modulePath: "js/panels/CSSPanel/CSSPanelBase.reel", moduleName: "CSSPanelBase" }, @@ -97,7 +91,6 @@ exports.PanelsData = Montage.create(Montage, { collapsed: true, scrollable: true, open: true, - contentComponent: null, modulePath: "js/panels/presets/content.reel", moduleName: "content" } @@ -118,24 +111,6 @@ exports.PanelsData = Montage.create(Montage, { this._panelOrder = val; } } - - - panels: { - get: function() { - var filtered = this._panels.filter(function(item) { - return item.open; - }); - - filtered.sort(function(a,b) { - a.name - }); - - return filtered; - }, - set : function() { - - } - } */ }); \ No newline at end of file diff --git a/js/ninja.reel/ninja.html b/js/ninja.reel/ninja.html index 112f844e..430b8aa0 100755 --- a/js/ninja.reel/ninja.html +++ b/js/ninja.reel/ninja.html @@ -167,7 +167,7 @@ }, "panelContainer": { - "module": "js/panels/PanelContainer/PanelContainer.reel", + "module": "js/panels/PanelContainer.reel", "name": "PanelContainer", "properties": { "element": {"#": "rightPanelContent"}, diff --git a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js index b4eec771..b6bee37d 100755 --- a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js +++ b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js @@ -118,7 +118,7 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component didCreate: { value: function() { // Setup the drop delegate - this.application.ninja.dragDropMediator.dropDelegate = this; +// this.application.ninja.dragDropMediator.dropDelegate = this; // Loop through the component and load the JSON data for them this._loadComponents(); } diff --git a/js/panels/Panel.reel/Panel.js b/js/panels/Panel.reel/Panel.js index e0bf3f18..be03d019 100755 --- a/js/panels/Panel.reel/Panel.js +++ b/js/panels/Panel.reel/Panel.js @@ -9,31 +9,52 @@ var Component = require("montage/ui/component").Component; exports.Panel = Montage.create(Component, { - name: { value: "Panel" }, - collapsedHeight: {value: 26}, - _collapsed: {value: false}, - _height: { value: 200 }, - minHeight: {value: 200 }, - maxHeight: { value: null}, - flexible: {value: true}, - _locked: { value: false}, - isResizing: {value: false }, - resizer: {value: null }, - modulePath: {value: null}, - moduleName: {value: null}, - _contentComponent: {value: null}, - - contentComponent: { - get: function() { - return this._contentComponent; - }, - set: function(val) { - if (val !== null && val !== this._contentComponent) { - this.panelContent.content = val; - this.panelContent.needsDraw = true; - this._contentComponent = val; - } - } + name: { + value: "Panel" + }, + + _collapsed: { + value: false + }, + + _height: { + value: 200 + }, + + minHeight: { + value: 200 + }, + + maxHeight: { + value: null + }, + + flexible: { + value: true + }, + + _locked: { + value: false + }, + + isResizing: { + value: false + }, + + _resizedHeight: { + value: 0 + }, + + resizer: { + value: null + }, + + modulePath: { + value: null + }, + + moduleName: { + value: null }, collapsed: { @@ -63,10 +84,6 @@ exports.Panel = Montage.create(Component, { } }, - _resizedHeight: { - value: 0 - }, - locked: { get: function() { return this._locked; @@ -94,17 +111,21 @@ exports.Panel = Montage.create(Component, { prepareForDraw: { value: function() { - //TODO: This line should not be here this line hits each time a panel is loaded. Will Need to move to instance call; - this.application.ninja.colorController.colorView = this.application.ninja.colorController.colorPanelBase.create(); - var myContent; - var that = this; - - myContent = require.async(this.modulePath) - .then(function(panelContent) { - var componentRequire = panelContent[that.moduleName]; - that.contentComponent = componentRequire.create(); - }) - .end(); + if(this.name === "Color") { + this.application.ninja.colorController.colorView = this.application.ninja.colorController.colorPanelBase.create(); + } + + if(this.modulePath && this.moduleName) { + console.log("load content"); + // Load the slot content + var that = this; + require.async(this.modulePath) + .then(function(panelContent) { + var componentRequire = panelContent[that.moduleName]; + that.panelContent.content = componentRequire.create(); + }) + .end(); + } } }, diff --git a/js/panels/PanelContainer.reel/PanelContainer.html b/js/panels/PanelContainer.reel/PanelContainer.html new file mode 100755 index 00000000..251e86e4 --- /dev/null +++ b/js/panels/PanelContainer.reel/PanelContainer.html @@ -0,0 +1,110 @@ + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+ + \ No newline at end of file diff --git a/js/panels/PanelContainer.reel/PanelContainer.js b/js/panels/PanelContainer.reel/PanelContainer.js new file mode 100755 index 00000000..51bd2df9 --- /dev/null +++ b/js/panels/PanelContainer.reel/PanelContainer.js @@ -0,0 +1,193 @@ +/* +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. + */ + +/* +Panel Container - A container for other panels +*/ +var Montage = require("montage/core/core").Montage, + Component = require("montage/ui/component").Component; + +exports.PanelContainer = Montage.create(Component, { + + panelData: { + value: null + }, + + // This will hold the current loaded panels. + panels: { + value: [] + }, + + currentPanelState: { + value: {} + }, + + templateDidLoad: { + value: function() { + + var pLen, storedData; + + // Loop through the panels to add to the repetition and get the saved state + pLen = this.panelData.panels.length; + + // Get the saved panel state + storedData = this.application.localStorage.getItem("panels"); + + for(var i = 0; i < pLen; i++) { + + var p = this.panelData.panels[i]; + + this['panel_'+i].name = p.name; + this['panel_'+i].height = p.height; + this['panel_'+i].minHeight= p.minHeight; + this['panel_'+i].maxHeight = p.maxHeight; + this['panel_'+i].flexible = p.flexible; + this['panel_'+i].modulePath = p.modulePath; + this['panel_'+i].moduleName = p.moduleName; + + this.currentPanelState[p.name] = {}; + this.currentPanelState.version = "1.0"; + + if(storedData && storedData[p.name]) { + this['panel_'+i].collapsed = storedData[p.name].collapsed; + } + + this.currentPanelState[p.name].collapsed = this['panel_'+i].collapsed; + + // Check if current panel is open when feature is enabled + this.panels.push(p); + } + + this.application.localStorage.setItem("panels", this.currentPanelState); + + + } + }, + + prepareForDraw: { + value: function() { + window.addEventListener("resize", this, false); + } + }, + + handlePanelResizing: { + value: function(e) { + this._setPanelsSizes(e.target); + } + }, + + handleResize: { + value: function(e) { + this._setPanelsSizes(null); + } + }, + + handleDropped: { + value: function(e) { + var draggedIndex, droppedIndex = 0; + for(var i = 0; i< this.repeater.childComponents.length; i++ ) { + if (this.repeater.childComponents[i] === e._event.draggedComponent) { + draggedIndex = i; + } + + if (this.repeater.childComponents[i] === e._event.droppedComponent) { + droppedIndex = i; + } + } + + var panelRemoved = this.panelController.content.splice(draggedIndex,1); + this.panelController.content.splice(droppedIndex,0, panelRemoved[0]); + //console.log(draggedIndex, droppedIndex); + this._setPanelsSizes(null); + } + }, + + _setPanelsSizes: { + value: function(panelActivated) { + var len = this.panels.length, setLocked = true; + + for(var i = 0; i < len; i++) { + if(this['panel_'+i] === panelActivated || panelActivated === null) { + setLocked = false; + } + + this['panel_'+i].locked = setLocked; + this['panel_'+i].needsDraw = true; + } + } + }, + + _redrawPanels: { + value: function(panelActivated, unlockPanels) { + var maxHeight = this.element.offsetHeight, setLocked = true; + var len = this.panels.length; + + if(unlockPanels === true) { + setLocked = false; + } + + var childrensMinHeights = ((len - 1) * 26) + panelActivated.minHeight; + + for(var i = 0; i < len; i++) { + var obj = this['panel_'+i]; + + if(obj === panelActivated) { + setLocked = false; + } else if(obj.collapsed) { + //Collapsed Ignore the rest of the code + } else { + if (setLocked) { + if((maxHeight - childrensMinHeights) - obj.height > 0 ) { + childrensMinHeights += obj.height - 26; + } else { + this.currentPanelState[obj.name].collapsed = obj.collapsed = true; + this.application.localStorage.setItem("panels", this.currentPanelState); + } + } else { + if ((maxHeight - childrensMinHeights) - obj.minHeight > 0 ) { + childrensMinHeights += obj.minHeight - 26; + } else { + this.currentPanelState[obj.name].collapsed = obj.collapsed = true; + this.application.localStorage.setItem("panels", this.currentPanelState); + } + } + } + obj.locked = setLocked; + } + } + }, + + handleAction: { + value: function(e) { + var unlockPanels = true; + var afterPanel = false; + var panelName = e.target.parentComponent.name; + switch(e.target.identifier) { + case "btnCollapse": + this.currentPanelState[e.target.parentComponent.name].collapsed = e.target.parentComponent.collapsed; + this.application.localStorage.setItem("panels", this.currentPanelState); + this._setPanelsSizes(e.target.parentComponent); + this._redrawPanels(e.target.parentComponent, unlockPanels); + break; + case "btnClose": + this.panelController.content.forEach(function(obj) { + if(afterPanel) { + if(obj.flexible) { + unlockPanels = false; + } + } + if (obj.name === panelName) { + afterPanel = true; + this.panelController.removeObjects(obj); + } + }); + this._redrawPanels(e.target.parentComponent, unlockPanels); + break; + } + } + } + +}); \ No newline at end of file diff --git a/js/panels/PanelContainer/PanelContainer.reel/PanelContainer.html b/js/panels/PanelContainer/PanelContainer.reel/PanelContainer.html deleted file mode 100755 index 76f6b9c4..00000000 --- a/js/panels/PanelContainer/PanelContainer.reel/PanelContainer.html +++ /dev/null @@ -1,146 +0,0 @@ - - - - - -