react-cheminfo 0.16.0 → 0.18.0

package/src/structure/ui/useToolbarHover.ts

@@ -0,0 +1,134 @@
+import type { RefObject } from 'react';
+import { useEffect, useState } from 'react';
+
+import type { EditorToolbarButtonBox } from '../core/editorToolbarGeometry.ts';
+import {
+  editorToolbarButtonAt,
+  editorToolbarButtonBox,
+} from '../core/editorToolbarGeometry.ts';
+
+import { watchToolbar } from './watchToolbar.ts';
+
+/** The toolbar button the pointer rests on, or last rested on. */
+export interface ToolbarHover {
+  /** The button's index in `EDITOR_TOOLBAR_BUTTONS`. */
+  button: number;
+  /** Where the button is drawn, relative to the container's padding box. */
+  box: EditorToolbarButtonBox;
+  /**
+   * Whether its tooltip is showing. The last button is kept after the pointer
+   * leaves, so a closing tooltip fades out with its text rather than empty.
+   */
+  open: boolean;
+}
+
+/**
+ * Follow the pointer over the editor's toolbar.
+ *
+ * The first button waits for the pointer to rest, so crossing the toolbar on
+ * the way to the drawing opens nothing; once one is showing, the next follows
+ * at once. Pressing a button hides its tooltip until the pointer moves on,
+ * since whoever pressed it no longer needs telling. Touch is ignored: a finger
+ * has no hover, and a tooltip opened by a tap would cover the canvas.
+ * @param containerRef - The element wrapping the editor, positioned so the
+ * returned box can be laid over the button.
+ * @returns The button under the pointer, or null before any has been hovered.
+ */
+export function useToolbarHover(
+  containerRef: RefObject<HTMLElement | null>,
+): ToolbarHover | null {
+  const [hover, setHover] = useState<ToolbarHover | null>(null);
+
+  useEffect(() => {
+    const container = containerRef.current;
+    if (container === null) return;
+
+    let timer: ReturnType<typeof setTimeout> | undefined;
+    let current = -1;
+    let pressed = -1;
+    let open = false;
+
+    const show = (toolbar: HTMLCanvasElement, button: number): void => {
+      open = true;
+      setHover({ button, box: boxIn(container, toolbar, button), open });
+    };
+    const hide = (): void => {
+      clearTimeout(timer);
+      if (!open) return;
+      open = false;
+      setHover((previous) =>
+        previous === null ? null : { ...previous, open: false },
+      );
+    };
+
+    const onLeave = (): void => {
+      current = -1;
+      pressed = -1;
+      hide();
+    };
+    const onDown = (): void => {
+      pressed = current;
+      hide();
+    };
+
+    const stop = watchToolbar(container, (toolbar) => {
+      const onMove = (event: PointerEvent): void => {
+        if (event.pointerType === 'touch') return;
+        const button = editorToolbarButtonAt(
+          event.offsetX,
+          event.offsetY,
+          toolbar.offsetHeight,
+        );
+        if (button === current) return;
+        current = button;
+        if (button !== pressed) pressed = -1;
+        if (button === -1 || button === pressed) {
+          hide();
+          return;
+        }
+        clearTimeout(timer);
+        if (open) {
+          show(toolbar, button);
+          return;
+        }
+        timer = setTimeout(() => show(toolbar, button), OPEN_DELAY);
+      };
+
+      toolbar.addEventListener('pointermove', onMove);
+      toolbar.addEventListener('pointerleave', onLeave);
+      toolbar.addEventListener('pointerdown', onDown);
+      return () => {
+        toolbar.removeEventListener('pointermove', onMove);
+        toolbar.removeEventListener('pointerleave', onLeave);
+        toolbar.removeEventListener('pointerdown', onDown);
+        onLeave();
+      };
+    });
+
+    return () => {
+      stop();
+      clearTimeout(timer);
+    };
+  }, [containerRef]);
+
+  return hover;
+}
+
+// Long enough that sweeping the pointer across the toolbar opens nothing.
+const OPEN_DELAY = 250;
+
+function boxIn(
+  container: HTMLElement,
+  toolbar: HTMLCanvasElement,
+  button: number,
+): EditorToolbarButtonBox {
+  const box = editorToolbarButtonBox(button, toolbar.offsetHeight);
+  const toolbarRect = toolbar.getBoundingClientRect();
+  const containerRect = container.getBoundingClientRect();
+  return {
+    ...box,
+    left:
+      toolbarRect.left - containerRect.left - container.clientLeft + box.left,
+    top: toolbarRect.top - containerRect.top - container.clientTop + box.top,
+  };
+}

package/src/structure/ui/watchToolbar.ts

@@ -0,0 +1,59 @@
+/**
+ * Run something against the editor's toolbar canvas as soon as it exists, and
+ * again against each new one the editor builds.
+ *
+ * The editor is imported lazily and builds itself asynchronously, so the
+ * toolbar is almost never there on the first look, and how long it takes is a
+ * cold module graph and a network away from anything this code can predict.
+ * So its arrival is watched for rather than waited out: a deadline that
+ * expires leaves whatever depends on the toolbar missing for the life of the
+ * page, with nothing on screen to say why.
+ * @param container - The element wrapping the editor.
+ * @param onToolbar - Called with each toolbar found; what it returns is called
+ * when that toolbar is replaced or the watch ends.
+ * @returns A function ending the watch.
+ */
+export function watchToolbar(
+  container: HTMLElement,
+  onToolbar: (toolbar: HTMLCanvasElement) => () => void,
+): () => void {
+  let toolbar: HTMLCanvasElement | null = null;
+  let release: (() => void) | null = null;
+
+  const attach = (): void => {
+    const found = findToolbar(container);
+    if (found === null) return;
+    release?.();
+    toolbar = found;
+    release = onToolbar(found);
+  };
+
+  const arrivals = new MutationObserver(() => {
+    if (toolbar?.isConnected === true) return;
+    attach();
+  });
+  arrivals.observe(container, { childList: true, subtree: true });
+  attach();
+
+  return () => {
+    arrivals.disconnect();
+    release?.();
+  };
+}
+
+/**
+ * Find the toolbar canvas of the editor.
+ *
+ * The editor builds itself inside a shadow root and puts the toolbar there as
+ * a direct child, the drawing canvas being nested deeper.
+ * @param container - The element wrapping the editor.
+ * @returns The toolbar canvas, or null while the editor has not drawn one.
+ */
+function findToolbar(container: HTMLElement): HTMLCanvasElement | null {
+  for (const element of container.querySelectorAll('*')) {
+    for (const child of element.shadowRoot?.children ?? []) {
+      if (child instanceof HTMLCanvasElement) return child;
+    }
+  }
+  return null;
+}