feat; add drag and card

src/components/BasicShop/BasicComponents/Carousel/template.ts

@@ -1,5 +1,6 @@
 const template = {
   type: 'Carousel',
   h: 82,
+  displayName: '轮播图组件',
 };
 export default template;

src/components/BasicShop/BasicComponents/Footer/template.ts

@@ -1,5 +1,6 @@
 const template = {
   type: 'Footer',
   h: 24,
+  displayName: '页脚组件',
 };
 export default template;

src/components/BasicShop/BasicComponents/Form/template.ts

@@ -1,5 +1,6 @@
 const template = {
   type: 'Form',
   h: 172,
+  displayName: '表格组件',
 };
 export default template;

src/components/BasicShop/BasicComponents/Header/template.ts

@@ -1,5 +1,6 @@
 const template = {
   type: 'Header',
   h: 28,
+  displayName: '页头组件',
 };
 export default template;

src/components/BasicShop/BasicComponents/Icon/template.ts

@@ -1,5 +1,6 @@
 const template = {
   type: 'Icon',
   h: 23,
+  displayName: '图标组件',
 };
 export default template;

src/components/BasicShop/BasicComponents/Image/template.ts

@@ -1,5 +1,6 @@
 const template = {
   type: 'Image',
   h: 80,
+  displayName: '图片组件',
 };
 export default template;

src/components/BasicShop/BasicComponents/List/template.ts

@@ -1,5 +1,6 @@
 const template = {
   type: 'List',
   h: 110,
+  displayName: '列表组件',
 };
 export default template;

src/components/BasicShop/BasicComponents/LongText/template.ts

@@ -1,5 +1,6 @@
 const template = {
   type: 'LongText',
   h: 36,
+  displayName: '长文本组件',
 };
 export default template;

src/components/BasicShop/BasicComponents/Notice/template.ts

@@ -1,5 +1,6 @@
 const template = {
   type: 'Notice',
   h: 20,
+  displayName: '通知组件',
 };
 export default template;

src/components/BasicShop/BasicComponents/Qrcode/template.ts

@@ -1,5 +1,6 @@
 const template = {
   type: 'Qrcode',
   h: 150,
+  displayName: '二维码组件',
 };
 export default template;

src/components/BasicShop/BasicComponents/Tab/template.ts

@@ -1,5 +1,6 @@
 const template = {
   type: 'Tab',
   h: 130,
+  displayName: '切换页组件',
 };
 export default template;

src/components/BasicShop/BasicComponents/Text/template.ts

@@ -1,5 +1,6 @@
 const template = {
   type: 'Text',
   h: 20,
+  displayName: '文本组件',
 };
 export default template;

src/components/BasicShop/BasicComponents/WhiteTpl/template.ts

@@ -1,5 +1,6 @@
 const template = {
   type: 'WhiteTpl',
   h: 20,
+  displayName: '空白组件',
 };
 export default template;

src/components/BasicShop/MediaComponents/Video/template.ts

@@ -1,5 +1,6 @@
 const template = {
   type: 'Video',
   h: 107,
+  displayName: '视频组件',
 };
 export default template;

src/components/BasicShop/VisualComponents/Area/template.ts

@@ -1,5 +1,6 @@
 const template = {
   type: 'Area',
   h: 108,
+  displayName: '面积图组件',
 };
 export default template;

src/components/BasicShop/VisualComponents/Chart/template.ts

@@ -1,5 +1,6 @@
 const template = {
   type: 'Chart',
   h: 102,
+  displayName: '柱状图组件',
 };
 export default template;

src/components/BasicShop/VisualComponents/Line/template.ts

@@ -1,5 +1,6 @@
 const template = {
   type: 'Line',
   h: 104,
+  displayName: '折线图组件',
 };
 export default template;

src/components/BasicShop/VisualComponents/Pie/template.ts

@@ -1,5 +1,6 @@
 const template = {
   type: 'Pie',
   h: 106,
+  displayName: '饼图组件',
 };
 export default template;

src/components/BasicShop/VisualComponents/XProgress/template.ts

