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 --- .../layout/bread-crumb.reel/bread-crumb.js | 42 +++--- js/controllers/elements/element-controller.js | 4 +- js/controllers/selection-controller.js | 38 +++--- js/document/document-html.js | 6 + js/document/models/base.js | 3 + js/document/models/html.js | 5 - js/helper-classes/3D/snap-manager.js | 6 +- js/lib/NJUtils.js | 4 +- js/ninja.reel/ninja.html | 3 +- js/ninja.reel/ninja.js | 20 --- .../Timeline/TimelinePanel.reel/TimelinePanel.js | 28 ++-- js/stage/layout.js | 6 +- js/stage/stage.reel/stage.js | 145 ++++++++++++++++++--- js/tools/Rotate3DToolBase.js | 2 +- js/tools/SelectionTool.js | 4 +- js/tools/ShapeTool.js | 6 +- js/tools/TranslateObject3DTool.js | 2 +- 17 files changed, 199 insertions(+), 125 deletions(-) diff --git a/js/components/layout/bread-crumb.reel/bread-crumb.js b/js/components/layout/bread-crumb.reel/bread-crumb.js index ac131f2c..260922b3 100755 --- a/js/components/layout/bread-crumb.reel/bread-crumb.js +++ b/js/components/layout/bread-crumb.reel/bread-crumb.js @@ -51,22 +51,6 @@ exports.Breadcrumb = Montage.create(Component, { } }, - _container:{ - value:null - }, - - container: { - set: function(value) { - if(this._container !== value) { - this._container = value; - this.createContainerElements(); - } - }, - get: function() { - return this._container; - } - }, - containerElements: { value: [] }, @@ -74,31 +58,37 @@ exports.Breadcrumb = Montage.create(Component, { prepareForDraw: { value: function() { this.breadcrumbBt.addEventListener("action", this, false); + this.addPropertyChangeListener("currentDocument.model.domContainer", this) } }, - createContainerElements: { + handleChange: { value: function() { - var parentNode; + if(this.currentDocument && this.currentDocument.model.getProperty("domContainer")) { + this.createContainerElements(this.currentDocument.model.getProperty("domContainer")); + } + } + }, + + createContainerElements: { + value: function(container) { // delete this.containerElements; this.containerElements = []; - parentNode = this.container; - - while(parentNode !== this.currentDocument.model.documentRoot) { - this.containerElements.unshift({"node": parentNode, "nodeUuid":parentNode.uuid, "label": parentNode.nodeName}); - parentNode = parentNode.parentNode; + while(container !== this.currentDocument.model.documentRoot) { + this.containerElements.unshift({"node": container, "nodeUuid":container.uuid, "label": container.nodeName}); + container = container.parentNode; } // This is always the top container which is now hardcoded to body - this.containerElements.unshift({"node": parentNode, "nodeUuid":parentNode.uuid, "label": parentNode.nodeName}); + this.containerElements.unshift({"node": container, "nodeUuid":container.uuid, "label": container.nodeName}); } }, handleAction: { value: function(evt) { - if(evt.target.value === this.container.uuid) { + if(evt.target.value === this.currentDocument.model.domContainer.uuid) { return; } @@ -109,7 +99,7 @@ exports.Breadcrumb = Montage.create(Component, { } // TODO: This is bound 2 ways, update the internal property - this.application.ninja.currentSelectedContainer = this.containerElements[i].node; + this.currentDocument.model.domContainer = this.containerElements[i].node; } } }); diff --git a/js/controllers/elements/element-controller.js b/js/controllers/elements/element-controller.js index 4a02e9a3..e40a646a 100755 --- a/js/controllers/elements/element-controller.js +++ b/js/controllers/elements/element-controller.js @@ -19,13 +19,13 @@ exports.ElementController = Montage.create(Component, { var selectedLayerIndex = this.application.ninja.timeline.getLayerIndexByID(this.application.ninja.timeline.currentLayerSelected.layerData.layerID); if(selectedLayerIndex === 0) { - this.application.ninja.currentSelectedContainer.appendChild(el); + this.application.ninja.currentDocument.model.domContainer.appendChild(el); } else { var element = this.application.ninja.timeline.arrLayers[selectedLayerIndex].layerData.elementsList[0]; element.parentNode.insertBefore(el, element.nextSibling); } } else { - this.application.ninja.currentSelectedContainer.appendChild(el); + this.application.ninja.currentDocument.model.domContainer.appendChild(el); } if(styles) { diff --git a/js/controllers/selection-controller.js b/js/controllers/selection-controller.js index 4bca0755..9ae1cfc9 100755 --- a/js/controllers/selection-controller.js +++ b/js/controllers/selection-controller.js @@ -35,7 +35,7 @@ exports.SelectionController = Montage.create(Component, { if(this._currentDocument && this._currentDocument.currentView === "design") { this._currentDocument.model._selection = this.application.ninja.selectedElements; - this._currentDocument.model.selectionContainer = this.application.ninja._currentSelectedContainer; +// this._currentDocument.model.selectionContainer = this.application.ninja._currentSelectedContainer; } this._currentDocument = value; @@ -65,7 +65,7 @@ exports.SelectionController = Montage.create(Component, { this._selectedElements = value; this.application.ninja.selectedElements = this._selectedElements; - this.application.ninja._currentSelectedContainer = this._selectionContainer = this.application.ninja.currentDocument.model.documentRoot; +// this.application.ninja._currentSelectedContainer = this._selectionContainer = this.application.ninja.currentDocument.model.documentRoot; if(this._selectedElements.length === 0) { this.executeSelectElement(); @@ -78,30 +78,24 @@ 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) { - this.executeSelectElement(); - } - - this._selectionContainer = value; - } - }, - deserializedFromTemplate: { value: function() { this.eventManager.addEventListener("elementAdded", this, false); this.eventManager.addEventListener("elementsRemoved", this, false); this.eventManager.addEventListener("elementReplaced", this, false); this.eventManager.addEventListener("selectAll", this, false); + + this.addPropertyChangeListener("currentDocument.model.domContainer", this); + } + }, + + handleChange: { + value: function() { + if(this.currentDocument && this.currentDocument.model.getProperty("domContainer")) { + if(this.currentDocument.model.getProperty("domContainer") !== null) { + this.executeSelectElement(); + } + } } }, @@ -175,12 +169,12 @@ exports.SelectionController = Montage.create(Component, { if(this.isDocument) return; // If the stage is already selected do nothing. this.executeSelectElement(); // Else execute selection with no element } else { - if(element.parentNode.uuid === this.selectionContainer.uuid) { + if(element.parentNode.uuid === this.currentDocument.model.domContainer.uuid) { this.executeSelectElement(element); } else { var outerElement = element.parentNode; - while(outerElement.parentNode && outerElement.parentNode.uuid !== this.selectionContainer.uuid) { + while(outerElement.parentNode && outerElement.parentNode.uuid !== this.currentDocument.model.domContainer.uuid) { // If element is higher up than current container then return if(outerElement.nodeName === "BODY") return; // else keep going up the chain diff --git a/js/document/document-html.js b/js/document/document-html.js index 04565753..15f88d09 100755 --- a/js/document/document-html.js +++ b/js/document/document-html.js @@ -107,6 +107,12 @@ exports.HtmlDocument = Montage.create(Component, { }, handleViewReady: { value: function() { + // TODO: Find a better way to initialize this property + // Assign the domContainer to be the document root on open + if(typeof this.model.domContainer !== "undefined") { + this.model.domContainer = this.model.documentRoot; + } + //Making callback after view is loaded this.loaded.callback.call(this.loaded.context, this); } diff --git a/js/document/models/base.js b/js/document/models/base.js index 5fa06259..1307e0c0 100755 --- a/js/document/models/base.js +++ b/js/document/models/base.js @@ -65,6 +65,9 @@ exports.BaseDocumentModel = Montage.create(Component, { _selection: { value: [] }, + domContainer: { + value: null + }, //////////////////////////////////////////////////////////////////// // selection: { diff --git a/js/document/models/html.js b/js/document/models/html.js index 7064c6e3..4a232ee1 100755 --- a/js/document/models/html.js +++ b/js/document/models/html.js @@ -26,11 +26,6 @@ exports.HtmlDocumentModel = Montage.create(BaseDocumentModel, { // this.libs = {montage: false, canvas: false, montageId: null, canvasId: null}; } - }, - //////////////////////////////////////////////////////////////////// - // - selectionContainer: { - value: [] }, //////////////////////////////////////////////////////////////////// // diff --git a/js/helper-classes/3D/snap-manager.js b/js/helper-classes/3D/snap-manager.js index a8b6e739..0157140f 100755 --- a/js/helper-classes/3D/snap-manager.js +++ b/js/helper-classes/3D/snap-manager.js @@ -496,7 +496,7 @@ var SnapManager = exports.SnapManager = Montage.create(Component, { this._elementCache = new Array; // var stage = this.getStage(); - var stage = this.application.ninja.currentSelectedContainer || this.getStage(); + var stage = this.application.ninja.currentDocument.model.domContainer || this.getStage(); this.hLoadElementCache( stage, plane, 0 ); this._isCacheInvalid = false; @@ -987,7 +987,7 @@ var SnapManager = exports.SnapManager = Montage.create(Component, { value: function( screenPt, hitRecs ) { // start at the stage. // var stage = this.getStage(); - var stage = this.application.ninja.currentSelectedContainer || this.getStage(); + var stage = this.application.ninja.currentDocument.model.domContainer || this.getStage(); // the root should be the 'view' canvas, so the first matrix is the camera viewUtils.setViewportObj( stage ); @@ -1009,7 +1009,7 @@ var SnapManager = exports.SnapManager = Montage.create(Component, { } // hit test the current object var hit; - var snapToStage = ((depth === 0) && (elt === this.application.ninja.currentSelectedContainer) && (elt.nodeName === 'CANVAS')); + var snapToStage = ((depth === 0) && (elt === this.application.ninja.currentDocument.model.domContainer) && (elt.nodeName === 'CANVAS')); if ((depth > 0) || snapToStage) // don't snap to the root unles we are working inside a canvas { // if the element is in the 2D cache snapping is done there diff --git a/js/lib/NJUtils.js b/js/lib/NJUtils.js index 0dec6345..b35e29bc 100755 --- a/js/lib/NJUtils.js +++ b/js/lib/NJUtils.js @@ -96,8 +96,8 @@ exports.NJUtils = Montage.create(Component, { var styles = {}; styles['position'] = pos ? pos: "absolute"; - styles['left'] = (Math.round(drawData.midPt[0] - 0.5 * width)) - this.application.ninja.currentSelectedContainer.offsetLeft + 'px'; - styles['top'] = (Math.round(drawData.midPt[1] - 0.5 * height)) - this.application.ninja.currentSelectedContainer.offsetTop + 'px'; + styles['left'] = (Math.round(drawData.midPt[0] - 0.5 * width)) - this.application.ninja.currentDocument.model.domContainer.offsetLeft + 'px'; + styles['top'] = (Math.round(drawData.midPt[1] - 0.5 * height)) - this.application.ninja.currentDocument.model.domContainer.offsetTop + 'px'; styles['width'] = width + 'px'; styles['height'] = height + 'px'; diff --git a/js/ninja.reel/ninja.html b/js/ninja.reel/ninja.html index a98fca60..38b956bd 100755 --- a/js/ninja.reel/ninja.html +++ b/js/ninja.reel/ninja.html @@ -246,7 +246,7 @@ "element":{"#" : "breadCrumbComponent"} }, "bindings" : { - "container": {"<-": "@owner.currentSelectedContainer"}, + "currentDocument": {"<-": "@documentList.selectedObjects.0"} } }, @@ -291,7 +291,6 @@ "selectionController": { "prototype": "js/controllers/selection-controller", "bindings" : { - "selectionContainer": {"<-": "@owner.currentSelectedContainer"}, "currentDocument": {"<-": "@documentList.selectedObjects.0"}, "selectedElements": {"<-": "@documentList.selectedObjects.0.model.selection"} } diff --git a/js/ninja.reel/ninja.js b/js/ninja.reel/ninja.js index 38f5efcf..b57aecd2 100755 --- a/js/ninja.reel/ninja.js +++ b/js/ninja.reel/ninja.js @@ -147,21 +147,6 @@ exports.Ninja = Montage.create(Component, { value: [] }, - _currentSelectedContainer: { - value: null - }, - - currentSelectedContainer: { - get: function() { - return this._currentSelectedContainer; - }, - set: function(value) { - if(value !== this._currentSelectedContainer) { - this._currentSelectedContainer = value; - } - } - }, - templateDidLoad: { value: function() { this.ninjaVersion = window.ninjaVersion.ninja.version; @@ -321,11 +306,6 @@ exports.Ninja = Montage.create(Component, { // TODO: Remove this when integrating the next montage this.documentList.selectedObjects = [doc]; - if(doc.currentView === "design") { - // TODO: Bind directly to the model of the document in components instead of this property - this._currentSelectedContainer = null; - this.currentSelectedContainer = doc.model.documentRoot; - } } }, diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index d7329ac7..f7ab5117 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js @@ -53,6 +53,14 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { } } }, + + handleChange: { + value: function() { + if(this.currentDocument && this.currentDocument.model.getProperty("domContainer")) { + this.currentSelectedContainer = this.currentDocument.model.getProperty("domContainer"); + } + } + }, _currentSelectedContainer: { value: null @@ -405,13 +413,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this.tl_configbutton.addEventListener("click", this.handleConfigButtonClick.bind(this), false); document.addEventListener("click", this.handleDocumentClick.bind(this), false); - - // Bind some bindings - Object.defineBinding(this, "currentSelectedContainer", { - boundObject:this.application.ninja, - boundObjectPropertyPath:"currentSelectedContainer", - oneway:true - }); + this.addPropertyChangeListener("currentDocument.model.domContainer", this); } }, @@ -512,7 +514,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { if (this._boolCacheArrays) { // ... but only if we're supposed to. this.application.ninja.currentDocument.tlArrLayers = this.arrLayers; - this.application.ninja.currentDocument.tlCurrentSelectedContainer = this.application.ninja.currentSelectedContainer; + this.application.ninja.currentDocument.tlCurrentSelectedContainer = this.currentDocument.model.domContainer; this.application.ninja.currentDocument.tllayerNumber = this.currentLayerNumber; this.application.ninja.currentDocument.tlCurrentLayerSelected = this.currentLayerSelected; this.application.ninja.currentDocument.tlCurrentLayersSelected = this.currentLayersSelected; @@ -525,7 +527,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { // Initialize the currentDocument for a new set of timeline data. this.application.ninja.currentDocument.isTimelineInitialized = true; this.application.ninja.currentDocument.tlArrLayers = []; - this.application.ninja.currentDocument.tlCurrentSelectedContainer = this.application.ninja.currentSelectedContainer; + this.application.ninja.currentDocument.tlCurrentSelectedContainer = this.currentDocument.model.domContainer; this.application.ninja.currentDocument.tllayerNumber = this.currentLayerNumber; this.application.ninja.currentDocument.tlCurrentLayerSelected = false; this.application.ninja.currentDocument.tlCurrentLayersSelected = false; @@ -669,7 +671,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { // console.log('TimelinePanel.initTimelineForDocument: breadCrumbClick'); // Information stored, but we're moving up or down in the breadcrumb. // Get the current selection and restore timeline info for its children. - var parentNode = this.application.ninja.currentSelectedContainer, + var parentNode = this.currentDocument.model.domContainer, storedCurrentLayerNumber = this.application.ninja.currentDocument.tllayerNumber; this.temparrLayers = []; @@ -708,7 +710,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { //debugger; if (typeof(this.application.ninja.currentDocument.tlCurrentSelectedContainer) !== "undefined") { -// this.application.ninja.currentSelectedContainer=this.application.ninja.currentDocument.tlCurrentSelectedContainer; +// this.currentDocument.model.domContainer = this.application.ninja.currentDocument.tlCurrentSelectedContainer; } // Are we only showing animated layers? @@ -984,7 +986,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { thingToPush.layerData.layerName = newLayerName; thingToPush.layerData.layerTag = "<" + object.nodeName.toLowerCase() + ">"; thingToPush.layerData.layerID = this.currentLayerNumber; - thingToPush.parentElement = this.application.ninja.currentSelectedContainer; + thingToPush.parentElement = this.currentDocument.model.domContainer; thingToPush.layerData.isSelected = true; thingToPush.layerData._isFirstDraw = true; thingToPush.layerData.created = true; @@ -1032,7 +1034,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { thingToPush.layerData.layerName = newLayerName; thingToPush.layerData.layerID = this.currentLayerNumber; thingToPush.layerData.layerTag = "<" + ele.nodeName.toLowerCase() + ">"; - thingToPush.parentElement = this.application.ninja.currentSelectedContainer; + thingToPush.parentElement = this.currentDocument.model.domContainer; if (this.checkable_animated.classList.contains("checked")) { thingToPush.layerData.isVisible = false; } 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 diff --git a/js/tools/Rotate3DToolBase.js b/js/tools/Rotate3DToolBase.js index bf9537dd..f0fe83fa 100755 --- a/js/tools/Rotate3DToolBase.js +++ b/js/tools/Rotate3DToolBase.js @@ -98,7 +98,7 @@ exports.Rotate3DToolBase = Montage.create(ModifierToolBase, { // { // hitRec = snapManager.findHitRecordForElement(elt); // } -// if(elt === this.application.ninja.currentSelectedContainer) +// if(elt === this.application.ninja.currentDocument.model.domContainer) // { // this._clickedOnStage = true; // } diff --git a/js/tools/SelectionTool.js b/js/tools/SelectionTool.js index ed92b893..493f4aa2 100755 --- a/js/tools/SelectionTool.js +++ b/js/tools/SelectionTool.js @@ -224,9 +224,9 @@ var SelectionTool = exports.SelectionTool = Montage.create(ModifierToolBase, { HandleDoubleClick: { value: function(event) { if(this.application.ninja.selectedElements.length > 0) { - this.application.ninja.currentSelectedContainer = this.application.ninja.selectedElements[0]; + this.application.ninja.currentDocument.model.domContainer = this.application.ninja.selectedElements[0]; } else { - this.application.ninja.currentSelectedContainer = this.application.ninja.currentDocument.model.documentRoot; + this.application.ninja.currentDocument.model.domContainer = this.application.ninja.currentDocument.model.documentRoot; } } }, diff --git a/js/tools/ShapeTool.js b/js/tools/ShapeTool.js index 03ddc391..8d381711 100755 --- a/js/tools/ShapeTool.js +++ b/js/tools/ShapeTool.js @@ -103,8 +103,8 @@ exports.ShapeTool = Montage.create(DrawingTool, { if(wasSelected) { this.AddCustomFeedback(); this.application.ninja.elementMediator.addDelegate = this; - if(this.application.ninja.currentSelectedContainer.nodeName === "CANVAS") { - this._targetedElement = this.application.ninja.currentSelectedContainer; + if(this.application.ninja.currentDocument.model.domContainer.nodeName === "CANVAS") { + this._targetedElement = this.application.ninja.currentDocument.model.domContainer; } } else { this.RemoveCustomFeedback(); @@ -199,7 +199,7 @@ exports.ShapeTool = Montage.create(DrawingTool, { target = this._targetedElement; else { - var container = this.application.ninja.currentSelectedContainer; + var container = this.application.ninja.currentDocument.model.domContainer; if (container && (container.nodeName === "CANVAS")) { target = container; diff --git a/js/tools/TranslateObject3DTool.js b/js/tools/TranslateObject3DTool.js index f8b32d23..d9e558a4 100755 --- a/js/tools/TranslateObject3DTool.js +++ b/js/tools/TranslateObject3DTool.js @@ -89,7 +89,7 @@ exports.TranslateObject3DTool = Montage.create(Translate3DToolBase, { var otherSnap = snapManager.findHitRecordForElement(elt); if (otherSnap) hitRec = otherSnap; } - if(elt === this.application.ninja.currentSelectedContainer) + if(elt === this.application.ninja.currentDocument.model.domContainer) { this._clickedOnStage = true; } -- cgit v1.2.3