Layers view: Extract zoom/pan/rotate logic into transorm controller

Source/devtools/front_end/Layers3DView.js

 /*
- * Copyright (C) 2013 Google Inc. All rights reserved.
+ * Copyright (C) 2014 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
@@ skipping 22 matching lines @@
  */
 WebInspector.Layers3DView = function(model)
 {
     WebInspector.View.call(this);
     this.element.classList.add("layers-3d-view");
     this._emptyView = new WebInspector.EmptyView(WebInspector.UIString("Not in the composited mode.\nConsider forcing composited mode in Settings."));
     this._model = model;
     this._model.addEventListener(WebInspector.LayerTreeModel.Events.LayerTreeChanged, this._update, this);
     this._model.addEventListener(WebInspector.LayerTreeModel.Events.LayerPainted, this._onLayerPainted, this);
     this._rotatingContainerElement = this.element.createChild("div", "fill rotating-container");
-    this.element.addEventListener("mousemove", this._onMouseMove.bind(this), false);
-    this.element.addEventListener("mouseout", this._onMouseMove.bind(this), false);
-    this.element.addEventListener("mousedown", this._onMouseDown.bind(this), false);
-    this.element.addEventListener("mouseup", this._onMouseUp.bind(this), false);
-    this.element.addEventListener("contextmenu", this._onContextMenu.bind(this), false);
+    this._transformController = new WebInspector.TransformController(this.element);
+    this._transformController.addEventListener(WebInspector.TransformController.Events.TransformChanged, this._onTransformChanged, this);
     this.element.addEventListener("dblclick", this._onDoubleClick.bind(this), false);
     this.element.addEventListener("click", this._onClick.bind(this), false);
+    this.element.addEventListener("mouseout", this._onMouseMove.bind(this), false);
+    this.element.addEventListener("mousemove", this._onMouseMove.bind(this), false);
+    this.element.addEventListener("contextmenu", this._onContextMenu.bind(this), false);
     this._elementsByLayerId = {};
-    this._rotateX = 0;
-    this._rotateY = 0;
     this._scaleAdjustmentStylesheet = this.element.ownerDocument.head.createChild("style");
     this._scaleAdjustmentStylesheet.disabled = true;
     this._lastOutlinedElement = {};
     this._layerImage = document.createElement("img");
+    this._layerImage.style.width = "100%";
+    this._layerImage.style.height = "100%";
     WebInspector.settings.showPaintRects.addChangeListener(this._update, this);
 }
 
 /**
  * @enum {string}
  */
 WebInspector.Layers3DView.OutlineType = {
     Hovered: "hovered",
     Selected: "selected"
 }
