Adds DOM util for detecting mouse events in element bounding boxes (#6806)

## Motivation for features / changes
This will be useful for supporting nested modals in the upcoming CDK
Overlay based CustomModal revamp.

Author: hoonji

tensorboard/webapp/util/BUILD

@@ -97,6 +97,7 @@ tf_ts_library(
     name = "util_tests",
     testonly = True,
     srcs = [
+        "dom_test.ts",
         "lang_test.ts",
         "matcher_test.ts",
         "memoize_test.ts",
@@ -107,6 +108,7 @@ tf_ts_library(
     ],
     deps = [
         ":colors",
+        ":dom",
         ":lang",
         ":matcher",
         ":memoize",

tensorboard/webapp/util/dom.ts

@@ -40,3 +40,14 @@ export function nextElementId(): ElementId {
   currElementId++;
   return Symbol(currElementId);
 }
+
+/** Checks whether a mouse event is within an element's bounding box. */
+export function isMouseEventInElement(event: MouseEvent, el: Element): boolean {
+  const rect = el.getBoundingClientRect();
+  return (
+    rect.x <= event.clientX &&
+    event.clientX <= rect.x + rect.width &&
+    rect.y <= event.clientY &&
+    event.clientY <= rect.y + rect.height
+  );
+}

tensorboard/webapp/util/dom_test.ts

@@ -0,0 +1,67 @@
+/* Copyright 2024 The TensorFlow Authors. All Rights Reserved.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+==============================================================================*/
+
+import {isMouseEventInElement} from './dom';
+
+describe('dom utils', () => {
+  describe('isMouseEventInElement', () => {
+    [
+      {
+        testDesc: 'click is to the left of element',
+        clientX: 99,
+        clientY: 150,
+      },
+      {
+        testDesc: 'click is to the right of element',
+        clientX: 201,
+        clientY: 150,
+      },
+      {
+        testDesc: 'click is above element',
+        clientX: 150,
+        clientY: 99,
+      },
+      {
+        testDesc: 'click is below element',
+        clientX: 150,
+        clientY: 201,
+      },
+    ].forEach(({testDesc, clientX, clientY}) => {
+      it(`returns false when ${testDesc}`, () => {
+        const event = new MouseEvent('mouseup', {clientX, clientY});
+        const element = document.createElement('div');
+        spyOn(element, 'getBoundingClientRect').and.returnValue(
+          new DOMRect(100, 100, 100, 100)
+        );
+
+        const result = isMouseEventInElement(event, element);
+
+        expect(result).toBeFalse();
+      });
+    });
+
+    it('returns true when click is within element bounds', () => {
+      const event = new MouseEvent('mouseup', {clientX: 150, clientY: 150});
+      const element = document.createElement('div');
+      spyOn(element, 'getBoundingClientRect').and.returnValue(
+        new DOMRect(100, 100, 100, 100)
+      );
+
+      const result = isMouseEventInElement(event, element);
+
+      expect(result).toBeTrue();
+    });
+  });
+});