Rename DomainTooltip to DomainControls and move tooltip logic out

packages/lib/src/toolbar/controls/DomainWidget/BoundEditor.module.css

@@ -57,5 +57,5 @@
 }
 
 .actionBtn {
-  composes: actionBtn from './DomainTooltip.module.css';
+  composes: actionBtn from './DomainControls.module.css';
 }

packages/lib/src/toolbar/controls/DomainWidget/DomainTooltip.module.css → packages/lib/src/toolbar/controls/DomainWidget/DomainControls.module.css

@@ -1,20 +1,3 @@
-.tooltip {
-  composes: popup from '../../Toolbar.module.css';
-  z-index: 2; /* above overflow and selector menus */
-  /* Add invisible padding around tooltip to extend hover area */
-  /* (especially for when enabling auto-scaling hides an error message). */
-  padding-left: 2rem;
-  padding-right: 2rem;
-  padding-bottom: 2rem;
-}
-
-.tooltipInner {
-  composes: popupInner from '../../Toolbar.module.css';
-  padding: 1rem 0.375rem 1rem 0.75rem;
-  display: flex;
-  align-items: center;
-}
-
 .tooltipControls > p {
   margin-bottom: 0.75rem;
 }

packages/lib/src/toolbar/controls/DomainWidget/DomainControls.tsx

@@ -0,0 +1,128 @@
+import type { Domain } from '@h5web/shared';
+import { formatBound } from '@h5web/shared';
+import { forwardRef, useImperativeHandle, useRef } from 'react';
+
+import type { DomainErrors } from '../../../vis/models';
+import { DomainError } from '../../../vis/models';
+import ToggleBtn from '../ToggleBtn';
+import type { BoundEditorHandle } from './BoundEditor';
+import BoundEditor from './BoundEditor';
+import styles from './DomainControls.module.css';
+import ErrorMessage from './ErrorMessage';
+
+interface Props {
+  sliderDomain: Domain;
+  dataDomain: Domain;
+  errors: DomainErrors;
+  isAutoMin: boolean;
+  isAutoMax: boolean;
+  onAutoMinToggle: () => void;
+  onAutoMaxToggle: () => void;
+  isEditingMin: boolean;
+  isEditingMax: boolean;
+  onEditMin: (force: boolean) => void;
+  onEditMax: (force: boolean) => void;
+  onChangeMin: (val: number) => void;
+  onChangeMax: (val: number) => void;
+  onSwap: () => void;
+}
+
+interface Handle {
+  cancelEditing: () => void;
+}
+
+const DomainControls = forwardRef<Handle, Props>((props, ref) => {
+  const { sliderDomain, dataDomain, errors } = props;
+  const { isAutoMin, isAutoMax, isEditingMin, isEditingMax } = props;
+  const {
+    onAutoMinToggle,
+    onAutoMaxToggle,
+    onEditMin,
+    onEditMax,
+    onChangeMin,
+    onChangeMax,
+    onSwap,
+  } = props;
+
+  const { minGreater, minError, maxError } = errors;
+  const minEditorRef = useRef<BoundEditorHandle>(null);
+  const maxEditorRef = useRef<BoundEditorHandle>(null);
+
+  /* Expose `cancelEditing` function to parent component through ref handle so that
+     editing can be cancelled when the user closes the domain tooltip. */
+  useImperativeHandle(ref, () => ({
+    cancelEditing: () => {
+      minEditorRef.current?.cancel();
+      maxEditorRef.current?.cancel();
+    },
+  }));
+
+  return (
+    <div className={styles.tooltipControls}>
+      {minGreater && (
+        <ErrorMessage
+          error={DomainError.MinGreater}
+          showSwapBtn={!isAutoMin && !isAutoMax}
+          onSwap={onSwap}
+        />
+      )}
+      <BoundEditor
+        ref={minEditorRef}
+        bound="min"
+        value={sliderDomain[0]}
+        isEditing={isEditingMin}
+        hasError={minGreater || !!minError}
+        onEditToggle={onEditMin}
+        onChange={onChangeMin}
+      />
+      {minError && <ErrorMessage error={minError} />}
+
+      <BoundEditor
+        ref={maxEditorRef}
+        bound="max"
+        value={sliderDomain[1]}
+        isEditing={isEditingMax}
+        hasError={minGreater || !!maxError}
+        onEditToggle={onEditMax}
+        onChange={onChangeMax}
+      />
+      {maxError && <ErrorMessage error={maxError} />}
+
+      <p className={styles.dataRange}>
+        Data range{' '}
+        <span>
+          [{' '}
+          <abbr title={dataDomain[0].toString()}>
+            {formatBound(dataDomain[0])}
+          </abbr>{' '}
+          ,{' '}
+          <abbr title={dataDomain[1].toString()}>
+            {formatBound(dataDomain[1])}
+          </abbr>{' '}
+          ]
+        </span>
+      </p>
+
+      <p className={styles.autoscale}>
+        Autoscale{' '}
+        <ToggleBtn
+          label="Min"
+          raised
+          value={isAutoMin}
+          onToggle={onAutoMinToggle}
+        />
+        <ToggleBtn
+          label="Max"
+          raised
+          value={isAutoMax}
+          onToggle={onAutoMaxToggle}
+        />
+      </p>
+    </div>
+  );
+});
+
+DomainControls.displayName = 'DomainControls';
+
+export type { Handle as DomainControlsHandle };
+export default DomainControls;

packages/lib/src/toolbar/controls/DomainWidget/DomainWidget.module.css

@@ -19,3 +19,20 @@
 .root[data-disabled] > .sliderContainer {
   opacity: 0.5; /* edit button is itself disabled, so don't fade it more */
 }
+
+.tooltip {
+  composes: popup from '../../Toolbar.module.css';
+  z-index: 2; /* above overflow and selector menus */
+  /* Add invisible padding around tooltip to extend hover area */
+  /* (especially for when enabling auto-scaling hides an error message). */
+  padding-left: 2rem;
+  padding-right: 2rem;
+  padding-bottom: 2rem;
+}
+
+.tooltipInner {
+  composes: popupInner from '../../Toolbar.module.css';
+  padding: 1rem 0.375rem 1rem 0.75rem;
+  display: flex;
+  align-items: center;
+}