@vanillawc/wc-arrow/dist/wc-arrow-node.min.js

A web component for creating custom arrow HTML elements.

export class Customarrow extends HTMLElement{constructor(){super();this.t=.5;this.s=.5;this.i=0;this.h=0;this.o=0;this.u=false;this.p=1;this.g=this.s}static get observedAttributes(){return["l","w","tail-l","tail-w","peak-l","rot","tail-cont","peak-coll","unclosed","scale"]}disconnectedCallback(){this.removeChild(this.querySelector("svg"));this.F.disconnect()}attributeChangedCallback(t,s,i){if(t==="w"){this.v=parseFloat(i)}else if(t==="l"){this.L=parseFloat(i)}else if(t==="tail-w"){this.t=parseFloat(i)/100}else if(t==="tail-l"){this.s=parseFloat(i)/100;this.g=this.s}else if(t==="rot"){let t=parseFloat(i);if(!isNaN(t)){this.i=t<0?t+360:t}else{this.i=0}}else if(t==="tail-cont"){this.h=parseFloat(i)/100}else if(t==="peak-coll"){this.o=parseFloat(i)/100}else if(t==="unclosed"){if(i==="false"){this.u=false}else{this.u=true}}else if(t==="peak-l"){this.k=parseFloat(i)}else if(t==="scale"){this.p=parseFloat(i)}if(!isNaN(this.k)){this.s=1-this.k/this.L}else{this.s=this.g}if(!this.m){return}this.removeChild(this.querySelector("svg"));this.C()}C(){this.appendChild(this.M());this.m=this.querySelector("#arrow");this.N()}connectedCallback(){this.C();const t={attributes:true,childList:false,subtree:false};const s=function(t,s,i){for(let s of t){if(s.type==="attributes"){if(i.strokeWidth!==parseFloat(window.getComputedStyle(i).strokeWidth)){i.removeChild(i.querySelector("svg"));i.C()}}}};this.F=new MutationObserver((t,i)=>s(t,i,this));this.F.observe(this,t)}N(){this.m.style.transform="rotate("+this.i+"deg)";this.m.style.position="absolute";let t=window.getComputedStyle(this).display;if(t!=="flex"&&t!=="inline-flex"&&t!=="none"){this.style.display="flex"}this.style.justifyContent="center";this.style.alignItems="center"}M(){this._=parseFloat(window.getComputedStyle(this).strokeWidth);let t=this._*.5;let s=1-t/(this.v/2);let i=1-this._*this.s/this.L;let e=t+this.v/2*(1-this.t)*s;let l=this.v-this.v/2*(1-this.t)*s-t;let h=l-e;let a=e+.5*h*this.h;let r=l-.5*h*this.h;let o=this.L*i-this.L*(1-this.s);let n=Math.PI/2-Math.atan2(this.t*this._+this.v/2,this.L-o+this.t*this._);let c=Math.tan(n)*a;let f=t;let u=e;let w=o+t+this.o*(c-this._);let d=a;let p=o+t;let b=t;let g=this.L-t;let F=this.v/2;let v=o+t;let L=this.v-t;let k=o+t+this.o*(c-this._);let m=r;let x=t;let C=l;let M="http://www.w3.org/2000/svg";let N=document.createElementNS(M,"svg");N.setAttributeNS(null,"id","arrow");N.setAttributeNS(null,"width",this.L*this.p);N.setAttributeNS(null,"height",this.v*this.p);N.setAttributeNS(null,"viewBox",`0 0 ${this.L} ${this.v}`);let _=document.createElementNS(M,"path");let A="M"+f+" "+u+" L"+w+" "+d+" L"+p+" "+b+" L"+g+" "+F+" L"+v+" "+L+" L"+k+" "+m+" L"+x+" "+C+(this.u?"":" Z");_.setAttributeNS(null,"d",A);N.appendChild(_);return N}}customElements.define("wc-arrow",Customarrow);