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