Bump 0.0.4

History.md

@@ -1,11 +1,19 @@
+
+0.0.4 / 2014-03-16
+==================
+
+* add gray overlayer, toggle display over/leave
+* support mousewheel, sync editor and minimap scrollTop
+
+
 0.0.3 / 2014-03-14
 ==================
 
-  * fix #2, minimap is appearing on the right when opening settings tab
-  * fix #3, opening settings tab breaks when minimap is use
+* fix #2, minimap is appearing on the right when opening settings tab
+* fix #3, opening settings tab breaks when minimap is use
 
 0.0.2 / 2014-03-13
 ==================
 
-  * add minimap-editor-view
-  * add monitor tab-bar and file-tree
+* add minimap-editor-view
+* add monitor tab-bar and file-tree

Readme.md

@@ -3,13 +3,20 @@
 
 ![](https://github.com/fundon/atom-minimap/blob/master/resources/minimap-dark.png?raw=true)
 
+### Features
+
+* Gray overlayer
+* Supports mousewheel
+
+
 ### Todo list:
 
 * ~~Mointor TabPage/File tree state [new, close, move, active]~~
 * Monitor Editor state [scroll, resize, edit]
 * Monitor Window state [resize]
-* Minimap adds some events[mouse, scroll]
+* ~~Minimap adds some events[mouse, scroll]~~
 * Constom Minimap style
-* Some behaviour more like Sublime Text minimap
+* ~~Some behaviour more like Sublime Text minimap~~
 * Bind Keys
 * Performance improvement
+* Drag overlayer, and sync scroll

lib/minimap-view.coffee

@@ -7,6 +7,9 @@ class MinimapView extends View
   @CONFIGS = {
   }
 
+  @minTop: 0
+  @maxTop: 0
+
   @content: ->
     @div class: 'minimap', =>
       @div outlet: 'miniOverlayer', class: "minimap-overlayer"
@@ -20,6 +23,9 @@ class MinimapView extends View
     @subscribe atom.workspaceView, 'cursor:moved', =>
       @update()
 
+    this.off('mousewheel')
+    this.on('mousewheel', @mousewheelFn.bind(this))
+
   attach: ->
 
   destroy: ->
@@ -64,40 +70,118 @@ class MinimapView extends View
     if this.hasClass('hide')
       this.removeClass('hide')
 
+    @editor.off('scroll-top-changed.editor')
+    @editor.on('scroll-top-changed.editor', @scroll.bind(this))
+
     top = @editorView.offset().top
     this.css('top', top + 'px')
 
     @reset()
 
     @miniEditorView.update(@editor.getText(), @editor.displayBuffer.screenLines)
 
-    editorRect = @scrollView[0].getBoundingClientRect()
+    @editorRect = @scrollView[0].getBoundingClientRect()
     linesRect = @scrollView.find('.lines')[0].getBoundingClientRect()
     miniRect = @miniEditorView.getClientRect()
 
+    @minTop = 0
+    @maxTop = @miniEditorView.height()
+
+    @miniEditorView.find('.scroll-view').css({
+      top: 0
+    })
+
+    # height of editor
+    a = @editorRect.height / miniRect.height
+    # 180 height
+    @miniOverlayer.css({
+      height: miniRect.height * a,
+      top: 0
+    })
+
+    height = miniRect.height
     width = Math.max(150, miniRect.width)
 
-    if linesRect.height < editorRect.height
-      scaleX = 0.2
-      width = 150 / scaleX
+    if linesRect.height < @editorRect.height
+      @scaleX = 0.2
+      width = 150 / @scaleX
     else
-      scaleX = 150 / miniRect.width
+      @scaleX = 150 / miniRect.width
 
-    scaleY = scaleX
-    scaleStr = 'scale(' + scaleX + ', ' + scaleY + ')'
+    @scaleX = Math.max(@scaleX, 0.1)
+
+    x = width - 150 / @scaleX
+    y = 0
+
+    # --- test
+    #@scaleX = .3
+    #@scaleY = .3
+    # --- test
+    @scaleY = @scaleX
+    scaleStr = 'scale(' + @scaleX + ', ' + @scaleY + ')'
+    translateStr = 'translate(' + x + 'px, ' + y + 'px)'
     this.css({
       width: width,
-      '-webkit-transform': scaleStr,
-      'transform': scaleStr
+      '-webkit-transform': scaleStr + ' ' + translateStr,
+      'transform': scaleStr + ' ' + translateStr
     })
 
+    @scroll(@editorView.scrollTop())
+
   reset: ->
     scaleX = 1
     scaleY = scaleX
     scaleStr = 'scale(' + scaleX + ', ' + scaleY + ')'
+    translateStr = 'translate(0, 0)'
 
     this.css({
       width: 150,
-      '-webkit-transform': scaleStr,
-      'transform': scaleStr
+      '-webkit-transform': scaleStr + ' ' + translateStr,
+      'transform': scaleStr + ' ' + translateStr
     })
+
+  mousewheelFn: (e) ->
+    delta = e.originalEvent.wheelDeltaY
+    if delta
+      @editorView.scrollTop(@editorView.scrollTop() - delta)
+
+      #h = @miniEditorView.height() * @scaleX
+
+      #if h > @scrollView.height()
+      #  t = parseInt(@miniEditorView.find('.scroll-view').css('top'))
+      #  t += delta
+      #  t = Math.min(t, 0)
+      #  #t = Math.max(Math.min(t, @maxTop - @miniOverlayer.height()), @minTop)
+      #  @miniEditorView.find('.scroll-view').css({
+      #    top: t
+      #  })
+      #  #n = parseInt(@miniOverlayer.css('top'))
+      #  #n -= delta
+      #  #n = Math.max(Math.min(n, t + ), @minTop)
+      #  @miniOverlayer.css({
+      #    top: n
+      #  })
+      #else
+      #  t = parseInt(@miniOverlayer.css('top'))
+      #  t -= delta
+      #  t = Math.max(Math.min(t, @maxTop - @miniOverlayer.height()), @minTop)
+      #  @miniOverlayer.css({
+      #    top: t
+      #  })
+
+  scroll: (top) ->
+    h = @miniEditorView.height() * @scaleX
+
+    if h > @scrollView.height()
+      n = (top) / (@editorView.find('.lines').outerHeight() - @editorView.height())
+      sv = @miniEditorView.find('.scroll-view')
+      sv.css({
+        top: -(sv.outerHeight() - @miniOverlayer.height() / @scaleX) * n
+      })
+      @miniOverlayer.css({
+        top: n * (@miniOverlayer.height() / @scaleX - @miniOverlayer.height())
+      })
+    else
+      @miniOverlayer.css({
+        top: top
+      })

package.json

@@ -1,7 +1,7 @@
 {
   "name": "minimap",
   "main": "./lib/minimap",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "private": true,
   "description": "A preview of the full source code.",
   "activationEvents": ["minimap:toggle"],

stylesheets/minimap.less

@@ -9,10 +9,10 @@
   left: inherit;
   right: 0;
   box-sizing: border-box;
-  opacity: 0.8;
+  opacity: .8;
   width: 150px;
   height: 100%;
-  -webkit-transform: scale(1);
+  -webkit-transform: scale(1) translate(0, 0);
   -webkit-transform-origin: right top;
 
   .minimap-editor {
@@ -21,13 +21,20 @@
   }
 
   .minimap-overlayer {
+    visibility: hidden;
     width: 100%;
+    position: absolute;
+    background-color: #888;
+    opacity: .5;
+  }
+
+  &:hover .minimap-overlayer {
+    visibility: visible;
   }
 
-  /*
-  .editor {
+  .minimap-editor {
     .scroll-view {
+      top: 0;
     }
   }
-  */
 }