fix: When quickly selecting different instances, the instance is not selected. (#4370)

## Description

partial fix for 1 from
#4095

The issue was incorrect clickCount count

## Steps for reproduction

1. click button
2. expect xyz

## Code Review

- [ ] hi @kof, I need you to do
  - conceptual review (architecture, feature-correctness)
  - detailed review (read every line)
  - test it on preview

## Before requesting a review

- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")

## Before merging

- [ ] tested locally and on preview environment (preview dev login:
5de6)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env` file

Author: istarkov

apps/builder/app/builder/features/workspace/canvas-tools/outline/hovered-instance-outline.tsx

@@ -10,7 +10,7 @@ import { Label } from "./label";
 import { applyScale } from "./apply-scale";
 import { $scale } from "~/builder/shared/nano-states";
 import { findClosestSlot } from "~/shared/instance-utils";
-import deepEqual from "fast-deep-equal";
+import { shallowEqual } from "shallow-equal";
 
 export const HoveredInstanceOutline = () => {
   const instances = useStore($instances);
@@ -24,7 +24,7 @@ export const HoveredInstanceOutline = () => {
   }
 
   if (
-    deepEqual(hoveredInstanceSelector, textEditingInstanceSelector?.selector)
+    shallowEqual(hoveredInstanceSelector, textEditingInstanceSelector?.selector)
   ) {
     return;
   }

apps/builder/app/canvas/instance-selection.ts

@@ -7,86 +7,96 @@ import {
 } from "~/shared/nano-states";
 import { $textEditingInstanceSelector } from "~/shared/nano-states";
 import { emitCommand } from "./shared/commands";
+import { shallowEqual } from "shallow-equal";
+
+const isElementBeingEdited = (element: Element) => {
+  if (element.closest("[contenteditable=true]")) {
+    return true;
+  }
+
+  return false;
+};
 
 export const subscribeInstanceSelection = ({
   signal,
 }: {
   signal: AbortSignal;
 }) => {
-  let pointerDownElement: undefined | Element = undefined;
-  let lastPointerUpTime = 0;
-  let clickCount = 1;
-
-  const handlePointerDown = (event: PointerEvent) => {
-    pointerDownElement = event.target as Element;
-    // track multiple clicks when pointerdown is fired within 500ms after last pointerup
-    const currentTime = performance.now();
-    if (currentTime - lastPointerUpTime < 500) {
-      clickCount += 1;
-    } else {
-      clickCount = 1;
-    }
-  };
-
-  const handlePointerUp = (event: PointerEvent) => {
-    const element = event.target as Element;
-
-    // when user is selecting text inside content editable and mouse goes up
-    // on a different instance - we don't want to select a different instance
-    // because that would cancel the text selection.
-    if (pointerDownElement === undefined || pointerDownElement !== element) {
-      return;
-    }
-    pointerDownElement = undefined;
-
-    // track double clicks manually because pointer events do not support event.detail
-    // for clicks count
-    lastPointerUpTime = performance.now();
-
-    if (clickCount === 1) {
-      // notify whole app about click on document
-      // e.g. to hide the side panel
+  addEventListener(
+    "click",
+    (event) => {
+      const element = event.target;
+
       emitCommand("clickCanvas");
-    }
-
-    // prevent selecting instances inside text editor while editing text
-    if (element.closest("[contenteditable=true]")) {
-      return;
-    }
-
-    const instanceSelector = getInstanceSelectorFromElement(element);
-    if (instanceSelector === undefined) {
-      return;
-    }
-
-    // the first click in double click or the only one in regular click
-    if (clickCount === 1) {
-      $selectedInstanceSelector.set(instanceSelector);
-      // reset text editor when another instance is selected
-      $textEditingInstanceSelector.set(undefined);
-    }
-
-    // the second click in a double click.
-    if (clickCount === 2) {
+
+      if (!(element instanceof Element)) {
+        return;
+      }
+
+      if (isElementBeingEdited(element)) {
+        return;
+      }
+
+      const instanceSelector = getInstanceSelectorFromElement(element);
+
+      if (instanceSelector === undefined) {
+        return;
+      }
+
+      // Prevent unnecessary updates (2 clicks are registered before a double click)
+      if ($textEditingInstanceSelector.get() !== undefined) {
+        $textEditingInstanceSelector.set(undefined);
+      }
+
+      // Prevent unnecessary updates (2 clicks are registered before a double click)
+      if (!shallowEqual(instanceSelector, $selectedInstanceSelector.get())) {
+        $selectedInstanceSelector.set(instanceSelector);
+      }
+    },
+    { passive: true, signal }
+  );
+
+  addEventListener(
+    "dblclick",
+    (event) => {
+      const element = event.target;
+
+      if (!(element instanceof Element)) {
+        return;
+      }
+
+      if (isElementBeingEdited(element)) {
+        return;
+      }
+
+      const instanceSelector = getInstanceSelectorFromElement(element);
+
+      if (instanceSelector === undefined) {
+        return;
+      }
+
       const editableInstanceSelector = findClosestEditableInstanceSelector(
         instanceSelector,
         $instances.get(),
         $registeredComponentMetas.get()
       );
 
-      // enable text editor when double click on its instance or one of its descendants
-      if (editableInstanceSelector) {
+      if (editableInstanceSelector === undefined) {
+        return;
+      }
+
+      // Prevent unnecessary updates (should already be selected during click)
+      if (!shallowEqual(instanceSelector, editableInstanceSelector)) {
         $selectedInstanceSelector.set(editableInstanceSelector);
-        $textEditingInstanceSelector.set({
-          selector: editableInstanceSelector,
-          reason: "click",
-          mouseX: event.clientX,
-          mouseY: event.clientY,
-        });
       }
-    }
-  };
 
-  addEventListener("pointerdown", handlePointerDown, { passive: true, signal });
-  addEventListener("pointerup", handlePointerUp, { passive: true, signal });
+      $textEditingInstanceSelector.set({
+        selector: editableInstanceSelector,
+        reason: "click",
+        mouseX: event.clientX,
+        mouseY: event.clientY,
+      });
+    },
+    { passive: true, signal }
+  );
 };