- tweak scroll controller speed

 - add sample code for overscrolling
 - bump version

Author: zbryikt

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Change Logs
 
+## v0.6.5
+
+ - tweak scroll controller speed
+ - add sample code for overscrolling
+
+
 ## v0.6.4
 
  - bug fix: check `ccfg` existence before using it

dist/index.js

@@ -479,6 +479,16 @@
       });
       _obj = this;
       this._slider = {
+        hc: function(evt){
+          var box, c, d;
+          box = evt.target.getBoundingClientRect();
+          c = box[this.t[3]] + box[this.t[4]] / 2;
+          d = this.dir * Math.sign(evt[this.t[2]] - c);
+          _obj[d < 0
+            ? this.t[1]
+            : this.t[0]](1);
+          return _obj.renderSelection();
+        },
         hd: function(evt){
           var this$ = this;
           this.on = true;
@@ -496,12 +506,23 @@
           return document.removeEventListener('mousemove', this.hm);
         },
         hm: function(evt){
-          var d, v, ref$;
+          var d, u, v;
           if (!this.on) {
             return;
           }
           d = this.p - evt[this.t[2]];
-          v = Math.sign(d) * this.dir * Math.round(Math.log((ref$ = Math.abs(d)) > 1 ? ref$ : 1));
+          u = Math.abs(d);
+          u = u > 500
+            ? 10
+            : u > 300
+              ? 5
+              : u > 150
+                ? 2
+                : u > 100 ? 1 : 0.3;
+          if (u < 1) {
+            u = Math.random() < u ? 1 : 0;
+          }
+          v = Math.sign(d) * this.dir * u;
           if (v > 0) {
             _obj[this.t[1]](v);
           }
@@ -515,20 +536,23 @@
         n: 'slide-y',
         on: false,
         p: 0,
-        t: ['_mu', '_md', 'clientY'],
+        t: ['_mu', '_md', 'clientY', 'y', 'height'],
         dir: -1
-      }, ref1$.hd = (ref$ = this._slider).hd, ref1$.hu = ref$.hu, ref1$.hm = ref$.hm, ref1$);
+      }, ref1$.hd = (ref$ = this._slider).hd, ref1$.hu = ref$.hu, ref1$.hm = ref$.hm, ref1$.hc = ref$.hc, ref1$);
       this._slider.x = (ref2$ = {
         n: 'slide-x',
         on: false,
         p: 0,
-        t: ['_mr', '_ml', 'clientX'],
+        t: ['_mr', '_ml', 'clientX', 'x', 'width'],
         dir: 1
-      }, ref2$.hd = (ref1$ = this._slider).hd, ref2$.hu = ref1$.hu, ref2$.hm = ref1$.hm, ref2$);
+      }, ref2$.hd = (ref1$ = this._slider).hd, ref2$.hu = ref1$.hu, ref2$.hm = ref1$.hm, ref2$.hc = ref1$.hc, ref2$);
       ['x', 'y'].map(function(n){
-        return this$.dom[this$._slider[n].n].addEventListener('mousedown', function(e){
+        this$.dom[this$._slider[n].n].addEventListener('mousedown', function(e){
           return this$._slider[n].hd(e);
         });
+        return this$.dom[this$._slider[n].n].addEventListener('click', function(e){
+          return this$._slider[n].hc(e);
+        });
       });
       return document.addEventListener('wheel', function(e){
         var inscope, spos, ref$, dx, dy, ox, oy;

dist/index.min.js

@@ -3,7 +3,7 @@
   "name": "@plotdb/sheet",
   "license": "MIT",
   "description": "spreadsheet",
-  "version": "0.6.4",
+  "version": "0.6.5",
   "style": "dist/index.min.css",
   "browser": "dist/index.min.js",
   "main": "dist/index.min.js",

package-lock.json

@@ -230,6 +230,12 @@ sheet.prototype = Object.create(Object.prototype) <<< do
 
     _obj = @
     @_slider =
+      hc: (evt) ->
+        box = evt.target.getBoundingClientRect!
+        c = box[@t.3] + (box[@t.4] / 2)
+        d = @dir * Math.sign(evt[@t.2] - c)
+        _obj[if d < 0 => @t.1 else @t.0](1)
+        _obj.render-selection!
       hd: (evt) ->
         @ <<< on: true, p: evt[@t.2]
         document.addEventListener \mouseup, (e) ~> @hu e
@@ -241,14 +247,19 @@ sheet.prototype = Object.create(Object.prototype) <<< do
       hm: (evt) ->
         if !@on => return
         d = @p - evt[@t.2]
-        v = Math.sign(d) * @dir * Math.round(Math.log(Math.abs(d) >? 1))
+        u = Math.abs(d)
+        u = if u > 500 => 10 else if u > 300 => 5 else if u > 150 => 2 else if u > 100 => 1 else 0.3
+        if u < 1 => u = if Math.random! < u => 1 else 0
+        v = Math.sign(d) * @dir * u
         if v > 0 => _obj[@t.1] v
         if v < 0 => _obj[@t.0] v
         _obj.render-selection!
-    @_slider.y = {n: \slide-y, on: false, p: 0, t: <[_mu _md clientY]>, dir: -1} <<< @_slider{hd, hu, hm}
-    @_slider.x = {n: \slide-x, on: false, p: 0, t: <[_mr _ml clientX]>, dir: 1} <<< @_slider{hd, hu, hm}
+    @_slider.y = {n: \slide-y, on: false, p: 0, t: <[_mu _md clientY y height]>, dir: -1} <<< @_slider{hd, hu, hm, hc}
+    @_slider.x = {n: \slide-x, on: false, p: 0, t: <[_mr _ml clientX x width]>, dir: 1} <<< @_slider{hd, hu, hm, hc}
 
-    <[x y]>.map (n) ~> @dom[@_slider[n].n].addEventListener \mousedown, (e) ~> @_slider[n].hd e
+    <[x y]>.map (n) ~>
+      @dom[@_slider[n].n].addEventListener \mousedown, (e) ~> @_slider[n].hd e
+      @dom[@_slider[n].n].addEventListener \click, (e) ~> @_slider[n].hc e
 
     document.addEventListener \wheel, ((e) ~>
       # we should block wheel event only if target element is under sheet.
@@ -281,6 +292,9 @@ sheet.prototype = Object.create(Object.prototype) <<< do
       else if dx > 0 => @_mr dx
       else if dx < 0 => @_ml dx
       @render-selection!
+      # # if we want to overscroll
+      # if @pos.row == 0 and e.deltaY < 0 => return
+      # if @pos.col == 0 and e.deltaX < 0 => return
       # despite the above hack, we still preventDefault here for default behavior.
       # that is, once users are scrolling in sheet, the event should not trigger default behavior.
       e.preventDefault!

package.json

@@ -479,6 +479,16 @@
       });
       _obj = this;
       this._slider = {
+        hc: function(evt){
+          var box, c, d;
+          box = evt.target.getBoundingClientRect();
+          c = box[this.t[3]] + box[this.t[4]] / 2;
+          d = this.dir * Math.sign(evt[this.t[2]] - c);
+          _obj[d < 0
+            ? this.t[1]
+            : this.t[0]](1);
+          return _obj.renderSelection();
+        },
         hd: function(evt){
           var this$ = this;
           this.on = true;
@@ -496,12 +506,23 @@
           return document.removeEventListener('mousemove', this.hm);
         },
         hm: function(evt){
-          var d, v, ref$;
+          var d, u, v;
           if (!this.on) {
             return;
           }
           d = this.p - evt[this.t[2]];
-          v = Math.sign(d) * this.dir * Math.round(Math.log((ref$ = Math.abs(d)) > 1 ? ref$ : 1));
+          u = Math.abs(d);
+          u = u > 500
+            ? 10
+            : u > 300
+              ? 5
+              : u > 150
+                ? 2
+                : u > 100 ? 1 : 0.3;
+          if (u < 1) {
+            u = Math.random() < u ? 1 : 0;
+          }
+          v = Math.sign(d) * this.dir * u;
           if (v > 0) {
             _obj[this.t[1]](v);
           }
@@ -515,20 +536,23 @@
         n: 'slide-y',
         on: false,
         p: 0,
-        t: ['_mu', '_md', 'clientY'],
+        t: ['_mu', '_md', 'clientY', 'y', 'height'],
         dir: -1
-      }, ref1$.hd = (ref$ = this._slider).hd, ref1$.hu = ref$.hu, ref1$.hm = ref$.hm, ref1$);
+      }, ref1$.hd = (ref$ = this._slider).hd, ref1$.hu = ref$.hu, ref1$.hm = ref$.hm, ref1$.hc = ref$.hc, ref1$);
       this._slider.x = (ref2$ = {
         n: 'slide-x',
         on: false,
         p: 0,
-        t: ['_mr', '_ml', 'clientX'],
+        t: ['_mr', '_ml', 'clientX', 'x', 'width'],
         dir: 1
-      }, ref2$.hd = (ref1$ = this._slider).hd, ref2$.hu = ref1$.hu, ref2$.hm = ref1$.hm, ref2$);
+      }, ref2$.hd = (ref1$ = this._slider).hd, ref2$.hu = ref1$.hu, ref2$.hm = ref1$.hm, ref2$.hc = ref1$.hc, ref2$);
       ['x', 'y'].map(function(n){
-        return this$.dom[this$._slider[n].n].addEventListener('mousedown', function(e){
+        this$.dom[this$._slider[n].n].addEventListener('mousedown', function(e){
           return this$._slider[n].hd(e);
         });
+        return this$.dom[this$._slider[n].n].addEventListener('click', function(e){
+          return this$._slider[n].hc(e);
+        });
       });
       return document.addEventListener('wheel', function(e){
         var inscope, spos, ref$, dx, dy, ox, oy;