Merge branch 'feat/dragmodal' into 'main'

Feat/dragmodal

See merge request !157

src/ui/Duel/checkCardModal.tsx

@@ -13,15 +13,14 @@ import {
   resetCheckCardModal,
   setCheckCardModalIsOpen,
 } from "../../reducers/duel/mod";
-import { Modal, Button, Row, Col, Popover } from "antd";
+import { Button, Row, Col, Popover } from "antd";
 import { CheckCard } from "@ant-design/pro-components";
 import {
   sendSelectCardResponse,
   sendSelectChainResponse,
 } from "../../api/ocgcore/ocgHelper";
-import type { DraggableData, DraggableEvent } from "react-draggable";
-import Draggable from "react-draggable";
 import NeosConfig from "../../../neos.config.json";
+import DragModal from "./dragModal";
 
 const CheckCardModal = () => {
   const dispatch = store.dispatch;
@@ -33,30 +32,10 @@ const CheckCardModal = () => {
   const cancelResponse = useAppSelector(selectCheckCardModalCacnelResponse);
   const [response, setResponse] = useState<number[]>([]);
   const defaultValue: number[] = [];
-
   // Draggable 相关
   const [draggable, setDraggable] = useState(false);
-  const [bounds, setBounds] = useState({
-    left: 0,
-    top: 0,
-    bottom: 0,
-    right: 0,
-  });
   const draggleRef = useRef<HTMLDivElement>(null);
 
-  const onStart = (_event: DraggableEvent, uiData: DraggableData) => {
-    const { clientWidth, clientHeight } = window.document.documentElement;
-    const targetRect = draggleRef.current?.getBoundingClientRect();
-    if (!targetRect) {
-      return;
-    }
-    setBounds({
-      left: -targetRect.left + uiData.x,
-      right: clientWidth - (targetRect.right - uiData.x),
-      top: -targetRect.top + uiData.y,
-      bottom: clientHeight - (targetRect.bottom - uiData.y),
-    });
-  };
   const onMouseOver = () => {
     if (draggable) {
       setDraggable(false);
@@ -65,7 +44,6 @@ const CheckCardModal = () => {
   const onMouseOut = () => {
     setDraggable(true);
   };
-
   // TODO: 这里可以考虑更好地封装
   const sendResponseHandler = (
     handlerName: string | undefined,
@@ -86,11 +64,12 @@ const CheckCardModal = () => {
   };
 
   return (
-    <Modal
-      title={`请选择${min}到${max}张卡片`}
-      open={isOpen}
-      closable={false}
-      footer={
+    <DragModal
+      modalProps={{
+        title: `请选择${min}到${max}张卡片`,
+        open: isOpen,
+        closable: false,
+        footer: (
           <>
             <Button
               disabled={response.length < min || response.length > max}
@@ -126,13 +105,11 @@ const CheckCardModal = () => {
               <></>
             )}
           </>
-      }
-      modalRender={(modal) => (
-        <Draggable disabled={!draggable} bounds={bounds} onStart={onStart}>
-          <div ref={draggleRef}>{modal}</div>
-        </Draggable>
-      )}
-      width={800}
+        ),
+        width: 800,
+      }}
+      dragRef={draggleRef}
+      draggable={draggable}
     >
       <CheckCard.Group
         multiple
@@ -181,7 +158,7 @@ const CheckCardModal = () => {
           );
         })}
       </CheckCard.Group>
-    </Modal>
+    </DragModal>
   );
 };
 

src/ui/Duel/checkCardModalV2.tsx

-import React from "react";
+import React, { useRef, useState } from "react";
 import { useAppSelector } from "../../hook";
 import { store } from "../../store";
-import { Modal, Button, Card, Row, Col } from "antd";
+import { Button, Card, Row, Col } from "antd";
 import { CheckCard } from "@ant-design/pro-components";
 import {
   selectCheckCardModalV2CancelAble,
@@ -19,6 +19,7 @@ import {
   setCheckCardModalV2ResponseAble,
 } from "../../reducers/duel/mod";
 import NeosConfig from "../../../neos.config.json";
+import DragModal from "./dragModal";
 
 const CheckCardModalV2 = () => {
   const dispatch = store.dispatch;
@@ -31,35 +32,59 @@ const CheckCardModalV2 = () => {
   );
   const selectedOptions = useAppSelector(selectCheckCardModalV2SelectedOptions);
   const responseable = useAppSelector(selectCheckCardModalV2ResponseAble);
+  // Draggable 相关
+  const [draggable, setDraggable] = useState(false);
+  const draggleRef = useRef<HTMLDivElement>(null);
 
+  const onMouseOver = () => {
+    if (draggable) {
+      setDraggable(false);
+    }
+  };
+  const onMouseOut = () => {
+    setDraggable(true);
+  };
   const onFinish = () => {
     sendSelectUnselectCardResponse({ cancel_or_finish: true });
     dispatch(setCheckCardModalV2IsOpen(false));
     dispatch(resetCheckCardModalV2());
     dispatch(setCheckCardModalV2ResponseAble(false));
   };
-
   const onCancel = () => {
     sendSelectUnselectCardResponse({ cancel_or_finish: true });
     dispatch(setCheckCardModalV2ResponseAble(false));
   };
 
   return (
-    <Modal
-      title={`请选择未选择的卡片，最少${min}张，最多${max}张`}
-      open={isOpen}
-      closable={false}
-      footer={
+    <DragModal
+      modalProps={{
+        title: `请选择未选择的卡片，最少${min}张，最多${max}张`,
+        open: isOpen,
+        closable: false,
+        footer: (
           <>
-          <Button disabled={!finishable || !responseable} onClick={onFinish}>
+            <Button
+              disabled={!finishable || !responseable}
+              onClick={onFinish}
+              onMouseOver={onMouseOver}
+              onMouseOut={onMouseOut}
+            >
               finish
             </Button>
-          <Button disabled={!cancelable || !responseable} onClick={onCancel}>
+            <Button
+              disabled={!cancelable || !responseable}
+              onClick={onCancel}
+              onMouseOver={onMouseOver}
+              onMouseOut={onMouseOut}
+            >
               cancel
             </Button>
           </>
-      }
-      width={800}
+        ),
+        width: 800,
+      }}
+      dragRef={draggleRef}
+      draggable={draggable}
     >
       <CheckCard.Group
         bordered
@@ -89,6 +114,8 @@ const CheckCardModalV2 = () => {
                     />
                   }
                   value={option.response}
+                  onMouseEnter={onMouseOver}
+                  onMouseLeave={onMouseOut}
                 />
               </Col>
             );
@@ -114,7 +141,7 @@ const CheckCardModalV2 = () => {
           );
         })}
       </Row>
