@zgfe/modules-settings 2.1.0-zhongyuan-set.1 → 2.1.0-zhongyuan-set.2

package/es/components/picCircleSelect/bak/index copy 6.tsx.bak

@@ -1,116 +1,116 @@
-import React, { useRef, useState } from 'react';
-
-const DraggableRect = () => {
-  const canvasRef = useRef(null);
-  let rect: any = [];
-  let dragging = false;
-  let draggingx = 0;
-  let draggingy = 0;
-  let isAdd = true;
-  let isDrawing = false;
-  let startX, startY, stopX, stopY;
-  let index = undefined;
-  // const [rect, setRect] = useState({ x: 50, y: 50, width: 100, height: 50 });
-  // const [dragging, setDragging] = useState(false);
-
-  const drawRect = (rect: any) => {
-    const ctx = canvasRef.current.getContext('2d');
-    ctx.clearRect(0, 0, canvasRef.current.width, canvasRef.current.height);
-    ctx.beginPath();
-    console.log('rect', rect);
-
-    rect.map((item) => {
-      ctx.rect(item.x, item.y, item.w, item.h);
-    });
-
-    ctx.stroke();
-  };
-
-  const handleMouseDown = (e) => {
-    if (isAdd) {
-      isDrawing = true;
-      startX = e.offsetX;
-      startY = e.offsetY;
-    } else {
-      console.log('handleMouseDown', e, e.target);
-
-      const { x, y } = e;
-      const { left, top } = canvasRef.current.getBoundingClientRect();
-      draggingx = x - left - rect.x;
-      draggingy = y - top - rect.y;
-      rect = { ...rect, x: x - left - draggingx, y: y - top - draggingy };
-      dragging = true;
-    }
-  };
-
-  const handleMouseMove = (e) => {
-    if (isAdd) {
-      if (isDrawing) {
-        stopX = e.offsetX;
-        stopY = e.offsetY;
-        drawRect([...rect, { x: startX, y: startY, w: stopX - startX, h: stopY - startY }]);
-      }
-    } else {
-      if (dragging) {
-        const { x, y } = e;
-        const { left, top } = canvasRef.current.getBoundingClientRect();
-        rect = { ...rect, x: x - left - draggingx, y: y - top - draggingy };
-        drawRect(rect);
-      }
-    }
-  };
-
-  const handleMouseUp = () => {
-    if (isAdd) {
-      rect.push({ x: startX, y: startY, w: stopX - startX, h: stopY - startY });
-    } else {
-    }
-    isDrawing = false;
-    dragging = false;
-  };
-
-  const handleMouseleave = () => {
-    isDrawing = false;
-    dragging = false;
-  };
-
-  const handleMouseClick = (e) => {
-    // isAdd = false
-    // rect.map(item => {
-    //   const { x, y } = e;
-    //   const { left, top } = canvasRef.current.getBoundingClientRect();
-    //   draggingx = x - left
-    //   draggingy = y - top
-    //   if () = {
-    //   }
-    //   rect = { ...rect, x: x - left - draggingx, y: y - top - draggingy};
-    //   dragging = true;
-    // })
-  };
-
-  // 组件挂载后，绘制矩形
-  React.useEffect(() => {
-    drawRect(rect);
-  }, []);
-
-  // 鼠标事件绑定
-  React.useEffect(() => {
-    const canvas = canvasRef.current;
-    canvas.addEventListener('mousedown', handleMouseDown);
-    canvas.addEventListener('mousemove', handleMouseMove);
-    canvas.addEventListener('mouseup', handleMouseUp);
-    canvas.addEventListener('mouseleave', handleMouseleave);
-    canvas.addEventListener('click', handleMouseClick);
-    return () => {
-      canvas.removeEventListener('mousedown', handleMouseDown);
-      canvas.removeEventListener('mousemove', handleMouseMove);
-      canvas.removeEventListener('mouseup', handleMouseUp);
-      canvas.removeEventListener('mouseleave', handleMouseleave);
-      canvas.addEventListener('click', handleMouseClick);
-    };
-  }, []);
-
-  return <canvas ref={canvasRef} width={500} height={500} style={{ border: '1px solid #000' }} />;
-};
-
-export default DraggableRect;
+import React, { useRef, useState } from 'react';
+
+const DraggableRect = () => {
+  const canvasRef = useRef(null);
+  let rect: any = [];
+  let dragging = false;
+  let draggingx = 0;
+  let draggingy = 0;
+  let isAdd = true;
+  let isDrawing = false;
+  let startX, startY, stopX, stopY;
+  let index = undefined;
+  // const [rect, setRect] = useState({ x: 50, y: 50, width: 100, height: 50 });
+  // const [dragging, setDragging] = useState(false);
+
+  const drawRect = (rect: any) => {
+    const ctx = canvasRef.current.getContext('2d');
+    ctx.clearRect(0, 0, canvasRef.current.width, canvasRef.current.height);
+    ctx.beginPath();
+    console.log('rect', rect);
+
+    rect.map((item) => {
+      ctx.rect(item.x, item.y, item.w, item.h);
+    });
+
+    ctx.stroke();
+  };
+
+  const handleMouseDown = (e) => {
+    if (isAdd) {
+      isDrawing = true;
+      startX = e.offsetX;
+      startY = e.offsetY;
+    } else {
+      console.log('handleMouseDown', e, e.target);
+
+      const { x, y } = e;
+      const { left, top } = canvasRef.current.getBoundingClientRect();
+      draggingx = x - left - rect.x;
+      draggingy = y - top - rect.y;
+      rect = { ...rect, x: x - left - draggingx, y: y - top - draggingy };
+      dragging = true;
+    }
+  };
+
+  const handleMouseMove = (e) => {
+    if (isAdd) {
+      if (isDrawing) {
+        stopX = e.offsetX;
+        stopY = e.offsetY;
+        drawRect([...rect, { x: startX, y: startY, w: stopX - startX, h: stopY - startY }]);
+      }
+    } else {
+      if (dragging) {
+        const { x, y } = e;
+        const { left, top } = canvasRef.current.getBoundingClientRect();
+        rect = { ...rect, x: x - left - draggingx, y: y - top - draggingy };
+        drawRect(rect);
+      }
+    }
+  };
+
+  const handleMouseUp = () => {
+    if (isAdd) {
+      rect.push({ x: startX, y: startY, w: stopX - startX, h: stopY - startY });
+    } else {
+    }
+    isDrawing = false;
+    dragging = false;
+  };
+
+  const handleMouseleave = () => {
+    isDrawing = false;
+    dragging = false;
+  };
+
+  const handleMouseClick = (e) => {
+    // isAdd = false
+    // rect.map(item => {
+    //   const { x, y } = e;
+    //   const { left, top } = canvasRef.current.getBoundingClientRect();
+    //   draggingx = x - left
+    //   draggingy = y - top
+    //   if () = {
+    //   }
+    //   rect = { ...rect, x: x - left - draggingx, y: y - top - draggingy};
+    //   dragging = true;
+    // })
+  };
+
+  // 组件挂载后，绘制矩形
+  React.useEffect(() => {
+    drawRect(rect);
+  }, []);
+
+  // 鼠标事件绑定
+  React.useEffect(() => {
+    const canvas = canvasRef.current;
+    canvas.addEventListener('mousedown', handleMouseDown);
+    canvas.addEventListener('mousemove', handleMouseMove);
+    canvas.addEventListener('mouseup', handleMouseUp);
+    canvas.addEventListener('mouseleave', handleMouseleave);
+    canvas.addEventListener('click', handleMouseClick);
+    return () => {
+      canvas.removeEventListener('mousedown', handleMouseDown);
+      canvas.removeEventListener('mousemove', handleMouseMove);
+      canvas.removeEventListener('mouseup', handleMouseUp);
+      canvas.removeEventListener('mouseleave', handleMouseleave);
+      canvas.addEventListener('click', handleMouseClick);
+    };
+  }, []);
+
+  return <canvas ref={canvasRef} width={500} height={500} style={{ border: '1px solid #000' }} />;
+};
+
+export default DraggableRect;

