From a7d7af618c3c5f41536ca1399de7abd9a41dc3bd Mon Sep 17 00:00:00 2001
From: Awen <wengaolng@gmail.com>
Date: Thu, 5 Dec 2024 00:15:21 +0800
Subject: [PATCH] update README.md

---
 README.md                                     | 145 ++++++---
 README_zh.md                                  | 305 ++++++++++++++++++
 package.json                                  |  10 +-
 src/components/Rotate/hooks/useHandler.ts     |   6 +-
 src/components/Slide/hooks/useHandler.ts      |   6 +-
 .../SlideRegion/hooks/useHandler.ts           |   6 +-
 6 files changed, 419 insertions(+), 59 deletions(-)
 create mode 100644 README_zh.md

diff --git a/README.md b/README.md
index f1a5644..66e7f0d 100644
--- a/README.md
+++ b/README.md
@@ -1,9 +1,20 @@
-# Go Captcha Solid Package
+<div align="center">
+<img width="120" style="padding-top: 50px; margin: 0;" src="http://47.104.180.148/go-captcha/gocaptcha_logo.svg?v=1"/>
+<h1 style="margin: 0; padding: 0">Go Captcha</h1>
+<p>Behavior Captcha For Solid</p>
+
+</div>
+
+<br/>
+
+> English | [中文](README_zh.md)
+
+<br/>
 
 <p> ⭐️ If it helps you, please give a star.</p>
+
 <img src="http://47.104.180.148/go-captcha/go-captcha-v2.jpg" alt="Poster">
 
-<br/>
 
 ## Install
 ```shell
@@ -14,21 +25,31 @@ npm install go-captcha-solid
 pnpm install go-captcha-solid
 ```
 
-## 🖖 Click Mode Captcha
-```jsx
+```ts
 import GoCaptcha from 'go-captcha-solid';
+```
 
+## Click Mode
+```jsx
 <GoCaptcha.Click
   config={{}}
   data={{}}
   events={{}}
+  ref={domRef}
 />
+
+<script>
+  // call methods
+  const domRef
+  domRef.clear()
+  domRef.refresh()
+</script>
 ```
 
-### Parameter Reference
+
 ```ts
 // config = {}
