refactor：file name reverse

src/pages/editor/Container.tsx

@@ -10,8 +10,8 @@ import {
 import { connect } from 'dva';
 import HeaderComponent from './components/Header';
 import CanvasControl from './components/CanvasControl';
-import SourceBox from './SourceBox';
+import SourceBox from './TargetBox';
-import TargetBox from './TargetBox';
+import TargetBox from './SourceBox';
 import Calibration from 'components/Calibration';
 import DynamicEngine, { componentsType } from '@/core/DynamicEngine';
 import { FormRender } from '@/core';

src/pages/editor/SourceBox.tsx

@@ -1,216 +1,70 @@
-import React, { memo, useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useMemo, memo, ReactNode, useContext, CSSProperties } from 'react';
-import { useDrop } from 'react-dnd';
+import { useDrag } from 'react-dnd';
-import Draggable, { DraggableData, DraggableEvent } from 'react-draggable';
+import schema from '@/materials/schema';
-import { ItemCallback } from 'react-grid-layout';
-import { connect } from 'dva';
-import { ViewRender } from '@/core';
 import styles from './index.less';
-import { uuid } from '@/utils/tool';
+
-import { Dispatch } from 'umi';
+interface TargetBoxProps {
-import { StateWithHistory } from 'redux-undo';
+  item: any;
-import { Menu, Item, MenuProvider } from 'react-contexify';
+  children: ReactNode;
-import 'react-contexify/dist/ReactContexify.min.css';
-interface SourceBoxProps {
-  pstate: { pointData: { id: string; item: any; point: any; isMenu?: any }[]; curPoint: any };
-  cstate: { pointData: { id: string; item: any; point: any }[]; curPoint: 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 SourceBox = memo((props: TargetBoxProps) => {
-  const { pstate, scaleNum, canvasId, allType, dispatch, dragState, setDragState, cstate } = props;
+  const { item } = props;
 
-  let pointData = pstate ? pstate.pointData : [];
+  const [{ isDragging }, drag] = useDrag({
-  const cpointData = cstate ? cstate.pointData : [];
+    item: {
-
+      type: item.type,
-  const [canvasRect, setCanvasRect] = useState<number[]>([]);
+      config: schema[item.type as keyof typeof schema].config,
-  const [isShowTip, setIsShowTip] = useState(true);
+      h: item.h,
-  const [{ isOver }, drop] = useDrop({
+      editableEl: schema[item.type as keyof typeof schema].editData,
-    accept: allType,
+      category: item.category,
-    drop: (item: { h: number; type: string; x: number }, monitor) => {
+      x: item.x || 0,
-      let parentDiv = document.getElementById(canvasId),
-        pointRect = parentDiv!.getBoundingClientRect(),
-        top = pointRect.top,
-        pointEnd = monitor.getSourceClientOffset(),
-        y = pointEnd!.y < top ? 0 : pointEnd!.y - top,
-        col = 24, // 网格列数
-        cellHeight = 2,
-        w = item.type === 'Icon' ? 3 : col;
-      // 转换成网格规则的坐标和大小
-      let gridY = Math.ceil(y / cellHeight);
-      dispatch({
-        type: 'editorModal/addPointData',
-        payload: {
-          id: uuid(6, 10),
-          item,
-          point: { i: `x-${pointData.length}`, x: 0, y: gridY, w, h: item.h, isBounded: true },
-          status: 'inToCanvas',
-        },
-      });
     },
     collect: monitor => ({
-      isOver: monitor.isOver(),
+      isDragging: monitor.isDragging(),
-      canDrop: monitor.canDrop(),
-      item: monitor.getItem(),
     }),
   });
 
-  const dragStop: ItemCallback = useMemo(() => {
+  const containerStyle: CSSProperties = useMemo(
-    return (layout, oldItem, newItem, placeholder, e, element) => {
+    () => ({
-      const curPointData = pointData.filter(item => item.id === newItem.i)[0];
+      opacity: isDragging ? 0.4 : 1,
-      dispatch({
+      cursor: 'move',
-        type: 'editorModal/modPointData',
+      height: '140px',
-        payload: { ...curPointData, point: newItem, status: 'inToCanvas' },
+    }),
-      });
+    [isDragging],
-    };
-  }, [cpointData, dispatch, pointData]);
-
-  const onDragStart: ItemCallback = useMemo(() => {
-    return (layout, oldItem, newItem, placeholder, e, element) => {
-      const curPointData = pointData.filter(item => item.id === newItem.i)[0];
-      dispatch({
-        type: 'editorModal/modPointData',
-        payload: { ...curPointData, status: 'inToCanvas' },
-      });
-    };
-  }, [dispatch, pointData]);
-
-  const onResizeStop: ItemCallback = useMemo(() => {
-    return (layout, oldItem, newItem, placeholder, e, element) => {
-      const curPointData = pointData.filter(item => item.id === newItem.i)[0];
-      dispatch({
-        type: 'editorModal/modPointData',
-        payload: { ...curPointData, point: newItem, status: 'inToCanvas' },
-      });
-    };
-  }, [dispatch, pointData]);
-
-  const handleContextMenuDel = () => {
-    if (pstate.curPoint) {
-      dispatch({
-        type: 'editorModal/delPointData',
-        payload: { id: pstate.curPoint.id },
-      });
-    }
-  };
-
-  const handleContextMenuCopy = () => {
-    if (pstate.curPoint) {
-      dispatch({
-        type: 'editorModal/copyPointData',
-        payload: { id: pstate.curPoint.id },
-      });
-    }
-  };
-
-  const onConTextClick = (type: string) => {
-    if (type === 'del') {
-      handleContextMenuDel();
-    } else if (type === 'copy') {
-      handleContextMenuCopy();
-    }
-  };
-
-  const MyAwesomeMenu = useCallback(
-    () => (
-      <Menu id="menu_id">
-        <Item onClick={() => onConTextClick('copy')}>复制</Item>
-        <Item onClick={() => onConTextClick('del')}>删除</Item>
-      </Menu>
-    ),
-    [onConTextClick],
   );
-
-  useEffect(() => {
-    let { width, height } = document.getElementById(canvasId)!.getBoundingClientRect();
-    setCanvasRect([width, height]);
-  }, [canvasId]);
-
-  useEffect(() => {
-    let timer = window.setTimeout(() => {
-      setIsShowTip(false);
-    }, 3000);
-    return () => {
-      window.clearTimeout(timer);
-    };
-  }, []);
-  const opacity = isOver ? 0.7 : 1;
-
-  const render = useMemo(() => {
-    return (
-      <Draggable
-        position={dragState}
-        handle=".js_box"
-        onStop={(e: DraggableEvent, data: DraggableData) => {
-          setDragState({ x: data.x, y: data.y });
-        }}
-      >
-        <div className={styles.canvasBox}>
-          <MenuProvider id="menu_id">
-            <div
-              style={{
-                transform: `scale(${scaleNum})`,
-                position: 'relative',
-                width: '100%',
-                height: '100%',
-              }}
-            >
-              <div
-                id={canvasId}
-                className={styles.canvas}
-                style={{
-                  opacity,
-                }}
-                ref={drop}
-              >
-                {pointData.length > 0 ? (
-                  <ViewRender
-                    pointData={pointData}
-                    width={canvasRect[0] || 0}
-                    dragStop={dragStop}
-                    onDragStart={onDragStart}
-                    onResizeStop={onResizeStop}
-                  />
-                ) : null}
-              </div>
-            </div>
-          </MenuProvider>
-        </div>
-      </Draggable>
-    );
-  }, [
-    canvasId,
-    canvasRect,
-    dragState,
-    dragStop,
-    drop,
-    isShowTip,
-    onDragStart,
-    onResizeStop,
-    opacity,
-    pointData,
-    scaleNum,
-    setDragState,
-  ]);
-
   return (
     <>
-      {render}
+      <div className={styles.listWrap}>
-      <MyAwesomeMenu />
+        <div className={styles.module} style={{ ...containerStyle }} ref={drag}>
+          <div
+            style={{
+              height: '110px',
+              display: 'flex',
+              justifyContent: 'center',
+              alignItems: 'center',
+              flexDirection: 'column',
+              overflow: 'hidden',
+            }}
+          >
+            {props.children}
+          </div>
+          <div
+            style={{
+              height: '30px',
+              lineHeight: '30px',
+              textAlign: 'center',
+              backgroundColor: 'rgba(245, 245, 245, 1)',
+              color: 'rgba(118, 118, 118, 1)',
+            }}
+          >
+            {props.item.displayName}
+          </div>
+        </div>
+      </div>
     </>
   );
 });
 
-export default connect((state: StateWithHistory<any>) => ({
+export default SourceBox;
-  pstate: state.present.editorModal,
-  cstate: state.present.editorPcModal,
-}))(SourceBox);

src/pages/editor/TargetBox.tsx

@@ -1,70 +1,216 @@
-import React, { useMemo, memo, ReactNode, useContext, CSSProperties } from 'react';
+import React, { memo, useCallback, useEffect, useMemo, useState } from 'react';
-import { useDrag } from 'react-dnd';
+import { useDrop } from 'react-dnd';
-import schema from '@/materials/schema';
+import Draggable, { DraggableData, DraggableEvent } from 'react-draggable';
+import { ItemCallback } from 'react-grid-layout';
+import { connect } from 'dva';
+import { ViewRender } from '@/core';
 import styles from './index.less';
-
+import { uuid } from '@/utils/tool';
-interface TargetBoxProps {
+import { Dispatch } from 'umi';
-  item: any;
+import { StateWithHistory } from 'redux-undo';
-  children: ReactNode;
+import { Menu, Item, MenuProvider } from 'react-contexify';
+import 'react-contexify/dist/ReactContexify.min.css';
+interface SourceBoxProps {
+  pstate: { pointData: { id: string; item: any; point: any; isMenu?: any }[]; curPoint: any };
+  cstate: { pointData: { id: string; item: any; point: any }[]; curPoint: any };
+  scaleNum: number;
   canvasId: string;
+  allType: string[];
+  dispatch: Dispatch;
+  dragState: { x: number; y: number };
+  setDragState: React.Dispatch<
+    React.SetStateAction<{
+      x: number;
+      y: number;
+    }>
+  >;
 }
 
-const TargetBox = memo((props: TargetBoxProps) => {
+const TargetBox = memo((props: SourceBoxProps) => {
-  const { item } = props;
+  const { pstate, scaleNum, canvasId, allType, dispatch, dragState, setDragState, cstate } = props;
 
-  const [{ isDragging }, drag] = useDrag({
+  let pointData = pstate ? pstate.pointData : [];
-    item: {
+  const cpointData = cstate ? cstate.pointData : [];
-      type: item.type,
+
-      config: schema[item.type as keyof typeof schema].config,
+  const [canvasRect, setCanvasRect] = useState<number[]>([]);
-      h: item.h,
+  const [isShowTip, setIsShowTip] = useState(true);
-      editableEl: schema[item.type as keyof typeof schema].editData,
+  const [{ isOver }, drop] = useDrop({
-      category: item.category,
+    accept: allType,
-      x: item.x || 0,
+    drop: (item: { h: number; type: string; x: number }, monitor) => {
+      let parentDiv = document.getElementById(canvasId),
+        pointRect = parentDiv!.getBoundingClientRect(),
+        top = pointRect.top,
+        pointEnd = monitor.getSourceClientOffset(),
+        y = pointEnd!.y < top ? 0 : pointEnd!.y - top,
+        col = 24, // 网格列数
+        cellHeight = 2,
+        w = item.type === 'Icon' ? 3 : col;
+      // 转换成网格规则的坐标和大小
+      let gridY = Math.ceil(y / cellHeight);
+      dispatch({
+        type: 'editorModal/addPointData',
+        payload: {
+          id: uuid(6, 10),
+          item,
+          point: { i: `x-${pointData.length}`, x: 0, y: gridY, w, h: item.h, isBounded: true },
+          status: 'inToCanvas',
+        },
+      });
     },
     collect: monitor => ({
-      isDragging: monitor.isDragging(),
+      isOver: monitor.isOver(),
+      canDrop: monitor.canDrop(),
+      item: monitor.getItem(),
     }),
   });
 
-  const containerStyle: CSSProperties = useMemo(
+  const dragStop: ItemCallback = useMemo(() => {
-    () => ({
+    return (layout, oldItem, newItem, placeholder, e, element) => {
-      opacity: isDragging ? 0.4 : 1,
+      const curPointData = pointData.filter(item => item.id === newItem.i)[0];
-      cursor: 'move',
+      dispatch({
-      height: '140px',
+        type: 'editorModal/modPointData',
-    }),
+        payload: { ...curPointData, point: newItem, status: 'inToCanvas' },
-    [isDragging],
+      });
+    };
+  }, [cpointData, dispatch, pointData]);
+
+  const onDragStart: ItemCallback = useMemo(() => {
+    return (layout, oldItem, newItem, placeholder, e, element) => {
+      const curPointData = pointData.filter(item => item.id === newItem.i)[0];
+      dispatch({
+        type: 'editorModal/modPointData',
+        payload: { ...curPointData, status: 'inToCanvas' },
+      });
+    };
+  }, [dispatch, pointData]);
+
+  const onResizeStop: ItemCallback = useMemo(() => {
+    return (layout, oldItem, newItem, placeholder, e, element) => {
+      const curPointData = pointData.filter(item => item.id === newItem.i)[0];
+      dispatch({
+        type: 'editorModal/modPointData',
+        payload: { ...curPointData, point: newItem, status: 'inToCanvas' },
+      });
+    };
+  }, [dispatch, pointData]);
+
+  const handleContextMenuDel = () => {
+    if (pstate.curPoint) {
+      dispatch({
+        type: 'editorModal/delPointData',
+        payload: { id: pstate.curPoint.id },
+      });
+    }
+  };
+
+  const handleContextMenuCopy = () => {
+    if (pstate.curPoint) {
+      dispatch({
+        type: 'editorModal/copyPointData',
+        payload: { id: pstate.curPoint.id },
+      });
+    }
+  };
+
+  const onConTextClick = (type: string) => {
+    if (type === 'del') {
+      handleContextMenuDel();
+    } else if (type === 'copy') {
+      handleContextMenuCopy();
+    }
+  };
+
+  const MyAwesomeMenu = useCallback(
+    () => (
+      <Menu id="menu_id">
+        <Item onClick={() => onConTextClick('copy')}>复制</Item>
+        <Item onClick={() => onConTextClick('del')}>删除</Item>
+      </Menu>
+    ),
+    [onConTextClick],
   );
+
+  useEffect(() => {
+    let { width, height } = document.getElementById(canvasId)!.getBoundingClientRect();
+    setCanvasRect([width, height]);
+  }, [canvasId]);
+
+  useEffect(() => {
+    let timer = window.setTimeout(() => {
+      setIsShowTip(false);
+    }, 3000);
+    return () => {
+      window.clearTimeout(timer);
+    };
+  }, []);
+  const opacity = isOver ? 0.7 : 1;
+
+  const render = useMemo(() => {
+    return (
+      <Draggable
+        position={dragState}
+        handle=".js_box"
+        onStop={(e: DraggableEvent, data: DraggableData) => {
+          setDragState({ x: data.x, y: data.y });
+        }}
+      >
+        <div className={styles.canvasBox}>
+          <MenuProvider id="menu_id">
+            <div
+              style={{
+                transform: `scale(${scaleNum})`,
+                position: 'relative',
+                width: '100%',
+                height: '100%',
+              }}
+            >
+              <div
+                id={canvasId}
+                className={styles.canvas}
+                style={{
+                  opacity,
+                }}
+                ref={drop}
+              >
+                {pointData.length > 0 ? (
+                  <ViewRender
+                    pointData={pointData}
+                    width={canvasRect[0] || 0}
+                    dragStop={dragStop}
+                    onDragStart={onDragStart}
+                    onResizeStop={onResizeStop}
+                  />
+                ) : null}
+              </div>
+            </div>
+          </MenuProvider>
+        </div>
+      </Draggable>
+    );
+  }, [
+    canvasId,
+    canvasRect,
+    dragState,
+    dragStop,
+    drop,
+    isShowTip,
+    onDragStart,
+    onResizeStop,
+    opacity,
+    pointData,
+    scaleNum,
+    setDragState,
+  ]);
+
   return (
     <>
-      <div className={styles.listWrap}>
+      {render}
-        <div className={styles.module} style={{ ...containerStyle }} ref={drag}>
+      <MyAwesomeMenu />
-          <div
-            style={{
-              height: '110px',
-              display: 'flex',
-              justifyContent: 'center',
-              alignItems: 'center',
-              flexDirection: 'column',
-              overflow: 'hidden',
-            }}
-          >
-            {props.children}
-          </div>
-          <div
-            style={{
-              height: '30px',
-              lineHeight: '30px',
-              textAlign: 'center',
-              backgroundColor: 'rgba(245, 245, 245, 1)',
-              color: 'rgba(118, 118, 118, 1)',
-            }}
-          >
-            {props.item.displayName}
-          </div>
-        </div>
-      </div>
     </>
   );
 });
 
-export default TargetBox;
+export default connect((state: StateWithHistory<any>) => ({
+  pstate: state.present.editorModal,
+  cstate: state.present.editorPcModal,
+}))(TargetBox);