@@ -1,5 +1,6 @@
 const template = {
   type: 'XProgress',
   h: 102,
+  displayName: '圆型进度条组件',
 };
 export default template;

src/components/Calibration/index.less

@@ -1,9 +1,10 @@
-.calibration{
+.calibration {
   width: calc(200% - 50px);
   height: 200%;
   position: relative;
   white-space: nowrap;
-  :global(.calibrationNumber){
+  pointer-events: none;
+  :global(.calibrationNumber) {
     font-size: 12px;
   }
-}
+}

src/global.css

@@ -64,4 +64,9 @@ body {
 .ant-tabs-left.editorTabclass .ant-tabs-content-holder{
   overflow: auto;
   padding:8px;
+}
+.ant-tabs-left.editorTabclass .ant-tabs-tabpane{
+  display: flex;
+  flex-wrap: wrap;
+  padding-left: 12px!important;
 }

src/pages/editor/Container.tsx

@@ -1,5 +1,5 @@
-import React, { useState, useEffect, useMemo, useContext } from 'react';
-import { Slider, Result, Tabs, Alert } from 'antd';
+import React, { useState, useEffect, useMemo, useContext, useRef } from 'react';
+import { Slider, Result, Tabs } from 'antd';
 import {
   PieChartOutlined,
   ExpandOutlined,
@@ -9,7 +9,6 @@ import {
   DoubleRightOutlined,
   DoubleLeftOutlined,
 } from '@ant-design/icons';
-import TextLoop from 'react-text-loop';
 import { connect } from 'dva';
 import HeaderComponent from './components/Header';
 import SourceBox from './SourceBox';
@@ -33,6 +32,7 @@ import { StateWithHistory } from 'redux-undo';
 import styles from './index.less';
 import { useGetBall } from 'react-draggable-ball';
 import { dooringContext } from '@/layouts';
+import { throttle } from '@/utils/tool';
 
 const { TabPane } = Tabs;
 
@@ -128,13 +128,15 @@ const Container = (props: {
     setScale(prev => (v >= 150 ? 1.5 : v / 100));
   };
 
-  const handleSlider = (type: any) => {
-    if (type) {
-      setScale(prev => (prev >= 1.5 ? 1.5 : prev + 0.1));
-    } else {
-      setScale(prev => (prev <= 0.5 ? 0.5 : prev - 0.1));
-    }
-  };
+  const handleSlider = useMemo(() => {
+    return (type: any) => {
+      if (type) {
+        setScale(prev => (prev >= 1.5 ? 1.5 : prev + 0.1));
+      } else {
+        setScale(prev => (prev <= 0.5 ? 0.5 : prev - 0.1));
+      }
+    };
+  }, []);
 
   const handleFormSave = useMemo(() => {
     if (context.theme === 'h5') {
@@ -180,12 +182,16 @@ const Container = (props: {
     }
   }, [context.theme, dispatch]);
 
-  const redohandler = () => {
-    dispatch(ActionCreators.redo());
-  };
-  const undohandler = () => {
-    dispatch(ActionCreators.undo());
-  };
+  const redohandler = useMemo(() => {
+    return () => {
+      dispatch(ActionCreators.redo());
+    };
+  }, [dispatch]);
+  const undohandler = useMemo(() => {
+    return () => {
+      dispatch(ActionCreators.undo());
+    };
+  }, [dispatch]);
   useEffect(() => {
     if (window.innerWidth < 1024) {
       props.history.push('/mobileTip');
@@ -346,6 +352,71 @@ const Container = (props: {
     }
   }, [canvasId, collapsed, generateHeader, graphTpl, mediaTpl, schema, template]);
 
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [diffmove, setDiffMove] = useState({
+    start: { x: 0, y: 0 },
+    move: false,
+  });
+
+  const mousedownfn = useMemo(() => {
+    return (e: React.MouseEvent<HTMLDivElement>) => {
+      if (e.target === containerRef.current) {
+        setDiffMove({
+          start: {
+            x: e.clientX,
+            y: e.clientY,
+          },
+          move: true,
+        });
+      }
+    };
+  }, []);
+  const mousemovefn = useMemo(() => {
+    return (e: React.MouseEvent<HTMLDivElement>) => {
+      if (diffmove.move) {
+        let diffx: number;
+        let diffy: number;
+        const d = 5;
+        const newX = e.clientX;
+        const newY = e.clientY;
+        newX - diffmove.start.x > 0 ? (diffx = d) : (diffx = -d);
+        newY - diffmove.start.y > 0 ? (diffy = d) : (diffy = -d);
+        setDiffMove({
+          start: {
+            x: newX,
+            y: newY,
+          },
+          move: true,
+        });
+        setDragState(prev => {
+          return {
+            x: prev.x + diffx,
+            y: prev.y + diffy,
+          };
+        });
+      }
+    };
+  }, [diffmove.move, diffmove.start.x, diffmove.start.y]);
+
+  const mouseupfn = useMemo(() => {
+    return () => {
+      if (diffmove.move) {
+        setDiffMove({
+          start: { x: 0, y: 0 },
+          move: false,
+        });
+      }
+    };
+  }, [diffmove.move]);
+
+  useEffect(() => {
+    if (diffmove.move && containerRef.current) {
+      containerRef.current.style.cursor = 'move';
+    } else {
+      containerRef.current!.style.cursor = 'default';
+    }
+  }, [diffmove.move]);
+
   return (
     <div className={styles.editorWrap}>
       <HeaderComponent
@@ -391,7 +462,15 @@ const Container = (props: {
           }}
         ></div>
 
-        <div className={styles.tickMark} id="calibration">
+        <div
+          className={styles.tickMark}
+          id="calibration"
+          ref={containerRef}
+          onMouseDown={mousedownfn}
+          onMouseMove={throttle(mousemovefn, 500)}
+          onMouseUp={mouseupfn}
+          onMouseLeave={mouseupfn}
+        >
           <div className={styles.tickMarkTop}>
             <Calibration direction="up" id="calibrationUp" multiple={scaleNum} />
           </div>

src/pages/editor/TargetBox.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, memo, ReactNode, useContext } from 'react';
+import React, { useMemo, memo, ReactNode, useContext, CSSProperties } from 'react';
 import { useDrag } from 'react-dnd';
 import schemaH5 from 'components/BasicShop/schema';
 import schemaPc from 'components/BasicPcShop/schema';
@@ -35,18 +35,44 @@ const TargetBox = memo((props: TargetBoxProps) => {
     }),
   });
 
-  const containerStyle = useMemo(
+  const containerStyle: CSSProperties = useMemo(
     () => ({
       opacity: isDragging ? 0.4 : 1,
       cursor: 'move',
+      height: '140px',
     }),
     [isDragging],
   );
-
   return (
-    <div className={styles.module} style={{ ...containerStyle }} ref={drag}>
-      {props.children}
-    </div>
+    <>
+      <div style={{ width: '50%', padding: '10px' }}>
+        <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>
+    </>
   );
 });
 

src/pages/editor/index.less

@@ -36,6 +36,7 @@
         font-weight: bold;
         line-height: 50px;
         font-family: PingFangSC-Medium, PingFang SC;
+        width: 100%;
       }
       .collapsed {
         cursor: pointer;
@@ -52,7 +53,7 @@
         width: 100%;
         overflow: hidden;
         user-select: none;
-        border: 2px solid transparent;
+        border: 2px solid #9e9e9e3d;
         transition: border 0.3s;
         &:hover {
           border: 2px solid #06c;

src/utils/tool.ts

@@ -91,3 +91,16 @@ export function unParams(params = '?a=1&b=2&c=3') {
     });
   return obj;
 }
+
+export function throttle(fn: Function, delay: number) {
+  let flag = true;
+  return (...args: any) => {
+    if (flag) {
+      flag = false;
+      fn(...args);
+      setTimeout(() => {
+        flag = true;
+      }, delay);
+    }
+  };
+}