IKNINJA-1529 : zooming such that cursor position can be calculated accurately

Signed-off-by: Ananya Sen <Ananya.Sen@motorola.com>

4 files changed, 21 insertions, 10 deletions

diff --git a/css/ninja.css b/css/ninja.css
index 6c198b8e..297ed7cd 100755
--- a/css/ninja.css
+++ b/css/ninja.css
@@ -212,7 +212,7 @@ body { position: absolute; margin: 0px; width: 100%; height: 100%; background-co
 
 #mainContent .CodeMirror { width: 100%; height: 100%; background: white; }
 
-#mainContent .CodeMirror-scroll { height: 100%; overflow: scroll; overflow-x: auto; overflow-y: hidden; }
+#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; }
 
diff --git a/js/controllers/code-editor-controller.js b/js/controllers/code-editor-controller.js
index 8d7e3117..bce6f410 100644
--- a/js/controllers/code-editor-controller.js
+++ b/js/controllers/code-editor-controller.js
@@ -46,14 +46,13 @@ var CodeEditorController = exports.CodeEditorController = Montage.create(Compone
     },
 
     _zoomFactor:{
-        value:null
+        value:100
     },
 
     zoomFactor:{
         get: function(){return this._zoomFactor;},
         set: function(value){
-            this._zoomFactor = value;
-            this.application.ninja.documentController.activeDocument.container.style.zoom = ""+value+"%";
+            this.handleZoom(value);
         }
     },
 
@@ -113,7 +112,7 @@ var CodeEditorController = exports.CodeEditorController = Montage.create(Compone
         value: function(cm, keyEvent, type) {
             //===manually triggered code completion
             if((this.automaticCodeComplete === false)){
-                if((keyEvent.ctrlKey || keyEvent.metaKey) && keyEvent.keyCode === 32){//Ctrl-Space
+                if((keyEvent.ctrlKey || keyEvent.metaKey) && keyEvent.keyCode === 32){//Ctrl+Space
                     this.codeEditor.simpleHint(cm, this.codeEditor.javascriptHint);
                 }
             }
@@ -147,6 +146,9 @@ var CodeEditorController = exports.CodeEditorController = Montage.create(Compone
                             || (keyEvent.shiftKey && keyEvent.keyCode === 57)//open bracket (
                             || (keyEvent.shiftKey && keyEvent.keyCode === 48)//close bracket )
                             || ((keyEvent.ctrlKey || keyEvent.metaKey) && keyEvent.keyCode === 83)//ctrl+S
+                            || ((keyEvent.ctrlKey || keyEvent.metaKey) && keyEvent.keyCode === 90)//ctrl+z
+                            || ((keyEvent.ctrlKey || keyEvent.metaKey) && keyEvent.shiftKey && keyEvent.keyCode === 90)//ctrl+shift+z
+                            || ((keyEvent.ctrlKey || keyEvent.metaKey) && keyEvent.keyCode === 89)//ctrl+y
                            )
                     ){return true;}
                 default :
@@ -213,6 +215,17 @@ var CodeEditorController = exports.CodeEditorController = Montage.create(Compone
         }
     },
 
+    handleZoom:{
+        value:function(value){
+            var originalFont=13,originalLineHeight=16;
+            this._zoomFactor = value;
+            this.application.ninja.documentController.activeDocument.container.style.fontSize = ""+((value/100)*originalFont)+"px";
+            this.application.ninja.documentController.activeDocument.container.style.cursor = "text";
+            this.application.ninja.documentController.activeDocument.container.querySelector(".CodeMirror").style.lineHeight = ""+((value/100)*originalLineHeight)+"px";
+            this.application.ninja.documentController.activeDocument.editor.refresh();//refresh editor display for xoom
+        }
+    },
+
     applySettings:{
         value:function(){
             //set theme
@@ -220,7 +233,7 @@ var CodeEditorController = exports.CodeEditorController = Montage.create(Compone
             //check autocomplete support
             this.handleCodeCompletionSupport(this.application.ninja.documentController.activeDocument.editor.getOption("mode"));
             //set zoom
-            this.application.ninja.documentController.activeDocument.container.style.zoom = ""+this.zoomFactor+"%";
+            this.handleZoom(this._zoomFactor);
         }
     }
 });
\ No newline at end of file
diff --git a/js/stage/stage-view.reel/stage-view.css b/js/stage/stage-view.reel/stage-view.css
index b86c197a..10f80476 100755
--- a/js/stage/stage-view.reel/stage-view.css
+++ b/js/stage/stage-view.reel/stage-view.css
@@ -18,7 +18,7 @@
 }
 
 .codeViewContainer>div{
-    width:2050px;/*to prevent scrolling of editor container in the middle of the page for short files*/
+    width:2500px;/*to prevent scrolling of editor container in the middle of the page for short files*/
 }
 
 /* OLD CSS for reference
diff --git a/scss/imports/scss/_Stage.scss b/scss/imports/scss/_Stage.scss
index 3a8c0997..6206f27f 100644
--- a/scss/imports/scss/_Stage.scss
+++ b/scss/imports/scss/_Stage.scss
@@ -188,9 +188,7 @@
 
 #mainContent .CodeMirror-scroll {
     height: 100%;
-    overflow: scroll;
-    overflow-x: auto;
-    overflow-y: hidden;
+    overflow: auto;
 }
 
 .montage-editor-frame {