From 2154ace6bdc2abe55fae353849d3beb64b8ada25 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Thu, 24 May 2012 16:14:40 -0700 Subject: Don't loop through layout drawing code if layout view is off. Signed-off-by: Nivesh Rajbhandari --- js/stage/layout.js | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/js/stage/layout.js b/js/stage/layout.js index 460c8b4a..7b4ccc17 100755 --- a/js/stage/layout.js +++ b/js/stage/layout.js @@ -121,6 +121,10 @@ exports.Layout = Montage.create(Component, { value: function() { this.clearCanvas(); + // TODO Bind the layoutview mode to the current document + // var mode = this.application.ninja.currentDocument.layoutMode; + if(this.layoutView === "layoutOff") return; + var els = this.elementsToDraw.length; for(var i = 0, el; i < els; i++){ this.drawTagOutline(this.elementsToDraw[i]); @@ -154,11 +158,6 @@ exports.Layout = Montage.create(Component, { if(!item || !this.application.ninja.selectionController.isNodeTraversable(item)) return; - // TODO Bind the layoutview mode to the current document - // var mode = this.application.ninja.currentDocument.layoutMode; - - if(this.layoutView === "layoutOff") return; - // Don't draw outlines for shapes. // TODO Use the element mediator/controller/model to see if its a shape // if (utilsModule.utils.isElementAShape(item)) return; -- cgit v1.2.3 From fa50874d9ca03540dc5741fb51261ef2b56f89ea Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Fri, 25 May 2012 15:34:44 -0700 Subject: IKNinja-1491 - Adding slice value to border gradients. Note that using "circle cover" comes close to matching our canvas 2d/WebGL shape's stroke gradients, but still a little off. Signed-off-by: Nivesh Rajbhandari --- js/controllers/elements/element-controller.js | 23 +++++++++++++++++++++-- 1 file changed, 21 insertions(+), 2 deletions(-) diff --git a/js/controllers/elements/element-controller.js b/js/controllers/elements/element-controller.js index 20225c61..7bb07976 100755 --- a/js/controllers/elements/element-controller.js +++ b/js/controllers/elements/element-controller.js @@ -159,8 +159,6 @@ exports.ElementController = Montage.create(Component, { el.elementModel.stroke = null; return; case 'gradient': - this.setProperty(el, "border-image", color.color.css); - this.setProperty(el, "border-color", "none"); if(color.borderInfo) { if(color.borderInfo.borderWidth) { this.setProperty(el, "border-width", color.borderInfo.borderWidth + color.borderInfo.borderUnits); @@ -169,9 +167,11 @@ exports.ElementController = Montage.create(Component, { this.setProperty(el, "border-style", color.borderInfo.borderStyle); } } + this.setGradientBorder(el, color.color.gradientMode, color.color.css); break; default: this.setProperty(el, "border-image", "none"); + this.setProperty(el, "border-image-slice", ""); this.setProperty(el, "border-color", color.color.css); if(color.borderInfo) { if(color.borderInfo.borderWidth) { @@ -188,6 +188,25 @@ exports.ElementController = Montage.create(Component, { } }, + setGradientBorder: { + value: function(el, gradientMode, css) { + if(gradientMode === "radial") { + this.setProperty(el, "border-image", css.replace("ellipse", "circle")); + } else { + this.setProperty(el, "border-image", css); + } + this.setProperty(el, "border-color", "none"); + // gradient slice = borderWidth/totalWidth + var b = parseInt(this.getProperty(el, "border-left-width", true)), + w = parseInt(this.getProperty(el, "width", true)), + h = parseInt(this.getProperty(el, "height", true)); + if(h > w) { + w = h; + } + this.setProperty(el, "border-image-slice", Math.floor(b/(w+b+b) * 100) + "%"); + } + }, + getStroke: { value: function(el) { // TODO - Need to figure out which border side user wants -- cgit v1.2.3 From 42c2a480a3883389e47d4ec291dfb55d99cf4b7f Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Tue, 29 May 2012 10:26:19 -0700 Subject: Cache perspective distance lookup to speed up user interaction. Signed-off-by: Nivesh Rajbhandari --- js/controllers/styles-controller.js | 5 +++-- js/helper-classes/3D/view-utils.js | 15 ++++++--------- 2 files changed, 9 insertions(+), 11 deletions(-) diff --git a/js/controllers/styles-controller.js b/js/controllers/styles-controller.js index 534f77c7..e76e5a1b 100755 --- a/js/controllers/styles-controller.js +++ b/js/controllers/styles-controller.js @@ -1229,9 +1229,10 @@ var stylesController = exports.StylesController = Montage.create(Component, { } } if(isNaN(dist)) { - dist = null; + return "none"; + } else { + return dist; } - return dist; } }, diff --git a/js/helper-classes/3D/view-utils.js b/js/helper-classes/3D/view-utils.js index a3d09404..3c7ae6ff 100755 --- a/js/helper-classes/3D/view-utils.js +++ b/js/helper-classes/3D/view-utils.js @@ -195,7 +195,12 @@ exports.ViewUtils = Montage.create(Component, { getPerspectiveDistFromElement: { value: function( elt ) { - return ElementsMediator.getPerspectiveDist(elt); + var pDist = ElementsMediator.getPerspectiveDist(elt); + if(pDist === "none") { + return null; + } else { + return pDist; + } } }, @@ -1320,14 +1325,6 @@ exports.ViewUtils = Montage.create(Component, { } }, - getCurrentDocument: - { - value: function() - { - return snapManagerModule.SnapManager.application.ninja.currentDocument; - } - }, - setStageZoom: { value:function( globalPt, zoomFactor ) { var localPt; -- cgit v1.2.3 From 2fd6db5f46208a5aa8fa58d090f795e5b7eb99bb Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Tue, 29 May 2012 10:35:06 -0700 Subject: Sped up user-interaction by moving grid drawing into its own canvas so the layout code doesn't have to be run when modifying selected elements. Signed-off-by: Nivesh Rajbhandari --- js/helper-classes/3D/draw-utils.js | 7 +++---- js/helper-classes/3D/snap-manager.js | 5 ++--- js/stage/stage-deps.js | 2 -- js/stage/stage.reel/stage.html | 2 ++ js/stage/stage.reel/stage.js | 28 +++++++++++++++++++++++----- scss/imports/scss/_Stage.scss | 14 ++++++++++++-- 6 files changed, 42 insertions(+), 16 deletions(-) diff --git a/js/helper-classes/3D/draw-utils.js b/js/helper-classes/3D/draw-utils.js index 871b832d..75aa308c 100755 --- a/js/helper-classes/3D/draw-utils.js +++ b/js/helper-classes/3D/draw-utils.js @@ -126,7 +126,7 @@ var DrawUtils = exports.DrawUtils = Montage.create(Component, { //initialize with current document this._eltArray = []; this._planesArray = []; - this.setDrawingSurfaceElement(stage.canvas); + this.setDrawingSurfaceElement(stage.gridCanvas); this.setSourceSpaceElement( this.application.ninja.currentDocument.model.documentRoot); this.setWorkingPlane( [0,0,1,0] ); @@ -307,7 +307,6 @@ var DrawUtils = exports.DrawUtils = Montage.create(Component, { } if(!changed) { - stage.layout.draw(); this.drawWorkingPlane(); this.draw3DCompass(); } @@ -631,8 +630,8 @@ var DrawUtils = exports.DrawUtils = Montage.create(Component, { if (!this.isDrawingGrid()) return; var saveContext = this.getDrawingSurfaceElement(); - //this.setDrawingSurfaceElement(window.stageManager.layoutCanvas); - this.setDrawingSurfaceElement(this.application.ninja.stage.layoutCanvas); + this.setDrawingSurfaceElement(this.application.ninja.stage.gridCanvas); + this.clear(); // 3 coordinate axes for the plane var zAxis = [this._workingPlane[0], this._workingPlane[1], this._workingPlane[2]]; diff --git a/js/helper-classes/3D/snap-manager.js b/js/helper-classes/3D/snap-manager.js index 069c6022..4dcda24a 100755 --- a/js/helper-classes/3D/snap-manager.js +++ b/js/helper-classes/3D/snap-manager.js @@ -21,8 +21,7 @@ var SnapManager = exports.SnapManager = Montage.create(Component, { /////////////////////////////////////////////////////////////////////// // Instance variables /////////////////////////////////////////////////////////////////////// - drawingCanvas: { value: null, writable: true}, - + // we keep a stack of working planes to facilitate working on other planes temporarily _workingPlaneStack : { value: [], writable: true }, @@ -2124,7 +2123,7 @@ var SnapManager = exports.SnapManager = Montage.create(Component, { if (hitRec) { var saveContext = drawUtils.getDrawingSurfaceElement(); - drawUtils.setDrawingSurfaceElement(this.drawingCanvas); + drawUtils.setDrawingSurfaceElement(this.application.ninja.stage.drawingCanvas); var context = drawUtils.getDrawingContext(); if (context) { diff --git a/js/stage/stage-deps.js b/js/stage/stage-deps.js index 896d4a5b..2469ba79 100755 --- a/js/stage/stage-deps.js +++ b/js/stage/stage-deps.js @@ -37,8 +37,6 @@ exports.StageDeps = Montage.create(Component, { window.MathUtils = MathUtilsClass; window.VecUtils = VecUtils; - snapManager.drawingCanvas = this.stage.drawingCanvas; - // Setup the listeners for the draw-util and snapmanager when removing elements // TODO Revisit when supporting multiple documents drawUtils.initialize(); diff --git a/js/stage/stage.reel/stage.html b/js/stage/stage.reel/stage.html index 30c3d231..a819fc79 100755 --- a/js/stage/stage.reel/stage.html +++ b/js/stage/stage.reel/stage.html @@ -57,6 +57,7 @@ "element": {"#": "stageAndScenesContainer"}, "_iframeContainer": {"#": "iframeContainer"}, "_layoutCanvas": {"#": "layoutCanvas"}, + "_gridCanvas": {"#": "gridCanvas"}, "_canvas": {"#": "stageCanvas"}, "_drawingCanvas": {"#": "drawingCanvas"}, "stageDeps": {"@": "StageDeps1"}, @@ -83,6 +84,7 @@
+ diff --git a/js/stage/stage.reel/stage.js b/js/stage/stage.reel/stage.js index c7afb95c..d8684739 100755 --- a/js/stage/stage.reel/stage.js +++ b/js/stage/stage.reel/stage.js @@ -97,6 +97,12 @@ exports.Stage = Montage.create(Component, { _layoutCanvas: { value: null }, layoutCanvas: { get: function() { return this._layoutCanvas; } }, + _gridCanvas: { value: null }, + gridCanvas: { get: function() { return this._gridCanvas; } }, + + _gridContext: { value: null }, + gridContext: { get: function() { return this._gridContext; } }, + _drawingCanvas: { value: null }, drawingCanvas: { get: function() { return this._drawingCanvas; } }, @@ -207,11 +213,14 @@ exports.Stage = Montage.create(Component, { value: function() { if(this.resizeCanvases) { // TODO GET THE SCROLL SIZE FROM THE CSS -- 11 px - 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;// - 26 - 26; + this._canvas.width = this._layoutCanvas.width = this._drawingCanvas.width = this._gridCanvas.width = this.element.offsetWidth - 11 ; + this._canvas.height = this._layoutCanvas.height = this._drawingCanvas.height = this._gridCanvas.height = this.element.offsetHeight - 11;// - 26 - 26; // Hack for now until a full component this.layout.draw(); + if(this.application.ninja.currentDocument) { + this.layout.draw3DInfo(true); + } } else if(this.updatedStage) { this.layout.draw(); this.layout.draw3DInfo(true); @@ -231,6 +240,7 @@ exports.Stage = Montage.create(Component, { this._context = this._canvas.getContext("2d"); this._drawingContext= this._drawingCanvas.getContext("2d"); + this._gridContext= this._gridCanvas.getContext("2d"); // Setup event listeners this._drawingCanvas.addEventListener("mousedown", this, false); @@ -276,8 +286,8 @@ 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._canvas.width = this._layoutCanvas.width = this._drawingCanvas.width = this._gridCanvas.width = this.element.offsetWidth - 11 ; + this._canvas.height = this._layoutCanvas.height = this._drawingCanvas.height = this._gridCanvas.height = this.element.offsetHeight - 11; designView.iframe.contentWindow.addEventListener("scroll", this, false); @@ -519,11 +529,12 @@ exports.Stage = Montage.create(Component, { this._canvas.style.visibility = "hidden"; this._layoutCanvas.style.visibility = "hidden"; this._drawingCanvas.style.visibility = "hidden"; + this._gridCanvas.style.visibility = "hidden"; } else { this._canvas.style.visibility = "visible"; this._layoutCanvas.style.visibility = "visible"; this._drawingCanvas.style.visibility = "visible"; - + this._gridCanvas.style.visibility = "visible"; } } }, @@ -560,10 +571,17 @@ exports.Stage = Montage.create(Component, { } }, + clearGridCanvas: { + value: function() { + this._gridContext.clearRect(0, 0, this._gridCanvas.width, this._gridCanvas.height); + } + }, + clearAllCanvas: { value: function() { this._drawingContext.clearRect(0, 0, this._drawingCanvas.width, this._drawingCanvas.height); this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); + this._gridContext.clearRect(0, 0, this._gridCanvas.width, this._gridCanvas.height); this.layout.clearCanvas(); } }, diff --git a/scss/imports/scss/_Stage.scss b/scss/imports/scss/_Stage.scss index ed8d0656..39a98d82 100644 --- a/scss/imports/scss/_Stage.scss +++ b/scss/imports/scss/_Stage.scss @@ -140,7 +140,7 @@ padding: 0px; top: 0px; left: 0px; - z-index: 6; + z-index: 7; } @@ -151,10 +151,20 @@ padding: 0px; top: 0px; left: 0px; - z-index: 5; + z-index: 6; } .layoutCanvas { + position: absolute; + margin: 0px; + border: none; + padding: 0px; + top: 0px; + left: 0px; + z-index: 5; +} + +.gridCanvas { position: absolute; margin: 0px; border: none; -- cgit v1.2.3 From 961830a1ab076db70577df735f43cae5e8559e83 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Tue, 29 May 2012 14:55:19 -0700 Subject: Moving layout and stageDeps' handleOpenDocument into stage. Signed-off-by: Nivesh Rajbhandari --- js/helper-classes/3D/draw-utils.js | 2 +- js/stage/layout.js | 3 +-- js/stage/stage-deps.js | 24 +----------------------- js/stage/stage.reel/stage.js | 15 +++++++++++++-- 4 files changed, 16 insertions(+), 28 deletions(-) diff --git a/js/helper-classes/3D/draw-utils.js b/js/helper-classes/3D/draw-utils.js index 75aa308c..9e9a2241 100755 --- a/js/helper-classes/3D/draw-utils.js +++ b/js/helper-classes/3D/draw-utils.js @@ -627,11 +627,11 @@ var DrawUtils = exports.DrawUtils = Montage.create(Component, { { value: function () { + this.application.ninja.stage.clearGridCanvas(); if (!this.isDrawingGrid()) return; var saveContext = this.getDrawingSurfaceElement(); this.setDrawingSurfaceElement(this.application.ninja.stage.gridCanvas); - this.clear(); // 3 coordinate axes for the plane var zAxis = [this._workingPlane[0], this._workingPlane[1], this._workingPlane[2]]; diff --git a/js/stage/layout.js b/js/stage/layout.js index 7b4ccc17..4eecd4d5 100755 --- a/js/stage/layout.js +++ b/js/stage/layout.js @@ -140,9 +140,8 @@ exports.Layout = Montage.create(Component, { if(this.stage.appModel.show3dGrid) { this.application.ninja.stage.stageDeps.snapManager.updateWorkingPlaneFromView(); - drawUtils.drawWorkingPlane(); } - + drawUtils.drawWorkingPlane(); drawUtils.draw3DCompass(); } }, diff --git a/js/stage/stage-deps.js b/js/stage/stage-deps.js index 2469ba79..b45315b7 100755 --- a/js/stage/stage-deps.js +++ b/js/stage/stage-deps.js @@ -55,28 +55,6 @@ exports.StageDeps = Montage.create(Component, { drawUtils.snapManager = snapManager; drawUtils.ElementPlanes = ElementPlanes; } - }, - - handleOpenDocument: { - value: function() { - - workingPlane = [0,0,1,0]; - - snapManager._isCacheInvalid = true; - snapManager.setupDragPlaneFromPlane (workingPlane); - - drawUtils.initializeFromDocument(); - } - }, - - handleSwitchDocument: { - value: function(){ - workingPlane = [0,0,1,0]; - - snapManager._isCacheInvalid = true; - snapManager.setupDragPlaneFromPlane (workingPlane); - - drawUtils.initializeFromDocument(); - } } + }); \ No newline at end of file diff --git a/js/stage/stage.reel/stage.js b/js/stage/stage.reel/stage.js index d8684739..44d6eadb 100755 --- a/js/stage/stage.reel/stage.js +++ b/js/stage/stage.reel/stage.js @@ -305,8 +305,7 @@ exports.Stage = Montage.create(Component, { this._scrollLeft = 0; this._scrollTop = 0; - this.stageDeps.handleOpenDocument(); - this.layout.handleOpenDocument(); + this.initialize3DOnOpenDocument(); if(designView._template) { var initialLeft = parseInt((this.canvas.width - designView._template.size.width)/2); @@ -1079,6 +1078,18 @@ exports.Stage = Montage.create(Component, { this.application.ninja.toolsSplitter.restore(); this.application.ninja.optionsSplitter.restore(); } + }, + + initialize3DOnOpenDocument: { + value: function() { + + workingPlane = [0,0,1,0]; + + this.snapManager._isCacheInvalid = true; + this.snapManager.setupDragPlaneFromPlane (workingPlane); + + this.drawUtils.initializeFromDocument(); + } } }); \ No newline at end of file -- cgit v1.2.3 From 820005437e7270e72b865a3436d7148e1dd19900 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Tue, 29 May 2012 15:42:24 -0700 Subject: Fixed bug with scrolling too much when moving objects in negative space. Signed-off-by: Nivesh Rajbhandari --- js/helper-classes/3D/draw-utils.js | 4 ++-- js/stage/stage.reel/stage.js | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/js/helper-classes/3D/draw-utils.js b/js/helper-classes/3D/draw-utils.js index 9e9a2241..c98ad8bc 100755 --- a/js/helper-classes/3D/draw-utils.js +++ b/js/helper-classes/3D/draw-utils.js @@ -276,8 +276,8 @@ var DrawUtils = exports.DrawUtils = Montage.create(Component, { stage = this.application.ninja.stage, minLeft = stage.userPaddingLeft, minTop = stage.userPaddingTop, - docLeft = stage.documentOffsetLeft, - docTop = stage.documentOffsetTop, + docLeft = stage.userContentLeft, + docTop = stage.userContentTop, l, t, plane, diff --git a/js/stage/stage.reel/stage.js b/js/stage/stage.reel/stage.js index 44d6eadb..7025c692 100755 --- a/js/stage/stage.reel/stage.js +++ b/js/stage/stage.reel/stage.js @@ -193,7 +193,7 @@ exports.Stage = Montage.create(Component, { this._userPaddingLeft = value; this._documentOffsetLeft = -value; this.application.ninja.currentDocument.model.documentRoot.ownerDocument.getElementsByTagName("HTML")[0].style["padding-left"] = -value + "px"; - this.userContentLeft = this._documentOffsetLeft; + this.userContentLeft = this._documentOffsetLeft - this._scrollLeft; this.updatedStage = true; } }, @@ -204,7 +204,7 @@ exports.Stage = Montage.create(Component, { this._userPaddingTop = value; this._documentOffsetTop = -value; this.application.ninja.currentDocument.model.documentRoot.ownerDocument.getElementsByTagName("HTML")[0].style["padding-top"] = -value + "px"; - this.userContentTop = this._documentOffsetTop; + this.userContentTop = this._documentOffsetTop - this._scrollTop; this.updatedStage = true; } }, -- cgit v1.2.3 From d4f2df2a7b3ec79fc54e17f09195dbc37331f051 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Wed, 30 May 2012 09:55:33 -0700 Subject: Fix for snap-align not working correctly after resizing the stage. Signed-off-by: Nivesh Rajbhandari --- js/stage/layout.js | 1 + 1 file changed, 1 insertion(+) diff --git a/js/stage/layout.js b/js/stage/layout.js index 4eecd4d5..7b6e47e7 100755 --- a/js/stage/layout.js +++ b/js/stage/layout.js @@ -136,6 +136,7 @@ exports.Layout = Montage.create(Component, { value: function(updatePlanes) { if(updatePlanes) { drawUtils.updatePlanes(); + this.application.ninja.stage.stageDeps.snapManager._isCacheInvalid = true; } if(this.stage.appModel.show3dGrid) { -- cgit v1.2.3