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

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

@@ -1,58 +1,58 @@
-import React, { useRef, useEffect } from 'react';
-
-const RectangleDrawer = () => {
-  const canvasRef = useRef(null);
-  let isDrawing = false;
-  let startX, startY, stopX, stopY;
-  let drawingSurfaceImageData = null;
-
-  const saveData = () => {
-    const canvas = canvasRef.current;
-    const context = canvas.getContext('2d');
-    drawingSurfaceImageData = context.getImageData(0, 0, 400, 400);
-    context.putImageData(drawingSurfaceImageData, 0, 0);
-    // restoreData()
-  };
-  const restoreData = () => {
-    const canvas = canvasRef.current;
-    const context = canvas.getContext('2d');
-    console.log('drawingSurfaceImageData', drawingSurfaceImageData);
-  };
-
-  useEffect(() => {
-    const canvas = canvasRef.current;
-    const context = canvas.getContext('2d');
-
-    canvas.addEventListener('mousedown', (e) => {
-      isDrawing = true;
-      startX = e.offsetX;
-      startY = e.offsetY;
-      // drawingSurfaceImageData && restoreData()
-      saveData();
-    });
-
-    canvas.addEventListener('mousemove', (e) => {
-      if (isDrawing) {
-        restoreData();
-        stopX = e.offsetX;
-        stopY = e.offsetY;
-        context.clearRect(0, 0, canvas.width, canvas.height);
-        context.putImageData(drawingSurfaceImageData, 0, 0);
-        context.strokeRect(startX, startY, stopX - startX, stopY - startY);
-      }
-    });
-
-    canvas.addEventListener('mouseup', () => {
-      isDrawing = false;
-      saveData();
-    });
-
-    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;
+  let drawingSurfaceImageData = null;
+
+  const saveData = () => {
+    const canvas = canvasRef.current;
+    const context = canvas.getContext('2d');
+    drawingSurfaceImageData = context.getImageData(0, 0, 400, 400);
+    context.putImageData(drawingSurfaceImageData, 0, 0);
+    // restoreData()
+  };
+  const restoreData = () => {
+    const canvas = canvasRef.current;
+    const context = canvas.getContext('2d');
+    console.log('drawingSurfaceImageData', drawingSurfaceImageData);
+  };
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    const context = canvas.getContext('2d');
+
+    canvas.addEventListener('mousedown', (e) => {
+      isDrawing = true;
+      startX = e.offsetX;
+      startY = e.offsetY;
+      // drawingSurfaceImageData && restoreData()
+      saveData();
+    });
+
+    canvas.addEventListener('mousemove', (e) => {
+      if (isDrawing) {
+        restoreData();
+        stopX = e.offsetX;
+        stopY = e.offsetY;
+        context.clearRect(0, 0, canvas.width, canvas.height);
+        context.putImageData(drawingSurfaceImageData, 0, 0);
+        context.strokeRect(startX, startY, stopX - startX, stopY - startY);
+      }
+    });
+
+    canvas.addEventListener('mouseup', () => {
+      isDrawing = false;
+      saveData();
+    });
+
+    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 copy 4.tsx.bak

@@ -1,66 +1,66 @@
-import React, { useRef, useState } from 'react';
-
-const DraggableRect = () => {
-  const canvasRef = useRef(null);
-  let rect = { x: 50, y: 50, width: 100, height: 50 };
-  let dragging = false;
-  let draggingx = 0;
-  let draggingy = 0;
-  // const [rect, setRect] = useState({ x: 50, y: 50, width: 100, height: 50 });
-  // const [dragging, setDragging] = useState(false);
-
-  const drawRect = (rect) => {
-    const ctx = canvasRef.current.getContext('2d');
-    ctx.clearRect(0, 0, canvasRef.current.width, canvasRef.current.height);
-    ctx.beginPath();
-    ctx.rect(rect.x, rect.y, rect.width, rect.height);
-    ctx.stroke();
-  };
-
-  const handleMouseDown = (e) => {
-    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 (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 = () => {
-    dragging = false;
-    drawRect(rect);
-  };
-
-  // 组件挂载后，绘制矩形
-  React.useEffect(() => {
-    drawRect(rect);
-  }, []);
-
-  // 鼠标事件绑定
-  React.useEffect(() => {
-    const canvas = canvasRef.current;
-    canvas.addEventListener('mousedown', handleMouseDown);
-    canvas.addEventListener('mousemove', handleMouseMove);
-    canvas.addEventListener('mouseup', handleMouseUp);
-    return () => {
-      canvas.removeEventListener('mousedown', handleMouseDown);
-      canvas.removeEventListener('mousemove', handleMouseMove);
-      canvas.removeEventListener('mouseup', handleMouseUp);
-    };
-  }, []);
-
-  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 = { x: 50, y: 50, width: 100, height: 50 };
+  let dragging = false;
+  let draggingx = 0;
+  let draggingy = 0;
+  // const [rect, setRect] = useState({ x: 50, y: 50, width: 100, height: 50 });
+  // const [dragging, setDragging] = useState(false);
+
+  const drawRect = (rect) => {
+    const ctx = canvasRef.current.getContext('2d');
+    ctx.clearRect(0, 0, canvasRef.current.width, canvasRef.current.height);
+    ctx.beginPath();
+    ctx.rect(rect.x, rect.y, rect.width, rect.height);
+    ctx.stroke();
+  };
+
+  const handleMouseDown = (e) => {
+    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 (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 = () => {
+    dragging = false;
+    drawRect(rect);
+  };
+
+  // 组件挂载后，绘制矩形
+  React.useEffect(() => {
+    drawRect(rect);
+  }, []);
+
+  // 鼠标事件绑定
+  React.useEffect(() => {
+    const canvas = canvasRef.current;
+    canvas.addEventListener('mousedown', handleMouseDown);
+    canvas.addEventListener('mousemove', handleMouseMove);
+    canvas.addEventListener('mouseup', handleMouseUp);
+    return () => {
+      canvas.removeEventListener('mousedown', handleMouseDown);
+      canvas.removeEventListener('mousemove', handleMouseMove);
+      canvas.removeEventListener('mouseup', handleMouseUp);
+    };
+  }, []);
+
+  return <canvas ref={canvasRef} width={500} height={500} style={{ border: '1px solid #000' }} />;
+};
+
+export default DraggableRect;

package/es/components/picCircleSelect/bak/index copy 5.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;