🔨 重构画布缩放复位控件, 拆成单独组件以减小主文件代码,提高维护性,后期维护建议单文件行数不能超过300行

src/pages/editor/Container.tsx

@@ -11,6 +11,7 @@ import {
 } from '@ant-design/icons';
 import { connect } from 'dva';
 import HeaderComponent from './components/Header';
+import CanvasControl from './components/CanvasControl';
 import SourceBox from './SourceBox';
 import TargetBox from './TargetBox';
 import Calibration from 'components/Calibration';
@@ -184,6 +185,7 @@ const Container = (props: {
       dispatch(ActionCreators.redo());
     };
   }, [dispatch]);
+
   const undohandler = useMemo(() => {
     return () => {
       dispatch(ActionCreators.undo());
@@ -381,6 +383,11 @@ const Container = (props: {
       }
     };
   }, []);
+
+  const updateDrag = useCallback(() => {
+    setDragState({ x: 0, y: 0 });
+  }, []);
+
   const mousemovefn = useMemo(() => {
     return (e: React.MouseEvent<HTMLDivElement>) => {
       if (diffmove.move) {
@@ -509,40 +516,12 @@ const Container = (props: {
             allType={allType}
           />
           {/* TODO 暂时隐藏 */}
-          {/* <div className={styles.resetBall}>
+          <CanvasControl
-            <ReloadOutlined onClick={() => setDragState({ x: 0, y: 0 })} />
+            scaleNum={scaleNum}
-          </div> */}
+            handleSlider={handleSlider}
-          {/*<div className={styles.controllBall}>{render}</div> */}
+            backSize={backSize}
-          <div className={styles.sliderWrap}>
+            updateDrag={updateDrag}
-            <span
+          />
-              className={styles.sliderBtn}
-              onClick={handleSlider.bind(this, 1)}
-              style={
-                scaleNum === 1
-                  ? { pointerEvents: 'none' }
-                  : { display: 'initial', marginLeft: '13px' }
-              }
-            >
-              +
-            </span>
-            <span>{scaleNum * 100}%</span>
-            <span
-              className={styles.sliderBtn}
-              style={scaleNum === 0.1 ? { pointerEvents: 'none' } : { display: 'initial' }}
-              onClick={handleSlider.bind(this, 0)}
-            >
-              -
-            </span>
-            <span className={styles.backSize}>
-              <ExpandOutlined onClick={backSize} />
-            </span>
-            <span className={styles.backSize}>
-              <ReloadOutlined onClick={() => setDragState({ x: 0, y: 0 })} />
-            </span>
-          </div>
-          {/* <div className={styles.backSize}>
-            <ExpandOutlined onClick={backSize} />
-          </div> */}
         </div>
         {renderRight}
         <div

src/pages/editor/components/CanvasControl/index.less

@@ -0,0 +1,37 @@
+.sliderWrap {
+  position: absolute;
+  display: inline-block;
+  right: 10px;
+  bottom: 10px;
+  height: 32px;
+  line-height: 30px;
+  background: #ffffff;
+  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.1);
+  border-radius: 4px;
+  color: #4a4a4a;
+  .slider {
+    position: absolute;
+    right: 30px;
+    bottom: 95px;
+    font-size: 14px;
+  }
+  .sliderBtn {
+    cursor: pointer;
+    user-select: none;
+    display: inline;
+    font-size: 14px;
+    color: #4a4a4a;
+  }
+  span {
+    margin: 0 8px;
+  }
+  .backSize {
+    cursor: pointer;
+    color: #4a4a4a;
+    &::before {
+      content: '|';
+      color: #dbdbdb;
+      margin-right: 7px;
+    }
+  }
+}

src/pages/editor/components/CanvasControl/index.tsx

@@ -0,0 +1,43 @@
+import React, { MouseEvent } from 'react';
+import { ExpandOutlined, ReloadOutlined } from '@ant-design/icons';
+import styles from './index.less';
+
+interface CanvasControlProps {
+  scaleNum: number;
+  handleSlider: Function;
+  backSize(event: MouseEvent<HTMLDivElement>): void;
+  updateDrag(event: MouseEvent<HTMLDivElement>): void;
+}
+
+const CanvasControl = (props: CanvasControlProps) => {
+  const { scaleNum, handleSlider, backSize, updateDrag } = props;
+  return (
+    <div className={styles.sliderWrap}>
+      <span
+        className={styles.sliderBtn}
+        onClick={handleSlider.bind(this, 1)}
+        style={
+          scaleNum === 1 ? { pointerEvents: 'none' } : { display: 'initial', marginLeft: '13px' }
+        }
+      >
+        +
+      </span>
+      <span>{scaleNum * 100}%</span>
+      <span
+        className={styles.sliderBtn}
+        style={scaleNum === 0.1 ? { pointerEvents: 'none' } : { display: 'initial' }}
+        onClick={handleSlider.bind(this, 0)}
+      >
+        -
+      </span>
+      <span className={styles.backSize}>
+        <ExpandOutlined onClick={backSize} />
+      </span>
+      <span className={styles.backSize}>
+        <ReloadOutlined onClick={updateDrag} />
+      </span>
+    </div>
+  );
+};
+
+export default CanvasControl;

src/pages/editor/index.less

@@ -192,43 +192,6 @@
         bottom: 380px;
         right: 5px;
       }
-      .sliderWrap {
-        position: absolute;
-        display: inline-block;
-        right: 10px;
-        bottom: 10px;
-        height: 32px;
-        line-height: 30px;
-        background: #ffffff;
-        box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.1);
-        border-radius: 4px;
-        color: #4a4a4a;
-        .slider {
-          position: absolute;
-          right: 30px;
-          bottom: 95px;
-          font-size: 14px;
-        }
-        .sliderBtn {
-          cursor: pointer;
-          user-select: none;
-          display: inline;
-          font-size: 14px;
-          color: #4a4a4a;
-        }
-        span {
-          margin: 0 8px;
-        }
-        .backSize {
-          cursor: pointer;
-          color: #4a4a4a;
-          &::before {
-            content: '|';
-            color: #dbdbdb;
-            margin-right: 7px;
-          }
-        }
-      }
     }
     .attrSetting {
       width: 304px;