-    </Modal>
+    </DragModal>
   );
 };
 

src/ui/Duel/checkCardModalV3.tsx

-import React, { useState } from "react";
+import React, { useRef, useState } from "react";
 import { useAppSelector } from "../../hook";
 import { store } from "../../store";
-import { Modal, Button, Card, Row, Col } from "antd";
+import { Button, Card, Row, Col } from "antd";
 import { CheckCard } from "@ant-design/pro-components";
 import { sendSelectCardResponse } from "../../api/ocgcore/ocgHelper";
 import {
@@ -11,6 +11,7 @@ import {
 } from "../../reducers/duel/mod";
 import NeosConfig from "../../../neos.config.json";
 import { selectCheckCardModalV3 } from "../../reducers/duel/modal/checkCardModalV3Slice";
+import DragModal from "./dragModal";
 
 const CheckCardModalV3 = () => {
   const dispatch = store.dispatch;
@@ -31,14 +32,24 @@ const CheckCardModalV3 = () => {
     .concat(selectedOptions)
     .map((option) => option.level2)
     .reduce((sum, current) => sum + current, 0);
+  // Draggable 相关
+  const [draggable, setDraggable] = useState(false);
+  const draggleRef = useRef<HTMLDivElement>(null);
 
+  const onMouseOver = () => {
+    if (draggable) {
+      setDraggable(false);
+    }
+  };
+  const onMouseOut = () => {
+    setDraggable(true);
+  };
   const responseable =
     (overflow
       ? Level1Sum >= LevelSum || Level2Sum >= LevelSum
       : Level1Sum == LevelSum || Level2Sum == LevelSum) &&
     selectedOptions.length <= max &&
     selectedOptions.length >= min;
-
   const onFinish = () => {
     sendSelectCardResponse(
       mustSelectOptions.concat(selectedOptions).map((option) => option.response)
@@ -49,18 +60,27 @@ const CheckCardModalV3 = () => {
   };
 
   return (
-    <Modal
-      title={`请选择卡片，最少${min}张，最多${max}张`}
-      open={isOpen}
-      closable={false}
-      footer={
+    <DragModal
+      modalProps={{
+        title: `请选择卡片，最少${min}张，最多${max}张`,
+        open: isOpen,
+        closable: false,
+        footer: (
           <>
-          <Button disabled={!responseable} onClick={onFinish}>
+            <Button
+              disabled={!responseable}
+              onClick={onFinish}
+              onMouseOver={onMouseOver}
+              onMouseOut={onMouseOut}
+            >
               finish
             </Button>
           </>
-      }
-      width={800}
+        ),
+        width: 800,
+      }}
+      dragRef={draggleRef}
+      draggable={draggable}
     >
       <CheckCard.Group
         bordered
@@ -87,6 +107,8 @@ const CheckCardModalV3 = () => {
                     />
                   }
                   value={option}
+                  onMouseEnter={onMouseOver}
+                  onMouseLeave={onMouseOut}
                 />
               </Col>
             );
@@ -112,7 +134,7 @@ const CheckCardModalV3 = () => {
           );
         })}
       </Row>
-    </Modal>
+    </DragModal>
   );
 };
 

