From a5e3253454c3dcb509a7fcbbf4129d9e94f4aa18 Mon Sep 17 00:00:00 2001 From: wangchangqi Date: Tue, 27 Sep 2022 16:42:02 +0800 Subject: [PATCH] TASK: #105604-add indicator-page-deformation component. --- src/components/digicipher/digicipher.ts | 2 +- src/components/gauss_canvas/README.md | 57 ++++--- .../indicator/indicator-page-deformation.ts | 134 +++++++++++++++++ src/test/panels/indicators/README.md | 13 ++ .../indicators/deformation-indicator.ts | 140 ++++++++++++++++++ .../{indicators.ts => point-indicator.ts} | 6 +- src/test/panels/root.ts | 29 ++-- src/test/panels/switch/switch.ts | 2 +- 8 files changed, 340 insertions(+), 43 deletions(-) create mode 100644 src/components/indicator/indicator-page-deformation.ts create mode 100644 src/test/panels/indicators/README.md create mode 100644 src/test/panels/indicators/deformation-indicator.ts rename src/test/panels/indicators/{indicators.ts => point-indicator.ts} (96%) diff --git a/src/components/digicipher/digicipher.ts b/src/components/digicipher/digicipher.ts index 312dfa9..3401736 100644 --- a/src/components/digicipher/digicipher.ts +++ b/src/components/digicipher/digicipher.ts @@ -71,7 +71,7 @@ export class StarLockNumber extends LitElement { ` } timer() { - this.time = setInterval(() => { + this.time = window.setInterval(() => { if (--this.second <= 0) { clearInterval(this.time) this.second = 120 diff --git a/src/components/gauss_canvas/README.md b/src/components/gauss_canvas/README.md index c425bff..178bf16 100644 --- a/src/components/gauss_canvas/README.md +++ b/src/components/gauss_canvas/README.md @@ -8,9 +8,9 @@ ### 属性 -- `src`: 要高斯模糊的图片URL +- `src`: 要高斯模糊的图片 URL - `sigma`: 高斯模糊程度系数，除了第一次传值时不会有模糊渐变，之后传值时图片模糊会呈渐变，如若不需要动画则调用方法 `showImmediately` 并传值 -- `threshold`: 当 `sigma` 大于该值时，组件采用模糊算法，否则采用降低分辨率的方法模糊图片，默认值为1 +- `threshold`: 当 `sigma` 大于该值时，组件采用模糊算法，否则采用降低分辨率的方法模糊图片，默认值为 1 - `during`: 模糊渐变的最长时间，单位为 `ms`，默认值为 500 - `bezier`: 模糊渐变的贝塞尔系数，接受参数为一个有四个数字元素的数组，默认值为 `[0.19, 1, 0.22, 1]` @@ -18,45 +18,44 @@ 注意，请不要使用跨域图片资源，否则无法转化为 `ImageData` 进行模糊计算 - ```html ``` ```js -import "@star-web-element/gauss" -const canvas = document.querySelector('gauss-canvas'); +import '@star-web-element/gauss' +const canvas = document.querySelector('gauss-canvas') canvas.addEventListener('click', () => { - // 会有模糊渐变 - canvas.sigma ^= 10 + // 会有模糊渐变 + canvas.sigma ^= 10 }) -canvas.addEventListener('mousedown', handleEvent); -canvas.addEventListener('mousemove', handleEvent); -canvas.addEventListener('mouseup', handleEvent); +canvas.addEventListener('mousedown', handleEvent) +canvas.addEventListener('mousemove', handleEvent) +canvas.addEventListener('mouseup', handleEvent) let mouseData = { - start: 0, - moveDistance: 0, + start: 0, + moveDistance: 0, } function handleEvent(evt) { - switch (evt.type) { - case 'mousedown': - mouseData.start = evt.clientY; - break; - case ' mousemove': - if (mouseData.start) { - mouseData.moveDistance = evt.clientY - mouseData.start; - const conHeight = canvas.parentElement.offsetHeight; - const targetSigma = (mouseData.moveDistance / conHeight) * 10; - // 不会有模糊渐变 - canvas.showImmediately(targetSigma); - } - break; - case 'mouseup': - mouseData.start = mouseData.moveDistance = 0; - break; - } + switch (evt.type) { + case 'mousedown': + mouseData.start = evt.clientY + break + case ' mousemove': + if (mouseData.start) { + mouseData.moveDistance = evt.clientY - mouseData.start + const conHeight = canvas.parentElement.offsetHeight + const targetSigma = (mouseData.moveDistance / conHeight) * 10 + // 不会有模糊渐变 + canvas.showImmediately(targetSigma) + } + break + case 'mouseup': + mouseData.start = mouseData.moveDistance = 0 + break + } } ``` diff --git a/src/components/indicator/indicator-page-deformation.ts b/src/components/indicator/indicator-page-deformation.ts new file mode 100644 index 0000000..defd6ff --- /dev/null +++ b/src/components/indicator/indicator-page-deformation.ts @@ -0,0 +1,134 @@ +import {html, css, LitElement, PropertyValueMap, svg} from 'lit' +import {customElement, property, state} from 'lit/decorators.js' + +@customElement('indicator-page-deformation') +export class IndicatorPageDeformation extends LitElement { + @property({type: Number, reflect: true}) total = 1 + @property({type: Number, reflect: true}) index = 1 + @property({type: Boolean, reflect: true}) edit = false + @property({type: Boolean, reflect: true}) column = false + + #firstRender = true + + @state() width = 22 + (this.total - 1) * (4 * 2 + 8) + @state() viewBox = `0 0 ${this.width} ${4 * 2}` + @state() rectBeginX = (this.index - 1) * (4 * 2 + 8) + + protected shouldUpdate(_changedProperties: PropertyValueMap): boolean { + let isShouldUpdate = true + + if (this.total < 1) { + console.warn( + 'indicator total setted a error num: ', + this.total, + ' will be resetted 1' + ) + this.total = 1 + isShouldUpdate = false + } else if (this.total > 15) { + console.warn( + 'indicator total setted a error num: ', + this.total, + ' will be resetted 15' + ) + this.total = 15 + isShouldUpdate = false + } + + if (this.index < 1) { + console.warn( + 'indicator index setted a error num: ', + this.index, + ' will be resetted 1' + ) + this.index = 1 + isShouldUpdate = false + } else if (this.index > this.total) { + console.warn( + 'indicator index setted a error num: ', + this.index, + ' will be resetted', + this.total + ) + this.index = this.total + isShouldUpdate = false + } + + if (this.#firstRender === true) { + this.#firstRender = false + return true + } + return isShouldUpdate + } + + /** + * 标准模板： + * + * 半径为4的球---间距8---长度为22倒角为4的圆角矩形---间距为8---半径为4的球 + */ + render() { + const all = [] + let hasRectFlag = false + + for (let i = 1; i <= this.total; i++) { + if (i == this.index) { + all.push( + svg`` + ) + hasRectFlag = true + } else { + let cx = 0 + if (all.length == 0) cx = 4 + else if (hasRectFlag) cx = 30 + (all.length - 1) * 16 + 4 + else cx = all.length * 16 + 4 + all.push(svg``) + } + } + + return html` + + ${all} + + ` + } + + static styles = css` + :host { + display: flex; + width: 100%; + margin: auto; + max-height: 50px; + } + :host([column]) { + display: inline-flex; + width: auto; + } + svg { + flex: 1; + } + svg rect, + :host(.light) svg rect { + fill: #ffffff; + fill-opacity: 0.85; + } + svg circle, + :host(.light) svg circle { + fill: #ffffff; + fill-opacity: 0.4; + } + :host(.dark) svg rect { + fill: #1b1b1b; + fill-opacity: 0.7; + } + :host(.dark) svg circle { + fill: #1b1b1b; + fill-opacity: 0.3; + } + ` +} + +declare global { + interface HTMLElementTagNameMap { + 'indicator-page-deformation': IndicatorPageDeformation + } +} diff --git a/src/test/panels/indicators/README.md b/src/test/panels/indicators/README.md new file mode 100644 index 0000000..bee572b --- /dev/null +++ b/src/test/panels/indicators/README.md @@ -0,0 +1,13 @@ +# 指示器 + +## 页面指示器 + +### 页面圆点指示器 + +基本类型 + +### 页面横条指示器 + +圆点+横条，由 svg 组成。 + +TODO: 添加可形变动画。 \ No newline at end of file diff --git a/src/test/panels/indicators/deformation-indicator.ts b/src/test/panels/indicators/deformation-indicator.ts new file mode 100644 index 0000000..464315a --- /dev/null +++ b/src/test/panels/indicators/deformation-indicator.ts @@ -0,0 +1,140 @@ +import {html, css, LitElement, CSSResultArray} from 'lit' +import {customElement, state} from 'lit/decorators.js' +import {sharedStyles} from '../shared-styles' +import '../../../components/indicator/indicator-page-deformation' + +@customElement('panel-deformation-indicator') +export class PanelDeformationIndicator extends LitElement { + @state() total = 1 + @state() index = 1 + @state() edit = false + + updated() { + this.total = this.total < 1 ? 1 : this.total > 15 ? 15 : this.total + this.index = + this.index < 1 ? 1 : this.index > this.total ? this.total : this.index + } + + handleEvent(evt: Event) { + switch (evt.type) { + case 'click': + evt.preventDefault() // iOS上不禁止按钮默认行为，将会双击按钮强制放缩屏幕 + switch ((evt.target as HTMLButtonElement).dataset.action) { + case 'total++': + this.total++ + break + case 'total--': + this.total-- + break + case 'index++': + this.index++ + break + case 'index--': + this.index-- + break + case 'toggle-edit': + this.edit = !this.edit + break + } + } + } + + render() { + return html` +

