Merge pull request #82 in YR/star-web-components from feature-pattern-New to master

* commit '35a7df3d63acea46ca56b6c113ef4a5ac2ff0236':
  TASK: #113902 图形解锁优化

src/components/digicipher/README.md

@@ -14,14 +14,17 @@
 ```
 <star-digicipher></star-digicipher>
 ```
-
-1. `saveMode` 属性代表存储模式，更改密码、确认密码后存储新密码
-
+2. `saveMode` 属性代表存储模式，更改密码、确认密码后存储新密码
 ```
 <star-digicipher saveMode></star-digicipher>
 ```
 
-## 发送事件
+
+
+
+
+
+
 
 解锁成功：`star-digicipher-unlocksuccess` **value:** `this.passwd`<br>
 解锁 5 次失败，跳转已锁定：`star-digicipher-locked` **value:** `false`<br>

src/components/pattern-view/README.md

@@ -23,14 +23,20 @@
 
 ### 默认
 
-```
+```js
 <star-pattern-view></star-pattern-view>
 ```
+### `saveMode` 属性代表存储模式，绘制图案、确认图案后存储新图案密码
+
+```js
+<star-pattern-view saveMode></star-pattern-view>
+```
 
 ### 距离顶部的位置 `topDir` 默认`217.5px`
 
-```
+```js
 <star-pattern-view topDir="300px"></star-pattern-view>
 <star-pattern-view topDir="-100px"></star-pattern-view>
 
 ```
+

src/components/pattern-view/pattern-view.ts

@@ -1,4 +1,4 @@
-import {html, LitElement, css, PropertyValueMap} from 'lit'
+import {html, LitElement, css, CSSResultArray, PropertyValueMap} from 'lit'
 import {customElement, property, query} from 'lit/decorators.js'
 // import {sharedStyles} from './pattern-view-style'
 