package/es/components/picCircleSelect/bak/index copy.tsx.bak

@@ -1,41 +1,41 @@
-import React, { useRef, useEffect } from 'react';
-
-const RectangleDrawer = () => {
-  const canvasRef = useRef(null);
-  let isDrawing = false;
-  let startX, startY, stopX, stopY;
-
-  useEffect(() => {
-    const canvas = canvasRef.current;
-    const context = canvas.getContext('2d');
-
-    canvas.addEventListener('mousedown', (e) => {
-      isDrawing = true;
-      startX = e.offsetX;
-      startY = e.offsetY;
-    });
-
-    canvas.addEventListener('mousemove', (e) => {
-      if (isDrawing) {
-        stopX = e.offsetX;
-        stopY = e.offsetY;
-        // context.clearRect(0, 0, canvas.width, canvas.height);
-        context.clearRect(startX, startY, stopX - startX, stopY - startY);
-        context.strokeRect(startX, startY, stopX - startX, stopY - startY);
-      }
-    });
-
-    canvas.addEventListener('mouseup', () => {
-      context.save();
-      isDrawing = false;
-    });
-
-    canvas.addEventListener('mouseleave', () => {
-      isDrawing = false;
-    });
-  }, []);
-
-  return <canvas ref={canvasRef} width={400} height={400} style={{ border: '1px solid #000' }} />;
-};
-
-export default RectangleDrawer;
+import React, { useRef, useEffect } from 'react';
+
+const RectangleDrawer = () => {
+  const canvasRef = useRef(null);
+  let isDrawing = false;
+  let startX, startY, stopX, stopY;
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    const context = canvas.getContext('2d');
+
+    canvas.addEventListener('mousedown', (e) => {
+      isDrawing = true;
+      startX = e.offsetX;
+      startY = e.offsetY;
+    });
+
+    canvas.addEventListener('mousemove', (e) => {
+      if (isDrawing) {
+        stopX = e.offsetX;
+        stopY = e.offsetY;
+        // context.clearRect(0, 0, canvas.width, canvas.height);
+        context.clearRect(startX, startY, stopX - startX, stopY - startY);
+        context.strokeRect(startX, startY, stopX - startX, stopY - startY);
+      }
+    });
+
+    canvas.addEventListener('mouseup', () => {
+      context.save();
+      isDrawing = false;
+    });
+
+    canvas.addEventListener('mouseleave', () => {
+      isDrawing = false;
+    });
+  }, []);
+
+  return <canvas ref={canvasRef} width={400} height={400} style={{ border: '1px solid #000' }} />;
+};
+
+export default RectangleDrawer;

