Title: [197233] trunk/Source/WebInspectorUI
- Revision
- 197233
- Author
- [email protected]
- Date
- 2016-02-26 20:54:36 -0800 (Fri, 26 Feb 2016)
Log Message
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>
Patch by Devin Rousso <[email protected]> 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):
Modified Paths
Diff
Modified: trunk/Source/WebInspectorUI/ChangeLog (197232 => 197233)
--- trunk/Source/WebInspectorUI/ChangeLog 2016-02-27 04:43:57 UTC (rev 197232)
+++ trunk/Source/WebInspectorUI/ChangeLog 2016-02-27 04:54:36 UTC (rev 197233)
@@ -1,5 +1,25 @@
2016-02-26 Devin Rousso <[email protected]>
+ 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 <[email protected]>
+
Web Inspector: Option-clicking on the a CSS property sometimes doesn't work
https://bugs.webkit.org/show_bug.cgi?id=154384
<rdar://problem/24714755>
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/BezierEditor.js (197232 => 197233)
--- trunk/Source/WebInspectorUI/UserInterface/Views/BezierEditor.js 2016-02-27 04:43:57 UTC (rev 197232)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/BezierEditor.js 2016-02-27 04:54:36 UTC (rev 197233)
@@ -103,7 +103,10 @@
this._element.appendChild(this._bezierPreviewTiming);
this._selectedControl = null;
+ this._mouseDownPosition = null;
this._bezierContainer.addEventListener("mousedown", this);
+
+ WebInspector.addWindowKeydownListener(this);
}
// Public
@@ -153,6 +156,47 @@
}
}
+ 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 @@
_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 @@
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();
_______________________________________________
webkit-changes mailing list
[email protected]
https://lists.webkit.org/mailman/listinfo/webkit-changes
