Web Inspector: Keyboard controls to nudge control points in custom tr…

…ansition bezier curve editor would be nice

https://bugs.webkit.org/show_bug.cgi?id=154739
<rdar://problem/24861498>

Patch by Devin Rousso <dcrousso+webkit@gmail.com> on 2016-02-26
Reviewed by Timothy Hatcher.

Adds ability for user to nudge the most recently selected bezier control
handle by using the arrow keys. Also makes the currently selected bezier
control line snap to an axis, which is defined when the user mouses down,
whenever the mouse is dragged while the shift key is pressed.

* UserInterface/Views/BezierEditor.js:
(WebInspector.BezierEditor):
(WebInspector.BezierEditor.prototype.handleKeydownEvent):
(WebInspector.BezierEditor.prototype._handleMouseup):
(WebInspector.BezierEditor.prototype._updateControlPointsForMouseEvent):

Canonical link: https://commits.webkit.org/172867@main
git-svn-id: https://svn.webkit.org/repository/webkit/trunk@197233 268f45cc-cd09-0410-ab3c-d52691b4dbfc

Source/WebInspectorUI/ChangeLog

@@ -1,3 +1,23 @@
+2016-02-26  Devin Rousso  <dcrousso+webkit@gmail.com>
+
+        Web Inspector: Keyboard controls to nudge control points in custom transition bezier curve editor would be nice
+        https://bugs.webkit.org/show_bug.cgi?id=154739
+        <rdar://problem/24861498>
+
+        Reviewed by Timothy Hatcher.
+
+        Adds ability for user to nudge the most recently selected bezier control
+        handle by using the arrow keys. Also makes the currently selected bezier
+        control line snap to an axis, which is defined when the user mouses down,
+        whenever the mouse is dragged while the shift key is pressed.
+
+
+        * UserInterface/Views/BezierEditor.js:
+        (WebInspector.BezierEditor):
+        (WebInspector.BezierEditor.prototype.handleKeydownEvent):
+        (WebInspector.BezierEditor.prototype._handleMouseup):
+        (WebInspector.BezierEditor.prototype._updateControlPointsForMouseEvent):
+
 2016-02-26  Devin Rousso  <dcrousso+webkit@gmail.com>
 
         Web Inspector: Option-clicking on the a CSS property sometimes doesn't work

Source/WebInspectorUI/UserInterface/Views/BezierEditor.js

@@ -103,7 +103,10 @@ WebInspector.BezierEditor = class BezierEditor extends WebInspector.Object
         this._element.appendChild(this._bezierPreviewTiming);
 
         this._selectedControl = null;
+        this._mouseDownPosition = null;
         this._bezierContainer.addEventListener("mousedown", this);
+
+        WebInspector.addWindowKeydownListener(this);
     }
 
     // Public
@@ -153,6 +156,47 @@ WebInspector.BezierEditor = class BezierEditor extends WebInspector.Object
         }
     }
 
+    handleKeydownEvent(event)
+    {
+        if (!this._selectedControl || !this._element.parentNode)
+            return false;
+
+
+        let horizontal = 0;
+        let vertical = 0;
+        switch (event.keyCode) {
+        case WebInspector.KeyboardShortcut.Key.Up.keyCode:
+            vertical = -1;
+            break;
+        case WebInspector.KeyboardShortcut.Key.Right.keyCode:
+            horizontal = 1;
+            break;
+        case WebInspector.KeyboardShortcut.Key.Down.keyCode:
+            vertical = 1;
+            break;
+        case WebInspector.KeyboardShortcut.Key.Left.keyCode:
+            horizontal = -1;
+            break;
+        default:
+            return false;
+        }
+
+        if (event.shiftKey) {
+            horizontal *= 10;
+            vertical *= 10;
+        }
+
+        vertical *= this._bezierWidth / 100;
+        horizontal *= this._bezierHeight / 100;
+
+        this._selectedControl.point.x = Number.constrain(this._selectedControl.point.x + horizontal, 0, this._bezierWidth);
+        this._selectedControl.point.y += vertical;
+        this._updateControl(this._selectedControl);
+        this._updateValue();
+
+        return true;
+    }
+
     // Private
 
     _handleMousedown(event)
@@ -177,7 +221,7 @@ WebInspector.BezierEditor = class BezierEditor extends WebInspector.Object
     _handleMouseup(event)
     {
         this._selectedControl.handle.classList.remove("selected");
-        this._selectedControl = null;
+        this._mouseDownPosition = null;
         this._triggerPreviewAnimation();
 
         window.removeEventListener("mousemove", this, true);
@@ -191,12 +235,21 @@ WebInspector.BezierEditor = class BezierEditor extends WebInspector.Object
         point.y -= this._controlHandleRadius + this._padding;
 
         if (calculateSelectedControlPoint) {
+            this._mouseDownPosition = point;
+
             if (this._inControl.point.distance(point) < this._outControl.point.distance(point))
                 this._selectedControl = this._inControl;
             else
                 this._selectedControl = this._outControl;
         }
 
+        if (event.shiftKey && this._mouseDownPosition) {
+            if (Math.abs(this._mouseDownPosition.x - point.x) > Math.abs(this._mouseDownPosition.y - point.y))
+                point.y = this._mouseDownPosition.y;
+            else
+                point.x = this._mouseDownPosition.x;
+        }
+
         this._selectedControl.point = point;
         this._selectedControl.handle.classList.add("selected");
         this._updateValue();