fix rotate captcha

Author: wenlng

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 = {}

README_zh.md

@@ -293,6 +293,7 @@ interface RotateData {
   angle: number;
   image: string;
   thumb: string;
+  thumbSize: number;
 }
 
 // events = {}

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": "[email protected]",

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 >>>>>>>")
     },

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 = {}

projects/go-captcha-angular/README_zh.md

@@ -293,6 +293,7 @@ interface RotateData {
   angle: number;
   image: string;
   thumb: string;
+  thumbSize: number;
 }
 
 // events = {}

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": [

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;

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){

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
 })
 
 

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 == ''}"

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%;

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() {

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()

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()

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);
         }
     }