Merge branch 'master' of ssh://172.20.184.160:7999/yr/star-web-components

src/components/digicipher/digicipher.ts

@@ -122,6 +122,20 @@ export class StarLockNumber extends LitElement {
         }
         break
       case 'passcode-verify-error':
+        this.errors = event.detail.value;
+        //当密码失败三次后
+        if (this.errors == 3) {
+          console.log('进入已锁定页面')
+          this.dispatchEvent(
+            new CustomEvent('star-digicipher-passcode-error-third', {
+              detail: {
+                value: true,
+              },
+              bubbles: true,
+              composed: true,
+            })
+          )
+        }
         // 抖动反馈
         for (let i = 0; i < 10; i++) {
           this.buttons[i].style.setProperty('animation', 'errtips .5s')
@@ -164,6 +178,7 @@ export class StarLockNumber extends LitElement {
         this.clicks += 1
         this.guess += (e.target as HTMLElement).dataset.num
       } else if (this.clicks == 5) {
+        // console.log('guess', this.guess)
         this.changeBgColor('#F4F4F4', this.clicks, 1)
         if (this.mode == 'create') {
           if (!this.confirm) {
@@ -194,8 +209,6 @@ export class StarLockNumber extends LitElement {
   }
   touchEnd(e: TouchEvent) {
     if ((e.target as Element).tagName === 'BUTTON') {
-      console.log('this.guess', this.guess)
-
       this.removeNumberBgColor()
     }
   }
@@ -221,6 +234,7 @@ export class StarLockNumber extends LitElement {
   //发送密码
   dispatchPasswd() {
     this.passwd = this.guess
+    // console.log('passwd', this.passwd)
     this.guess = ''
     this.clicks = 0
     this.dispatchEvent(
@@ -236,6 +250,7 @@ export class StarLockNumber extends LitElement {
   //更改密码
   changePasswd() {
     this.savewd = this.guess
+    // console.log('更改密码', this.savewd)
     this.clicks = 0
     for (let i = 0; i < 6; i++) {
       this.changeBgColor('#F4F4F4', i, 0.4)
@@ -257,6 +272,7 @@ export class StarLockNumber extends LitElement {
       this.guess = ''
       this.clicks = 0
       this.changeText = '新建密码'
+      // console.log('确认密码', this.passwd)
       this.dispatchEvent(
         new CustomEvent('star-digicipher-passcode-create', {
           detail: {

src/components/grid-container/container.ts

@@ -1882,6 +1882,7 @@ export class GaiaContainer extends StarBaseElement {
     pagination: number,
     gridId: number
   ) {
+    if (pagination >= this.pages.length) return false
     let resolve!: Function
     let promise = new Promise((res) => {
       resolve = res
@@ -1890,6 +1891,9 @@ export class GaiaContainer extends StarBaseElement {
     for (let row = 0; row < child.row; row++) {
       for (let column = 0; column < child.column; column++) {
         const targetId = gridId + column + row * this.column
+        if (!this.childCoordinate[pagination]) {
+          this.childCoordinate[pagination] = {}
+        }
         if (
           this.childCoordinate[pagination][targetId] != undefined &&
           this.childCoordinate[pagination][targetId] != child

src/components/grid-container/gaia-container-child.ts

@@ -249,8 +249,8 @@ export default class GaiaContainerChild {
     const offsetLeft = Math.abs(
       this.master.offsetLeft - this.pagination * this.manager.pageHeight
     )
-    const rowStart = Math.floor(offsetTop / this.manager.gridHeight) + 1
-    const columnStart = Math.floor(offsetLeft / this.manager.gridWidth) + 1
+    const rowStart = Math.round(offsetTop / this.manager.gridHeight) + 1
+    const columnStart = Math.round(offsetLeft / this.manager.gridWidth) + 1
 
     return [rowStart, columnStart]
   }
@@ -268,7 +268,7 @@ export default class GaiaContainerChild {
       grid = Math.min(...grid)
     }
 
-    const rowStart = Math.floor(grid / this.manager.column) + 1
+    const rowStart = Math.round(grid / this.manager.column) + 1
     const columnStart = (grid % this.manager.column) + 1
     return [rowStart, columnStart]
   }
@@ -326,6 +326,8 @@ export default class GaiaContainerChild {
       const container = document.createElement('div')
       container.style.gridRowStart = `span ${this.row}`
       container.style.gridColumnStart = `span ${this.column}`
+      // 为了保证影子页面进行越界检测时, 能先放置大组件再放置小组件
+      container.style.order = `${24 - this.column * this.row}`
       this._shadowContainer = container
     }
     return this._shadowContainer

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

@@ -1,6 +1,6 @@
 import {html, LitElement, CSSResultArray, PropertyValueMap} from 'lit'
 import {customElement, property, query} from 'lit/decorators.js'
-import {sharedStyles} from './pattern-view-style'
+import {sharedStyles} from './pattern-view-style.js'
 
 @customElement('star-pattern-view')
 export class StarPatternView extends LitElement {
@@ -26,6 +26,7 @@ export class StarPatternView extends LitElement {
   @property({type: Boolean}) saveMode = false
   @property({type: Boolean}) lessfour = false
   @property({type: Boolean}) confirm = false
+  @property({type: Number}) errors = 0
   @property({type: Number}) top = 0
   @property({type: Number}) R = (35 / 600) * document.body.offsetWidth
   @property({type: Number}) X = 0
@@ -117,18 +118,45 @@ export class StarPatternView extends LitElement {
         this.changeText = '密码设置成功'
         break
       case 'passcode-verify-success':
+        console.log('图案正确')
         this.getRed = false
+        this.changeText = '绘制图案'
         break
       case 'passcode-verify-error':
+        this.passwd = event.detail.passwd
         this.getRed = true
         this.changeText = '绘制图案错误'
+        //当密码失败三次后
+        this.errors = event.detail.value
+        if (this.errors == 3) {
+          console.log('进入已锁定页面')
+          this.initialState()
+          this.dispatchEvent(
+            new CustomEvent('star-pattern-view-passwd-error-third', {
+              detail: {
+                value: true,
+              },
+              bubbles: true,
+              composed: true,
+            })
+          )
+        }
         break
 
       default:
         break
     }
   }
+  /* 擦除线条，恢复初始状态 */
+  initialState() {
+    this.changeText = '绘制图案'
+    this.cxt.clearRect(0, 0, this.canvasWidth, this.canvasHeight)
+    this.passwd = []
+    this.getRed = false
+    this.Draw()
+  }
   touchStart(e: TouchEvent) {
+    // this.cxt.clearRect(0, 0, this.canvasWidth, this.canvasHeight)
     this.lessfourinfo = ''
     this.passwd = []
     this.getRed = false
@@ -156,10 +184,8 @@ export class StarPatternView extends LitElement {
     })
   }
   touchEnd(_e: TouchEvent) {
-    console.log('###', this.passwd.length)
-
     if (this.saveMode && this.passwd.length < 4) {
-      this.cxt.clearRect(0, 0, this.canvasWidth, this.canvasHeight)
+      // this.cxt.clearRect(0, 0, this.canvasWidth, this.canvasHeight)
       this.getRed = true
       this.lessfourinfo = '至少连接四个点'
     } else {
@@ -186,10 +212,13 @@ export class StarPatternView extends LitElement {
         )
         this.passwd = []
         this.Draw()
+        
       }
     }
   }
   touchStartCancel() {
+    /* 点击取消，擦除绘制图案 */
+    this.initialState()
     this.dispatchEvent(
       new CustomEvent('star-pattern-view-cancel', {
         detail: {
@@ -282,7 +311,7 @@ export class StarPatternView extends LitElement {
       var dir = Math.pow(xdiff * xdiff + ydiff * ydiff, 0.5)
       if (dir > this.R || passwd.indexOf(i) >= 0) continue
       passwd.push(i)
-      console.log(this.passwd)
+      // console.log(this.passwd)
       break
     }
   }
@@ -291,7 +320,6 @@ export class StarPatternView extends LitElement {
     console.log('请确认密码', this.savewd.toString())
     this.confirm = true
     this.changeText = '请确认图案'
-    console.log('###', this.passwd)
 
     this.dispatchEvent(
       new CustomEvent('star-pattern-view-settings-change', {
@@ -305,7 +333,6 @@ export class StarPatternView extends LitElement {
   }
   confirmPasswd() {
     if (this.savewd.toString() == this.passwd.toString()) {
-      console.log('###', this.passwd)
       this.dispatchEvent(
         new CustomEvent('star-pattern-view-settings-confirm', {
           detail: {
@@ -317,7 +344,6 @@ export class StarPatternView extends LitElement {
       )
     } else {
       this.changeText = '请重新绘制图案'
-      console.log('###', this.passwd)
       this.confirm = false
       this.passwd = []
     }