From f9d34a54baf61ccdf77732b1aaedb29d296b8c2e Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Mon, 20 Feb 2012 23:03:48 -0800 Subject: enabling nested selection Signed-off-by: Valerio Virgillito --- js/controllers/elements/element-controller.js | 3 +++ js/controllers/selection-controller.js | 37 ++++++++++++++++++++++----- js/ninja.reel/ninja.html | 10 +++++++- js/stage/layout.js | 29 +++++++++++++++++---- js/tools/SelectionTool.js | 23 +++++++++-------- 5 files changed, 80 insertions(+), 22 deletions(-) (limited to 'js') diff --git a/js/controllers/elements/element-controller.js b/js/controllers/elements/element-controller.js index 65d26bdd..ac14def4 100755 --- a/js/controllers/elements/element-controller.js +++ b/js/controllers/elements/element-controller.js @@ -12,6 +12,9 @@ var ElementController = exports.ElementController = Montage.create(NJComponent, addElement: { value: function(el, styles) { this.application.ninja.currentDocument.documentRoot.appendChild(el); + // Nested elements - + // TODO make sure the CSS is correct before nesting elements + // this.application.ninja.currentSelectedContainer.appendChild(el); this.application.ninja.stylesController.setElementStyles(el, styles); } }, diff --git a/js/controllers/selection-controller.js b/js/controllers/selection-controller.js index 833e6f04..fed9affd 100755 --- a/js/controllers/selection-controller.js +++ b/js/controllers/selection-controller.js @@ -20,6 +20,27 @@ exports.SelectionController = Montage.create(Component, { } }, + /* + * Bound property to the ninja currentSelectedContainer + */ + _selectionContainer: { + value: null + }, + + selectionContainer: { + get: function() { + return this._selectionContainer + }, + set: function(value) { + if(this._selectionContainer && this._selectionContainer !== value) { + console.log("setting container in the selection tool"); + this.executeSelectElement(); + } + + this._selectionContainer = value; + } + }, + deserializedFromTemplate: { value: function() { this.eventManager.addEventListener("openDocument", this, false); @@ -53,7 +74,9 @@ exports.SelectionController = Montage.create(Component, { } } - this.dispatchEvent(selectionEvent.event); + // + this._selectionContainer = this.application.ninja.currentSelectedContainer; + } }, @@ -66,13 +89,10 @@ exports.SelectionController = Montage.create(Component, { handleElementDeleted: { value: function(event) { if(!this._isDocument) { - if(this.findSelectedElement(event.detail) !== -1) { this.executeSelectElement(); } - } - } }, @@ -130,12 +150,17 @@ exports.SelectionController = Montage.create(Component, { this.executeSelectElement(); // Else execute selection with no item } else { - if(item.parentNode.id == "UserContent") { +// if(item.parentNode.id === "UserContent") { + if(item.parentNode.uuid === this.selectionContainer.uuid) { this.executeSelectElement(item); } else { var outerElement = item.parentNode; - while(outerElement.parentNode && outerElement.parentNode.id !== "UserContent") { + while(outerElement.parentNode && outerElement.parentNode.uuid !== this.selectionContainer.uuid) { + //while(outerElement.parentNode && outerElement.parentNode.id !== "UserContent") { + // If element is higher up than current container then return + if(outerElement.id === "UserContent") return; + // else keep going up the chain outerElement = outerElement.parentNode; } diff --git a/js/ninja.reel/ninja.html b/js/ninja.reel/ninja.html index c9f17e3b..65cbfc28 100755 --- a/js/ninja.reel/ninja.html +++ b/js/ninja.reel/ninja.html @@ -228,7 +228,15 @@ "selectionController1": { "module": "js/controllers/selection-controller", - "name": "SelectionController" + "name": "SelectionController", + "bindings" : { + "selectionContainer": { + "boundObject": {"@": "owner"}, + "boundObjectPropertyPath": "currentSelectedContainer", + "oneway": true + } + } + }, "documentController1": { diff --git a/js/stage/layout.js b/js/stage/layout.js index 1a491210..56bb70bf 100755 --- a/js/stage/layout.js +++ b/js/stage/layout.js @@ -195,11 +195,30 @@ exports.Layout = Montage.create(Component, { bounds3D[j] = tmpPt; } - // Draw the Item ouline - this._dashedLine(bounds3D[3][0] - 0.5,bounds3D[3][1]- 0.5,bounds3D[0][0] + 2.5, bounds3D[0][1] - 0.5,[5,5]); - this._dashedLine(bounds3D[0][0] - 0.5, bounds3D[0][1] - 0.5, bounds3D[1][0]- 0.5, bounds3D[1][1] + 0.5, [5,5] ); - this._dashedLine(bounds3D[1][0] - 0.5 , bounds3D[1][1] + 0.5, bounds3D[2][0]+ 0.5, bounds3D[2][1] + 0.5, [5,5] ); - this._dashedLine(bounds3D[2][0] + 0.5, bounds3D[2][1] + 0.5, bounds3D[3][0] + 0.5, bounds3D[3][1] - 0.5, [5,5] ); + if(item.uuid === this.application.ninja.currentSelectedContainer.uuid) { + this.ctx.save(); + this.ctx.strokeStyle = "#C61F00"; + + this.ctx.beginPath(); + + this.ctx.moveTo( bounds3D[3][0] + 0.5 , bounds3D[3][1] - 0.5 ); + + this.ctx.lineTo( bounds3D[0][0] - 0.5 , bounds3D[0][1] - 0.5 ); + this.ctx.lineTo( bounds3D[1][0] - 0.5 , bounds3D[1][1] + 0.5 ); + this.ctx.lineTo( bounds3D[2][0] + 0.5 , bounds3D[2][1] + 0.5 ); + this.ctx.lineTo( bounds3D[3][0] + 0.5 , bounds3D[3][1] + 0.5 ); + + this.ctx.closePath(); + this.ctx.stroke(); + + this.ctx.restore(); + } else { + // Draw the Item ouline + this._dashedLine(bounds3D[3][0] - 0.5,bounds3D[3][1]- 0.5,bounds3D[0][0] + 2.5, bounds3D[0][1] - 0.5,[5,5]); + this._dashedLine(bounds3D[0][0] - 0.5, bounds3D[0][1] - 0.5, bounds3D[1][0]- 0.5, bounds3D[1][1] + 0.5, [5,5] ); + this._dashedLine(bounds3D[1][0] - 0.5 , bounds3D[1][1] + 0.5, bounds3D[2][0]+ 0.5, bounds3D[2][1] + 0.5, [5,5] ); + this._dashedLine(bounds3D[2][0] + 0.5, bounds3D[2][1] + 0.5, bounds3D[3][0] + 0.5, bounds3D[3][1] - 0.5, [5,5] ); + } // Draw the Label is all mode if(this.layoutView === "layoutAll") { diff --git a/js/tools/SelectionTool.js b/js/tools/SelectionTool.js index f76a6d85..37029e8c 100755 --- a/js/tools/SelectionTool.js +++ b/js/tools/SelectionTool.js @@ -183,18 +183,21 @@ var SelectionTool = exports.SelectionTool = Montage.create(ModifierToolBase, { } }, + /** + * Double click handler + * + * Sets the currentSelectionContainer to the current selected element. If no elements are selected set the + * currentSelectionContainer to the userDocument div. + */ HandleDoubleClick: { - value: function(event) { - - // Temporary Code for Breadcrumb - if(this.application.ninja.selectedElements.length > 0) { - this.application.ninja.currentSelectedContainer = this.application.ninja.selectedElements[0]._element; - } else { - this.application.ninja.currentSelectedContainer = this.application.ninja.currentDocument.documentRoot; - } - + value: function(event) { + if(this.application.ninja.selectedElements.length > 0) { + this.application.ninja.currentSelectedContainer = this.application.ninja.selectedElements[0]._element; + } else { + this.application.ninja.currentSelectedContainer = this.application.ninja.currentDocument.documentRoot; } - }, + } + }, HandleKeyPress: { value: function(event){ -- cgit v1.2.3