Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(82)

Side by Side Diff: third_party/WebKit/Source/devtools/front_end/emulation/SensorsView.js

Issue 2626143004: DevTools: move from Common module - Geometry and CSSShadowModel (Closed)
Patch Set: minimize test diff Created 3 years, 11 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
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
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
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;
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698