Index: third_party/WebKit/Source/devtools/front_end/layer_viewer/TransformController.js |
diff --git a/third_party/WebKit/Source/devtools/front_end/layer_viewer/TransformController.js b/third_party/WebKit/Source/devtools/front_end/layer_viewer/TransformController.js |
index 7e1d9e4bed634e9c6a8fa4864ce697ab5a1f9d0b..6f7fbb6ef9791f61a9e7f5db1861a9a642ffe40e 100644 |
--- a/third_party/WebKit/Source/devtools/front_end/layer_viewer/TransformController.js |
+++ b/third_party/WebKit/Source/devtools/front_end/layer_viewer/TransformController.js |
@@ -3,331 +3,322 @@ |
* Use of this source code is governed by a BSD-style license that can be |
* found in the LICENSE file. |
*/ |
- |
/** |
- * @constructor |
- * @extends {WebInspector.Object} |
- * @param {!Element} element |
- * @param {boolean=} disableRotate |
+ * @unrestricted |
*/ |
-WebInspector.TransformController = function(element, disableRotate) |
-{ |
+WebInspector.TransformController = class extends WebInspector.Object { |
+ /** |
+ * @param {!Element} element |
+ * @param {boolean=} disableRotate |
+ */ |
+ constructor(element, disableRotate) { |
+ super(); |
this._shortcuts = {}; |
this.element = element; |
if (this.element.tabIndex < 0) |
- this.element.tabIndex = 0; |
+ this.element.tabIndex = 0; |
this._registerShortcuts(); |
- WebInspector.installDragHandle(element, this._onDragStart.bind(this), this._onDrag.bind(this), this._onDragEnd.bind(this), "move", null); |
- element.addEventListener("keydown", this._onKeyDown.bind(this), false); |
- element.addEventListener("keyup", this._onKeyUp.bind(this), false); |
- element.addEventListener("mousewheel", this._onMouseWheel.bind(this), false); |
+ WebInspector.installDragHandle( |
+ element, this._onDragStart.bind(this), this._onDrag.bind(this), this._onDragEnd.bind(this), 'move', null); |
+ element.addEventListener('keydown', this._onKeyDown.bind(this), false); |
+ element.addEventListener('keyup', this._onKeyUp.bind(this), false); |
+ element.addEventListener('mousewheel', this._onMouseWheel.bind(this), false); |
this._minScale = 0; |
this._maxScale = Infinity; |
- this._controlPanelToolbar = new WebInspector.Toolbar("transform-control-panel"); |
+ this._controlPanelToolbar = new WebInspector.Toolbar('transform-control-panel'); |
/** @type {!Object<string, !WebInspector.ToolbarToggle>} */ |
this._modeButtons = {}; |
if (!disableRotate) { |
- var panModeButton = new WebInspector.ToolbarToggle(WebInspector.UIString("Pan mode (X)"), "pan-toolbar-item"); |
- panModeButton.addEventListener("click", this._setMode.bind(this, WebInspector.TransformController.Modes.Pan)); |
- this._modeButtons[WebInspector.TransformController.Modes.Pan] = panModeButton; |
- this._controlPanelToolbar.appendToolbarItem(panModeButton); |
- var rotateModeButton = new WebInspector.ToolbarToggle(WebInspector.UIString("Rotate mode (V)"), "rotate-toolbar-item"); |
- rotateModeButton.addEventListener("click", this._setMode.bind(this, WebInspector.TransformController.Modes.Rotate)); |
- this._modeButtons[WebInspector.TransformController.Modes.Rotate] = rotateModeButton; |
- this._controlPanelToolbar.appendToolbarItem(rotateModeButton); |
+ var panModeButton = new WebInspector.ToolbarToggle(WebInspector.UIString('Pan mode (X)'), 'pan-toolbar-item'); |
+ panModeButton.addEventListener('click', this._setMode.bind(this, WebInspector.TransformController.Modes.Pan)); |
+ this._modeButtons[WebInspector.TransformController.Modes.Pan] = panModeButton; |
+ this._controlPanelToolbar.appendToolbarItem(panModeButton); |
+ var rotateModeButton = |
+ new WebInspector.ToolbarToggle(WebInspector.UIString('Rotate mode (V)'), 'rotate-toolbar-item'); |
+ rotateModeButton.addEventListener( |
+ 'click', this._setMode.bind(this, WebInspector.TransformController.Modes.Rotate)); |
+ this._modeButtons[WebInspector.TransformController.Modes.Rotate] = rotateModeButton; |
+ this._controlPanelToolbar.appendToolbarItem(rotateModeButton); |
} |
this._setMode(WebInspector.TransformController.Modes.Pan); |
- var resetButton = new WebInspector.ToolbarButton(WebInspector.UIString("Reset transform (0)"), "center-toolbar-item"); |
- resetButton.addEventListener("click", this.resetAndNotify.bind(this, undefined)); |
+ var resetButton = |
+ new WebInspector.ToolbarButton(WebInspector.UIString('Reset transform (0)'), 'center-toolbar-item'); |
+ resetButton.addEventListener('click', this.resetAndNotify.bind(this, undefined)); |
this._controlPanelToolbar.appendToolbarItem(resetButton); |
this._reset(); |
+ } |
+ |
+ /** |
+ * @return {!WebInspector.Toolbar} |
+ */ |
+ toolbar() { |
+ return this._controlPanelToolbar; |
+ } |
+ |
+ _onKeyDown(event) { |
+ if (event.keyCode === WebInspector.KeyboardShortcut.Keys.Shift.code) { |
+ this._toggleMode(); |
+ return; |
+ } |
+ |
+ var shortcutKey = WebInspector.KeyboardShortcut.makeKeyFromEventIgnoringModifiers(event); |
+ var handler = this._shortcuts[shortcutKey]; |
+ if (handler && handler(event)) |
+ event.consume(); |
+ } |
+ |
+ _onKeyUp(event) { |
+ if (event.keyCode === WebInspector.KeyboardShortcut.Keys.Shift.code) |
+ this._toggleMode(); |
+ } |
+ |
+ _addShortcuts(keys, handler) { |
+ for (var i = 0; i < keys.length; ++i) |
+ this._shortcuts[keys[i].key] = handler; |
+ } |
+ |
+ _registerShortcuts() { |
+ this._addShortcuts(WebInspector.ShortcutsScreen.LayersPanelShortcuts.ResetView, this.resetAndNotify.bind(this)); |
+ this._addShortcuts( |
+ WebInspector.ShortcutsScreen.LayersPanelShortcuts.PanMode, |
+ this._setMode.bind(this, WebInspector.TransformController.Modes.Pan)); |
+ this._addShortcuts( |
+ WebInspector.ShortcutsScreen.LayersPanelShortcuts.RotateMode, |
+ this._setMode.bind(this, WebInspector.TransformController.Modes.Rotate)); |
+ var zoomFactor = 1.1; |
+ this._addShortcuts( |
+ WebInspector.ShortcutsScreen.LayersPanelShortcuts.ZoomIn, this._onKeyboardZoom.bind(this, zoomFactor)); |
+ this._addShortcuts( |
+ WebInspector.ShortcutsScreen.LayersPanelShortcuts.ZoomOut, this._onKeyboardZoom.bind(this, 1 / zoomFactor)); |
+ this._addShortcuts( |
+ WebInspector.ShortcutsScreen.LayersPanelShortcuts.Up, this._onKeyboardPanOrRotate.bind(this, 0, -1)); |
+ this._addShortcuts( |
+ WebInspector.ShortcutsScreen.LayersPanelShortcuts.Down, this._onKeyboardPanOrRotate.bind(this, 0, 1)); |
+ this._addShortcuts( |
+ WebInspector.ShortcutsScreen.LayersPanelShortcuts.Left, this._onKeyboardPanOrRotate.bind(this, -1, 0)); |
+ this._addShortcuts( |
+ WebInspector.ShortcutsScreen.LayersPanelShortcuts.Right, this._onKeyboardPanOrRotate.bind(this, 1, 0)); |
+ } |
+ |
+ _postChangeEvent() { |
+ this.dispatchEventToListeners(WebInspector.TransformController.Events.TransformChanged); |
+ } |
+ |
+ _reset() { |
+ this._scale = 1; |
+ this._offsetX = 0; |
+ this._offsetY = 0; |
+ this._rotateX = 0; |
+ this._rotateY = 0; |
+ } |
+ |
+ _toggleMode() { |
+ this._setMode( |
+ this._mode === WebInspector.TransformController.Modes.Pan ? WebInspector.TransformController.Modes.Rotate : |
+ WebInspector.TransformController.Modes.Pan); |
+ } |
+ |
+ /** |
+ * @param {!WebInspector.TransformController.Modes} mode |
+ */ |
+ _setMode(mode) { |
+ if (this._mode === mode) |
+ return; |
+ this._mode = mode; |
+ this._updateModeButtons(); |
+ this.element.focus(); |
+ } |
+ |
+ _updateModeButtons() { |
+ for (var mode in this._modeButtons) |
+ this._modeButtons[mode].setToggled(mode === this._mode); |
+ } |
+ |
+ /** |
+ * @param {!Event=} event |
+ */ |
+ resetAndNotify(event) { |
+ this._reset(); |
+ this._postChangeEvent(); |
+ if (event) |
+ event.preventDefault(); |
+ this.element.focus(); |
+ } |
+ |
+ /** |
+ * @param {number} minScale |
+ * @param {number} maxScale |
+ */ |
+ setScaleConstraints(minScale, maxScale) { |
+ this._minScale = minScale; |
+ this._maxScale = maxScale; |
+ this._scale = Number.constrain(this._scale, minScale, maxScale); |
+ } |
+ |
+ /** |
+ * @param {number} minX |
+ * @param {number} maxX |
+ * @param {number} minY |
+ * @param {number} maxY |
+ */ |
+ clampOffsets(minX, maxX, minY, maxY) { |
+ this._offsetX = Number.constrain(this._offsetX, minX, maxX); |
+ this._offsetY = Number.constrain(this._offsetY, minY, maxY); |
+ } |
+ |
+ /** |
+ * @return {number} |
+ */ |
+ scale() { |
+ return this._scale; |
+ } |
+ |
+ /** |
+ * @return {number} |
+ */ |
+ offsetX() { |
+ return this._offsetX; |
+ } |
+ |
+ /** |
+ * @return {number} |
+ */ |
+ offsetY() { |
+ return this._offsetY; |
+ } |
+ |
+ /** |
+ * @return {number} |
+ */ |
+ rotateX() { |
+ return this._rotateX; |
+ } |
+ |
+ /** |
+ * @return {number} |
+ */ |
+ rotateY() { |
+ return this._rotateY; |
+ } |
+ |
+ /** |
+ * @param {number} scaleFactor |
+ * @param {number} x |
+ * @param {number} y |
+ */ |
+ _onScale(scaleFactor, x, y) { |
+ scaleFactor = Number.constrain(this._scale * scaleFactor, this._minScale, this._maxScale) / this._scale; |
+ this._scale *= scaleFactor; |
+ this._offsetX -= (x - this._offsetX) * (scaleFactor - 1); |
+ this._offsetY -= (y - this._offsetY) * (scaleFactor - 1); |
+ this._postChangeEvent(); |
+ } |
+ |
+ /** |
+ * @param {number} offsetX |
+ * @param {number} offsetY |
+ */ |
+ _onPan(offsetX, offsetY) { |
+ this._offsetX += offsetX; |
+ this._offsetY += offsetY; |
+ this._postChangeEvent(); |
+ } |
+ |
+ /** |
+ * @param {number} rotateX |
+ * @param {number} rotateY |
+ */ |
+ _onRotate(rotateX, rotateY) { |
+ this._rotateX = rotateX; |
+ this._rotateY = rotateY; |
+ this._postChangeEvent(); |
+ } |
+ |
+ /** |
+ * @param {number} zoomFactor |
+ */ |
+ _onKeyboardZoom(zoomFactor) { |
+ this._onScale(zoomFactor, this.element.clientWidth / 2, this.element.clientHeight / 2); |
+ } |
+ |
+ /** |
+ * @param {number} xMultiplier |
+ * @param {number} yMultiplier |
+ */ |
+ _onKeyboardPanOrRotate(xMultiplier, yMultiplier) { |
+ var panStepInPixels = 6; |
+ var rotateStepInDegrees = 5; |
+ |
+ if (this._mode === WebInspector.TransformController.Modes.Rotate) { |
+ // Sic! _onRotate treats X and Y as "rotate around X" and "rotate around Y", so swap X/Y multiplers. |
+ this._onRotate( |
+ this._rotateX + yMultiplier * rotateStepInDegrees, this._rotateY + xMultiplier * rotateStepInDegrees); |
+ } else { |
+ this._onPan(xMultiplier * panStepInPixels, yMultiplier * panStepInPixels); |
+ } |
+ } |
+ |
+ /** |
+ * @param {!Event} event |
+ */ |
+ _onMouseWheel(event) { |
+ /** @const */ |
+ var zoomFactor = 1.1; |
+ /** @const */ |
+ var mouseWheelZoomSpeed = 1 / 120; |
+ var scaleFactor = Math.pow(zoomFactor, event.wheelDeltaY * mouseWheelZoomSpeed); |
+ this._onScale( |
+ scaleFactor, event.clientX - this.element.totalOffsetLeft(), event.clientY - this.element.totalOffsetTop()); |
+ } |
+ |
+ /** |
+ * @param {!Event} event |
+ */ |
+ _onDrag(event) { |
+ if (this._mode === WebInspector.TransformController.Modes.Rotate) { |
+ this._onRotate( |
+ this._oldRotateX + (this._originY - event.clientY) / this.element.clientHeight * 180, |
+ this._oldRotateY - (this._originX - event.clientX) / this.element.clientWidth * 180); |
+ } else { |
+ this._onPan(event.clientX - this._originX, event.clientY - this._originY); |
+ this._originX = event.clientX; |
+ this._originY = event.clientY; |
+ } |
+ } |
+ |
+ /** |
+ * @param {!MouseEvent} event |
+ */ |
+ _onDragStart(event) { |
+ this.element.focus(); |
+ this._originX = event.clientX; |
+ this._originY = event.clientY; |
+ this._oldRotateX = this._rotateX; |
+ this._oldRotateY = this._rotateY; |
+ return true; |
+ } |
+ |
+ _onDragEnd() { |
+ delete this._originX; |
+ delete this._originY; |
+ delete this._oldRotateX; |
+ delete this._oldRotateY; |
+ } |
}; |
/** @enum {symbol} */ |
WebInspector.TransformController.Events = { |
- TransformChanged: Symbol("TransformChanged") |
+ TransformChanged: Symbol('TransformChanged') |
}; |
/** |
* @enum {string} |
*/ |
WebInspector.TransformController.Modes = { |
- Pan: "Pan", |
- Rotate: "Rotate", |
-}; |
- |
-WebInspector.TransformController.prototype = { |
- /** |
- * @return {!WebInspector.Toolbar} |
- */ |
- toolbar: function() |
- { |
- return this._controlPanelToolbar; |
- }, |
- |
- _onKeyDown: function(event) |
- { |
- if (event.keyCode === WebInspector.KeyboardShortcut.Keys.Shift.code) { |
- this._toggleMode(); |
- return; |
- } |
- |
- var shortcutKey = WebInspector.KeyboardShortcut.makeKeyFromEventIgnoringModifiers(event); |
- var handler = this._shortcuts[shortcutKey]; |
- if (handler && handler(event)) |
- event.consume(); |
- }, |
- |
- _onKeyUp: function(event) |
- { |
- if (event.keyCode === WebInspector.KeyboardShortcut.Keys.Shift.code) |
- this._toggleMode(); |
- }, |
- |
- _addShortcuts: function(keys, handler) |
- { |
- for (var i = 0; i < keys.length; ++i) |
- this._shortcuts[keys[i].key] = handler; |
- }, |
- |
- _registerShortcuts: function() |
- { |
- this._addShortcuts(WebInspector.ShortcutsScreen.LayersPanelShortcuts.ResetView, this.resetAndNotify.bind(this)); |
- this._addShortcuts(WebInspector.ShortcutsScreen.LayersPanelShortcuts.PanMode, this._setMode.bind(this, WebInspector.TransformController.Modes.Pan)); |
- this._addShortcuts(WebInspector.ShortcutsScreen.LayersPanelShortcuts.RotateMode, this._setMode.bind(this, WebInspector.TransformController.Modes.Rotate)); |
- var zoomFactor = 1.1; |
- this._addShortcuts(WebInspector.ShortcutsScreen.LayersPanelShortcuts.ZoomIn, this._onKeyboardZoom.bind(this, zoomFactor)); |
- this._addShortcuts(WebInspector.ShortcutsScreen.LayersPanelShortcuts.ZoomOut, this._onKeyboardZoom.bind(this, 1 / zoomFactor)); |
- this._addShortcuts(WebInspector.ShortcutsScreen.LayersPanelShortcuts.Up, this._onKeyboardPanOrRotate.bind(this, 0, -1)); |
- this._addShortcuts(WebInspector.ShortcutsScreen.LayersPanelShortcuts.Down, this._onKeyboardPanOrRotate.bind(this, 0, 1)); |
- this._addShortcuts(WebInspector.ShortcutsScreen.LayersPanelShortcuts.Left, this._onKeyboardPanOrRotate.bind(this, -1, 0)); |
- this._addShortcuts(WebInspector.ShortcutsScreen.LayersPanelShortcuts.Right, this._onKeyboardPanOrRotate.bind(this, 1, 0)); |
- }, |
- |
- _postChangeEvent: function() |
- { |
- this.dispatchEventToListeners(WebInspector.TransformController.Events.TransformChanged); |
- }, |
- |
- _reset: function() |
- { |
- this._scale = 1; |
- this._offsetX = 0; |
- this._offsetY = 0; |
- this._rotateX = 0; |
- this._rotateY = 0; |
- }, |
- |
- _toggleMode: function() |
- { |
- this._setMode(this._mode === WebInspector.TransformController.Modes.Pan ? WebInspector.TransformController.Modes.Rotate : WebInspector.TransformController.Modes.Pan); |
- }, |
- |
- /** |
- * @param {!WebInspector.TransformController.Modes} mode |
- */ |
- _setMode: function(mode) |
- { |
- if (this._mode === mode) |
- return; |
- this._mode = mode; |
- this._updateModeButtons(); |
- this.element.focus(); |
- }, |
- |
- _updateModeButtons: function() |
- { |
- for (var mode in this._modeButtons) |
- this._modeButtons[mode].setToggled(mode === this._mode); |
- }, |
- |
- /** |
- * @param {!Event=} event |
- */ |
- resetAndNotify: function(event) |
- { |
- this._reset(); |
- this._postChangeEvent(); |
- if (event) |
- event.preventDefault(); |
- this.element.focus(); |
- }, |
- |
- /** |
- * @param {number} minScale |
- * @param {number} maxScale |
- */ |
- setScaleConstraints: function(minScale, maxScale) |
- { |
- this._minScale = minScale; |
- this._maxScale = maxScale; |
- this._scale = Number.constrain(this._scale, minScale, maxScale); |
- }, |
- |
- /** |
- * @param {number} minX |
- * @param {number} maxX |
- * @param {number} minY |
- * @param {number} maxY |
- */ |
- clampOffsets: function(minX, maxX, minY, maxY) |
- { |
- this._offsetX = Number.constrain(this._offsetX, minX, maxX); |
- this._offsetY = Number.constrain(this._offsetY, minY, maxY); |
- }, |
- |
- /** |
- * @return {number} |
- */ |
- scale: function() |
- { |
- return this._scale; |
- }, |
- |
- /** |
- * @return {number} |
- */ |
- offsetX: function() |
- { |
- return this._offsetX; |
- }, |
- |
- /** |
- * @return {number} |
- */ |
- offsetY: function() |
- { |
- return this._offsetY; |
- }, |
- |
- /** |
- * @return {number} |
- */ |
- rotateX: function() |
- { |
- return this._rotateX; |
- }, |
- |
- /** |
- * @return {number} |
- */ |
- rotateY: function() |
- { |
- return this._rotateY; |
- }, |
- |
- /** |
- * @param {number} scaleFactor |
- * @param {number} x |
- * @param {number} y |
- */ |
- _onScale: function(scaleFactor, x, y) |
- { |
- scaleFactor = Number.constrain(this._scale * scaleFactor, this._minScale, this._maxScale) / this._scale; |
- this._scale *= scaleFactor; |
- this._offsetX -= (x - this._offsetX) * (scaleFactor - 1); |
- this._offsetY -= (y - this._offsetY) * (scaleFactor - 1); |
- this._postChangeEvent(); |
- }, |
- |
- /** |
- * @param {number} offsetX |
- * @param {number} offsetY |
- */ |
- _onPan: function(offsetX, offsetY) |
- { |
- this._offsetX += offsetX; |
- this._offsetY += offsetY; |
- this._postChangeEvent(); |
- }, |
- |
- /** |
- * @param {number} rotateX |
- * @param {number} rotateY |
- */ |
- _onRotate: function(rotateX, rotateY) |
- { |
- this._rotateX = rotateX; |
- this._rotateY = rotateY; |
- this._postChangeEvent(); |
- }, |
- |
- /** |
- * @param {number} zoomFactor |
- */ |
- _onKeyboardZoom: function(zoomFactor) |
- { |
- this._onScale(zoomFactor, this.element.clientWidth / 2, this.element.clientHeight / 2); |
- }, |
- |
- /** |
- * @param {number} xMultiplier |
- * @param {number} yMultiplier |
- */ |
- _onKeyboardPanOrRotate: function(xMultiplier, yMultiplier) |
- { |
- var panStepInPixels = 6; |
- var rotateStepInDegrees = 5; |
- |
- if (this._mode === WebInspector.TransformController.Modes.Rotate) { |
- // Sic! _onRotate treats X and Y as "rotate around X" and "rotate around Y", so swap X/Y multiplers. |
- this._onRotate(this._rotateX + yMultiplier * rotateStepInDegrees, this._rotateY + xMultiplier * rotateStepInDegrees); |
- } else { |
- this._onPan(xMultiplier * panStepInPixels, yMultiplier * panStepInPixels); |
- } |
- }, |
- |
- /** |
- * @param {!Event} event |
- */ |
- _onMouseWheel: function(event) |
- { |
- /** @const */ |
- var zoomFactor = 1.1; |
- /** @const */ |
- var mouseWheelZoomSpeed = 1 / 120; |
- var scaleFactor = Math.pow(zoomFactor, event.wheelDeltaY * mouseWheelZoomSpeed); |
- this._onScale(scaleFactor, event.clientX - this.element.totalOffsetLeft(), event.clientY - this.element.totalOffsetTop()); |
- }, |
- |
- /** |
- * @param {!Event} event |
- */ |
- _onDrag: function(event) |
- { |
- if (this._mode === WebInspector.TransformController.Modes.Rotate) { |
- this._onRotate(this._oldRotateX + (this._originY - event.clientY) / this.element.clientHeight * 180, this._oldRotateY - (this._originX - event.clientX) / this.element.clientWidth * 180); |
- } else { |
- this._onPan(event.clientX - this._originX, event.clientY - this._originY); |
- this._originX = event.clientX; |
- this._originY = event.clientY; |
- } |
- }, |
- |
- /** |
- * @param {!MouseEvent} event |
- */ |
- _onDragStart: function(event) |
- { |
- this.element.focus(); |
- this._originX = event.clientX; |
- this._originY = event.clientY; |
- this._oldRotateX = this._rotateX; |
- this._oldRotateY = this._rotateY; |
- return true; |
- }, |
- |
- _onDragEnd: function() |
- { |
- delete this._originX; |
- delete this._originY; |
- delete this._oldRotateX; |
- delete this._oldRotateY; |
- }, |
- |
- __proto__: WebInspector.Object.prototype |
+ Pan: 'Pan', |
+ Rotate: 'Rotate', |
}; |