@sandlada/mdc/build/components/wave/circular-wave.js

@sandlada/mdc is an open source component library that follows the Material Design 3 design specifications.

import{_ as t}from"../../tslib.es6-CmLYFWVC.js";import{a as e,x as i}from"../../lit-element-Ho-VPzO1.js";import{t as s}from"../../custom-element-Dz3n6kSt.js";import{n as a}from"../../property-Ck1wIidx.js";import{e as r}from"../../query-DifSdHBD.js";import{BaseWave as o}from"./base-wave.js";let h=class extends o{constructor(){super(...arguments),this.radius=80,this.waveCount=20,this.speed=.05,this.phase=0,this._animationFrameId=0}connectedCallback(){super.connectedCallback(),this._animate(),this._resizeObserver=new ResizeObserver(()=>this.requestUpdate()),this._resizeObserver.observe(this)}disconnectedCallback(){super.disconnectedCallback(),this._animationFrameId&&cancelAnimationFrame(this._animationFrameId),this._resizeObserver&&this._resizeObserver.disconnect()}updated(t){super.updated(t),this._drawWave()}_drawWave(){if(!this._canvas)return;if(!this._ctx){const t=this._canvas.getContext("2d");if(!t)return;this._ctx=t}const t=window.devicePixelRatio||1,e=this.getBoundingClientRect();this._canvas.width=e.width*t,this._canvas.height=e.height*t,this._ctx.scale(t,t);const{width:i,height:s}=e;if(this._ctx.clearRect(0,0,i,s),this._ctx.lineWidth=this.height,this._ctx.strokeStyle=getComputedStyle(this).getPropertyValue("color")||"purple",this._ctx.lineCap="round",this._ctx.lineJoin="round",0===this.waveAmplitude||0===this.waveCount)return void this._drawPerfectCircle(i/2,s/2);this._ctx.beginPath();const a=i/2,r=s/2;for(let t=0;t<=360;t++){const e=t/360*2*Math.PI,i=e*this.waveCount+this.phase,s=this.radius+this.waveAmplitude*Math.sin(i),o=a+s*Math.cos(e),h=r+s*Math.sin(e);0===t?this._ctx.moveTo(o,h):this._ctx.lineTo(o,h)}this._ctx.closePath(),this._ctx.stroke()}_drawPerfectCircle(t,e){this._ctx.beginPath(),this._ctx.arc(t,e,this.radius,0,2*Math.PI),this._ctx.stroke()}_animate(){0!==this.speed&&this.isConnected?(this.phase+=this.speed,this.requestUpdate(),this._animationFrameId=requestAnimationFrame(()=>this._animate())):this._animationFrameId=0}static{this.styles=e`:host{display:inline-block;width:250px;aspect-ratio:1/1;color:var(--mdc-circular-wave-color,var(--mdc-wave-color,var(--md-sys-color-primary,var(--md-sys-palette-primary-40,#6750a4))))}canvas{display:block;width:100%;height:100%}`}render(){return i`<canvas></canvas>`}};t([a({type:Number})],h.prototype,"radius",void 0),t([a({type:Number,attribute:"wave-count"})],h.prototype,"waveCount",void 0),t([a({type:Number})],h.prototype,"speed",void 0),t([a({type:Number})],h.prototype,"phase",void 0),t([r("canvas")],h.prototype,"_canvas",void 0),h=t([s("mdc-circular-wave")],h);export{h as CircularWave};