vue3-word-cloud/index.js

Generates a cloud out of the words.

!function(t,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n(require("vue")):"function"==typeof define&&define.amd?define(["vue"],n):(t="undefined"!=typeof globalThis?globalThis:t||self).VueWordCloud=n(t.Vue)}(this,(function(t){"use strict";function n(t){return"function"==typeof t}function i(){}var r=function(t){this.previousValue=t,this.interrupted=!1,this.interruptHandlers=new Set};r.prototype.throwIfInterrupted=function(){if(this.interrupted)throw new Error},r.prototype.interrupt=function(){this.interrupted||(this.interrupted=!0,this.interruptHandlers.forEach((function(t){try{t()}catch(t){}})))},r.prototype.onInterrupt=function(t){if(this.interrupted&&!this.interruptHandlers.has(t))try{t()}catch(t){}this.interruptHandlers.add(t)};var e="asyncComputed_",o=e+"promise_",u=e+"trigger_";function a(t){return function(){return t}}function f(){return[]}var c={animationDuration:{type:Number,default:1e3},animationEasing:{type:String,default:"ease"},animationOverlap:{type:Number,default:1},color:{type:[String,Function],default:"Black"},createCanvas:{type:Function,default:function(){return document.createElement("canvas")}},createWorker:{type:Function,default:function(t){return new Worker(URL.createObjectURL(new Blob([t])))}},enterAnimation:{type:[Object,String],default:a({opacity:0})},fontFamily:{type:[String,Function],default:"serif"},fontSizeRatio:{type:Number,default:0},fontStyle:{type:[String,Function],default:"normal"},fontVariant:{type:[String,Function],default:"normal"},fontWeight:{type:[String,Function],default:"normal"},leaveAnimation:{type:[Object,String],default:a({opacity:0})},loadFont:{type:Function,default:function(t,n,i,r){return document.fonts.load([n,i,"1px",t].join(" "),r)}},rotation:{type:[Number,Function],default:0},rotationUnit:{type:[String,Function],default:"turn"},spacing:{type:Number,default:0},text:{type:[String,Function],default:""},weight:{type:[Number,Function],default:1},words:{type:Array,default:f}};var s=a(null);function h(t){if(t){var n=typeof t;return"object"===n||"function"===n}return!1}function l(t){return"string"==typeof t}var v={animationOptions:function(){var t,n,i,r=this,e=r.animationDuration,o=r.enterAnimation,u=r.leaveAnimation;if(h(o)&&h(u)){var a=(t=Object.assign({},o,u),n=s,i={},Object.entries(t).forEach((function(r){var e=r[0],o=r[1];i[e]=n(o,e,t)})),i),f=function(t){Object.assign(t.style,o)},c=function(t,n){setTimeout((function(){Object.assign(t.style,a),setTimeout(n,e)}),1)};return{props:{css:!1},on:{beforeAppear:f,appear:c,beforeEnter:f,enter:c,leave:function(t,n){Object.assign(t.style,u),setTimeout(n,e)}}}}return l(o)&&l(u)?{props:{duration:e,appear:!0,appearActiveClass:o,enterActiveClass:o,leaveActiveClass:u}}:{}},normalizedAnimationOverlap:function(){var t=this.animationOverlap;return(t=Math.abs(t))<1&&(t=1/t),t},separateAnimationDelay:function(){var t=this.cloudWords;if(t.length>1){return(this.animationDuration-this.separateAnimationDuration)/(t.length-1)}return 0},separateAnimationDuration:function(){var t=this.cloudWords;if(t.length>0){var n=this.animationDuration,i=this.normalizedAnimationOverlap;return n/Math.min(i,t.length)}return 0}},d=Array.isArray;function m(t){return n(t)?t:a(t)}var p=2*Math.PI,g=p/360;function b(t){return void 0===t}function y(t,n){return t.postMessage(n),function(t){return new Promise((function(n,i){var r,e=function(t){var i=t.data;r(),n(i)},o=function(t){var n=t.error;r(),i(n)};r=function(){t.removeEventListener("message",e),t.removeEventListener("error",o)},t.addEventListener("message",e),t.addEventListener("error",o)}))}(t)}function M(t,n,i){return Math.ceil(t*Math.abs(Math.sin(i))+n*Math.abs(Math.cos(i)))}function w(t,n,i){return Math.ceil(t*Math.abs(Math.cos(i))+n*Math.abs(Math.sin(i)))}function x(t,n,i,r,e){return[t,n,i,r+"px",e].join(" ")}function S(t,n){return Math.ceil(t/n)*n}function j(t,n,i){var r=i().getContext("2d");return r.font=n,r.measureText(t).width}var F=function(t,n,i,r,e,o,u){this.t=t,this.i=n,this.o=i,this.u=r,this.l=e,this.v=o,this.m=u,this.p=1,this.g=0,this.M=0,this.S=0},O={j:{configurable:!0},F:{configurable:!0},O:{configurable:!0},W:{configurable:!0},A:{configurable:!0},B:{configurable:!0},L:{configurable:!0},T:{configurable:!0},P:{configurable:!0},C:{configurable:!0},N:{configurable:!0},k:{configurable:!0},D:{configurable:!0},H:{configurable:!0},_:{configurable:!0},q:{configurable:!0},R:{configurable:!0},U:{configurable:!0},V:{configurable:!0}};O.j.get=function(){return this.p},O.j.set=function(t){this.p!==t&&(this.p=t,this.J=void 0)},O.F.get=function(){return x(this.v,this.l,this.u,this.j,this.o)},O.O.get=function(){return void 0===this.G&&(this.G=j(this.t,x(this.v,this.l,this.u,1,this.o),this.m)),this.G},O.W.get=function(){return this.O*this.j},O.A.get=function(){return this.M*this.j},O.A.set=function(t){this.M=t/this.j},O.B.get=function(){return this.S*this.j},O.B.set=function(t){this.S=t/this.j},O.L.get=function(){return w(this.W,this.j,this.i)},O.T.get=function(){return M(this.W,this.j,this.i)},O.P.get=function(){return this.A-this.L/2},O.C.get=function(){return this.B-this.T/2},O.N.get=function(){return this.g},O.N.set=function(t){this.g!==t&&(this.g=t,this.J=void 0)},O.k.get=function(){return void 0===this.J&&(this.J=function(t,n,i,r,e,o,u,a,f){var c=x(n,i,r,e*=4,o),s=u*e*2,h=s+j(t,c,f),l=s+e,v=f(),d=v.getContext("2d"),m=S(w(h,l,a),4),p=S(M(h,l,a),4);v.width=m,v.height=p,d.translate(m/2,p/2),d.rotate(a),d.font=c,d.textAlign="center",d.textBaseline="middle",d.fillText(t,0,0),s>0&&(d.miterLimit=1,d.lineWidth=s,d.strokeText(t,0,0));for(var g=d.getImageData(0,0,m,p).data,b=[],y=1/0,F=0,O=1/0,E=0,W=m/4,A=p/4,B=0;B<W;++B)for(var L=0;L<A;++L)t:for(var T=0;T<4;++T)for(var P=0;P<4;++P)if(g[4*(m*(4*L+P)+(4*B+T))+3]){b.push([B,L]),y=Math.min(B,y),F=Math.max(B+1,F),O=Math.min(L,O),E=Math.max(L+1,E);break t}return b.length>0?[b.map((function(t){var n=t[0],i=t[1];return[n-y,i-O]})),F-y,E-O,Math.ceil(W/2)-y,Math.ceil(A/2)-O]:[b,0,0,0,0]}(this.t,this.v,this.l,this.u,this.j,this.o,this.N,this.i,this.m)),this.J},O.D.get=function(){return this.k[0]},O.H.get=function(){return this.k[1]},O._.get=function(){return this.k[2]},O.q.get=function(){return this.k[3]},O.R.get=function(){return this.k[4]},O.U.get=function(){return Math.ceil(this.A)-this.q},O.U.set=function(t){this.A=t+this.q},O.V.get=function(){return Math.ceil(this.B)-this.R},O.V.set=function(t){this.B=t+this.R},Object.defineProperties(F.prototype,O);var E={cloudWords:function(t){this.$emit("update:cloudWords",t)},progress:{handler:function(t){this.$emit("update:progress",t)},deep:!0,immediate:!0}};var W={updateElementSize:function(){var t=this.$el;t&&(this.elementWidth=t.offsetWidth,this.elementHeight=t.offsetHeight)}};var A={name:"VueWordCloud",mixins:[function(t){return{data:function(){var n={};return Object.keys(t).forEach((function(t){n[u+t]={}})),n},computed:{},beforeCreate:function(){var e=this,a=new Set;Object.entries(t).forEach((function(t){var f=t[0],c=t[1],s=c.get,h=c.default,l=c.errorHandler;void 0===l&&(l=i);var v,d=!0;e.$options.computed[f]=function(){return this[u+f],this[o+f],h},e.$options.computed[o+f]=function(){var t=this;v&&(v.interrupt(),a.delete(v)),d&&(d=!1,n(h)&&(h=h.call(this)));var i=new r(h);v=i,a.add(v),new Promise((function(n){n(s.call(t,i))})).then((function(n){i.throwIfInterrupted(),h=n,t[u+f]={}})).catch(l)}}))}}}({cloudWords:{get:function(t){var n,r=this,e=this,o=e.elementWidth,u=e.elementHeight,a=e.words,f=e.text,c=e.weight,s=e.rotation,v=e.rotationUnit,M=e.fontFamily,w=e.fontWeight,x=e.fontVariant,S=e.fontStyle,j=e.color,O=e.spacing,E=e.fontSizeRatio,W=e.createCanvas,A=e.loadFont,B=e.createWorker;n=E,E=(n=Math.abs(n))>1?1/n:n;var L=function(t){var n=t[0],i=t[1];return n>i?[1,i/n]:i>n?[n/i,1]:[1,1]}([o,u]);if(o>0&&u>0){var T=m(f),P=m(c),C=m(s),N=m(v),k=m(M),z=m(w),D=m(x),H=m(S),_=m(j);return a=a.map((function(t,n){var i,r,e,o,u,f,c,s,v,m,y;t&&(l(t)?e=t:d(t)?(e=(i=t)[0],o=i[1]):h(t)&&(e=(r=t).text,o=r.weight,u=r.rotation,f=r.rotationUnit,c=r.fontFamily,s=r.fontWeight,v=r.fontVariant,m=r.fontStyle,y=r.color)),b(e)&&(e=T(t,n,a)),b(o)&&(o=P(t,n,a)),b(u)&&(u=C(t,n,a)),b(f)&&(f=N(t,n,a)),b(c)&&(c=k(t,n,a)),b(s)&&(s=z(t,n,a)),b(v)&&(v=D(t,n,a)),b(m)&&(m=H(t,n,a)),b(y)&&(y=_(t,n,a));var M=new F(e,function(){switch(f){case"turn":return u*p;case"deg":return function(t){return t*g}(u)}return u}(),c,s,v,m,W);return Object.assign(M,{I:t,K:o,X:y}),M})),Promise.resolve().then((function(){return Promise.all(a.map((function(t){var n=t.o,i=t.v,r=t.u,e=t.t;return A(n,i,r,e)})))})).catch(i).then((function(){if(a=a.filter((function(t){return t.W>0})).sort((function(t,n){return n.K-t.K})),a.length>0){var n=a[0],i=function(t){return t[(n=t,n.length-1)];var n}(a),e=n.K,f=i.K;if(f<e){var c=E>0?1/E:f>0?e/f:e<0?f/e:1+e-f;a.forEach((function(t){var n,i,r;t.j=(n=t.K,(r=1)+(n-(i=f))*(c-r)/(e-i))}))}a.reduceRight((function(t,n){return n.j<2*t?n.j/=t:(t=n.j,n.j=1),n.Y=t}),1),a.forEach((function(t){t.j*=4}));var s=B('!function(){"use strict";var r=function(t){self.removeEventListener("message",r);var n,e,a,f,i,u=t.data,o=function(){n={},e=0,a=0,f=0,i=0};o();var s=function(){return Math.ceil((e+a)/2)},v=function(){return Math.ceil((f+i)/2)},c=function(){return{left:s(),top:v(),width:a-e,height:i-f}},l=function(r,t,u){r.forEach((function(r){var o=r[0],s=r[1],v=t+o,c=u+s;n[v+"|"+c]=!0,e=Math.min(v,e),a=Math.max(v+1,a),f=Math.min(c,f),i=Math.max(c+1,i)}))},h=function(r,t,e){return function(r,t,n){var e,a,f=r[0],i=r[1],u=t[0],o=t[1];f>i?(e=1,a=i/f):i>f?(a=1,e=f/i):e=a=1;var s=[u,o];if(n(s))return s;for(var v=u,c=o,l=u,h=o,M=v,d=c;;){u-=e,o-=a,v+=e,c+=a;var m=Math.floor(u),g=Math.floor(o),p=Math.ceil(v),E=Math.ceil(c);if(p>M)for(var L=g;L<E;++L){var x=[p,L];if(n(x))return x}if(E>d)for(var y=p;y>m;--y){var w=[y,E];if(n(w))return w}if(m<l)for(var B=E;B>g;--B){var F=[m,B];if(n(F))return F}if(g<h)for(var b=m;b<p;++b){var j=[b,g];if(n(j))return j}l=m,h=g,M=p,d=E}}(u,[t+s(),e+v()],(function(t){var e=t[0],a=t[1];return function(r,t,e){return r.every((function(r){var a=r[0],f=r[1];return!n[t+a+"|"+(e+f)]}))}(r,e,a)}))};self.postMessage({}),self.addEventListener("message",(function(r){self.postMessage({getBounds:c,put:l,findFit:h,clear:o}[r.data.name].apply(null,r.data.args))}))};self.addEventListener("message",r)}();\n'),h={completedWords:0,totalWords:a.length};return Promise.resolve().then((function(){return t.throwIfInterrupted(),r.progress=h,y(s,L)})).then((function(){t.throwIfInterrupted(),h.completedWords++;var n=Promise.resolve();return a.reduce((function(i,r,e){return n=n.then((function(){return r.Y<i.Y?Promise.resolve().then((function(){return y(s,{name:"clear"})})).then((function(){var t=Promise.resolve(),n=i.Y/r.Y;return a.slice(0,e).forEach((function(i){t=t.then((function(){return i.j*=n,y(s,{name:"put",args:[i.D,i.U,i.V]})}))})),t})):y(s,{name:"put",args:[i.D,i.U,i.V]})})).then((function(){return r.N=O,y(s,{name:"findFit",args:[r.D,r.U,r.V]})})).then((function(n){var i=n[0],e=n[1];t.throwIfInterrupted(),h.completedWords++,r.U=i,r.V=e,r.N=0})),r})),n})).then((function(){return y(s,{name:"put",args:[i.D,i.U,i.V]})})).then((function(){return y(s,{name:"getBounds"})})).then((function(t){var n=t.left,i=t.top,r=t.width,e=t.height;if(r>0&&e>0){var f=Math.min(o/r,u/e);a.forEach((function(t){t.A-=n,t.B-=i,t.j*=f}))}var c=new Set;return a.map((function(t){for(var n=t.I,i=t.t,r=t.K,e=t.i,o=t.o,u=t.u,a=t.l,f=t.v,s=t.F,h=t.A,l=t.B,v=t.X,d=JSON.stringify([i,o,u,a,f]);c.has(d);)d+="!";return c.add(d),{key:d,word:n,text:i,weight:r,rotation:e,font:s,color:v,left:h,top:l}}))})).finally((function(){s.terminate()})).finally((function(){t.throwIfInterrupted(),r.progress=null}))}return[]}))}return[]},default:f}})],props:c,data:function(){return{elementWidth:0,elementHeight:0,progress:null}},computed:v,watch:E,mounted:function(){var t,n,i,r,e=this;t=function(){if(e._isDestroyed)return!1;e.updateElementSize()},n=1e3,(i=function(i){requestAnimationFrame((function(){!1!==t()&&setTimeout(i,n)}))},r=function(){for(var t=[],n=arguments.length;n--;)t[n]=arguments[n];return i.call.apply(i,[this,r].concat(t))},r)()},methods:W,render:function(){var n=this,i=n.$slots,r=n.animationEasing,e=n.animationOptions,o=n.cloudWords,u=n.separateAnimationDelay,a=n.separateAnimationDuration;return i=Object.assign({},{default:function(t){return t.text}},i),t.h("div",{style:{height:"100%",position:"relative",width:"100%"}},[t.h("div",{style:{bottom:"50%",position:"absolute",right:"50%",transform:"translate(50%,50%)"}},o.map((function(n,o){var f=n.color,c=n.font,s=n.left,h=n.rotation,l=n.text,v=n.top,d=n.weight,m=n.word;return t.h("transition",Object.assign({},e),[t.h("div",{key:o,style:Object.assign({},{left:s+"px",position:"absolute",top:v+"px"},a>0?{animation:[a+"ms",r,u*o+"ms"].join(" "),transition:["all",a+"ms",r,u*o+"ms"].join(" ")}:{})},[t.h("div",{style:Object.assign({},{bottom:"50%",color:f,font:c,position:"absolute",right:"50%",transform:["translate(50%,50%)","rotate("+h+"rad)"].join(" "),whiteSpace:"nowrap"},a>0?{transition:["all",a+"ms",r,u*o+"ms"].join(" ")}:{})},[i.default({color:f,font:c,left:s,text:l,top:v,weight:d,word:m})])])])})))])}},B=globalThis.window;if(B){var L=B.Vue;L&&L.component(A.name,A)}return A}));