OLD | NEW |
(Empty) | |
| 1 /* |
| 2 * Copyright (C) 2013 Google Inc. All rights reserved. |
| 3 * |
| 4 * Redistribution and use in source and binary forms, with or without |
| 5 * modification, are permitted provided that the following conditions are |
| 6 * met: |
| 7 * |
| 8 * * Redistributions of source code must retain the above copyright |
| 9 * notice, this list of conditions and the following disclaimer. |
| 10 * * Redistributions in binary form must reproduce the above |
| 11 * copyright notice, this list of conditions and the following disclaimer |
| 12 * in the documentation and/or other materials provided with the |
| 13 * distribution. |
| 14 * * Neither the name of Google Inc. nor the names of its |
| 15 * contributors may be used to endorse or promote products derived from |
| 16 * this software without specific prior written permission. |
| 17 * |
| 18 * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS |
| 19 * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT |
| 20 * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR |
| 21 * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT |
| 22 * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, |
| 23 * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT |
| 24 * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, |
| 25 * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY |
| 26 * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT |
| 27 * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE |
| 28 * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. |
| 29 */ |
| 30 |
| 31 /** |
| 32 * @constructor |
| 33 * @extends {WebInspector.View} |
| 34 * @param {WebInspector.LayerTreeModel} model |
| 35 */ |
| 36 WebInspector.Layers3DView = function(model) |
| 37 { |
| 38 WebInspector.View.call(this); |
| 39 this.element.classList.add("fill"); |
| 40 this.element.classList.add("layers-3d-view"); |
| 41 this._model = model; |
| 42 this._model.addEventListener(WebInspector.LayerTreeModel.Events.LayerTreeCha
nged, this._update, this); |
| 43 this._rotatingContainerElement = this.element.createChild("div", "fill rotat
ing-container"); |
| 44 this.element.addEventListener("mousemove", this._onMouseMove.bind(this), fal
se); |
| 45 this.element.addEventListener("mousedown", this._onMouseDown.bind(this), fal
se); |
| 46 this._rotateX = 0; |
| 47 this._rotateY = 0; |
| 48 } |
| 49 |
| 50 WebInspector.Layers3DView.prototype = { |
| 51 onResize: function() |
| 52 { |
| 53 this._scale(); |
| 54 }, |
| 55 |
| 56 wasShown: function() |
| 57 { |
| 58 if (this._needsUpdate) |
| 59 this._update(); |
| 60 }, |
| 61 |
| 62 _scale: function() |
| 63 { |
| 64 if (!this._rootLayerElement) |
| 65 return; |
| 66 const padding = 40; |
| 67 var scale = 1; |
| 68 var root = this._model.root(); |
| 69 if (root) { |
| 70 var scaleX = this.element.clientWidth / (root.width() + 2 * padding)
; |
| 71 var scaleY = this.element.clientHeight / (root.height() + 2 * paddin
g); |
| 72 scale = Math.min(scaleX, scaleY); |
| 73 } |
| 74 this._rootLayerElement.style.webkitTransform = "scale(" + scale + "," +
scale +")"; |
| 75 this._rootLayerElement.style.webkitTransformOrigin = padding + "px " + p
adding + "px"; |
| 76 }, |
| 77 |
| 78 _update: function() |
| 79 { |
| 80 if (!this.isShowing()) |
| 81 this._needsUpdate = true; |
| 82 |
| 83 this._rotatingContainerElement.removeChildren(); |
| 84 var rootLayer = this._model.root(); |
| 85 if (!rootLayer) { |
| 86 this._rootLayerElement = null; |
| 87 // TODO: add a banner re compositing mode etc. |
| 88 return; |
| 89 } |
| 90 this._rootLayerElement = this._buildSubtree(this._rotatingContainerEleme
nt, 0, rootLayer); |
| 91 this._needsUpdate = false; |
| 92 this._scale(); |
| 93 }, |
| 94 |
| 95 /** |
| 96 * @param {Element} element |
| 97 * @param {WebInspector.Layer} layer |
| 98 * @param {number} depth |
| 99 * @return {Element} |
| 100 */ |
| 101 _buildSubtree: function(element, depth, layer) |
| 102 { |
| 103 var layerContainer = element.createChild("div", "layer-container"); |
| 104 var style = layerContainer.style; |
| 105 style.backgroundColor = this._colorForLayer(layer, depth); |
| 106 style.left = layer.offsetX() + "px"; |
| 107 style.top = layer.offsetY() + "px"; |
| 108 style.width = layer.width() + "px"; |
| 109 style.height = layer.height() + "px"; |
| 110 ["fill back-wall", "side-wall top", "side-wall right", "side-wall bottom
", "side-wall left"].forEach(layerContainer.createChild.bind(layerContainer, "di
v")); |
| 111 layer.children().forEach(this._buildSubtree.bind(this, layerContainer, d
epth + 1)); |
| 112 return layerContainer; |
| 113 }, |
| 114 |
| 115 /** |
| 116 * {WebInspector.Layer} layer |
| 117 * {number} depth |
| 118 */ |
| 119 _colorForLayer: function(layer, depth) |
| 120 { |
| 121 const base = 144; |
| 122 var component = base + 20 * (depth % 5); |
| 123 return "rgb(" + component + "," + component + "," + component + ")"; |
| 124 }, |
| 125 |
| 126 /** |
| 127 * @param {Event} event |
| 128 */ |
| 129 _onMouseDown: function(event) |
| 130 { |
| 131 if (event.which !== 1) |
| 132 return; |
| 133 this._originX = event.clientX; |
| 134 this._originY = event.clientY; |
| 135 this._oldRotateX = this._rotateX; |
| 136 this._oldRotateY = this._rotateY; |
| 137 }, |
| 138 |
| 139 /** |
| 140 * @param {Event} event |
| 141 */ |
| 142 _onMouseMove: function(event) |
| 143 { |
| 144 if (event.which !== 1) |
| 145 return; |
| 146 this._rotateX = this._oldRotateX + (this._originY - event.clientY) / 2; |
| 147 this._rotateY = this._oldRotateY - (this._originX - event.clientX) / 4; |
| 148 this._rotatingContainerElement.style.webkitTransform = "rotateX(" + this
._rotateX + "deg) rotateY(" + this._rotateY + "deg)"; |
| 149 }, |
| 150 |
| 151 __proto__: WebInspector.View.prototype |
| 152 } |
OLD | NEW |