refactor: make resizing more natural

apps/renderer/src/components/ui/modal/stacked/hooks.tsx

@@ -1,3 +1,5 @@
+import type { DragControls } from "framer-motion"
+import type { ResizeCallback, ResizeStartCallback } from "re-resizable"
 import { useCallback, useContext, useId, useRef, useState } from "react"
 import { flushSync } from "react-dom"
 import { useEventCallback } from "usehooks-ts"
@@ -87,14 +89,17 @@ export const useResizeableModal = (
  modalElementRef: React.RefObject<HTMLDivElement>,
  {
  enableResizeable,
+ dragControls,
  }: {
  enableResizeable: boolean
+ dragControls?: DragControls
  },
 ) => {
  const [resizeableStyle, setResizeableStyle] = useState({} as React.CSSProperties)
  const [isResizeable, setIsResizeable] = useState(false)
+ const [preferDragDir, setPreferDragDir] = useState<"x" | "y" | null>(null)
 
- const handlePointDown = useEventCallback(() => {
+ const relocateModal = useEventCallback(() => {
  if (!enableResizeable) return
  if (isResizeable) return
  const $modalElement = modalElementRef.current
@@ -112,10 +117,33 @@ export const useResizeableModal = (
  })
  })
  })
+ const handleResizeStart = useEventCallback(((e, dir) => {
+ if (!enableResizeable) return
+ relocateModal()
+
+ const hasTop = /top/i.test(dir)
+ const hasLeft = /left/i.test(dir)
+ if (hasTop || hasLeft) {
+ dragControls?.start(e as any)
+ if (hasTop && hasLeft) {
+ setPreferDragDir(null)
+ } else if (hasTop) {
+ setPreferDragDir("y")
+ } else if (hasLeft) {
+ setPreferDragDir("x")
+ }
+ }
+ }) satisfies ResizeStartCallback)
+ const handleResizeStop = useEventCallback((() => {
+ setPreferDragDir(null)
+ }) satisfies ResizeCallback)
 
  return {
  resizeableStyle,
  isResizeable,
- handlePointDown,
+ relocateModal,
+ handleResizeStart,
+ handleResizeStop,
+ preferDragDir,
  }
 }

apps/renderer/src/components/ui/modal/stacked/modal.tsx

@@ -109,12 +109,17 @@ export const ModalInternal = memo(
 
  const modalElementRef = useRef<HTMLDivElement>(null)
 
+ const dragController = useDragControls()
  const {
- handlePointDown: handleResizeEnable,
+ handleResizeStop,
+ handleResizeStart,
+ relocateModal,
+ preferDragDir,
  isResizeable,
  resizeableStyle,
  } = useResizeableModal(modalElementRef, {
  enableResizeable: resizeable,
+ dragControls: dragController,
  })
  const animateController = useAnimationControls()
  useEffect(() => {
@@ -137,7 +142,6 @@ export const ModalInternal = memo(
  })
  }, [animateController])
 
- const dragController = useDragControls()
  const handleDrag: PointerEventHandler<HTMLDivElement> = useCallback(
  (e) => {
  if (draggable) {
@@ -347,7 +351,7 @@ export const ModalInternal = memo(
  onClick={stopPropagation}
  onSelect={handleSelectStart}
  onKeyUp={handleDetectSelectEnd}
- drag
+ drag={draggable && (preferDragDir || draggable)}
  dragControls={dragController}
  dragElastic={0}
  dragListener={false}
@@ -360,14 +364,15 @@ export const ModalInternal = memo(
  >
  <ResizeSwitch
  enable={resizableOnly("bottomRight")}
- onResizeStart={handleResizeEnable}
+ onResizeStart={handleResizeStart}
+ onResizeStop={handleResizeStop}
  defaultSize={resizeDefaultSize}
  className="flex grow flex-col"
  >
  <div
  className={"relative flex items-center"}
  onPointerDownCapture={handleDrag}
- onPointerDown={handleResizeEnable}
+ onPointerDown={relocateModal}
  >
  <Dialog.Title className="flex w-0 max-w-full grow items-center gap-2 px-4 py-1 text-lg font-semibold">
  {icon && <span className="size-4">{icon}</span>}

apps/renderer/src/modules/settings/modal/layout.tsx

@@ -29,8 +29,17 @@ export function SettingModalLayout(
  const tab = useSettingTab()
  const elementRef = useRef<HTMLDivElement>(null)
  const edgeElementRef = useRef<HTMLDivElement>(null)
- const { handlePointDown, isResizeable, resizeableStyle } = useResizeableModal(elementRef, {
+ const dragController = useDragControls()
+ const {
+ handleResizeStart,
+ handleResizeStop,
+ preferDragDir,
+ relocateModal,
+ isResizeable,
+ resizeableStyle,
+ } = useResizeableModal(elementRef, {
  enableResizeable: true,
+ dragControls: dragController,
  })
 
  useEffect(() => {
@@ -47,15 +56,14 @@ export function SettingModalLayout(
  draggable: state.modalDraggable,
  overlay: state.modalOverlay,
  }))
- const dragController = useDragControls()
  const handleDrag: PointerEventHandler<HTMLDivElement> = useCallback(
  (e) => {
  if (draggable) {
  dragController.start(e)
- handlePointDown()
+ relocateModal()
  }
  },
- [dragController, draggable, handlePointDown],
+ [dragController, draggable, relocateModal],
  )
  const measureDragConstraints = useCallback((constraints: BoundingBox) => {
  if (getOS() === "Windows") {
@@ -80,7 +88,7 @@ export function SettingModalLayout(
  )}
  style={resizeableStyle}
  onContextMenu={preventDefault}
- drag={draggable}
+ drag={draggable && (preferDragDir || draggable)}
  dragControls={dragController}
  dragListener={false}
  dragMomentum={false}
@@ -93,9 +101,9 @@ export function SettingModalLayout(
  >
  <SettingContext.Provider value={defaultCtx}>
  <Resizable
- onResizeStart={handlePointDown}
+ onResizeStart={handleResizeStart}
+ onResizeStop={handleResizeStop}
  enable={resizableOnly("bottomRight")}
- style={{ ...resizeableStyle, position: "static" }}
  defaultSize={{
  width: 800,
  height: 700,