-interface ClickConfig {
+interface Config {
   width?: number;
   height?: number;
   thumbWidth?: number;
@@ -43,21 +64,29 @@ interface ClickConfig {
 }
 
 // data = {}
-interface ClickData {
+interface Data {
   image: string;
   thumb: string;
 }
 
 // events = {}
-interface ClickEvents {
+interface Events {
   click?: (x: number, y: number) => void;
   refresh?: () => void;
   close?: () => void;
-  confirm?: (dots: Array<ClickDot>, reset: ()=>void) => boolean;
+  confirm?: (dots: Array<ClickDot>, reset:() => void) => boolean;
 }
 
 // component method
-interface RefMethod {
+interface ClickMethods {
+  reset: () => void,
+  clear: () => void,
+  refresh: () => void,
+  close: () => void,
+}
+
+// export component method
+interface ExportMethods {
   reset: () => void,
   clear: () => void,
   refresh: () => void,
@@ -65,23 +94,24 @@ interface RefMethod {
 }
 ```
 
-## 🖖 Slide Mode Captcha
+## Slide Mode
 ```jsx
-import GoCaptcha from 'go-captcha-solid';
-
 <GoCaptcha.Slide
   config={{}}
   data={{}}
   events={{}}
+  ref={domRef}
 />
 
-<GoCaptcha.SlideRegion
-  config={{}}
-  data={{}}
-  events={{}}
-/>
+<script>
+  // call methods
+  const domRef
+  domRef.clear()
+  domRef.refresh()
+</script>
 ```
-### Parameter Reference
+
+
 ```ts
 // config = {}
 interface SlideConfig {
@@ -112,11 +142,11 @@ interface SlideEvents {
   move?: (x: number, y: number) => void;
   refresh?: () => void;
   close?: () => void;
-  confirm?: (point: SlidePoint, reset: () => void) => boolean;
+  confirm?: (point: SlidePoint, reset:() => void) => boolean;
 }
 
-// component method
-interface RefMethod {
+// export component method
+interface ExportMethods {
   reset: () => void,
   clear: () => void,
   refresh: () => void,
@@ -124,6 +154,23 @@ interface RefMethod {
 }
 ```
 
+## Drag-And-Drop Mode
+```jsx
+<GoCaptcha.SlideRegion
+  config={{}}
+  data={{}}
+  events={{}}
+  ref={domRef}
+/>
+
+<script>
+  // call methods
+  const domRef
+  domRef.clear()
+  domRef.refresh()
+</script>
+```
+
 ```ts
 // config = {}
 interface SlideRegionConfig {
@@ -154,11 +201,11 @@ interface SlideRegionEvents {
   move?: (x: number, y: number) => void;
   refresh?: () => void;
   close?: () => void;
-  confirm?: (point: SlideRegionPoint, reset: () => void) => boolean;
+  confirm?: (point: SlideRegionPoint, reset:() => void) => boolean;
 }
 
-// component method
-interface RefMethod {
+// export component method
+interface ExportMethods {
   reset: () => void,
   clear: () => void,
   refresh: () => void,
@@ -166,21 +213,28 @@ interface RefMethod {
 }
 ```
 
-## 🖖 Rotate Mode Captcha
-```jsx
-import GoCaptcha from 'go-captcha-solid';
 
+## Rotation Mode
+```jsx
 <GoCaptcha.Rotate
   config={{}}
   data={{}}
   events={{}}
+  ref={domRef}
 />
+
+<script>
+  // call methods
+  const domRef
+  domRef.clear()
+  domRef.refresh()
+</script>
 ```
 
-### Parameter Reference
+
 ```ts
 // config = {}
-interface RotateConfig {
+interface Config {
   width?: number;
   height?: number;
   thumbWidth?: number;
@@ -194,22 +248,22 @@ interface RotateConfig {
 }
 
 // data = {}
-interface RotateData {
+interface Data {
   angle: number;
   image: string;
   thumb: string;
 }
 
 // events = {}
-interface RotateEvents {
+interface Events {
   rotate?: (angle: number) => void;
   refresh?: () => void;
   close?: () => void;
-  confirm?: (angle: number, reset: ()=>void) => boolean;
+  confirm?: (angle: number, reset:() => void) => boolean;
 }
 
-// component method
-interface RefMethod {
+// export component method
+interface ExportMethods {
   reset: () => void,
   clear: () => void,
   refresh: () => void,
@@ -218,36 +272,27 @@ interface RefMethod {
 ```
 
 
-## 🖖 Button
-```jsx
-import GoCaptcha from 'go-captcha-solid';
 
+## Button
+```vue
 <GoCaptcha.Button />
 ```
 
-### Parameter Reference
+
 ```ts
 interface _ {
-  config?: ButtonConfig;
+  config?: CaptchaConfig;
   clickEvent?: () => void;
   disabled?: boolean;
   type?: "default" | "warn" | "error" | "success";
   title?: string;
 }
 
-export interface ButtonConfig {
+export interface CaptchaConfig {
   width?: number;
   height?: number;
   verticalPadding?: number;
   horizontalPadding?: number;
 }
-```
-
 
-<br/>
-
-## 👍 Sponsor
-<div>
-<a href="http://gocaptcha.wencodes.com/sponsor/" target="_blank">http://gocaptcha.wencodes.com/sponsor/</a>
-</div>
-<br/>
\ No newline at end of file
+```
\ No newline at end of file
diff --git a/README_zh.md b/README_zh.md
new file mode 100644
index 0000000..d6280a6
--- /dev/null
+++ b/README_zh.md
@@ -0,0 +1,305 @@
+<div align="center">
+<img width="120" style="padding-top: 50px; margin: 0;" src="http://47.104.180.148/go-captcha/gocaptcha_logo.svg?v=1"/>
+<h1 style="margin: 0; padding: 0">Go Captcha</h1>
+<p>Solid 行为验证码</p>
+</div>
+
+<br/>
+
+> [English](README.md) | 中文
+
+<br/>
+
+<p style="text-align: center"> ⭐️ 如果能帮助到你，请随手给点一个star</p>
+<p style="text-align: center">QQ交流群：178498936</p>
+
+<img src="http://47.104.180.148/go-captcha/go-captcha-v2.jpg" alt="Poster">
+
+<br/>
+
+## 安装
+```shell
+yarn add go-captcha-solid
+# or
+npm install go-captcha-solid
+# or
+pnpm install go-captcha-solid
+```
+
+```ts
+import GoCaptcha from 'go-captcha-solid';
+```
+
+## 点选式
+```jsx
+<GoCaptcha.Click
+  config={{}}
+  data={{}}
+  events={{}}
+  ref={domRef}
+/>
+
+<script>
+  // call methods
+  const domRef
+  domRef.clear()
+  domRef.refresh()
+</script>
+```
+
+
+```ts
+// config = {}
+interface Config {
+  width?: number;
+  height?: number;
+  thumbWidth?: number;
+  thumbHeight?: number;
+  verticalPadding?: number;
+  horizontalPadding?: number;
+  showTheme?: boolean;
+  title?: string;
+  buttonText?: string;
+  iconSize?: number;
+  dotSize?: number;
+}
+
+// data = {}
+interface Data {
+  image: string;
+  thumb: string;
+}
+
+// events = {}
+interface Events {
+  click?: (x: number, y: number) => void;
+  refresh?: () => void;
+  close?: () => void;
+  confirm?: (dots: Array<ClickDot>, reset:() => void) => boolean;
+}
+
+// component method
+interface ClickMethods {
+  reset: () => void,
+  clear: () => void,
+  refresh: () => void,
+  close: () => void,
+}
+
+// export component method
+interface ExportMethods {
+  reset: () => void,
+  clear: () => void,
+  refresh: () => void,
+  close: () => void,
+}
+```
+
+## 滑动式
+```jsx
+<GoCaptcha.Slide
+  config={{}}
+  data={{}}
+  events={{}}
+  ref={domRef}
+/>
+
+<script>
+  // call methods
+  const domRef
+  domRef.clear()
+  domRef.refresh()
+</script>
+```
+
+
+```ts
+// config = {}
+interface SlideConfig {
+  width?: number;
+  height?: number;
+  thumbWidth?: number;
+  thumbHeight?: number;
+  verticalPadding?: number;
+  horizontalPadding?: number;
+  showTheme?: boolean;
+  title?: string;
+  iconSize?: number;
+  scope ?: boolean;
+}
+
+// data = {}
+interface SlideData {
+  thumbX: number;
+  thumbY: number;
+  thumbWidth: number;
+  thumbHeight: number;
+  image: string;
+  thumb: string;
+}
+
+// events = {}
+interface SlideEvents {
+  move?: (x: number, y: number) => void;
+  refresh?: () => void;
+  close?: () => void;
+  confirm?: (point: SlidePoint, reset:() => void) => boolean;
+}
+
+// export component method
+interface ExportMethods {
+  reset: () => void,
+  clear: () => void,
+  refresh: () => void,
+  close: () => void,
+}
+```
+
+## 拖拽式
+```jsx
+<GoCaptcha.SlideRegion
+  config={{}}
+  data={{}}
+  events={{}}
+  ref={domRef}
+/>
+
+<script>
+  // call methods
+  const domRef
+  domRef.clear()
+  domRef.refresh()
+</script>
+```
+
+```ts
+// config = {}
+interface SlideRegionConfig {
+  width?: number;
+  height?: number;
+  thumbWidth?: number;
+  thumbHeight?: number;
+  verticalPadding?: number;
+  horizontalPadding?: number;
+  showTheme?: boolean;
+  title?: string;
+  iconSize?: number;
+  scope ?: boolean;
+}
+
+// data = {}
+interface SlideRegionData {
+  thumbX: number;
+  thumbY: number;
+  thumbWidth: number;
+  thumbHeight: number;
+  image: string;
+  thumb: string;
+}
+
+// events = {}
+interface SlideRegionEvents {
+  move?: (x: number, y: number) => void;
+  refresh?: () => void;
+  close?: () => void;
+  confirm?: (point: SlideRegionPoint, reset:() => void) => boolean;
+}
+
+// export component method
+interface ExportMethods {
+  reset: () => void,
+  clear: () => void,
+  refresh: () => void,
+  close: () => void,
+}
+```
+
+
+## 旋转式
+```jsx
+<GoCaptcha.Rotate
+  config={{}}
+  data={{}}
+  events={{}}
+  ref={domRef}
+/>
+
+<script>
+  // call methods
+  const domRef
+  domRef.clear()
+  domRef.refresh()
+</script>
+```
+
+
+```ts
+// config = {}
+interface Config {
+  width?: number;
+  height?: number;
+  thumbWidth?: number;
+  thumbHeight?: number;
+  verticalPadding?: number;
+  horizontalPadding?: number;
+  showTheme?: boolean;
+  title?: string;
+  iconSize?: number;
+  scope ?: boolean;
+}
+
+// data = {}
+interface Data {
+  angle: number;
+  image: string;
+  thumb: string;
+}
+
+// events = {}
+interface Events {
+  rotate?: (angle: number) => void;
+  refresh?: () => void;
+  close?: () => void;
+  confirm?: (angle: number, reset:() => void) => boolean;
+}
+
+// export component method
+interface ExportMethods {
+  reset: () => void,
+  clear: () => void,
+  refresh: () => void,
+  close: () => void,
+}
+```
+
+
+
+## 按钮
+```vue
+<GoCaptcha.Button />
+```
+
+
+```ts
+interface _ {
+  config?: CaptchaConfig;
+  clickEvent?: () => void;
+  disabled?: boolean;
+  type?: "default" | "warn" | "error" | "success";
+  title?: string;
+}
+
+export interface CaptchaConfig {
+  width?: number;
+  height?: number;
+  verticalPadding?: number;
+  horizontalPadding?: number;
+}
+
+```
+
+## 👍 赞助一下
+<div>
+<a href="http://gocaptcha.wencodes.com/sponsor/" target="_blank">http://gocaptcha.wencodes.com/sponsor/</a>
+</div>
+<br/>
\ No newline at end of file
diff --git a/package.json b/package.json
index 69bd67f..28cddf4 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "go-captcha-solid",
-  "version": "1.0.2",
-  "description": "This is the solid package for go-captcha",
+  "version": "1.0.3",
+  "description": "GoCaptcha for Solid, which implements click mode, slider mode, drag-drop mode and rotation mode.",
   "email": "wengaolng@gmail.com",
   "author": "Awen <wengaolng@gmail.com>",
   "keywords": [
@@ -48,9 +48,6 @@
     "clean:source": "rimraf ./dist/source",
     "format": "prettier --write src"
   },
-  "dependencies": {
-    "solid-js": "^1.4.2"
-  },
   "devDependencies": {
     "@rollup/plugin-babel": "^6.0.0",
     "@types/node": "^18.7.16",
@@ -67,7 +64,8 @@
     "less": "^4.1.3",
     "less-loader": "^12.2.0",
     "postcss": "^8.4.38",
-    "postcss-loader": "^8.1.1"
+    "postcss-loader": "^8.1.1",
+    "solid-js": "^1.4.2"
   },
   "engines": {
     "node": ">=16"
diff --git a/src/components/Rotate/hooks/useHandler.ts b/src/components/Rotate/hooks/useHandler.ts
index a53e63c..4eeebe3 100644
--- a/src/components/Rotate/hooks/useHandler.ts
+++ b/src/components/Rotate/hooks/useHandler.ts
@@ -52,6 +52,10 @@ export const useHandler = (
     }
 
     const moveEvent = (e: Event|any) => {
+      if (!checkTargetFather(dragBarRef, e)) {
+        return
+      }
+
       isMoving = true
       const mTouche = e.touches && e.touches[0];
 
@@ -93,12 +97,12 @@ export const useHandler = (
         return
       }
 
+      clearEvent()
       if (!isMoving) {
         return
       }
 
       isMoving = false
-      clearEvent()
 
       if (currentAngle < 0) {
         return
diff --git a/src/components/Slide/hooks/useHandler.ts b/src/components/Slide/hooks/useHandler.ts
index d73c5a7..b7052d5 100644
--- a/src/components/Slide/hooks/useHandler.ts
+++ b/src/components/Slide/hooks/useHandler.ts
@@ -33,6 +33,10 @@ export const useHandler = (
   }))
 
   const dragEvent = (e: Event|any) => {
+    if (!checkTargetFather(dragBarRef, e)) {
+      return
+    }
+
     const touch = e.touches && e.touches[0];
     const offsetLeft = dragBlockRef.offsetLeft
     const width = containerRef.offsetWidth
@@ -96,12 +100,12 @@ export const useHandler = (
         return
       }
 
+      clearEvent()
       if (!isMoving) {
         return
       }
 
       isMoving = false
-      clearEvent()
 
       if (currentThumbX <= 0) {
         return
diff --git a/src/components/SlideRegion/hooks/useHandler.ts b/src/components/SlideRegion/hooks/useHandler.ts
index f2c55ef..320d62a 100644
--- a/src/components/SlideRegion/hooks/useHandler.ts
+++ b/src/components/SlideRegion/hooks/useHandler.ts
@@ -31,6 +31,10 @@ export const useHandler = (
   }))
 
   const dragEvent = (e: Event|any) => {
+    if (!checkTargetFather(containerRef, e)) {
+      return
+    }
+
     const touch = e.touches && e.touches[0];
     const offsetLeft = tileRef.offsetLeft
     const offsetTop = tileRef.offsetTop
@@ -99,11 +103,11 @@ export const useHandler = (
         return
       }
 
+      clearEvent()
       if (!isMoving) {
         return
       }
       isMoving = false
-      clearEvent()
 
       if (tileLeft < 0 || tileTop < 0) {
         return