fix drag bug and config

.gitignore

@@ -103,4 +103,8 @@ dist
 # TernJS port file
 .tern-port
 
-/**/*.umi
+<<<<<<< HEAD
+/**/*.umi
+=======
+.umi/
+>>>>>>> upstream/master

src/components/Carousel/index.js

@@ -3,35 +3,39 @@ import { Carousel } from 'zarm';
 import styles from './index.less';
 
 const XCarousel = memo(props => {
-  const {
-    direction,
-    swipeable,
-    imgList
-  } = props
-  
+  const { direction, swipeable, autoPlay, isTpl, imgList, tplImg } = props;
+
   const contentRender = () => {
     return imgList.map((item, i) => {
       return (
         <div className={styles.carousel__item__pic} key={+i}>
           <img src={item.imgUrl[0].url} alt="" />
         </div>
-      )
-    })
-  }
+      );
+    });
+  };
 
-  return <div style={{width: '100%', overflow: 'hidden'}}>
-          <Carousel
-            onChange={(index) => {
-              // console.log(`onChange: ${index}`);
-            }}
-            direction={direction}
-            swipeable={swipeable}
-            autoPlay
-            loop
-          >
-            {contentRender()}
-          </Carousel>
+  return (
+    <div style={{ width: '100%', overflow: 'hidden' }}>
+      {isTpl ? (
+        <div className={styles.carousel__item__pic}>
+          <img src={tplImg} alt="" />
         </div>
-})
+      ) : (
+        <Carousel
+          onChange={index => {
+            // console.log(`onChange: ${index}`);
+          }}
+          direction={direction}
+          swipeable={swipeable}
+          autoPlay={autoPlay}
+          loop
+        >
+          {contentRender()}
+        </Carousel>
+      )}
+    </div>
+  );
+});
 
-export default XCarousel;
+export default XCarousel;

src/components/DynamicEngine/index.js

@@ -2,35 +2,38 @@ import { dynamic } from 'umi';
 import Loading from '../LoadingCp';
 import { useMemo, memo } from 'react';
 
-const needList = ['Tab', 'Carousel', 'Upload', 'Video']
+const needList = ['Tab', 'Carousel', 'Upload', 'Video'];
 
-const DynamicFunc = (type) => dynamic({
-  loader: async function() {
-    let Component;
-    if(needList.includes(type)) {
-      const { default: Graph } =  await import(`@/components/${type}`)
-      Component = Graph
-    }else {
-      const Components =  await import(`@/components/DynamicEngine/components`)
-      Component = Components[type]
-    }
+const DynamicFunc = type =>
+  dynamic({
+    loader: async function() {
+      let Component;
+      if (needList.includes(type)) {
+        const { default: Graph } = await import(`@/components/${type}`);
+        Component = Graph;
+      } else {
+        const Components = await import(`@/components/DynamicEngine/components`);
+        Component = Components[type];
+      }
 
-    return (props) => {
-      const { config } = props
-      return <Component {...config} />
-    }
-  },
-  loading: () => <div style={{ paddingTop: 10, textAlign: 'center' }}>
-                  <Loading />
-                </div>
-})
+      return props => {
+        const { config } = props;
+        return <Component {...config} />;
+      };
+    },
+    loading: () => (
+      <div style={{ paddingTop: 10, textAlign: 'center' }}>
+        <Loading />
+      </div>
+    ),
+  });
 
-const DynamicEngine = memo((props) => {
-  const { type, config } = props
+const DynamicEngine = memo(props => {
+  const { type, config } = props;
   const Dynamic = useMemo(() => {
-    return DynamicFunc(type)
-  }, [type])
-  return <Dynamic type={type} config={config} />
-})
+    return DynamicFunc(type);
+  }, [type, config]);
+  return <Dynamic type={type} config={config} />;
+});
 
-export default DynamicEngine
+export default DynamicEngine;

src/pages/editor/Container.js

@@ -1,11 +1,12 @@
-import React, { useState, useEffect, memo, useMemo } from 'react';
-import { Input, Slider, Result, Tabs } from 'antd';
+import React, { useState, useEffect, useCallback, memo, useMemo } from 'react';
+import { Slider, Result, Tabs, Alert } from 'antd';
 import {
   PieChartOutlined,
   ExpandOutlined,
   PlayCircleOutlined,
   HighlightOutlined,
 } from '@ant-design/icons';
+import TextLoop from 'react-text-loop';
 import { connect } from 'dva';
 import HeaderComponent from './components/Header';
 import SourceBox from './SourceBox';
