@zgfe/modules-settings 1.2.51-zhongyuan.1 → 1.2.51-zhongyuan.7

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;

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

@@ -1,104 +1,104 @@
-import { Spin } from 'antd';
-import React, { useEffect, useState } from 'react';
-import './index.less';
-// import CanvasSelect from 'canvas-select';
-import CanvasSelect from './canvas-select.min';
-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})
-  useEffect(() => {
-    setTimeout(init, 300)
-  })
-
-  const init = () => {
-        // 创建实例（重要：一定要等到挂载节点就绪）
-// 第一个参数为挂载节点 可以是css选择器或者HTMLCanvasElement
-// 第二个参数为图片链接
-// const instance = new CanvasSelect(".img-container", "./images/zg_regist_top.png");
-// or
-const instance = new CanvasSelect('.container');
-instance.setImage('/one.jpg');
-
-let option = [
-  {
-    label: "rectangle",
-    labelFillStyle: "#f00",
-    textFillStyle: "#fff",
-    coor: [
-      [184, 183],
-      [275, 238],
-    ], // required
-    type: 1, // required
-  },
-  {
-    label: "polygon",
-    coor: [
-      [135, 291],
-      [129, 319],
-      [146, 346],
-      [174, 365],
-      [214, 362],
-      [196, 337],
-      [161, 288],
-    ], // required
-    type: 2, // required
-  },
-  {
-    label: "dot",
-    coor: [345, 406], // required
-    type: 3, // required
-  },
-  {
-    label: "line",
-    coor: [
-      [470, 155],
-      [490, 230],
-      [493, 298],
-    ], // required
-    type: 4, // required
-  },
-  {
-    label: "circle",
-    coor: [369, 197], // required
-    radius: 38, // required
-    type: 5, // required
-  },
-];
-// 加载数据
-instance.setData(option);
-// 0 不创建(默认)，1创建矩形，2创建多边形，3点标注，4折线标注，5圆形标注
-instance.createType = 1;
-instance.on("select", (info) => {
-  console.log("select", info);
-  // 可对选中对参数info进行修改
-  // 修改标签：info.label="hello"
-  // 单个形状修改填充颜色：info.fillStyle="#0f0"
-  // 然后调用instance.update()更新视图
-});
-  }
-
-  // const selectTool = (tool) => {
-  //   this.currentTool = tool
-  // }
-  return (
-    <div>
-      <div className="img-container">
-      </div>
-    </div>
-  );
-};
-
-export default PageLoading;
+import { Spin } from 'antd';
+import React, { useEffect, useState } from 'react';
+import './index.less';
+// import CanvasSelect from 'canvas-select';
+import CanvasSelect from './canvas-select.min';
+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})
+  useEffect(() => {
+    setTimeout(init, 300)
+  })
+
+  const init = () => {
+        // 创建实例（重要：一定要等到挂载节点就绪）
+// 第一个参数为挂载节点 可以是css选择器或者HTMLCanvasElement
+// 第二个参数为图片链接
+// const instance = new CanvasSelect(".img-container", "./images/zg_regist_top.png");
+// or
+const instance = new CanvasSelect('.container');
+instance.setImage('/one.jpg');
+
+let option = [
+  {
+    label: "rectangle",
+    labelFillStyle: "#f00",
+    textFillStyle: "#fff",
+    coor: [
+      [184, 183],
+      [275, 238],
+    ], // required
+    type: 1, // required
+  },
+  {
+    label: "polygon",
+    coor: [
+      [135, 291],
+      [129, 319],
+      [146, 346],
+      [174, 365],
+      [214, 362],
+      [196, 337],
+      [161, 288],
+    ], // required
+    type: 2, // required
+  },
+  {
+    label: "dot",
+    coor: [345, 406], // required
+    type: 3, // required
+  },
+  {
+    label: "line",
+    coor: [
+      [470, 155],
+      [490, 230],
+      [493, 298],
+    ], // required
+    type: 4, // required
+  },
+  {
+    label: "circle",
+    coor: [369, 197], // required
+    radius: 38, // required
+    type: 5, // required
+  },
+];
+// 加载数据
+instance.setData(option);
+// 0 不创建(默认)，1创建矩形，2创建多边形，3点标注，4折线标注，5圆形标注
+instance.createType = 1;
+instance.on("select", (info) => {
+  console.log("select", info);
+  // 可对选中对参数info进行修改
+  // 修改标签：info.label="hello"
+  // 单个形状修改填充颜色：info.fillStyle="#0f0"
+  // 然后调用instance.update()更新视图
+});
+  }
+
+  // const selectTool = (tool) => {
+  //   this.currentTool = tool
+  // }
+  return (
+    <div>
+      <div className="img-container">
+      </div>
+    </div>
+  );
+};
+
+export default PageLoading;

package/es/components/picCircleSelect/index.less

@@ -1,37 +1,37 @@
-.setting-pic-circle-select {
-  margin-top: -16px;
-  &-btn {
-    display: flex;
-    flex-direction: row;
-    gap: 16px;
-    align-items: center;
-    margin-bottom: 16px;
-    color: var(--io-N8-, #354354);
-    font-size: 14px;
-    .ant-btn {
-      padding: 0 15px;
-    }
-    .select {
-      color: #1454e5;
-      border: 1px solid #1454e5;
-    }
-  }
-  &-content {
-    position: relative;
-    width: 672px;
-    height: 350px;
-    overflow-x: auto;
-    overflow-y: auto;
-    background: var(--io-n-02, #fafafb);
-    border: 1px solid var(--io-N1-, #e6e7ea);
-    border-radius: 4px;
-  }
-  &-read-bg {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    background: transparent;
-  }
-}
+.setting-pic-circle-select {
+  margin-top: -16px;
+  &-btn {
+    display: flex;
+    flex-direction: row;
+    gap: 16px;
+    align-items: center;
+    margin-bottom: 16px;
+    color: var(--io-N8-, #354354);
+    font-size: 14px;
+    .ant-btn {
+      padding: 0 15px;
+    }
+    .select {
+      color: #1454e5;
+      border: 1px solid #1454e5;
+    }
+  }
+  &-content {
+    position: relative;
+    width: 672px;
+    height: 350px;
+    overflow-x: auto;
+    overflow-y: auto;
+    background: var(--io-n-02, #fafafb);
+    border: 1px solid var(--io-N1-, #e6e7ea);
+    border-radius: 4px;
+  }
+  &-read-bg {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background: transparent;
+  }
+}