css scale

main.css

@@ -1,36 +1,34 @@
 #mini-map {
-
+    -webkit-transform-origin: 100% 0%;
+    -webkit-transform: scale(1);
 	position: fixed;
 	top: 37px;
 	width: 70px;
 	right:0;
 	margin-right:86px;
-	z-index: 21;
+	z-index: 10;
 }
 
 #mini-map .selection {	
-	top:-2px;
+	top:0px;
 	position: absolute;
 	width:141px;
 	border-radius:3px;
 	background-color:rgba(0,0,0, 0.06);
 	border: 1px solid rgba(0,0,0,0.2);
-	z-index:22;
+	z-index:2;
 }
 
 #mini-map pre {
-
 	font-family: 'SourceCodePro', monospace;	
 	white-space: pre;
 	word-wrap: normal;
 	border-color:transparent;
-	font-size:2px;
-	line-height:1px;
+	font-size:12px;
+	line-height:15px;
 	padding: 0;
 	margin:0;
 	background:transparent;
-	overflow:hidden;
-	width:135px;
 }
 
 @media (max-width: 600px) {

main.js

@@ -5,14 +5,10 @@ define(function (require, exports, module) {
 	"use strict";
 
 	require('jquery-ui-1.9.2.custom.min');
+    require('runmode');
 
-	var CommandManager = brackets.getModule("command/CommandManager"),
-		EditorManager = brackets.getModule("editor/EditorManager"),
-		ExtensionUtils = brackets.getModule("utils/ExtensionUtils"),
-		Editor = brackets.getModule("editor/Editor").Editor,
+	var ExtensionUtils = brackets.getModule("utils/ExtensionUtils"),
 		DocumentManager = brackets.getModule("document/DocumentManager"),
-		EditorUtils = brackets.getModule("editor/EditorUtils"),
-		Menus = brackets.getModule("command/Menus"),
 		COMMAND_ID = "me.drewh.brackets.minimap";
 
 	var loadCSSPromise = ExtensionUtils.loadStyleSheet(module, 'main.css');
@@ -23,7 +19,7 @@ define(function (require, exports, module) {
 	}
 
 	function _drawMap() {
-		$('.main-view').append('<div id="mini-map"><div class="selection"></div><div class="cm-s-default" id="mini-map-code"></div></div>');
+		$('.main-view').append('<div id="mini-map"><div class="selection"></div><pre id="mini-map-code" class="cm-s-default"></pre></div>');
 	}
 
 	function lineToPx(line) {
@@ -32,64 +28,76 @@ define(function (require, exports, module) {
 
 
 	function pxToLine(px) {
-		return px / 8.4;
+        return px / 8.4;
 	}
 
-
-	function _documentChange() {
-
-		var miniSelectionEl = $('#mini-map .selection');
-		var drag = false;
-		var height = $(window).height();
-
-		var editor = EditorManager.getCurrentFullEditor();
-
-		var lineCount = editor.lineCount();
-
-		console.log(lineCount);
-		var totalHeight = editor.totalHeight(true);
-		console.log(editor.totalHeight(true) + ' ' + height );
-
+    function _documentChange() {
+        try{
+            var editor = DocumentManager.getCurrentDocument()._masterEditor;
+            var drag = false;
+
+            var height = $(editor.getScrollerElement()).height();
+            var width = $(editor.getScrollerElement()).width();
+
+            var lineCount = editor.lineCount();
+
+            var miniSelectionEl = $('#mini-map .selection');
+            miniSelectionEl.css({
+                height: height + 'px',
+                width: width + 'px'
+            });
+
+            _documentUpdate();
+
+            var totalHeight = $("#mini-map").height();
+            console.log(totalHeight + ' ' + height );
+
+            var ratio = height/totalHeight>200/width?200/width:height/totalHeight;
+
+            $(miniSelectionEl).mousedown(function(e){
+                drag = true;
+            });
+
+            $(document).mousemove(function(e){
+                if(drag){
+                    var x = editor.getScrollPos().x;
+                    editor.setScrollPos(x, e.clientY*(1/ratio));
+                }
+            });
+
+            $(document).mouseup(function(e){
+                drag = false;
+            });
+
+            $("#mini-map").click(function(e){
+                var x = editor.getScrollPos().x;
+                var miniSelectionEl = $('#mini-map .selection')[0];
+                editor.setScrollPos(x, (e.clientY)*(1/ratio)-$(miniSelectionEl).height()/2);
+            });
+
+            $("#mini-map").css('-webkit-transform', 'scale('+ratio+')');
+
+            $(editor).on('scroll', function(e){
+                //if(!drag){
+                var height = $(editor.getScrollerElement()).height();
+                var totalHeight = editor.totalHeight(true);
+                var miniSelectionEl = $('#mini-map .selection')[0];
+                //console.log(miniSelectionEl);
+                //console.log(editor.getScrollPos().y);
+                miniSelectionEl.style.top = editor.getScrollPos().y+"px";
+                //}
+            });
+        } catch (e){
+            console.log("the document probably wasn't ready yet");
+            console.log(e);
+        }
+    }
+
+	function _documentUpdate() {
 		var doc = DocumentManager.getCurrentDocument();
-		console.log($(doc));
-		//var doc = editor.document;	
-
 		if (doc) {
 			//console.log($('.CodeMirror-lines div div:eq(2)').html());
-			_change($('.CodeMirror-lines div div:eq(2)').html());
-
-			$(doc).on('change', function () {
-				_change($('.CodeMirror-lines div div:eq(2)').html());
-			});
-
-			miniSelectionEl.css({
-				height: pxToLine(height) + 'px'
-			});
-
-			//			miniSelectionEl.draggable({
-			//				containment: "parent",
-			//				start: function () {
-			//					drag = true;
-			//				},
-			//				drag: function () {
-			//					drag = true;
-			//					var x = editor.getScrollPos().x;
-			//					var y = $('#mini-map .selection').offset().top - 40;
-			//					editor.setScrollPos(x, y);
-			//				},
-			//				stop: function () {
-			//					drag = false;
-			//				}
-			//			});
-			//
-			//			$(editor).on('scroll', function () {
-			//				if (drag === false) {
-			//					var y = editor.getScrollPos().y / 10;
-			//					miniSelectionEl.css({
-			//						'top': y + 'px'
-			//					});
-			//				}
-			//			});
+            CodeMirror.runMode(doc.getText(), doc._masterEditor._codeMirror.getOption("mode"), document.getElementById("mini-map-code"));
 		}
 	}
 
@@ -98,9 +106,8 @@ define(function (require, exports, module) {
 	loadCSSPromise.then(function () {
 		_drawMap();
 		_documentChange();
-		$(DocumentManager).on('currentDocumentChange', function (e) {
-			_documentChange();
-		});
+		$(DocumentManager).on('currentDocumentChange', _documentChange);
+        $(DocumentManager).on('documentSaved', _documentUpdate);
 	});
 
 });

runmode.js

@@ -0,0 +1,52 @@
+CodeMirror.runMode = function(string, modespec, callback, options) {
+  var mode = CodeMirror.getMode(CodeMirror.defaults, modespec);
+
+  if (callback.nodeType == 1) {
+    var tabSize = (options && options.tabSize) || CodeMirror.defaults.tabSize;
+    var node = callback, col = 0;
+    node.innerHTML = "";
+    callback = function(text, style) {
+      if (text == "\n") {
+        node.appendChild(document.createElement("br"));
+        col = 0;
+        return;
+      }
+      var content = "";
+      // replace tabs
+      for (var pos = 0;;) {
+        var idx = text.indexOf("\t", pos);
+        if (idx == -1) {
+          content += text.slice(pos);
+          col += text.length - pos;
+          break;
+        } else {
+          col += idx - pos;
+          content += text.slice(pos, idx);
+          var size = tabSize - col % tabSize;
+          col += size;
+          for (var i = 0; i < size; ++i) content += " ";
+          pos = idx + 1;
+        }
+      }
+
+      if (style) {
+        var sp = node.appendChild(document.createElement("span"));
+        sp.className = "cm-" + style.replace(/ +/g, " cm-");
+        sp.appendChild(document.createTextNode(content));
+      } else {
+        node.appendChild(document.createTextNode(content));
+      }
+    };
+  }
+
+  var lines = CodeMirror.splitLines(string), state = CodeMirror.startState(mode);
+  for (var i = 0, e = lines.length; i < e; ++i) {
+    if (i) callback("\n");
+    var stream = new CodeMirror.StringStream(lines[i]);
+    while (!stream.eol()) {
+      var style = mode.token(stream, state);
+      callback(stream.current(), style, i, stream.start);
+      stream.start = stream.pos;
+    }
+  }
+};