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 /** | 5 /** |
6 * @constructor | 6 * @constructor |
7 * @extends {WebInspector.VBox} | 7 * @extends {WebInspector.VBox} |
8 */ | 8 */ |
9 WebInspector.SensorsView = function() | 9 WebInspector.SensorsView = function() |
10 { | 10 { |
(...skipping 137 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
148 for (var j = 0; j < group.length; ++j) | 148 for (var j = 0; j < group.length; ++j) |
149 groupElement.appendChild(new Option(group[j].title, group[j].ori
entation)); | 149 groupElement.appendChild(new Option(group[j].title, group[j].ori
entation)); |
150 } | 150 } |
151 this._orientationSelectElement.selectedIndex = 0; | 151 this._orientationSelectElement.selectedIndex = 0; |
152 fields.appendChild(this._orientationSelectElement); | 152 fields.appendChild(this._orientationSelectElement); |
153 this._orientationSelectElement.addEventListener("change", this._orientat
ionSelectChanged.bind(this)); | 153 this._orientationSelectElement.addEventListener("change", this._orientat
ionSelectChanged.bind(this)); |
154 | 154 |
155 this._deviceOrientationFieldset = this._createDeviceOrientationOverrideE
lement(this._deviceOrientation); | 155 this._deviceOrientationFieldset = this._createDeviceOrientationOverrideE
lement(this._deviceOrientation); |
156 | 156 |
157 this._stageElement = orientationContent.createChild("div", "acceleromete
r-stage"); | 157 this._stageElement = orientationContent.createChild("div", "acceleromete
r-stage"); |
158 this._stageElement.title = WebInspector.UIString("shift+drag to rotate a
round the z-axis"); | 158 this._stageElement.title = WebInspector.UIString("Shift+drag to rotate a
round the y-axis"); |
159 this._boxElement = this._stageElement.createChild("section", "accelerome
ter-box accelerometer-element"); | 159 this._boxElement = this._stageElement.createChild("section", "accelerome
ter-box accelerometer-element"); |
160 | 160 |
161 this._boxElement.createChild("section", "accelerometer-front acceleromet
er-element"); | 161 this._boxElement.createChild("section", "accelerometer-front acceleromet
er-element"); |
162 this._boxElement.createChild("section", "accelerometer-top accelerometer
-element"); | 162 this._boxElement.createChild("section", "accelerometer-top accelerometer
-element"); |
163 this._boxElement.createChild("section", "accelerometer-back acceleromete
r-element"); | 163 this._boxElement.createChild("section", "accelerometer-back acceleromete
r-element"); |
164 this._boxElement.createChild("section", "accelerometer-left acceleromete
r-element"); | 164 this._boxElement.createChild("section", "accelerometer-left acceleromete
r-element"); |
165 this._boxElement.createChild("section", "accelerometer-right acceleromet
er-element"); | 165 this._boxElement.createChild("section", "accelerometer-right acceleromet
er-element"); |
166 this._boxElement.createChild("section", "accelerometer-bottom accelerome
ter-element"); | 166 this._boxElement.createChild("section", "accelerometer-bottom accelerome
ter-element"); |
167 | 167 |
168 WebInspector.installDragHandle(this._stageElement, this._onBoxDragStart.
bind(this), this._onBoxDrag.bind(this), this._onBoxDragEnd.bind(this), "-webkit-
grabbing", "-webkit-grab"); | 168 WebInspector.installDragHandle(this._stageElement, this._onBoxDragStart.
bind(this), this._onBoxDrag.bind(this), null, "-webkit-grabbing", "-webkit-grab"
); |
169 | 169 |
170 fields.appendChild(this._deviceOrientationFieldset); | 170 fields.appendChild(this._deviceOrientationFieldset); |
171 this._enableOrientationFields(true); | 171 this._enableOrientationFields(true); |
172 this._setBoxOrientation(this._deviceOrientation); | 172 this._setBoxOrientation(this._deviceOrientation); |
173 }, | 173 }, |
174 | 174 |
175 /** | 175 /** |
176 * @param {?boolean} disable | 176 * @param {?boolean} disable |
177 */ | 177 */ |
178 _enableOrientationFields: function(disable) | 178 _enableOrientationFields: function(disable) |
(...skipping 130 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
309 | 309 |
310 cellElement.appendChild(createTextButton(WebInspector.UIString("Reset"),
this._resetDeviceOrientation.bind(this), "accelerometer-reset-button")); | 310 cellElement.appendChild(createTextButton(WebInspector.UIString("Reset"),
this._resetDeviceOrientation.bind(this), "accelerometer-reset-button")); |
311 return fieldsetElement; | 311 return fieldsetElement; |
312 }, | 312 }, |
313 | 313 |
314 /** | 314 /** |
315 * @param {!WebInspector.DeviceOrientation} deviceOrientation | 315 * @param {!WebInspector.DeviceOrientation} deviceOrientation |
316 */ | 316 */ |
317 _setBoxOrientation: function(deviceOrientation) | 317 _setBoxOrientation: function(deviceOrientation) |
318 { | 318 { |
319 var matrix = new WebKitCSSMatrix(); | 319 var matrix = this._viewportPreviewMatrix(true); |
320 this._boxMatrix = matrix.rotate(90-deviceOrientation.beta, deviceOrienta
tion.gamma, -deviceOrientation.alpha); | 320 this._boxMatrix = matrix.rotate(-deviceOrientation.beta, deviceOrientati
on.gamma, -deviceOrientation.alpha); |
| 321 |
321 this._boxElement.classList.add("is-animating"); | 322 this._boxElement.classList.add("is-animating"); |
322 this._boxElement.style.webkitTransform = this._boxMatrix.toString(); | 323 this._boxElement.style.transform = this._boxMatrix.toString(); |
323 }, | 324 }, |
324 | 325 |
325 /** | 326 /** |
| 327 * @param {boolean=} toViewportPreview |
| 328 * @return {!CSSMatrix} |
| 329 */ |
| 330 _viewportPreviewMatrix: function(toViewportPreview) |
| 331 { |
| 332 // The default orientation [0, 0, 0] represents a device with |
| 333 // screen facing up. This transformation shifts the |
| 334 // orientation displayed in the 3D preview to be front-facing |
| 335 // instead of top-down. |
| 336 var betaRotate = toViewportPreview ? 90 : -90; |
| 337 var matrix = new WebKitCSSMatrix(); |
| 338 return matrix.rotate(betaRotate, 0, 0); |
| 339 }, |
| 340 |
| 341 /** |
326 * @param {!MouseEvent} event | 342 * @param {!MouseEvent} event |
327 * @return {boolean} | 343 * @return {boolean} |
328 */ | 344 */ |
329 _onBoxDrag: function(event) | 345 _onBoxDrag: function(event) |
330 { | 346 { |
331 var mouseMoveVector = this._calculateRadiusVector(event.x, event.y); | 347 var mouseMoveVector = this._calculateRadiusVector(event.x, event.y); |
332 if (!mouseMoveVector) | 348 if (!mouseMoveVector) |
333 return true; | 349 return true; |
334 | 350 |
335 event.consume(true); | 351 event.consume(true); |
336 var axis, angle; | 352 var axis, angle; |
337 if (event.shiftKey) { | 353 if (event.shiftKey) { |
338 axis = new WebInspector.Geometry.Vector(0, 0, 1); | 354 axis = new WebInspector.Geometry.Vector(0, 0, -1); |
339 angle = (this._mouseDownVector.x - mouseMoveVector.x)*WebInspector.S
ensorsView.ShiftDragOrientationSpeed; | 355 angle = (this._mouseDownVector.x - mouseMoveVector.x)*WebInspector.S
ensorsView.ShiftDragOrientationSpeed; |
340 } else { | 356 } else { |
341 axis = WebInspector.Geometry.crossProduct(this._mouseDownVector, mou
seMoveVector); | 357 axis = WebInspector.Geometry.crossProduct(this._mouseDownVector, mou
seMoveVector); |
342 axis.normalize(); | 358 axis.normalize(); |
343 angle = WebInspector.Geometry.calculateAngle(this._mouseDownVector,
mouseMoveVector); | 359 angle = WebInspector.Geometry.calculateAngle(this._mouseDownVector,
mouseMoveVector); |
344 } | 360 } |
345 var matrix = new WebKitCSSMatrix(); | 361 var matrix = new WebKitCSSMatrix(); |
346 var rotationMatrix = matrix.rotateAxisAngle(axis.x, axis.y, axis.z, angl
e); | 362 var rotationMatrix = matrix.rotateAxisAngle(axis.x, axis.y, axis.z, angl
e); |
347 this._currentMatrix = rotationMatrix.multiply(this._boxMatrix); | 363 var transformFromScreen = this._viewportPreviewMatrix(); |
348 | 364 |
349 var mat90 = new WebKitCSSMatrix(); | 365 this._boxMatrix = rotationMatrix.multiply(this._originalBoxMatrix); |
350 mat90.rotate(90); | 366 this._boxElement.style.transform = this._boxMatrix.toString(); |
351 this._boxElement.style.webkitTransform = mat90.multiply(this._currentMat
rix); | 367 |
352 var eulerAngles = WebInspector.Geometry.EulerAngles.fromRotationMatrix(t
his._currentMatrix); | 368 var currentMatrix = transformFromScreen.multiply(this._boxMatrix); |
| 369 var eulerAngles = WebInspector.Geometry.EulerAngles.fromRotationMatrix(c
urrentMatrix); |
353 var newOrientation = new WebInspector.DeviceOrientation(-eulerAngles.alp
ha, -eulerAngles.beta, eulerAngles.gamma); | 370 var newOrientation = new WebInspector.DeviceOrientation(-eulerAngles.alp
ha, -eulerAngles.beta, eulerAngles.gamma); |
354 this._setDeviceOrientation(newOrientation, WebInspector.SensorsView.Devi
ceOrientationModificationSource.UserDrag); | 371 this._setDeviceOrientation(newOrientation, WebInspector.SensorsView.Devi
ceOrientationModificationSource.UserDrag); |
355 this._setSelectElementLabel(this._orientationSelectElement, WebInspector
.SensorsView.NonPresetOptions.Custom); | 372 this._setSelectElementLabel(this._orientationSelectElement, WebInspector
.SensorsView.NonPresetOptions.Custom); |
356 return false; | 373 return false; |
357 }, | 374 }, |
358 | 375 |
359 /** | 376 /** |
360 * @param {!MouseEvent} event | 377 * @param {!MouseEvent} event |
361 * @return {boolean} | 378 * @return {boolean} |
362 */ | 379 */ |
363 _onBoxDragStart: function(event) | 380 _onBoxDragStart: function(event) |
364 { | 381 { |
365 if (!this._deviceOrientationOverrideEnabled) | 382 if (!this._deviceOrientationOverrideEnabled) |
366 return false; | 383 return false; |
367 | 384 |
368 this._mouseDownVector = this._calculateRadiusVector(event.x, event.y); | 385 this._mouseDownVector = this._calculateRadiusVector(event.x, event.y); |
| 386 this._originalBoxMatrix = this._boxMatrix; |
369 | 387 |
370 if (!this._mouseDownVector) | 388 if (!this._mouseDownVector) |
371 return false; | 389 return false; |
372 | 390 |
373 event.consume(true); | 391 event.consume(true); |
374 return true; | 392 return true; |
375 }, | 393 }, |
376 | 394 |
377 _onBoxDragEnd: function() | |
378 { | |
379 this._boxMatrix = this._currentMatrix; | |
380 }, | |
381 | |
382 /** | 395 /** |
383 * @param {number} x | 396 * @param {number} x |
384 * @param {number} y | 397 * @param {number} y |
385 * @return {?WebInspector.Geometry.Vector} | 398 * @return {?WebInspector.Geometry.Vector} |
386 */ | 399 */ |
387 _calculateRadiusVector: function(x, y) | 400 _calculateRadiusVector: function(x, y) |
388 { | 401 { |
389 var rect = this._stageElement.getBoundingClientRect(); | 402 var rect = this._stageElement.getBoundingClientRect(); |
390 var radius = Math.max(rect.width, rect.height) / 2; | 403 var radius = Math.max(rect.width, rect.height) / 2; |
391 var sphereX = (x - rect.left - rect.width / 2) / radius; | 404 var sphereX = (x - rect.left - rect.width / 2) / radius; |
(...skipping 64 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
456 ] | 469 ] |
457 } | 470 } |
458 ] | 471 ] |
459 | 472 |
460 /** @type {!Array.<{title: string, value: !Array.<{title: string, orientation: !
WebInspector.DeviceOrientation}>}>} */ | 473 /** @type {!Array.<{title: string, value: !Array.<{title: string, orientation: !
WebInspector.DeviceOrientation}>}>} */ |
461 WebInspector.SensorsView.PresetOrientations = [ | 474 WebInspector.SensorsView.PresetOrientations = [ |
462 { | 475 { |
463 title: "Presets", | 476 title: "Presets", |
464 value: [ | 477 value: [ |
465 {title: WebInspector.UIString("Portrait"), orientation: "[0, 90, 0]"
}, | 478 {title: WebInspector.UIString("Portrait"), orientation: "[0, 90, 0]"
}, |
466 {title: WebInspector.UIString("Portrait upside down"), orientation:
"[180, 90, 0]"}, | 479 {title: WebInspector.UIString("Portrait upside down"), orientation:
"[180, -90, 0]"}, |
467 {title: WebInspector.UIString("Landscape left"), orientation: "[90,
90, 0]"}, | 480 {title: WebInspector.UIString("Landscape left"), orientation: "[0, 9
0, -90]"}, |
468 {title: WebInspector.UIString("Landscape right"), orientation: "[270
, 90, 0]"}, | 481 {title: WebInspector.UIString("Landscape right"), orientation: "[0,
90, 90]"}, |
469 {title: WebInspector.UIString("Display up"), orientation: "[0, 0, 0]
"}, | 482 {title: WebInspector.UIString("Display up"), orientation: "[0, 0, 0]
"}, |
470 {title: WebInspector.UIString("Display down"), orientation: "[0, 180
, 0]"} | 483 {title: WebInspector.UIString("Display down"), orientation: "[0, 180
, 0]"} |
471 ] | 484 ] |
472 } | 485 } |
473 ] | 486 ] |
474 | 487 |
475 /** | 488 /** |
476 * @return {!WebInspector.SensorsView} | 489 * @return {!WebInspector.SensorsView} |
477 */ | 490 */ |
478 WebInspector.SensorsView.instance = function() | 491 WebInspector.SensorsView.instance = function() |
(...skipping 19 matching lines...) Expand all Loading... |
498 * @return {boolean} | 511 * @return {boolean} |
499 */ | 512 */ |
500 handleAction: function(context, actionId) | 513 handleAction: function(context, actionId) |
501 { | 514 { |
502 WebInspector.inspectorView.showViewInDrawer("sensors"); | 515 WebInspector.inspectorView.showViewInDrawer("sensors"); |
503 return true; | 516 return true; |
504 } | 517 } |
505 } | 518 } |
506 | 519 |
507 WebInspector.SensorsView.ShiftDragOrientationSpeed = 16; | 520 WebInspector.SensorsView.ShiftDragOrientationSpeed = 16; |
OLD | NEW |