Merge branch 'feat/draggable' into 'main'

Feat/draggable

See merge request mycard/Neos!156

package-lock.json

@@ -28,6 +28,7 @@
         "react": "^18.2.0",
         "react-babylonjs": "^3.1.15",
         "react-dom": "^18.2.0",
+        "react-draggable": "^4.4.5",
         "react-redux": "^8.0.4",
         "react-router-dom": "^6.4.0",
         "react-scripts": "^2.1.3",
@@ -6183,6 +6184,14 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/clsx": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz",
+      "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/co": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
@@ -20450,6 +20459,19 @@
         "react": "^18.2.0"
       }
     },
+    "node_modules/react-draggable": {
+      "version": "4.4.5",
+      "resolved": "https://registry.npmjs.org/react-draggable/-/react-draggable-4.4.5.tgz",
+      "integrity": "sha512-OMHzJdyJbYTZo4uQE393fHcqqPYsEtkjfMgvCHr6rejT+Ezn4OZbNyGH50vv+SunC1RMvwOTSWkEODQLzw1M9g==",
+      "dependencies": {
+        "clsx": "^1.1.1",
+        "prop-types": "^15.8.1"
+      },
+      "peerDependencies": {
+        "react": ">= 16.3.0",
+        "react-dom": ">= 16.3.0"
+      }
+    },
     "node_modules/react-error-overlay": {
       "version": "5.1.6",
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-5.1.6.tgz",
@@ -31811,6 +31833,11 @@
         "shallow-clone": "^0.1.2"
       }
     },
+    "clsx": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz",
+      "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg=="
+    },
     "co": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
@@ -42815,6 +42842,15 @@
         "scheduler": "^0.23.0"
       }
     },
+    "react-draggable": {
+      "version": "4.4.5",
+      "resolved": "https://registry.npmjs.org/react-draggable/-/react-draggable-4.4.5.tgz",
+      "integrity": "sha512-OMHzJdyJbYTZo4uQE393fHcqqPYsEtkjfMgvCHr6rejT+Ezn4OZbNyGH50vv+SunC1RMvwOTSWkEODQLzw1M9g==",
+      "requires": {
+        "clsx": "^1.1.1",
+        "prop-types": "^15.8.1"
+      }
+    },
     "react-error-overlay": {
       "version": "5.1.6",
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-5.1.6.tgz",

package.json

@@ -23,6 +23,7 @@
     "react": "^18.2.0",
     "react-babylonjs": "^3.1.15",
     "react-dom": "^18.2.0",
+    "react-draggable": "^4.4.5",
     "react-redux": "^8.0.4",
     "react-router-dom": "^6.4.0",
     "react-scripts": "^2.1.3",

src/ui/Duel/checkCardModal.tsx

-import React, { useState } from "react";
+import React, { useRef, useState } from "react";
 import { useAppSelector } from "../../hook";
 import { store } from "../../store";
 import {
@@ -19,6 +19,8 @@ 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";
 
 const CheckCardModal = () => {
@@ -32,6 +34,38 @@ const CheckCardModal = () => {
   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);
+    }
+  };
+  const onMouseOut = () => {
+    setDraggable(true);
+  };
+
   // TODO: 这里可以考虑更好地封装
   const sendResponseHandler = (
     handlerName: string | undefined,
@@ -65,6 +99,10 @@ const CheckCardModal = () => {
               dispatch(setCheckCardModalIsOpen(false));
               dispatch(resetCheckCardModal());
             }}
+            onMouseOver={onMouseOver}
+            onMouseOut={onMouseOut}
+            onFocus={() => {}}
+            onBlur={() => {}}
           >
             submit
           </Button>
@@ -77,6 +115,10 @@ const CheckCardModal = () => {
                 dispatch(setCheckCardModalIsOpen(false));
                 dispatch(resetCheckCardModal());
               }}
+              onMouseOver={onMouseOver}
+              onMouseOut={onMouseOut}
+              onFocus={() => {}}
+              onBlur={() => {}}
             >
               cancel
             </Button>
@@ -85,6 +127,11 @@ const CheckCardModal = () => {
           )}
         </>
       }
+      modalRender={(modal) => (
+        <Draggable disabled={!draggable} bounds={bounds} onStart={onStart}>
+          <div ref={draggleRef}>{modal}</div>
+        </Draggable>
+      )}
       width={800}
     >
       <CheckCard.Group
@@ -122,6 +169,8 @@ const CheckCardModal = () => {
                             style={{ width: 100 }}
                           />
                         }
+                        onMouseEnter={onMouseOver}
+                        onMouseLeave={onMouseOut}
                         value={option.response}
                       />
                     </Popover>