@@ skipping 80 matching lines @@
         if (imageURL)
             this._layerImage.src = imageURL;
         element.appendChild(this._layerImage);
     },
 
     _scaleToFit: function()
     {
         var root = this._model.contentRoot();
         if (!root)
             return;
+
         const padding = 40;
         var scaleX = this._clientWidth / (root.width() + 2 * padding);
         var scaleY = this._clientHeight / (root.height() + 2 * padding);
-        this._scale = Math.min(scaleX, scaleY);
+        var autoScale = Math.min(scaleX, scaleY);
 
+        this._scale = autoScale * this._transformController.scale();
+        this._paddingX = ((this._clientWidth / autoScale - root.width()) >> 1) * this._scale;
+        this._paddingY = ((this._clientHeight / autoScale - root.height()) >> 1) * this._scale;
         const screenLayerSpacing = 20;
-        this._layerSpacing = Math.ceil(screenLayerSpacing / this._scale) + "px";
+        this._layerSpacing = screenLayerSpacing + "px";
         const screenLayerThickness = 4;
-        var layerThickness = Math.ceil(screenLayerThickness / this._scale) + "px";
+        var layerThickness = screenLayerThickness + "px";
+
         var stylesheetContent = ".layer-container .side-wall { height: " + layerThickness + "; width: " + layerThickness + "; } " +
             ".layer-container .back-wall { -webkit-transform: translateZ(-" + layerThickness + "); } " +
             ".layer-container { -webkit-transform: translateZ(" + this._layerSpacing + "); }";
         // Workaround for double style recalculation upon assignment to style sheet's text content.
         var stylesheetTextNode = this._scaleAdjustmentStylesheet.firstChild;
         if (!stylesheetTextNode || stylesheetTextNode.nodeType !== Node.TEXT_NODE || stylesheetTextNode.nextSibling)
             this._scaleAdjustmentStylesheet.textContent = stylesheetContent;
         else
             stylesheetTextNode.nodeValue = stylesheetContent;
-        var element = this._elementForLayer(root);
-        element.style.webkitTransform = "scale3d(" + this._scale + "," + this._scale + "," + this._scale + ")";
-        element.style.webkitTransformOrigin = "";
-        element.style.left = ((this._clientWidth - root.width() * this._scale) >> 1) + "px";
-        element.style.top = ((this._clientHeight - root.height() * this._scale) >> 1) + "px";
+
+        var style = this._elementForLayer(root).style;
+        style.left = Math.round(this._paddingX) + "px";
+        style.top = Math.round(this._paddingY) + "px";
+        style.webkitTransformOrigin = "";
+    },
+
+    /**
+     * @param {!WebInspector.Event} event
+     */
+    _onTransformChanged: function(event)
+    {
+        var changedTransforms = /** @type {number} */ (event.data);
+        if (changedTransforms & WebInspector.TransformController.TransformType.Scale)
+            this._update();
+        else
+            this._updateTransform();
+    },
+
+    _updateTransform: function()
+    {
+        var root = this._model.contentRoot();
+        if (!root)
+            return;
+        var offsetX = this._transformController.offsetX();
+        var offsetY = this._transformController.offsetY();
+        var style = this._rotatingContainerElement.style;
+        // Translate well to front so that no matter how we turn the plane, no parts of it goes below  parent.
+        // This makes sure mouse events go to proper layers, not straight to the parent.
+        style.webkitTransform = "translateZ(10000px)" +
+            " rotateX(" + this._transformController.rotateX() + "deg) rotateY(" + this._transformController.rotateY() + "deg)" +
+            " translateX(" + offsetX + "px) translateY(" + offsetY + "px)";
+        // Compute where the center of shitfted and scaled root layer would be and use is as origin for rotation.
+        style.webkitTransformOrigin = Math.round(this._paddingX + offsetX + root.width() * this._scale / 2) + "px " + Math.round(this._paddingY + offsetY + root.height() * this._scale / 2) + "px";
     },
 
     _update: function()
     {
         if (!this.isShowing()) {
             this._needsUpdate = true;
             return;
         }
         if (!this._model.contentRoot()) {
             this._emptyView.show(this.element);
@@ skipping 11 matching lines @@
         }
         this._clientWidth = this.element.clientWidth;
         this._clientHeight = this.element.clientHeight;
         for (var layerId in this._elementsByLayerId) {
             if (this._model.layerById(layerId))
                 continue;
             this._elementsByLayerId[layerId].remove();
             delete this._elementsByLayerId[layerId];
         }
         this._scaleToFit();
+        this._updateTransform();
         this._model.forEachLayer(updateLayer.bind(this), this._model.contentRoot());
         this._needsUpdate = false;
     },
 
     /**
      * @param {!WebInspector.Event} event
      */
     _onLayerPainted: function(event)
     {
         var layer = /** @type {!WebInspector.Layer} */ (event.data);
@@ skipping 29 matching lines @@
         var layer = element.__layerDetails.layer;
         var style = element.style;
         var isContentRoot = layer === this._model.contentRoot();
         var parentElement = isContentRoot ? this._rotatingContainerElement : this._elementForLayer(layer.parent());
         element.__layerDetails.depth = parentElement.__layerDetails ? parentElement.__layerDetails.depth + 1 : 0;
         element.classList.toggle("invisible", layer.invisible());
         this._updateElementColor(element);
         if (parentElement !== element.parentElement)
             parentElement.appendChild(element);
 
-        style.width  = layer.width() + "px";
-        style.height  = layer.height() + "px";
+        style.width = Math.round(layer.width() * this._scale) + "px";
+        style.height = Math.round(layer.height() * this._scale) + "px";
         this._updatePaintRect(element);
         if (isContentRoot)
             return;
-
-        style.left  = layer.offsetX() + "px";
-        style.top  = layer.offsetY() + "px";
+        style.left = Math.round(layer.offsetX() * this._scale) + "px";
+        style.top = Math.round(layer.offsetY() * this._scale) + "px";
         var transform = layer.transform();
         if (transform) {
+            transform = transform.slice();
+            // Adjust offset in the transform matrix according to scale.
+            for (var i = 12; i < 15; ++i)
+                transform[i] *= this._scale;
             // Avoid exponential notation in CSS.
             style.webkitTransform = "matrix3d(" + transform.map(toFixed5).join(",") + ") translateZ(" + this._layerSpacing + ")";
             var anchor = layer.anchorPoint();
             style.webkitTransformOrigin = Math.round(anchor[0] * 100) + "% " + Math.round(anchor[1] * 100) + "% " + anchor[2];
         } else {
             style.webkitTransform = "";
             style.webkitTransformOrigin = "";
         }
 
         function toFixed5(x)
         {
             return x.toFixed(5);
         }
     },
 
     _updatePaintRect: function(element)
     {
         var details = element.__layerDetails;
         var paintRect = details.layer.lastPaintRect();
         var paintRectElement = details.paintRectElement;
         if (!paintRect || !WebInspector.settings.showPaintRects.get()) {
             paintRectElement.classList.add("hidden");
             return;
         }
         paintRectElement.classList.remove("hidden");
         if (details.paintCount === details.layer.paintCount())
             return;
         details.paintCount = details.layer.paintCount();
         var style = paintRectElement.style;
-        style.left = paintRect.x + "px";
-        style.top = paintRect.y + "px";
-        style.width = paintRect.width + "px";
-        style.height = paintRect.height + "px";
+        style.left = Math.round(paintRect.x * this._scale) + "px";
+        style.top = Math.round(paintRect.y * this._scale) + "px";
+        style.width = Math.round(paintRect.width * this._scale) + "px";
+        style.height = Math.round(paintRect.height * this._scale) + "px";
         var color = WebInspector.Layers3DView.PaintRectColors[details.paintCount % WebInspector.Layers3DView.PaintRectColors.length];
         style.borderWidth = Math.ceil(1 / this._scale) + "px";
         style.borderColor = color.toString(WebInspector.Color.Format.RGBA);
     },
 
     /**
      * @param {!Element} element
      */
     _updateElementColor: function(element)
     {
         var color;
         if (element === this._lastOutlinedElement[WebInspector.Layers3DView.OutlineType.Selected])
             color = WebInspector.Color.PageHighlight.Content.toString(WebInspector.Color.Format.RGBA) || "";
         else {
             const base = 144;
             var component = base + 20 * ((element.__layerDetails.depth - 1) % 5);
             color = "rgba(" + component + "," + component + "," + component + ", 0.8)";
         }
         element.style.backgroundColor = color;
     },
 
     /**
      * @param {?Event} event
-     */
-    _onMouseDown: function(event)
-    {
-        if (event.which !== 1)
-            return;
-        this._setReferencePoint(event);
-    },
-
-    /**
-     * @param {?Event} event
-     */
-    _setReferencePoint: function(event)
-    {
-        this._originX = event.clientX;
-        this._originY = event.clientY;
-        this._oldRotateX = this._rotateX;
-        this._oldRotateY = this._rotateY;
-    },
-
-    _resetReferencePoint: function()
-    {
-        delete this._originX;
-        delete this._originY;
-        delete this._oldRotateX;
-        delete this._oldRotateY;
-    },
-
-    /**
-     * @param {?Event} event
-     */
-    _onMouseUp: function(event)
-    {
-        if (event.which !== 1)
-            return;
-        this._resetReferencePoint();
-    },
-
-    /**
-     * @param {?Event} event
      * @return {?WebInspector.Layer}
      */
     _layerFromEventPoint: function(event)
     {
         var element = this.element.ownerDocument.elementFromPoint(event.pageX, event.pageY);
         if (!element)
             return null;
         element = element.enclosingNodeOrSelfWithClass("layer-container");
         return element && element.__layerDetails && element.__layerDetails.layer;
     },
 
     /**
      * @param {?Event} event
      */
