| OLD | NEW |
| 1 // Copyright (c) 2015 The Chromium Authors. All rights reserved. | 1 // Copyright (c) 2015 The Chromium Authors. All rights reserved. |
| 2 // Use of this source code is governed by a BSD-style license that can be | 2 // Use of this source code is governed by a BSD-style license that can be |
| 3 // found in the LICENSE file. | 3 // found in the LICENSE file. |
| 4 /** | 4 /** |
| 5 * @unrestricted | 5 * @unrestricted |
| 6 */ | 6 */ |
| 7 Emulation.SensorsView = class extends UI.VBox { | 7 Emulation.SensorsView = class extends UI.VBox { |
| 8 constructor() { | 8 constructor() { |
| 9 super(true); | 9 super(true); |
| 10 this.registerRequiredCSS('emulation/sensors.css'); | 10 this.registerRequiredCSS('emulation/sensors.css'); |
| (...skipping 325 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 336 _setBoxOrientation(deviceOrientation, animate) { | 336 _setBoxOrientation(deviceOrientation, animate) { |
| 337 if (animate) | 337 if (animate) |
| 338 this._stageElement.classList.add('is-animating'); | 338 this._stageElement.classList.add('is-animating'); |
| 339 else | 339 else |
| 340 this._stageElement.classList.remove('is-animating'); | 340 this._stageElement.classList.remove('is-animating'); |
| 341 | 341 |
| 342 // The CSS transform should not depend on matrix3d, which does not interpola
te well. | 342 // The CSS transform should not depend on matrix3d, which does not interpola
te well. |
| 343 var matrix = new WebKitCSSMatrix(); | 343 var matrix = new WebKitCSSMatrix(); |
| 344 this._boxMatrix = matrix.rotate(-deviceOrientation.beta, deviceOrientation.g
amma, -deviceOrientation.alpha); | 344 this._boxMatrix = matrix.rotate(-deviceOrientation.beta, deviceOrientation.g
amma, -deviceOrientation.alpha); |
| 345 var eulerAngles = | 345 var eulerAngles = |
| 346 new Common.Geometry.EulerAngles(deviceOrientation.alpha, deviceOrientati
on.beta, deviceOrientation.gamma); | 346 new UI.Geometry.EulerAngles(deviceOrientation.alpha, deviceOrientation.b
eta, deviceOrientation.gamma); |
| 347 this._orientationLayer.style.transform = eulerAngles.toRotate3DString(); | 347 this._orientationLayer.style.transform = eulerAngles.toRotate3DString(); |
| 348 } | 348 } |
| 349 | 349 |
| 350 /** | 350 /** |
| 351 * @param {!MouseEvent} event | 351 * @param {!MouseEvent} event |
| 352 * @return {boolean} | 352 * @return {boolean} |
| 353 */ | 353 */ |
| 354 _onBoxDrag(event) { | 354 _onBoxDrag(event) { |
| 355 var mouseMoveVector = this._calculateRadiusVector(event.x, event.y); | 355 var mouseMoveVector = this._calculateRadiusVector(event.x, event.y); |
| 356 if (!mouseMoveVector) | 356 if (!mouseMoveVector) |
| 357 return true; | 357 return true; |
| 358 | 358 |
| 359 event.consume(true); | 359 event.consume(true); |
| 360 var axis, angle; | 360 var axis, angle; |
| 361 if (event.shiftKey) { | 361 if (event.shiftKey) { |
| 362 axis = new Common.Geometry.Vector(0, 0, -1); | 362 axis = new UI.Geometry.Vector(0, 0, -1); |
| 363 angle = (this._mouseDownVector.x - mouseMoveVector.x) * Emulation.SensorsV
iew.ShiftDragOrientationSpeed; | 363 angle = (this._mouseDownVector.x - mouseMoveVector.x) * Emulation.SensorsV
iew.ShiftDragOrientationSpeed; |
| 364 } else { | 364 } else { |
| 365 axis = Common.Geometry.crossProduct(this._mouseDownVector, mouseMoveVector
); | 365 axis = UI.Geometry.crossProduct(this._mouseDownVector, mouseMoveVector); |
| 366 angle = Common.Geometry.calculateAngle(this._mouseDownVector, mouseMoveVec
tor); | 366 angle = UI.Geometry.calculateAngle(this._mouseDownVector, mouseMoveVector)
; |
| 367 } | 367 } |
| 368 | 368 |
| 369 // The mouse movement vectors occur in the screen space, which is offset by
90 degrees from | 369 // The mouse movement vectors occur in the screen space, which is offset by
90 degrees from |
| 370 // the actual device orientation. | 370 // the actual device orientation. |
| 371 var currentMatrix = new WebKitCSSMatrix(); | 371 var currentMatrix = new WebKitCSSMatrix(); |
| 372 currentMatrix = currentMatrix.rotate(-90, 0, 0) | 372 currentMatrix = currentMatrix.rotate(-90, 0, 0) |
| 373 .rotateAxisAngle(axis.x, axis.y, axis.z, angle) | 373 .rotateAxisAngle(axis.x, axis.y, axis.z, angle) |
| 374 .rotate(90, 0, 0) | 374 .rotate(90, 0, 0) |
| 375 .multiply(this._originalBoxMatrix); | 375 .multiply(this._originalBoxMatrix); |
| 376 | 376 |
| 377 var eulerAngles = Common.Geometry.EulerAngles.fromRotationMatrix(currentMatr
ix); | 377 var eulerAngles = UI.Geometry.EulerAngles.fromRotationMatrix(currentMatrix); |
| 378 var newOrientation = new Emulation.DeviceOrientation(-eulerAngles.alpha, -eu
lerAngles.beta, eulerAngles.gamma); | 378 var newOrientation = new Emulation.DeviceOrientation(-eulerAngles.alpha, -eu
lerAngles.beta, eulerAngles.gamma); |
| 379 this._setDeviceOrientation(newOrientation, Emulation.SensorsView.DeviceOrien
tationModificationSource.UserDrag); | 379 this._setDeviceOrientation(newOrientation, Emulation.SensorsView.DeviceOrien
tationModificationSource.UserDrag); |
| 380 this._setSelectElementLabel(this._orientationSelectElement, Emulation.Sensor
sView.NonPresetOptions.Custom); | 380 this._setSelectElementLabel(this._orientationSelectElement, Emulation.Sensor
sView.NonPresetOptions.Custom); |
| 381 return false; | 381 return false; |
| 382 } | 382 } |
| 383 | 383 |
| 384 /** | 384 /** |
| 385 * @param {!MouseEvent} event | 385 * @param {!MouseEvent} event |
| 386 * @return {boolean} | 386 * @return {boolean} |
| 387 */ | 387 */ |
| 388 _onBoxDragStart(event) { | 388 _onBoxDragStart(event) { |
| 389 if (!this._deviceOrientationOverrideEnabled) | 389 if (!this._deviceOrientationOverrideEnabled) |
| 390 return false; | 390 return false; |
| 391 | 391 |
| 392 this._mouseDownVector = this._calculateRadiusVector(event.x, event.y); | 392 this._mouseDownVector = this._calculateRadiusVector(event.x, event.y); |
| 393 this._originalBoxMatrix = this._boxMatrix; | 393 this._originalBoxMatrix = this._boxMatrix; |
| 394 | 394 |
| 395 if (!this._mouseDownVector) | 395 if (!this._mouseDownVector) |
| 396 return false; | 396 return false; |
| 397 | 397 |
| 398 event.consume(true); | 398 event.consume(true); |
| 399 return true; | 399 return true; |
| 400 } | 400 } |
| 401 | 401 |
| 402 /** | 402 /** |
| 403 * @param {number} x | 403 * @param {number} x |
| 404 * @param {number} y | 404 * @param {number} y |
| 405 * @return {?Common.Geometry.Vector} | 405 * @return {?UI.Geometry.Vector} |
| 406 */ | 406 */ |
| 407 _calculateRadiusVector(x, y) { | 407 _calculateRadiusVector(x, y) { |
| 408 var rect = this._stageElement.getBoundingClientRect(); | 408 var rect = this._stageElement.getBoundingClientRect(); |
| 409 var radius = Math.max(rect.width, rect.height) / 2; | 409 var radius = Math.max(rect.width, rect.height) / 2; |
| 410 var sphereX = (x - rect.left - rect.width / 2) / radius; | 410 var sphereX = (x - rect.left - rect.width / 2) / radius; |
| 411 var sphereY = (y - rect.top - rect.height / 2) / radius; | 411 var sphereY = (y - rect.top - rect.height / 2) / radius; |
| 412 var sqrSum = sphereX * sphereX + sphereY * sphereY; | 412 var sqrSum = sphereX * sphereX + sphereY * sphereY; |
| 413 if (sqrSum > 0.5) | 413 if (sqrSum > 0.5) |
| 414 return new Common.Geometry.Vector(sphereX, sphereY, 0.5 / Math.sqrt(sqrSum
)); | 414 return new UI.Geometry.Vector(sphereX, sphereY, 0.5 / Math.sqrt(sqrSum)); |
| 415 | 415 |
| 416 return new Common.Geometry.Vector(sphereX, sphereY, Math.sqrt(1 - sqrSum)); | 416 return new UI.Geometry.Vector(sphereX, sphereY, Math.sqrt(1 - sqrSum)); |
| 417 } | 417 } |
| 418 | 418 |
| 419 _appendTouchControl() { | 419 _appendTouchControl() { |
| 420 var groupElement = this.contentElement.createChild('div', 'sensors-group'); | 420 var groupElement = this.contentElement.createChild('div', 'sensors-group'); |
| 421 var title = groupElement.createChild('div', 'sensors-group-title'); | 421 var title = groupElement.createChild('div', 'sensors-group-title'); |
| 422 var fieldsElement = groupElement.createChild('div', 'sensors-group-fields'); | 422 var fieldsElement = groupElement.createChild('div', 'sensors-group-fields'); |
| 423 | 423 |
| 424 title.textContent = Common.UIString('Touch'); | 424 title.textContent = Common.UIString('Touch'); |
| 425 var select = fieldsElement.createChild('select', 'chrome-select'); | 425 var select = fieldsElement.createChild('select', 'chrome-select'); |
| 426 select.appendChild(new Option(Common.UIString('Device-based'), 'auto')); | 426 select.appendChild(new Option(Common.UIString('Device-based'), 'auto')); |
| (...skipping 70 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 497 * @param {string} actionId | 497 * @param {string} actionId |
| 498 * @return {boolean} | 498 * @return {boolean} |
| 499 */ | 499 */ |
| 500 handleAction(context, actionId) { | 500 handleAction(context, actionId) { |
| 501 UI.viewManager.showView('sensors'); | 501 UI.viewManager.showView('sensors'); |
| 502 return true; | 502 return true; |
| 503 } | 503 } |
| 504 }; | 504 }; |
| 505 | 505 |
| 506 Emulation.SensorsView.ShiftDragOrientationSpeed = 16; | 506 Emulation.SensorsView.ShiftDragOrientationSpeed = 16; |
| OLD | NEW |