rainbow-line - npm Package Compare versions

Comparing version 0.2.1 to 0.3.0

bundle.js

 /*!
 @file rainbow-line - A custom element that displays a cut line animated with rainbow colors
 @author Wolfger Schramm <[e-mail]>
-@version 0.2.1+vanilla.20240512
+@version 0.3.0+vanilla.20240911
 
@@ -21,3 +21,3 @@ Copyright 2024 Wolfger Schramm
 */
-var o=class c extends HTMLElement{static InitialHTML=`
+var h=class c extends HTMLElement{static InitialHTML=`
     <style>
@@ -44,3 +44,3 @@ :host {
     </div>
-  `;#e=0;#t=0;#i=0;constructor(e=c.InitialHTML){super(),this.shadow=this.attachShadow({mode:"open"}),this.shadow.innerHTML=e,this.worker=void 0}queryCanvasElement(){return this.shadow.querySelector("canvas")}createWorker(){throw new Error("createWorker() must be implemented by subclass")}getContextAttributes(){return this.hasAttribute("no-alpha")?{alpha:!1}:{alpha:!0}}#r(){let e=this.canvas.getBoundingClientRect();return this.#e=e.width,this.#t=e.height,{width:e.width,height:e.height}}#n(e){let t=this.canvas.getBoundingClientRect();(this.#e!==t.width||this.#t!==t.height)&&(this.#e=t.width,this.#t=t.height,e(t.width,t.height))}#a=()=>{this.#n((e,t)=>{this.worker.postMessage({resize:{width:e,height:t}})}),this.#s()};#s(){this.#i=requestAnimationFrame(this.#a)}#l(){cancelAnimationFrame(this.#i)}#h(){this.canvas=this.queryCanvasElement();let e=this.canvas.transferControlToOffscreen();this.worker=this.createWorker(),this.worker.postMessage({canvas:e,contextAttributes:this.getContextAttributes(),...this.getInitialWorkerAttributes()},[e])}getInitialWorkerAttributes(){return{}}asNumberValue(e,t){if(this.hasAttribute(e)){let i=parseFloat(this.getAttribute(e));return isNaN(i)?t:i}return t}connectedCallback(){this.worker||this.#h(),this.worker.postMessage({isConnected:!0,resize:this.#r()}),this.#s()}disconnectedCallback(){this.worker.postMessage({isConnected:!1}),this.#l()}};var u=s=>s==="left"?1:-1,r=class extends o{static observedAttributes=["color-slice-width","slice-cycle-time","cycle-direction"];constructor(){super(`
+  `;#e=0;#t=0;#i=0;constructor(e=c.InitialHTML){super(),this.shadow=this.attachShadow({mode:"open"}),this.shadow.innerHTML=e,this.worker=void 0}queryCanvasElement(){return this.shadow.querySelector("canvas")}createWorker(){throw new Error("createWorker() must be implemented by subclass")}getContextAttributes(){return this.hasAttribute("no-alpha")?{alpha:!1}:{alpha:!0}}#r(){let e=this.canvas.getBoundingClientRect();return this.#e=e.width,this.#t=e.height,{width:e.width,height:e.height}}#n(e){let t=this.canvas.getBoundingClientRect();(this.#e!==t.width||this.#t!==t.height)&&(this.#e=t.width,this.#t=t.height,e(t.width,t.height))}#a=()=>{this.#n((e,t)=>{this.worker.postMessage({resize:{width:e,height:t}})}),this.#s()};#s(){this.#i=requestAnimationFrame(this.#a)}#l(){cancelAnimationFrame(this.#i)}#o(){this.canvas=this.queryCanvasElement();let e=this.canvas.transferControlToOffscreen();this.worker=this.createWorker(),this.worker.postMessage({canvas:e,contextAttributes:this.getContextAttributes(),...this.getInitialWorkerAttributes()},[e])}getInitialWorkerAttributes(){return{}}asNumberValue(e,t){if(this.hasAttribute(e)){let s=parseFloat(this.getAttribute(e));return isNaN(s)?t:s}return t}connectedCallback(){this.worker||this.#o(),this.worker.postMessage({isConnected:!0,resize:this.#r()}),this.#s()}disconnectedCallback(){this.worker.postMessage({isConnected:!1}),this.#l()}};var u=i=>i==="left"?1:-1,d=i=>typeof i=="string"&&i.trim()||void 0,r=class extends h{static observedAttributes=["color-slice-width","slice-cycle-time","cycle-direction","cycle-colors"];constructor(){super(`
       <style>
@@ -67,3 +67,3 @@ :host {
         <canvas></canvas>
-      </div>`)}createWorker(){return new Worker(new URL("rainbow-line.worker.js",import.meta.url),{type:"module"})}getContextAttributes(){return{alpha:!1}}getInitialWorkerAttributes(){return{"color-slice-width":this.asNumberValue("color-slice-width",10),"slice-cycle-time":this.asNumberValue("slice-cycle-time",7),"cycle-direction":u(this.getAttribute("cycle-direction")||"right")}}attributeChangedCallback(e,t,i){if(!this.worker)return;let n=e==="cycle-direction"?u(i):parseFloat(i);typeof n=="number"&&(isNaN(n)||this.worker.postMessage({[e]:n}))}};function a(s){let e=new Blob([s],{type:"text/javascript"}),t=URL.createObjectURL(e),i=new Worker(t);return URL.revokeObjectURL(t),i}function l(){return a(`var Ne=Object.defineProperty;var $e=(e,t,i)=>t in e?Ne(e,t,{enumerable:!0,configurable:!0,writable:!0,value:i}):e[t]=i;var f=(e,t,i)=>($e(e,typeof t!="symbol"?t+"":t,i),i),J=(e,t,i)=>{if(!t.has(e))throw TypeError("Cannot "+i)};var a=(e,t,i)=>(J(e,t,"read from private field"),i?i.call(e):t.get(e)),u=(e,t,i)=>{if(t.has(e))throw TypeError("Cannot add the same private member more than once");t instanceof WeakSet?t.add(e):t.set(e,i)},d=(e,t,i,r)=>(J(e,t,"write to private field"),r?r.call(e,i):t.set(e,i),i);var ye=(e,t,i,r)=>({set _(n){d(e,t,n,i)},get _(){return a(e,t,r)}}),D=(e,t,i)=>(J(e,t,"access private method"),i);var qe=Object.defineProperty,Be=(e,t,i)=>t in e?qe(e,t,{enumerable:!0,configurable:!0,writable:!0,value:i}):e[t]=i,m=(e,t,i)=>(Be(e,typeof t!="symbol"?t+"":t,i),i),He=(e,t,i)=>{if(!t.has(e))throw TypeError("Cannot "+i)},Ge=(e,t,i)=>(He(e,t,"read from private field"),i?i.call(e):t.get(e)),je=(e,t,i)=>{if(t.has(e))throw TypeError("Cannot add the same private member more than once");t instanceof WeakSet?t.add(e):t.set(e,i)},Z={Max:Number.POSITIVE_INFINITY,AAA:1e9,BB:1e6,C:1e3,Default:0,Low:-1e4,Min:Number.NEGATIVE_INFINITY},g="*",ge=1,ie=2,re=4,be=(Symbol.eventize||(Symbol.eventize=Symbol("eventize")),Symbol.eventize),Ue="[eventize]",q=e=>e===g,Ce=e=>{switch(typeof e){case"string":case"symbol":return!0;default:return!1}},Se=typeof console!="undefined",Ke=Se?console[console.warn?"warn":"log"].bind(console,Ue):()=>{},Ye=(e,t,i)=>(Object.defineProperty(e,t,{value:i,configurable:!0}),e),Je=0,xe=class{constructor(){m(this,"events",new Map),m(this,"eventNames",new Set)}static publish(e){e.sort((t,i)=>t.order-i.order).forEach(t=>t.emit())}add(e){Array.isArray(e)?e.forEach(t=>this.eventNames.add(t)):this.eventNames.add(e)}remove(e){Array.isArray(e)?e.forEach(t=>this.eventNames.delete(t)):this.eventNames.delete(e),this.clear(e)}clear(e){Array.isArray(e)?e.forEach(t=>this.events.delete(t)):this.events.delete(e)}retain(e,t){this.eventNames.has(e)&&this.events.set(e,{args:t,order:Je++})}isKnown(e){return this.eventNames.has(e)}emit(e,t,i=[]){if(q(e))this.eventNames.forEach(r=>this.emit(r,t,i));else if(this.events.has(e)){let{order:r,args:n}=this.events.get(e);i.push({order:r,emit:()=>t.apply(e,n)})}return i}},V=(e,t,i,r)=>{if(typeof t=="function"){let n=t.apply(e,i);n!=null&&(r==null||r(n))}},Xe=(e,t,i,r)=>V(t,t.emit,[e].concat(i),r),Ze=e=>{switch(typeof e){case"function":return ge;case"string":case"symbol":return ie;case"object":return re}},Ve=0,et=()=>++Ve,Le=class{constructor(e,t,i,r=null){m(this,"id"),m(this,"eventName"),m(this,"isCatchEmAll"),m(this,"priority"),m(this,"listener"),m(this,"listenerObject"),m(this,"listenerType"),m(this,"callAfterApply"),m(this,"isRemoved"),m(this,"refCount"),this.id=et(),this.eventName=e,this.isCatchEmAll=q(e),this.listener=i,this.listenerObject=r,this.priority=t,this.listenerType=Ze(i),this.callAfterApply=void 0,this.isRemoved=!1,this.refCount=1}isEqual(e,t=null){if(e===this)return!0;let i=typeof e;return i==="number"&&e===this.id?!0:t===null&&(i==="string"||i==="symbol")?e===g||e===this.eventName:this.listener===e&&this.listenerObject===t}apply(e,t,i){if(this.isRemoved)return;let{listener:r,listenerObject:n}=this;switch(this.listenerType){case ge:V(n,r,t,i),this.callAfterApply&&this.callAfterApply();break;case ie:V(n,n[r],t,i),this.callAfterApply&&this.callAfterApply();break;case re:{let h=r[e];if(this.isCatchEmAll||this.eventName===e){if(typeof h=="function"){let s=h.apply(r,t);s!=null&&(i==null||i(s))}else Xe(e,r,t,i);this.callAfterApply&&this.callAfterApply()}break}}}},tt=(e,t)=>e.priority!==t.priority?t.priority-e.priority:e.id-t.id,me=e=>e==null?void 0:e.slice(0),pe=(e,t)=>{let i=e.indexOf(t);i>-1&&e.splice(i,1)},it=e=>e===re||e===ie,ee=(e,t,i)=>{let r=e.findIndex(n=>n.isEqual(t,i));r>-1&&(e[r].isRemoved=!0,e.splice(r,1))},N=(e,t,i)=>{let r=[];for(let n of e)(t==null&&n.listenerObject===i||n.eventName===t&&n.listener===i)&&r.push(n);for(let n of r)ee(e,n,void 0)},X=e=>{e&&(e.forEach(t=>{t.isRemoved=!0}),e.length=0)},rt=(e,t)=>e.listenerType===t.listenerType?e.priority===t.priority&&e.eventName===t.eventName&&e.listenerObject===t.listenerObject&&e.listener===t.listener:!1,st=(e,t)=>{if(it(e.listenerType))return t.find(i=>rt(e,i))},nt=(e,t)=>{let i=st(e,t);return i?(i.refCount+=1,i):(t.push(e),t.sort(tt),e)},te,ot=class{constructor(){m(this,"namedListeners"),m(this,"catchEmAllListeners"),je(this,te,e=>{let t=this.namedListeners.get(e);return t||(t=[],this.namedListeners.set(e,t)),t}),this.namedListeners=new Map,this.catchEmAllListeners=[]}add(e){return nt(e,e.isCatchEmAll?this.catchEmAllListeners:Ge(this,te).call(this,e.eventName))}remove(e,t,i=!1){t==null&&Array.isArray(e)?e.forEach(r=>this.remove(r,null,i)):e==null||t==null&&q(e)?this.removeAllListeners():t==null&&Ce(e)?X(this.namedListeners.get(e)):e instanceof Le?e.isRemoved||(e.refCount-=1,e.refCount<1&&(e.isRemoved=!0,this.namedListeners.forEach(r=>pe(r,e)),pe(this.catchEmAllListeners,e))):i?q(e)?N(this.catchEmAllListeners,g,e):this.namedListeners.forEach(r=>N(r,e,t)):(this.namedListeners.forEach(r=>{ee(r,e,t),N(r,void 0,e)}),ee(this.catchEmAllListeners,e,t),N(this.catchEmAllListeners,void 0,e))}removeAllListeners(){this.namedListeners.forEach(e=>X(e)),this.namedListeners.clear(),X(this.catchEmAllListeners)}forEach(e,t){let i=me(this.catchEmAllListeners),r=me(this.namedListeners.get(e));if(e===g||!r||r.length===0)i.forEach(t);else if(i.length===0)r.forEach(t);else{let n=r.length,h=i.length,s=0,o=0;for(;s<n||o<h;){if(s<n){let l=r[s];if(o>=h||l.priority>=i[o].priority){t(l),++s;continue}}o<h&&(t(i[o]),++o)}}}getSubscriptionCount(){let e=this.catchEmAllListeners.length;for(let t of this.namedListeners.values())e+=t.length;return e}};te=new WeakMap;var we=e=>!!(e&&e[be]),ct=(e,t,i,r,n,h,s)=>{let o=e.add(new Le(i,r,n,h));return t.emit(i,o,s),o},at=(e,t,i,r)=>{let n=i.length,h=typeof i[0],s,o,l,c;if(n>=2&&n<=3&&h==="number"?(s=g,[o,l,c]=i):n>=3&&n<=4&&typeof i[1]=="number"?[s,o,l,c]=i:(o=Z.Default,h==="string"||h==="symbol"||Array.isArray(i[0])?[s,l,c]=i:(s=g,[l,c]=i)),!l&&Se)throw Ke("called with insufficient arguments!",i),"subscribeTo() called with insufficient arguments!";let p=A=>We=>ct(e,t,We,A,l,c,r);return Array.isArray(s)?s.map(A=>Array.isArray(A)?p(A[1])(A[0]):p(o)(A)):p(o)(s)},ve=(e,t,i)=>{let r=[],n=at(e,t,i,r);return xe.publish(r),n},Ee=e=>t=>{t.callAfterApply=()=>{e==null||e()}},Ae=(e,t)=>Object.assign(()=>e.off(t),Array.isArray(t)?{listeners:t}:{listener:t});function $(e){if(we(e))return e;let t=new ot,i=new xe;Ye(e,be,{keeper:i,store:t});let r=s=>{let o=ve(t,i,s),l=Ae(h,o),c=!1,p=()=>{c||(l(),c=!0)};return Array.isArray(o)?o.forEach(Ee(p)):Ee(p)(o),p},n=(s,o,l)=>{Array.isArray(s)?s.forEach(c=>{t.forEach(c,p=>p.apply(c,o,l)),i.retain(c,o)}):s!==g&&(t.forEach(s,c=>{c.apply(s,o,l)}),i.retain(s,o))},h=Object.assign(e,{on(...s){return Ae(h,ve(t,i,s))},once(...s){return r(s)},onceAsync(s){return new Promise(o=>{r([s,o])})},off(s,o){let l=typeof s,c=o!=null&&(l==="string"||l==="symbol");t.remove(s,o,c),Array.isArray(s)?i.remove(s.filter(p=>typeof p=="string")):Ce(s)&&i.remove(s)},emit(s,...o){n(s,o)},emitAsync(s,...o){let l=[];return n(s,o,c=>{l.push(c)}),l=l.map(c=>Array.isArray(c)?Promise.all(c):Promise.resolve(c)),l.length>0?Promise.all(l):Promise.resolve()},retain(s){i.add(s)},retainClear(s){i.clear(s)}});return h}var F=(()=>{let e=(t={})=>$(t);return e.inject=$,e.extend=t=>$(Object.create(t)),e.create=t=>{let i=$({});return i.on(g,Z.Default,t),i},e.is=we,e.Priority=Z,e})();var O,P,z=class{constructor(t="id",i=1){u(this,O,void 0);u(this,P,void 0);d(this,O,t),d(this,P,i)}make(){return Symbol(\`\${a(this,O)}\${ye(this,P)._++}\`)}};O=new WeakMap,P=new WeakMap;var lt=0;function Fe(){return lt>0}var B=Symbol("signal"),se=Symbol("destroySignal"),ne=Symbol("createEffect"),ze=Symbol("destroyEffect");var R=F({}),H=F({}),b=F({});var M,C=class{constructor(){u(this,M,new Set)}batch(t){a(this,M).add(t)}run(){b.emit(Array.from(a(this,M)))}};M=new WeakMap,f(C,"current");var Re=()=>C.current;function oe(e){let t=C.current;t?t=void 0:t=C.current=new C;try{e()}finally{t&&(C.current=void 0,t.run())}}var ce=[],G=()=>ce.at(-1),Ie=(e,t)=>{ce.push(e);try{return t()}finally{ce.pop()}};var ft=e=>e!=null&&typeof e.then=="function",S,x,L,w,I,E=class E{constructor(t,i){f(this,"id");f(this,"callback");u(this,S,void 0);u(this,x,new Set);u(this,L,new Set);f(this,"parentEffect");f(this,"childEffects",[]);f(this,"curChildEffectSlot",0);f(this,"autorun",!0);f(this,"shouldRun",!0);u(this,w,void 0);u(this,I,!1);var r;this.callback=t,this.autorun=(r=i==null?void 0:i.autorun)!=null?r:!0,d(this,w,i==null?void 0:i.dependencies),this.id=E.idGen.make(),b.on(this.id,"recall",this),++E.count}hasStaticDeps(){return a(this,w)!=null&&a(this,w).length>0}saveSignalsFromDeps(){for(let t of a(this,w))this.whenSignalIsRead(ae(t).id)}static createEffect(t,i,r){let n=Array.isArray(i)?i:void 0,h=n?r!=null?r:{dependencies:n}:i;h&&n&&(h.dependencies=n);let s,o=G();return o!=null?(s=o.getCurrentChildEffect(),s==null&&(s=new E(t,h),o.attachChildEffect(s),b.emit(ne,s)),o.curChildEffectSlot++):(s=new E(t,h),b.emit(ne,s)),s.hasStaticDeps()?s.saveSignalsFromDeps():s.autorun&&s.run(),[s.run.bind(s),s.destroy.bind(s)]}getCurrentChildEffect(){return this.childEffects[this.curChildEffectSlot]}attachChildEffect(t){this.childEffects.push(t),this.parentEffect=this}run(){if(a(this,I)||!this.shouldRun)return;let t=Re();t?t.batch(this.id):(this.runCleanupCallback(),this.curChildEffectSlot=0,this.shouldRun=!1,this.hasStaticDeps()?d(this,S,this.callback()):d(this,S,Ie(this,this.callback)))}recall(){this.shouldRun=!0,this.autorun&&this.run()}whenSignalIsRead(t){a(this,x).has(t)||(a(this,x).add(t),R.on(t,"recall",this),H.once(t,se,this))}[se](t){!a(this,L).has(t)&&a(this,x).has(t)&&(a(this,L).add(t),R.off(t,this),a(this,L).size===a(this,x).size&&this.destroy())}runCleanupCallback(){if(a(this,S)!=null){let t=a(this,S);d(this,S,void 0),ft(t)?Promise.resolve(t).then(i=>{typeof i=="function"&&i()}):t()}}destroy(){a(this,I)||(b.emit(ze,this),this.runCleanupCallback(),R.off(this),b.off(this),H.off(this),d(this,I,!0),a(this,x).clear(),a(this,L).clear(),this.childEffects.forEach(t=>{t.destroy()}),this.childEffects.length=0,--E.count)}};S=new WeakMap,x=new WeakMap,L=new WeakMap,w=new WeakMap,I=new WeakMap,f(E,"idGen",new z("ef")),f(E,"count",0);var j=E;var T=(...e)=>j.createEffect(...e);var ht=new z("si");function Te(e){var t;Fe()||(t=G())==null||t.whenSignalIsRead(e)}function De(e,t,i){R.emit(e,t,i)}var ut=e=>typeof e=="function"&&B in e,dt=e=>{let t=i=>{var r;return i?T(()=>(e.destroyed||Te(e.id),i(e.value)),[t]):e.destroyed||((r=e.beforeReadFn)==null||r.call(e),Te(e.id)),e.value};return Object.defineProperty(t,B,{value:e}),t},v,U=class U{constructor(t,i){f(this,"id");f(this,"lazy");f(this,"compareFn");f(this,"beforeReadFn");f(this,"muted",!1);f(this,"destroyed",!1);u(this,v,void 0);f(this,"valueFn");f(this,"reader");f(this,"writer",(t,i)=>{var o,l,c;let r=(o=i==null?void 0:i.lazy)!=null?o:!1,n=(l=i==null?void 0:i.compareFn)!=null?l:this.compareFn,h=n!=null?n:(p,A)=>p===A;if((r!==this.lazy||r&&t!==this.valueFn||!r&&!h(t,a(this,v)))&&(r?(d(this,v,void 0),this.valueFn=t,this.lazy=!0):(d(this,v,t),this.valueFn=void 0,this.lazy=!1),!this.muted&&!this.destroyed)){De(this.id,a(this,v));return}((c=i==null?void 0:i.touch)!=null?c:!1)&&De(this.id,a(this,v),{touch:!0})});this.id=ht.make(),++U.instanceCount,this.lazy=t,this.lazy?(this.value=void 0,this.valueFn=i):(this.value=i,this.valueFn=void 0),this.reader=dt(this)}get value(){return this.lazy&&(d(this,v,this.valueFn()),this.valueFn=void 0,this.lazy=!1),a(this,v)}set value(t){d(this,v,t)}};v=new WeakMap,f(U,"instanceCount",0);var le=U,ae=e=>e==null?void 0:e[B];function _(e=void 0,t){var r;let i;if(ut(e))i=ae(e);else{let n=(r=t==null?void 0:t.lazy)!=null?r:!1;i=new le(n,e),i.beforeReadFn=t==null?void 0:t.beforeReadFn,i.compareFn=t==null?void 0:t.compareFn}return[i.reader,i.writer]}var y,k,Q,W,fe,K,Pe,Y,Me,Oe=(y=class{constructor(){u(this,W);u(this,K);u(this,Y);u(this,k,0);u(this,Q,void 0);F(this);let[t,i]=_(null),[r,n]=_(!1),[h,s]=_(0),[o,l]=_(0);Object.defineProperties(this,{canvas:{get:()=>t(),set:c=>{i(c)},enumerable:!0},isConnected:{get:()=>r(),set:c=>{n(c)},enumerable:!0},canvasWidth:{get:()=>h(),set:c=>{s(c)},enumerable:!0},canvasHeight:{get:()=>o(),set:c=>{l(c)},enumerable:!0}}),this.now=0,this.retain([y.Canvas,y.Init,y.Resize]),T(()=>{this.canvas&&this.emit(y.Canvas,this,a(this,Q))},[t]),T(()=>{this.ready&&this.emit(y.Init,this)},[t,r]),T(()=>{this.emit(y.Resize,this)},[h,o])}get ready(){return this.canvas&&this.isConnected}parseMessageData(t){t&&(t.canvas&&(d(this,Q,t.contextAttributes||void 0),this.canvas=t.canvas),t.isConnected&&this.isConnected!==t.isConnected&&(this.isConnected=t.isConnected,this.isConnected?D(this,W,fe).call(this):D(this,K,Pe).call(this)),t.resize&&this.canvas&&(this.canvas.width=Math.floor(t.resize.width),this.canvas.height=Math.floor(t.resize.height)))}},k=new WeakMap,Q=new WeakMap,W=new WeakSet,fe=function(){d(this,k,requestAnimationFrame(t=>D(this,Y,Me).call(this,t)))},K=new WeakSet,Pe=function(){cancelAnimationFrame(a(this,k))},Y=new WeakSet,Me=function(t){this.ready&&(oe(()=>{this.canvasWidth=this.canvas.width,this.canvasHeight=this.canvas.height}),this.now=t/1e3,this.canvasWidth>0&&this.canvasHeight>0&&this.emit(y.Frame,this)),D(this,W,fe).call(this)},f(y,"Canvas","onCanvas"),f(y,"Init","onInit"),f(y,"Resize","onResize"),f(y,"Frame","onFrame"),y);var _e=new Oe,ue=10,de=7,ke=-1,he=null;_e.on({onCanvas({canvas:e},t){he=e.getContext("2d",t)},onFrame({now:e,canvasWidth:t,canvasHeight:i}){let r=0;for(;r<t;){let n=e%de*ke*360/de;he.fillStyle=\`hsl(\${r/t*360+n}, 100%, 50%)\`,he.fillRect(r,0,ue,i),r+=ue}}});function Qe(e){_e.parseMessageData(e),"color-slice-width"in e&&(ue=e["color-slice-width"]),"slice-cycle-time"in e&&(de=e["slice-cycle-time"]),"cycle-direction"in e&&(ke=e["cycle-direction"])}self.addEventListener("message",e=>{Qe(e.data)});
+      </div>`)}createWorker(){return new Worker(new URL("rainbow-line.worker.js",import.meta.url),{type:"module"})}getContextAttributes(){return{alpha:!1}}getInitialWorkerAttributes(){return{"color-slice-width":this.asNumberValue("color-slice-width",10),"slice-cycle-time":this.asNumberValue("slice-cycle-time",7),"cycle-direction":u(this.getAttribute("cycle-direction")||"right"),"cycle-colors":this.hasAttribute("cycle-colors")?d(this.getAttribute("cycle-colors")):void 0,"cycle-colors-repeat":this.asNumberValue("cycle-colors-repeat",1)}}attributeChangedCallback(e,t,s){if(!this.worker)return;if(e==="cycle-colors"){this.worker.postMessage({"cycle-colors":d(s)});return}let n=e==="cycle-direction"?u(s):parseFloat(s);typeof n=="number"&&(isNaN(n)||this.worker.postMessage({[e]:n}))}};function a(i){let e=new Blob([i],{type:"text/javascript"}),t=URL.createObjectURL(e),s=new Worker(t);return URL.revokeObjectURL(t),s}function l(){return a(`var Be=Object.defineProperty;var Ee=e=>{throw TypeError(e)};var He=(e,t,i)=>t in e?Be(e,t,{enumerable:!0,configurable:!0,writable:!0,value:i}):e[t]=i;var h=(e,t,i)=>He(e,typeof t!="symbol"?t+"":t,i),ie=(e,t,i)=>t.has(e)||Ee("Cannot "+i);var a=(e,t,i)=>(ie(e,t,"read from private field"),i?i.call(e):t.get(e)),d=(e,t,i)=>t.has(e)?Ee("Cannot add the same private member more than once"):t instanceof WeakSet?t.add(e):t.set(e,i),u=(e,t,i,r)=>(ie(e,t,"write to private field"),r?r.call(e,i):t.set(e,i),i),M=(e,t,i)=>(ie(e,t,"access private method"),i);var ge=(e,t,i,r)=>({set _(n){u(e,t,n,i)},get _(){return a(e,t,r)}});var Ue=Object.defineProperty,je=(e,t,i)=>t in e?Ue(e,t,{enumerable:!0,configurable:!0,writable:!0,value:i}):e[t]=i,m=(e,t,i)=>(je(e,typeof t!="symbol"?t+"":t,i),i),Ke=(e,t,i)=>{if(!t.has(e))throw TypeError("Cannot "+i)},Ye=(e,t,i)=>(Ke(e,t,"read from private field"),i?i.call(e):t.get(e)),Je=(e,t,i)=>{if(t.has(e))throw TypeError("Cannot add the same private member more than once");t instanceof WeakSet?t.add(e):t.set(e,i)},se={Max:Number.POSITIVE_INFINITY,AAA:1e9,BB:1e6,C:1e3,Default:0,Low:-1e4,Min:Number.NEGATIVE_INFINITY},b="*",Le=1,le=2,ae=4,we=(Symbol.eventize||(Symbol.eventize=Symbol("eventize")),Symbol.eventize),Xe="[eventize]",H=e=>e===b,Fe=e=>{switch(typeof e){case"string":case"symbol":return!0;default:return!1}},ze=typeof console!="undefined",Ze=ze?console[console.warn?"warn":"log"].bind(console,Xe):()=>{},Ve=(e,t,i)=>(Object.defineProperty(e,t,{value:i,configurable:!0}),e),et=0,Re=class{constructor(){m(this,"events",new Map),m(this,"eventNames",new Set)}static publish(e){e.sort((t,i)=>t.order-i.order).forEach(t=>t.emit())}add(e){Array.isArray(e)?e.forEach(t=>this.eventNames.add(t)):this.eventNames.add(e)}remove(e){Array.isArray(e)?e.forEach(t=>this.eventNames.delete(t)):this.eventNames.delete(e),this.clear(e)}clear(e){Array.isArray(e)?e.forEach(t=>this.events.delete(t)):this.events.delete(e)}retain(e,t){this.eventNames.has(e)&&this.events.set(e,{args:t,order:et++})}isKnown(e){return this.eventNames.has(e)}emit(e,t,i=[]){if(H(e))this.eventNames.forEach(r=>this.emit(r,t,i));else if(this.events.has(e)){let{order:r,args:n}=this.events.get(e);i.push({order:r,emit:()=>t.apply(e,n)})}return i}},ne=(e,t,i,r)=>{if(typeof t=="function"){let n=t.apply(e,i);n!=null&&(r==null||r(n))}},tt=(e,t,i,r)=>ne(t,t.emit,[e].concat(i),r),it=e=>{switch(typeof e){case"function":return Le;case"string":case"symbol":return le;case"object":return ae}},rt=0,st=()=>++rt,Ie=class{constructor(e,t,i,r=null){m(this,"id"),m(this,"eventName"),m(this,"isCatchEmAll"),m(this,"priority"),m(this,"listener"),m(this,"listenerObject"),m(this,"listenerType"),m(this,"callAfterApply"),m(this,"isRemoved"),m(this,"refCount"),this.id=st(),this.eventName=e,this.isCatchEmAll=H(e),this.listener=i,this.listenerObject=r,this.priority=t,this.listenerType=it(i),this.callAfterApply=void 0,this.isRemoved=!1,this.refCount=1}isEqual(e,t=null){if(e===this)return!0;let i=typeof e;return i==="number"&&e===this.id?!0:t===null&&(i==="string"||i==="symbol")?e===b||e===this.eventName:this.listener===e&&this.listenerObject===t}apply(e,t,i){if(this.isRemoved)return;let{listener:r,listenerObject:n}=this;switch(this.listenerType){case Le:ne(n,r,t,i),this.callAfterApply&&this.callAfterApply();break;case le:ne(n,n[r],t,i),this.callAfterApply&&this.callAfterApply();break;case ae:{let f=r[e];if(this.isCatchEmAll||this.eventName===e){if(typeof f=="function"){let s=f.apply(r,t);s!=null&&(i==null||i(s))}else tt(e,r,t,i);this.callAfterApply&&this.callAfterApply()}break}}}},nt=(e,t)=>e.priority!==t.priority?t.priority-e.priority:e.id-t.id,Ae=e=>e==null?void 0:e.slice(0),Ce=(e,t)=>{let i=e.indexOf(t);i>-1&&e.splice(i,1)},ot=e=>e===ae||e===le,oe=(e,t,i)=>{let r=e.findIndex(n=>n.isEqual(t,i));r>-1&&(e[r].isRemoved=!0,e.splice(r,1))},G=(e,t,i)=>{let r=[];for(let n of e)(t==null&&n.listenerObject===i||n.eventName===t&&n.listener===i)&&r.push(n);for(let n of r)oe(e,n,void 0)},re=e=>{e&&(e.forEach(t=>{t.isRemoved=!0}),e.length=0)},ct=(e,t)=>e.listenerType===t.listenerType?e.priority===t.priority&&e.eventName===t.eventName&&e.listenerObject===t.listenerObject&&e.listener===t.listener:!1,lt=(e,t)=>{if(ot(e.listenerType))return t.find(i=>ct(e,i))},at=(e,t)=>{let i=lt(e,t);return i?(i.refCount+=1,i):(t.push(e),t.sort(nt),e)},ce,ft=class{constructor(){m(this,"namedListeners"),m(this,"catchEmAllListeners"),Je(this,ce,e=>{let t=this.namedListeners.get(e);return t||(t=[],this.namedListeners.set(e,t)),t}),this.namedListeners=new Map,this.catchEmAllListeners=[]}add(e){return at(e,e.isCatchEmAll?this.catchEmAllListeners:Ye(this,ce).call(this,e.eventName))}remove(e,t,i=!1){t==null&&Array.isArray(e)?e.forEach(r=>this.remove(r,null,i)):e==null||t==null&&H(e)?this.removeAllListeners():t==null&&Fe(e)?re(this.namedListeners.get(e)):e instanceof Ie?e.isRemoved||(e.refCount-=1,e.refCount<1&&(e.isRemoved=!0,this.namedListeners.forEach(r=>Ce(r,e)),Ce(this.catchEmAllListeners,e))):i?H(e)?G(this.catchEmAllListeners,b,e):this.namedListeners.forEach(r=>G(r,e,t)):(this.namedListeners.forEach(r=>{oe(r,e,t),G(r,void 0,e)}),oe(this.catchEmAllListeners,e,t),G(this.catchEmAllListeners,void 0,e))}removeAllListeners(){this.namedListeners.forEach(e=>re(e)),this.namedListeners.clear(),re(this.catchEmAllListeners)}forEach(e,t){let i=Ae(this.catchEmAllListeners),r=Ae(this.namedListeners.get(e));if(e===b||!r||r.length===0)i.forEach(t);else if(i.length===0)r.forEach(t);else{let n=r.length,f=i.length,s=0,o=0;for(;s<n||o<f;){if(s<n){let l=r[s];if(o>=f||l.priority>=i[o].priority){t(l),++s;continue}}o<f&&(t(i[o]),++o)}}}getSubscriptionCount(){let e=this.catchEmAllListeners.length;for(let t of this.namedListeners.values())e+=t.length;return e}};ce=new WeakMap;var Te=e=>!!(e&&e[we]),ht=(e,t,i,r,n,f,s)=>{let o=e.add(new Ie(i,r,n,f));return t.emit(i,o,s),o},ut=(e,t,i,r)=>{let n=i.length,f=typeof i[0],s,o,l,c;if(n>=2&&n<=3&&f==="number"?(s=b,[o,l,c]=i):n>=3&&n<=4&&typeof i[1]=="number"?[s,o,l,c]=i:(o=se.Default,f==="string"||f==="symbol"||Array.isArray(i[0])?[s,l,c]=i:(s=b,[l,c]=i)),!l&&ze)throw Ze("called with insufficient arguments!",i),"subscribeTo() called with insufficient arguments!";let p=C=>Ge=>ht(e,t,Ge,C,l,c,r);return Array.isArray(s)?s.map(C=>Array.isArray(C)?p(C[1])(C[0]):p(o)(C)):p(o)(s)},be=(e,t,i)=>{let r=[],n=ut(e,t,i,r);return Re.publish(r),n},Se=e=>t=>{t.callAfterApply=()=>{e==null||e()}},xe=(e,t)=>Object.assign(()=>e.off(t),Array.isArray(t)?{listeners:t}:{listener:t});function B(e){if(Te(e))return e;let t=new ft,i=new Re;Ve(e,we,{keeper:i,store:t});let r=s=>{let o=be(t,i,s),l=xe(f,o),c=!1,p=()=>{c||(l(),c=!0)};return Array.isArray(o)?o.forEach(Se(p)):Se(p)(o),p},n=(s,o,l)=>{Array.isArray(s)?s.forEach(c=>{t.forEach(c,p=>p.apply(c,o,l)),i.retain(c,o)}):s!==b&&(t.forEach(s,c=>{c.apply(s,o,l)}),i.retain(s,o))},f=Object.assign(e,{on(...s){return xe(f,be(t,i,s))},once(...s){return r(s)},onceAsync(s){return new Promise(o=>{r([s,o])})},off(s,o){let l=typeof s,c=o!=null&&(l==="string"||l==="symbol");t.remove(s,o,c),Array.isArray(s)?i.remove(s.filter(p=>typeof p=="string")):Fe(s)&&i.remove(s)},emit(s,...o){n(s,o)},emitAsync(s,...o){let l=[];return n(s,o,c=>{l.push(c)}),l=l.map(c=>Array.isArray(c)?Promise.all(c):Promise.resolve(c)),l.length>0?Promise.all(l):Promise.resolve()},retain(s){i.add(s)},retainClear(s){i.clear(s)}});return f}var R=(()=>{let e=(t={})=>B(t);return e.inject=B,e.extend=t=>B(Object.create(t)),e.create=t=>{let i=B({});return i.on(b,se.Default,t),i},e.is=Te,e.Priority=se,e})();var P,_,I=class{constructor(t="id",i=1){d(this,P);d(this,_);u(this,P,t),u(this,_,i)}make(){return Symbol(\`\${a(this,P)}\${ge(this,_)._++}\`)}};P=new WeakMap,_=new WeakMap;var dt=0;function De(){return dt>0}var U=Symbol("signal"),fe=Symbol("destroySignal"),he=Symbol("createEffect"),Oe=Symbol("destroyEffect");var T=R({}),j=R({}),S=R({});var $,x=class{constructor(){d(this,$,new Set)}batch(t){a(this,$).add(t)}run(){S.emit(Array.from(a(this,$)))}};$=new WeakMap,h(x,"current");var Me=()=>x.current;function ue(e){let t=x.current;t?t=void 0:t=x.current=new x;try{e()}finally{t&&(x.current=void 0,t.run())}}var de=[],K=()=>de.at(-1),Pe=(e,t)=>{de.push(e);try{return t()}finally{de.pop()}};var yt=e=>e!=null&&typeof e.then=="function",L,w,F,z,D,g=class g{constructor(t,i){h(this,"id");h(this,"callback");d(this,L);d(this,w,new Set);d(this,F,new Set);h(this,"parentEffect");h(this,"childEffects",[]);h(this,"curChildEffectSlot",0);h(this,"autorun",!0);h(this,"shouldRun",!0);d(this,z);d(this,D,!1);var r;this.callback=t,this.autorun=(r=i==null?void 0:i.autorun)!=null?r:!0,u(this,z,i==null?void 0:i.dependencies),this.id=g.idGen.make(),S.on(this.id,"recall",this),++g.count}hasStaticDeps(){return a(this,z)!=null&&a(this,z).length>0}saveSignalsFromDeps(){for(let t of a(this,z))this.whenSignalIsRead(ye(t).id)}static createEffect(t,i,r){let n=Array.isArray(i)?i:void 0,f=n?r!=null?r:{dependencies:n}:i;f&&n&&(f.dependencies=n);let s,o=K();return o!=null?(s=o.getCurrentChildEffect(),s==null&&(s=new g(t,f),o.attachChildEffect(s),S.emit(he,s)),o.curChildEffectSlot++):(s=new g(t,f),S.emit(he,s)),s.hasStaticDeps()?s.saveSignalsFromDeps():s.autorun&&s.run(),[s.run.bind(s),s.destroy.bind(s)]}getCurrentChildEffect(){return this.childEffects[this.curChildEffectSlot]}attachChildEffect(t){this.childEffects.push(t),this.parentEffect=this}run(){if(a(this,D)||!this.shouldRun)return;let t=Me();t?t.batch(this.id):(this.runCleanupCallback(),this.curChildEffectSlot=0,this.shouldRun=!1,this.hasStaticDeps()?u(this,L,this.callback()):u(this,L,Pe(this,this.callback)))}recall(){this.shouldRun=!0,this.autorun&&this.run()}whenSignalIsRead(t){a(this,w).has(t)||(a(this,w).add(t),T.on(t,"recall",this),j.once(t,fe,this))}[fe](t){!a(this,F).has(t)&&a(this,w).has(t)&&(a(this,F).add(t),T.off(t,this),a(this,F).size===a(this,w).size&&this.destroy())}runCleanupCallback(){if(a(this,L)!=null){let t=a(this,L);u(this,L,void 0),yt(t)?Promise.resolve(t).then(i=>{typeof i=="function"&&i()}):t()}}destroy(){a(this,D)||(S.emit(Oe,this),this.runCleanupCallback(),T.off(this),S.off(this),j.off(this),u(this,D,!0),a(this,w).clear(),a(this,F).clear(),this.childEffects.forEach(t=>{t.destroy()}),this.childEffects.length=0,--g.count)}};L=new WeakMap,w=new WeakMap,F=new WeakMap,z=new WeakMap,D=new WeakMap,h(g,"idGen",new I("ef")),h(g,"count",0);var Y=g;var O=(...e)=>Y.createEffect(...e);var mt=new I("si");function _e(e){var t;De()||(t=K())==null||t.whenSignalIsRead(e)}function $e(e,t,i){T.emit(e,t,i)}var pt=e=>typeof e=="function"&&U in e,vt=e=>{let t=i=>{var r;return i?O(()=>(e.destroyed||_e(e.id),i(e.value)),[t]):e.destroyed||((r=e.beforeReadFn)==null||r.call(e),_e(e.id)),e.value};return Object.defineProperty(t,U,{value:e}),t},v,J=class J{constructor(t,i){h(this,"id");h(this,"lazy");h(this,"compareFn");h(this,"beforeReadFn");h(this,"muted",!1);h(this,"destroyed",!1);d(this,v);h(this,"valueFn");h(this,"reader");h(this,"writer",(t,i)=>{var o,l,c;let r=(o=i==null?void 0:i.lazy)!=null?o:!1,n=(l=i==null?void 0:i.compareFn)!=null?l:this.compareFn,f=n!=null?n:(p,C)=>p===C;if((r!==this.lazy||r&&t!==this.valueFn||!r&&!f(t,a(this,v)))&&(r?(u(this,v,void 0),this.valueFn=t,this.lazy=!0):(u(this,v,t),this.valueFn=void 0,this.lazy=!1),!this.muted&&!this.destroyed)){$e(this.id,a(this,v));return}((c=i==null?void 0:i.touch)!=null?c:!1)&&$e(this.id,a(this,v),{touch:!0})});this.id=mt.make(),++J.instanceCount,this.lazy=t,this.lazy?(this.value=void 0,this.valueFn=i):(this.value=i,this.valueFn=void 0),this.reader=vt(this)}get value(){return this.lazy&&(u(this,v,this.valueFn()),this.valueFn=void 0,this.lazy=!1),a(this,v)}set value(t){u(this,v,t)}};v=new WeakMap,h(J,"instanceCount",0);var me=J,ye=e=>e==null?void 0:e[U];function N(e=void 0,t){var r;let i;if(pt(e))i=ye(e);else{let n=(r=t==null?void 0:t.lazy)!=null?r:!1;i=new me(n,e),i.beforeReadFn=t==null?void 0:t.beforeReadFn,i.compareFn=t==null?void 0:t.compareFn}return[i.reader,i.writer]}var y,W,k,A,pe,We,ke,Ne=(y=class{constructor(){d(this,A);d(this,W,0);d(this,k);R(this);let[t,i]=N(null),[r,n]=N(!1),[f,s]=N(0),[o,l]=N(0);Object.defineProperties(this,{canvas:{get:()=>t(),set:c=>{i(c)},enumerable:!0},isConnected:{get:()=>r(),set:c=>{n(c)},enumerable:!0},canvasWidth:{get:()=>f(),set:c=>{s(c)},enumerable:!0},canvasHeight:{get:()=>o(),set:c=>{l(c)},enumerable:!0}}),this.now=0,this.retain([y.Canvas,y.Init,y.Resize]),O(()=>{this.canvas&&this.emit(y.Canvas,this,a(this,k))},[t]),O(()=>{this.ready&&this.emit(y.Init,this)},[t,r]),O(()=>{this.emit(y.Resize,this)},[f,o])}get ready(){return this.canvas&&this.isConnected}parseMessageData(t){t&&(t.canvas&&(u(this,k,t.contextAttributes||void 0),this.canvas=t.canvas),t.isConnected&&this.isConnected!==t.isConnected&&(this.isConnected=t.isConnected,this.isConnected?M(this,A,pe).call(this):M(this,A,We).call(this)),t.resize&&this.canvas&&(this.canvas.width=Math.floor(t.resize.width),this.canvas.height=Math.floor(t.resize.height)))}},W=new WeakMap,k=new WeakMap,A=new WeakSet,pe=function(){u(this,W,requestAnimationFrame(t=>M(this,A,ke).call(this,t)))},We=function(){cancelAnimationFrame(a(this,W))},ke=function(t){this.ready&&(ue(()=>{this.canvasWidth=this.canvas.width,this.canvasHeight=this.canvas.height}),this.now=t/1e3,this.canvasWidth>0&&this.canvasHeight>0&&this.emit(y.Frame,this)),M(this,A,pe).call(this)},h(y,"Canvas","onCanvas"),h(y,"Init","onInit"),h(y,"Resize","onResize"),h(y,"Frame","onFrame"),y);var Qe=new Ne,Z=10,Q=7,ve=-1,V,ee=1,q=null,Et=1024,E=null,X=null,te=null;Qe.on({onCanvas({canvas:e},t){q=e.getContext("2d",t)},onFrame({now:e,canvasWidth:t,canvasHeight:i}){let r=Z<1?Math.round(Z*t):Z,n=0;for(;n<t;){let f=n/t;if(V===void 0){let s=e%Q*ve*360/Q;q.fillStyle=\`hsl(\${f*360+s}, 100%, 50%)\`}else{let s=ee<1?t/(ee*t):ee,o=e%Q*ve/Q,l=(f+o)*s%1;l<0&&(l+=1),q.fillStyle=gt(l)}q.fillRect(n,0,r,i),n+=r}}});function qe(e){if(Qe.parseMessageData(e),"color-slice-width"in e&&(Z=e["color-slice-width"]),"slice-cycle-time"in e&&(Q=e["slice-cycle-time"]),"cycle-direction"in e&&(ve=e["cycle-direction"]),"cycle-colors"in e){let t=e["cycle-colors"];t===void 0?V=void 0:(V=[...t.toLowerCase().matchAll(/(#[a-f0-9]+|[a-z]+\\([^)]+\\)|[a-z]+([^(]|$))( |$)+/g)].map(i=>i[0].trim()),At(V))}"cycle-colors-repeat"in e&&(ee=e["cycle-colors-repeat"])}function gt(e){let t=Math.max(Math.min(Math.floor(e*E.width),E.width-1),0)*4,i=te.data[t],r=te.data[t+1],n=te.data[t+2];return\`rgb(\${i},\${r},\${n})\`}function At(e){E==null&&(E=new OffscreenCanvas(Et,1),X=E.getContext("2d"));let t=q.createLinearGradient(0,0,E.width,E.height),i=0,r=1/e.length;for(let n=0;n<e.length;n++)t.addColorStop(i,e[n]),i+=r;t.addColorStop(1,e[0]),X.fillStyle=t,X.fillRect(0,0,E.width,E.height),te=X.getImageData(0,0,E.width,E.height)}self.addEventListener("message",e=>{qe(e.data)});
 /*! Bundled license information:
@@ -93,2 +93,2 @@
 */
-`)}var h=class extends r{createWorker(){return l()}};customElements.define("rainbow-line",h);
+`)}var o=class extends r{createWorker(){return l()}};customElements.define("rainbow-line",o);

CHANGELOG.md

@@ -8,2 +8,27 @@ # Changelog for package [rainbow-line](https://github.com/spearwolf/visual-fx-web-components/tree/main/packages/rainbow-line)
 
+## [Unreleased]
+
+...
+
+## [0.3.0] - 2024-09-11
+
+### Added
+
+- `color-slice-width` values are interpreted as a _percentage of the total width_ if the value is between `0` and `1`
+- Add new options to use custom color gradients:
+  - `cycle-colors`
+  - `cycle-colors-repeat`
+- Switch to [esm.sh](https://esm.sh/) as default CDN for `example.html`
+- Add fiddle demo
+
+
+### Changed
+
+- The `index.html` now shows a range of usage examples
+
+### Fixed
+
+- Fix the _Comparing changes_ section so that it is readable within a markdown view
+
+
 ## [0.2.1] - 2024-05-12
@@ -19,6 +44,6 @@
 
----
 
-[unreleased]: https://github.com/spearwolf/visual-fx-web-components/compare/v0.2.1...HEAD
-[0.2.1]: https://github.com/spearwolf/visual-fx-web-components/compare/v0.2.0...v0.2.1
-[0.2.0]: https://github.com/spearwolf/visual-fx-web-components/releases/tag/v0.2.0
+## Comparing changes
+
+- [unreleased](https://github.com/spearwolf/visual-fx-web-components/compare/rainbow-line-v0.2.1...HEAD)
+- [0.2.1](https://github.com/spearwolf/visual-fx-web-components/compare/rainbow-line-v0.2.0...rainbow-line-v0.2.1)

package.json

 {
   "name": "rainbow-line",
   "description": "A custom element that displays a cut line animated with rainbow colors",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "type": "module",
@@ -6,0 +6,0 @@ "license": "Apache-2.0",

rainbow-line.js

 /*!
 @file rainbow-line - A custom element that displays a cut line animated with rainbow colors
 @author Wolfger Schramm <[e-mail]>
-@version 0.2.1+vanilla.20240512
+@version 0.3.0+vanilla.20240911
 
@@ -21,3 +21,3 @@ Copyright 2024 Wolfger Schramm
 */
-var n=class o extends HTMLElement{static InitialHTML=`
+var o=class n extends HTMLElement{static InitialHTML=`
     <style>
@@ -44,3 +44,3 @@ :host {
     </div>
-  `;#t=0;#e=0;#i=0;constructor(t=o.InitialHTML){super(),this.shadow=this.attachShadow({mode:"open"}),this.shadow.innerHTML=t,this.worker=void 0}queryCanvasElement(){return this.shadow.querySelector("canvas")}createWorker(){throw new Error("createWorker() must be implemented by subclass")}getContextAttributes(){return this.hasAttribute("no-alpha")?{alpha:!1}:{alpha:!0}}#r(){let t=this.canvas.getBoundingClientRect();return this.#t=t.width,this.#e=t.height,{width:t.width,height:t.height}}#a(t){let e=this.canvas.getBoundingClientRect();(this.#t!==e.width||this.#e!==e.height)&&(this.#t=e.width,this.#e=e.height,t(e.width,e.height))}#n=()=>{this.#a((t,e)=>{this.worker.postMessage({resize:{width:t,height:e}})}),this.#s()};#s(){this.#i=requestAnimationFrame(this.#n)}#o(){cancelAnimationFrame(this.#i)}#h(){this.canvas=this.queryCanvasElement();let t=this.canvas.transferControlToOffscreen();this.worker=this.createWorker(),this.worker.postMessage({canvas:t,contextAttributes:this.getContextAttributes(),...this.getInitialWorkerAttributes()},[t])}getInitialWorkerAttributes(){return{}}asNumberValue(t,e){if(this.hasAttribute(t)){let i=parseFloat(this.getAttribute(t));return isNaN(i)?e:i}return e}connectedCallback(){this.worker||this.#h(),this.worker.postMessage({isConnected:!0,resize:this.#r()}),this.#s()}disconnectedCallback(){this.worker.postMessage({isConnected:!1}),this.#o()}};var h=a=>a==="left"?1:-1,s=class extends n{static observedAttributes=["color-slice-width","slice-cycle-time","cycle-direction"];constructor(){super(`
+  `;#t=0;#e=0;#i=0;constructor(t=n.InitialHTML){super(),this.shadow=this.attachShadow({mode:"open"}),this.shadow.innerHTML=t,this.worker=void 0}queryCanvasElement(){return this.shadow.querySelector("canvas")}createWorker(){throw new Error("createWorker() must be implemented by subclass")}getContextAttributes(){return this.hasAttribute("no-alpha")?{alpha:!1}:{alpha:!0}}#r(){let t=this.canvas.getBoundingClientRect();return this.#t=t.width,this.#e=t.height,{width:t.width,height:t.height}}#a(t){let e=this.canvas.getBoundingClientRect();(this.#t!==e.width||this.#e!==e.height)&&(this.#t=e.width,this.#e=e.height,t(e.width,e.height))}#o=()=>{this.#a((t,e)=>{this.worker.postMessage({resize:{width:t,height:e}})}),this.#s()};#s(){this.#i=requestAnimationFrame(this.#o)}#n(){cancelAnimationFrame(this.#i)}#c(){this.canvas=this.queryCanvasElement();let t=this.canvas.transferControlToOffscreen();this.worker=this.createWorker(),this.worker.postMessage({canvas:t,contextAttributes:this.getContextAttributes(),...this.getInitialWorkerAttributes()},[t])}getInitialWorkerAttributes(){return{}}asNumberValue(t,e){if(this.hasAttribute(t)){let i=parseFloat(this.getAttribute(t));return isNaN(i)?e:i}return e}connectedCallback(){this.worker||this.#c(),this.worker.postMessage({isConnected:!0,resize:this.#r()}),this.#s()}disconnectedCallback(){this.worker.postMessage({isConnected:!1}),this.#n()}};var c=s=>s==="left"?1:-1,h=s=>typeof s=="string"&&s.trim()||void 0,r=class extends o{static observedAttributes=["color-slice-width","slice-cycle-time","cycle-direction","cycle-colors"];constructor(){super(`
       <style>
@@ -67,2 +67,2 @@ :host {
         <canvas></canvas>
-      </div>`)}createWorker(){return new Worker(new URL("rainbow-line.worker.js",import.meta.url),{type:"module"})}getContextAttributes(){return{alpha:!1}}getInitialWorkerAttributes(){return{"color-slice-width":this.asNumberValue("color-slice-width",10),"slice-cycle-time":this.asNumberValue("slice-cycle-time",7),"cycle-direction":h(this.getAttribute("cycle-direction")||"right")}}attributeChangedCallback(t,e,i){if(!this.worker)return;let r=t==="cycle-direction"?h(i):parseFloat(i);typeof r=="number"&&(isNaN(r)||this.worker.postMessage({[t]:r}))}};customElements.define("rainbow-line",s);
+      </div>`)}createWorker(){return new Worker(new URL("rainbow-line.worker.js",import.meta.url),{type:"module"})}getContextAttributes(){return{alpha:!1}}getInitialWorkerAttributes(){return{"color-slice-width":this.asNumberValue("color-slice-width",10),"slice-cycle-time":this.asNumberValue("slice-cycle-time",7),"cycle-direction":c(this.getAttribute("cycle-direction")||"right"),"cycle-colors":this.hasAttribute("cycle-colors")?h(this.getAttribute("cycle-colors")):void 0,"cycle-colors-repeat":this.asNumberValue("cycle-colors-repeat",1)}}attributeChangedCallback(t,e,i){if(!this.worker)return;if(t==="cycle-colors"){this.worker.postMessage({"cycle-colors":h(i)});return}let a=t==="cycle-direction"?c(i):parseFloat(i);typeof a=="number"&&(isNaN(a)||this.worker.postMessage({[t]:a}))}};customElements.define("rainbow-line",r);

rainbow-line.worker.js

 /*!
 @file rainbow-line - A custom element that displays a cut line animated with rainbow colors
 @author Wolfger Schramm <[e-mail]>
-@version 0.2.1+vanilla.20240512
+@version 0.3.0+vanilla.20240911
 
@@ -21,3 +21,3 @@ Copyright 2024 Wolfger Schramm
 */
-var pe=Object.defineProperty,me=(e,t,i)=>t in e?pe(e,t,{enumerable:!0,configurable:!0,writable:!0,value:i}):e[t]=i,f=(e,t,i)=>(me(e,typeof t!="symbol"?t+"":t,i),i),ye=(e,t,i)=>{if(!t.has(e))throw TypeError("Cannot "+i)},ve=(e,t,i)=>(ye(e,t,"read from private field"),i?i.call(e):t.get(e)),Ee=(e,t,i)=>{if(t.has(e))throw TypeError("Cannot add the same private member more than once");t instanceof WeakSet?t.add(e):t.set(e,i)},I={Max:Number.POSITIVE_INFINITY,AAA:1e9,BB:1e6,C:1e3,Default:0,Low:-1e4,Min:Number.NEGATIVE_INFINITY},u="*",J=1,P=2,k=4,X=(Symbol.eventize||(Symbol.eventize=Symbol("eventize")),Symbol.eventize),ge="[eventize]",x=e=>e===u,Z=e=>{switch(typeof e){case"string":case"symbol":return!0;default:return!1}},V=typeof console<"u",Ae=V?console[console.warn?"warn":"log"].bind(console,ge):()=>{},be=(e,t,i)=>(Object.defineProperty(e,t,{value:i,configurable:!0}),e),Ce=0,ee=class{constructor(){f(this,"events",new Map),f(this,"eventNames",new Set)}static publish(e){e.sort((t,i)=>t.order-i.order).forEach(t=>t.emit())}add(e){Array.isArray(e)?e.forEach(t=>this.eventNames.add(t)):this.eventNames.add(e)}remove(e){Array.isArray(e)?e.forEach(t=>this.eventNames.delete(t)):this.eventNames.delete(e),this.clear(e)}clear(e){Array.isArray(e)?e.forEach(t=>this.events.delete(t)):this.events.delete(e)}retain(e,t){this.eventNames.has(e)&&this.events.set(e,{args:t,order:Ce++})}isKnown(e){return this.eventNames.has(e)}emit(e,t,i=[]){if(x(e))this.eventNames.forEach(s=>this.emit(s,t,i));else if(this.events.has(e)){let{order:s,args:o}=this.events.get(e);i.push({order:s,emit:()=>t.apply(e,o)})}return i}},T=(e,t,i,s)=>{if(typeof t=="function"){let o=t.apply(e,i);o!=null&&s?.(o)}},Se=(e,t,i,s)=>T(t,t.emit,[e].concat(i),s),xe=e=>{switch(typeof e){case"function":return J;case"string":case"symbol":return P;case"object":return k}},Le=0,we=()=>++Le,te=class{constructor(e,t,i,s=null){f(this,"id"),f(this,"eventName"),f(this,"isCatchEmAll"),f(this,"priority"),f(this,"listener"),f(this,"listenerObject"),f(this,"listenerType"),f(this,"callAfterApply"),f(this,"isRemoved"),f(this,"refCount"),this.id=we(),this.eventName=e,this.isCatchEmAll=x(e),this.listener=i,this.listenerObject=s,this.priority=t,this.listenerType=xe(i),this.callAfterApply=void 0,this.isRemoved=!1,this.refCount=1}isEqual(e,t=null){if(e===this)return!0;let i=typeof e;return i==="number"&&e===this.id?!0:t===null&&(i==="string"||i==="symbol")?e===u||e===this.eventName:this.listener===e&&this.listenerObject===t}apply(e,t,i){if(this.isRemoved)return;let{listener:s,listenerObject:o}=this;switch(this.listenerType){case J:T(o,s,t,i),this.callAfterApply&&this.callAfterApply();break;case P:T(o,o[s],t,i),this.callAfterApply&&this.callAfterApply();break;case k:{let l=s[e];if(this.isCatchEmAll||this.eventName===e){if(typeof l=="function"){let r=l.apply(s,t);r!=null&&i?.(r)}else Se(e,s,t,i);this.callAfterApply&&this.callAfterApply()}break}}}},Fe=(e,t)=>e.priority!==t.priority?t.priority-e.priority:e.id-t.id,G=e=>e?.slice(0),j=(e,t)=>{let i=e.indexOf(t);i>-1&&e.splice(i,1)},ze=e=>e===k||e===P,D=(e,t,i)=>{let s=e.findIndex(o=>o.isEqual(t,i));s>-1&&(e[s].isRemoved=!0,e.splice(s,1))},C=(e,t,i)=>{let s=[];for(let o of e)(t==null&&o.listenerObject===i||o.eventName===t&&o.listener===i)&&s.push(o);for(let o of s)D(e,o,void 0)},R=e=>{e&&(e.forEach(t=>{t.isRemoved=!0}),e.length=0)},Re=(e,t)=>e.listenerType===t.listenerType?e.priority===t.priority&&e.eventName===t.eventName&&e.listenerObject===t.listenerObject&&e.listener===t.listener:!1,Ie=(e,t)=>{if(ze(e.listenerType))return t.find(i=>Re(e,i))},Te=(e,t)=>{let i=Ie(e,t);return i?(i.refCount+=1,i):(t.push(e),t.sort(Fe),e)},O,De=class{constructor(){f(this,"namedListeners"),f(this,"catchEmAllListeners"),Ee(this,O,e=>{let t=this.namedListeners.get(e);return t||(t=[],this.namedListeners.set(e,t)),t}),this.namedListeners=new Map,this.catchEmAllListeners=[]}add(e){return Te(e,e.isCatchEmAll?this.catchEmAllListeners:ve(this,O).call(this,e.eventName))}remove(e,t,i=!1){t==null&&Array.isArray(e)?e.forEach(s=>this.remove(s,null,i)):e==null||t==null&&x(e)?this.removeAllListeners():t==null&&Z(e)?R(this.namedListeners.get(e)):e instanceof te?e.isRemoved||(e.refCount-=1,e.refCount<1&&(e.isRemoved=!0,this.namedListeners.forEach(s=>j(s,e)),j(this.catchEmAllListeners,e))):i?x(e)?C(this.catchEmAllListeners,u,e):this.namedListeners.forEach(s=>C(s,e,t)):(this.namedListeners.forEach(s=>{D(s,e,t),C(s,void 0,e)}),D(this.catchEmAllListeners,e,t),C(this.catchEmAllListeners,void 0,e))}removeAllListeners(){this.namedListeners.forEach(e=>R(e)),this.namedListeners.clear(),R(this.catchEmAllListeners)}forEach(e,t){let i=G(this.catchEmAllListeners),s=G(this.namedListeners.get(e));if(e===u||!s||s.length===0)i.forEach(t);else if(i.length===0)s.forEach(t);else{let o=s.length,l=i.length,r=0,n=0;for(;r<o||n<l;){if(r<o){let c=s[r];if(n>=l||c.priority>=i[n].priority){t(c),++r;continue}}n<l&&(t(i[n]),++n)}}}getSubscriptionCount(){let e=this.catchEmAllListeners.length;for(let t of this.namedListeners.values())e+=t.length;return e}};O=new WeakMap;var ie=e=>!!(e&&e[X]),Oe=(e,t,i,s,o,l,r)=>{let n=e.add(new te(i,s,o,l));return t.emit(i,n,r),n},Pe=(e,t,i,s)=>{let o=i.length,l=typeof i[0],r,n,c,a;if(o>=2&&o<=3&&l==="number"?(r=u,[n,c,a]=i):o>=3&&o<=4&&typeof i[1]=="number"?[r,n,c,a]=i:(n=I.Default,l==="string"||l==="symbol"||Array.isArray(i[0])?[r,c,a]=i:(r=u,[c,a]=i)),!c&&V)throw Ae("called with insufficient arguments!",i),"subscribeTo() called with insufficient arguments!";let h=y=>de=>Oe(e,t,de,y,c,a,s);return Array.isArray(r)?r.map(y=>Array.isArray(y)?h(y[1])(y[0]):h(n)(y)):h(n)(r)},U=(e,t,i)=>{let s=[],o=Pe(e,t,i,s);return ee.publish(s),o},K=e=>t=>{t.callAfterApply=()=>{e?.()}},Y=(e,t)=>Object.assign(()=>e.off(t),Array.isArray(t)?{listeners:t}:{listener:t});function S(e){if(ie(e))return e;let t=new De,i=new ee;be(e,X,{keeper:i,store:t});let s=r=>{let n=U(t,i,r),c=Y(l,n),a=!1,h=()=>{a||(c(),a=!0)};return Array.isArray(n)?n.forEach(K(h)):K(h)(n),h},o=(r,n,c)=>{Array.isArray(r)?r.forEach(a=>{t.forEach(a,h=>h.apply(a,n,c)),i.retain(a,n)}):r!==u&&(t.forEach(r,a=>{a.apply(r,n,c)}),i.retain(r,n))},l=Object.assign(e,{on(...r){return Y(l,U(t,i,r))},once(...r){return s(r)},onceAsync(r){return new Promise(n=>{s([r,n])})},off(r,n){let c=typeof r,a=n!=null&&(c==="string"||c==="symbol");t.remove(r,n,a),Array.isArray(r)?i.remove(r.filter(h=>typeof h=="string")):Z(r)&&i.remove(r)},emit(r,...n){o(r,n)},emitAsync(r,...n){let c=[];return o(r,n,a=>{c.push(a)}),c=c.map(a=>Array.isArray(a)?Promise.all(a):Promise.resolve(a)),c.length>0?Promise.all(c):Promise.resolve()},retain(r){i.add(r)},retainClear(r){i.clear(r)}});return l}var v=(()=>{let e=(t={})=>S(t);return e.inject=S,e.extend=t=>S(Object.create(t)),e.create=t=>{let i=S({});return i.on(u,I.Default,t),i},e.is=ie,e.Priority=I,e})();var E=class{#e;#t;constructor(t="id",i=1){this.#e=t,this.#t=i}make(){return Symbol(`${this.#e}${this.#t++}`)}};var ke=0;function re(){return ke>0}var L=Symbol("signal"),_=Symbol("destroySignal"),M=Symbol("createEffect"),se=Symbol("destroyEffect");var g=v({}),w=v({}),d=v({});var m=class{static current;#e=new Set;batch(t){this.#e.add(t)}run(){d.emit(Array.from(this.#e))}},ne=()=>m.current;function Q(e){let t=m.current;t?t=void 0:t=m.current=new m;try{e()}finally{t&&(m.current=void 0,t.run())}}var W=[],F=()=>W.at(-1),oe=(e,t)=>{W.push(e);try{return t()}finally{W.pop()}};var _e=e=>e!=null&&typeof e.then=="function",z=class e{static idGen=new E("ef");static count=0;id;callback;#e;#t=new Set;#i=new Set;parentEffect;childEffects=[];curChildEffectSlot=0;autorun=!0;shouldRun=!0;#r;#s=!1;constructor(t,i){this.callback=t,this.autorun=i?.autorun??!0,this.#r=i?.dependencies,this.id=e.idGen.make(),d.on(this.id,"recall",this),++e.count}hasStaticDeps(){return this.#r!=null&&this.#r.length>0}saveSignalsFromDeps(){for(let t of this.#r)this.whenSignalIsRead(N(t).id)}static createEffect(t,i,s){let o=Array.isArray(i)?i:void 0,l=o?s??{dependencies:o}:i;l&&o&&(l.dependencies=o);let r,n=F();return n!=null?(r=n.getCurrentChildEffect(),r==null&&(r=new e(t,l),n.attachChildEffect(r),d.emit(M,r)),n.curChildEffectSlot++):(r=new e(t,l),d.emit(M,r)),r.hasStaticDeps()?r.saveSignalsFromDeps():r.autorun&&r.run(),[r.run.bind(r),r.destroy.bind(r)]}getCurrentChildEffect(){return this.childEffects[this.curChildEffectSlot]}attachChildEffect(t){this.childEffects.push(t),this.parentEffect=this}run(){if(this.#s||!this.shouldRun)return;let t=ne();t?t.batch(this.id):(this.runCleanupCallback(),this.curChildEffectSlot=0,this.shouldRun=!1,this.hasStaticDeps()?this.#e=this.callback():this.#e=oe(this,this.callback))}recall(){this.shouldRun=!0,this.autorun&&this.run()}whenSignalIsRead(t){this.#t.has(t)||(this.#t.add(t),g.on(t,"recall",this),w.once(t,_,this))}[_](t){!this.#i.has(t)&&this.#t.has(t)&&(this.#i.add(t),g.off(t,this),this.#i.size===this.#t.size&&this.destroy())}runCleanupCallback(){if(this.#e!=null){let t=this.#e;this.#e=void 0,_e(t)?Promise.resolve(t).then(i=>{typeof i=="function"&&i()}):t()}}destroy(){this.#s||(d.emit(se,this),this.runCleanupCallback(),g.off(this),d.off(this),w.off(this),this.#s=!0,this.#t.clear(),this.#i.clear(),this.childEffects.forEach(t=>{t.destroy()}),this.childEffects.length=0,--e.count)}};var A=(...e)=>z.createEffect(...e);var Me=new E("si");function ae(e){re()||F()?.whenSignalIsRead(e)}function ce(e,t,i){g.emit(e,t,i)}var Qe=e=>typeof e=="function"&&L in e,We=e=>{let t=i=>(i?A(()=>(e.destroyed||ae(e.id),i(e.value)),[t]):e.destroyed||(e.beforeReadFn?.(),ae(e.id)),e.value);return Object.defineProperty(t,L,{value:e}),t},$=class e{static instanceCount=0;id;lazy;compareFn;beforeReadFn;muted=!1;destroyed=!1;#e=void 0;get value(){return this.lazy&&(this.#e=this.valueFn(),this.valueFn=void 0,this.lazy=!1),this.#e}set value(t){this.#e=t}valueFn;reader;writer=(t,i)=>{let s=i?.lazy??!1,l=i?.compareFn??this.compareFn??((n,c)=>n===c);if((s!==this.lazy||s&&t!==this.valueFn||!s&&!l(t,this.#e))&&(s?(this.#e=void 0,this.valueFn=t,this.lazy=!0):(this.#e=t,this.valueFn=void 0,this.lazy=!1),!this.muted&&!this.destroyed)){ce(this.id,this.#e);return}(i?.touch??!1)&&ce(this.id,this.#e,{touch:!0})};constructor(t,i){this.id=Me.make(),++e.instanceCount,this.lazy=t,this.lazy?(this.value=void 0,this.valueFn=i):(this.value=i,this.valueFn=void 0),this.reader=We(this)}},N=e=>e?.[L];function b(e=void 0,t){let i;if(Qe(e))i=N(e);else{let s=t?.lazy??!1;i=new $(s,e),i.beforeReadFn=t?.beforeReadFn,i.compareFn=t?.compareFn}return[i.reader,i.writer]}var le=class p{static Canvas="onCanvas";static Init="onInit";static Resize="onResize";static Frame="onFrame";get ready(){return this.canvas&&this.isConnected}#e=0;#t=void 0;constructor(){v(this);let[t,i]=b(null),[s,o]=b(!1),[l,r]=b(0),[n,c]=b(0);Object.defineProperties(this,{canvas:{get:()=>t(),set:a=>{i(a)},enumerable:!0},isConnected:{get:()=>s(),set:a=>{o(a)},enumerable:!0},canvasWidth:{get:()=>l(),set:a=>{r(a)},enumerable:!0},canvasHeight:{get:()=>n(),set:a=>{c(a)},enumerable:!0}}),this.now=0,this.retain([p.Canvas,p.Init,p.Resize]),A(()=>{this.canvas&&this.emit(p.Canvas,this,this.#t)},[t]),A(()=>{this.ready&&this.emit(p.Init,this)},[t,s]),A(()=>{this.emit(p.Resize,this)},[l,n])}#i(){this.#e=requestAnimationFrame(t=>this.#s(t))}#r(){cancelAnimationFrame(this.#e)}#s(t){this.ready&&(Q(()=>{this.canvasWidth=this.canvas.width,this.canvasHeight=this.canvas.height}),this.now=t/1e3,this.canvasWidth>0&&this.canvasHeight>0&&this.emit(p.Frame,this)),this.#i()}parseMessageData(t){t&&(t.canvas&&(this.#t=t.contextAttributes||void 0,this.canvas=t.canvas),t.isConnected&&this.isConnected!==t.isConnected&&(this.isConnected=t.isConnected,this.isConnected?this.#i():this.#r()),t.resize&&this.canvas&&(this.canvas.width=Math.floor(t.resize.width),this.canvas.height=Math.floor(t.resize.height)))}};var fe=new le,B=10,H=7,he=-1,q=null;fe.on({onCanvas({canvas:e},t){q=e.getContext("2d",t)},onFrame({now:e,canvasWidth:t,canvasHeight:i}){let s=0;for(;s<t;){let o=e%H*he*360/H;q.fillStyle=`hsl(${s/t*360+o}, 100%, 50%)`,q.fillRect(s,0,B,i),s+=B}}});function ue(e){fe.parseMessageData(e),"color-slice-width"in e&&(B=e["color-slice-width"]),"slice-cycle-time"in e&&(H=e["slice-cycle-time"]),"cycle-direction"in e&&(he=e["cycle-direction"])}self.addEventListener("message",e=>{ue(e.data)});
+var ge=Object.defineProperty,Ae=(e,t,i)=>t in e?ge(e,t,{enumerable:!0,configurable:!0,writable:!0,value:i}):e[t]=i,f=(e,t,i)=>(Ae(e,typeof t!="symbol"?t+"":t,i),i),Ce=(e,t,i)=>{if(!t.has(e))throw TypeError("Cannot "+i)},be=(e,t,i)=>(Ce(e,t,"read from private field"),i?i.call(e):t.get(e)),Se=(e,t,i)=>{if(t.has(e))throw TypeError("Cannot add the same private member more than once");t instanceof WeakSet?t.add(e):t.set(e,i)},$={Max:Number.POSITIVE_INFINITY,AAA:1e9,BB:1e6,C:1e3,Default:0,Low:-1e4,Min:Number.NEGATIVE_INFINITY},d="*",ie=1,q=2,G=4,re=(Symbol.eventize||(Symbol.eventize=Symbol("eventize")),Symbol.eventize),xe="[eventize]",F=e=>e===d,se=e=>{switch(typeof e){case"string":case"symbol":return!0;default:return!1}},ne=typeof console<"u",Le=ne?console[console.warn?"warn":"log"].bind(console,xe):()=>{},we=(e,t,i)=>(Object.defineProperty(e,t,{value:i,configurable:!0}),e),Fe=0,oe=class{constructor(){f(this,"events",new Map),f(this,"eventNames",new Set)}static publish(e){e.sort((t,i)=>t.order-i.order).forEach(t=>t.emit())}add(e){Array.isArray(e)?e.forEach(t=>this.eventNames.add(t)):this.eventNames.add(e)}remove(e){Array.isArray(e)?e.forEach(t=>this.eventNames.delete(t)):this.eventNames.delete(e),this.clear(e)}clear(e){Array.isArray(e)?e.forEach(t=>this.events.delete(t)):this.events.delete(e)}retain(e,t){this.eventNames.has(e)&&this.events.set(e,{args:t,order:Fe++})}isKnown(e){return this.eventNames.has(e)}emit(e,t,i=[]){if(F(e))this.eventNames.forEach(s=>this.emit(s,t,i));else if(this.events.has(e)){let{order:s,args:n}=this.events.get(e);i.push({order:s,emit:()=>t.apply(e,n)})}return i}},N=(e,t,i,s)=>{if(typeof t=="function"){let n=t.apply(e,i);n!=null&&s?.(n)}},Re=(e,t,i,s)=>N(t,t.emit,[e].concat(i),s),ze=e=>{switch(typeof e){case"function":return ie;case"string":case"symbol":return q;case"object":return G}},Ie=0,Te=()=>++Ie,ae=class{constructor(e,t,i,s=null){f(this,"id"),f(this,"eventName"),f(this,"isCatchEmAll"),f(this,"priority"),f(this,"listener"),f(this,"listenerObject"),f(this,"listenerType"),f(this,"callAfterApply"),f(this,"isRemoved"),f(this,"refCount"),this.id=Te(),this.eventName=e,this.isCatchEmAll=F(e),this.listener=i,this.listenerObject=s,this.priority=t,this.listenerType=ze(i),this.callAfterApply=void 0,this.isRemoved=!1,this.refCount=1}isEqual(e,t=null){if(e===this)return!0;let i=typeof e;return i==="number"&&e===this.id?!0:t===null&&(i==="string"||i==="symbol")?e===d||e===this.eventName:this.listener===e&&this.listenerObject===t}apply(e,t,i){if(this.isRemoved)return;let{listener:s,listenerObject:n}=this;switch(this.listenerType){case ie:N(n,s,t,i),this.callAfterApply&&this.callAfterApply();break;case q:N(n,n[s],t,i),this.callAfterApply&&this.callAfterApply();break;case G:{let l=s[e];if(this.isCatchEmAll||this.eventName===e){if(typeof l=="function"){let r=l.apply(s,t);r!=null&&i?.(r)}else Re(e,s,t,i);this.callAfterApply&&this.callAfterApply()}break}}}},De=(e,t)=>e.priority!==t.priority?t.priority-e.priority:e.id-t.id,X=e=>e?.slice(0),Z=(e,t)=>{let i=e.indexOf(t);i>-1&&e.splice(i,1)},Oe=e=>e===G||e===q,W=(e,t,i)=>{let s=e.findIndex(n=>n.isEqual(t,i));s>-1&&(e[s].isRemoved=!0,e.splice(s,1))},L=(e,t,i)=>{let s=[];for(let n of e)(t==null&&n.listenerObject===i||n.eventName===t&&n.listener===i)&&s.push(n);for(let n of s)W(e,n,void 0)},k=e=>{e&&(e.forEach(t=>{t.isRemoved=!0}),e.length=0)},_e=(e,t)=>e.listenerType===t.listenerType?e.priority===t.priority&&e.eventName===t.eventName&&e.listenerObject===t.listenerObject&&e.listener===t.listener:!1,Me=(e,t)=>{if(Oe(e.listenerType))return t.find(i=>_e(e,i))},Pe=(e,t)=>{let i=Me(e,t);return i?(i.refCount+=1,i):(t.push(e),t.sort(De),e)},Q,ke=class{constructor(){f(this,"namedListeners"),f(this,"catchEmAllListeners"),Se(this,Q,e=>{let t=this.namedListeners.get(e);return t||(t=[],this.namedListeners.set(e,t)),t}),this.namedListeners=new Map,this.catchEmAllListeners=[]}add(e){return Pe(e,e.isCatchEmAll?this.catchEmAllListeners:be(this,Q).call(this,e.eventName))}remove(e,t,i=!1){t==null&&Array.isArray(e)?e.forEach(s=>this.remove(s,null,i)):e==null||t==null&&F(e)?this.removeAllListeners():t==null&&se(e)?k(this.namedListeners.get(e)):e instanceof ae?e.isRemoved||(e.refCount-=1,e.refCount<1&&(e.isRemoved=!0,this.namedListeners.forEach(s=>Z(s,e)),Z(this.catchEmAllListeners,e))):i?F(e)?L(this.catchEmAllListeners,d,e):this.namedListeners.forEach(s=>L(s,e,t)):(this.namedListeners.forEach(s=>{W(s,e,t),L(s,void 0,e)}),W(this.catchEmAllListeners,e,t),L(this.catchEmAllListeners,void 0,e))}removeAllListeners(){this.namedListeners.forEach(e=>k(e)),this.namedListeners.clear(),k(this.catchEmAllListeners)}forEach(e,t){let i=X(this.catchEmAllListeners),s=X(this.namedListeners.get(e));if(e===d||!s||s.length===0)i.forEach(t);else if(i.length===0)s.forEach(t);else{let n=s.length,l=i.length,r=0,o=0;for(;r<n||o<l;){if(r<n){let a=s[r];if(o>=l||a.priority>=i[o].priority){t(a),++r;continue}}o<l&&(t(i[o]),++o)}}}getSubscriptionCount(){let e=this.catchEmAllListeners.length;for(let t of this.namedListeners.values())e+=t.length;return e}};Q=new WeakMap;var ce=e=>!!(e&&e[re]),$e=(e,t,i,s,n,l,r)=>{let o=e.add(new ae(i,s,n,l));return t.emit(i,o,r),o},Ne=(e,t,i,s)=>{let n=i.length,l=typeof i[0],r,o,a,c;if(n>=2&&n<=3&&l==="number"?(r=d,[o,a,c]=i):n>=3&&n<=4&&typeof i[1]=="number"?[r,o,a,c]=i:(o=$.Default,l==="string"||l==="symbol"||Array.isArray(i[0])?[r,a,c]=i:(r=d,[a,c]=i)),!a&&ne)throw Le("called with insufficient arguments!",i),"subscribeTo() called with insufficient arguments!";let h=v=>Ee=>$e(e,t,Ee,v,a,c,s);return Array.isArray(r)?r.map(v=>Array.isArray(v)?h(v[1])(v[0]):h(o)(v)):h(o)(r)},V=(e,t,i)=>{let s=[],n=Ne(e,t,i,s);return oe.publish(s),n},ee=e=>t=>{t.callAfterApply=()=>{e?.()}},te=(e,t)=>Object.assign(()=>e.off(t),Array.isArray(t)?{listeners:t}:{listener:t});function w(e){if(ce(e))return e;let t=new ke,i=new oe;we(e,re,{keeper:i,store:t});let s=r=>{let o=V(t,i,r),a=te(l,o),c=!1,h=()=>{c||(a(),c=!0)};return Array.isArray(o)?o.forEach(ee(h)):ee(h)(o),h},n=(r,o,a)=>{Array.isArray(r)?r.forEach(c=>{t.forEach(c,h=>h.apply(c,o,a)),i.retain(c,o)}):r!==d&&(t.forEach(r,c=>{c.apply(r,o,a)}),i.retain(r,o))},l=Object.assign(e,{on(...r){return te(l,V(t,i,r))},once(...r){return s(r)},onceAsync(r){return new Promise(o=>{s([r,o])})},off(r,o){let a=typeof r,c=o!=null&&(a==="string"||a==="symbol");t.remove(r,o,c),Array.isArray(r)?i.remove(r.filter(h=>typeof h=="string")):se(r)&&i.remove(r)},emit(r,...o){n(r,o)},emitAsync(r,...o){let a=[];return n(r,o,c=>{a.push(c)}),a=a.map(c=>Array.isArray(c)?Promise.all(c):Promise.resolve(c)),a.length>0?Promise.all(a):Promise.resolve()},retain(r){i.add(r)},retainClear(r){i.clear(r)}});return l}var E=(()=>{let e=(t={})=>w(t);return e.inject=w,e.extend=t=>w(Object.create(t)),e.create=t=>{let i=w({});return i.on(d,$.Default,t),i},e.is=ce,e.Priority=$,e})();var g=class{#e;#t;constructor(t="id",i=1){this.#e=t,this.#t=i}make(){return Symbol(`${this.#e}${this.#t++}`)}};var We=0;function le(){return We>0}var R=Symbol("signal"),B=Symbol("destroySignal"),H=Symbol("createEffect"),fe=Symbol("destroyEffect");var A=E({}),z=E({}),p=E({});var y=class{static current;#e=new Set;batch(t){this.#e.add(t)}run(){p.emit(Array.from(this.#e))}},he=()=>y.current;function U(e){let t=y.current;t?t=void 0:t=y.current=new y;try{e()}finally{t&&(y.current=void 0,t.run())}}var j=[],I=()=>j.at(-1),ue=(e,t)=>{j.push(e);try{return t()}finally{j.pop()}};var Qe=e=>e!=null&&typeof e.then=="function",T=class e{static idGen=new g("ef");static count=0;id;callback;#e;#t=new Set;#i=new Set;parentEffect;childEffects=[];curChildEffectSlot=0;autorun=!0;shouldRun=!0;#r;#s=!1;constructor(t,i){this.callback=t,this.autorun=i?.autorun??!0,this.#r=i?.dependencies,this.id=e.idGen.make(),p.on(this.id,"recall",this),++e.count}hasStaticDeps(){return this.#r!=null&&this.#r.length>0}saveSignalsFromDeps(){for(let t of this.#r)this.whenSignalIsRead(K(t).id)}static createEffect(t,i,s){let n=Array.isArray(i)?i:void 0,l=n?s??{dependencies:n}:i;l&&n&&(l.dependencies=n);let r,o=I();return o!=null?(r=o.getCurrentChildEffect(),r==null&&(r=new e(t,l),o.attachChildEffect(r),p.emit(H,r)),o.curChildEffectSlot++):(r=new e(t,l),p.emit(H,r)),r.hasStaticDeps()?r.saveSignalsFromDeps():r.autorun&&r.run(),[r.run.bind(r),r.destroy.bind(r)]}getCurrentChildEffect(){return this.childEffects[this.curChildEffectSlot]}attachChildEffect(t){this.childEffects.push(t),this.parentEffect=this}run(){if(this.#s||!this.shouldRun)return;let t=he();t?t.batch(this.id):(this.runCleanupCallback(),this.curChildEffectSlot=0,this.shouldRun=!1,this.hasStaticDeps()?this.#e=this.callback():this.#e=ue(this,this.callback))}recall(){this.shouldRun=!0,this.autorun&&this.run()}whenSignalIsRead(t){this.#t.has(t)||(this.#t.add(t),A.on(t,"recall",this),z.once(t,B,this))}[B](t){!this.#i.has(t)&&this.#t.has(t)&&(this.#i.add(t),A.off(t,this),this.#i.size===this.#t.size&&this.destroy())}runCleanupCallback(){if(this.#e!=null){let t=this.#e;this.#e=void 0,Qe(t)?Promise.resolve(t).then(i=>{typeof i=="function"&&i()}):t()}}destroy(){this.#s||(p.emit(fe,this),this.runCleanupCallback(),A.off(this),p.off(this),z.off(this),this.#s=!0,this.#t.clear(),this.#i.clear(),this.childEffects.forEach(t=>{t.destroy()}),this.childEffects.length=0,--e.count)}};var C=(...e)=>T.createEffect(...e);var qe=new g("si");function de(e){le()||I()?.whenSignalIsRead(e)}function pe(e,t,i){A.emit(e,t,i)}var Ge=e=>typeof e=="function"&&R in e,Be=e=>{let t=i=>(i?C(()=>(e.destroyed||de(e.id),i(e.value)),[t]):e.destroyed||(e.beforeReadFn?.(),de(e.id)),e.value);return Object.defineProperty(t,R,{value:e}),t},Y=class e{static instanceCount=0;id;lazy;compareFn;beforeReadFn;muted=!1;destroyed=!1;#e=void 0;get value(){return this.lazy&&(this.#e=this.valueFn(),this.valueFn=void 0,this.lazy=!1),this.#e}set value(t){this.#e=t}valueFn;reader;writer=(t,i)=>{let s=i?.lazy??!1,l=i?.compareFn??this.compareFn??((o,a)=>o===a);if((s!==this.lazy||s&&t!==this.valueFn||!s&&!l(t,this.#e))&&(s?(this.#e=void 0,this.valueFn=t,this.lazy=!0):(this.#e=t,this.valueFn=void 0,this.lazy=!1),!this.muted&&!this.destroyed)){pe(this.id,this.#e);return}(i?.touch??!1)&&pe(this.id,this.#e,{touch:!0})};constructor(t,i){this.id=qe.make(),++e.instanceCount,this.lazy=t,this.lazy?(this.value=void 0,this.valueFn=i):(this.value=i,this.valueFn=void 0),this.reader=Be(this)}},K=e=>e?.[R];function b(e=void 0,t){let i;if(Ge(e))i=K(e);else{let s=t?.lazy??!1;i=new Y(s,e),i.beforeReadFn=t?.beforeReadFn,i.compareFn=t?.compareFn}return[i.reader,i.writer]}var me=class m{static Canvas="onCanvas";static Init="onInit";static Resize="onResize";static Frame="onFrame";get ready(){return this.canvas&&this.isConnected}#e=0;#t=void 0;constructor(){E(this);let[t,i]=b(null),[s,n]=b(!1),[l,r]=b(0),[o,a]=b(0);Object.defineProperties(this,{canvas:{get:()=>t(),set:c=>{i(c)},enumerable:!0},isConnected:{get:()=>s(),set:c=>{n(c)},enumerable:!0},canvasWidth:{get:()=>l(),set:c=>{r(c)},enumerable:!0},canvasHeight:{get:()=>o(),set:c=>{a(c)},enumerable:!0}}),this.now=0,this.retain([m.Canvas,m.Init,m.Resize]),C(()=>{this.canvas&&this.emit(m.Canvas,this,this.#t)},[t]),C(()=>{this.ready&&this.emit(m.Init,this)},[t,s]),C(()=>{this.emit(m.Resize,this)},[l,o])}#i(){this.#e=requestAnimationFrame(t=>this.#s(t))}#r(){cancelAnimationFrame(this.#e)}#s(t){this.ready&&(U(()=>{this.canvasWidth=this.canvas.width,this.canvasHeight=this.canvas.height}),this.now=t/1e3,this.canvasWidth>0&&this.canvasHeight>0&&this.emit(m.Frame,this)),this.#i()}parseMessageData(t){t&&(t.canvas&&(this.#t=t.contextAttributes||void 0,this.canvas=t.canvas),t.isConnected&&this.isConnected!==t.isConnected&&(this.isConnected=t.isConnected,this.isConnected?this.#i():this.#r()),t.resize&&this.canvas&&(this.canvas.width=Math.floor(t.resize.width),this.canvas.height=Math.floor(t.resize.height)))}};var ye=new me,O=10,S=7,J=-1,_,M=1,x=null,He=1024,u=null,D=null,P=null;ye.on({onCanvas({canvas:e},t){x=e.getContext("2d",t)},onFrame({now:e,canvasWidth:t,canvasHeight:i}){let s=O<1?Math.round(O*t):O,n=0;for(;n<t;){let l=n/t;if(_===void 0){let r=e%S*J*360/S;x.fillStyle=`hsl(${l*360+r}, 100%, 50%)`}else{let r=M<1?t/(M*t):M,o=e%S*J/S,a=(l+o)*r%1;a<0&&(a+=1),x.fillStyle=Ue(a)}x.fillRect(n,0,s,i),n+=s}}});function ve(e){if(ye.parseMessageData(e),"color-slice-width"in e&&(O=e["color-slice-width"]),"slice-cycle-time"in e&&(S=e["slice-cycle-time"]),"cycle-direction"in e&&(J=e["cycle-direction"]),"cycle-colors"in e){let t=e["cycle-colors"];t===void 0?_=void 0:(_=[...t.toLowerCase().matchAll(/(#[a-f0-9]+|[a-z]+\([^)]+\)|[a-z]+([^(]|$))( |$)+/g)].map(i=>i[0].trim()),je(_))}"cycle-colors-repeat"in e&&(M=e["cycle-colors-repeat"])}function Ue(e){let t=Math.max(Math.min(Math.floor(e*u.width),u.width-1),0)*4,i=P.data[t],s=P.data[t+1],n=P.data[t+2];return`rgb(${i},${s},${n})`}function je(e){u==null&&(u=new OffscreenCanvas(He,1),D=u.getContext("2d"));let t=x.createLinearGradient(0,0,u.width,u.height),i=0,s=1/e.length;for(let n=0;n<e.length;n++)t.addColorStop(i,e[n]),i+=s;t.addColorStop(1,e[0]),D.fillStyle=t,D.fillRect(0,0,u.width,u.height),P=D.getImageData(0,0,u.width,u.height)}self.addEventListener("message",e=>{ve(e.data)});
 /*! Bundled license information:
@@ -24,0 +24,0 @@

README.md

@@ -21,3 +21,5 @@ ### rainbow-line
 
+live preview at → [jsfiddle.net/spearwolf/spjbqnxd/](https://jsfiddle.net/spearwolf/spjbqnxd/)
 
+
 ## Copyright and License
@@ -24,0 +26,0 @@

src/RainbowLineElement.js

@@ -5,4 +5,6 @@ import {OffscreenDisplay} from '@spearwolf/offscreen-display';
 
+const toCycleColors = (colors) => (typeof colors === 'string' ? colors.trim() || undefined : undefined);
+
 export class RainbowLineElement extends OffscreenDisplay {
-  static observedAttributes = ['color-slice-width', 'slice-cycle-time', 'cycle-direction'];
+  static observedAttributes = ['color-slice-width', 'slice-cycle-time', 'cycle-direction', 'cycle-colors'];
 
@@ -50,2 +52,4 @@ constructor() {
       'cycle-direction': toCycleDirection(this.getAttribute('cycle-direction') || 'right'),
+      'cycle-colors': this.hasAttribute('cycle-colors') ? toCycleColors(this.getAttribute('cycle-colors')) : undefined,
+      'cycle-colors-repeat': this.asNumberValue('cycle-colors-repeat', 1),
     };
@@ -57,2 +61,9 @@ }
 
+    if (name === 'cycle-colors') {
+      this.worker.postMessage({
+        'cycle-colors': toCycleColors(newValue),
+      });
+      return;
+    }
+
     const value = name === 'cycle-direction' ? toCycleDirection(newValue) : parseFloat(newValue);
@@ -59,0 +70,0 @@

src/RainbowLineWorkerDisplay.js

@@ -8,5 +8,13 @@ import {OffscreenWorkerDisplay} from '@spearwolf/offscreen-display/worker.js';
 let cycleDirection = -1; // right:-1 or left:1
+let cycleColors = undefined;
+let cycleColorsRepeat = 1;
 
 let ctx = null;
 
+const GRADIENT_RESOLUTION = 1024;
+
+let gradientCanvas = null;
+let gradientCtx = null;
+let gradientImageData = null;
+
 display.on({
@@ -18,8 +26,18 @@ onCanvas({canvas}, contextAttributes) {
   onFrame({now, canvasWidth: w, canvasHeight: h}) {
+    const _colorSliceWidth = colorSliceWidth < 1 ? Math.round(colorSliceWidth * w) : colorSliceWidth;
     let x = 0;
     while (x < w) {
-      let t = ((now % sliceCycleTime) * cycleDirection * 360) / sliceCycleTime;
-      ctx.fillStyle = `hsl(${(x / w) * 360 + t}, 100%, 50%)`;
-      ctx.fillRect(x, 0, colorSliceWidth, h);
-      x += colorSliceWidth;
+      const xw = x / w;
+      if (cycleColors === undefined) {
+        const t = ((now % sliceCycleTime) * cycleDirection * 360) / sliceCycleTime;
+        ctx.fillStyle = `hsl(${xw * 360 + t}, 100%, 50%)`;
+      } else {
+        const _cycleColorsRepeat = cycleColorsRepeat < 1 ? w / (cycleColorsRepeat * w) : cycleColorsRepeat;
+        const t = ((now % sliceCycleTime) * cycleDirection) / sliceCycleTime;
+        let i = ((xw + t) * _cycleColorsRepeat) % 1;
+        if (i < 0) i += 1;
+        ctx.fillStyle = getGradientColor(i);
+      }
+      ctx.fillRect(x, 0, _colorSliceWidth, h);
+      x += _colorSliceWidth;
     }
@@ -41,2 +59,48 @@ },
   }
+  if ('cycle-colors' in data) {
+    let colors = data['cycle-colors'];
+    if (colors === undefined) {
+      cycleColors = undefined;
+    } else {
+      cycleColors = [...colors.toLowerCase().matchAll(/(#[a-f0-9]+|[a-z]+\([^)]+\)|[a-z]+([^(]|$))( |$)+/g)].map((m) =>
+        m[0].trim(),
+      );
+      createLinearGradientImage(cycleColors);
+    }
+  }
+  if ('cycle-colors-repeat' in data) {
+    cycleColorsRepeat = data['cycle-colors-repeat'];
+  }
 }
+
+function getGradientColor(x) {
+  const i = Math.max(Math.min(Math.floor(x * gradientCanvas.width), gradientCanvas.width - 1), 0) * 4;
+  const r = gradientImageData.data[i];
+  const g = gradientImageData.data[i + 1];
+  const b = gradientImageData.data[i + 2];
+  return `rgb(${r},${g},${b})`;
+}
+
+function createLinearGradientImage(cycleColors) {
+  if (gradientCanvas == null) {
+    gradientCanvas = new OffscreenCanvas(GRADIENT_RESOLUTION, 1);
+    gradientCtx = gradientCanvas.getContext('2d');
+  }
+
+  const gradient = ctx.createLinearGradient(0, 0, gradientCanvas.width, gradientCanvas.height);
+
+  let x = 0;
+  let step = 1 / cycleColors.length;
+
+  for (let i = 0; i < cycleColors.length; i++) {
+    gradient.addColorStop(x, cycleColors[i]);
+    x += step;
+  }
+
+  gradient.addColorStop(1, cycleColors[0]);
+
+  gradientCtx.fillStyle = gradient;
+  gradientCtx.fillRect(0, 0, gradientCanvas.width, gradientCanvas.height);
+
+  gradientImageData = gradientCtx.getImageData(0, 0, gradientCanvas.width, gradientCanvas.height);
+}

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

50061

increased by12.74%

Lines of code

450

increased by19.36%

Number of lines in readme file

33

increased by6.45%

No dependency changes