Function DropWindowCover

app/src/DropWindowCover.tsx:12–120

({ project }: { project: Project })

 * 用于提示用户在不同位置释放有不同的效果
 */
export const DropWindowCover = ({ project }: { project: Project }) => {
  const fadeOutMs = 700;
  const [dropMouseLocation, setDropMouseLocation] = useState<"top" | "middle" | "bottom" | "notInWindowZone">(
    "notInWindowZone",
  );
  const [isFadingOut, setIsFadingOut] = useState(false);
  const isDraft = project.isDraft;

  const hideTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
  const rafRef = useRef<number | null>(null);

  useEffect(() => {
    const cancelAnimation = () => {
      if (hideTimerRef.current) clearTimeout(hideTimerRef.current);
      if (rafRef.current) cancelAnimationFrame(rafRef.current);
      hideTimerRef.current = null;
      rafRef.current = null;
    };

    const unlistenPromise = getCurrentWindow().onDragDropEvent(async (event) => {
      const size = await getCurrentWindow().outerSize();
      const logicalHeight = isMac ? size.height / (await getCurrentWindow().scaleFactor()) : size.height;
      const getDropLocation = (y: number) =>
        y <= logicalHeight / 3 ? "top" : y <= (logicalHeight / 3) * 2 ? "middle" : "bottom";

      if (event.payload.type === "over") {
        cancelAnimation();
        setIsFadingOut(false);
        setDropMouseLocation(getDropLocation(event.payload.position.y));
      } else if (event.payload.type === "leave") {
        cancelAnimation();
        setIsFadingOut(false);
        setDropMouseLocation("notInWindowZone");
      } else if (event.payload.type === "drop") {
        cancelAnimation();
        const dropLocation = getDropLocation(event.payload.position.y);
        setIsFadingOut(false);
        setDropMouseLocation(dropLocation);
        rafRef.current = requestAnimationFrame(() => {
          setIsFadingOut(true);
        });
        hideTimerRef.current = setTimeout(() => {
          setDropMouseLocation("notInWindowZone");
          setIsFadingOut(false);
        }, fadeOutMs);

        if (dropLocation === "top") {
          DragFileIntoStageEngine.handleDrop(project, event.payload.paths);
        } else if (dropLocation === "middle") {
          DragFileIntoStageEngine.handleDropFileRelativePath(project, event.payload.paths);
        } else {
          DragFileIntoStageEngine.handleDropFileAbsolutePath(project, event.payload.paths);
        }
      }
    });

    return () => {
      cancelAnimation();