src/third_party/WebKit/Source/devtools/front_end/timeline/TransformController.js

   1 /*
   2  * Copyright 2014 The Chromium Authors. All rights reserved.
   3  * Use of this source code is governed by a BSD-style license that can be
   4  * found in the LICENSE file.
   5  */
   6
   7 /**
   8  * @constructor
   9  * @extends {WebInspector.Object}
  10  * @param {!Element} element
  11  * @param {boolean=} disableRotate
  12  */
  13 WebInspector.TransformController = function(element, disableRotate)
  14 {
  15     this._shortcuts = {};
  16     this.element = element;
  17     this._registerShortcuts();
  18     element.addEventListener("keydown", this._onKeyDown.bind(this), false);
  19     element.addEventListener("mousemove", this._onMouseMove.bind(this), false);
  20     element.addEventListener("mousedown", this._onMouseDown.bind(this), false);
  21     element.addEventListener("mouseup", this._onMouseUp.bind(this), false);
  22     element.addEventListener("mousewheel", this._onMouseWheel.bind(this), false);
  23     this._disableRotate = disableRotate;
  24     this._reset();
  25 }
  26
  27 /**
  28  * @enum {string}
  29  */
  30 WebInspector.TransformController.Events = {
  31     TransformChanged: "TransformChanged"
  32 }
  33
  34 WebInspector.TransformController.prototype = {
  35     _onKeyDown: function(event)
  36     {
  37         var shortcutKey = WebInspector.KeyboardShortcut.makeKeyFromEvent(event);
  38         var handler = this._shortcuts[shortcutKey];
  39         event.handled = handler && handler(event);
  40     },
  41
  42     _addShortcuts: function(keys, handler)
  43     {
  44         for (var i = 0; i < keys.length; ++i)
  45             this._shortcuts[keys[i].key] = handler;
  46     },
  47
  48     _registerShortcuts: function()
  49     {
  50         this._addShortcuts(WebInspector.ShortcutsScreen.LayersPanelShortcuts.ResetView, this.resetAndNotify.bind(this));
  51         var zoomFactor = 1.1;
  52         this._addShortcuts(WebInspector.ShortcutsScreen.LayersPanelShortcuts.ZoomIn, this._onKeyboardZoom.bind(this, zoomFactor));
  53         this._addShortcuts(WebInspector.ShortcutsScreen.LayersPanelShortcuts.ZoomOut, this._onKeyboardZoom.bind(this, 1 / zoomFactor));
  54         var panDistanceInPixels = 6;
  55         this._addShortcuts(WebInspector.ShortcutsScreen.LayersPanelShortcuts.PanUp, this._onPan.bind(this, 0, -panDistanceInPixels));
  56         this._addShortcuts(WebInspector.ShortcutsScreen.LayersPanelShortcuts.PanDown, this._onPan.bind(this, 0, panDistanceInPixels));
  57         this._addShortcuts(WebInspector.ShortcutsScreen.LayersPanelShortcuts.PanLeft, this._onPan.bind(this, -panDistanceInPixels, 0));
  58         this._addShortcuts(WebInspector.ShortcutsScreen.LayersPanelShortcuts.PanRight, this._onPan.bind(this, panDistanceInPixels, 0));
  59         var rotateDegrees = 5;
  60         this._addShortcuts(WebInspector.ShortcutsScreen.LayersPanelShortcuts.RotateCWX, this._onKeyboardRotate.bind(this, rotateDegrees, 0));
  61         this._addShortcuts(WebInspector.ShortcutsScreen.LayersPanelShortcuts.RotateCCWX, this._onKeyboardRotate.bind(this, -rotateDegrees, 0));
  62         this._addShortcuts(WebInspector.ShortcutsScreen.LayersPanelShortcuts.RotateCWY, this._onKeyboardRotate.bind(this, 0, -rotateDegrees));
  63         this._addShortcuts(WebInspector.ShortcutsScreen.LayersPanelShortcuts.RotateCCWY, this._onKeyboardRotate.bind(this, 0, rotateDegrees));
  64     },
  65
  66     _postChangeEvent: function()
  67     {
  68         this.dispatchEventToListeners(WebInspector.TransformController.Events.TransformChanged);
  69     },
  70
  71     _reset: function()
  72     {
  73         this._scale = 1;
  74         this._offsetX = 0;
  75         this._offsetY = 0;
  76         this._rotateX = 0;
  77         this._rotateY = 0;
  78     },
  79
  80     /**
  81      * @param {!Event=} event
  82      */
  83     resetAndNotify: function(event)
  84     {
  85         this._reset();
  86         this._postChangeEvent();
  87         if (event)
  88             event.preventDefault();
  89     },
  90
  91     /**
  92      * @return {number}
  93      */
  94     scale: function()
  95     {
  96         return this._scale;
  97     },
  98
  99     /**
 100      * @return {number}
 101      */
 102     offsetX: function()
 103     {
 104         return this._offsetX;
 105     },
 106
 107     /**
 108      * @return {number}
 109      */
 110     offsetY: function()
 111     {
 112         return this._offsetY;
 113     },
 114
 115     /**
 116      * @return {number}
 117      */
 118     rotateX: function()
 119     {
 120         return this._rotateX;
 121     },
 122
 123     /**
 124      * @return {number}
 125      */
 126     rotateY: function()
 127     {
 128         return this._rotateY;
 129     },
 130
 131     /**
 132      * @param {number} scaleFactor
 133      * @param {number} x
 134      * @param {number} y
 135      */
 136     _onScale: function(scaleFactor, x, y)
 137     {
 138         this._scale *= scaleFactor;
 139         this._offsetX -= (x - this._offsetX) * (scaleFactor - 1);
 140         this._offsetY -= (y - this._offsetY) * (scaleFactor - 1);
 141         this._postChangeEvent();
 142     },
 143
 144     /**
 145      * @param {number} offsetX
 146      * @param {number} offsetY
 147      */
 148     _onPan: function(offsetX, offsetY)
 149     {
 150         this._offsetX += offsetX;
 151         this._offsetY += offsetY;
 152         this._postChangeEvent();
 153     },
 154
 155     /**
 156      * @param {number} rotateX
 157      * @param {number} rotateY
 158      */
 159     _onRotate: function(rotateX, rotateY)
 160     {
 161         this._rotateX = rotateX;
 162         this._rotateY = rotateY;
 163         this._postChangeEvent();
 164     },
 165
 166     /**
 167      * @param {number} zoomFactor
 168      */
 169     _onKeyboardZoom: function(zoomFactor)
 170     {
 171         this._onScale(zoomFactor, this.element.clientWidth / 2, this.element.clientHeight / 2);
 172     },
 173
 174     /**
 175      * @param {number} rotateX
 176      * @param {number} rotateY
 177      */
 178     _onKeyboardRotate: function(rotateX, rotateY)
 179     {
 180         this._onRotate(this._rotateX + rotateX, this._rotateY + rotateY);
 181     },
 182
 183     /**
 184      * @param {!Event} event
 185      */
 186     _onMouseWheel: function(event)
 187     {
 188         /** @const */
 189         var zoomFactor = 1.1;
 190         /** @const */
 191         var mouseWheelZoomSpeed = 1 / 120;
 192         var scaleFactor = Math.pow(zoomFactor, event.wheelDeltaY * mouseWheelZoomSpeed);
 193         this._onScale(scaleFactor, event.clientX - this.element.totalOffsetLeft(), event.clientY - this.element.totalOffsetTop());
 194     },
 195
 196     /**
 197      * @param {!Event} event
 198      */
 199     _onMouseMove: function(event)
 200     {
 201         if (event.which !== 1 || typeof this._originX !== "number")
 202             return;
 203         if (event.shiftKey) {
 204             this._onRotate(this._oldRotateX + (this._originY - event.clientY) / this.element.clientHeight * 180, this._oldRotateY - (this._originX - event.clientX) / this.element.clientWidth * 180);
 205         } else {
 206             this._onPan(event.clientX - this._originX, event.clientY - this._originY);
 207             this._originX = event.clientX;
 208             this._originY = event.clientY;
 209         }
 210     },
 211
 212     /**
 213      * @param {!Event} event
 214      */
 215     _setReferencePoint: function(event)
 216     {
 217         this._originX = event.clientX;
 218         this._originY = event.clientY;
 219         this._oldRotateX = this._rotateX;
 220         this._oldRotateY = this._rotateY;
 221     },
 222
 223     _resetReferencePoint: function()
 224     {
 225         delete this._originX;
 226         delete this._originY;
 227         delete this._oldRotateX;
 228         delete this._oldRotateY;
 229     },
 230
 231     /**
 232      * @param {!Event} event
 233      */
 234     _onMouseDown: function(event)
 235     {
 236         if (event.which !== 1)
 237             return;
 238         this._setReferencePoint(event);
 239     },
 240
 241     /**
 242      * @param {!Event} event
 243      */
 244     _onMouseUp: function(event)
 245     {
 246         if (event.which !== 1)
 247             return;
 248         this._resetReferencePoint();
 249     },
 250
 251     __proto__: WebInspector.Object.prototype
 252 }