Web Inspector: Layers visualization shouldn't select on mousedown
authorross.kirsling@sony.com <ross.kirsling@sony.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 20 Jul 2018 04:29:21 +0000 (04:29 +0000)
committerross.kirsling@sony.com <ross.kirsling@sony.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 20 Jul 2018 04:29:21 +0000 (04:29 +0000)
https://bugs.webkit.org/show_bug.cgi?id=187488

Reviewed by Matt Baker.

* UserInterface/Views/Layers3DContentView.js:
(WI.Layers3DContentView):
(WI.Layers3DContentView.prototype.initialLayout):
(WI.Layers3DContentView.prototype._canvasMouseDown):
(WI.Layers3DContentView.prototype._canvasMouseUp):
Don't update selection on mousedown, update on mouseup!
Specifically, only update when mousedown & mouseup targets are the same and mousemove hasn't been triggered.

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@234021 268f45cc-cd09-0410-ab3c-d52691b4dbfc

Source/WebInspectorUI/ChangeLog
Source/WebInspectorUI/UserInterface/Views/Layers3DContentView.js

index 79314b8..20ec0f6 100644 (file)
@@ -1,3 +1,18 @@
+2018-07-19  Ross Kirsling  <ross.kirsling@sony.com>
+
+        Web Inspector: Layers visualization shouldn't select on mousedown
+        https://bugs.webkit.org/show_bug.cgi?id=187488
+
+        Reviewed by Matt Baker.
+
+        * UserInterface/Views/Layers3DContentView.js:
+        (WI.Layers3DContentView):
+        (WI.Layers3DContentView.prototype.initialLayout):
+        (WI.Layers3DContentView.prototype._canvasMouseDown):
+        (WI.Layers3DContentView.prototype._canvasMouseUp):
+        Don't update selection on mousedown, update on mouseup!
+        Specifically, only update when mousedown & mouseup targets are the same and mousemove hasn't been triggered.
+
 2018-07-19  Nikita Vasilyev  <nvasilyev@apple.com>
 
         Web Inspector: Dark Mode: poor contrast for Search Tab's "the page's content has changed" message
index 52ae732..3d38f74 100644 (file)
@@ -45,6 +45,7 @@ WI.Layers3DContentView = class Layers3DContentView extends WI.ContentView
         this._layers = [];
         this._layerGroupsById = new Map;
         this._selectedLayerGroup = null;
+        this._candidateSelection = null;
         this._nodeToSelect = null;
 
         this._renderer = null;
@@ -53,7 +54,6 @@ WI.Layers3DContentView = class Layers3DContentView extends WI.ContentView
         this._scene = null;
         this._boundingBox = null;
         this._raycaster = null;
-        this._mouse = null;
         this._animationFrameRequestId = null;
         this._documentNode = null;
 
@@ -164,8 +164,8 @@ WI.Layers3DContentView = class Layers3DContentView extends WI.ContentView
         this._boundingBox = new THREE.Box3;
 
         this._raycaster = new THREE.Raycaster;
-        this._mouse = new THREE.Vector2;
         this._renderer.domElement.addEventListener("mousedown", this._canvasMouseDown.bind(this));
+        this._renderer.domElement.addEventListener("mouseup", this._canvasMouseUp.bind(this));
 
         this.element.appendChild(this._renderer.domElement);
 
@@ -310,13 +310,29 @@ WI.Layers3DContentView = class Layers3DContentView extends WI.ContentView
 
     _canvasMouseDown(event)
     {
-        this._mouse.x = (event.offsetX / event.target.width) * 2 - 1;
-        this._mouse.y = -(event.offsetY / event.target.height) * 2 + 1;
-        this._raycaster.setFromCamera(this._mouse, this._camera);
+        let x = (event.offsetX / event.target.offsetWidth) * 2 - 1;
+        let y = -(event.offsetY / event.target.offsetHeight) * 2 + 1;
+        this._raycaster.setFromCamera(new THREE.Vector2(x, y), this._camera);
 
         const recursive = true;
         let intersects = this._raycaster.intersectObjects(this._scene.children, recursive);
-        let selection = intersects.length ? intersects[0].object.parent : null;
+        let layerGroup = intersects.length ? intersects[0].object.parent : null;
+        this._candidateSelection = {layerGroup};
+
+        let canvasMouseMove = (event) => {
+            this._candidateSelection = null;
+            this._renderer.domElement.removeEventListener("mousemove", canvasMouseMove);
+        };
+
+        this._renderer.domElement.addEventListener("mousemove", canvasMouseMove);
+    }
+
+    _canvasMouseUp(event)
+    {
+        if (!this._candidateSelection)
+            return;
+
+        let selection = this._candidateSelection.layerGroup;
         if (selection && selection === this._selectedLayerGroup) {
             if (!event.metaKey)
                 return;