From 36b2e540f06cef3887e7d0fea60527fee51e2a40 Mon Sep 17 00:00:00 2001 From: Ananya Sen Date: Wed, 8 Feb 2012 15:36:53 -0800 Subject: fixed undo/redo for each code view document, changed new file integration with io mediator Signed-off-by: Ananya Sen --- .../layout/document-bar.reel/document-bar.js | 2 +- js/io/document/document-controller.js | 75 ++++--------------- js/io/document/html-document.js | 45 ++++++------ js/io/document/text-document.js | 47 +++++++----- js/mediators/io-mediator.js | 6 +- js/stage/stage-view.reel/stage-view.js | 83 ++++++++++++---------- js/stage/stage.reel/stage.js | 33 +++++---- 7 files changed, 136 insertions(+), 155 deletions(-) diff --git a/js/components/layout/document-bar.reel/document-bar.js b/js/components/layout/document-bar.reel/document-bar.js index 44f65804..ea5e3280 100755 --- a/js/components/layout/document-bar.reel/document-bar.js +++ b/js/components/layout/document-bar.reel/document-bar.js @@ -95,7 +95,7 @@ exports.DocumentBar = Montage.create(Component, { if(event._event.target.id === this.currentView) return; this.currentView = event._event.target.id; - this.application.ninja.documentController.switchViews(event._event.target.id);//switch between design view + this.application.ninja.documentController.stage.stageView.switchViews(event._event.target.id);//switch between design view } }, diff --git a/js/io/document/document-controller.js b/js/io/document/document-controller.js index 1a5d6058..e36181bf 100755 --- a/js/io/document/document-controller.js +++ b/js/io/document/document-controller.js @@ -39,19 +39,6 @@ var DocumentController = exports.DocumentController = Montage.create(Component, "var options = {}, defaults = CodeMirror.defaults; }" }, - _codeEditor: { - value: { - "editor": { - value: null, - enumerable: false - }, - "hline": { - value: null, - enumerable: false - } - } - }, - activeDocument: { get: function() { return this._activeDocument; @@ -64,6 +51,10 @@ var DocumentController = exports.DocumentController = Montage.create(Component, this._activeDocument = doc; this._activeDocument.isActive = true; + if(!!this._activeDocument.editor){ + this._activeDocument.editor.focus(); + } + } }, @@ -73,6 +64,8 @@ var DocumentController = exports.DocumentController = Montage.create(Component, this.eventManager.addEventListener("executeFileOpen", this, false); this.eventManager.addEventListener("executeNewFile", this, false); this.eventManager.addEventListener("executeSave", this, false); + + this.eventManager.addEventListener("recordStyleChanged", this, false); } }, @@ -110,7 +103,7 @@ var DocumentController = exports.DocumentController = Montage.create(Component, value:function(newFileObj){ //console.log(newFileObj);//contains the template uri and the new file uri if(!newFileObj) return; - this.application.ninja.ioMediator.fileNew(newFileObj.newFilePath, newFileObj.fileTemplateUri, {"operation":this.openNewFileCallback, "thisScope":this}); + this.application.ninja.ioMediator.fileNew(newFileObj.newFilePath, newFileObj.fileTemplateUri, this.openNewFileCallback.bind(this)); if((newFileObj.fileExtension !== ".html") && (newFileObj.fileExtension !== ".htm")){//open code view @@ -130,10 +123,10 @@ var DocumentController = exports.DocumentController = Montage.create(Component, */ openNewFileCallback:{ value:function(doc){ - if(!doc){ - doc = {"type": "js", "name": "filename", "source": "test file content", "uri": "/fs/fsd/"} ; + var response = doc || {"uri":"/Users/xhdq84/Documents/test.js", "success":true};//default just for testing + if(!!response && response.success && !!response.uri){ + this.application.ninja.ioMediator.fileOpen({"uri":response.uri}, this.openFileCallback.bind(this)); } - this.openDocument(doc); } }, @@ -145,7 +138,7 @@ var DocumentController = exports.DocumentController = Montage.create(Component, } //console.log("URI is: ", uri); - this.application.ninja.ioMediator.fileOpen({"uri":uri}, {"operation":this.openFileCallback, "thisScope":this}); + this.application.ninja.ioMediator.fileOpen({"uri":uri}, this.openFileCallback.bind(this)); } }, @@ -242,11 +235,8 @@ var DocumentController = exports.DocumentController = Montage.create(Component, closeDocument: { value: function(id) { - - //if file dirty then save if(this.activeDocument.dirtyFlag === true){ - this.activeDocument.save(true /*remove the codemirror div after saving*/); - this.activeDocument.dirtyFlag=false; + //if file dirty then alert user to save } var doc = this._findDocumentByUUID(id); @@ -267,42 +257,6 @@ var DocumentController = exports.DocumentController = Montage.create(Component, } }, - switchViews: { - value: function() { - - //save file if dirty - - this.application.ninja.stage.saveScroll(); - this._hideCurrentDocument(); - - if(this.activeDocument.currentView === "design") { - this._textHolder.style.display = "none"; - this.activeDocument.container.style["display"] = "block"; - this.application.ninja.stage._scrollFlag = true; - //this._showCurrentDocument(); - this.application.ninja.stage.restoreScroll(); - - } else { - this.application.ninja.stage._scrollFlag = false; // TODO HACK to prevent type error on Hide/Show Iframe - - var codeview = this.activeDocument.container; - //this._textHolder.style.display = "block"; - //codeview.firstChild.innerHTML = this.activeDocument.iframe.contentWindow.document.body.parentNode.innerHTML; - -// this._codeEditor.editor = CodeMirror.fromTextArea(codeview.firstChild, { -// lineNumbers: true, -// mode: "htmlmixed", -// onCursorActivity: function() { -// DocumentController._codeEditor.editor.setLineClass(DocumentController._codeEditor.hline, null); -// DocumentController._codeEditor.hline = DocumentController._codeEditor.editor.setLineClass(DocumentController._codeEditor.editor.getCursor().line, "activeline"); -// } -// }); -// this._codeEditor.hline = DocumentController._codeEditor.editor.setLineClass(0, "activeline"); - } - } - }, - - // Document has been loaded into the Iframe. Dispatch the event. // Event Detail: Contains the current ActiveDocument _onOpenDocument: { @@ -388,11 +342,12 @@ var DocumentController = exports.DocumentController = Montage.create(Component, value: function() { if(this.activeDocument) { if(this.activeDocument.currentView === "design"){ - this.application.ninja.stage.saveStageScroll(); + this.application.ninja.stage.saveScroll(); this.activeDocument.container.parentNode.style["display"] = "none"; this.application.ninja.stage.hideCanvas(true); this.application.ninja.stage.stageView.hideRulers(); } + this.activeDocument.container.style["display"] = "none"; } } @@ -404,7 +359,7 @@ var DocumentController = exports.DocumentController = Montage.create(Component, this.activeDocument.container.style["display"] = "block"; if(this.activeDocument.currentView === "design"){ this.activeDocument.container.parentNode.style["display"] = "block"; - this.application.ninja.stage.applySavedScroll(); + this.application.ninja.stage.restoreScroll(); this.application.ninja.stage.hideCanvas(false); this.application.ninja.stage.stageView.showRulers(); } diff --git a/js/io/document/html-document.js b/js/io/document/html-document.js index 8e1eb614..d51cd279 100755 --- a/js/io/document/html-document.js +++ b/js/io/document/html-document.js @@ -36,18 +36,13 @@ var HTMLDocument = exports.HTMLDocument = Montage.create(baseDocumentModule.Base _zoomFactor: { value: 100, enumerable: false }, - _codeEditor: { - value: { - "editor": { value: null, enumerable: false }, - "hline": { value: null, enumerable: false } - } - }, - - // PUBLIC MEMBERS cssLoadInterval: { value: null, enumerable: false }, - codeViewDocument:{ + _savedLeftScroll: {value:null}, + _savedTopScroll: {value:null}, + + _codeViewDocument:{ writable: true, enumerable: true, value:null @@ -58,10 +53,21 @@ var HTMLDocument = exports.HTMLDocument = Montage.create(baseDocumentModule.Base */ // GETTERS / SETTERS - editor: { - get: function() { return this._codeEditor.editor; }, - set: function(value) { this._codeEditor.editor = value} - }, + + codeViewDocument:{ + get: function() { return this._codeViewDocument; }, + set: function(value) { this._codeViewDocument = value} + }, + + savedLeftScroll:{ + get: function() { return this._savedLeftScroll; }, + set: function(value) { this._savedLeftScroll = value} + }, + + savedTopScroll:{ + get: function() { return this._savedTopScroll; }, + set: function(value) { this._savedTopScroll = value} + }, selectionExclude: { get: function() { return this._selectionExclude; }, @@ -233,6 +239,7 @@ var HTMLDocument = exports.HTMLDocument = Montage.create(baseDocumentModule.Base this.currentView = "design"; this._loadDocument(this.uri); + } }, @@ -444,20 +451,15 @@ var HTMLDocument = exports.HTMLDocument = Montage.create(baseDocumentModule.Base /** * public method - * parameter: - * removeCodeMirrorDivFlag - for code view, tell to remove the codemirror div after saving + * */ save:{ - value:function(removeCodeMirrorDivFlag){ + value:function(){ try{ if(this.currentView === "design"){ //generate html and save }else if((this.currentView === "code") && (this.codeViewDocument !== null)){ - if(removeCodeMirrorDivFlag === true){ - this.codeViewDocument.save(true); - }else{ - this.codeViewDocument.save(); - } + this.codeViewDocument.editor.save(); //persist to filesystem } this.dirtyFlag=false; @@ -467,4 +469,5 @@ var HTMLDocument = exports.HTMLDocument = Montage.create(baseDocumentModule.Base } } } + }); \ No newline at end of file diff --git a/js/io/document/text-document.js b/js/io/document/text-document.js index 7db8e91a..81162eba 100755 --- a/js/io/document/text-document.js +++ b/js/io/document/text-document.js @@ -13,10 +13,13 @@ var TextDocument = exports.TextDocument = Montage.create(baseDocumentModule.Base _codeEditor: { value: { "editor": { value: null, enumerable: false }, - "hline": { value: null, enumerable: false } + } }, + _editor: { value: null, enumerable: false }, + _hline: { value: null, enumerable: false }, + _textArea: {value: null, enumerable: false }, _source: { value: null, enumerable: false}, @@ -28,23 +31,37 @@ var TextDocument = exports.TextDocument = Montage.create(baseDocumentModule.Base // PUBLIC MEMBERS + _savedLeftScroll: {value:null}, + _savedTopScroll: {value:null}, + //****************************************// //PUBLIC API // GETTERS / SETTERS + + savedLeftScroll:{ + get: function() { return this._savedLeftScroll; }, + set: function(value) { this._savedLeftScroll = value} + }, + + savedTopScroll:{ + get: function() { return this._savedTopScroll; }, + set: function(value) { this._savedTopScroll = value} + }, + textArea: { get: function() { return this._textArea; }, set: function(value) { this._textArea = value; } }, editor: { - get: function() { return this._codeEditor.editor; }, - set: function(value) { this._codeEditor.editor = value} + get: function() { return this._editor; }, + set: function(value) { this._editor = value} }, hline: { - get: function() { return this._codeEditor.hline; }, - set: function(value) {this._codeEditor.hline = value; } + get: function() { return this._hline; }, + set: function(value) {this._hline = value; } }, @@ -56,6 +73,7 @@ var TextDocument = exports.TextDocument = Montage.create(baseDocumentModule.Base this.textArea = textArea; // this._loadContent(); + } }, @@ -89,20 +107,17 @@ var TextDocument = exports.TextDocument = Montage.create(baseDocumentModule.Base /** * public method - * parameter: - * removeCodeMirrorDivFlag - for code view, tell to remove the codemirror div after saving */ save:{ - value:function(removeCodeMirrorDivFlag){ - this.editor.save(); - this.dirtyFlag=false; - if(removeCodeMirrorDivFlag === true){ - var codemirrorDiv = this.textArea.parentNode.querySelector(".CodeMirror"); - if(!!codemirrorDiv){codemirrorDiv.parentNode.removeChild(codemirrorDiv);} + value:function(){ + try{ + this.editor.save(); + //persist textArea.value to filesystem + this.dirtyFlag=false; + }catch(e){ + console.log("Error while saving "+this.uri); + console.log(e.stack); } - //console.log("$$$saved : "+this.uri+" : "+this.textArea.value); - //persist to filesystem } } - }); \ No newline at end of file diff --git a/js/mediators/io-mediator.js b/js/mediators/io-mediator.js index 76f78a7d..fbabd780 100644 --- a/js/mediators/io-mediator.js +++ b/js/mediators/io-mediator.js @@ -20,8 +20,8 @@ exports.IoMediator = Montage.create(require("montage/ui/component").Component, { // - var returnObj = null; //like {"type": "js", "name": "filename", "source": "test file content", "uri": "/fs/fsd/"} - callback.operation.call(callback.thisScope, returnObj); + var returnObj = null; //like {"uri": "/gfdg/gdf/dfg.js", "success": true,...} + callback(returnObj); } }, //////////////////////////////////////////////////////////////////// @@ -45,7 +45,7 @@ exports.IoMediator = Montage.create(require("montage/ui/component").Component, { fileType = file.uri.substr(file.uri.lastIndexOf('.') + 1); } returnObj = {"type": ""+fileType, "name": ""+filename, "source": fileContent, "uri": file.uri}; - callback.operation.call(callback.thisScope, returnObj); + callback(returnObj); } }, //////////////////////////////////////////////////////////////////// diff --git a/js/stage/stage-view.reel/stage-view.js b/js/stage/stage-view.reel/stage-view.js index f8817b13..1e85b4fd 100755 --- a/js/stage/stage-view.reel/stage-view.js +++ b/js/stage/stage-view.reel/stage-view.js @@ -76,7 +76,6 @@ exports.StageView = Montage.create(Component, { // Temporary function to create a Codemirror text view createTextView: { value: function(doc) { - this.application.ninja.documentController.activeDocument.save(true /*remove the codemirror div after saving*/); this.application.ninja.documentController._hideCurrentDocument(); this.hideOtherDocuments(doc.uuid); var type; @@ -93,13 +92,12 @@ exports.StageView = Montage.create(Component, { document.getElementById("codeMirror_"+doc.uuid).style.display="block"; var documentController = this.application.ninja.documentController; - doc.editor = CodeMirror.fromTextArea(doc.textArea, { lineNumbers: true, mode: type, onChange: function(){ var historySize = doc.editor.historySize(); - if((historySize.undo===0 && historySize.redo===0) || (historySize.undo>0)){ + if(historySize.undo>0){ doc.dirtyFlag=true; }else if(historySize.undo===0 && historySize.redo>0){ doc.dirtyFlag=false; @@ -122,16 +120,11 @@ exports.StageView = Montage.create(Component, { switchDocument:{ value: function(doc){ - this.application.ninja.documentController.activeDocument.save(true /*remove the codemirror div after saving*/); - - this.application.ninja.documentController._hideCurrentDocument(); - - - if(this.application.ninja.documentController.activeDocument.currentView === "design"){ - console.log("scrollLeft: "+ this.application.ninja.stage._iframeContainer.scrollLeft); - console.log("scrollTop: "+ this.application.ninja.stage._iframeContainer.scrollTop); + //save editor cursor position + if(!!this.application.ninja.documentController.activeDocument.editor){ + this.application.ninja.documentController.activeDocument.hline = this.application.ninja.documentController.activeDocument.editor.getCursor(true); } - + this.application.ninja.documentController._hideCurrentDocument(); this.application.ninja.documentController.activeDocument = doc; @@ -140,34 +133,15 @@ exports.StageView = Montage.create(Component, { var documentController = this.application.ninja.documentController; - if(this.application.ninja.documentController.activeDocument.currentView === "code"){ - var type; - switch(doc.documentType) { - case "css" : - type = "css"; - break; - case "js" : - type = "javascript"; - break; - } - - //add the codemirror div again for editting - doc.editor = CodeMirror.fromTextArea(doc.textArea, { - lineNumbers: true, - mode: type, - onChange: function(){doc.dirtyFlag=true;console.log("undo stack:",doc.editor.historySize());}, - onCursorActivity: function() { - //documentController._codeEditor.editor.setLineClass(documentController._codeEditor.hline, null); - //documentController._codeEditor.hline = documentController._codeEditor.editor.setLineClass(documentController._codeEditor.editor.getCursor().line, "activeline"); - } - }); - - //this.application.ninja.documentController._codeEditor.hline = this.application.ninja.documentController._codeEditor.editor.setLineClass(0, "activeline"); + //restore editor cursor position + if(!!this.application.ninja.documentController.activeDocument.editor){ + this.application.ninja.documentController.activeDocument.editor.setCursor(this.application.ninja.documentController.activeDocument.hline); + document.getElementById("codeMirror_"+this.application.ninja.documentController.activeDocument.uuid).getElementsByClassName("CodeMirror")[0].focus(); } - if(this.application.ninja.documentController.activeDocument.documentType === "htm" || this.application.ninja.documentController.activeDocument.documentType === "html") { + if(this.application.ninja.documentController.activeDocument.currentView === "design") { this.application.ninja.stage._scrollFlag = true; // TODO HACK to prevent type error on Hide/Show Iframe - + this.application.ninja.currentDocument = this.application.ninja.documentController.activeDocument; // TODO dispatch event here // appDelegateModule.MyAppDelegate.onSetActiveDocument(); @@ -232,5 +206,40 @@ exports.StageView = Montage.create(Component, { this.application.ninja.rulerTop.style.display = "none"; this.application.ninja.rulerLeft.style.display = "none"; } + }, + + switchViews: { + value: function() { + + //save file if dirty + + this.application.ninja.stage.saveStageScroll(); + this.application.ninja.documentController._hideCurrentDocument(); + + if(this.application.ninja.documentController.activeDocument.currentView === "design") { + this.application.ninja.documentController._textHolder.style.display = "none"; + this.application.ninja.documentController.activeDocument.container.style["display"] = "block"; + this.application.ninja.stage._scrollFlag = true; + //this._showCurrentDocument(); + this.application.ninja.stage.applySavedScroll(); + + } else { + this.application.ninja.stage._scrollFlag = false; // TODO HACK to prevent type error on Hide/Show Iframe + + var codeview = this.application.ninja.documentController.activeDocument.container; + //this._textHolder.style.display = "block"; + //codeview.firstChild.innerHTML = this.activeDocument.iframe.contentWindow.document.body.parentNode.innerHTML; + +// this._codeEditor.editor = CodeMirror.fromTextArea(codeview.firstChild, { +// lineNumbers: true, +// mode: "htmlmixed", +// onCursorActivity: function() { +// DocumentController._codeEditor.editor.setLineClass(DocumentController._codeEditor.hline, null); +// DocumentController._codeEditor.hline = DocumentController._codeEditor.editor.setLineClass(DocumentController._codeEditor.editor.getCursor().line, "activeline"); +// } +// }); +// this._codeEditor.hline = DocumentController._codeEditor.editor.setLineClass(0, "activeline"); + } + } } }); \ No newline at end of file diff --git a/js/stage/stage.reel/stage.js b/js/stage/stage.reel/stage.js index 4364b45d..8c0f0fa0 100755 --- a/js/stage/stage.reel/stage.js +++ b/js/stage/stage.reel/stage.js @@ -116,9 +116,6 @@ exports.Stage = Montage.create(Component, { _userContentLeft: { value: 0 }, _userContentTop: { value: 0 }, _userContentBorder: { value: 0 }, - savedLeftScroll: { value: null }, - savedTopScroll: { value: null }, - documentRoot: { get: function () { return this._documentRoot; }, @@ -247,6 +244,8 @@ exports.Stage = Montage.create(Component, { this._scrollLeft = this._iframeContainer.scrollLeft; this._scrollTop = this._iframeContainer.scrollTop; + this.application.ninja.currentDocument.savedLeftScroll = this._iframeContainer.scrollLeft; + this.application.ninja.currentDocument.savedTopScroll = this._iframeContainer.scrollTop; this.userContentBorder = parseInt(this._documentRoot.elementModel.controller.getProperty(this._documentRoot, "border")); @@ -878,18 +877,18 @@ exports.Stage = Montage.create(Component, { } }, - saveStageScroll:{ - value: function(){ - this.savedLeftScroll = this._iframeContainer.scrollLeft; - this.savedTopScroll = this._iframeContainer.scrollTop; - } - }, - applySavedScroll:{ - value: function(){ - this._iframeContainer.scrollLeft = this.savedLeftScroll; - this._scrollLeft = this.savedLeftScroll; - this._iframeContainer.scrollTop = this.savedTopScroll; - this._scrollTop = this.savedTopScroll; - } - } + saveScroll:{ + value: function(){ + this.application.ninja.documentController.activeDocument.savedLeftScroll = this._iframeContainer.scrollLeft; + this.application.ninja.documentController.activeDocument.savedTopScroll = this._iframeContainer.scrollTop; + } + }, + restoreScroll:{ + value: function(){ + this._iframeContainer.scrollLeft = this.application.ninja.documentController.activeDocument.savedLeftScroll; + this._scrollLeft = this.application.ninja.documentController.activeDocument.savedLeftScroll; + this._iframeContainer.scrollTop = this.application.ninja.documentController.activeDocument.savedTopScroll; + this._scrollTop = this.application.ninja.documentController.activeDocument.savedTopScroll; + } + } }); \ No newline at end of file -- cgit v1.2.3