add ball

package.json

@@ -68,6 +68,7 @@
     "react-dnd-html5-backend": "^11.1.3",
     "react-dom": "^16.12.0",
     "react-draggable": "^4.4.3",
+    "react-draggable-ball": "^0.1.0",
     "react-grid-layout": "^1.0.0",
     "react-hotkeys-hook": "^2.3.1",
     "react-text-loop": "^2.3.0",
@@ -81,12 +82,12 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@types/qrcode.react": "^1.0.1",
     "@types/classnames": "^2.2.10",
     "@types/codemirror": "^0.0.98",
     "@types/events": "^3.0.0",
     "@types/file-saver": "^2.0.1",
     "@types/node": "^14.6.2",
+    "@types/qrcode.react": "^1.0.1",
     "@types/react-color": "^3.0.4",
     "@types/react-grid-layout": "^1.1.0",
     "@types/redux-logger": "^3.0.8",

src/pages/editor/Container.tsx

@@ -21,6 +21,7 @@ import schema from 'components/BasicShop/schema';
 import { ActionCreators } from 'redux-undo';
 import { StateWithHistory } from 'redux-undo';
 import styles from './index.less';
+import { useGetBall } from 'react-draggable-ball';
 
 const { TabPane } = Tabs;
 
@@ -28,7 +29,6 @@ const Container = (props: { history?: any; location?: any; pstate?: any; dispatc
   const [scaleNum, setScale] = useState(1);
 
   const { pstate, dispatch } = props;
-  console.log(props);
   const pointData = pstate ? pstate.pointData : {};
   const curPoint = pstate ? pstate.curPoint : {};
   // 指定画布的id
@@ -107,6 +107,12 @@ const Container = (props: { history?: any; location?: any; pstate?: any; dispatc
     return arr;
   }, []);
 
+  const [dragstate, setDragState] = useState({ x: 0, y: 0 });
+  const [render] = useGetBall(setDragState, {
+    innerStyle: { top: '10px', left: '10px', cursor: 'pointer' },
+    ratioSpeed: { x: 1.2, y: 1.2 },
+  });
+
   return (
     <div className={styles.editorWrap}>
       <HeaderComponent
@@ -180,7 +186,14 @@ const Container = (props: { history?: any; location?: any; pstate?: any; dispatc
           <div className={styles.tickMarkLeft}>
             <Calibration direction="right" id="calibrationRight" multiple={scaleNum} />
           </div>
-          <SourceBox scaleNum={scaleNum} canvasId={canvasId} allType={allType} />
+          <SourceBox
+            dragState={dragstate}
+            setDragState={setDragState}
+            scaleNum={scaleNum}
+            canvasId={canvasId}
+            allType={allType}
+          />
+          <div className={styles.controllBall}>{render}</div>
           <div className={styles.sliderWrap}>
             <span className={styles.sliderBtn} onClick={handleSlider.bind(this, 1)}>
               +

src/pages/editor/SourceBox.tsx

@@ -1,6 +1,6 @@
 import React, { memo, useEffect, useState } from 'react';
 import { useDrop } from 'react-dnd';
-import Draggable from 'react-draggable';
+import Draggable, { DraggableData, DraggableEvent } from 'react-draggable';
 import GridLayout, { ItemCallback } from 'react-grid-layout';
 import { Tooltip } from 'antd';
 import { connect } from 'dva';
@@ -9,17 +9,23 @@ import styles from './index.less';
 import { uuid } from '@/utils/tool';
 import { Dispatch } from 'umi';
 import { StateWithHistory } from 'redux-undo';
-
 interface SourceBoxProps {
   pstate: { pointData: { id: string; item: any; point: any }[] };
   scaleNum: number;
   canvasId: string;
   allType: string[];
   dispatch: Dispatch;
+  dragState: { x: number; y: number };
+  setDragState: React.Dispatch<
+    React.SetStateAction<{
+      x: number;
+      y: number;
+    }>
+  >;
 }
 
 const SourceBox = memo((props: SourceBoxProps) => {
-  const { pstate, scaleNum, canvasId, allType, dispatch } = props;
+  const { pstate, scaleNum, canvasId, allType, dispatch, dragState, setDragState } = props;
 
   const pointData = pstate ? pstate.pointData : [];
   const [canvasRect, setCanvasRect] = useState<number[]>([]);
@@ -92,8 +98,14 @@ const SourceBox = memo((props: SourceBoxProps) => {
   }, []);
   const opacity = isOver ? 0.7 : 1;
   // const backgroundColor = isOver ? 1 : 0.7;
+
   return (
-    <Draggable handle=".js_box">
+    <Draggable
+      position={dragState}
+      onStop={(e: DraggableEvent, data: DraggableData) => {
+        setDragState({ x: data.x, y: data.y });
+      }}
+    >
       <div className={styles.canvasBox}>
         <div
           style={{

src/pages/editor/index.less

@@ -92,10 +92,15 @@
           }
         }
       }
+      .controllBall {
+        position: absolute;
+        bottom: 380px;
+        right: 5px;
+      }
       .sliderWrap {
         position: absolute;
         width: 30px;
-        right: 10px;
+        right: 16px;
         bottom: 130px;
         .slider {
           height: 120px;
@@ -114,7 +119,7 @@
       }
       .backSize {
         position: absolute;
-        right: 18px;
+        right: 24px;
         bottom: 95px;
         cursor: pointer;
       }

yarn.lock

@@ -11789,6 +11789,13 @@ react-dom@^16.12.0, react-dom@^16.13.1:
     prop-types "^15.6.2"
     scheduler "^0.19.1"
 
+react-draggable-ball@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/react-draggable-ball/-/react-draggable-ball-0.1.0.tgz#c23dc28a4f3daa1fb47f7461c70a2bd8533954ef"
+  integrity sha512-ihcyqS30QJKbXP4mb9wYWDV96yF9sq6ZDo+6ntcVFpVhD64BLe6AHwQFMyt9By+pMtuutrsxzhs5fs+XsZ7U9A==
+  dependencies:
+    react-draggable "^4.4.3"
+
 react-draggable@^4.0.0, react-draggable@^4.0.3, react-draggable@^4.4.3:
   version "4.4.3"
   resolved "https://registry.yarnpkg.com/react-draggable/-/react-draggable-4.4.3.tgz#0727f2cae5813e36b0e4962bf11b2f9ef2b406f3"