From 2fd6db5f46208a5aa8fa58d090f795e5b7eb99bb Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Tue, 29 May 2012 10:35:06 -0700 Subject: Sped up user-interaction by moving grid drawing into its own canvas so the layout code doesn't have to be run when modifying selected elements. Signed-off-by: Nivesh Rajbhandari --- js/helper-classes/3D/draw-utils.js | 7 +++---- js/helper-classes/3D/snap-manager.js | 5 ++--- js/stage/stage-deps.js | 2 -- js/stage/stage.reel/stage.html | 2 ++ js/stage/stage.reel/stage.js | 28 +++++++++++++++++++++++----- 5 files changed, 30 insertions(+), 14 deletions(-) (limited to 'js') diff --git a/js/helper-classes/3D/draw-utils.js b/js/helper-classes/3D/draw-utils.js index 871b832d..75aa308c 100755 --- a/js/helper-classes/3D/draw-utils.js +++ b/js/helper-classes/3D/draw-utils.js @@ -126,7 +126,7 @@ var DrawUtils = exports.DrawUtils = Montage.create(Component, { //initialize with current document this._eltArray = []; this._planesArray = []; - this.setDrawingSurfaceElement(stage.canvas); + this.setDrawingSurfaceElement(stage.gridCanvas); this.setSourceSpaceElement( this.application.ninja.currentDocument.model.documentRoot); this.setWorkingPlane( [0,0,1,0] ); @@ -307,7 +307,6 @@ var DrawUtils = exports.DrawUtils = Montage.create(Component, { } if(!changed) { - stage.layout.draw(); this.drawWorkingPlane(); this.draw3DCompass(); } @@ -631,8 +630,8 @@ var DrawUtils = exports.DrawUtils = Montage.create(Component, { if (!this.isDrawingGrid()) return; var saveContext = this.getDrawingSurfaceElement(); - //this.setDrawingSurfaceElement(window.stageManager.layoutCanvas); - this.setDrawingSurfaceElement(this.application.ninja.stage.layoutCanvas); + this.setDrawingSurfaceElement(this.application.ninja.stage.gridCanvas); + this.clear(); // 3 coordinate axes for the plane var zAxis = [this._workingPlane[0], this._workingPlane[1], this._workingPlane[2]]; diff --git a/js/helper-classes/3D/snap-manager.js b/js/helper-classes/3D/snap-manager.js index 069c6022..4dcda24a 100755 --- a/js/helper-classes/3D/snap-manager.js +++ b/js/helper-classes/3D/snap-manager.js @@ -21,8 +21,7 @@ var SnapManager = exports.SnapManager = Montage.create(Component, { /////////////////////////////////////////////////////////////////////// // Instance variables /////////////////////////////////////////////////////////////////////// - drawingCanvas: { value: null, writable: true}, - + // we keep a stack of working planes to facilitate working on other planes temporarily _workingPlaneStack : { value: [], writable: true }, @@ -2124,7 +2123,7 @@ var SnapManager = exports.SnapManager = Montage.create(Component, { if (hitRec) { var saveContext = drawUtils.getDrawingSurfaceElement(); - drawUtils.setDrawingSurfaceElement(this.drawingCanvas); + drawUtils.setDrawingSurfaceElement(this.application.ninja.stage.drawingCanvas); var context = drawUtils.getDrawingContext(); if (context) { diff --git a/js/stage/stage-deps.js b/js/stage/stage-deps.js index 896d4a5b..2469ba79 100755 --- a/js/stage/stage-deps.js +++ b/js/stage/stage-deps.js @@ -37,8 +37,6 @@ exports.StageDeps = Montage.create(Component, { window.MathUtils = MathUtilsClass; window.VecUtils = VecUtils; - snapManager.drawingCanvas = this.stage.drawingCanvas; - // Setup the listeners for the draw-util and snapmanager when removing elements // TODO Revisit when supporting multiple documents drawUtils.initialize(); diff --git a/js/stage/stage.reel/stage.html b/js/stage/stage.reel/stage.html index 30c3d231..a819fc79 100755 --- a/js/stage/stage.reel/stage.html +++ b/js/stage/stage.reel/stage.html @@ -57,6 +57,7 @@ "element": {"#": "stageAndScenesContainer"}, "_iframeContainer": {"#": "iframeContainer"}, "_layoutCanvas": {"#": "layoutCanvas"}, + "_gridCanvas": {"#": "gridCanvas"}, "_canvas": {"#": "stageCanvas"}, "_drawingCanvas": {"#": "drawingCanvas"}, "stageDeps": {"@": "StageDeps1"}, @@ -83,6 +84,7 @@
+ diff --git a/js/stage/stage.reel/stage.js b/js/stage/stage.reel/stage.js index c7afb95c..d8684739 100755 --- a/js/stage/stage.reel/stage.js +++ b/js/stage/stage.reel/stage.js @@ -97,6 +97,12 @@ exports.Stage = Montage.create(Component, { _layoutCanvas: { value: null }, layoutCanvas: { get: function() { return this._layoutCanvas; } }, + _gridCanvas: { value: null }, + gridCanvas: { get: function() { return this._gridCanvas; } }, + + _gridContext: { value: null }, + gridContext: { get: function() { return this._gridContext; } }, + _drawingCanvas: { value: null }, drawingCanvas: { get: function() { return this._drawingCanvas; } }, @@ -207,11 +213,14 @@ exports.Stage = Montage.create(Component, { 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.element.offsetWidth - 11 ; - this._canvas.height = this._layoutCanvas.height = this._drawingCanvas.height = this.element.offsetHeight - 11;// - 26 - 26; + this._canvas.width = this._layoutCanvas.width = this._drawingCanvas.width = this._gridCanvas.width = this.element.offsetWidth - 11 ; + this._canvas.height = this._layoutCanvas.height = this._drawingCanvas.height = this._gridCanvas.height = this.element.offsetHeight - 11;// - 26 - 26; // Hack for now until a full component this.layout.draw(); + if(this.application.ninja.currentDocument) { + this.layout.draw3DInfo(true); + } } else if(this.updatedStage) { this.layout.draw(); this.layout.draw3DInfo(true); @@ -231,6 +240,7 @@ exports.Stage = Montage.create(Component, { this._context = this._canvas.getContext("2d"); this._drawingContext= this._drawingCanvas.getContext("2d"); + this._gridContext= this._gridCanvas.getContext("2d"); // Setup event listeners this._drawingCanvas.addEventListener("mousedown", this, false); @@ -276,8 +286,8 @@ exports.Stage = Montage.create(Component, { this.hideCanvas(false); // Recalculate the canvas sizes because of splitter resizing - this._canvas.width = this._layoutCanvas.width = this._drawingCanvas.width = this.element.offsetWidth - 11 ; - this._canvas.height = this._layoutCanvas.height = this._drawingCanvas.height = this.element.offsetHeight - 11; + this._canvas.width = this._layoutCanvas.width = this._drawingCanvas.width = this._gridCanvas.width = this.element.offsetWidth - 11 ; + this._canvas.height = this._layoutCanvas.height = this._drawingCanvas.height = this._gridCanvas.height = this.element.offsetHeight - 11; designView.iframe.contentWindow.addEventListener("scroll", this, false); @@ -519,11 +529,12 @@ exports.Stage = Montage.create(Component, { this._canvas.style.visibility = "hidden"; this._layoutCanvas.style.visibility = "hidden"; this._drawingCanvas.style.visibility = "hidden"; + this._gridCanvas.style.visibility = "hidden"; } else { this._canvas.style.visibility = "visible"; this._layoutCanvas.style.visibility = "visible"; this._drawingCanvas.style.visibility = "visible"; - + this._gridCanvas.style.visibility = "visible"; } } }, @@ -560,10 +571,17 @@ exports.Stage = Montage.create(Component, { } }, + clearGridCanvas: { + value: function() { + this._gridContext.clearRect(0, 0, this._gridCanvas.width, this._gridCanvas.height); + } + }, + clearAllCanvas: { value: function() { this._drawingContext.clearRect(0, 0, this._drawingCanvas.width, this._drawingCanvas.height); this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); + this._gridContext.clearRect(0, 0, this._gridCanvas.width, this._gridCanvas.height); this.layout.clearCanvas(); } }, -- cgit v1.2.3