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

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

@@ -1,92 +1,92 @@
-import { Spin } from 'antd';
-import React, { useEffect, 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, setCurrentTool] = useState<string>();
-
-  useEffect(() => {
-    init();
-  });
-
-  const init = () => {
-    loadImage('./images/zg_regist_top.png').then(() => {
-      this.initCanvas();
-      this.initCanvasEvent();
-      this.initEditors();
-    });
-  };
-
-  const loadImage = (img: string) => {
-    return new Promise((resolve) => {
-      // if (utils.isImageBase64(img)) {
-      const imgEle = document.createElement('img');
-      imgEle.src = img;
-      imgEle.onload = () => {
-        // this.imgWidth = imgEle.width
-        // this.imgHeight = imgEle.height
-        // let scale = 1
-        // if (!this.primitiveSize && this.imgWidth > this.width) {
-        //   scale = (this.width - 52) / this.imgWidth
-        //   this.imgWidth = scale * this.imgWidth
-        //   this.imgHeight = scale * this.imgHeight
-        // }
-        // this.imgObj = new fabric.Image(imgEle, {
-        //   left: 0,
-        //   top: 0,
-        //   selectable: false,
-        //   scaleX: scale,
-        //   scaleY: scale
-        // })
-        resolve();
-      };
-      // } else if (utils.isURL(img)) {
-      //   const that = this
-      //   fabric.Image.fromURL(img, function(imgObj) {
-      //     that.imgWidth = imgObj.width
-      //     that.imgHeight = imgObj.height
-      //     imgObj.set('selectable', false)
-      //     that.imgObj = imgObj
-      //     that.loading = false
-      //     resolve()
-      //   })
-      // }
-    });
-  };
-
-  const selectTool = (tool: string) => {
-    setCurrentTool(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, { useEffect, 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, setCurrentTool] = useState<string>();
+
+  useEffect(() => {
+    init();
+  });
+
+  const init = () => {
+    loadImage('./images/zg_regist_top.png').then(() => {
+      this.initCanvas();
+      this.initCanvasEvent();
+      this.initEditors();
+    });
+  };
+
+  const loadImage = (img: string) => {
+    return new Promise((resolve) => {
+      // if (utils.isImageBase64(img)) {
+      const imgEle = document.createElement('img');
+      imgEle.src = img;
+      imgEle.onload = () => {
+        // this.imgWidth = imgEle.width
+        // this.imgHeight = imgEle.height
+        // let scale = 1
+        // if (!this.primitiveSize && this.imgWidth > this.width) {
+        //   scale = (this.width - 52) / this.imgWidth
+        //   this.imgWidth = scale * this.imgWidth
+        //   this.imgHeight = scale * this.imgHeight
+        // }
+        // this.imgObj = new fabric.Image(imgEle, {
+        //   left: 0,
+        //   top: 0,
+        //   selectable: false,
+        //   scaleX: scale,
+        //   scaleY: scale
+        // })
+        resolve();
+      };
+      // } else if (utils.isURL(img)) {
+      //   const that = this
+      //   fabric.Image.fromURL(img, function(imgObj) {
+      //     that.imgWidth = imgObj.width
+      //     that.imgHeight = imgObj.height
+      //     imgObj.set('selectable', false)
+      //     that.imgObj = imgObj
+      //     that.loading = false
+      //     resolve()
+      //   })
+      // }
+    });
+  };
+
+  const selectTool = (tool: string) => {
+    setCurrentTool(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/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;