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/stage/stage.reel/stage.js | 28 +++++++++++++++++++++++----- 1 file changed, 23 insertions(+), 5 deletions(-) (limited to 'js/stage/stage.reel/stage.js') 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 From 961830a1ab076db70577df735f43cae5e8559e83 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Tue, 29 May 2012 14:55:19 -0700 Subject: Moving layout and stageDeps' handleOpenDocument into stage. Signed-off-by: Nivesh Rajbhandari --- js/stage/stage.reel/stage.js | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) (limited to 'js/stage/stage.reel/stage.js') diff --git a/js/stage/stage.reel/stage.js b/js/stage/stage.reel/stage.js index d8684739..44d6eadb 100755 --- a/js/stage/stage.reel/stage.js +++ b/js/stage/stage.reel/stage.js @@ -305,8 +305,7 @@ exports.Stage = Montage.create(Component, { this._scrollLeft = 0; this._scrollTop = 0; - this.stageDeps.handleOpenDocument(); - this.layout.handleOpenDocument(); + this.initialize3DOnOpenDocument(); if(designView._template) { var initialLeft = parseInt((this.canvas.width - designView._template.size.width)/2); @@ -1079,6 +1078,18 @@ exports.Stage = Montage.create(Component, { this.application.ninja.toolsSplitter.restore(); this.application.ninja.optionsSplitter.restore(); } + }, + + initialize3DOnOpenDocument: { + value: function() { + + workingPlane = [0,0,1,0]; + + this.snapManager._isCacheInvalid = true; + this.snapManager.setupDragPlaneFromPlane (workingPlane); + + this.drawUtils.initializeFromDocument(); + } } }); \ No newline at end of file -- cgit v1.2.3 From 820005437e7270e72b865a3436d7148e1dd19900 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Tue, 29 May 2012 15:42:24 -0700 Subject: Fixed bug with scrolling too much when moving objects in negative space. Signed-off-by: Nivesh Rajbhandari --- js/stage/stage.reel/stage.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'js/stage/stage.reel/stage.js') diff --git a/js/stage/stage.reel/stage.js b/js/stage/stage.reel/stage.js index 44d6eadb..7025c692 100755 --- a/js/stage/stage.reel/stage.js +++ b/js/stage/stage.reel/stage.js @@ -193,7 +193,7 @@ exports.Stage = Montage.create(Component, { this._userPaddingLeft = value; this._documentOffsetLeft = -value; this.application.ninja.currentDocument.model.documentRoot.ownerDocument.getElementsByTagName("HTML")[0].style["padding-left"] = -value + "px"; - this.userContentLeft = this._documentOffsetLeft; + this.userContentLeft = this._documentOffsetLeft - this._scrollLeft; this.updatedStage = true; } }, @@ -204,7 +204,7 @@ exports.Stage = Montage.create(Component, { this._userPaddingTop = value; this._documentOffsetTop = -value; this.application.ninja.currentDocument.model.documentRoot.ownerDocument.getElementsByTagName("HTML")[0].style["padding-top"] = -value + "px"; - this.userContentTop = this._documentOffsetTop; + this.userContentTop = this._documentOffsetTop - this._scrollTop; this.updatedStage = true; } }, -- cgit v1.2.3