@@ -13,6 +13,24 @@ export class StarPatternView extends LitElement {
     canvas {
       margin-top: var(--top-dir);
     }
+    p {
+      position: absolute;
+      font-family: 'OPPOSans';
+      font-style: normal;
+      font-weight: 400;
+      color: #292929;
+      font-family: 'OPPOSans';
+      margin-top: 0;
+      color: #292929;
+      font-size: 20px;
+      height: 26.5px;
+      line-height: 26.5px;
+      width: 150px;
+      left: 50%;
+      top: 31%;
+      transform: translateX(-50%);
+      text-align: center;
+    }
   `
   // public static override get styles(): CSSResultArray {
   //   return [sharedStyles]
@@ -29,6 +47,8 @@ export class StarPatternView extends LitElement {
       this.Draw()
     }
   }
+  @property({type: Boolean}) saveMode = false
+  @property({type: Boolean}) confirm = false
   @property({type: Number}) top = 0
   @property({type: Number}) R = 35
   @property({type: Number}) X = 0
@@ -38,8 +58,11 @@ export class StarPatternView extends LitElement {
   @property({type: Number}) OffsetX = document.body.offsetWidth / 3.5
   @property({type: Number}) OffsetY = document.body.offsetWidth / 3.5
   @property({type: Array}) circleArr: {X: number; Y: number}[] = []
-  @property({type: Array}) pwdArr: number[] = []
-  @property({type: Array}) passwdArr = [0, 1, 2, 5, 4, 3]
+  @property({type: Array}) passwd: number[] = []
+  @property({type: Array}) savewd: number[] = []
+  @property({type: Array}) passwdArr = []
+  @property({type: String}) mode = ''
+  @property({type: String}) changeText = ''
   @property({type: String})
   get topDir() {
     return this._topDir
@@ -52,7 +75,7 @@ export class StarPatternView extends LitElement {
 
   render() {
     return html`
-      <!-- <div style="height:200px;background-color:red"></div> -->
+      <p>${this.changeText}</p>
       <canvas
         id="canvas"
         @touchstart=${this.touchStart}
@@ -75,6 +98,37 @@ export class StarPatternView extends LitElement {
     this.Y = (this.canvasHeight - 2 * this.OffsetY - this.R * 2 * 3) / 2
     this.createCirclePoint(this.X, this.Y)
     this.Draw()
+    this.changeText = this.saveMode ? '请绘制图案' : '绘制图案'
+    // switch (this.mode) {
+    //   case "create":
+    //     this.changeText = '请绘制图案'
+    //   case "verify":
+    //     this.
+    //     break;
+
+    //   default:
+    //     break;
+    // }
+    this.addEventListener('passcode-create-success', this)
+    this.addEventListener('passcode-verify-success', this)
+    this.addEventListener('passcode-verify-error', this)
+  }
+
+  handleEvent(event: CustomEvent) {
+    switch (event.type) {
+      case 'passcode-create-success':
+        this.changeText = '密码设置成功'
+        break
+      case 'passcode-verify-success':
+        this.getRed = false
+        break
+      case 'passcode-verify-error':
+        this.getRed = true
+        break
+
+      default:
+        break
+    }
   }
 
   createCirclePoint(diffX: number, diffY: number) {
@@ -91,10 +145,10 @@ export class StarPatternView extends LitElement {
   }
 
   Draw(touchPoint?: {X: any; Y: any}) {
-    if (this.pwdArr.length > 1) {
+    if (this.passwd.length > 1) {
       this.cxt.beginPath()
-      for (var i = 0; i < this.pwdArr.length; i++) {
-        var pointIndex = this.pwdArr[i]
+      for (var i = 0; i < this.passwd.length; i++) {
+        var pointIndex = this.passwd[i]
         this.cxt.lineTo(
           this.circleArr[pointIndex].X,
           this.circleArr[pointIndex].Y
@@ -106,7 +160,7 @@ export class StarPatternView extends LitElement {
       this.cxt.stroke()
       this.cxt.closePath()
       if (touchPoint != null) {
-        var lastPointIndex = this.pwdArr[this.pwdArr.length - 1]
+        var lastPointIndex = this.passwd[this.passwd.length - 1]
         var lastPoint = this.circleArr[lastPointIndex]
         this.cxt.beginPath()
         this.cxt.moveTo(lastPoint.X, lastPoint.Y)
@@ -130,7 +184,7 @@ export class StarPatternView extends LitElement {
       this.cxt.closePath()
       this.cxt.fill()
       //滑动后小圆的颜色
-      if (this.pwdArr.indexOf(i) >= 0) {
+      if (this.passwd.indexOf(i) >= 0) {
         this.cxt.fillStyle = this.getRed ? '#FF4040' : '#333333'
         this.cxt.beginPath()
         this.cxt.arc(Point.X, Point.Y, this.R - 26, 0, Math.PI * 2, true)
@@ -140,26 +194,61 @@ export class StarPatternView extends LitElement {
     }
   }
 
-  getSelectPwd(touches: any, pwdArr: number[]) {
+  getSelectPwd(touches: any, passwd: number[]) {
     for (var i = 0; i < this.circleArr.length; i++) {
       var currentPoint = this.circleArr[i]
       var xdiff = Math.abs(currentPoint.X - touches.pageX)
       /********  this.top = canvas向下移动的距离 **********/
       var ydiff = Math.abs(currentPoint.Y - touches.pageY + this.top)
       var dir = Math.pow(xdiff * xdiff + ydiff * ydiff, 0.5)
-      if (dir > this.R || pwdArr.indexOf(i) >= 0) continue
-      pwdArr.push(i)
+      if (dir > this.R || passwd.indexOf(i) >= 0) continue
+      passwd.push(i)
       break
     }
   }
-  touchStart(e: TouchEvent) {
+  changePasswd() {
+    this.savewd = this.passwd
+    console.log('请确认密码', this.savewd.toString())
+    this.confirm = true
+    this.changeText = '请确认图案'
+    console.log('###', this.passwd)
+
+    this.dispatchEvent(
+      new CustomEvent('star-pattern-view-settings-change', {
+        detail: {
+          value: this.passwd,
+        },
+        bubbles: true,
+        composed: true,
+      })
+    )
+  }
+  confirmPasswd() {
+    if (this.savewd.toString() == this.passwd.toString()) {
+      console.log('###', this.passwd)
+      this.dispatchEvent(
+        new CustomEvent('star-pattern-view-settings-confirm', {
+          detail: {
+            value: this.passwd,
+          },
+          bubbles: true,
+          composed: true,
+        })
+      )
+    } else {
+      this.changeText = '请重新绘制图案'
+      console.log('###', this.passwd)
+      this.confirm = false
+      this.passwd = []
+    }
+  }
+  touchStart(_e: TouchEvent) {
     this.getRed = false
-    this.getSelectPwd(e.touches[0], this.pwdArr)
   }
   touchMove(e: TouchEvent) {
     e.preventDefault()
     var touches = e.touches[0]
-    this.getSelectPwd(touches, this.pwdArr)
+    this.getSelectPwd(touches, this.passwd)
     // 清除画布,0,0代表从什么位置开始,canvasWidth,canvasHeight代表清除的宽度和高度
     this.cxt = this.canvas.getContext('2d')!
     this.cxt.clearRect(0, 0, this.canvasWidth, this.canvasHeight)
@@ -171,21 +260,29 @@ export class StarPatternView extends LitElement {
   }
   touchEnd(_e: TouchEvent) {
     this.cxt.clearRect(0, 0, this.canvasWidth, this.canvasHeight)
-    this.Draw()
-    // if (this.pwdArr.toString() == this.passwdArr.toString()) {
-    //   console.log('密码正确', this.passwdArr.toString())
-    // } else {
-    //   this.getRed = true
-    //   console.log('密码错误', this.pwdArr.toString())
-    //   this.Draw()
-    // }
-    this.getRed = true
-    this.pwdArr = []
-    this.dispatchEvent(
-      new TouchEvent('end', {
-        composed: true,
-      })
-    )
-    return this.passwdArr
+    //进入存储模式
+    if (this.saveMode) {
+      this.getRed = false
+      if (!this.confirm) {
+        this.changePasswd()
+      } else {
+        this.confirmPasswd()
+      }
+      this.passwd = []
+      this.Draw()
+    } else {
+      console.log('$$$', this.passwd)
+      this.dispatchEvent(
+        new CustomEvent('star-pattern-view-passwd', {
+          detail: {
+            value: this.passwd,
+          },
+          bubbles: true,
+          composed: true,
+        })
+      )
+      this.passwd = []
+      this.Draw()
+    }
   }
 }

src/test/panels/pattern-view/pattern-view.ts

@@ -14,7 +14,7 @@ export class PanelPatternView extends LitElement {
   `
   render() {
     return html`
-      <star-pattern-view></star-pattern-view>
+      <star-pattern-view saveMode></star-pattern-view>
       <!-- <star-pattern-view topDir="100px"></star-pattern-view> -->
     `
   }