refactor: resizer component and remove div resizer

src/component/elements/ResizerWithScale.tsx

@@ -3,7 +3,7 @@ import { useEffect, useState } from 'react';
 import { useScaleX } from '../1d/utilities/scale';
 import { useGlobal } from '../context/GlobalContext';
 
-import Resizer, { ResizerProps } from './resizer/Resizer';
+import SVGResizer, { ResizerProps } from './resizer/SVGResizer';
 
 interface ResizerWithScaleProps {
   disabled: boolean;
@@ -28,15 +28,14 @@ export function ResizerWithScale(props: ResizerWithScaleProps) {
   }, [from, scaleX, to]);
 
   return (
-    <Resizer
-      tag="svg"
+    <SVGResizer
       position={position}
       onEnd={onEnd}
       parentElement={viewerRef}
       disabled={disabled}
       onMove={(p) => setPosition(p)}
     >
       {children}
-    </Resizer>
+    </SVGResizer>
   );
 }

src/component/elements/resizer/SVGResizer.tsx

@@ -1,8 +1,8 @@
+/* eslint-disable react/no-unused-prop-types */
 /** @jsxImportSource @emotion/react */
 import { css } from '@emotion/react';
 import { CSSProperties } from 'react';
 
-import { ResizerProps } from './Resizer';
 import useResizer from './useResizer';
 
 const style: Record<'anchor' | 'innerContainer', CSSProperties> = {
@@ -33,6 +33,26 @@ const styles = {
   `,
 };
 
+export interface Position {
+  x1: number;
+  x2: number;
+}
+
+type ChildType = React.ReactElement[] | React.ReactElement | boolean | null;
+
+export interface ResizerProps {
+  children?: ChildType | ((position: Position, isActive: boolean) => ChildType);
+  position: Position;
+  onStart?: PositionChangeHandler;
+  onMove?: PositionChangeHandler;
+  onEnd?: PositionChangeHandler;
+  parentElement?: HTMLElement | null;
+  dragHandleClassName?: string;
+  disabled?: boolean;
+}
+
+type PositionChangeHandler = (data: Position) => void;
+
 export default function SVGResizer(props: ResizerProps) {
   const { children, disabled, position } = props;
   const { left, right, isActive } = useResizer(props);

src/component/elements/resizer/useResizer.tsx

@@ -2,7 +2,7 @@ import { useRef } from 'react';
 
 import useDraggable, { Draggable } from '../draggable/useDraggable';
 
-import { ResizerProps, Position } from './Resizer';
+import { ResizerProps, Position } from './SVGResizer';
 
 interface UseResizer {
   right: Draggable;