feat: use floating-ui for form positioning

package.json

@@ -40,7 +40,8 @@
     "react-dom": ">=18"
   },
   "dependencies": {
-    "@emotion/styled": "^11.14.1"
+    "@emotion/styled": "^11.14.1",
+    "@floating-ui/react-dom": "^2.1.6"
   },
   "devDependencies": {
     "@storybook/addon-vitest": "^9.1.16",

src/components/svg/editor/reducer.ts

@@ -5,7 +5,7 @@ export type State =
   | {
       mode: 'atom-label-edit';
       atomId: number;
-      formCoords: { x: number; y: number };
+      atomCoords: { x: number; y: number };
     };
 
 export type Action =
@@ -32,12 +32,11 @@ export function stateReducer(state: State, action: Action): State {
       const target = action.event.target as SVGCircleElement;
       const svg = target.closest('svg') as SVGElement;
       const rect = svg.getBoundingClientRect();
-      const formCoords = {
-        // offset by 5px to avoid cursor onMouseLeave not triggered
-        x: clientX - rect.x + 5,
-        y: clientY - rect.y + 5,
+      const atomCoords = {
+        x: clientX - rect.x,
+        y: clientY - rect.y,
       };
-      return { mode: 'atom-label-edit', atomId: action.atomId, formCoords };
+      return { mode: 'atom-label-edit', atomId: action.atomId, atomCoords };
     }
     case 'stopEdit':
       return { mode: 'view' };

src/components/svg/svg_editor.tsx

@@ -1,3 +1,4 @@
+import { offset, shift, useFloating } from '@floating-ui/react-dom';
 import type { Molecule } from 'openchemlib';
 import type {
   FormEvent,
@@ -167,7 +168,7 @@ export function SvgEditor(props: SvgEditorProps) {
         <AtomLabelEditForm
           key={defaultAtomLabel}
           defaultValue={defaultAtomLabel}
-          formCoords={state.formCoords}
+          atomCoords={state.atomCoords}
           onSubmit={onAtomLabelSubmit}
           onCancel={() => dispatch({ type: 'stopEdit' })}
         />
@@ -178,13 +179,17 @@ export function SvgEditor(props: SvgEditorProps) {
 
 interface AtomLabelEditFormProps {
   defaultValue: string;
-  formCoords: { x: number; y: number };
+  atomCoords: { x: number; y: number };
   onSubmit: (value: string) => void;
   onCancel: () => void;
 }
 
 function AtomLabelEditForm(props: AtomLabelEditFormProps) {
-  const { defaultValue, formCoords, onSubmit, onCancel } = props;
+  const { defaultValue, atomCoords, onSubmit, onCancel } = props;
+  const floating = useFloating({
+    placement: 'bottom-start',
+    middleware: [offset({ crossAxis: 5 }), shift({ crossAxis: true })],
+  });
 
   function onFormSubmit(event: FormEvent<HTMLFormElement>) {
     event.preventDefault();
@@ -207,15 +212,14 @@ function AtomLabelEditForm(props: AtomLabelEditFormProps) {
     onCancel();
   }
 
-  const formRef = useRef<HTMLFormElement>(null);
   const onCancelRef = useRef(onCancel);
   useEffect(() => {
     onCancelRef.current = onCancel;
   });
 
   useEffect(() => {
     function onClickOutside(event: PointerEvent) {
-      const form = formRef.current;
+      const form = floating.refs.floating.current;
       if (!form) return;
 
       if (form === event.currentTarget) return;
@@ -236,14 +240,14 @@ function AtomLabelEditForm(props: AtomLabelEditFormProps) {
       clearTimeout(timeoutId);
       document.removeEventListener('click', onClickOutside);
     };
-  }, []);
+  }, [floating.refs.floating]);
 
   function onShortcut(event: MouseEvent<HTMLButtonElement>) {
     event.preventDefault();
     event.stopPropagation();
 
-    if (!formRef.current) return;
-    const form = formRef.current;
+    if (!floating.refs.floating.current) return;
+    const form = floating.refs.floating.current;
     const input = form.querySelector('input[type="text"]') as HTMLInputElement;
     if (!input) return;
 
@@ -258,58 +262,73 @@ function AtomLabelEditForm(props: AtomLabelEditFormProps) {
   }
 
   return (
-    <AtomLabelEditFormStyled
-      ref={formRef}
-      onSubmit={onFormSubmit}
-      onKeyDown={onKeyDown}
-      style={{ top: formCoords.y, left: formCoords.x }}
-    >
-      <AtomLabelEditInputStyled
-        type="text"
-        name="label"
-        defaultValue={defaultValue}
-        size={5}
-        autoFocus
-        ref={autoSelectText}
+    <>
+      {/* dom node for floating ui to hook on */}
+      <span
+        ref={floating.refs.setReference}
+        style={{
+          position: 'absolute',
+          top: atomCoords.y,
+          left: atomCoords.x,
+        }}
       />
-      <AtomLabelEditButtonStyled
-        area="submit"
-        type="submit"
-        aria-label="Submit"
-      >
-        ✔️
-      </AtomLabelEditButtonStyled>
-      <AtomLabelEditButtonStyled
-        area="cancel"
-        type="button"
-        aria-label="Cancel"
-        onClick={onCancelClick}
-      >
-        ❌
-      </AtomLabelEditButtonStyled>
 
-      {Object.entries(greekLetters).map(([charName, greekChar]) => (
+      {/* The floating form */}
+      <AtomLabelEditFormStyled
+        // eslint-disable-next-line react-hooks/refs
+        ref={floating.refs.setFloating}
+        onSubmit={onFormSubmit}
+        onKeyDown={onKeyDown}
+        // eslint-disable-next-line react-hooks/refs
+        style={floating.floatingStyles}
+      >
+        <AtomLabelEditInputStyled
+          type="text"
+          name="label"
+          defaultValue={defaultValue}
+          size={5}
+          autoFocus
+          ref={autoSelectText}
+        />
         <AtomLabelEditButtonStyled
-          key={charName}
-          area={charName}
-          type="button"
-          onClick={onShortcut}
+          area="submit"
+          type="submit"
+          aria-label="Submit"
         >
-          {greekChar}
+          ✔️
         </AtomLabelEditButtonStyled>
-      ))}
-
-      {Object.entries(primes).map(([primeName, primeChar]) => (
         <AtomLabelEditButtonStyled
-          key={primeName}
-          area={primeName}
+          area="cancel"
           type="button"
-          onClick={onShortcut}
+          aria-label="Cancel"
+          onClick={onCancelClick}
         >
-          {primeChar}
+          ❌
         </AtomLabelEditButtonStyled>
-      ))}
-    </AtomLabelEditFormStyled>
+
+        {Object.entries(greekLetters).map(([charName, greekChar]) => (
+          <AtomLabelEditButtonStyled
+            key={charName}
+            area={charName}
+            type="button"
+            onClick={onShortcut}
+          >
+            {greekChar}
+          </AtomLabelEditButtonStyled>
+        ))}
+
+        {Object.entries(primes).map(([primeName, primeChar]) => (
+          <AtomLabelEditButtonStyled
+            key={primeName}
+            area={primeName}
+            type="button"
+            onClick={onShortcut}
+          >
+            {primeChar}
+          </AtomLabelEditButtonStyled>
+        ))}
+      </AtomLabelEditFormStyled>
+    </>
   );
 }
 

stories/svg_editors/svg_editor.stories.tsx

@@ -1,3 +1,4 @@
+import styled from '@emotion/styled';
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import { useState } from 'react';
 
@@ -32,3 +33,18 @@ export const WithCssReset: Story = {
     );
   },
 };
+
+const Container = styled.div`
+  width: 300px;
+  overflow: hidden;
+  border: 1px solid black;
+`;
+export const InSmallWidthContainer: Story = {
+  decorators: (Story) => {
+    return (
+      <Container>
+        <Story />
+      </Container>
+    );
+  },
+};