package/es/components/picCircleSelect/bak/index.tsx.bak

@@ -1,48 +1,48 @@
-import { Spin } from 'antd';
-import React, { useState } from 'react';
-import './index.less';
-export const classPrefix = 'setting-pic-circle-select';
-const tools =  [
-  {
-    name: 'arrow',
-    text: '添加箭头',
-    icon: 'icon-tianjiajiantou1'
-  },
-  {
-    name: 'text',
-    text: '添加文字',
-    icon: 'icon-tianjiawenzi1'
-  }
-]
-const PageLoading: React.FC = () => {
-  const [size, setSize] = useState({width: 500, height: 500})
-  const [currentTool, setSize] = useState({width: 500, height: 500})
-
-  const selectTool = (tool) => {
-    this.currentTool = tool
-  }
-  return (
-    <div style={size}>
-    <div className="img-container" style={size}>
-      <canvas id="c"></canvas>
-    </div>
-    <ul className="tool-bar">
-      <li>
-        操作
-      </li>
-      {
-        tools.map((item, i) => {
-          return <li
-            key={i}
-            onClick={() => selectTool(item.name)}
-          >
-            {item.text }
-          </li>
-        })
-      }
-    </ul>
-  </div>
-  );
-};
-
-export default PageLoading;
+import { Spin } from 'antd';
+import React, { useState } from 'react';
+import './index.less';
+export const classPrefix = 'setting-pic-circle-select';
+const tools =  [
+  {
+    name: 'arrow',
+    text: '添加箭头',
+    icon: 'icon-tianjiajiantou1'
+  },
+  {
+    name: 'text',
+    text: '添加文字',
+    icon: 'icon-tianjiawenzi1'
+  }
+]
+const PageLoading: React.FC = () => {
+  const [size, setSize] = useState({width: 500, height: 500})
+  const [currentTool, setSize] = useState({width: 500, height: 500})
+
+  const selectTool = (tool) => {
+    this.currentTool = tool
+  }
+  return (
+    <div style={size}>
+    <div className="img-container" style={size}>
+      <canvas id="c"></canvas>
+    </div>
+    <ul className="tool-bar">
+      <li>
+        操作
+      </li>
+      {
+        tools.map((item, i) => {
+          return <li
+            key={i}
+            onClick={() => selectTool(item.name)}
+          >
+            {item.text }
+          </li>
+        })
+      }
+    </ul>
+  </div>
+  );
+};
+
+export default PageLoading;

