From c534f70e9af920d252d0d94151c9d6f884283b81 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Tue, 1 May 2012 07:01:44 -0700 Subject: Get working plane grid to draw for new stage web template workflow. Signed-off-by: Nivesh Rajbhandari --- js/controllers/elements/body-controller.js | 40 ++++++++++++++++++++++++++++++ js/helper-classes/3D/draw-utils.js | 26 +++++++++++++------ js/tools/RotateStage3DTool.js | 16 ++++++++++-- 3 files changed, 72 insertions(+), 10 deletions(-) (limited to 'js') diff --git a/js/controllers/elements/body-controller.js b/js/controllers/elements/body-controller.js index 839d0787..14aeae24 100755 --- a/js/controllers/elements/body-controller.js +++ b/js/controllers/elements/body-controller.js @@ -51,5 +51,45 @@ exports.BodyController = Montage.create(ElementController, { return dist; } } + }, + + getMatrix: { + value: function(el) { + if(el.elementModel && el.elementModel.props3D && el.elementModel.props3D.matrix3d) + { + return el.elementModel.props3D.matrix3d.slice(0); + } + else + { + var mat; + + if (el) + { + mat = this.application.ninja.stylesController.getMatrixFromElement(el, true); + if (!mat) { + mat = Matrix.I(4); + } + + var zoom = this.application.ninja.elementMediator.getProperty(el, "zoom"); + if (zoom) + { + zoom = Number(zoom); + if (zoom != 1) + { + var zoomMat = Matrix.create( [ + [ zoom, 0, 0, 0], + [ 0, zoom, 0, 0], + [ 0, 0, zoom, 0], + [ 0, 0, 0, 1] + ] ); + glmat4.multiply( zoomMat, mat, mat ); + } + } + } + + el.elementModel.props3D.matrix3d = mat; + return mat; + } + } } }); diff --git a/js/helper-classes/3D/draw-utils.js b/js/helper-classes/3D/draw-utils.js index 7bd77c3a..f7b02485 100755 --- a/js/helper-classes/3D/draw-utils.js +++ b/js/helper-classes/3D/draw-utils.js @@ -583,17 +583,24 @@ var DrawUtils = exports.DrawUtils = Montage.create(Component, { // get a point that lies on the plane var ptOnPlane = MathUtils.getPointOnPlane(this._workingPlane); + // define the grid parameters + var width, + height, + nLines = 10; + + if(this.application.ninja.documentController.webTemplate) { + width = this.application.ninja.currentDocument.documentRoot.scrollWidth; + height = this.application.ninja.currentDocument.documentRoot.scrollHeight; + } else { + width = this.snapManager.getStageWidth(); + height = this.snapManager.getStageHeight(); + } // get a matrix from working plane space to the world var mat = this.getPlaneToWorldMatrix(zAxis, ptOnPlane); - var tMat = Matrix.Translation( [0.5*this.snapManager.getStageWidth(), 0.5*this.snapManager.getStageHeight(),0] ); + var tMat = Matrix.Translation( [0.5*width, 0.5*height, 0] ); //mat = tMat.multiply(mat); glmat4.multiply( tMat, mat, mat); - // define the grid parameters - var width = this.snapManager.getStageWidth(), - height = this.snapManager.getStageHeight(); - var nLines = 10; - // the positioning of the grid may depend on the view direction. var stage = this.snapManager.getStage(); var viewMat = this.viewUtils.getMatrixFromElement(stage); @@ -662,6 +669,7 @@ var DrawUtils = exports.DrawUtils = Montage.create(Component, { var offset = this.viewUtils.getElementOffset(this._sourceSpaceElt); offset[2] = 0; this.viewUtils.setViewportObj(this._sourceSpaceElt); + var sourceSpaceMat = this.viewUtils.getLocalToGlobalMatrix( this._sourceSpaceElt ); for (var i = 0; i < nLines; i++) { // transform the points from working plane space to world space //var t0 = mat.multiply(p0), @@ -671,8 +679,10 @@ var DrawUtils = exports.DrawUtils = Montage.create(Component, { // transform from world space to global screen space if (this._sourceSpaceElt) { - t0 = this.viewUtils.localToGlobal(t0, this._sourceSpaceElt); - t1 = this.viewUtils.localToGlobal(t1, this._sourceSpaceElt); +// t0 = this.viewUtils.localToGlobal(t0, this._sourceSpaceElt); +// t1 = this.viewUtils.localToGlobal(t1, this._sourceSpaceElt); + t0 = this.viewUtils.localToGlobal2(t0, sourceSpaceMat); + t1 = this.viewUtils.localToGlobal2(t1, sourceSpaceMat); } // create a line from the endpoints diff --git a/js/tools/RotateStage3DTool.js b/js/tools/RotateStage3DTool.js index d1701304..0210289f 100755 --- a/js/tools/RotateStage3DTool.js +++ b/js/tools/RotateStage3DTool.js @@ -96,6 +96,11 @@ exports.RotateStage3DTool = Montage.create(Rotate3DToolBase, { viewUtils.pushViewportObj( stage ); var eltCtr = viewUtils.getCenterOfProjection(); viewUtils.popViewportObj(); + if(this.application.ninja.documentController.webTemplate) + { + eltCtr[0] = stage.scrollWidth/2; + eltCtr[1] = stage.scrollHeight/2; + } var curMat = viewUtils.getMatrixFromElement(stage); var curMatInv = glmat4.inverse(curMat, []); @@ -113,8 +118,15 @@ exports.RotateStage3DTool = Montage.create(Rotate3DToolBase, { this._origin = viewUtils.localToGlobal(eltCtr, stage); - this._setTransformOrigin(false); - + if(this.application.ninja.documentController.webTemplate) + { + this._startOriginArray = []; + this._startOriginArray.push(this._origin.slice()); + } + else + { + this._setTransformOrigin(false); + } this.DrawHandles(); } }, -- cgit v1.2.3 From 84eec0ae4352c9f6e5986529cc70eed726d97a88 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Tue, 1 May 2012 09:29:49 -0700 Subject: webTemplate var gets reset to false, so must check for new stage template differently. Signed-off-by: Nivesh Rajbhandari --- js/helper-classes/3D/draw-utils.js | 3 ++- js/tools/RotateStage3DTool.js | 6 ++++-- 2 files changed, 6 insertions(+), 3 deletions(-) (limited to 'js') diff --git a/js/helper-classes/3D/draw-utils.js b/js/helper-classes/3D/draw-utils.js index f7b02485..81a740e0 100755 --- a/js/helper-classes/3D/draw-utils.js +++ b/js/helper-classes/3D/draw-utils.js @@ -588,7 +588,8 @@ var DrawUtils = exports.DrawUtils = Montage.create(Component, { height, nLines = 10; - if(this.application.ninja.documentController.webTemplate) { +// if(this.application.ninja.documentController.webTemplate) { + if(this.application.ninja.currentDocument.documentRoot.id !== "UserContent") { width = this.application.ninja.currentDocument.documentRoot.scrollWidth; height = this.application.ninja.currentDocument.documentRoot.scrollHeight; } else { diff --git a/js/tools/RotateStage3DTool.js b/js/tools/RotateStage3DTool.js index 0210289f..2a9c63db 100755 --- a/js/tools/RotateStage3DTool.js +++ b/js/tools/RotateStage3DTool.js @@ -96,7 +96,8 @@ exports.RotateStage3DTool = Montage.create(Rotate3DToolBase, { viewUtils.pushViewportObj( stage ); var eltCtr = viewUtils.getCenterOfProjection(); viewUtils.popViewportObj(); - if(this.application.ninja.documentController.webTemplate) +// if(this.application.ninja.documentController.webTemplate) + if(this.application.ninja.currentDocument.documentRoot.id !== "UserContent") { eltCtr[0] = stage.scrollWidth/2; eltCtr[1] = stage.scrollHeight/2; @@ -118,7 +119,8 @@ exports.RotateStage3DTool = Montage.create(Rotate3DToolBase, { this._origin = viewUtils.localToGlobal(eltCtr, stage); - if(this.application.ninja.documentController.webTemplate) +// if(this.application.ninja.documentController.webTemplate) + if(this.application.ninja.currentDocument.documentRoot.id !== "UserContent") { this._startOriginArray = []; this._startOriginArray.push(this._origin.slice()); -- cgit v1.2.3 From d262bb9b0c49b7bcb9fd1b429abcf6d38b39ddf6 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Tue, 1 May 2012 16:40:22 -0700 Subject: Offset side and top working planes by half the stage width/height. Signed-off-by: Nivesh Rajbhandari --- js/helper-classes/3D/snap-manager.js | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) (limited to 'js') diff --git a/js/helper-classes/3D/snap-manager.js b/js/helper-classes/3D/snap-manager.js index 7fc492a5..f4bfc12b 100755 --- a/js/helper-classes/3D/snap-manager.js +++ b/js/helper-classes/3D/snap-manager.js @@ -1617,7 +1617,11 @@ var SnapManager = exports.SnapManager = Montage.create(Component, { if (x > y) { if (x > z) { plane[0] = 1; - plane[3] = this.getStageWidth() / 2.0; + if(this.application.ninja.currentDocument.documentRoot.id !== "UserContent") { + plane[3] = stage.scrollWidth / 2.0; + } else { + plane[3] = this.getStageWidth() / 2.0; + } if (dir[0] > 0) plane[3] = -plane[3]; change = !drawUtils.drawYZ; drawUtils.drawXY = drawUtils.drawXZ = false; @@ -1635,7 +1639,11 @@ var SnapManager = exports.SnapManager = Montage.create(Component, { else { if (y > z) { plane[1] = 1; - plane[3] = this.getStageHeight() / 2.0; + if(this.application.ninja.currentDocument.documentRoot.id !== "UserContent") { + plane[3] = stage.scrollHeight / 2.0; + } else { + plane[3] = this.getStageHeight() / 2.0; + } if (dir[1] > 0) plane[3] = -plane[3]; change = !drawUtils.drawXZ; drawUtils.drawXY = drawUtils.drawYZ = false; -- cgit v1.2.3 From 0f16c5ea0d08a740f553284c436bb3e589fb1357 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Tue, 1 May 2012 16:49:29 -0700 Subject: Draw a red outline around the stage for reference when rotating stage. Signed-off-by: Nivesh Rajbhandari --- js/helper-classes/3D/draw-utils.js | 34 ++++++++++++++++++++++++++++++++-- 1 file changed, 32 insertions(+), 2 deletions(-) (limited to 'js') diff --git a/js/helper-classes/3D/draw-utils.js b/js/helper-classes/3D/draw-utils.js index 81a740e0..88830964 100755 --- a/js/helper-classes/3D/draw-utils.js +++ b/js/helper-classes/3D/draw-utils.js @@ -651,6 +651,21 @@ var DrawUtils = exports.DrawUtils = Montage.create(Component, { this._lineColor = saveColor; this._drawingContext.lineWidth = saveLineWidth; + if(this.application.ninja.currentDocument.documentRoot.id !== "UserContent") { + // draw an outline around the body + var stagePt = MathUtils.getPointOnPlane([0,0,1,0]); + var stageMat = this.getPlaneToWorldMatrix([0,0,1], stagePt); + // glmat4.multiply( tMat, stageMat, stageMat); + pt0 = [0, 0, 0]; + pt1 = [0, height, 0]; + delta = [width, 0, 0]; + this.drawGridLines(pt0, pt1, delta, stageMat, 2); + pt0 = [0, 0, 0]; + pt1 = [width, 0, 0]; + delta = [0, height, 0]; + this.drawGridLines(pt0, pt1, delta, stageMat, 2); + } + // draw the lines this.redrawGridLines(); @@ -752,12 +767,27 @@ var DrawUtils = exports.DrawUtils = Montage.create(Component, { this._drawingContext.lineWidth = 0.25; // draw the lines - var nLines = this._gridLineArray.length; + var line, + nLines = this._gridLineArray.length; + if(this.application.ninja.currentDocument.documentRoot.id !== "UserContent") { + nLines = this._gridLineArray.length-4; + } + for (var i = 0; i < nLines; i++) { - var line = this._gridLineArray[i]; + line = this._gridLineArray[i]; this.drawIntersectedLine(line, this._drawingContext); } + if(this.application.ninja.currentDocument.documentRoot.id !== "UserContent") { + this._lineColor = "red"; + i = nLines; + nLines += 4; + for (; i < nLines; i++) { + line = this._gridLineArray[i]; + this.drawIntersectedLine(line, this._drawingContext); + } + } + this.popState(); } }, -- cgit v1.2.3 From 355656cac2fa1a025ad97791ea095a54cebdff71 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Tue, 1 May 2012 20:13:58 -0700 Subject: Support drawing in side and top view. Also, adding back support for drawing shapes inside canvas when double-clicked into canvas or when moused over canvas. Signed-off-by: Nivesh Rajbhandari --- js/tools/ShapeTool.js | 3 +++ js/tools/drawing-tool-base.js | 63 ++++++++++++++++++++++++------------------- js/tools/drawing-tool.js | 3 ++- 3 files changed, 41 insertions(+), 28 deletions(-) (limited to 'js') diff --git a/js/tools/ShapeTool.js b/js/tools/ShapeTool.js index 8f45891d..d2337000 100755 --- a/js/tools/ShapeTool.js +++ b/js/tools/ShapeTool.js @@ -106,6 +106,9 @@ exports.ShapeTool = Montage.create(DrawingTool, { if(wasSelected) { this.AddCustomFeedback(); this.application.ninja.elementMediator.addDelegate = this; + if(this.application.ninja.currentSelectedContainer.nodeName === "CANVAS") { + this._targetedElement = this.application.ninja.currentSelectedContainer; + } } else { this.RemoveCustomFeedback(); this.application.ninja.elementMediator.addDelegate = null; diff --git a/js/tools/drawing-tool-base.js b/js/tools/drawing-tool-base.js index 0b51aa28..7d97f105 100755 --- a/js/tools/drawing-tool-base.js +++ b/js/tools/drawing-tool-base.js @@ -24,6 +24,9 @@ exports.DrawingToolBase = Montage.create(Montage, { value: null }, + dragPlane: { + value: null + }, /** * Used on the initial MouseDown for Drawing Tools * @@ -33,28 +36,30 @@ exports.DrawingToolBase = Montage.create(Montage, { * 2 - Y value converted to screen point */ getInitialSnapPoint: { - value: function(x,y) { + value: function(x, y, shapeCanvas) { + snapManager.clearDragPlane(); + // update the snap settings snapManager.enableSnapAlign( snapManager.snapAlignEnabledAppLevel() ); snapManager.enableElementSnap( snapManager.elementSnapEnabledAppLevel() ); snapManager.enableGridSnap( snapManager.gridSnapEnabledAppLevel() ); // do the snap - var hitRec = snapManager.snap(x, y, true); - var dragPlane; + this.dragPlane = null; + var hitRec = snapManager.snap(x, y, true); if (hitRec) { - // set up the working plane and convert the hit record to be working plane relative - if (hitRec.getElement() === snapManager.application.ninja.currentSelectedContainer) + if (shapeCanvas) { - dragPlane = viewUtils.getUnprojectedElementPlane( hitRec.getElement() ); - snapManager.setupDragPlaneFromPlane( dragPlane ); + this.dragPlane = viewUtils.getUnprojectedElementPlane( shapeCanvas ); + snapManager.setupDragPlaneFromPlane( this.dragPlane ); } else { - dragPlane = snapManager.setupDragPlanes( hitRec ); + this.dragPlane = snapManager.setupDragPlanes( hitRec, true ); } +// console.log( "drag plane: " + this.dragPlane ); - var wpHitRec = hitRec.convertToWorkingPlane( dragPlane ); + var wpHitRec = hitRec.convertToWorkingPlane( this.dragPlane ); var pt = hitRec.getScreenPoint(); return( [wpHitRec, pt[0], pt[1]] ); @@ -72,28 +77,32 @@ exports.DrawingToolBase = Montage.create(Montage, { snapManager.enableElementSnap( snapManager.elementSnapEnabledAppLevel() ); snapManager.enableGridSnap( snapManager.gridSnapEnabledAppLevel() ); - - // do the first snap var hitRec = snapManager.snap(x, y, snap3d ); if (hitRec) { - if ((hitRec.getType() !== hitRec.SNAP_TYPE_STAGE) && !hitRec.isSomeGridTypeSnap()) { - hitRec = hitRec.convertToWorkingPlane( snapManager.getDragPlane() ); - } - - if(downHitRec !== null) { - // if we are working off-plane, do a snap to the projected locations of the geometry - var thePlane = workingPlane; - if (snapManager.hasDragPlane()) - { - thePlane = snapManager.getDragPlane(); - } - - // Return the up HitRec - return hitRec; - } else { - return null; +// if ((hitRec.getType() !== hitRec.SNAP_TYPE_STAGE) && !hitRec.isSomeGridTypeSnap()) { +// hitRec = hitRec.convertToWorkingPlane( snapManager.getDragPlane() ); +// } +// +// if(downHitRec !== null) { +// // if we are working off-plane, do a snap to the projected locations of the geometry +// var thePlane = workingPlane; +// if (snapManager.hasDragPlane()) +// { +// thePlane = snapManager.getDragPlane(); +// } +// +// // Return the up HitRec +// return hitRec; +// } else { +// return null; +// } + if(downHitRec) { + hitRec = hitRec.convertToWorkingPlane(this.dragPlane); + } else if ((hitRec.getType() !== hitRec.SNAP_TYPE_STAGE) && !hitRec.isSomeGridTypeSnap()) { + hitRec = hitRec.convertToWorkingPlane( snapManager.getDragPlane() ); } } + return hitRec; } }, diff --git a/js/tools/drawing-tool.js b/js/tools/drawing-tool.js index dc5f7996..d906fdf9 100755 --- a/js/tools/drawing-tool.js +++ b/js/tools/drawing-tool.js @@ -72,10 +72,11 @@ exports.DrawingTool = Montage.create(ToolBase, { var snapData, point; this._isDrawing = true; + this.mouseDownHitRec = null; this.mouseUpHitRec = null; point = webkitConvertPointFromPageToNode(this.application.ninja.stage.canvas, new WebKitPoint(event.pageX, event.pageY)); - snapData = DrawingToolBase.getInitialSnapPoint(point.x, point.y); //event.layerX, event.layerY); + snapData = DrawingToolBase.getInitialSnapPoint(point.x, point.y, this._targetedElement); //event.layerX, event.layerY); this.mouseDownHitRec = snapData[0]; this.downPoint.x = snapData[1]; this.downPoint.y = snapData[2]; -- cgit v1.2.3