From aa8cfcfe0091651708f77300f48a7e703f92f341 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Mon, 7 May 2012 15:41:40 -0700 Subject: Adding back currentView property in document-html so that menus work. Signed-off-by: Nivesh Rajbhandari --- js/document/document-html.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/js/document/document-html.js b/js/document/document-html.js index 79fe461b..d0f5b817 100755 --- a/js/document/document-html.js +++ b/js/document/document-html.js @@ -81,6 +81,7 @@ exports.HtmlDocument = Montage.create(Component, { } // if (view === 'design') { + this.currentView = "design"; //Showing design iFrame this.model.views.design.show(); this.model.views.design.iframe.style.opacity = 0; @@ -118,8 +119,6 @@ exports.HtmlDocument = Montage.create(Component, { this.loaded.callback.call(this.loaded.context, this); //Setting opacity to be viewable after load this.model.views.design.iframe.style.opacity = 1; - //TODO: Remove, this is a temp hard-coded hack - this.application.ninja.appModel.show3dGrid = true; } } //////////////////////////////////////////////////////////////////// -- cgit v1.2.3 From c51a1317a767dcd5dfded822815305d4330f4892 Mon Sep 17 00:00:00 2001 From: Ananya Sen Date: Mon, 7 May 2012 15:43:24 -0700 Subject: removed incorrect id selector css for code view container since its breaking it. Signed-off-by: Ananya Sen --- css/ninja.css | 8 -------- js/stage/stage-view.reel/stage-view.css | 29 ++++++++++------------------- scss/imports/scss/_Stage.scss | 27 --------------------------- 3 files changed, 10 insertions(+), 54 deletions(-) diff --git a/css/ninja.css b/css/ninja.css index 6a804e99..cd7a35ab 100755 --- a/css/ninja.css +++ b/css/ninja.css @@ -204,14 +204,6 @@ body { position: absolute; margin: 0px; width: 100%; height: 100%; background-co .layoutCanvas { position: absolute; margin: 0px; border: none; padding: 0px; top: 0px; left: 0px; z-index: 4; } -#codeViewContainer { position: absolute; top: 0px; left: 0px; margin: 0px; padding: 0px; background: black; width: 100%; height: 100%; display: none; } - -#mainContent #codeMirror_1 { height: 100%; } - -#mainContent .CodeMirror { width: 100%; height: 100%; background: white; } - -#mainContent .CodeMirror-scroll { height: 100%; overflow: auto; } - .montage-editor-frame { position: absolute; z-index: 7; top: 0; left: 0; display: none; -webkit-user-select: initial; } .montage-editor { padding: 0px; word-wrap: normal; } diff --git a/js/stage/stage-view.reel/stage-view.css b/js/stage/stage-view.reel/stage-view.css index e2c4bb0e..8afb52a2 100755 --- a/js/stage/stage-view.reel/stage-view.css +++ b/js/stage/stage-view.reel/stage-view.css @@ -17,29 +17,20 @@ cursor:text; } -.codeViewContainer>div{ - width:2500px;/*to prevent scrolling of editor container in the middle of the page for short files*/ +.codeViewContainer .CodeMirror { + width: 100%; + height: 100%; + background: white; } -/* OLD CSS for reference -#mainContent #codeMirror_1 { - height:100%; +.codeViewContainer .CodeMirror-scroll { + height: 100%; + overflow: auto; } -*/ - -/*.CodeMirror {*/ - /*width: 100%;*/ - /*height: 100%;*/ - /*background: white;*/ -/*}*/ - -/*.CodeMirror .CodeMirror-scroll {*/ - /*height: 100%;*/ - /*overflow: scroll;*/ - /*overflow-x: auto;*/ - /*overflow-y: auto;*/ -/*}*/ +.codeViewContainer>div{ + width:2500px;/*to prevent scrolling of editor container in the middle of the page for short files*/ +} span.CodeMirror-matchhighlight { background: #e9e9e9 } .CodeMirror-focused span.CodeMirror-matchhighlight { background: #e7e4ff; !important } diff --git a/scss/imports/scss/_Stage.scss b/scss/imports/scss/_Stage.scss index 4644e3ba..ed8d0656 100644 --- a/scss/imports/scss/_Stage.scss +++ b/scss/imports/scss/_Stage.scss @@ -164,33 +164,6 @@ z-index: 4; } -#codeViewContainer { - position: absolute; - top: 0px; - left: 0px; - margin: 0px; - padding: 0px; - background: $color-app-bg; - width:100%; - height:100%; - display:none; -} - -#mainContent #codeMirror_1 { - height:100%; -} - -#mainContent .CodeMirror { - width: 100%; - height: 100%; - background: white; -} - -#mainContent .CodeMirror-scroll { - height: 100%; - overflow: auto; -} - .montage-editor-frame { position:absolute; z-index:7; -- cgit v1.2.3 From a00be41613cb952470cc952aa63f67e61745379a Mon Sep 17 00:00:00 2001 From: Ananya Sen Date: Mon, 7 May 2012 17:19:19 -0700 Subject: fixed javascript errors Signed-off-by: Ananya Sen --- js/controllers/document-controller.js | 4 ---- js/controllers/styles-controller.js | 2 +- 2 files changed, 1 insertion(+), 5 deletions(-) diff --git a/js/controllers/document-controller.js b/js/controllers/document-controller.js index 6d11bd0e..c6bf4c6b 100755 --- a/js/controllers/document-controller.js +++ b/js/controllers/document-controller.js @@ -427,10 +427,6 @@ var DocumentController = exports.DocumentController = Montage.create(Component, closeDocument: { value: function(id) { - if(this.activeDocument.needsSave === true){ - //if file dirty then alert user to save - } - var doc = this._findDocumentByUUID(id); var closeDocumentIndex = this._findIndexByUUID(id); diff --git a/js/controllers/styles-controller.js b/js/controllers/styles-controller.js index ec4314f9..647c0870 100755 --- a/js/controllers/styles-controller.js +++ b/js/controllers/styles-controller.js @@ -1102,7 +1102,7 @@ var stylesController = exports.StylesController = Montage.create(Component, { ///// The dominant rule might not have the style property defined - why? ///// If no rules have the property defined, we can use the ///// most-specific single-target rule as the dominant rule (for setting styles) - return element.ownerDocument.defaultView.getComputedStyle(element).getPropertyValue(property); + return (element.ownerDocument.defaultView ? element.ownerDocument.defaultView.getComputedStyle(element).getPropertyValue(property) : null); } return value; -- cgit v1.2.3 From 4baed156932f5875755532939a411953fa41c59d Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Tue, 8 May 2012 09:43:32 -0700 Subject: Stage should update scroll offsets when scrolled. Note that this is not always correct because we don't get a scroll end event. Updating Pan Tool to update scroll bars. Signed-off-by: Nivesh Rajbhandari --- js/stage/stage.reel/stage.js | 15 ++++++++-- js/tools/PanTool.js | 66 +++++++++++++++++++++++++++++++------------- 2 files changed, 60 insertions(+), 21 deletions(-) diff --git a/js/stage/stage.reel/stage.js b/js/stage/stage.reel/stage.js index 171c4f36..1f661513 100755 --- a/js/stage/stage.reel/stage.js +++ b/js/stage/stage.reel/stage.js @@ -118,6 +118,9 @@ exports.Stage = Montage.create(Component, { _userContentTop: { value: 0 }, _userContentBorder: { value: 0 }, + _maxHorizontalScroll: { value: 0 }, + _maxVerticalScroll: { value: 0 }, + documentRoot: { get: function () { return this._documentRoot; }, set: function(value) { this._documentRoot = value; } @@ -264,7 +267,9 @@ exports.Stage = Montage.create(Component, { this._userContentLeft = 0; this._userContentTop = 0; - //this.application.ninja.currentDocument._window.addEventListener("scroll", this, false); + this._maxHorizontalScroll = this._documentRoot.scrollWidth - this._canvas.width - 11; + this._maxVerticalScroll = this._documentRoot.scrollHeight - this._canvas.height - 11; + this.application.ninja.currentDocument.model.views.design.iframe.contentWindow.addEventListener("scroll", this, false); } @@ -464,6 +469,12 @@ exports.Stage = Montage.create(Component, { this.userContentLeft = -this._scrollLeft; this.userContentTop = -this._scrollTop; + + // TODO - scroll events are not dependable. We may need to use a timer to simulate + // scrollBegin and scrollEnd. For now, the Pan Tool will keep track of the stage's scroll values + // on mouse down. +// this._maxHorizontalScroll = this._documentRoot.scrollWidth - this._canvas.width - 11; +// this._maxVerticalScroll = this._documentRoot.scrollHeight - this._canvas.height - 11; } // Need to clear the snap cache and set up the drag plane @@ -543,7 +554,7 @@ exports.Stage = Montage.create(Component, { var point, element; point = webkitConvertPointFromPageToNode(this.canvas, new WebKitPoint(position.pageX, position.pageY)); - element = this.application.ninja.currentDocument.model.views.design.getElementFromPoint(point.x + this.scrollLeft,point.y + this.scrollTop); + element = this.application.ninja.currentDocument.model.views.design.getElementFromPoint(point.x + this.userContentLeft,point.y + this.userContentTop); // workaround Chrome 3d bug if(this.application.ninja.toolsData.selectedToolInstance._canSnap && this.application.ninja.currentDocument.inExclusion(element) !== -1) { diff --git a/js/tools/PanTool.js b/js/tools/PanTool.js index ce7606a1..132ac0b1 100755 --- a/js/tools/PanTool.js +++ b/js/tools/PanTool.js @@ -21,6 +21,9 @@ exports.PanTool = Montage.create(toolBase, _lastGPt :{value: [0,0], writable:true}, _lastY :{value: 0, writable:true}, + _maxHorizontalScroll: {value: 0, writable:true}, + _maxVerticalScroll: {value: 0, writable:true}, + Configure: { value: function ( doActivate ) { @@ -43,10 +46,19 @@ exports.PanTool = Montage.create(toolBase, HandleLeftButtonDown: { value : function ( event ) { - this._isDrawing = true; - this.isDrawing = true; - - this.mouseDown( event ); + // Determine the maximum horizontal and vertical scroll values + this._maxHorizontalScroll = this.application.ninja.currentDocument.documentRoot.scrollWidth - this.application.ninja.stage._canvas.width - 11; + this._maxVerticalScroll = this.application.ninja.currentDocument.documentRoot.scrollHeight - this.application.ninja.stage._canvas.height - 11; + if((this._maxHorizontalScroll > 0) || (this._maxVerticalScroll > 0) || this._altKeyDown) + { + this._isDrawing = true; + this.isDrawing = true; + this.mouseDown( event ); + } +// else +// { +// console.log("nothing to scroll"); +// } } }, @@ -136,8 +148,8 @@ exports.PanTool = Montage.create(toolBase, delta = 10*event.wheelDelta/120; //console.log( "delta: " + delta ); - this.application.ninja.stage._iframeContainer.scrollLeft += delta; - this.application.ninja.stage._scrollLeft += delta; + this.application.ninja.currentDocument.documentRoot.scrollLeft += delta; +// this.application.ninja.stage._scrollLeft += delta; delta *= zoom; @@ -291,17 +303,19 @@ exports.PanTool = Montage.create(toolBase, if (this._isDrawing) { // get the global screen point - var gPt = [point.x, point.y, this._globalPt[2]]; + var gPt = [point.x, point.y, this._globalPt[2]], + dx, + dy; if (this._altKeyDown) { - var dy = 5*(point.y - this._lastY); + dy = 5*(point.y - this._lastY); this._globalPt[2] += dy; gPt = [this._lastGPt[0], this._lastGPt[1], this._globalPt[2]]; } else if (this._shiftKeyDown) { - var dx = Math.abs( this._shiftPt[0] - gPt[0] ), - dy = Math.abs( this._shiftPt[1] - gPt[1] ); + dx = Math.abs( this._shiftPt[0] - gPt[0] ); + dy = Math.abs( this._shiftPt[1] - gPt[1] ); if (dx >= dy) gPt[1] = this._shiftPt[1]; @@ -310,16 +324,28 @@ exports.PanTool = Montage.create(toolBase, } // update the scrollbars - var deltaGPt = VecUtils.vecSubtract(2, gPt, this._lastGPt); + var deltaGPt = vecUtils.vecSubtract(2, gPt, this._lastGPt); this._lastGPt = gPt.slice(); this._lastY = point.y; - - var oldLeft = this.application.ninja.stage._iframeContainer.scrollLeft, - oldTop = this.application.ninja.stage._iframeContainer.scrollTop; - this.application.ninja.stage._iframeContainer.scrollLeft -= deltaGPt[0]; - this.application.ninja.stage._iframeContainer.scrollTop -= deltaGPt[1]; - deltaGPt[0] = oldLeft - this.application.ninja.stage._iframeContainer.scrollLeft; - deltaGPt[1] = oldTop - this.application.ninja.stage._iframeContainer.scrollTop; + var limitX = false; + var limitY = false; + + var oldLeft = this.application.ninja.currentDocument.documentRoot.scrollLeft, + oldTop = this.application.ninja.currentDocument.documentRoot.scrollTop, + newLeft = oldLeft - deltaGPt[0], + newTop = oldTop - deltaGPt[1]; + if((newLeft < 0) || (newLeft > this._maxHorizontalScroll)) + { + limitX = true; + } + if((newTop < 0) || (newTop > this._maxVerticalScroll)) + { + limitY = true; + } + this.application.ninja.currentDocument.documentRoot.scrollLeft -= deltaGPt[0]; + this.application.ninja.currentDocument.documentRoot.scrollTop -= deltaGPt[1]; + deltaGPt[0] = oldLeft - this.application.ninja.currentDocument.documentRoot.scrollLeft; + deltaGPt[1] = oldTop - this.application.ninja.currentDocument.documentRoot.scrollTop; gPt[0] -= deltaGPt[0]; gPt[1] -= deltaGPt[1]; @@ -334,7 +360,7 @@ exports.PanTool = Montage.create(toolBase, // limit the change var ucMat = viewUtils.getMatrixFromElement(this.application.ninja.currentDocument.documentRoot); - var tooMuch = false + var tooMuch = false; if ((ucMat[12] > 12000) && (delta[0] > 0)) tooMuch = true; if ((ucMat[12] < -12000) && (delta[0] < 0)) tooMuch = true; if ((ucMat[13] > 12000) && (delta[1] > 0)) tooMuch = true; @@ -349,6 +375,8 @@ exports.PanTool = Montage.create(toolBase, else this._worldPt = wPt; + if(limitX) delta[0] = 0; + if(limitY) delta[1] = 0; // update everything var transMat = Matrix.Translation( delta ); this.applyDeltaMat( transMat ); -- cgit v1.2.3 From 157632ce32b4e71e1f08278cf712ff4f2c835226 Mon Sep 17 00:00:00 2001 From: Ananya Sen Date: Tue, 8 May 2012 10:23:51 -0700 Subject: IKNINJA-1603 Uncaught TypeError: Cannot read property 'documentRoot' of null js/components/layout/bread-crumb.reel/bread-crumb.js:26 Signed-off-by: Ananya Sen --- js/components/layout/bread-crumb.reel/bread-crumb.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/components/layout/bread-crumb.reel/bread-crumb.js b/js/components/layout/bread-crumb.reel/bread-crumb.js index e396bdbf..c1b021a3 100755 --- a/js/components/layout/bread-crumb.reel/bread-crumb.js +++ b/js/components/layout/bread-crumb.reel/bread-crumb.js @@ -23,7 +23,7 @@ exports.Breadcrumb = Montage.create(Component, { value: function(){ if(!this.application.ninja.documentController.activeDocument) { this.disabled = true; - this.application.ninja.currentSelectedContainer = this.application.ninja.currentDocument.documentRoot; + this.application.ninja.currentSelectedContainer = (this.application.ninja.currentDocument ? this.application.ninja.currentDocument.documentRoot : null); } } }, -- cgit v1.2.3 From c79814664f3002613b3f12106edffc64932fa4ac Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Tue, 8 May 2012 16:27:50 -0700 Subject: Get clicked element when body is scrolled. Signed-off-by: Nivesh Rajbhandari --- js/document/templates/montage-web/index.html | 5 +++++ js/stage/stage.reel/stage.js | 11 +++++++---- 2 files changed, 12 insertions(+), 4 deletions(-) diff --git a/js/document/templates/montage-web/index.html b/js/document/templates/montage-web/index.html index 47964ae4..6bd5ce7a 100755 --- a/js/document/templates/montage-web/index.html +++ b/js/document/templates/montage-web/index.html @@ -26,6 +26,11 @@ -webkit-transform: perspective(1400) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } + html { + overflow: scroll; + padding: 0 11px 11px 0; + } + html, body { width: 100%; height: 100%; diff --git a/js/stage/stage.reel/stage.js b/js/stage/stage.reel/stage.js index 1f661513..dc6444ff 100755 --- a/js/stage/stage.reel/stage.js +++ b/js/stage/stage.reel/stage.js @@ -551,13 +551,16 @@ exports.Stage = Montage.create(Component, { */ getElement: { value: function(position, selectable) { - var point, element; + var point, element, + docView = this.application.ninja.currentDocument.model.views.design; - point = webkitConvertPointFromPageToNode(this.canvas, new WebKitPoint(position.pageX, position.pageY)); - element = this.application.ninja.currentDocument.model.views.design.getElementFromPoint(point.x + this.userContentLeft,point.y + this.userContentTop); + point = webkitConvertPointFromPageToNode(this.canvas, new WebKitPoint(position.pageX - docView.iframe.contentWindow.pageXOffset, position.pageY - docView.iframe.contentWindow.pageYOffset)); + element = this.application.ninja.currentDocument.model.views.design.getElementFromPoint(point.x - this.userContentLeft,point.y - this.userContentTop); + if(!element) debugger; // workaround Chrome 3d bug if(this.application.ninja.toolsData.selectedToolInstance._canSnap && this.application.ninja.currentDocument.inExclusion(element) !== -1) { + point = webkitConvertPointFromPageToNode(this.canvas, new WebKitPoint(position.pageX, position.pageY)); element = this.getElementUsingSnapping(point); } @@ -888,7 +891,7 @@ exports.Stage = Montage.create(Component, { //TODO - Maybe move to mediator. var newVal = value/100.0; if (newVal >= 1) - this.application.ninja.currentDocument.iframe.style.zoom = value/100; + this.application.ninja.currentDocument.model.views.design.iframe.style.zoom = value/100; this.updatedStage = true; -- cgit v1.2.3