package/es/components/picCircleSelect/bak/index1.tsx.bak

@@ -1,46 +1,46 @@
-import React, { useState } from 'react';
-import { Rnd } from 'react-rnd';
-import { Cropper } from 'react-cropper';
-import 'cropperjs/dist/cropper.css';
- 
-const ImageCropper = () => {
-  const [cropArea, setCropArea] = useState({ x: 0, y: 0, width: 100, height: 100 });
-  const [image, setImage] = useState(null);
- 
-  const onCrop = (e) => {
-    console.log(e.detail.x);
-    console.log(e.detail.y);
-    console.log(e.detail.width);
-    console.log(e.detail.height);
-    setCropArea({ x: e.detail.x, y: e.detail.y, width: e.detail.width, height: e.detail.height });
-  };
- 
-  return (
-    <div>
-      <input type="file" onChange={(e) => {
-        console.log('setImage(e.target.files[0])', e, e.target, e.target.files);
-        
-        setImage(e.target.files[0])
-      }} />
-      {image && (
-        <Rnd
-          default={{ x: 0, y: 0, width: 500, height: 500 }}
-          onResize={(e, d) => setCropArea({ ...cropArea, width: d.width, height: d.height })}
-          onDragStop={(e, d) => setCropArea({ ...cropArea, x: d.x, y: d.y })}
-        >
-          <Cropper
-            src={URL.createObjectURL(image)}
-            style={{ width: '100%', height: '100%' }}
-            aspectRatio={1 / 1}
-            crop={cropArea}
-            guides
-            onCropMove={onCrop}
-            onCropEnd={onCrop}
-          />
-        </Rnd>
-      )}
-    </div>
-  );
-};
- 
-export default ImageCropper;
+import React, { useState } from 'react';
+import { Rnd } from 'react-rnd';
+import { Cropper } from 'react-cropper';
+import 'cropperjs/dist/cropper.css';
+ 
+const ImageCropper = () => {
+  const [cropArea, setCropArea] = useState({ x: 0, y: 0, width: 100, height: 100 });
+  const [image, setImage] = useState(null);
+ 
+  const onCrop = (e) => {
+    console.log(e.detail.x);
+    console.log(e.detail.y);
+    console.log(e.detail.width);
+    console.log(e.detail.height);
+    setCropArea({ x: e.detail.x, y: e.detail.y, width: e.detail.width, height: e.detail.height });
+  };
+ 
+  return (
+    <div>
+      <input type="file" onChange={(e) => {
+        console.log('setImage(e.target.files[0])', e, e.target, e.target.files);
+        
+        setImage(e.target.files[0])
+      }} />
+      {image && (
+        <Rnd
+          default={{ x: 0, y: 0, width: 500, height: 500 }}
+          onResize={(e, d) => setCropArea({ ...cropArea, width: d.width, height: d.height })}
+          onDragStop={(e, d) => setCropArea({ ...cropArea, x: d.x, y: d.y })}
+        >
+          <Cropper
+            src={URL.createObjectURL(image)}
+            style={{ width: '100%', height: '100%' }}
+            aspectRatio={1 / 1}
+            crop={cropArea}
+            guides
+            onCropMove={onCrop}
+            onCropEnd={onCrop}
+          />
+        </Rnd>
+      )}
+    </div>
+  );
+};
+ 
+export default ImageCropper;