chroe: add methods of components and optimization of code

Author: wenlng

README.md

@@ -75,6 +75,8 @@ interface ClickConfig {
   showTheme?: boolean;
   title?: string;
   buttonText?: string;
+  iconSize?: number;
+  dotSize?: number;
 }
 
 // data = {}
@@ -88,7 +90,15 @@ interface ClickEvents {
   click?: (x: number, y: number) => void;
   refresh?: () => void;
   close?: () => void;
-  confirm?: (dots: Array<ClickDot>) => boolean;
+  confirm?: (dots: Array<ClickDot>, reset: ()=>void) => boolean;
+}
+
+// component method
+interface PublicMethods {
+  reset: () => void,
+  clear: () => void,
+  refresh: () => void,
+  close: () => void,
 }
 ```
 
@@ -120,6 +130,8 @@ interface SlideConfig {
   horizontalPadding?: number;
   showTheme?: boolean;
   title?: string;
+  iconSize?: number;
+  scope ?: boolean;
 }
 
 // data = {}
@@ -137,7 +149,15 @@ interface SlideEvents {
   move?: (x: number, y: number) => void;
   refresh?: () => void;
   close?: () => void;
-  confirm?: (point: SlidePoint) => boolean;
+  confirm?: (point: SlidePoint, reset: () => void) => boolean;
+}
+
+// component method
+interface PublicMethods {
+  reset: () => void,
+  clear: () => void,
+  refresh: () => void,
+  close: () => void,
 }
 ```
 
@@ -152,6 +172,8 @@ interface SlideRegionConfig {
   horizontalPadding?: number;
   showTheme?: boolean;
   title?: string;
+  iconSize?: number;
+  scope ?: boolean;
 }
 
 // data = {}
@@ -169,7 +191,15 @@ interface SlideRegionEvents {
   move?: (x: number, y: number) => void;
   refresh?: () => void;
   close?: () => void;
-  confirm?: (point: SlideRegionPoint) => boolean;
+  confirm?: (point: SlideRegionPoint, reset: ()=>void) => boolean;
+}
+
+// component method
+interface PublicMethods {
+  reset: () => void,
+  clear: () => void,
+  refresh: () => void,
+  close: () => void,
 }
 ```
 
@@ -196,6 +226,8 @@ interface RotateConfig {
   horizontalPadding?: number;
   showTheme?: boolean;
   title?: string;
+  iconSize?: number;
+  scope ?: boolean;
 }
 
 // data = {}
@@ -210,7 +242,15 @@ interface RotateEvents {
   rotate?: (angle: number) => void;
   refresh?: () => void;
   close?: () => void;
-  confirm?: (angle: number) => boolean;
+  confirm?: (angle: number, reset: ()=>void) => boolean;
+}
+
+// component method
+interface PublicMethods {
+  reset: () => void,
+  clear: () => void,
+  refresh: () => void,
+  close: () => void,
 }
 ```
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "go-captcha-angular",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "This is the angular package for go-captcha",
   "private": false,
   "email": "[email protected]",

projects/example/src/app/app.component.html

@@ -2,21 +2,29 @@
   <go-captcha-click
       [data]="clickData"
       [events]="clickEvents"
+      [config]="clickConfig"
+      #clickRef
   ></go-captcha-click>
   <br/>
   <go-captcha-slide
       [data]="slideData"
       [events]="slideEvents"
+      [config]="slideConfig"
+      #slideRef
   ></go-captcha-slide>
   <br/>
   <go-captcha-slide-region
       [data]="slideRegionData"
       [events]="slideRegionEvents"
+      [config]="slideRegionConfig"
+      #slideRegionRef
   ></go-captcha-slide-region>
   <br/>
   <go-captcha-rotate
       [data]="rotateData"
       [events]="rotateEvents"
+      [config]="rotateConfig"
+      #rotateRef
   ></go-captcha-rotate>
   <br/>
   <go-captcha-button [clickEvent]="handleEvent"></go-captcha-button>

projects/example/src/app/app.component.ts

@@ -38,3 +38,11 @@ export function checkTargetFather(that: any, e: any) {
 
   return parent !== that
 }
+
+export function mergeTo(src: any, dest: any) {
+  for (const ccKey in src) {
+    if (!dest.hasOwnProperty(ccKey)) {
+      dest[ccKey] = src[ccKey]
+    }
+  }
+}

projects/go-captcha-angular/src/lib/helper/helper.ts

@@ -1,4 +1,11 @@
 