src/ui/Duel/dragModal.tsx

+// 经过封装的可拖拽`Modal`
+import React, { useState } from "react";
+import type { DraggableData, DraggableEvent } from "react-draggable";
+import Draggable from "react-draggable";
+import { Modal, ModalProps } from "antd";
+
+export interface DragModalProps {
+  modalProps: ModalProps;
+  dragRef: React.RefObject<HTMLDivElement>;
+  draggable: boolean;
+  children?: React.ReactNode;
+}
+
+const DragModal = (props: DragModalProps) => {
+  const [bounds, setBounds] = useState({
+    left: 0,
+    top: 0,
+    bottom: 0,
+    right: 0,
+  });
+  const onStart = (_event: DraggableEvent, uiData: DraggableData) => {
+    const { clientWidth, clientHeight } = window.document.documentElement;
+    const targetRect = props.dragRef.current?.getBoundingClientRect();
+    if (!targetRect) {
+      return;
+    }
+    setBounds({
+      left: -targetRect.left + uiData.x,
+      right: clientWidth - (targetRect.right - uiData.x),
+      top: -targetRect.top + uiData.y,
+      bottom: clientHeight - (targetRect.bottom - uiData.y),
+    });
+  };
+
+  return (
+    <Modal
+      {...props.modalProps}
+      modalRender={(modal) => (
+        <Draggable
+          disabled={!props.draggable}
+          bounds={bounds}
+          onStart={onStart}
+        >
+          <div ref={props.dragRef}>{modal}</div>
+        </Draggable>
+      )}
+    >
+      {props.children}
+    </Modal>
+  );
+};
+
+export default DragModal;

src/ui/Duel/optionModal.tsx

-import React, { useState } from "react";
+import React, { useRef, useState } from "react";
 import { useAppSelector } from "../../hook";
 import { store } from "../../store";
