From b4d3bf155e38e6554f05bb3cbaddd2f3bf799e90 Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Tue, 13 Mar 2012 18:12:48 -0700 Subject: Fixing the layout to only draw one level and stage resize when the panels are collapsed. Fixing the following bugs: IKNINJA-1068 Signed-off-by: Valerio Virgillito --- js/stage/layout.js | 41 +++++++++++++++++++---------------------- 1 file changed, 19 insertions(+), 22 deletions(-) (limited to 'js/stage') diff --git a/js/stage/layout.js b/js/stage/layout.js index 8a53a08b..6be2df1d 100755 --- a/js/stage/layout.js +++ b/js/stage/layout.js @@ -64,31 +64,17 @@ exports.Layout = Montage.create(Component, { handleOpenDocument: { value: function() { - // Initial elements to draw is the entire node list - if(this.application.ninja.documentController.activeDocument.currentView === "design"){//only for designer view - this.elementsToDraw = this.application.ninja.documentController.activeDocument._liveNodeList; + // Initial elements to draw are the childrens of the root element + if(this.application.ninja.documentController.activeDocument.currentView === "design") { + this.elementsToDraw = this.application.ninja.documentController.activeDocument.documentRoot.childNodes; } + // Draw the elements and the 3d info this.draw(); this.draw3DInfo(false); } }, - // No need to keep track of the added elements. We now have a live node list of the dom - handleElementAdded: { - value: function(event) { - // this.domTree.push(event.detail); - // this.draw(); - // this.draw3DInfo(false); - } - }, - - handleElementDeleted: { - value: function(event) { - //this.domTree.splice(this.domTree.indexOf(event.detail), 1); - } - }, - // Redraw stage only once after all deletion is completed handleDeleteSelection: { value: function(event) { @@ -99,14 +85,25 @@ exports.Layout = Montage.create(Component, { handleSelectionChange: { value: function(event) { + var containerIndex; if(this.application.ninja.documentController.activeDocument === null){ return; } - // Make an array copy of the line node list which is not an array like object - if(this.application.ninja.documentController.activeDocument.currentView === "design"){//only for designer view + if(this.application.ninja.documentController.activeDocument.currentView === "design"){ + // Make an array copy of the line node list which is not an array like object this.domTree = Array.prototype.slice.call(this.application.ninja.documentController.activeDocument._liveNodeList, 0); + // Index of the current container + containerIndex = this.domTree.indexOf(this.application.ninja.currentSelectedContainer); + + if(containerIndex < 0) { + // Stage is the container. + this.domTree = Array.prototype.slice.call(this.application.ninja.currentSelectedContainer.childNodes, 0); + } else { + // Child nodes of the container + this.domTree = Array.prototype.slice.call(this.domTree[containerIndex].childNodes, 0); + } } // Clear the elements to draw this.elementsToDraw.length = 0; @@ -119,10 +116,10 @@ exports.Layout = Montage.create(Component, { return (tmp.indexOf(value) === -1); }); } else { - this.elementsToDraw = this.domTree; + this.elementsToDraw = Array.prototype.slice.call(this.domTree, 0); } - this.draw(); // Not a reel yet :) + this.draw(); // Not a reel yet this.draw3DInfo(false); // Clear the domTree copy -- cgit v1.2.3 From a7cb2c0b22f03b79f19d4a9a2eb691d1ccc392f9 Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Wed, 14 Mar 2012 18:04:11 -0700 Subject: adding a focus manager to handle panel bugs where blur was not getting called when clicking on the canvas. Signed-off-by: Valerio Virgillito --- js/stage/stage.reel/stage.html | 7 ++++++- js/stage/stage.reel/stage.js | 4 ++++ 2 files changed, 10 insertions(+), 1 deletion(-) (limited to 'js/stage') diff --git a/js/stage/stage.reel/stage.html b/js/stage/stage.reel/stage.html index 812e3d55..f796303c 100755 --- a/js/stage/stage.reel/stage.html +++ b/js/stage/stage.reel/stage.html @@ -50,6 +50,10 @@ "element" : {"#": "textToolObject"} } }, + + "focusManager": { + "object": "js/components/focus-manager.reel" + }, "owner": { "module": "js/stage/stage.reel", @@ -63,7 +67,8 @@ "stageDeps": {"@": "StageDeps1"}, "layout": {"@": "layout1"}, "stageView": {"@": "stageView"}, - "textTool": {"@": "textTool"} + "textTool": {"@": "textTool"}, + "focusManager": {"@": "focusManager"} }, "bindings": { "currentDocumentStageView": { diff --git a/js/stage/stage.reel/stage.js b/js/stage/stage.reel/stage.js index 4c1d046b..a624b2c6 100755 --- a/js/stage/stage.reel/stage.js +++ b/js/stage/stage.reel/stage.js @@ -319,6 +319,10 @@ exports.Stage = Montage.create(Component, { handleMousedown: { value: function(event) { + // Call the focus manager to set focus to blur any focus'd elements + this.focusManager.setFocus(); + + var point; // event.preventDefault(); // commenting because HTML elements in the IDE are retaining focus // If right click set the context menu to true to prevent a mouse up. -- cgit v1.2.3 From da5dfc8863ad47c48414ff1fdacbacdb91abd30c Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Wed, 14 Mar 2012 23:25:34 -0700 Subject: Fixing the splitter resize canvas bug by getting the size when a document is opened. Signed-off-by: Valerio Virgillito --- js/stage/stage.reel/stage.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) (limited to 'js/stage') diff --git a/js/stage/stage.reel/stage.js b/js/stage/stage.reel/stage.js index a624b2c6..e139af97 100755 --- a/js/stage/stage.reel/stage.js +++ b/js/stage/stage.reel/stage.js @@ -170,8 +170,7 @@ exports.Stage = Montage.create(Component, { // Hack for now until a full component this.layout.draw(); - } - else if(this.updatedStage) { + } else if(this.updatedStage) { this.layout.draw(); this.layout.draw3DInfo(true); } @@ -235,6 +234,10 @@ 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._documentRoot = this.application.ninja.currentDocument.documentRoot; this._viewport = this.application.ninja.currentDocument.documentRoot.parentNode; -- cgit v1.2.3 From 4bec28fbd8371deceffd1563190cb5e399d554d3 Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Fri, 16 Mar 2012 16:36:04 -0700 Subject: Squashed commit of SnapManagerFixes Signed-off-by: Valerio Virgillito --- js/stage/stage.reel/stage.js | 30 ++++++++++++++++++++++++++++++ 1 file changed, 30 insertions(+) (limited to 'js/stage') diff --git a/js/stage/stage.reel/stage.js b/js/stage/stage.reel/stage.js index e139af97..00b72490 100755 --- a/js/stage/stage.reel/stage.js +++ b/js/stage/stage.reel/stage.js @@ -518,6 +518,36 @@ exports.Stage = Montage.create(Component, { } }, + /** + * GetSelectableElement: Returns a selectable object (direct child of current container) at clicked point + * + * @param: X,Y + * @return: Returns the current container if the the X,Y hits an element in the exclusion list + */ + GetSelectableElement: { + value: function(pos) { + var item = this.GetElement(pos); + if(this.application.ninja.currentDocument.inExclusion(item) !== -1) { + return this.application.ninja.currentSelectedContainer; + } + var activeContainerId = this.application.ninja.currentSelectedContainer.uuid; + if(item.parentNode.uuid === activeContainerId) { + return item; + } else { + var outerElement = item.parentNode; + + while(outerElement.parentNode && outerElement.parentNode.uuid !== activeContainerId) { + // If element is higher up than current container then return + if(outerElement.id === "UserContent") return; + // else keep going up the chain + outerElement = outerElement.parentNode; + } + + return outerElement; + } + } + }, + /** * GetElement: Returns the object under the X,Y coordinates passed as an obj with x,y * -- cgit v1.2.3 From 862b0c33de7cdc8865db274d37744058256936e0 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Wed, 21 Mar 2012 12:01:44 -0700 Subject: We should draw tag outlines only for nodeType = 1. Signed-off-by: Nivesh Rajbhandari --- js/stage/layout.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'js/stage') diff --git a/js/stage/layout.js b/js/stage/layout.js index 6be2df1d..2de67538 100755 --- a/js/stage/layout.js +++ b/js/stage/layout.js @@ -162,7 +162,7 @@ exports.Layout = Montage.create(Component, { drawTagOutline: { value: function (item) { - if(!item) return; + if(!item || (item.nodeType !== 1)) return; // TODO Bind the layoutview mode to the current document // var mode = this.application.ninja.currentDocument.layoutMode; -- cgit v1.2.3 From 49596f2a6b518ed0ee945006787d3c69e40a5757 Mon Sep 17 00:00:00 2001 From: Armen Kesablyan Date: Thu, 22 Mar 2012 14:31:12 -0700 Subject: Updated Resizers for Panels and timeline Signed-off-by: Armen Kesablyan --- js/stage/stage-view.reel/stage-view.js | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) (limited to 'js/stage') diff --git a/js/stage/stage-view.reel/stage-view.js b/js/stage/stage-view.reel/stage-view.js index ad67cada..1f471431 100755 --- a/js/stage/stage-view.reel/stage-view.js +++ b/js/stage/stage-view.reel/stage-view.js @@ -200,14 +200,18 @@ exports.StageView = Montage.create(Component, { }, showRulers:{ value:function(){ - this.application.ninja.rulerTop.style.background = "url('../images/temp/ruler-top.png')"; - this.application.ninja.rulerLeft.style.background = "url('../images/temp/ruler-left.png')"; + this.application.ninja.rulerTop.style.display = "block"; + this.application.ninja.rulerLeft.style.display = "block"; +// this.application.ninja.rulerTop.style.background = "url('../images/temp/ruler-top.png')"; +// this.application.ninja.rulerLeft.style.background = "url('../images/temp/ruler-left.png')"; } }, hideRulers:{ value:function(){ - this.application.ninja.rulerTop.style.background = "rgb(128,128,128)"; - this.application.ninja.rulerLeft.style.background = "rgb(128,128,128)"; + this.application.ninja.rulerTop.style.display = "none"; + this.application.ninja.rulerLeft.style.display = "none"; +// this.application.ninja.rulerTop.style.background = "rgb(128,128,128)"; +// this.application.ninja.rulerLeft.style.background = "rgb(128,128,128)"; } }, -- cgit v1.2.3 From 75e7d29352787ee8182928403ecae09627117d57 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Tue, 27 Mar 2012 16:09:51 -0700 Subject: IKNINJA-1378 - Line Tool's drawing preview changes tool canvas's line style. Signed-off-by: Nivesh Rajbhandari --- js/stage/stage.reel/stage.js | 5 +++++ 1 file changed, 5 insertions(+) (limited to 'js/stage') diff --git a/js/stage/stage.reel/stage.js b/js/stage/stage.reel/stage.js index 00b72490..dd23fbae 100755 --- a/js/stage/stage.reel/stage.js +++ b/js/stage/stage.reel/stage.js @@ -796,6 +796,8 @@ exports.Stage = Montage.create(Component, { drawLine: { value:function(x0, y0, x1, y1, strokeSize, strokeColor) { this.clearDrawingCanvas(); + var origStrokeStyle = this._drawingContext.strokeStyle; + var origLineWidth = this._drawingContext.lineWidth; this._drawingContext.strokeStyle = strokeColor; this._drawingContext.lineWidth = strokeSize; @@ -826,6 +828,9 @@ exports.Stage = Montage.create(Component, { var w = Math.round(Math.abs(x1-x0)); this._drawingContext.fillText("H: " + h, txtX + 38, txtY - 4); this._drawingContext.fillText("W: " + w, txtX - 5, txtY + 12); + + this._drawingContext.strokeStyle = origStrokeStyle; + this._drawingContext.lineWidth = origLineWidth; } }, -- cgit v1.2.3 From 29df692bbe42150c2cb6a58587b9e9ae2d791389 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Tue, 3 Apr 2012 13:44:37 -0700 Subject: IKNinja-635 - Can't see 3d handles if div is red, green or blue color. Signed-off-by: Nivesh Rajbhandari --- js/stage/tool-handle.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) (limited to 'js/stage') diff --git a/js/stage/tool-handle.js b/js/stage/tool-handle.js index f16d8324..d353da47 100755 --- a/js/stage/tool-handle.js +++ b/js/stage/tool-handle.js @@ -235,6 +235,8 @@ exports.RotateHandle = Montage.create(ToolHandle, { context.strokeStyle = this._strokeStyle; context.fillStyle = this._fillStyle; context.lineWidth = this._lineWidth; + context.shadowBlur = 2; + context.shadowColor = "rgba(0, 0, 0, 0.8)"; var pointOnElt = base.slice(0); // this._origin = viewUtils.localToGlobal(pointOnElt, item); @@ -400,7 +402,8 @@ exports.RotateHandle = Montage.create(ToolHandle, { var context = this.application.ninja.stage.drawingContext; context.save(); - context.strokeStyle = this._strokeStyle; + context.strokeStyle = "rgba(0,0,0,1)"; + context.lineWidth = 2; context.fillStyle = this._fillStyle; context.globalAlpha = 0.2; @@ -574,6 +577,8 @@ exports.TranslateHandle = Montage.create(ToolHandle, { context.strokeStyle = this._strokeStyle; context.fillStyle = this._fillStyle; context.lineWidth = this._lineWidth; + context.shadowBlur = 2; + context.shadowColor = "rgba(0, 0, 0, 0.8)"; var pointOnElt = base.slice(0); // this._origin = viewUtils.localToGlobal(pointOnElt, item); -- cgit v1.2.3 From a11ef2eed7049835c8bdfa50a2b893632c46eaa0 Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Wed, 4 Apr 2012 11:11:58 -0700 Subject: Squashed commit of Preparing for the montage undo-manager: Architecture changes Reworked the add and remove elements into 1 function which can take 1 or more elements. Removed the _element from the selection array Many other changes related to those 2 changes Undo/Redo shortcuts are now using montage undo/redo manager. Signed-off-by: Valerio Virgillito --- js/stage/layout.js | 18 ++++++++---------- js/stage/stage.reel/stage.js | 5 ++--- 2 files changed, 10 insertions(+), 13 deletions(-) (limited to 'js/stage') diff --git a/js/stage/layout.js b/js/stage/layout.js index 6be2df1d..ae9260fc 100755 --- a/js/stage/layout.js +++ b/js/stage/layout.js @@ -53,12 +53,8 @@ exports.Layout = Montage.create(Component, { this.ctx.lineWidth = this.ctxLineWidth; this.ctx.fillStyle = this.drawFillColor; -// this.eventManager.addEventListener("elementAdded", this, false); - this.eventManager.addEventListener("elementDeleted", this, false); - this.eventManager.addEventListener("selectionChange", this, false); - - this.eventManager.addEventListener("deleteSelection", this, false); + this.eventManager.addEventListener("elementsRemoved", this, false); } }, @@ -76,7 +72,7 @@ exports.Layout = Montage.create(Component, { }, // Redraw stage only once after all deletion is completed - handleDeleteSelection: { + handleElementsRemoved: { value: function(event) { this.draw(); this.draw3DInfo(false); @@ -110,10 +106,8 @@ exports.Layout = Montage.create(Component, { // Draw the non selected elements if(!event.detail.isDocument) { - var tmp = event.detail.elements.map(function(element){ return element._element}); - this.elementsToDraw = this.domTree.filter(function(value) { - return (tmp.indexOf(value) === -1); + return (event.detail.elements.indexOf(value) === -1); }); } else { this.elementsToDraw = Array.prototype.slice.call(this.domTree, 0); @@ -345,7 +339,11 @@ exports.Layout = Montage.create(Component, { _elementName: { value: function(item) { - return this.application.ninja.elementMediator.getNJProperty(item, "selection"); + if(item.elementModel && item.elementModel.hasOwnProperty("selection")) { + return item.elementModel['selection']; + } else { + return ""; + } } } diff --git a/js/stage/stage.reel/stage.js b/js/stage/stage.reel/stage.js index 00b72490..3500b6a3 100755 --- a/js/stage/stage.reel/stage.js +++ b/js/stage/stage.reel/stage.js @@ -560,8 +560,7 @@ exports.Stage = Montage.create(Component, { elt = this.application.ninja.currentDocument.GetElementFromPoint(point.x + this.scrollLeft,point.y + this.scrollTop); // workaround Chrome 3d bug - if(this.application.ninja.toolsData.selectedToolInstance._canSnap && this.application.ninja.currentDocument.inExclusion(elt) !== -1) - { + if(this.application.ninja.toolsData.selectedToolInstance._canSnap && this.application.ninja.currentDocument.inExclusion(elt) !== -1) { return this._getElementUsingSnapping(point); } else { return elt; @@ -605,7 +604,7 @@ exports.Stage = Montage.create(Component, { var selArray = new Array(); for(var i = 0; this.application.ninja.selectedElements[i];i++) { - var curElement = this.application.ninja.selectedElements[i]._element; + var curElement = this.application.ninja.selectedElements[i]; // Add element to array that is used to calculate 3d-bounding box of all elements selArray.push( curElement ); -- cgit v1.2.3