基本展示

+ + + + + + + + + + +

切换状态

+
+
+ + + + + +
+
+ + + ` + } + + public static override get styles(): CSSResultArray { + return [ + sharedStyles, + css` + h3 { + text-align: center; + } + div { + display: flex; + margin: auto; + flex-wrap: wrap; + } + button { + margin: auto; + } + indicator-page-deformation { + height: 10px; + margin: 20px 0; + } + `, + ] + } +} + +declare global { + interface HTMLElementTagNameMap { + 'panel-deformation-indicator': PanelDeformationIndicator + } +} diff --git a/src/test/panels/indicators/indicators.ts b/src/test/panels/indicators/point-indicator.ts similarity index 96% rename from src/test/panels/indicators/indicators.ts rename to src/test/panels/indicators/point-indicator.ts index ec98a39..56ff1a7 100644 --- a/src/test/panels/indicators/indicators.ts +++ b/src/test/panels/indicators/point-indicator.ts @@ -3,8 +3,8 @@ import {customElement, state} from 'lit/decorators.js' import {sharedStyles} from '../shared-styles' import '../../../components/indicator/indicator-page-point' -@customElement('panel-indicators') -export class PanelIndicators extends LitElement { +@customElement('panel-point-indicator') +export class PanelPointIndicator extends LitElement { @state() total = 1 @state() index = 1 @state() edit = false @@ -123,6 +123,6 @@ export class PanelIndicators extends LitElement { declare global { interface HTMLElementTagNameMap { - 'panel-indicators': PanelIndicators + 'panel-point-indicator': PanelPointIndicator } } diff --git a/src/test/panels/root.ts b/src/test/panels/root.ts index 57fbe06..9dd15fe 100644 --- a/src/test/panels/root.ts +++ b/src/test/panels/root.ts @@ -11,8 +11,9 @@ import './icon/icon' import './general/general' import './gesture/gesture' import './card/card' -import './indicators/indicators' +import './indicators/deformation-indicator' import './indicators/home-indicator' +import './indicators/point-indicator' import './blur/use-blur' import './gauss_canvas/gauss-blur' import './button/button' @@ -243,14 +244,6 @@ export class PanelRoot extends LitElement { href="#confirm" >
- -
+ + +
+ + +