Changeset 234021 in webkit

Timestamp:

Jul 19, 2018 9:29:21 PM (6 years ago)

Author:

Ross Kirsling

Message:

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.

Location:

trunk/Source/WebInspectorUI

Files:

• ChangeLog (modified) (1 diff)
• UserInterface/Views/Layers3DContentView.js (modified) (4 diffs)

trunk/Source/WebInspectorUI/ChangeLog

@@ +1 @@
+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>
 

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

@@ -46 +46 @@
         this._layerGroupsById = new Map;
         this._selectedLayerGroup = null;
+        this._candidateSelection = null;
         this._nodeToSelect = null;
 
@@ -54 +55 @@
         this._boundingBox = null;
         this._raycaster = null;
-        this._mouse = null;
         this._animationFrameRequestId = null;
         this._documentNode = null;
@@ -165 +165 @@
 
         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);
@@ -311 +311 @@
     _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)