+export interface ClickRef {
+    reset: () => void,
+    clear: () => void,
+    refresh: () => void,
+    close: () => void,
+}
+
 export interface ClickConfig {
     width?: number;
     height?: number;
@@ -9,6 +16,8 @@ export interface ClickConfig {
     showTheme?: boolean;
     title?: string;
     buttonText?: string;
+    iconSize?: number;
+    dotSize?: number;
 }
 
 export const defaultClickConfig = ():ClickConfig => ({
@@ -20,7 +29,9 @@ export const defaultClickConfig = ():ClickConfig => ({
     horizontalPadding: 12,
     showTheme: true,
     title: "请在下图依次点击",
-    buttonText: "确认"
+    buttonText: "确认",
+    iconSize: 22,
+    dotSize: 24,
 })
 
 export interface ClickData {

projects/go-captcha-angular/src/lib/modules/click/click-instance.ts

@@ -1,47 +1,78 @@
 <div
   class="go-captcha gc-wrapper"
-  [class]="{'gc-theme': config.showTheme}"
+  [class]="{'gc-theme': localConfig.showTheme}"
   [style]="{
-    width:  (config.width || 0) + ( config.horizontalPadding * 2) + (config.showTheme ? 2 : 0) + 'px',
-    paddingLeft: config.horizontalPadding + 'px',
-    paddingRight: config.horizontalPadding + 'px',
-    paddingTop: config.verticalPadding + 'px',
-    paddingBottom: config.verticalPadding + 'px',
+    width:  (localConfig.width || 0) + ( localConfig.horizontalPadding * 2) + (localConfig.showTheme ? 2 : 0) + 'px',
+    paddingLeft: localConfig.horizontalPadding + 'px',
+    paddingRight: localConfig.horizontalPadding + 'px',
+    paddingTop: localConfig.verticalPadding + 'px',
+    paddingBottom: localConfig.verticalPadding + 'px',
+    display: hasDisplayWrapperState ? 'block' : 'none'
   }"
   >
   <div class="gc-header">
-    <span>{{ config.title }}</span>
-    <img [class]="{'gc-hide': data.thumb == ''}"
-         [style]="{width: config.thumbWidth + 'px', height: config.thumbHeight + 'px'}"
-         [attr.src]="data.thumb"
-         alt="..."/>
+    <span>{{ localConfig.title }}</span>
+    <img
+      [class]="{'gc-hide': localData.thumb == ''}"
+      [style]="{
+        width: localConfig.thumbWidth + 'px',
+        height: localConfig.thumbHeight + 'px'
+      }"
+      [attr.src]="localData.thumb"
+      alt=""
+    />
   </div>
-  <div class="gc-body" [style]="{width: config.width + 'px', height: config.height + 'px'}">
+  <div
+    class="gc-body"
+    [style]="{
+      width: localConfig.width + 'px',
+      height: localConfig.height + 'px',
+    }"
+  >
     <div class="gc-loading">
       <loading-icon></loading-icon>
     </div>
     <img
       class="gc-picture"
-      [class]="{'gc-hide': data.image == ''}"
-      [style]="{width: config.width + 'px', height: config.height + 'px'}"
-      [attr.src]="data.image"
-      alt="..."
+      [class]="{'gc-hide': localData.image == ''}"
+      [style]="{
+        width: localConfig.width + 'px',
+        height: localConfig.height + 'px',
+        display: hasDisplayImageState ? 'block' : 'none'
+      }"
+      [attr.src]="localData.image"
+      alt=""
       (click)="clickEvent($event)"
     />
     <div class="gc-dots">
-      <div class="gc-dot" *ngFor="let dot of dots;" [style]="{
+      <div
+        class="gc-dot"
+        *ngFor="let dot of dots;"
+        [style]="{
           top: (dot.y - 11) + 'px',
           left: (dot.x - 11) + 'px',
-        }">{{dot.index}}</div>
+        }"
+      >{{dot.index}}</div>
     </div>
   </div>
   <div class="gc-footer">
     <div class="gc-icon-block gc-icon-block2">
-      <close-icon [width]="22" [height]="22" (click)="closeEvent($event)"></close-icon>
-      <refresh-icon [width]="22" [height]="22" (click)="refreshEvent($event)"></refresh-icon>
+      <close-icon
+        [width]="localConfig.iconSize"
+        [height]="localConfig.iconSize"
+        (click)="closeEvent($event)"
+      ></close-icon>
+      <refresh-icon
+        [width]="localConfig.iconSize"
+        [height]="localConfig.iconSize"
+        (click)="refreshEvent($event)"
+      ></refresh-icon>
     </div>
     <div class="gc-button-block">
-      <button (click)="confirmEvent($event)">{{ config.buttonText }}</button>
+      <button
+        [class]="{'disabled': !hasDisplayImageState}"
+        (click)="confirmEvent($event)"
+      >{{ localConfig.buttonText }}</button>
     </div>
   </div>
 </div>

projects/go-captcha-angular/src/lib/modules/click/click.component.html

@@ -12,11 +12,11 @@
   .gc-dot {
     position: absolute;
     z-index: 2;
-    width: 20px;
-    height: 20px;
+    width: 22px;
+    height: 22px;
     color: #cedffe;
     background: #3e7cff;
-    border: 2px solid #f7f9fb;
+    border: 3px solid #f7f9fb;
     display:-webkit-box;
     display:-webkit-flex;
     display:-ms-flexbox;