From 0e1a276f19ea70009c5a649e9667861d7c346a7e Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Wed, 6 Jun 2012 00:25:27 -0700 Subject: first iteration of adding serializable to ninja plus other changes to run the latest montage Signed-off-by: Valerio Virgillito --- js/stage/layout.js | 11 +++++- js/stage/stage-deps.js | 5 +++ js/stage/stage.reel/stage.js | 79 +++++++++++++++++++++++++++++++++++++++----- 3 files changed, 85 insertions(+), 10 deletions(-) (limited to 'js/stage') diff --git a/js/stage/layout.js b/js/stage/layout.js index 71296405..a2f81e97 100755 --- a/js/stage/layout.js +++ b/js/stage/layout.js @@ -17,7 +17,16 @@ var Montage = require("montage/core/core").Montage, exports.Layout = Montage.create(Component, { - canvas: { value: null }, + canvas: { + value: null, + serializable: true + }, + + stage: { + value: null, + serializable: true + }, + ctx: { value: null }, drawFillColor: { value: 'rgba(255,255,255,1)' }, diff --git a/js/stage/stage-deps.js b/js/stage/stage-deps.js index 762c2529..462f7ca5 100755 --- a/js/stage/stage-deps.js +++ b/js/stage/stage-deps.js @@ -15,6 +15,11 @@ var Montage = require("montage/core/core").Montage, exports.StageDeps = Montage.create(Component, { + stage: { + value: null, + serializable: true + }, + viewUtils: { value: viewUtils }, diff --git a/js/stage/stage.reel/stage.js b/js/stage/stage.reel/stage.js index d8f7313b..0ad004d6 100755 --- a/js/stage/stage.reel/stage.js +++ b/js/stage/stage.reel/stage.js @@ -11,6 +11,11 @@ var Montage = require("montage/core/core").Montage, exports.Stage = Montage.create(Component, { + appModel: { + value: null, + serializable: true + }, + // TODO - Need to figure out how to remove this dependency // Needed by some tools that depend on selectionDrawn event to set up some logic drawNow: { value : false }, @@ -22,7 +27,10 @@ exports.Stage = Montage.create(Component, { _canvasDrawingPrefs: { value: { "thickness" : 1.0, "color" : "#000" } }, drawingContextPreferences: { get: function() { return this._canvasDrawingPrefs; } }, - _iframeContainer: { value: null }, + _iframeContainer: { + value: null, + serializable: true + }, _scrollFlag: {value: true, writable: true}, outFlag: { value: false, writable: true }, @@ -88,29 +96,82 @@ exports.Stage = Montage.create(Component, { }, /** MAIN CANVASES **/ - _canvas: { value: null }, // selection bounds, 3d normals and the overall 3d selection box use this canvas - canvas: { get: function() { return this._canvas; } }, + // selection bounds, 3d normals and the overall 3d selection box use this canvas + _canvas: { + value: null, + serializable: true + }, + + canvas: { + get: function() { + return this._canvas; + } + }, _context: { value: null }, context: { get: function() { return this._context; } }, - _layoutCanvas: { value: null }, - layoutCanvas: { get: function() { return this._layoutCanvas; } }, + _layoutCanvas: { + value: null, + serializable: true + }, + + layoutCanvas: { + get: function() { + return this._layoutCanvas; + } + }, - _gridCanvas: { value: null }, - gridCanvas: { get: function() { return this._gridCanvas; } }, + _gridCanvas: { + value: null, + serializable: true + }, + + gridCanvas: { + get: function() { + return this._gridCanvas; + } + }, _gridContext: { value: null }, gridContext: { get: function() { return this._gridContext; } }, - _drawingCanvas: { value: null }, - drawingCanvas: { get: function() { return this._drawingCanvas; } }, + _drawingCanvas: { + value: null, + serializable: true + }, + + drawingCanvas: { + get: function() { + return this._drawingCanvas; + } + }, _drawingContext: { value: null }, drawingContext: { get: function() { return this._drawingContext; } }, _clickPoint: { value: { x: { value: null }, y: { value: null } } }, + stageDeps: { + value: null, + serializable: true + }, + + layout: { + value: null, + serializable: true + }, + + textTool: { + value: null, + serializable: true + }, + + focusManager: { + value: null, + serializable: true + }, + // We will set this to false while moving objects to improve performance showSelectionBounds: { value: true }, -- cgit v1.2.3 From 806974142d44afdd23534bf2d18eff0a8e701e0c Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Fri, 8 Jun 2012 16:59:59 -0700 Subject: rewrite: currentSelectedContainer -> domContainer Fixed the currentSelectedContainer by removing bindings and using property change on the current document added the red outline back. Signed-off-by: Valerio Virgillito --- js/stage/layout.js | 6 +- js/stage/stage.reel/stage.js | 145 +++++++++++++++++++++++++++++++++++++------ 2 files changed, 128 insertions(+), 23 deletions(-) (limited to 'js/stage') diff --git a/js/stage/layout.js b/js/stage/layout.js index 71296405..1831f4e7 100755 --- a/js/stage/layout.js +++ b/js/stage/layout.js @@ -102,11 +102,11 @@ exports.Layout = Montage.create(Component, { // 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); // Index of the current container - containerIndex = this.domTree.indexOf(this.application.ninja.currentSelectedContainer); + containerIndex = this.domTree.indexOf(this.currentDocument.model.domContainer); if(containerIndex < 0) { // Stage is the container. - this.domTree = Array.prototype.slice.call(this.application.ninja.currentSelectedContainer.childNodes, 0); + this.domTree = Array.prototype.slice.call(this.currentDocument.model.domContainer.childNodes, 0); } else { // Child nodes of the container this.domTree = Array.prototype.slice.call(this.domTree[containerIndex].childNodes, 0); @@ -204,7 +204,7 @@ exports.Layout = Montage.create(Component, { bounds3D[j] = tmpPt; } - if(item.uuid === this.application.ninja.currentSelectedContainer.uuid) { + if(item.uuid === this.currentDocument.model.domContainer.uuid) { this.ctx.save(); this.ctx.strokeStyle = "#C61F00"; diff --git a/js/stage/stage.reel/stage.js b/js/stage/stage.reel/stage.js index 30ee1e40..5ad8bf8c 100755 --- a/js/stage/stage.reel/stage.js +++ b/js/stage/stage.reel/stage.js @@ -277,9 +277,6 @@ exports.Stage = Montage.create(Component, { this.eventManager.addEventListener( "appMouseUp", this, false); - - this.eventManager.addEventListener( "openDocument", this, false); - this.eventManager.addEventListener( "switchDocument", this, false); this.eventManager.addEventListener( "enableStageMove", this, false); this.eventManager.addEventListener( "disableStageMove", this, false); @@ -287,19 +284,9 @@ exports.Stage = Montage.create(Component, { this.eventManager.addEventListener( "elementChanging", this, false); this.eventManager.addEventListener( "elementChange", this, false); - } - }, - - // Event details will contain the active document prior to opening a new one - handleOpenDocument: { - value: function(evt) { - this.initWithDocument(); - } - }, + this.addPropertyChangeListener("currentDocument.model.domContainer", this, true); +// this.addPropertyChangeListener("currentDocument.model.domContainer", this); - handleSwitchDocument: { - value: function(evt) { - this.initWithDocument(true); } }, @@ -378,6 +365,18 @@ exports.Stage = Montage.create(Component, { this.updatedStage = true; } } + /* + else if(notification.currentPropertyPath === "currentDocument.model.domContainer") { + if() + } + */ + } + }, + + handleWillChange: { + value: function(notification) { + console.log("stage -> container is about to change"); + console.log(notification.plus); } }, @@ -644,10 +643,10 @@ exports.Stage = Montage.create(Component, { if(selectable) { if(this.currentDocument.inExclusion(element) !== -1) { - return this.application.ninja.currentSelectedContainer; + return this.currentDocument.model.domContainer; } - var activeContainerId = this.application.ninja.currentSelectedContainer.uuid; + var activeContainerId = this.currentDocument.model.domContainer.uuid; if(element.parentNode.uuid === activeContainerId) { return element; } else { @@ -691,10 +690,16 @@ 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, @@ -727,9 +732,6 @@ exports.Stage = Montage.create(Component, { }, - - - /** * draw3DSelectionRectangle -- Draws a 3D rectangle used for marquee selection * Uses the _canvasDrawingPrefs for line thickness and color @@ -831,6 +833,109 @@ exports.Stage = Montage.create(Component, { } }, + + drawDomContainer: { + value: function(elt) { + + + this.stageDeps.viewUtils.setViewportObj( elt ); + var bounds3D = this.stageDeps.viewUtils.getElementViewBounds3D( elt ); + + // convert the local bounds to the world + + + + 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 3 outlines +// for(var i = 0; i < 3) + + this.context.save(); + // draw it + this.context.strokeStyle = "#ff0000"; + this.context.lineWidth = 1; + + + 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.context.restore(); + +/* + + this.context.save(); + // draw it + this.context.strokeStyle = "rgba(0,11,61,0.8)"; + this.context.lineWidth = 1; + + + this.context.beginPath(); + + this.context.moveTo( bounds3D[3][0] + 1.5 , bounds3D[3][1] - 1.5 ); + + // This more granular approach lets us specify different gaps for the selection around the element + this.context.lineTo( bounds3D[0][0] - 1.5 , bounds3D[0][1] - 1.5 ); + this.context.lineTo( bounds3D[1][0] - 1.5 , bounds3D[1][1] + 1.5 ); + this.context.lineTo( bounds3D[2][0] + 1.5 , bounds3D[2][1] + 1.5 ); + this.context.lineTo( bounds3D[3][0] + 1.5 , bounds3D[3][1] + 1.5 ); + + this.context.closePath(); + this.context.stroke(); + + this.context.restore(); + + + this.context.save(); + // draw it + this.context.strokeStyle = "rgba(255,0,0,0.3)"; + this.context.lineWidth = 1; + + + this.context.beginPath(); + + this.context.moveTo( bounds3D[3][0] + 2.5 , bounds3D[3][1] - 2.5 ); + + // This more granular approach lets us specify different gaps for the selection around the element + this.context.lineTo( bounds3D[0][0] - 2.5 , bounds3D[0][1] - 2.5 ); + this.context.lineTo( bounds3D[1][0] - 2.5 , bounds3D[1][1] + 2.5 ); + this.context.lineTo( bounds3D[2][0] + 2.5 , bounds3D[2][1] + 2.5 ); + this.context.lineTo( bounds3D[3][0] + 2.5 , bounds3D[3][1] + 2.5 ); + + this.context.closePath(); + this.context.stroke(); + + this.context.restore(); + */ + } + }, + /** * draw3DProjectedAndUnprojectedRectangles -- Draws a 3D rectangle used for marquee selection. * Draws a second rectangle to indicate the projected -- cgit v1.2.3 From 30f17ae934ee60ed6e4ce52fad1eebc35fc5914a Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Mon, 11 Jun 2012 13:26:20 -0700 Subject: removing console log Signed-off-by: Valerio Virgillito --- js/stage/stage.reel/stage.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) (limited to 'js/stage') diff --git a/js/stage/stage.reel/stage.js b/js/stage/stage.reel/stage.js index 5ad8bf8c..da109d45 100755 --- a/js/stage/stage.reel/stage.js +++ b/js/stage/stage.reel/stage.js @@ -375,8 +375,7 @@ exports.Stage = Montage.create(Component, { handleWillChange: { value: function(notification) { - console.log("stage -> container is about to change"); - console.log(notification.plus); +// console.log("stage -> container is about to change"); } }, -- cgit v1.2.3 From 5b5e059a8dabc02d78fcde1bf271c2e49af6334a Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Thu, 14 Jun 2012 10:25:28 -0700 Subject: IKNinja-1710 - Boundary box is drawn offset when switching between docs. This issue is related to move object to negative space. Signed-off-by: Nivesh Rajbhandari --- js/stage/stage.reel/stage.js | 42 +++++++++++++++++++++++++++--------------- 1 file changed, 27 insertions(+), 15 deletions(-) (limited to 'js/stage') diff --git a/js/stage/stage.reel/stage.js b/js/stage/stage.reel/stage.js index 129bcc33..fce73882 100755 --- a/js/stage/stage.reel/stage.js +++ b/js/stage/stage.reel/stage.js @@ -243,6 +243,13 @@ exports.Stage = Montage.create(Component, { if(this.currentDocument && (this.currentDocument.currentView === "design")) { this.currentDocument.model.scrollLeft = this._scrollLeft; this.currentDocument.model.scrollTop = this._scrollTop; + this.currentDocument.model.userPaddingLeft = this._userPaddingLeft; + this.currentDocument.model.userPaddingTop = this._userPaddingTop; + this.currentDocument.model.documentOffsetLeft = this._documentOffsetLeft; + this.currentDocument.model.documentOffsetTop = this._documentOffsetTop; + this.currentDocument.model.userContentLeft = this._userContentLeft; + this.currentDocument.model.userContentTop = this._userContentTop; + //call configure false with the old document on the selected tool to tear down down any temp. stuff this.application.ninja.toolsData.selectedToolInstance._configure(false); } @@ -359,6 +366,23 @@ exports.Stage = Montage.create(Component, { if(model.scrollLeft != null) { didSwitch = true; + this._userPaddingLeft = this.currentDocument.model.userPaddingLeft; + this._userPaddingTop = this.currentDocument.model.userPaddingTop; + this._documentOffsetLeft = this.currentDocument.model.documentOffsetLeft; + this._documentOffsetTop = this.currentDocument.model.documentOffsetTop; + this._userContentLeft = this.currentDocument.model.userContentLeft; + this._userContentTop = this.currentDocument.model.userContentTop; + this._scrollLeft = this.currentDocument.model.scrollLeft; + this._scrollTop = this.currentDocument.model.scrollTop; + } else { + this._userPaddingLeft = 0; + this._userPaddingTop = 0; + this._documentOffsetLeft = 0; + this._documentOffsetTop = 0; + this._userContentLeft = 0; + this._userContentTop = 0; + this._scrollLeft = 0; + this._scrollTop = 0; } // Recalculate the canvas sizes because of splitter resizing @@ -369,19 +393,7 @@ exports.Stage = Montage.create(Component, { this.addPropertyChangeListener("appModel.show3dGrid", this, false); - this._userPaddingLeft = 0; - this._userPaddingTop = 0; - - this._documentOffsetLeft = 0; - this._documentOffsetTop = 0; - - this._userContentLeft = 0; - this._userContentTop = 0; - - this._scrollLeft = 0; - this._scrollTop = 0; - - this.initialize3DOnOpenDocument(); + this.initialize3DOnOpenDocument(!didSwitch); if(designView._template) { var initialLeft = parseInt((this.canvas.width - designView._template.size.width)/2); @@ -1247,7 +1259,7 @@ exports.Stage = Montage.create(Component, { }, initialize3DOnOpenDocument: { - value: function() { + value: function(adjustScrollOffsets) { workingPlane = [0,0,1,0]; @@ -1258,7 +1270,7 @@ exports.Stage = Montage.create(Component, { this.snapManager.currentStage = this.currentDocument.model.documentRoot; this.snapManager.setupDragPlaneFromPlane (workingPlane); - this.drawUtils.initializeFromDocument(); + this.drawUtils.initializeFromDocument(adjustScrollOffsets); } } -- cgit v1.2.3