Index: Source/devtools/front_end/Layers3DView.js |
diff --git a/Source/devtools/front_end/Layers3DView.js b/Source/devtools/front_end/Layers3DView.js |
new file mode 100644 |
index 0000000000000000000000000000000000000000..bc2b9d251520bbc2b65dd74d1c83601dfe7d580f |
--- /dev/null |
+++ b/Source/devtools/front_end/Layers3DView.js |
@@ -0,0 +1,152 @@ |
+/* |
+ * Copyright (C) 2013 Google Inc. All rights reserved. |
+ * |
+ * Redistribution and use in source and binary forms, with or without |
+ * modification, are permitted provided that the following conditions are |
+ * met: |
+ * |
+ * * Redistributions of source code must retain the above copyright |
+ * notice, this list of conditions and the following disclaimer. |
+ * * Redistributions in binary form must reproduce the above |
+ * copyright notice, this list of conditions and the following disclaimer |
+ * in the documentation and/or other materials provided with the |
+ * distribution. |
+ * * Neither the name of Google Inc. nor the names of its |
+ * contributors may be used to endorse or promote products derived from |
+ * this software without specific prior written permission. |
+ * |
+ * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS |
+ * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT |
+ * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR |
+ * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT |
+ * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, |
+ * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT |
+ * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, |
+ * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY |
+ * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT |
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE |
+ * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. |
+ */ |
+ |
+/** |
+ * @constructor |
+ * @extends {WebInspector.View} |
+ * @param {WebInspector.LayerTreeModel} model |
+ */ |
+WebInspector.Layers3DView = function(model) |
+{ |
+ WebInspector.View.call(this); |
+ this.element.classList.add("fill"); |
+ this.element.classList.add("layers-3d-view"); |
+ this._model = model; |
+ this._model.addEventListener(WebInspector.LayerTreeModel.Events.LayerTreeChanged, this._update, this); |
+ this._rotatingContainerElement = this.element.createChild("div", "fill rotating-container"); |
+ this.element.addEventListener("mousemove", this._onMouseMove.bind(this), false); |
+ this.element.addEventListener("mousedown", this._onMouseDown.bind(this), false); |
+ this._rotateX = 0; |
+ this._rotateY = 0; |
+} |
+ |
+WebInspector.Layers3DView.prototype = { |
+ onResize: function() |
+ { |
+ this._scale(); |
+ }, |
+ |
+ wasShown: function() |
+ { |
+ if (this._needsUpdate) |
+ this._update(); |
+ }, |
+ |
+ _scale: function() |
+ { |
+ if (!this._rootLayerElement) |
+ return; |
+ const padding = 40; |
+ var scale = 1; |
+ var root = this._model.root(); |
+ if (root) { |
+ var scaleX = this.element.clientWidth / (root.width() + 2 * padding); |
+ var scaleY = this.element.clientHeight / (root.height() + 2 * padding); |
+ scale = Math.min(scaleX, scaleY); |
+ } |
+ this._rootLayerElement.style.webkitTransform = "scale(" + scale + "," + scale +")"; |
+ this._rootLayerElement.style.webkitTransformOrigin = padding + "px " + padding + "px"; |
+ }, |
+ |
+ _update: function() |
+ { |
+ if (!this.isShowing()) |
+ this._needsUpdate = true; |
+ |
+ this._rotatingContainerElement.removeChildren(); |
+ var rootLayer = this._model.root(); |
+ if (!rootLayer) { |
+ this._rootLayerElement = null; |
+ // TODO: add a banner re compositing mode etc. |
+ return; |
+ } |
+ this._rootLayerElement = this._buildSubtree(this._rotatingContainerElement, 0, rootLayer); |
+ this._needsUpdate = false; |
+ this._scale(); |
+ }, |
+ |
+ /** |
+ * @param {Element} element |
+ * @param {WebInspector.Layer} layer |
+ * @param {number} depth |
+ * @return {Element} |
+ */ |
+ _buildSubtree: function(element, depth, layer) |
+ { |
+ var layerContainer = element.createChild("div", "layer-container"); |
+ var style = layerContainer.style; |
+ style.backgroundColor = this._colorForLayer(layer, depth); |
+ style.left = layer.offsetX() + "px"; |
+ style.top = layer.offsetY() + "px"; |
+ style.width = layer.width() + "px"; |
+ style.height = layer.height() + "px"; |
+ ["fill back-wall", "side-wall top", "side-wall right", "side-wall bottom", "side-wall left"].forEach(layerContainer.createChild.bind(layerContainer, "div")); |
+ layer.children().forEach(this._buildSubtree.bind(this, layerContainer, depth + 1)); |
+ return layerContainer; |
+ }, |
+ |
+ /** |
+ * {WebInspector.Layer} layer |
+ * {number} depth |
+ */ |
+ _colorForLayer: function(layer, depth) |
+ { |
+ const base = 144; |
+ var component = base + 20 * (depth % 5); |
+ return "rgb(" + component + "," + component + "," + component + ")"; |
+ }, |
+ |
+ /** |
+ * @param {Event} event |
+ */ |
+ _onMouseDown: function(event) |
+ { |
+ if (event.which !== 1) |
+ return; |
+ this._originX = event.clientX; |
+ this._originY = event.clientY; |
+ this._oldRotateX = this._rotateX; |
+ this._oldRotateY = this._rotateY; |
+ }, |
+ |
+ /** |
+ * @param {Event} event |
+ */ |
+ _onMouseMove: function(event) |
+ { |
+ if (event.which !== 1) |
+ return; |
+ this._rotateX = this._oldRotateX + (this._originY - event.clientY) / 2; |
+ this._rotateY = this._oldRotateY - (this._originX - event.clientX) / 4; |
+ this._rotatingContainerElement.style.webkitTransform = "rotateX(" + this._rotateX + "deg) rotateY(" + this._rotateY + "deg)"; |
+ }, |
+ |
+ __proto__: WebInspector.View.prototype |
+} |