Version bump to v0.3.0

dist/chartist-plugin-zoom.js

@@ -24,6 +24,7 @@
     var defaultOptions = {
       // onZoom
       // resetOnRightMouseBtn
+      pointClipOffset: 5
     };
 
 
@@ -45,10 +46,9 @@
 
         chart.on('draw', function (data) {
           var type = data.type;
+          var mask = type === 'point' ? 'point-mask' : 'line-mask';
           if (type === 'line' || type === 'bar' || type === 'area' || type === 'point') {
-            data.element.attr({
-              'clip-path': 'url(#zoom-mask)'
-            });
+            data.element.attr({ 'clip-path': 'url(#' + mask + ')' });
           }
         });
 
@@ -69,30 +69,40 @@
           var width = chartRect.width();
           var height = chartRect.height();
 
-          defs
-            .elem('clipPath', {
-              id: 'zoom-mask'
-            })
-            .elem('rect', {
-              x: chartRect.x1,
-              y: chartRect.y2,
-              width: width,
-              height: height,
-              fill: 'white'
-            });
-
-          svg.addEventListener('mousedown', onMouseDown);
-          svg.addEventListener('mouseup', onMouseUp);
-          svg.addEventListener('mousemove', onMouseMove);
-          svg.addEventListener('touchstart', onTouchStart);
-          svg.addEventListener('touchmove', onTouchMove);
-          svg.addEventListener('touchend', onTouchEnd);
-          svg.addEventListener('touchcancel', onTouchCancel);
+          function addMask(id, offset) {
+            defs
+              .elem('clipPath', {
+                id: id
+              })
+              .elem('rect', {
+                x: chartRect.x1 - offset,
+                y: chartRect.y2 - offset,
+                width: width + offset + offset,
+                height: height + offset + offset,
+                fill: 'white'
+              });
+          }
+          addMask('line-mask', 0);
+          addMask('point-mask', options.pointClipOffset);
+
+          function on(event, handler) {
+            svg.addEventListener(event, handler);
+          }
+
+          on('mousedown', onMouseDown);
+          on('mouseup', onMouseUp);
+          on('mousemove', onMouseMove);
+          on('touchstart', onTouchStart);
+          on('touchmove', onTouchMove);
+          on('touchend', onTouchEnd);
+          on('touchcancel', onTouchCancel);
         });
 
+
+
         function copyTouch(touch) {
           var p = position(touch, svg);
-          p.id = touch.identifier; 
+          p.id = touch.identifier;
           return p;
         }
 
@@ -110,7 +120,7 @@
           var touches = event.changedTouches;
           for (var i = 0; i < touches.length; i++) {
             ongoingTouches.push(copyTouch(touches[i]));
-          }        
+          }
 
           if (ongoingTouches.length > 1) {
             rect.attr(getRect(ongoingTouches[0], ongoingTouches[1]));
@@ -119,7 +129,7 @@
         }
 
         function onTouchMove(event) {
-          var touches = event.changedTouches;        
+          var touches = event.changedTouches;
           for (var i = 0; i < touches.length; i++) {
             var idx = ongoingTouchIndexById(touches[i].identifier);
             ongoingTouches.splice(idx, 1, copyTouch(touches[i]));
@@ -141,7 +151,7 @@
             var idx = ongoingTouchIndexById(touches[i].identifier);
             if (idx >= 0) {
               ongoingTouches.splice(idx, 1);
-            } 
+            }
           }
         }
 
@@ -155,13 +165,20 @@
 
         function onMouseDown(event) {
           if (event.button === 0) {
-            downPosition = position(event, svg);
-            rect.attr(getRect(downPosition, downPosition));
-            show(rect);
-            event.preventDefault();
+            var point = position(event, svg);
+            if (isInRect(point, chartRect)) {
+              downPosition = point;
+              rect.attr(getRect(downPosition, downPosition));
+              show(rect);
+              event.preventDefault();
+            }
           }
         }
 
+        function isInRect(point, rect) {
+          return point.x >= rect.x1 && point.x <= rect.x2 && point.y >= rect.y2 && point.y <= rect.y1;
+        }
+
         var reset = function () {
           chart.options.axisX.highLow = null;
           chart.options.axisY.highLow = null;
@@ -171,10 +188,9 @@
         function onMouseUp(event) {
           if (event.button === 0 && downPosition) {
             var box = getRect(downPosition, position(event, svg));
-            zoomIn(box);          
+            zoomIn(box);
             downPosition = null;
             hide(rect);
-            event.preventDefault();
           }
           else if (options.resetOnRightMouseBtn && event.button === 2) {
             reset();
@@ -184,10 +200,10 @@
 
         function zoomIn(rect) {
           if (rect.width > 5 && rect.height > 5) {
-              var x1 = rect.x - chartRect.x1;
-              var x2 = x1 + rect.width;
-              var y2 = chartRect.y1 - rect.y;
-              var y1 = y2 - rect.height;
+              var x1 = Math.max(0, rect.x - chartRect.x1);
+              var x2 = Math.min(chartRect.width(), x1 + rect.width);
+              var y2 = Math.min(chartRect.height(), chartRect.y1 - rect.y);
+              var y1 = Math.max(0, y2 - rect.height);
 
               chart.options.axisX.highLow = { low: project(x1, axisX), high: project(x2, axisX) };
               chart.options.axisY.highLow = { low: project(y1, axisY), high: project(y2, axisY) };
@@ -200,8 +216,10 @@
         function onMouseMove(event) {
           if (downPosition) {
             var point = position(event, svg);
-            rect.attr(getRect(downPosition, point));
-            event.preventDefault();
+            if (isInRect(point, chartRect)) {
+              rect.attr(getRect(downPosition, point));
+              event.preventDefault();
+            }
           }
         }
       };
@@ -267,6 +285,7 @@
     }
 
   } (window, document, Chartist));
+
   return Chartist.plugins.zoom;
 
 }));