-    _onMouseMove: function(event)
-    {
-        if (!event.which) {
-            this.dispatchEventToListeners(WebInspector.Layers3DView.Events.LayerHovered, this._layerFromEventPoint(event));
-            return;
-        }
-        if (event.which === 1) {
-            // Set reference point if we missed mousedown.
-            if (typeof this._originX !== "number")
-                this._setReferencePoint(event);
-            this._rotateX = this._oldRotateX + (this._originY - event.clientY) / 2;
-            this._rotateY = this._oldRotateY - (this._originX - event.clientX) / 4;
-            // Translate well to front so that no matter how we turn the plane, no parts of it goes below  parent.
-            // This makes sure mouse events go to proper layers, not straight to the parent.
-            this._rotatingContainerElement.style.webkitTransform = "translateZ(10000px) rotateX(" + this._rotateX + "deg) rotateY(" + this._rotateY + "deg)";
-        }
-    },
-
-    /**
-     * @param {?Event} event
-     */
     _onContextMenu: function(event)
     {
         var layer = this._layerFromEventPoint(event);
         var nodeId = layer && layer.nodeId();
         if (!nodeId)
             return;
         var domNode = WebInspector.domAgent.nodeForId(nodeId);
         if (!domNode)
             return;
          var contextMenu = new WebInspector.ContextMenu(event);
         contextMenu.appendApplicableItems(domNode);
         contextMenu.show();
     },
 
     /**
      * @param {?Event} event
      */
+    _onMouseMove: function(event)
+    {
+        if (event.which)
+            return;
+        this.dispatchEventToListeners(WebInspector.Layers3DView.Events.LayerHovered, this._layerFromEventPoint(event));
+    },
+
+    /**
+     * @param {?Event} event
+     */
     _onClick: function(event)
     {
         this.dispatchEventToListeners(WebInspector.Layers3DView.Events.LayerSelected, this._layerFromEventPoint(event));
     },
 
     /**
      * @param {?Event} event
      */
     _onDoubleClick: function(event)
     {
@@ skipping 11 matching lines @@
  * @param {!WebInspector.Layer} layer
  * @param {!Element} paintRectElement
  */
 WebInspector.LayerDetails = function(layer, paintRectElement)
 {
     this.layer = layer;
     this.depth = 0;
     this.paintRectElement = paintRectElement;
     this.paintCount = 0;
 }