@@ -17,10 +18,10 @@ import template from 'components/DynamicEngine/template';
 import mediaTpl from 'components/DynamicEngine/mediaTpl';
 import graphTpl from 'components/DynamicEngine/graphTpl';
 import schema from 'components/DynamicEngine/schema';
+import { uuid } from 'utils/tool';
 
 import styles from './index.less';
 
-const { Search } = Input;
 const { TabPane } = Tabs;
 
 const Container = memo(props => {
@@ -68,6 +69,10 @@ const Container = memo(props => {
     });
   };
 
+  const clearData = useCallback(() => {
+    dispatch({ type: 'editorModal/clearAll' });
+  }, []);
+
   const handleDel = id => {
     dispatch({
       type: 'editorModal/delPointData',
@@ -94,34 +99,50 @@ const Container = memo(props => {
     });
     return arr;
   }, []);
+  // 存储用户唯一信息
+  if (!localStorage.getItem('uid') || !sessionStorage.getItem('sid')) {
+    localStorage.setItem('uid', uuid(8, 10));
+    sessionStorage.setItem('sid', uuid(5, 10));
+  }
+
   return (
     <div className={styles.editorWrap}>
-      <HeaderComponent pointData={pointData} location={props.location} />
+      <HeaderComponent pointData={pointData} clearData={clearData} location={props.location} />
       <div className={styles.container}>
         <div className={styles.list}>
           <div className={styles.searchBar}>
-            <Search placeholder="搜索组件" onSearch={value => console.log(value)} enterButton />
+            <Alert
+              banner
+              message={
+                <TextLoop mask>
+                  <div>Dooring升级啦！</div>
+                  <div>Dooring添加自动保存功能</div>
+                  <div>已有500+人使用</div>
+                  <div>持续迭代中...</div>
+                </TextLoop>
+              }
+            />
           </div>
           <div className={styles.componentList}>
             <Tabs defaultActiveKey="1">
               <TabPane tab={generateHeader('base', '基础组件')} key="1">
                 {template.map((value, i) => (
                   <TargetBox item={value} key={i} canvasId={canvasId}>
-                    <DynamicEngine {...value} config={schema[value.type].config} />
+                    <DynamicEngine {...value} config={schema[value.type].config} isTpl={true} />
                   </TargetBox>
                 ))}
               </TabPane>
               <TabPane tab={generateHeader('media', '媒体组件')} key="2">
                 {mediaTpl.map((value, i) => (
                   <TargetBox item={value} key={i} canvasId={canvasId}>
-                    <DynamicEngine {...value} config={schema[value.type].config} />
+                    <DynamicEngine {...value} config={schema[value.type].config} isTpl={true} />
                   </TargetBox>
                 ))}
               </TabPane>
               <TabPane tab={generateHeader('visible', '可视化组件')} key="3">
                 {graphTpl.map((value, i) => (
                   <TargetBox item={value} key={i} canvasId={canvasId}>
-                    <DynamicEngine {...value} config={schema[value.type].config} />
+                    <DynamicEngine {...value} config={schema[value.type].config} isTpl={true} />
                   </TargetBox>
                 ))}
               </TabPane>

src/pages/editor/SourceBox.js

@@ -76,7 +76,6 @@ const SourceBox = memo(props => {
 
   const opacity = isOver ? 0.7 : 1;
   const backgroundColor = isOver ? 1 : 0.7;
-
   return (
     <Draggable handle=".js_box">
       <div className={styles.canvasBox}>
@@ -101,12 +100,12 @@ const SourceBox = memo(props => {
               <div
                 className="js_box"
                 style={{
-                  width: '12px',
+                  width: '10px',
                   height: '100%',
                   position: 'absolute',
                   borderRadius: '0 6px 6px 0',
                   backgroundColor: '#2f54eb',
-                  right: '-12px',
+                  right: '-10px',
                   top: '0',
                   color: '#fff',
                   cursor: 'move',
@@ -127,7 +126,7 @@ const SourceBox = memo(props => {
               >
                 {pointData.map(value => (
                   <div className={styles.dragItem} key={value.id} data-grid={value.point}>
-                    <DynamicEngine {...value.item} />
+                    <DynamicEngine {...value.item} isTpl={false} />
                   </div>
                 ))}
               </GridLayout>

src/pages/editor/TargetBox.js

@@ -1,5 +1,5 @@
 import React, { useMemo, memo } from 'react';
-import { useDrag, DragPreviewImage } from 'react-dnd';
+import { useDrag } from 'react-dnd';
 import { connect } from 'dva';
 import schema from 'components/DynamicEngine/schema';
 
@@ -30,12 +30,6 @@ const TargetBox = memo(props => {
   return (
     <div className={styles.module} style={{ ...containerStyle }} ref={drag}>
       {props.children}
-      {item.type === 'Carousel' && (
-        <DragPreviewImage
-          connect={preview}
-          src={'https://www.easyicon.net/api/resizeApi.php?id=1200841&size=32'}
-        ></DragPreviewImage>
-      )}
     </div>
   );
 });

src/pages/editor/preview.js

@@ -1,69 +1,82 @@
-import React, { memo, useEffect, useState } from 'react'
-import GridLayout from 'react-grid-layout'
-import DynamicEngine from 'components/DynamicEngine'
-import req from '@/utils/req'
-import styles from './index.less'
+import React, { memo, useEffect, useState } from 'react';
+import GridLayout from 'react-grid-layout';
+import DynamicEngine from 'components/DynamicEngine';
+import req from '@/utils/req';
+import styles from './index.less';
 
 // 可视化组件类型
 // const componentTypes = ['Column', 'Pie']
 
-const isMac = navigator.platform.indexOf('Mac') === 0
+const isMac = navigator.platform.indexOf('Mac') === 0;
 
 const pcStyle = {
   width: isMac ? 395 : 412,
-  margin: '20px auto', 
-  border: '10px solid #000', 
-  borderRadius: '20px', 
-  height: '684px', 
-  overflow: 'auto'
-}
+  margin: '20px auto',
+  border: '10px solid #000',
+  borderRadius: '20px',
+  height: '684px',
+  overflow: 'auto',
+};
 
-const PreviewPage = memo((props) => {
+const PreviewPage = memo(props => {
   const [pointData, setPointData] = useState(() => {
-    let pointDataStr = localStorage.getItem('pointData')
-    let points
-  
-    try{
-      points = JSON.parse(pointDataStr) || []
-    }catch(err) {
-      points = []
-    }
-    return points.map(item => ({...item, point: {...item.point, isDraggable: false, isResizable: false } }))
-  })
+    let pointDataStr = localStorage.getItem('pointData');
+    let points;
 
-  const vw = window.innerWidth
+    try {
+      points = JSON.parse(pointDataStr) || [];
+    } catch (err) {
+      points = [];
+    }
+    return points.map(item => ({
+      ...item,
+      point: { ...item.point, isDraggable: false, isResizable: false },
+    }));
+  });
+
+  const vw = window.innerWidth;
 
   useEffect(() => {
-    const  { tid } = props.location.query
-    req.get('/visible/preview/get', { params: { tid } }).then(res => {
-      setPointData(res.map(item => ({...item, point: {...item.point, isDraggable: false, isResizable: false } })))
-    }).catch(err => {
-      setTimeout(() => {
-        window.close()
-      }, 3000)
-    })
-  }, [])
+    const { tid } = props.location.query;
+    const timer = null;
+    req
+      .get('/visible/preview/get', { params: { tid } })
+      .then(res => {
+        setPointData(
+          res.map(item => ({
+            ...item,
+            point: { ...item.point, isDraggable: false, isResizable: false },
+          })),
+        );
+      })
+      .catch(err => {
+        timer = setTimeout(() => {
+          window.close();
+        }, 3000);
+      });
+    return () => {
+      clearTimeout(timer);
+    };
+  }, []);
 
   return (
     <div style={vw > 800 ? pcStyle : {}}>
-      <GridLayout 
-        className={styles.layout} 
-        cols={24} 
-        rowHeight={2} 
-        width={vw > 800 ? 375 :vw }
-        margin={[0,0]}
+      <GridLayout
+        className={styles.layout}
+        cols={24}
+        rowHeight={2}
+        width={vw > 800 ? 375 : vw}
+        margin={[0, 0]}
         id="xx"
       >
-        {
-          pointData.map(value => 
-            <div className={styles.dragItem} key={value.id} data-grid={value.point}>
-              <DynamicEngine {...value.item} />
-            </div>
-          )
-        }
+        {pointData.map(value => (
+          <div className={styles.dragItem} key={value.id} data-grid={value.point}>
+            <DynamicEngine {...value.item} />
+          </div>
+        ))}
       </GridLayout>
     </div>
-  )
-})
+  );
+});
 
-export default PreviewPage
+export default PreviewPage;