-import { Modal, Button } from "antd";
+import { Button } from "antd";
 import { CheckCard } from "@ant-design/pro-components";
 import {
   selectOptionModalIsOpen,
@@ -12,19 +12,22 @@ import {
   resetOptionModal,
   setOptionModalIsOpen,
 } from "../../reducers/duel/mod";
+import DragModal from "./dragModal";
 
 const OptionModal = () => {
   const dispatch = store.dispatch;
   const isOpen = useAppSelector(selectOptionModalIsOpen);
   const options = useAppSelector(selectOptionModalOptions);
   const [selected, setSelected] = useState<number | undefined>(undefined);
+  const draggleRef = useRef<HTMLDivElement>(null);
 
   return (
-    <Modal
-      title="请选择需要发动的效果"
-      open={isOpen}
-      closable={false}
-      footer={
+    <DragModal
+      modalProps={{
+        title: "请选择需要发动的效果",
+        open: isOpen,
+        closable: false,
+        footer: (
           <Button
             disabled={selected === undefined}
             onClick={() => {
@@ -37,7 +40,10 @@ const OptionModal = () => {
           >
             submit
           </Button>
-      }
+        ),
+      }}
+      dragRef={draggleRef}
+      draggable={true}
     >
       <CheckCard.Group
         bordered
@@ -51,7 +57,7 @@ const OptionModal = () => {
           <CheckCard key={idx} title={option.msg} value={option.response} />
         ))}
       </CheckCard.Group>
-    </Modal>
+    </DragModal>
   );
 };
 

src/ui/Duel/positionModal.tsx

-import React, { useState } from "react";
+import React, { useRef, useState } from "react";
 import { useAppSelector } from "../../hook";
 import { store } from "../../store";
-import { Modal, Button } from "antd";
+import { Button } from "antd";
 import { sendSelectPositionResponse } from "../../api/ocgcore/ocgHelper";
 import {
   selectPositionModalIsOpen,
@@ -13,6 +13,7 @@ import {
   setPositionModalIsOpen,
 } from "../../reducers/duel/mod";
 import { CheckCard } from "@ant-design/pro-components";
+import DragModal from "./dragModal";
 
 const PositionModal = () => {
   const dispatch = store.dispatch;
@@ -21,13 +22,15 @@ const PositionModal = () => {
   const [selected, setSelected] = useState<ygopro.CardPosition | undefined>(
     undefined
   );
+  const draggleRef = useRef<HTMLDivElement>(null);
 
   return (
-    <Modal
-      title="请选择表示形式"
-      open={isOpen}
-      closable={false}
-      footer={
+    <DragModal
+      modalProps={{
+        title: "请选择表示形式",
+        open: isOpen,
+        closable: false,
+        footer: (
           <Button
             disabled={selected === undefined}
             onClick={() => {
@@ -40,7 +43,10 @@ const PositionModal = () => {
           >
             submit
           </Button>
-      }
+        ),
+      }}
+      dragRef={draggleRef}
+      draggable={true}
     >
       <CheckCard.Group
         bordered
@@ -58,7 +64,7 @@ const PositionModal = () => {
           />
         ))}
       </CheckCard.Group>
-    </Modal>
+    </DragModal>
   );
 };
 

src/ui/Duel/yesNoModal.tsx

-import React from "react";
+import React, { useRef } from "react";
 import { useAppSelector } from "../../hook";
 import { store } from "../../store";
-import { Modal, Button } from "antd";
+import { Button } from "antd";
 import { sendSelectEffectYnResponse } from "../../api/ocgcore/ocgHelper";
 import {
   selectYesNoModalIsOpen,
   selectYesNOModalMsg,
 } from "../../reducers/duel/modal/mod";
 import { setYesNoModalIsOpen } from "../../reducers/duel/mod";
+import DragModal from "./dragModal";
 
 const YesNoModal = () => {
   const dispatch = store.dispatch;
   const isOpen = useAppSelector(selectYesNoModalIsOpen);
   const msg = useAppSelector(selectYesNOModalMsg);
+  // Draggable 相关
+  const draggleRef = useRef<HTMLDivElement>(null);
 
   return (
-    <Modal
-      title={msg}
-      open={isOpen}
-      closable={false}
-      footer={
+    <DragModal
+      modalProps={{
+        title: msg,
+        open: isOpen,
+        closable: false,
+        footer: (
           <>
             <Button
               onClick={() => {
@@ -38,7 +42,10 @@ const YesNoModal = () => {
               No
             </Button>
           </>
-      }
+        ),
+      }}
+      dragRef={draggleRef}
+      draggable={true}
     />
   );
 };