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 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 4504972c1f3b9bf1d02a4484a07a8a85cf9ccee2 Mon Sep 17 00:00:00 2001 From: Jose Antonio Marquez Date: Tue, 8 May 2012 10:37:38 -0700 Subject: Adding Chrome Preview --- js/controllers/document-controller.js | 4 +++- js/document/models/base.js | 11 ++++++++--- js/document/views/design.js | 2 +- js/ninja.reel/ninja.js | 9 +++++++-- 4 files changed, 19 insertions(+), 7 deletions(-) diff --git a/js/controllers/document-controller.js b/js/controllers/document-controller.js index 803519a7..6a25420a 100755 --- a/js/controllers/document-controller.js +++ b/js/controllers/document-controller.js @@ -88,7 +88,8 @@ var DocumentController = exports.DocumentController = Montage.create(Component, - + //TODO: Ensure these APIs are not needed + /* //////////////////////////////////////////////////////////////////// // handleWebRequest: { @@ -119,6 +120,7 @@ var DocumentController = exports.DocumentController = Montage.create(Component, } }, //////////////////////////////////////////////////////////////////// +*/ diff --git a/js/document/models/base.js b/js/document/models/base.js index 746922ad..5667fb24 100755 --- a/js/document/models/base.js +++ b/js/document/models/base.js @@ -68,19 +68,24 @@ exports.BaseDocumentModel = Montage.create(Component, { //////////////////////////////////////////////////////////////////// // switchViewTo: { - value: function () { + value: function (view) { // } }, //////////////////////////////////////////////////////////////////// - // + //TODO: Add API to allow other browser support browserPreview: { value: function (browser) { - // + + //TODO: Add file save before previewing + + //Currently only supporting current browser (Chrome, obviously) switch (browser) { case 'chrome': + window.open(this.application.ninja.coreIoApi.rootUrl + this.file.uri.split(this.application.ninja.coreIoApi.cloudData.root)[1]); break; default: + window.open(this.application.ninja.coreIoApi.rootUrl + this.file.uri.split(this.application.ninja.coreIoApi.cloudData.root)[1]); break; } } diff --git a/js/document/views/design.js b/js/document/views/design.js index b23ebe78..df6e9b53 100755 --- a/js/document/views/design.js +++ b/js/document/views/design.js @@ -230,7 +230,7 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, { initWebGl: { value: function (scripttags) { // - var i, n, webgldata; + var n, webgldata; //Setting the iFrame property for reference in helper class this.model.webGlHelper.iframe = this.model.views.design.iframe; //Checking for webGL Data diff --git a/js/ninja.reel/ninja.js b/js/ninja.reel/ninja.js index edc1efa4..4d7d883d 100755 --- a/js/ninja.reel/ninja.js +++ b/js/ninja.reel/ninja.js @@ -173,12 +173,17 @@ exports.Ninja = Montage.create(Component, { } }, + + //////////////////////////////////////////////////////////////////// + //TODO: Expand method to allow other browsers for preview executeChromePreview: { value: function () { - this.application.ninja.documentController.activeDocument.livePreview(); + this.application.ninja.documentController.activeDocument.model.browserPreview('chrome'); } }, - + //////////////////////////////////////////////////////////////////// + + handleResize: { value: function() { this.stage.resizeCanvases = true; -- 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 From a1e8540f5656e62db6a89f3af7829be6b259b7ed Mon Sep 17 00:00:00 2001 From: Jose Antonio Marquez Date: Tue, 8 May 2012 17:33:13 -0700 Subject: Adding SAVE for I/O Adding save functionality to new template. Need to implement user UI for prompts and also clean up... --- js/controllers/document-controller.js | 29 +++++--- js/document/models/base.js | 102 ++++++++++++++++++++++----- js/document/templates/montage-web/index.html | 17 +++-- js/document/views/design.js | 7 ++ js/io/templates/files/html.txt | 1 + js/mediators/io-mediator.js | 89 +++++++++++++---------- 6 files changed, 178 insertions(+), 67 deletions(-) diff --git a/js/controllers/document-controller.js b/js/controllers/document-controller.js index 6a25420a..ed4d33eb 100755 --- a/js/controllers/document-controller.js +++ b/js/controllers/document-controller.js @@ -166,23 +166,34 @@ var DocumentController = exports.DocumentController = Montage.create(Component, } }, //////////////////////////////////////////////////////////////////// - //TODO: Check for appropiate structures + // handleExecuteSave: { value: function(event) { - if((typeof this.activeDocument !== "undefined") && this.application.ninja.coreIoApi.cloudAvailable()){ - //Text and HTML document classes should return the same save object for fileSave - this.application.ninja.ioMediator.fileSave(this.activeDocument.save(), this.fileSaveResult.bind(this)); - } + // + if((typeof this.activeDocument !== "undefined") && this.application.ninja.coreIoApi.cloudAvailable()){ + // + this.activeDocument.model.save(this.testCallback.bind(this)); //this.fileSaveResult.bind(this) + } else { + //Error: + } } }, + testCallback: { + value: function (value) { + console.log(value); + } + }, //////////////////////////////////////////////////////////////////// //TODO: Check for appropiate structures handleExecuteSaveAll: { value: function(event) { - if((typeof this.activeDocument !== "undefined") && this.application.ninja.coreIoApi.cloudAvailable()){ - //Text and HTML document classes should return the same save object for fileSave - this.application.ninja.ioMediator.fileSave(this.activeDocument.saveAll(), this.fileSaveResult.bind(this)); - } + // + if((typeof this.activeDocument !== "undefined") && this.application.ninja.coreIoApi.cloudAvailable()){ + // + this.activeDocument.model.saveAll(this.testCallback.bind(this)); //this.fileSaveResult.bind(this) + } else { + //Error: + } } }, //////////////////////////////////////////////////////////////////// diff --git a/js/document/models/base.js b/js/document/models/base.js index 5667fb24..2bbbe501 100755 --- a/js/document/models/base.js +++ b/js/document/models/base.js @@ -76,39 +76,104 @@ exports.BaseDocumentModel = Montage.create(Component, { //TODO: Add API to allow other browser support browserPreview: { value: function (browser) { - - //TODO: Add file save before previewing - - //Currently only supporting current browser (Chrome, obviously) - switch (browser) { - case 'chrome': - window.open(this.application.ninja.coreIoApi.rootUrl + this.file.uri.split(this.application.ninja.coreIoApi.cloudData.root)[1]); - break; - default: - window.open(this.application.ninja.coreIoApi.rootUrl + this.file.uri.split(this.application.ninja.coreIoApi.cloudData.root)[1]); - break; - } + //Generating URL for document + var url = this.application.ninja.coreIoApi.rootUrl + this.file.uri.split(this.application.ninja.coreIoApi.cloudData.root)[1]; + //TODO: Add logic to prompt user to save (all) before preview + this.saveAll(function (result) { + //Currently only supporting current browser (Chrome, obviously) + switch (this.browser) { + case 'chrome': + window.open(this.url); + break; + default: + window.open(this.url); + break; + } + }.bind({browser: browser, url: url})); } }, + //////////////////////////////////////////////////////////////////// + // + getStyleSheets: { + value: function () { + // + var styles = []; + // + for (var k in this.views.design.iframe.contentWindow.document.styleSheets) { + if (this.views.design.iframe.contentWindow.document.styleSheets[k].ownerNode && this.views.design.iframe.contentWindow.document.styleSheets[k].ownerNode.getAttribute) { + if (this.views.design.iframe.contentWindow.document.styleSheets[k].ownerNode.getAttribute('data-ninja-template') === null) { + styles.push(this.views.design.iframe.contentWindow.document.styleSheets[k]); + } + } + } + // + return styles; + } + }, //////////////////////////////////////////////////////////////////// // save: { - value: function () { + value: function (callback) { // + if (this.currentView === this.views.design) { + // + this.application.ninja.ioMediator.fileSave({ + mode: 'html', + file: this.file, + webgl: this.webGlHelper.glData, + styles: this.getStyleSheets(), + document: this.views.design.iframe.contentWindow.document, + head: this.views.design.iframe.contentWindow.document.head, + body: this.views.design.iframe.contentWindow.document.body + }, callback.bind(this)); + } else { + //TODO: Add logic to save code view data + } + // + if (this.needsSave) { + //Save + } else { + //Ignore command + } } }, //////////////////////////////////////////////////////////////////// // - saveAs: { - value: function () { + saveAll: { + value: function (callback) { + // + if (this.currentView === this.views.design) { + // + this.application.ninja.ioMediator.fileSave({ + mode: 'html', + file: this.file, + webgl: this.webGlHelper.glData, + css: this.getStyleSheets(), + document: this.views.design.iframe.contentWindow.document, + head: this.views.design.iframe.contentWindow.document.head, + body: this.views.design.iframe.contentWindow.document.body + }, callback.bind(this)); + } else { + //TODO: Add logic to save code view data + } // + if (this.needsSave) { + //Save + } else { + //Ignore command + } } }, //////////////////////////////////////////////////////////////////// // - saveAll: { + saveAs: { value: function () { // + if (this.needsSave) { + //Save current file on memory + } else { + //Copy file from disk + } } }, //////////////////////////////////////////////////////////////////// @@ -116,6 +181,11 @@ exports.BaseDocumentModel = Montage.create(Component, { close: { value: function () { // + if (this.needsSave) { + //Prompt user to save of lose data + } else { + //Close file + } } } //////////////////////////////////////////////////////////////////// diff --git a/js/document/templates/montage-web/index.html b/js/document/templates/montage-web/index.html index 47964ae4..3d550768 100755 --- a/js/document/templates/montage-web/index.html +++ b/js/document/templates/montage-web/index.html @@ -5,13 +5,20 @@ (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. --> + + - Ninja Prototype + Ninja Prototype - - + - -