From fc13ef1e806116bb7ece5bb06604fa4f5714a6ed Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Thu, 19 Jul 2012 10:55:22 -0700 Subject: Squashed commit of the following: commit 0285afe3d4bd458a51f11241f13ea6ffdb0283ed Merge: 2f9f5e3 16d06ba Author: Nivesh Rajbhandari Date: Thu Jul 19 10:54:25 2012 -0700 Merge branch 'refs/heads/ninja-mqg734-master' into StageToolDrawingOptimizations commit 2f9f5e369eb96f6c81b5e4bcbe09b418825e2864 Author: Nivesh Rajbhandari Date: Wed Jul 18 17:15:19 2012 -0700 Fixed selection bounds not drawing in nested tags. Signed-off-by: Nivesh Rajbhandari commit b0a3507f9d27579ad511c69314a09136d7f7c6a0 Author: Nivesh Rajbhandari Date: Wed Jul 18 11:07:44 2012 -0700 Layout info needs to redraw if stage is updated. Signed-off-by: Nivesh Rajbhandari commit 63c5e0bf52c33706ba597cb69f7794e287bd0f06 Author: Nivesh Rajbhandari Date: Tue Jul 17 15:40:54 2012 -0700 Per feedback from QE, we are still going to draw tool feedback on each mouse move so the selection bounds are not out of sync with the elements. Signed-off-by: Nivesh Rajbhandari commit 0599a742092b985c4002977e501e3b457173f1d9 Author: Nivesh Rajbhandari Date: Tue Jul 17 15:28:25 2012 -0700 Fixed grid not drawing correctly when switching documents and when adding/removing elements. Signed-off-by: Nivesh Rajbhandari commit fd9410606ee6358910d65b2cb5f71812fd44a7c4 Author: Nivesh Rajbhandari Date: Tue Jul 17 11:36:09 2012 -0700 Updated drawing feedback to handle matrix 2d values entered via CSS Panel. Signed-off-by: Nivesh Rajbhandari commit 559c16c7ac8c9f40b94a011a6f932d4f97df66a7 Author: Nivesh Rajbhandari Date: Mon Jul 16 17:14:28 2012 -0700 IKNinja-751 - Selection boundary doesn't follow the transform applied in the CSS Panel. Signed-off-by: Nivesh Rajbhandari commit e2da5340159db5cd6f75bf6c9b7eb9cbf959e5cd Merge: 7cc5de3 5146f22 Author: Nivesh Rajbhandari Date: Mon Jul 16 15:36:28 2012 -0700 Merge branch 'refs/heads/ninja-mqg734-master' into StageToolDrawingOptimizations commit 7cc5de39e41b4220f53c91b15b0cf0ed53e0b0f6 Author: Nivesh Rajbhandari Date: Mon Jul 16 14:52:06 2012 -0700 Check if ownerDocument.defaultValue is null. Signed-off-by: Nivesh Rajbhandari commit 5ae97995a28a4b06fb7f8703eb8090ea16d88acd Merge: d17974d 0ede302 Author: Nivesh Rajbhandari Date: Mon Jul 16 09:27:22 2012 -0700 Merge branch 'refs/heads/ninja-mqg734-master' into StageToolDrawingOptimizations commit d17974d77273bb635311cb6466f4427cf4d9e5d4 Author: Nivesh Rajbhandari Date: Mon Jul 16 08:45:05 2012 -0700 Pass in selectedElements array directly to drawUtils when drawing selection bounds instead of creating a duplicate array. Signed-off-by: Nivesh Rajbhandari commit 0b1ea3144cb3e2c1d272f60da32423d0604ace3b Author: Nivesh Rajbhandari Date: Fri Jul 13 14:03:40 2012 -0700 Fixed line tool not drawing the width and height info. Signed-off-by: Nivesh Rajbhandari commit b9c70e8d9ae324aa21fa5490edc71d8503bcefbc Author: Nivesh Rajbhandari Date: Fri Jul 13 12:42:25 2012 -0700 Used cached offsetWidth and offsetHeight. Signed-off-by: Nivesh Rajbhandari commit 9e17ac7124745ba745014efe149b31dee4fe658f Author: Nivesh Rajbhandari Date: Thu Jul 12 16:25:41 2012 -0700 Converting tabs to spaces … again! Signed-off-by: Nivesh Rajbhandari commit 351726c951bb73c28f0e15ea1ab32e85cc735688 Author: Nivesh Rajbhandari Date: Thu Jul 12 16:14:31 2012 -0700 Tabs should be 4 spaces. Signed-off-by: Nivesh Rajbhandari commit 250c419aa2dbcb10f012817ee7039aca77cb2518 Merge: 3f8d61a 2880e1d Author: Nivesh Rajbhandari Date: Thu Jul 12 16:08:31 2012 -0700 Merge branch 'refs/heads/ninja-mqg734-master' into StageToolDrawingOptimizations commit 3f8d61a676da3992947ed9a2ed0e449780fcfbe0 Author: Nivesh Rajbhandari Date: Thu Jul 12 15:53:44 2012 -0700 Rotate tool was not working immediately after switching selection and selection bounds were not drawing after resizing canvases. Signed-off-by: Nivesh Rajbhandari commit e2e1f81e3b6917e1032e1b99b79c266937f3bb25 Author: Nivesh Rajbhandari Date: Thu Jul 12 12:15:59 2012 -0700 Single draw cycle for stage updates and tool drawings. Signed-off-by: Nivesh Rajbhandari commit 95a90b4c95ee3163c97bea317144366674e49ade Author: Nivesh Rajbhandari Date: Mon Jun 18 11:46:38 2012 -0700 Single draw cycle for the stage and layout. Signed-off-by: Nivesh Rajbhandari commit 21966b1515d80d2161a14e5a19bc66f3f49a92ce Author: Nivesh Rajbhandari Date: Fri Jun 15 13:33:14 2012 -0700 Cache element offsets, including offsetParent. Signed-off-by: Nivesh Rajbhandari commit 80c563c8ba06149691c6c1e754dd9a5e43bc7d4b Author: Nivesh Rajbhandari Date: Mon Jul 9 17:30:00 2012 -0700 Open materials editor popup next to PI button. Signed-off-by: Nivesh Rajbhandari Signed-off-by: Nivesh Rajbhandari --- js/stage/layout.js | 58 ++------- js/stage/stage.reel/stage.js | 288 +++++++++++++++++++++---------------------- 2 files changed, 153 insertions(+), 193 deletions(-) (limited to 'js/stage') diff --git a/js/stage/layout.js b/js/stage/layout.js index d133f100..5cc8dbea 100755 --- a/js/stage/layout.js +++ b/js/stage/layout.js @@ -67,19 +67,11 @@ exports.Layout = Montage.create(Component, { return this._currentDocument; }, set : function(value) { - if (value === this._currentDocument) {// || value.getProperty("currentView") !== "design") { - return; - } - - drawUtils._eltArray.length = 0; - drawUtils._planesArray.length = 0; - - this._currentDocument = value; - - if(!value) { - - } else if(this._currentDocument.currentView === "design") { - this.elementsToDraw = this._currentDocument.model.documentRoot.childNodes; + if (value !== this._currentDocument) { + this._currentDocument = value; + if(this._currentDocument && this._currentDocument.currentView === "design") { + this.elementsToDraw = Array.prototype.slice.call(this._currentDocument.model.documentRoot.childNodes, 0); + } } } }, @@ -113,17 +105,6 @@ exports.Layout = Montage.create(Component, { this.ctx = this.canvas.getContext("2d"); this.ctx.lineWidth = this.ctxLineWidth; this.ctx.fillStyle = this.drawFillColor; - - this.eventManager.addEventListener("selectionChange", this, false); - this.eventManager.addEventListener("elementsRemoved", this, false); - } - }, - - // Redraw stage only once after all deletion is completed - handleElementsRemoved: { - value: function(event) { - this.draw(); - this.draw3DInfo(false); } }, @@ -131,13 +112,16 @@ exports.Layout = Montage.create(Component, { value: function(event) { var containerIndex; + // Clear the elements to draw + this.elementsToDraw.length = 0; + if(this.currentDocument === null){ return; } if(this.currentDocument.currentView === "design"){ - // Make an array copy of the line node list which is not an array like object - this.domTree = this.application.ninja.currentDocument.model.views.design.getLiveNodeList(true); + // Make an array copy of the live node list which is not an array like object + this.domTree = this.currentDocument.model.views.design.getLiveNodeList(true); // Index of the current container containerIndex = this.domTree.indexOf(this.currentDocument.model.domContainer); @@ -149,8 +133,6 @@ exports.Layout = Montage.create(Component, { this.domTree = Array.prototype.slice.call(this.domTree[containerIndex].childNodes, 0); } } - // Clear the elements to draw - this.elementsToDraw.length = 0; // Draw the non selected elements if(!event.detail.isDocument) { @@ -161,9 +143,6 @@ exports.Layout = Montage.create(Component, { this.elementsToDraw = Array.prototype.slice.call(this.domTree, 0); } - this.draw(); // Not a reel yet - this.draw3DInfo(false); - // Clear the domTree copy this.domTree.length = 0; } @@ -171,8 +150,6 @@ exports.Layout = Montage.create(Component, { draw: { value: function() { - this.clearCanvas(); - // TODO Bind the layoutview mode to the current document // var mode = this.application.ninja.currentDocument.layoutMode; if(this.layoutView === "layoutOff") return; @@ -184,21 +161,6 @@ exports.Layout = Montage.create(Component, { } }, - draw3DInfo: { - value: function(updatePlanes) { - if(updatePlanes) { - drawUtils.updatePlanes(); - this.application.ninja.stage.stageDeps.snapManager._isCacheInvalid = true; - } - - if(this.stage.appModel.show3dGrid) { - this.application.ninja.stage.stageDeps.snapManager.updateWorkingPlaneFromView(); - } - drawUtils.drawWorkingPlane(); - drawUtils.draw3DCompass(); - } - }, - clearCanvas: { value: function() { this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height); diff --git a/js/stage/stage.reel/stage.js b/js/stage/stage.reel/stage.js index 7c587989..7ac64976 100755 --- a/js/stage/stage.reel/stage.js +++ b/js/stage/stage.reel/stage.js @@ -29,10 +29,10 @@ ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. */ -var Montage = require("montage/core/core").Montage, +var Montage = require("montage/core/core").Montage, Component = require("montage/ui/component").Component, drawUtils = require("js/helper-classes/3D/draw-utils").DrawUtils, - vecUtils = require("js/helper-classes/3D/vec-utils").VecUtils; + vecUtils = require("js/helper-classes/3D/vec-utils").VecUtils; exports.Stage = Montage.create(Component, { @@ -46,8 +46,20 @@ exports.Stage = Montage.create(Component, { drawNow: { value : false }, switchedFromCodeDoc: { value : false }, + drawLayout: { value : false }, + updatePlanes: { value : false }, + draw3DInfo: { value : false }, + // TO REVIEW - zoomFactor: {value : 1 }, + zoomFactor: { + get: function() { + if (this._viewport && this._viewport.style && this._viewport.style.zoom) { + return Number(this._viewport.style.zoom); + } else { + return 1; + } + } + }, _canvasSelectionPrefs: { value: { "thickness" : 1.0, "color" : "#46a1ff" } }, _canvasDrawingPrefs: { value: { "thickness" : 1.0, "color" : "#000" } }, @@ -85,7 +97,21 @@ exports.Stage = Montage.create(Component, { set: function(value) { this._resizeCanvases = value; if(value) { - this.needsDraw = true; + // TODO GET THE SCROLL SIZE FROM THE CSS -- 11 px + this._canvas.width = this._layoutCanvas.width = this._drawingCanvas.width = this._gridCanvas.width = this.bindingView.width = this.element.offsetWidth - 11; + this._canvas.height = this._layoutCanvas.height = this._drawingCanvas.height = this._gridCanvas.height = this.bindingView.height = this.element.offsetHeight - 11;// - 26 - 26; + + if(this.currentDocument) { + if(this.currentDocument.currentView === "design") { + this.drawLayout = true; + this.updatePlanes = true; + this.draw3DInfo = true; + this.needsDrawSelection = true; + } + if(this.currentDocument.model && this.currentDocument.model.documentRoot) { + this.currentDocument.model.documentRoot.elementModel.setProperty("offsetCache", false); + } + } } } }, @@ -98,6 +124,44 @@ exports.Stage = Montage.create(Component, { }, set: function(value) { this._updatedStage = value; + if(value) { + if(this.currentDocument) { + if(this.currentDocument.currentView === "design") { + this.drawLayout = true; + this.updatePlanes = true; + this.draw3DInfo = true; + this.needsDrawSelection = true; + } + if(this.currentDocument.model && this.currentDocument.model.documentRoot) { + this.currentDocument.model.documentRoot.elementModel.setProperty("offsetCache", false); + } + } + } + } + }, + + _needsDrawSelection: { value: false }, + + needsDrawSelection: { + get: function() { + return this._needsDrawSelection; + }, + set: function(value) { + this._needsDrawSelection = value; + if(value) { + this.needsDraw = true; + } + } + }, + + _needsDrawTool: { value: null }, + + needsDrawTool: { + get: function() { + return this._needsDrawTool; + }, + set: function(value) { + this._needsDrawTool = value; if(value) { this.needsDraw = true; } @@ -346,20 +410,55 @@ exports.Stage = Montage.create(Component, { willDraw: { value: function() { - if(this.resizeCanvases) { - // TODO GET THE SCROLL SIZE FROM THE CSS -- 11 px - this._canvas.width = this._layoutCanvas.width = this._drawingCanvas.width = this._gridCanvas.width = this.bindingView.width = this.element.offsetWidth - 11; - this._canvas.height = this._layoutCanvas.height = this._drawingCanvas.height = this._gridCanvas.height = this.bindingView.height = this.element.offsetHeight - 11;// - 26 - 26; - // Hack for now until a full component - this.layout.draw(); - if(this.currentDocument && (this.currentDocument.currentView === "design")) { - this.layout.draw3DInfo(true); + if(this._needsDrawTool) { +// console.log("drawTool"); + this.application.ninja.toolsData.selectedToolInstance.HandleMouseMove(this._needsDrawTool); + this.needsDrawTool = null; + } + } + }, + + draw: { + value: function() { + if(!this.currentDocument) return; + + if(this.draw3DInfo) { +// console.log("draw3DInfo"); + if(this.updatePlanes) { +// console.log("updatePlanes"); + drawUtils.updatePlanes(); + this.stageDeps.snapManager._isCacheInvalid = true; + this.updatePlanes = false; } - } else if(this.updatedStage) { + if(this.appModel.show3dGrid) { +// console.log("show3dGrid"); + this.stageDeps.snapManager.updateWorkingPlaneFromView(); + } +// console.log("drawWorkingPlane"); + drawUtils.drawWorkingPlane(); + this.draw3DInfo = false; + } + if(this.drawLayout) { + this.layout.clearCanvas(); +// console.log("drawLayout"); this.layout.draw(); - this.layout.draw3DInfo(true); + this.drawLayout = false; + } + + if(this._needsDrawSelection) { + this.clearCanvas(); + if(this.currentDocument.model.domContainer !== this.currentDocument.model.documentRoot) { + this.drawDomContainer(this.currentDocument.model.domContainer); + } + //TODO Set this variable in the needs draw so that it does not have to be calculated again for each draw for selection change + if(this.application.ninja.selectedElements.length) { + drawUtils.drawSelectionBounds(this.application.ninja.selectedElements, this.showSelectionBounds); + } + NJevent("selectionDrawn"); + this.needsDrawSelection = false; } } + }, didDraw: { @@ -568,7 +667,7 @@ exports.Stage = Montage.create(Component, { this._clickPoint.y = point.y; // event.layerY; this.enableMouseInOut(); - + this.application.ninja.toolsData.selectedToolInstance.downPoint.x = point.x; this.application.ninja.toolsData.selectedToolInstance.downPoint.y = point.y; this.application.ninja.toolsData.selectedToolInstance.HandleLeftButtonDown(event); @@ -630,7 +729,9 @@ exports.Stage = Montage.create(Component, { handleMousemove: { value: function(event) { - this.application.ninja.toolsData.selectedToolInstance.HandleMouseMove(event); +// this.application.ninja.toolsData.selectedToolInstance.HandleMouseMove(event); + // Set a flag here, and tell the tool to handle mouse move in our draw cycle + this.needsDrawTool = event; } }, @@ -653,25 +754,34 @@ exports.Stage = Montage.create(Component, { handleSelectionChange: { value: function(event) { - // TODO - this is a hack for now because some tools depend on selectionDrawn event for some logic + this.showSelectionBounds = true; + this.needsDrawSelection = true; + this.drawLayout = true; + this.layout.handleSelectionChange(event); + // TODO - Some tools currently depend on selectionDrawn event at this point, so force a draw here if(this.drawNow) { this.draw(); this.drawNow = false; - } else { - this.needsDraw = true; } } }, handleElementChanging: { value: function(event) { - this.needsDraw = true; + // TODO - This assumes only selected elements can have their properties modified + this.draw3DInfo = true; + this.showSelectionBounds = false; + this.needsDrawSelection = true; } }, handleElementChange: { value: function(event) { - this.needsDraw = true; + // TODO - This assumes only selected elements can have their properties modified + this.draw3DInfo = true; + this.snapManager._isCacheInvalid = true; + this.showSelectionBounds = true; + this.needsDrawSelection = true; } }, @@ -838,51 +948,6 @@ exports.Stage = Montage.create(Component, { } }, - - draw: { - value: function() { - if(!this.currentDocument) return; - - this.clearCanvas(); - - drawUtils.updatePlanes(); - - if(this.currentDocument.model.domContainer !== this.currentDocument.model.documentRoot) { - this.drawDomContainer(this.currentDocument.model.domContainer); - } - - //TODO Set this variable in the needs draw so that it does not have to be calculated again for each draw for selection change - if(this.application.ninja.selectedElements.length) { - // drawUtils.drawSelectionBounds handles the single selection case as well, - // so we don't have to special-case the single selection case. - // TODO drawUtils.drawSelectionBounds expects an array of elements. - // TODO If we use the routine to only draw selection bounds, then we may want to change it - // TODO to work on _element instead of re-creating a new Array here. - var selArray = new Array(); - - for(var i = 0; this.application.ninja.selectedElements[i];i++) { - var curElement = this.application.ninja.selectedElements[i]; - - // Add element to array that is used to calculate 3d-bounding box of all elements - selArray.push( curElement ); - // Draw bounding box around selected item. - this.drawElementBoundingBox(curElement); - - // Draw the element normal - drawUtils.drawElementNormal(curElement); - } - - - if(this.showSelectionBounds && this.application.ninja.selectedElements.length > 1) { - drawUtils.drawSelectionBounds( selArray ); - } - } - - NJevent("selectionDrawn"); - } - - }, - /** * draw3DSelectionRectangle -- Draws a 3D rectangle used for marquee selection * Uses the _canvasDrawingPrefs for line thickness and color @@ -917,74 +982,13 @@ exports.Stage = Montage.create(Component, { this._drawingContext.fillText("X: " + Math.round(userCoor[0]), x0+textWidth+4, y0 - 5); this._drawingContext.fillText("Y: " + Math.round(userCoor[1]), x0-5, y0+10); - // When in 'Shift Mode' there is no Mouse Position for that event - var txtX, txtY = 0; - var point = webkitConvertPointFromPageToNode(this.canvas, new WebKitPoint(event.pageX, event.pageY)); - (point.x) ? txtX = point.x : txtX = this.application.ninja.toolsData.selectedToolInstance.downPoint.x; - (point.y) ? txtY = point.y : txtY = this.application.ninja.toolsData.selectedToolInstance.downPoint.y; - - var h = Math.round(Math.abs(y2-y0)); var w = Math.round(Math.abs(x2-x0)); - this._drawingContext.fillText("H: " + h, txtX + 38, txtY - 4); - this._drawingContext.fillText("W: " + w, txtX - 5, txtY + 12); - } - }, - - /** - * Draws selection highlight and reg. point for a given element - */ - drawElementBoundingBox: { - value: function(elt) { - this.stageDeps.viewUtils.setViewportObj( elt ); - var bounds3D = this.stageDeps.viewUtils.getElementViewBounds3D( elt ); - - // convert the local bounds to the world - -// for (var j=0; j<4; j++) { -// bounds3D[j] = this.localToGlobal(bounds3D, j, elt); -// } - - var zoomFactor = 1; - if (this._viewport && this._viewport.style && this._viewport.style.zoom) { - zoomFactor = Number(this._viewport.style.zoom); - } - - var tmpMat = this.stageDeps.viewUtils.getLocalToGlobalMatrix( elt ); - for (var j=0; j<4; j++) { - var localPt = bounds3D[j]; - var tmpPt = this.stageDeps.viewUtils.localToGlobal2(localPt, tmpMat); - - if(zoomFactor !== 1) { - tmpPt = vecUtils.vecScale(3, tmpPt, zoomFactor); - - tmpPt[0] += this._scrollLeft*(zoomFactor - 1); - tmpPt[1] += this._scrollTop*(zoomFactor - 1); - } - bounds3D[j] = tmpPt; - } - - // draw it - this.context.strokeStyle = this._canvasSelectionPrefs.color; - this.context.lineWidth = this._canvasSelectionPrefs.thickness; - - - this.context.beginPath(); - - this.context.moveTo( bounds3D[3][0] + 0.5 , bounds3D[3][1] - 0.5 ); - - // This more granular approach lets us specify different gaps for the selection around the element - this.context.lineTo( bounds3D[0][0] - 0.5 , bounds3D[0][1] - 0.5 ); - this.context.lineTo( bounds3D[1][0] - 0.5 , bounds3D[1][1] + 0.5 ); - this.context.lineTo( bounds3D[2][0] + 0.5 , bounds3D[2][1] + 0.5 ); - this.context.lineTo( bounds3D[3][0] + 0.5 , bounds3D[3][1] + 0.5 ); - - this.context.closePath(); - this.context.stroke(); + this._drawingContext.fillText("H: " + h, x2 + 38, y2 - 4); + this._drawingContext.fillText("W: " + w, x2 - 5, y2 + 12); } }, - drawDomContainer: { value: function(elt) { @@ -1089,9 +1093,9 @@ exports.Stage = Montage.create(Component, { /** * draw3DProjectedAndUnprojectedRectangles -- Draws a 3D rectangle used for marquee selection. - * Draws a second rectangle to indicate the projected - * location of the created geometry - * Uses the _canvasDrawingPrefs for line thickness and color + * Draws a second rectangle to indicate the projected + * location of the created geometry + * Uses the _canvasDrawingPrefs for line thickness and color * * @params: x, y, w, h */ @@ -1102,10 +1106,10 @@ exports.Stage = Montage.create(Component, { this._drawingContext.lineWidth = this._canvasDrawingPrefs.thickness; this._drawingContext.beginPath(); - var x0 = unProjPts[0][0], y0 = unProjPts[0][1], - x1 = unProjPts[1][0], y1 = unProjPts[1][1], - x2 = unProjPts[2][0], y2 = unProjPts[2][1], - x3 = unProjPts[3][0], y3 = unProjPts[3][1]; + var x0 = unProjPts[0][0], y0 = unProjPts[0][1], + x1 = unProjPts[1][0], y1 = unProjPts[1][1], + x2 = unProjPts[2][0], y2 = unProjPts[2][1], + x3 = unProjPts[3][0], y3 = unProjPts[3][1]; this._drawingContext.moveTo( x0 + 0.5, y0 + 0.5 ); this._drawingContext.lineTo( x1 + 0.5, y1 + 0.5 ); this._drawingContext.lineTo( x2 + 0.5, y2 + 0.5 ); @@ -1174,16 +1178,10 @@ exports.Stage = Montage.create(Component, { this._drawingContext.fillText("X: " + Math.round(userCoor[0]), x0+textWidth+4, y0 - 5); this._drawingContext.fillText("Y: " + Math.round(userCoor[1]), x0-5, y0+10); - // When in 'Shift Mode' there is no Mouse Position for that event - var txtX, txtY = 0; - var point = webkitConvertPointFromPageToNode(this.canvas, new WebKitPoint(event.pageX, event.pageY)); - (point.x) ? txtX = point.x : txtX = this.application.ninja.toolsData.selectedToolInstance.downPoint.x; - (point.y) ? txtY = point.y : txtY = this.application.ninja.toolsData.selectedToolInstance.downPoint.y; - var h = Math.round(Math.abs(y1-y0)); var w = Math.round(Math.abs(x1-x0)); - this._drawingContext.fillText("H: " + h, txtX + 38, txtY - 4); - this._drawingContext.fillText("W: " + w, txtX - 5, txtY + 12); + this._drawingContext.fillText("H: " + h, x1 + 38, y1 - 4); + this._drawingContext.fillText("W: " + w, x1 - 5, y1 + 12); this._drawingContext.strokeStyle = origStrokeStyle; this._drawingContext.lineWidth = origLineWidth; @@ -1353,4 +1351,4 @@ exports.Stage = Montage.create(Component, { } } -}); +}); \ No newline at end of file -- cgit v1.2.3 From 6403ec6d21048c93138ddcbcc59fc4677121ed5e Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Thu, 19 Jul 2012 15:53:54 -0700 Subject: Timeline: updated livePreview to timeline play. Hide canvas and draw red outline - Changed the play button to a toggle button - livePreview code in stage activated via bindings - Draw a red outline of the canvas when in play Signed-off-by: Valerio Virgillito --- js/stage/stage.reel/stage.js | 64 ++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 64 insertions(+) (limited to 'js/stage') diff --git a/js/stage/stage.reel/stage.js b/js/stage/stage.reel/stage.js index 7ac64976..b7235d19 100755 --- a/js/stage/stage.reel/stage.js +++ b/js/stage/stage.reel/stage.js @@ -1349,6 +1349,70 @@ exports.Stage = Montage.create(Component, { this.drawUtils.initializeFromDocument(adjustScrollOffsets); } + }, + + _timelinePlay: { + value: false + }, + + timelinePlay: { + get: function() { + return this._timelinePlay; + }, + set: function(value) { + if(this._timelinePlay !== value) { + this._timelinePlay = value; + this._timelinePlay ? this.playTimeline() : this.stopTimeline(); + } + } + }, + + playTimeline: { + value: function() { + this._canvas.style.visibility = "hidden"; + this._layoutCanvas.style.visibility = "hidden"; + this._gridCanvas.style.visibility = "hidden"; + + this._drawingCanvas.removeEventListener("mousedown", this, false); + this._drawingCanvas.removeEventListener("mouseup", this, false); + this._drawingCanvas.removeEventListener("dblclick", this, false); + this._drawingCanvas.removeEventListener("mousewheel", this, false); + this._drawingCanvas.removeEventListener("mousemove", this, false); + + this.clearDrawingCanvas(); + this._drawingContext.save(); + this._drawingContext.strokeStyle = "rgba(255,0,0,1)"; + this._drawingContext.lineWidth = 4; + + this._drawingContext.strokeRect(0, 0, this._drawingCanvas.width, this._drawingCanvas.height); + + document.removeEventListener("keydown", this, false); + document.removeEventListener("keyup", this, false); + this.bindingView.hide = true; + this.application.ninja.stylesController._stageStylesheet.rules[0].selectorText = "nj-css-garbage-selector"; + } + }, + + stopTimeline: { + value: function() { + this._canvas.style.visibility = "visible"; + this._layoutCanvas.style.visibility = "visible"; + this._gridCanvas.style.visibility = "visible"; + + this._drawingCanvas.addEventListener("mousedown", this, false); + this._drawingCanvas.addEventListener("mouseup", this, false); + this._drawingCanvas.addEventListener("dblclick", this, false); + this._drawingCanvas.addEventListener("mousewheel", this, false); + this._drawingCanvas.addEventListener("mousemove", this, false); + + this.clearDrawingCanvas(); + this._drawingContext.restore(); + + document.addEventListener("keydown", this, false); + document.addEventListener("keyup", this, false); + this.bindingView.hide = false; + this.application.ninja.stylesController._stageStylesheet.rules[0].selectorText = "*"; + } } }); \ No newline at end of file -- cgit v1.2.3