codemirror-cubic-bezier - npm Package Compare versions

Comparing version 1.0.1 to 1.0.2

addon/cubic-bezier/cubic-bezier.js

@@ -73,5 +73,5 @@ (function(mod) {
         var $root, $bezier, $canvas, $control, $pointer1, $pointer2;
-        var $animationCanvas, $animation, $itemList , $item1, $item2, $item3, $predefined, $left, $right, $text;
+        var $animationCanvas, $animation, $itemList , $item1, $item2, $item3 , $item1Canvas, $item2Canvas, $item3Canvas, $predefined, $left, $right, $text;
         var currentBezier = [0, 0, 1, 1], currentBezierIndex = 0;
-        var timer, bezierList = [
+        var timer, animationTimer, bezierList = [
             [  0.47, 0, 0.745, 0.715,  'ease-in-sine'],
@@ -91,2 +91,4 @@ [  0.39, 0.575, 0.565, 1,  'ease-out-sine'],
 
+        var DRAG_AREA = 50;
+
         var bezierObj = {
@@ -354,6 +356,7 @@ "ease" : "cubic-bezier(0.25, 0.1, 0.25, 1)",
             if (timer) clearTimeout(timer);
+            if (animationTimer) clearTimeout(animationTimer);
 
             timer = setTimeout(function () {
                 animationPoint ();
-            }, 500);
+            }, 100);
         }
@@ -381,3 +384,3 @@
                 var pos = func(i);
-                var x = 20 + (width-40) * pos.x;
+                var x = 20 + (width-40) * pos.y;        // y
 
@@ -394,3 +397,3 @@ context.beginPath();
 
-                setTimeout(function () { start(i - 0.05); }, 50);
+                animationTimer = setTimeout(function () { start(i - 0.05); }, 50);
             }
@@ -498,4 +501,29 @@
             addEvent($item3.el, 'click', EventItem3Click);
+
+            addEvent($animationCanvas.el, 'click', EventAnimationCanvasClick);
         }
 
+        function destroy() {
+            removeEvent($pointer1.el, 'mousedown', EventPointer1MouseDown);
+            removeEvent($pointer2.el, 'mousedown', EventPointer2MouseDown);
+
+            removeEvent($left.el, 'click', EventLeftClick);
+            removeEvent($right.el, 'click', EventRightClick);
+
+            removeEvent(document, 'mouseup', EventDocumentMouseUp);
+            removeEvent(document, 'mousemove', EventDocumentMouseMove);
+
+
+            removeEvent($item1.el, 'click', EventItem1Click);
+            removeEvent($item2.el, 'click', EventItem2Click);
+            removeEvent($item3.el, 'click', EventItem3Click);
+
+            // remove color picker callback
+            cubicbezierCallback = undefined;
+        }
+
+        function EventAnimationCanvasClick() {
+            drawPoint();
+        }
+
         function EventItem1Click ()  {
@@ -599,3 +627,4 @@ var bezierString = $item1.attr('data-bezier');
 
-        function setPosition1($pointer, e) {
+        function setPosition($pointer, e) {
+            var bheight = $root.height()-$pointer.width()*3;
 
@@ -605,2 +634,5 @@ var width = $control.width();
 
+            var drag_area_w = 0;
+            var drag_area_h = Math.abs(bheight - height)/2;
+
             var minX = $control.offset().left;
@@ -615,50 +647,17 @@ var maxX = minX + width;
             var x = p.clientX - minX;
-            if (0 > x) {
-                x = 0;
-            } else if (p.clientX > maxX) {
-                x = maxX - minX;
+            if (-drag_area_w > x) {
+                x = -drag_area_w;
+            } else if (p.clientX > maxX + drag_area_w) {
+                x = maxX + drag_area_w - minX;
             }
 
-            var y = p.clientY - minY;
+            var y = p.clientY;
             if (0 > y) {
                 y = 0;
-            } else if (p.clientY > maxY) {
-                y = maxY - minY;
+            } else if (p.clientY > document.body.clientHeight) {
+                y = document.body.clientHeight;
             }
 
-            $pointer.css({
-                left: x + 'px',
-                top : y + 'px'
-            });
+            y -= minY;
 
-            return { x : (x == 0 )? 0 : x / width, y : (y == height ) ? 0 : (height-y) / height };
-        }
-
-        function setPosition2($pointer, e) {
-
-            var width = $control.width();
-            var height = $control.height();
-
-            var minX = $control.offset().left;
-            var maxX = minX + width;
-
-            var minY = $control.offset().top;
-            var maxY = minY + height;
-
-            var p = pos(e);
-
-            var x = p.clientX - minX;
-            if (0 > x) {
-                x = 0;
-            } else if (p.clientX > maxX) {
-                x = maxX - minX;
-            }
-
-            var y = p.clientY - minY;
-            if (0 > y) {
-                y = 0;
-            } else if (p.clientY > maxY) {
-                y = maxY - minY;
-            }
-
             $pointer.css({
@@ -674,3 +673,3 @@ left: x + 'px',
 
-            var pos = setPosition1($pointer1, e);
+            var pos = setPosition($pointer1, e);
 
@@ -686,3 +685,3 @@ currentBezier[0] = pos.x;
         function setPointer2(e) {
-            var pos = setPosition2($pointer2, e);
+            var pos = setPosition($pointer2, e);
 
@@ -697,21 +696,4 @@ currentBezier[2] = pos.x;
 
-        function destroy() {
-            removeEvent($pointer1.el, 'mousedown', EventPointer1MouseDown);
-            removeEvent($pointer2.el, 'mousedown', EventPointer2MouseDown);
 
-            removeEvent($left.el, 'click', EventLeftClick);
-            removeEvent($right.el, 'click', EventRightClick);
 
-            removeEvent(document, 'mouseup', EventDocumentMouseUp);
-            removeEvent(document, 'mousemove', EventDocumentMouseMove);
-
-
-            removeEvent($item1.el, 'click', EventItem1Click);
-            removeEvent($item2.el, 'click', EventItem2Click);
-            removeEvent($item3.el, 'click', EventItem3Click);
-
-            // remove color picker callback
-            cubicbezierCallback = undefined;
-        }
-
         function init() {
@@ -728,3 +710,3 @@ $root = new dom('div', 'codemirror-cubicbezier');
 
-            $animationCanvas = new dom('canvas', 'animation-canvas', { width: '280px', height : '50px'} );
+            $animationCanvas = new dom('canvas', 'animation-canvas', { width: '270px', height : '50px', 'title' : 'Click and Replay point animation'} );
 
@@ -754,3 +736,3 @@ $animation.append($animationCanvas);
             $left = new dom('div', 'left').html('〈');
-            $right = new dom('div', 'right').html('>');
+            $right = new dom('div', 'right').html('〉');
             $text = new dom('div', 'predefined-text').html('ease-in');
@@ -769,6 +751,6 @@
 
-            $root.append($bezier);
             $root.append($predefined);
             $root.append($animation);
             $root.append($itemList);
+            $root.append($bezier);
 
@@ -775,0 +757,0 @@ initBezier();

package.json

 {
   "name": "codemirror-cubic-bezier",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "cubic-bezier for codemirror",
@@ -5,0 +5,0 @@ "main": "index.js",

No alert changes

Worsened metrics

Total package byte prevSize

41040

decreased by-0.75%

Lines of code

966

decreased by-1.83%

No dependency changes