From 3a3a2351ea2d816bf953cbf76622772f7d64aa8b Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Fri, 1 Jun 2012 00:16:31 -0700 Subject: fixing the code editor, closing documents and cleanup of the stage Signed-off-by: Valerio Virgillito --- .../code-editor-view-options.css | 2 +- .../code-editor-view-options.html | 6 +- .../code-editor-view-options.js | 106 ++++++++++++++++++--- js/controllers/code-editor-controller.js | 83 ++++++---------- js/ninja.reel/ninja.html | 10 +- js/ninja.reel/ninja.js | 12 ++- js/stage/stage.reel/stage.js | 53 ++++++----- 7 files changed, 174 insertions(+), 98 deletions(-) (limited to 'js') diff --git a/js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.css b/js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.css index 6130382b..aeaf604c 100644 --- a/js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.css +++ b/js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.css @@ -18,7 +18,7 @@ height: 20px; } -.viewOptions .autoCodeComplete span{ +.viewOptions .autoCodeComplete label{ vertical-align: middle; } diff --git a/js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.html b/js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.html index 14d6cb55..2c91ca13 100644 --- a/js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.html +++ b/js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.html @@ -14,6 +14,9 @@ "prototype": "montage/ui/checkbox.reel", "properties": { "element": {"#": "codeComplete"} + }, + "bindings": { + "disabled": {"<-": "@owner.autocomplete"} } }, @@ -33,6 +36,7 @@ "prototype": "js/code-editor/ui/code-editor-view-options.reel[CodeEditorViewOptions]", "properties": { "element": {"#": "viewOptions"}, + "autoCompleteLabel": {"#": "autoCompleteLabel"}, "codeCompleteCheck":{"@": "codeCompleteCheck"}, "zoomHottext":{"@":"zoomHottext"}, "comment":{"#":"comment"}, @@ -50,7 +54,7 @@
- Automatic Completion +
diff --git a/js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.js b/js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.js index a27d4450..e4d622e3 100644 --- a/js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.js +++ b/js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.js @@ -9,15 +9,80 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot var Montage = require("montage/core/core").Montage, Component = require("montage/ui/component").Component; -var CodeEditorViewOptions = exports.CodeEditorViewOptions = Montage.create(Component, { +exports.CodeEditorViewOptions = Montage.create(Component, { + + _currentDocument: { + value : null + }, + + currentDocument : { + get : function() { + return this._currentDocument; + }, + set : function(value) { + if (value === this._currentDocument) { + return; + } + + this._currentDocument = value; + + if(!value || this._currentDocument.currentView === "design") { + this.visible = false; + } else { + this.visible = true; + this.autocomplete = !this.codeCompletionSupport[this._currentDocument.model.file.extension]; + } + + } + }, + + _visible: { + value: false + }, + + visible: { + get: function() { + return this._visible; + }, + set: function(value) { + if(this._visible !== value) { + this._visible = value; + this.needsDraw = true; + } + } + }, + + _autocomplete: { + value: false + }, + + autocomplete: { + get: function() { + return this._autocomplete; + }, + set: function(value) { + if(this._autocomplete !== value) { + this._autocomplete = value; + this.needsDraw = true; + } + } + }, + + codeCompletionSupport : { + value: {"js": true} + }, + + codeCompleteCheck: { + value: null + }, prepareForDraw: { value: function() { - Object.defineBinding(this.codeCompleteCheck , "checked", { - boundObject: this.application.ninja.codeEditorController, - boundObjectPropertyPath: "automaticCodeComplete", - oneway : false - }); + //this.format.addEventListener("click", this.handleFormat.bind(this), false); + this.comment.addEventListener("click", this.handleComment.bind(this), false); + this.uncomment.addEventListener("click", this.handleUncomment.bind(this), false); + this.themeSelect.addEventListener("change", this.handleThemeSelection.bind(this), false); + this.shortKeys.addEventListener("click", this.handleShortKeys.bind(this), false); Object.defineBinding(this.zoomHottext , "value", { boundObject: this.application.ninja.codeEditorController, @@ -28,22 +93,35 @@ var CodeEditorViewOptions = exports.CodeEditorViewOptions = Montage.create(Compo } }, - didDraw: { - enumerable: false, + draw: { value: function() { - //this.format.addEventListener("click", this.handleFormat.bind(this), false); - this.comment.addEventListener("click", this.handleComment.bind(this), false); - this.uncomment.addEventListener("click", this.handleUncomment.bind(this), false); - this.themeSelect.addEventListener("change", this.handleThemeSelection.bind(this), false); - this.shortKeys.addEventListener("click", this.handleShortKeys.bind(this), false); + if(this.visible) { + this.element.style.display = "block"; + } else { + this.element.style.display = "none"; + } + + if(this.autocomplete) { + this.autoCompleteLabel.classList.add("disabled"); + } else { + this.autoCompleteLabel.classList.remove("disabled"); + } + } + }, + + getSelectedRange:{ + value:function(editor){ + return { from: editor.getCursor(true), to: editor.getCursor(false) }; } }, handleFormat:{ value: function(evt){ - this.application.ninja.codeEditorController.autoFormatSelection(); + var range = this.getSelectedRange(this.currentDocument.model.views.code.editor); + this.currentDocument.model.views.code.editor.autoFormatRange(range.from, range.to); } }, + handleComment:{ value: function(evt){ this.application.ninja.codeEditorController.commentSelection(true); diff --git a/js/controllers/code-editor-controller.js b/js/controllers/code-editor-controller.js index d292f838..f3c19b92 100644 --- a/js/controllers/code-editor-controller.js +++ b/js/controllers/code-editor-controller.js @@ -32,6 +32,7 @@ exports.CodeEditorController = Montage.create(Component, { if(!value) { } else if(this._currentDocument.currentView === "code") { + this.autocomplete = !this.codeCompletionSupport[this._currentDocument.model.file.extension]; this._currentDocument.model.views.code.editor.focus(); this.applySettings(); } @@ -51,13 +52,23 @@ exports.CodeEditorController = Montage.create(Component, { value: {"js": true} }, + autocomplete: { + value: false + }, + _automaticCodeComplete: { value:false }, automaticCodeComplete:{ - get: function(){return this._automaticCodeComplete;}, - set: function(value){this._automaticCodeComplete = value;} + get: function(){ + return this._automaticCodeComplete; + }, + set: function(value) { + if(this._automaticCodeComplete !== value) { + this._automaticCodeComplete = value; + } + } }, _editorTheme: { @@ -65,17 +76,23 @@ exports.CodeEditorController = Montage.create(Component, { }, editorTheme:{ - get: function(){return this._editorTheme;}, - set: function(value){this._editorTheme = value;} + get: function(){ + return this._editorTheme; + }, + set: function(value){ + this._editorTheme = value; + } }, - _zoomFactor:{ + _zoomFactor: { value:100 }, zoomFactor:{ - get: function(){return this._zoomFactor;}, - set: function(value){ + get: function() { + return this._zoomFactor; + }, + set: function(value) { this.handleZoom(value); } }, @@ -115,13 +132,15 @@ exports.CodeEditorController = Montage.create(Component, { }; //configure auto code completion if it is supported for that document type - if(this.codeCompletionSupport[documentType] === true){ - editorOptions.onKeyEvent = function(cm, keyEvent){self._codeCompletionKeyEventHandler.call(self, cm, keyEvent, documentType)}; - } + if(this.autocomplete) { - var editor = self.codeEditor.fromTextArea(codeDocumentView.textArea, editorOptions); + editorOptions.onKeyEvent = function(cm, keyEvent){ + self._codeCompletionKeyEventHandler.call(self, cm, keyEvent, documentType) + }; - return editor; + } + + return self.codeEditor.fromTextArea(codeDocumentView.textArea, editorOptions); } }, @@ -198,50 +217,12 @@ exports.CodeEditorController = Montage.create(Component, { } }, - handleCodeCompletionSupport:{ - value:function(fileType){ - var autoCodeCompleteElem = document.getElementsByClassName("autoCodeComplete")[0], elems=null, i=0; - if(autoCodeCompleteElem){ - elems = autoCodeCompleteElem.getElementsByTagName("*"); - } - - if(elems && (this.codeCompletionSupport[fileType] === true)){ - //enable elements - for(i=0;i
-
HTML
- +
+
diff --git a/js/ninja.reel/ninja.js b/js/ninja.reel/ninja.js index 4c1efff4..e9e1e31c 100755 --- a/js/ninja.reel/ninja.js +++ b/js/ninja.reel/ninja.js @@ -318,9 +318,19 @@ exports.Ninja = Montage.create(Component, { closeFile: { value: function(document) { - var doc = this.documentList.content[this.documentList.content.indexOf(document)]; + var doc = this.documentList.content[this.documentList.content.indexOf(document)], activeDocument; + + if(this.documentList.selectedObjects[0] === doc) { + activeDocument = this.documentList.content[0]; + } else { + activeDocument = this.documentList.selectedObjects[0]; + } this.documentList.removeObjects(doc); + + if(this.documentList.content.length) { + this.documentList.selectedObjects = [activeDocument]; + } } }, diff --git a/js/stage/stage.reel/stage.js b/js/stage/stage.reel/stage.js index 087606d0..ed716541 100755 --- a/js/stage/stage.reel/stage.js +++ b/js/stage/stage.reel/stage.js @@ -206,7 +206,7 @@ exports.Stage = Montage.create(Component, { this.hideRulers(); } } - }, + }, _userPaddingLeft: { value: 0 }, _userPaddingTop: { value: 0 }, @@ -216,7 +216,7 @@ exports.Stage = Montage.create(Component, { set: function(value) { this._userPaddingLeft = value; this._documentOffsetLeft = -value; - this.application.ninja.currentDocument.model.documentRoot.ownerDocument.getElementsByTagName("HTML")[0].style["padding-left"] = -value + "px"; + this.currentDocument.model.documentRoot.ownerDocument.getElementsByTagName("HTML")[0].style["padding-left"] = -value + "px"; this.userContentLeft = this._documentOffsetLeft - this._scrollLeft; this.updatedStage = true; } @@ -227,7 +227,7 @@ exports.Stage = Montage.create(Component, { set: function(value) { this._userPaddingTop = value; this._documentOffsetTop = -value; - this.application.ninja.currentDocument.model.documentRoot.ownerDocument.getElementsByTagName("HTML")[0].style["padding-top"] = -value + "px"; + this.currentDocument.model.documentRoot.ownerDocument.getElementsByTagName("HTML")[0].style["padding-top"] = -value + "px"; this.userContentTop = this._documentOffsetTop - this._scrollTop; this.updatedStage = true; } @@ -242,7 +242,7 @@ exports.Stage = Montage.create(Component, { // Hack for now until a full component this.layout.draw(); - if(this.application.ninja.currentDocument) { + if(this.currentDocument) { this.layout.draw3DInfo(true); } } else if(this.updatedStage) { @@ -347,8 +347,8 @@ exports.Stage = Montage.create(Component, { } if(didSwitch) { - this.application.ninja.currentDocument.model.views.design.document.body.scrollLeft = this.currentDocument.model.scrollLeft; - this.application.ninja.currentDocument.model.views.design.document.body.scrollTop = this.currentDocument.model.scrollTop; + this.currentDocument.model.views.design.document.body.scrollLeft = this.currentDocument.model.scrollLeft; + this.currentDocument.model.views.design.document.body.scrollTop = this.currentDocument.model.scrollTop; this.handleScroll(); } else { this.centerStage(); @@ -462,9 +462,9 @@ exports.Stage = Montage.create(Component, { handleMousewheel: { value: function(event) { if(event._event.wheelDelta > 0) { - this.application.ninja.currentDocument.model.views.design.document.body.scrollTop -= 20; + this.currentDocument.model.views.design.document.body.scrollTop -= 20; } else { - this.application.ninja.currentDocument.model.views.design.document.body.scrollTop += 20; + this.currentDocument.model.views.design.document.body.scrollTop += 20; } } }, @@ -532,8 +532,8 @@ exports.Stage = Montage.create(Component, { handleScroll: { value: function() { - this._scrollLeft = this.application.ninja.currentDocument.model.views.design.document.body.scrollLeft; - this._scrollTop = this.application.ninja.currentDocument.model.views.design.document.body.scrollTop; + this._scrollLeft = this.currentDocument.model.views.design.document.body.scrollLeft; + this._scrollTop = this.currentDocument.model.views.design.document.body.scrollTop; this.userContentLeft = this._documentOffsetLeft - this._scrollLeft; this.userContentTop = this._documentOffsetTop - this._scrollTop; @@ -571,7 +571,7 @@ exports.Stage = Montage.create(Component, { */ centerStage: { value: function() { - var designView = this.application.ninja.currentDocument.model.views.design; + var designView = this.currentDocument.model.views.design; if(designView._template) { designView.document.body.scrollLeft = this._documentOffsetLeft - parseInt((this.canvas.width - designView._template.size.width)/2); designView.document.body.scrollTop = this._documentOffsetTop - parseInt((this.canvas.height - designView._template.size.height)/2); @@ -630,21 +630,21 @@ exports.Stage = Montage.create(Component, { getElement: { value: function(position, selectable) { var point, element, - docView = this.application.ninja.currentDocument.model.views.design; + docView = this.currentDocument.model.views.design; point = webkitConvertPointFromPageToNode(this.canvas, new WebKitPoint(position.pageX - docView.iframe.contentWindow.pageXOffset + this.documentOffsetLeft, position.pageY - docView.iframe.contentWindow.pageYOffset + this.documentOffsetTop)); - element = this.application.ninja.currentDocument.model.views.design.getElementFromPoint(point.x - this.userContentLeft,point.y - this.userContentTop); + element = this.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) { + if(this.application.ninja.toolsData.selectedToolInstance._canSnap && this.currentDocument.inExclusion(element) !== -1) { point = webkitConvertPointFromPageToNode(this.canvas, new WebKitPoint(position.pageX, position.pageY)); element = this.getElementUsingSnapping(point); } if(selectable) { - if(this.application.ninja.currentDocument.inExclusion(element) !== -1) { + if(this.currentDocument.inExclusion(element) !== -1) { return this.application.ninja.currentSelectedContainer; } @@ -949,7 +949,7 @@ exports.Stage = Montage.create(Component, { setStageAsViewport: { value: function() { - this.stageDeps.viewUtils.setViewportObj(this.application.ninja.currentDocument.model.documentRoot); + this.stageDeps.viewUtils.setViewportObj(this.currentDocument.model.documentRoot); } }, @@ -957,7 +957,7 @@ exports.Stage = Montage.create(Component, { value: function(value) { if(!this._firstDraw) { - var userContent = this.application.ninja.currentDocument.model.documentRoot; + var userContent = this.currentDocument.model.documentRoot; if (userContent) { var w = this._canvas.width, @@ -969,7 +969,7 @@ exports.Stage = Montage.create(Component, { //TODO - Maybe move to mediator. var newVal = value/100.0; if (newVal >= 1) - this.application.ninja.currentDocument.model.views.design.iframe.style.zoom = value/100; + this.currentDocument.model.views.design.iframe.style.zoom = value/100; this.updatedStage = true; @@ -988,12 +988,12 @@ exports.Stage = Montage.create(Component, { { case "top": plane = [0,1,0,0]; - plane[3] = this.application.ninja.currentDocument.model.documentRoot.offsetHeight / 2.0; + plane[3] = this.currentDocument.model.documentRoot.offsetHeight / 2.0; break; case "side": plane = [1,0,0,0]; - plane[3] = this.application.ninja.currentDocument.model.documentRoot.offsetWidth / 2.0; + plane[3] = this.currentDocument.model.documentRoot.offsetWidth / 2.0; break; case "front": @@ -1012,7 +1012,7 @@ exports.Stage = Montage.create(Component, { setStageView: { value: function(side) { var mat, - currentDoc = this.application.ninja.currentDocument.model.documentRoot, + currentDoc = this.currentDocument.model.documentRoot, isDrawingGrid = this.application.ninja.appModel.show3dGrid; // Stage 3d Props. currentDoc.elementModel.props3D.ResetTranslationValues(); @@ -1057,6 +1057,7 @@ exports.Stage = Montage.create(Component, { this.application.ninja.rulerLeft.style.display = "block"; } }, + hideRulers:{ value:function(){ this.application.ninja.rulerTop.style.display = "none"; @@ -1066,11 +1067,11 @@ exports.Stage = Montage.create(Component, { showCodeViewBar:{ value:function(isCodeView){ if(isCodeView === true) { - this.application.ninja.editorViewOptions.element.style.display = "block"; + this.application.ninja.documentBar.element.style.display = "none"; } else { this.application.ninja.documentBar.element.style.display = "block"; - this.application.ninja.editorViewOptions.element.style.display = "none"; + } } }, @@ -1097,11 +1098,11 @@ exports.Stage = Montage.create(Component, { workingPlane = [0,0,1,0]; - this.viewUtils.setStageElement(this.application.ninja.currentDocument.model.documentRoot); - this.viewUtils.setRootElement(this.application.ninja.currentDocument.model.documentRoot.parentNode); + this.viewUtils.setStageElement(this.currentDocument.model.documentRoot); + this.viewUtils.setRootElement(this.currentDocument.model.documentRoot.parentNode); this.snapManager._isCacheInvalid = true; - this.snapManager.currentStage = this.application.ninja.currentDocument.model.documentRoot; + this.snapManager.currentStage = this.currentDocument.model.documentRoot; this.snapManager.setupDragPlaneFromPlane (workingPlane); this.drawUtils.initializeFromDocument(); -- cgit v1.2.3