From cf3b17036985243ecbcafdf55189530c797c78a7 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Thu, 21 Jun 2012 15:33:18 -0700 Subject: Draw stage left and top references lines. Signed-off-by: Nivesh Rajbhandari --- js/helper-classes/3D/draw-utils.js | 65 ++++++++++++++++++-------------------- 1 file changed, 31 insertions(+), 34 deletions(-) (limited to 'js/helper-classes/3D/draw-utils.js') diff --git a/js/helper-classes/3D/draw-utils.js b/js/helper-classes/3D/draw-utils.js index 8ddd0d52..c31424eb 100755 --- a/js/helper-classes/3D/draw-utils.js +++ b/js/helper-classes/3D/draw-utils.js @@ -630,6 +630,7 @@ var DrawUtils = exports.DrawUtils = Montage.create(Component, { value: function () { this.application.ninja.stage.clearGridCanvas(); + this.drawStageOutline(); if (!this.isDrawingGrid()) return; var saveContext = this.getDrawingSurfaceElement(); @@ -701,21 +702,6 @@ var DrawUtils = exports.DrawUtils = Montage.create(Component, { this._lineColor = saveColor; this._drawingContext.lineWidth = saveLineWidth; - if(this.application.ninja.currentDocument.model.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(); @@ -738,15 +724,11 @@ var DrawUtils = exports.DrawUtils = Montage.create(Component, { 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), - // t1 = mat.multiply(p1); var t0 = glmat4.multiplyVec3( mat, p0, [] ), t1 = glmat4.multiplyVec3( mat, p1, [] ); // 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.localToGlobal2(t0, sourceSpaceMat); t1 = this.viewUtils.localToGlobal2(t1, sourceSpaceMat); } @@ -764,9 +746,7 @@ var DrawUtils = exports.DrawUtils = Montage.create(Component, { line.setVisibility(vis); // increment the points to the next position -// p0 = p0.add(d); p0[3] = 1.0; p0 = vecUtils.vecAdd(4, p0, d); p0[3] = 1.0; -// p1 = p1.add(d); p1[3] = 1.0; p1 = vecUtils.vecAdd(4, p1, d); p1[3] = 1.0; } } @@ -819,25 +799,12 @@ var DrawUtils = exports.DrawUtils = Montage.create(Component, { // draw the lines var line, nLines = this._gridLineArray.length; - if(this.application.ninja.currentDocument.model.documentRoot.id !== "UserContent") { - nLines = this._gridLineArray.length-4; - } for (var i = 0; i < nLines; i++) { line = this._gridLineArray[i]; this.drawIntersectedLine(line, this._drawingContext); } - if(this.application.ninja.currentDocument.model.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(); } }, @@ -1213,6 +1180,36 @@ var DrawUtils = exports.DrawUtils = Montage.create(Component, { } }, + drawStageOutline : { + value: function() { + var context = this.application.ninja.stage.gridContext; + var stage = this.application.ninja.stage; + var stageRoot = this.application.ninja.currentDocument.model.documentRoot; + var bounds3D = this.viewUtils.getElementBoundsInGlobal(stageRoot); + + var l = MathUtils.segSegIntersection2D(bounds3D[0], bounds3D[3], [0, 0, 0], [0, stage.canvas.height, 0], 0.1); + var r = MathUtils.segSegIntersection2D(bounds3D[0], bounds3D[3], [stage.canvas.width, 0, 0], [stage.canvas.width, stage.canvas.height, 0], 0.1); + + var t = MathUtils.segSegIntersection2D(bounds3D[0], bounds3D[1], [0, 0, 0], [stage.canvas.width, 0, 0], 0.1); + var b = MathUtils.segSegIntersection2D(bounds3D[0], bounds3D[1], [0, stage.canvas.height, 0], [stage.canvas.width, stage.canvas.height, 0], 0.1); + context.save(); + context.strokeStyle = "#333"; + context.lineWidth = 0.5; + + context.beginPath(); + + context.moveTo(l[0], l[1]); + context.lineTo(r[0], r[1]); + + context.moveTo(t[0], t[1]); + context.lineTo(b[0], b[1]); + + context.closePath(); + context.stroke(); + context.restore(); + } + }, + draw3DCompass : { value: function() { // set the element to be the viewport object - temporarily -- cgit v1.2.3 From 99d50a7dc1403d1d918a8e4a6f7876c559d5e3a9 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Thu, 21 Jun 2012 17:34:37 -0700 Subject: Reclaim negative padding when moving items back into positive direction. Note that we only do this on elementChange and not elementChanging since it is a potentially slow routine. Signed-off-by: Nivesh Rajbhandari --- js/helper-classes/3D/draw-utils.js | 42 +++++++++++++++++++++++++++++--------- 1 file changed, 32 insertions(+), 10 deletions(-) (limited to 'js/helper-classes/3D/draw-utils.js') diff --git a/js/helper-classes/3D/draw-utils.js b/js/helper-classes/3D/draw-utils.js index 8ddd0d52..42b759b5 100755 --- a/js/helper-classes/3D/draw-utils.js +++ b/js/helper-classes/3D/draw-utils.js @@ -73,6 +73,7 @@ var DrawUtils = exports.DrawUtils = Montage.create(Component, { // Properties that require element planes to be updated _updatePlaneProps : {value: ["matrix", "left", "top", "width", "height"], writable: false }, + _recalculateScrollOffsets : { value: false }, /////////////////////////////////////////////////////////////////////// // Property accessors @@ -117,7 +118,7 @@ var DrawUtils = exports.DrawUtils = Montage.create(Component, { }, initializeFromDocument:{ - value:function(adjustScrollOffsets){ + value:function(adjustScrollOffsets, useStageValues){ var i, documentRootChildren = this.application.ninja.currentDocument.model.views.design.getLiveNodeList(true), stage = this.application.ninja.stage, @@ -141,6 +142,11 @@ var DrawUtils = exports.DrawUtils = Montage.create(Component, { t, plane, elt; + if(useStageValues) { + initL = stage.userPaddingLeft; + initT = stage.userPaddingTop; + this._recalculateScrollOffsets = false; + } for(i=0; i minLeft)) { + this._recalculateScrollOffsets = true; } + if(t < minTop) { minTop = t; + stage.minTopElement = elt; + } else if((elt === stage.minTopElement) && (t > minTop)) { + this._recalculateScrollOffsets = true; } } } } if(adjustStagePadding) { - if(minLeft !== stage.userPaddingLeft) { - stage.userPaddingLeft = minLeft; - changed = true; - } - if(minTop !== stage.userPaddingTop) { - stage.userPaddingTop = minTop; + if(this._recalculateScrollOffsets && !isChanging) { + this.initializeFromDocument(true, true); changed = true; + } else { + if(minLeft !== stage.userPaddingLeft) { + stage.userPaddingLeft = minLeft; + changed = true; + } + if(minTop !== stage.userPaddingTop) { + stage.userPaddingTop = minTop; + changed = true; + } } } -- cgit v1.2.3 From 330a954e92dfc95fae6ae5cf10dd5998f346b304 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Fri, 22 Jun 2012 10:59:17 -0700 Subject: Have to guard against cases when stage lines are parallel to the canvas and the line intersection routine returns null. Signed-off-by: Nivesh Rajbhandari --- js/helper-classes/3D/draw-utils.js | 5 +++++ 1 file changed, 5 insertions(+) (limited to 'js/helper-classes/3D/draw-utils.js') diff --git a/js/helper-classes/3D/draw-utils.js b/js/helper-classes/3D/draw-utils.js index c31424eb..168d550d 100755 --- a/js/helper-classes/3D/draw-utils.js +++ b/js/helper-classes/3D/draw-utils.js @@ -1188,10 +1188,15 @@ var DrawUtils = exports.DrawUtils = Montage.create(Component, { var bounds3D = this.viewUtils.getElementBoundsInGlobal(stageRoot); var l = MathUtils.segSegIntersection2D(bounds3D[0], bounds3D[3], [0, 0, 0], [0, stage.canvas.height, 0], 0.1); + if(!l) return; var r = MathUtils.segSegIntersection2D(bounds3D[0], bounds3D[3], [stage.canvas.width, 0, 0], [stage.canvas.width, stage.canvas.height, 0], 0.1); + if(!r) return; var t = MathUtils.segSegIntersection2D(bounds3D[0], bounds3D[1], [0, 0, 0], [stage.canvas.width, 0, 0], 0.1); + if(!t) return; var b = MathUtils.segSegIntersection2D(bounds3D[0], bounds3D[1], [0, stage.canvas.height, 0], [stage.canvas.width, stage.canvas.height, 0], 0.1); + if(!b) return; + context.save(); context.strokeStyle = "#333"; context.lineWidth = 0.5; -- cgit v1.2.3 From cd7ba9648312a3f55fae9c33285be1d9540e13f9 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Fri, 22 Jun 2012 11:15:46 -0700 Subject: Display "(0, 0)" where the origin is. Signed-off-by: Nivesh Rajbhandari --- js/helper-classes/3D/draw-utils.js | 2 ++ 1 file changed, 2 insertions(+) (limited to 'js/helper-classes/3D/draw-utils.js') diff --git a/js/helper-classes/3D/draw-utils.js b/js/helper-classes/3D/draw-utils.js index 168d550d..bd47ffc3 100755 --- a/js/helper-classes/3D/draw-utils.js +++ b/js/helper-classes/3D/draw-utils.js @@ -1211,6 +1211,8 @@ var DrawUtils = exports.DrawUtils = Montage.create(Component, { context.closePath(); context.stroke(); + + context.fillText("(0, 0)", bounds3D[0][0] + 4, bounds3D[0][1] - 6); context.restore(); } }, -- cgit v1.2.3 From 11ae8b91c30322074adb3cae753193d0bae3c995 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Fri, 22 Jun 2012 17:02:55 -0700 Subject: Make stage transparent when rotating/zooming templates and draw an outline around the user's root instead. Also, fixed the background color setting on banner and animation templates' "body." Stage outline draws using drawGridLines code so it can show intersection with element planes. Signed-off-by: Nivesh Rajbhandari --- js/helper-classes/3D/draw-utils.js | 32 +++++++++++++++++++++++++++++++- 1 file changed, 31 insertions(+), 1 deletion(-) (limited to 'js/helper-classes/3D/draw-utils.js') diff --git a/js/helper-classes/3D/draw-utils.js b/js/helper-classes/3D/draw-utils.js index bd47ffc3..87151964 100755 --- a/js/helper-classes/3D/draw-utils.js +++ b/js/helper-classes/3D/draw-utils.js @@ -1185,8 +1185,38 @@ var DrawUtils = exports.DrawUtils = Montage.create(Component, { var context = this.application.ninja.stage.gridContext; var stage = this.application.ninja.stage; var stageRoot = this.application.ninja.currentDocument.model.documentRoot; - var bounds3D = this.viewUtils.getElementBoundsInGlobal(stageRoot); + // draw an outline around the template body if stage has any transforms + if(stage.currentDocument.model.views.design._template && !MathUtils.isIdentityMatrix(this.viewUtils.getMatrixFromElement(stageRoot))) { + var saveContext = this.getDrawingSurfaceElement(); + this.setDrawingSurfaceElement(this.application.ninja.stage.gridCanvas); + + var stagePt = MathUtils.getPointOnPlane([0,0,1,0]); + var stageMat = this.getPlaneToWorldMatrix([0,0,1], stagePt); + var width = this.snapManager.getStageWidth(), + height = this.snapManager.getStageHeight(), + pt0 = [0, 0, 0], + pt1 = [0, height, 0], + delta = [width, 0, 0]; + + this._gridLineArray.length = 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); + + this._lineColor = "red"; + for (var i = 0; i < 4; i++) { + this.drawIntersectedLine(this._gridLineArray[i], this._drawingContext); + } + + this.setDrawingSurfaceElement(saveContext); + } + + // draw reference lines across origin + var bounds3D = this.viewUtils.getElementBoundsInGlobal(stageRoot); var l = MathUtils.segSegIntersection2D(bounds3D[0], bounds3D[3], [0, 0, 0], [0, stage.canvas.height, 0], 0.1); if(!l) return; var r = MathUtils.segSegIntersection2D(bounds3D[0], bounds3D[3], [stage.canvas.width, 0, 0], [stage.canvas.width, stage.canvas.height, 0], 0.1); -- cgit v1.2.3 From 3b5e824faf4b7fa685498b45477cb85e9eec31a1 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Mon, 25 Jun 2012 09:47:11 -0700 Subject: When reclaiming stage's negative scroll padding, we need to use the template's left and top padding as the minimum values when switching between documents. Signed-off-by: Nivesh Rajbhandari --- js/helper-classes/3D/draw-utils.js | 2 ++ 1 file changed, 2 insertions(+) (limited to 'js/helper-classes/3D/draw-utils.js') diff --git a/js/helper-classes/3D/draw-utils.js b/js/helper-classes/3D/draw-utils.js index 42b759b5..5d210d41 100755 --- a/js/helper-classes/3D/draw-utils.js +++ b/js/helper-classes/3D/draw-utils.js @@ -145,6 +145,8 @@ var DrawUtils = exports.DrawUtils = Montage.create(Component, { if(useStageValues) { initL = stage.userPaddingLeft; initT = stage.userPaddingTop; + minLeft = stage.templateLeft; + minTop = stage.templateTop; this._recalculateScrollOffsets = false; } for(i=0; i