fix rotate captcha

wenlng · wenlng · commit 7ed7aa8de3d3 · 2025-02-17T00:53:15.000+08:00
diff --git a/README.md b/README.md
@@ -1,7 +1,7 @@
 <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 Angular</p>
+<p>The Behavior Captcha For The Angular</p>
 
 </div>
 
@@ -292,6 +292,7 @@ interface RotateData {
   angle: number;
   image: string;
   thumb: string;
+  thumbSize: number;
 }
 
 // events = {}
diff --git a/README_zh.md b/README_zh.md
@@ -293,6 +293,7 @@ interface RotateData {
   angle: number;
   image: string;
   thumb: string;
+  thumbSize: number;
 }
 
 // events = {}
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "go-captcha-angular",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "GoCaptcha for Angular, which implements click mode, slider mode, drag-drop mode and rotation mode.",
   "private": false,
   "email": "wengaolng@gmail.com",
diff --git a/projects/example/src/app/app.component.ts b/projects/example/src/app/app.component.ts
@@ -207,9 +207,9 @@ export class AppComponent {
 
   ////////////////////////////////
   rotateData = {
-    angle: 20,
     image: this.rotateImage,
     thumb: this.rotateThumb,
+    thumbSize: 195
   }
 
   rotateEvents = {
@@ -221,7 +221,6 @@ export class AppComponent {
         ...this.rotateData,
         image: this.clickImage2,
         thumb: this.rotateThumb,
-        angle: 40,
       }
       console.log("refresh >>>>>>>")
     },
diff --git a/projects/go-captcha-angular/README.md b/projects/go-captcha-angular/README.md
@@ -1,7 +1,7 @@
 <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 Angular</p>
+<p>The Behavior Captcha For The Angular</p>
 
 </div>
 
@@ -292,6 +292,7 @@ interface RotateData {
   angle: number;
   image: string;
   thumb: string;
+  thumbSize: number;
 }
 
 // events = {}
diff --git a/projects/go-captcha-angular/README_zh.md b/projects/go-captcha-angular/README_zh.md
@@ -293,6 +293,7 @@ interface RotateData {
   angle: number;
   image: string;
   thumb: string;
+  thumbSize: number;
 }
 
 // events = {}
diff --git a/projects/go-captcha-angular/package.json b/projects/go-captcha-angular/package.json
@@ -1,6 +1,6 @@
 {
   "name": "go-captcha-angular",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "license": "MIT",
   "description": "GoCaptcha for Angular, which implements click mode, slider mode, drag-drop mode and rotation mode.",
   "keywords": [
diff --git a/projects/go-captcha-angular/src/lib/modules/click/click.component.scss b/projects/go-captcha-angular/src/lib/modules/click/click.component.scss
@@ -14,9 +14,10 @@
     z-index: 2;
     width: 22px;
     height: 22px;
-    color: #cedffe;
-    background: #3e7cff;
+    color: var(--go-captcha-theme-dot-color);
+    background:  var(--go-captcha-theme-dot-bg-color);
     border: 3px solid #f7f9fb;
+    border-color: var(--go-captcha-theme-dot-border-color);
     display:-webkit-box;
     display:-webkit-flex;
     display:-ms-flexbox;
diff --git a/projects/go-captcha-angular/src/lib/modules/click/click.component.ts b/projects/go-captcha-angular/src/lib/modules/click/click.component.ts
@@ -38,7 +38,7 @@ export class ClickComponent {
     }
 
     get hasDisplayImageState() {
-        return this.localData.image != '' || this.localData.thumb != ''
+        return (this.localData.image && this.localData.image.length > 0) || (this.localData.thumb && this.localData.thumb.length > 0)
     }
 
     clickEvent(e: Event|any){
diff --git a/projects/go-captcha-angular/src/lib/modules/rotate/rotate-instance.ts b/projects/go-captcha-angular/src/lib/modules/rotate/rotate-instance.ts
@@ -30,15 +30,17 @@ export const defaultRotateConfig = ():RotateConfig => ({
 })
 
 export interface RotateData {
-    angle: number;
+    angle?: number;
     image: string;
     thumb: string;
+    thumbSize?: number;
 }
 
 export const defaultRotateData = (): RotateData =>({
     angle: 0,
     image: '',
-    thumb: ''
+    thumb: '',
+    thumbSize: 0
 })
 
 
diff --git a/projects/go-captcha-angular/src/lib/modules/rotate/rotate.component.html b/projects/go-captcha-angular/src/lib/modules/rotate/rotate.component.html
@@ -50,7 +50,7 @@
       <div class="gc-thumb gc-rotate-thumb">
         <div
           class="gc-rotate-thumb-block"
-          [style]="{ transform: 'rotate('+thumbAngle+'deg)'}"
+          [style]="thumbSizeStyle"
         >
           <img
             [class]="{'gc-hide': localData.thumb == ''}"
diff --git a/projects/go-captcha-angular/src/lib/modules/rotate/rotate.component.scss b/projects/go-captcha-angular/src/lib/modules/rotate/rotate.component.scss
@@ -56,6 +56,14 @@
     right: 0;
     bottom: 0;
 
+    display: -webkit-box;
+    display: -moz-box;
+    display: -ms-flexbox;
+    display: -webkit-flex;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
     img {
       max-width: 100%;
       max-height: 100%;
diff --git a/projects/go-captcha-angular/src/lib/modules/rotate/rotate.component.ts b/projects/go-captcha-angular/src/lib/modules/rotate/rotate.component.ts
@@ -45,12 +45,22 @@ export class RotateComponent {
         this.localEvents = events
     }
 
+    get thumbSizeStyle() {
+        return {
+            transform: 'rotate('+this.thumbAngle+'deg)',
+            ...(this.localData.thumbSize > 0 ? {
+                width: this.localData.thumbSize + 'px',
+                height: this.localData.thumbSize + 'px'
+            } : {})
+        }
+    }
+
     get hasDisplayWrapperState() {
         return (this.localConfig.width || 0) > 0 || (this.localConfig.height || 0) > 0
     }
 
     get hasDisplayImageState() {
-        return this.localData.image != '' || this.localData.thumb != ''
+        return (this.localData.image && this.localData.image.length > 0) || (this.localData.thumb && this.localData.thumb.length > 0)
     }
 
     get size() {
diff --git a/projects/go-captcha-angular/src/lib/modules/slide-region/slide-region.component.ts b/projects/go-captcha-angular/src/lib/modules/slide-region/slide-region.component.ts
@@ -62,7 +62,7 @@ export class SlideRegionComponent {
     }
 
     get hasDisplayImageState() {
-        return this.localData.image != '' || this.localData.thumb != ''
+        return (this.localData.image && this.localData.image.length > 0) || (this.localData.thumb && this.localData.thumb.length > 0)
     }
 
     private dsFn = (event: any) => event.preventDefault()
diff --git a/projects/go-captcha-angular/src/lib/modules/slide/slide.component.ts b/projects/go-captcha-angular/src/lib/modules/slide/slide.component.ts
@@ -55,7 +55,7 @@ export class SlideComponent {
     }
 
     get hasDisplayImageState() {
-        return this.localData.image != '' || this.localData.thumb != ''
+        return (this.localData.image && this.localData.image.length > 0) || (this.localData.thumb && this.localData.thumb.length > 0)
     }
 
     private dsFn = (event: any) => event.preventDefault()
diff --git a/projects/go-captcha-angular/src/scss/go-captcha.scss b/projects/go-captcha-angular/src/scss/go-captcha.scss
@@ -21,6 +21,10 @@
     --go-captcha-theme-loading-icon-color: #3e7cff;
     --go-captcha-theme-body-bg-color: #34383e;
 
+    --go-captcha-theme-dot-color: #cedffe;
+    --go-captcha-theme-dot-bg-color: #3e7cff;
+    --go-captcha-theme-dot-border-color: #f7f9fb;
+
     --go-captcha-theme-default-color: #3e7cff;
     --go-captcha-theme-default-bg-color: #ecf5ff;
     --go-captcha-theme-default-border-color: #3e7cff;
@@ -42,7 +46,7 @@
 .go-captcha {
     &.gc-wrapper {
         padding: 12px 16px;
-        background-color: var(--go-captcha-theme-bg-color);
+        //background-color: var(--go-captcha-theme-bg-color);
         -webkit-touch-callout: none;
         -webkit-user-select: none;
         -moz-user-select: none;
@@ -62,6 +66,10 @@
         box-shadow: 0 0 20px rgba(100, 100, 100, 0.1);
         -webkit-box-shadow: 0 0 20px rgba(100, 100, 100, 0.1);
         -moz-box-shadow: 0 0 20px rgba(100, 100, 100, 0.1);
+
+        &.gc-wrapper {
+            background-color: var(--go-captcha-theme-bg-color);
+        }
     }
 
     .gc-header {
@@ -114,6 +122,7 @@
         overflow: hidden;
 
         .gc-body-inner{
+            position: relative;
             background: var(--go-captcha-theme-body-bg-color);
         }
     }

Original file line number	Diff line number	Diff line change
`@@ -293,6 +293,7 @@ interface RotateData {`
`293`	`293`	`angle: number;`
`294`	`294`	`image: string;`
`295`	`295`	`thumb: string;`
	`296`	`+ thumbSize: number;`
`296`	`297`	`}`
`297`	`298`
`298`	`299`	`// events = {}`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "go-captcha-angular",`
`3`		`- "version": "1.0.3",`
	`3`	`+ "version": "1.0.4",`
`4`	`4`	`"description": "GoCaptcha for Angular, which implements click mode, slider mode, drag-drop mode and rotation mode.",`
`5`	`5`	`"private": false,`
`6`	`6`	`"email": "[email protected]",`
Original file line number	Diff line number	Diff line change
`@@ -38,7 +38,7 @@ export class ClickComponent {`
`38`	`38`	`}`
`39`	`39`
`40`	`40`	`get hasDisplayImageState() {`
`41`		`- return this.localData.image != '' \|\| this.localData.thumb != ''`
	`41`	`+ return (this.localData.image && this.localData.image.length > 0) \|\| (this.localData.thumb && this.localData.thumb.length > 0)`
`42`	`42`	`}`
`43`	`43`
`44`	`44`	`clickEvent(e: Event\|any){`