strong-arc
Version:
A visual suite for the StrongLoop API Platform
253 lines (227 loc) • 7.29 kB
JavaScript
/*
* Copyright 2014 The Chromium Authors. All rights reserved.
* 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
*/
WebInspector.TransformController = function(element, disableRotate)
{
this._shortcuts = {};
this.element = element;
this._registerShortcuts();
element.addEventListener("keydown", this._onKeyDown.bind(this), false);
element.addEventListener("mousemove", this._onMouseMove.bind(this), false);
element.addEventListener("mousedown", this._onMouseDown.bind(this), false);
element.addEventListener("mouseup", this._onMouseUp.bind(this), false);
element.addEventListener("mousewheel", this._onMouseWheel.bind(this), false);
this._disableRotate = disableRotate;
this._reset();
}
/**
* @enum {string}
*/
WebInspector.TransformController.Events = {
TransformChanged: "TransformChanged"
}
WebInspector.TransformController.prototype = {
_onKeyDown: function(event)
{
var shortcutKey = WebInspector.KeyboardShortcut.makeKeyFromEvent(event);
var handler = this._shortcuts[shortcutKey];
event.handled = handler && handler(event);
},
_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));
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));
var panDistanceInPixels = 6;
this._addShortcuts(WebInspector.ShortcutsScreen.LayersPanelShortcuts.PanUp, this._onPan.bind(this, 0, -panDistanceInPixels));
this._addShortcuts(WebInspector.ShortcutsScreen.LayersPanelShortcuts.PanDown, this._onPan.bind(this, 0, panDistanceInPixels));
this._addShortcuts(WebInspector.ShortcutsScreen.LayersPanelShortcuts.PanLeft, this._onPan.bind(this, -panDistanceInPixels, 0));
this._addShortcuts(WebInspector.ShortcutsScreen.LayersPanelShortcuts.PanRight, this._onPan.bind(this, panDistanceInPixels, 0));
var rotateDegrees = 5;
this._addShortcuts(WebInspector.ShortcutsScreen.LayersPanelShortcuts.RotateCWX, this._onKeyboardRotate.bind(this, rotateDegrees, 0));
this._addShortcuts(WebInspector.ShortcutsScreen.LayersPanelShortcuts.RotateCCWX, this._onKeyboardRotate.bind(this, -rotateDegrees, 0));
this._addShortcuts(WebInspector.ShortcutsScreen.LayersPanelShortcuts.RotateCWY, this._onKeyboardRotate.bind(this, 0, -rotateDegrees));
this._addShortcuts(WebInspector.ShortcutsScreen.LayersPanelShortcuts.RotateCCWY, this._onKeyboardRotate.bind(this, 0, rotateDegrees));
},
_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;
},
/**
* @param {!Event=} event
*/
resetAndNotify: function(event)
{
this._reset();
this._postChangeEvent();
if (event)
event.preventDefault();
},
/**
* @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)
{
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} rotateX
* @param {number} rotateY
*/
_onKeyboardRotate: function(rotateX, rotateY)
{
this._onRotate(this._rotateX + rotateX, this._rotateY + rotateY);
},
/**
* @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
*/
_onMouseMove: function(event)
{
if (event.which !== 1 || typeof this._originX !== "number")
return;
if (event.shiftKey) {
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 {!Event} event
*/
_setReferencePoint: function(event)
{
this._originX = event.clientX;
this._originY = event.clientY;
this._oldRotateX = this._rotateX;
this._oldRotateY = this._rotateY;
},
_resetReferencePoint: function()
{
delete this._originX;
delete this._originY;
delete this._oldRotateX;
delete this._oldRotateY;
},
/**
* @param {!Event} event
*/
_onMouseDown: function(event)
{
if (event.which !== 1)
return;
this._setReferencePoint(event);
},
/**
* @param {!Event} event
*/
_onMouseUp: function(event)
{
if (event.which !== 1)
return;
this._resetReferencePoint();
},
__proto__: WebInspector.Object.prototype
}