masoneffect 2.0.4 → 2.0.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +2 -2
- package/dist/core/count/index.d.ts +3 -2
- package/dist/core/count/index.d.ts.map +1 -1
- package/dist/core/textToParticle/index.d.ts +3 -3
- package/dist/core/textToParticle/index.d.ts.map +1 -1
- package/dist/core/typing/index.d.ts +3 -2
- package/dist/core/typing/index.d.ts.map +1 -1
- package/dist/core/utils/visibilityManager.d.ts +35 -0
- package/dist/core/utils/visibilityManager.d.ts.map +1 -0
- package/dist/count/core/count/index.d.ts +3 -2
- package/dist/count/core/count/index.d.ts.map +1 -1
- package/dist/count/core/textToParticle/index.d.ts +3 -3
- package/dist/count/core/textToParticle/index.d.ts.map +1 -1
- package/dist/count/core/typing/index.d.ts +3 -2
- package/dist/count/core/typing/index.d.ts.map +1 -1
- package/dist/count/core/utils/visibilityManager.d.ts +35 -0
- package/dist/count/core/utils/visibilityManager.d.ts.map +1 -0
- package/dist/count/index.cjs +1 -1
- package/dist/count/index.mjs +1 -1
- package/dist/index.cjs +1 -1
- package/dist/index.mjs +1 -1
- package/dist/index.umd.min.js +1 -1
- package/dist/react/core/count/index.d.ts +3 -2
- package/dist/react/core/textToParticle/index.d.ts +3 -3
- package/dist/react/core/typing/index.d.ts +3 -2
- package/dist/react/core/utils/visibilityManager.d.ts +34 -0
- package/dist/react/count/core/count/index.d.ts +3 -2
- package/dist/react/count/core/count/index.d.ts.map +1 -1
- package/dist/react/count/core/textToParticle/index.d.ts +3 -3
- package/dist/react/count/core/textToParticle/index.d.ts.map +1 -1
- package/dist/react/count/core/typing/index.d.ts +3 -2
- package/dist/react/count/core/typing/index.d.ts.map +1 -1
- package/dist/react/count/core/utils/visibilityManager.d.ts +35 -0
- package/dist/react/count/core/utils/visibilityManager.d.ts.map +1 -0
- package/dist/react/count/index.cjs +1 -1
- package/dist/react/count/index.mjs +1 -1
- package/dist/react/textToParticle/core/count/index.d.ts +3 -2
- package/dist/react/textToParticle/core/count/index.d.ts.map +1 -1
- package/dist/react/textToParticle/core/textToParticle/index.d.ts +3 -3
- package/dist/react/textToParticle/core/textToParticle/index.d.ts.map +1 -1
- package/dist/react/textToParticle/core/typing/index.d.ts +3 -2
- package/dist/react/textToParticle/core/typing/index.d.ts.map +1 -1
- package/dist/react/textToParticle/core/utils/visibilityManager.d.ts +35 -0
- package/dist/react/textToParticle/core/utils/visibilityManager.d.ts.map +1 -0
- package/dist/react/textToParticle/index.cjs +1 -1
- package/dist/react/textToParticle/index.mjs +1 -1
- package/dist/react/typing/core/count/index.d.ts +3 -2
- package/dist/react/typing/core/count/index.d.ts.map +1 -1
- package/dist/react/typing/core/textToParticle/index.d.ts +3 -3
- package/dist/react/typing/core/textToParticle/index.d.ts.map +1 -1
- package/dist/react/typing/core/typing/index.d.ts +3 -2
- package/dist/react/typing/core/typing/index.d.ts.map +1 -1
- package/dist/react/typing/core/utils/visibilityManager.d.ts +35 -0
- package/dist/react/typing/core/utils/visibilityManager.d.ts.map +1 -0
- package/dist/react/typing/index.cjs +1 -1
- package/dist/react/typing/index.mjs +1 -1
- package/dist/svelte/count/index.cjs +1 -1
- package/dist/svelte/count/index.d.ts +41 -28
- package/dist/svelte/count/index.mjs +120 -42
- package/dist/svelte/index.cjs +1 -1
- package/dist/svelte/index.d.ts +41 -28
- package/dist/svelte/index.mjs +154 -107
- package/dist/svelte/textToParticle/index.cjs +1 -1
- package/dist/svelte/textToParticle/index.d.ts +41 -28
- package/dist/svelte/textToParticle/index.mjs +119 -33
- package/dist/svelte/typing/index.cjs +1 -1
- package/dist/svelte/typing/index.d.ts +41 -28
- package/dist/svelte/typing/index.mjs +117 -32
- package/dist/textToParticle/core/count/index.d.ts +3 -2
- package/dist/textToParticle/core/count/index.d.ts.map +1 -1
- package/dist/textToParticle/core/textToParticle/index.d.ts +3 -3
- package/dist/textToParticle/core/textToParticle/index.d.ts.map +1 -1
- package/dist/textToParticle/core/typing/index.d.ts +3 -2
- package/dist/textToParticle/core/typing/index.d.ts.map +1 -1
- package/dist/textToParticle/core/utils/visibilityManager.d.ts +35 -0
- package/dist/textToParticle/core/utils/visibilityManager.d.ts.map +1 -0
- package/dist/textToParticle/index.cjs +1 -1
- package/dist/textToParticle/index.mjs +1 -1
- package/dist/typing/core/count/index.d.ts +3 -2
- package/dist/typing/core/count/index.d.ts.map +1 -1
- package/dist/typing/core/textToParticle/index.d.ts +3 -3
- package/dist/typing/core/textToParticle/index.d.ts.map +1 -1
- package/dist/typing/core/typing/index.d.ts +3 -2
- package/dist/typing/core/typing/index.d.ts.map +1 -1
- package/dist/typing/core/utils/visibilityManager.d.ts +35 -0
- package/dist/typing/core/utils/visibilityManager.d.ts.map +1 -0
- package/dist/typing/index.cjs +1 -1
- package/dist/typing/index.mjs +1 -1
- package/dist/vue/count/index.cjs +1 -1
- package/dist/vue/count/index.d.ts +41 -28
- package/dist/vue/count/index.mjs +119 -41
- package/dist/vue/index.cjs +1 -1
- package/dist/vue/index.d.ts +41 -28
- package/dist/vue/index.mjs +152 -105
- package/dist/vue/textToParticle/index.cjs +1 -1
- package/dist/vue/textToParticle/index.d.ts +41 -28
- package/dist/vue/textToParticle/index.mjs +119 -33
- package/dist/vue/typing/index.cjs +1 -1
- package/dist/vue/typing/index.d.ts +41 -28
- package/dist/vue/typing/index.mjs +116 -31
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var t=Object.defineProperty,e=(e,i,n)=>((e,i,n)=>i in e?t(e,i,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[i]=n)(e,"symbol"!=typeof i?i+"":i,n);const i=require("svelte");function n(){}function s(t){return t()}function o(){return Object.create(null)}function h(t){t.forEach(s)}function a(t){return"function"==typeof t}function r(t,e){return t!=t?e==e:t!==e||t&&"object"==typeof t||"function"==typeof t}function l(t){t.parentNode&&t.parentNode.removeChild(t)}function c(t,e,i){null==i?t.removeAttribute(e):t.getAttribute(e)!==i&&t.setAttribute(e,i)}let f;function d(t){f=t}const u=[],p=[];let g=[];const m=[],v=Promise.resolve();let x=!1;function y(t){g.push(t)}const w=new Set;let b=0;function $(){if(0!==b)return;const t=f;do{try{for(;b<u.length;){const t=u[b];b++,d(t),M(t.$$)}}catch(e){throw u.length=0,b=0,e}for(d(null),u.length=0,b=0;p.length;)p.pop()();for(let t=0;t<g.length;t+=1){const e=g[t];w.has(e)||(w.add(e),e())}g.length=0}while(u.length);for(;m.length;)m.pop()();x=!1,w.clear(),d(t)}function M(t){if(null!==t.fragment){t.update(),h(t.before_update);const e=t.dirty;t.dirty=[-1],t.fragment&&t.fragment.p(t.ctx,e),t.after_update.forEach(y)}}const R=new Set;function C(t,e){const i=t.$$;null!==i.fragment&&(!function(t){const e=[],i=[];g.forEach(n=>-1===t.indexOf(n)?e.push(n):i.push(n)),i.forEach(t=>t()),g=e}(i.after_update),h(i.on_destroy),i.fragment&&i.fragment.d(e),i.on_destroy=i.fragment=null,i.ctx=[])}function S(t,e){-1===t.$$.dirty[0]&&(u.push(t),x||(x=!0,v.then($)),t.$$.dirty.fill(0)),t.$$.dirty[e/31|0]|=1<<e%31}function P(t,e,i,r,c,u,p=null,g=[-1]){const m=f;d(t);const v=t.$$={fragment:null,ctx:[],props:u,update:n,not_equal:c,bound:o(),on_mount:[],on_destroy:[],on_disconnect:[],before_update:[],after_update:[],context:new Map(e.context||(m?m.$$.context:[])),callbacks:o(),dirty:g,skip_bound:!1,root:e.target||m.$$.root};p&&p(v.root);let x=!1;if(v.ctx=i?i(t,e.props||{},(e,i,...n)=>{const s=n.length?n[0]:i;return v.ctx&&c(v.ctx[e],v.ctx[e]=s)&&(!v.skip_bound&&v.bound[e]&&v.bound[e](s),x&&S(t,e)),i}):[],v.update(),x=!0,h(v.before_update),v.fragment=!!r&&r(v.ctx),e.target){if(e.hydrate){const t=(M=e.target,Array.from(M.childNodes));v.fragment&&v.fragment.l(t),t.forEach(l)}else v.fragment&&v.fragment.c();e.intro&&((w=t.$$.fragment)&&w.i&&(R.delete(w),w.i(b))),function(t,e,i){const{fragment:n,after_update:o}=t.$$;n&&n.m(e,i),y(()=>{const e=t.$$.on_mount.map(s).filter(a);t.$$.on_destroy?t.$$.on_destroy.push(...e):h(e),t.$$.on_mount=[]}),o.forEach(y)}(t,e.target,e.anchor),$()}var w,b,M;d(m)}class _{constructor(){e(this,"$$"),e(this,"$$set")}$destroy(){C(this,1),this.$destroy=n}$on(t,e){if(!a(e))return n;const i=this.$$.callbacks[t]||(this.$$.callbacks[t]=[]);return i.push(e),()=>{const t=i.indexOf(e);-1!==t&&i.splice(t,1)}}$set(t){var e;this.$$set&&(e=t,0!==Object.keys(e).length)&&(this.$$.skip_bound=!0,this.$$set(t),this.$$.skip_bound=!1)}}function z(t,e){let i=null;return function(...n){null!==i&&clearTimeout(i),i=setTimeout(()=>{i=null,t.apply(this,n)},e)}}"undefined"!=typeof window&&(window.__svelte||(window.__svelte={v:new Set})).v.add("4");class E{constructor(t,e={}){if(this.container="string"==typeof t?document.querySelector(t):t,!this.container)throw new Error("Container element not found");this.config={text:e.text||"mason effect",densityStep:e.densityStep??2,maxParticles:e.maxParticles??3200,pointSize:e.pointSize??.5,ease:e.ease??.05,repelRadius:e.repelRadius??150,repelStrength:e.repelStrength??1,particleColor:e.particleColor||"#fff",fontFamily:e.fontFamily||"Inter, system-ui, Arial",fontSize:e.fontSize||null,width:e.width||null,height:e.height||null,devicePixelRatio:e.devicePixelRatio??null,onReady:e.onReady||null,onUpdate:e.onUpdate||null},this.canvas=document.createElement("canvas");const i=this.canvas.getContext("2d",{willReadFrequently:!0});if(!i)throw new Error("Canvas context not available");this.ctx=i,this.container.appendChild(this.canvas),this.canvas.style.display="block",this.offCanvas=document.createElement("canvas");const n=this.offCanvas.getContext("2d",{willReadFrequently:!0});if(!n)throw new Error("Offscreen canvas context not available");this.offCtx=n,this.W=0,this.H=0,this.DPR=this.config.devicePixelRatio||Math.min(window.devicePixelRatio||1,1.8),this.particles=[],this.mouse={x:0,y:0,down:!1},this.animationId=null,this.isRunning=!1,this.isVisible=!1,this.intersectionObserver=null,this.debounceDelay=e.debounceDelay??150;const s=this.handleResize.bind(this);this.handleResize=z(s,this.debounceDelay),this.handleMouseMove=this.handleMouseMove.bind(this),this.handleMouseLeave=this.handleMouseLeave.bind(this),this.handleMouseDown=this.handleMouseDown.bind(this),this.handleMouseUp=this.handleMouseUp.bind(this),this._debouncedMorph=z(this._morphInternal.bind(this),this.debounceDelay),this._debouncedUpdateConfig=z(this._updateConfigInternal.bind(this),this.debounceDelay),this.init()}init(){this.resize(),this.setupEventListeners(),this.setupIntersectionObserver(),this.config.onReady&&this.config.onReady(this)}setupIntersectionObserver(){if("undefined"==typeof window||void 0===window.IntersectionObserver)return this.isVisible=!0,void this.start();this.intersectionObserver||(this.intersectionObserver=new IntersectionObserver(t=>{for(const e of t)e.target===this.container&&(e.isIntersecting?(this.isVisible=!0,this.start()):(this.isVisible=!1,this.stop()))},{threshold:.1}),this.intersectionObserver.observe(this.container))}resize(){const t=this.config.width||this.container.clientWidth||window.innerWidth,e=this.config.height||this.container.clientHeight||.7*window.innerHeight;if(t<=0||e<=0)return;this.W=Math.floor(t*this.DPR),this.H=Math.floor(e*this.DPR);const i=4096;if(this.W>i||this.H>i){const t=Math.min(i/this.W,i/this.H);this.W=Math.floor(this.W*t),this.H=Math.floor(this.H*t),this.DPR=this.DPR*t}this.canvas.width=this.W,this.canvas.height=this.H,this.canvas.style.width=t+"px",this.canvas.style.height=e+"px",this.W>0&&this.H>0&&(this.buildTargets(),this.particles.length||this.initParticles())}measureTextFit(t,e,i,n){this.offCtx.font=`400 ${t}px ${this.config.fontFamily}`;const s=e.split("\n"),o=t,h=.1*t,a=.05*t;let r=0;for(const c of s){if(0===c.length)continue;const t=this.offCtx.measureText(c).width+a*(c.length>0?c.length-1:0);r=Math.max(r,t)}const l=s.length>0?o*s.length+h*(s.length-1):o;return{width:r,height:l,fits:r<=i&&l<=n}}findOptimalFontSize(t,e,i,n){if(this.measureTextFit(n,t,e,i).fits)return n;if(n<=12)return 12;let s=12,o=n,h=12;for(;s<=o;){const n=Math.floor((s+o)/2);this.measureTextFit(n,t,e,i).fits?(h=n,s=n+1):o=n-1}return h}buildTargets(){if(this.W<=0||this.H<=0)return;const t=this.config.text;this.offCanvas.width=this.W,this.offCanvas.height=this.H,this.offCtx.clearRect(0,0,this.offCanvas.width,this.offCanvas.height);const e=Math.min(this.W,this.H),i=this.config.fontSize||Math.max(80,Math.floor(.18*e)),n=this.W-80,s=this.H-80,o=this.findOptimalFontSize(t,n,s,i);this.offCtx.fillStyle="#ffffff",this.offCtx.textAlign="center",this.offCtx.textBaseline="middle",this.offCtx.font=`400 ${o}px ${this.config.fontFamily}`;const h=t.split("\n"),a=o,r=.1*o,l=.05*o,c=h.length>0?a*h.length+r*(h.length-1):a;let f=this.H/2-c/2+a/2;for(const g of h){if(0===g.length){f+=a+r;continue}const t=g.split(""),e=this.offCtx.measureText(g).width+l*(t.length>0?t.length-1:0);let i=this.W/2-e/2;for(const n of t)this.offCtx.fillText(n,i+this.offCtx.measureText(n).width/2,f),i+=this.offCtx.measureText(n).width+l;f+=a+r}const d=Math.max(2,this.config.densityStep),u=this.offCtx.getImageData(0,0,this.W,this.H).data,p=[];for(let g=0;g<this.H;g+=d)for(let t=0;t<this.W;t+=d){const e=4*(g*this.W+t);u[e]+u[e+1]+u[e+2]>600&&p.push({x:t,y:g})}for(;p.length>this.config.maxParticles;)p.splice(Math.floor(Math.random()*p.length),1);if(this.particles.length<p.length){const t=p.length-this.particles.length;for(let e=0;e<t;e++)this.particles.push(this.makeParticle())}else this.particles.length>p.length&&(this.particles.length=p.length);for(let g=0;g<this.particles.length;g++){const t=this.particles[g],e=p[g];t.tx=e.x,t.ty=e.y}}makeParticle(){const t=Math.random()*this.W,e=Math.random()*this.H;return{x:t,y:e,vx:0,vy:0,tx:t,ty:e,initialX:t,initialY:e,j:Math.random()*Math.PI*2}}initParticles(){for(const t of this.particles){const e=Math.random()*this.W,i=Math.random()*this.H;t.x=e,t.y=i,t.vx=t.vy=0,t.initialX=e,t.initialY=i}}scatter(){for(const t of this.particles)void 0!==t.initialX&&void 0!==t.initialY?(t.tx=t.initialX,t.ty=t.initialY):(t.initialX=t.x,t.initialY=t.y,t.tx=t.initialX,t.ty=t.initialY)}morph(t){this._debouncedMorph(t)}_morphInternal(t){if(0!==this.W&&0!==this.H||this.resize(),"string"==typeof t)this.config.text=t,this.buildTargets();else if(t&&"object"==typeof t){const e=void 0!==t.text;this.config={...this.config,...t},e&&this.buildTargets()}else this.buildTargets()}update(){this.ctx.clearRect(0,0,this.W,this.H);for(const e of this.particles){let t=(e.tx-e.x)*this.config.ease,i=(e.ty-e.y)*this.config.ease;if(this.mouse.x||this.mouse.y){const n=e.x-this.mouse.x,s=e.y-this.mouse.y,o=n*n+s*s,h=this.config.repelRadius*this.DPR;if(o<h*h){const e=Math.sqrt(o)+1e-4,a=(this.mouse.down?-1:1)*this.config.repelStrength*(1-e/h);t+=n/e*a*6,i+=s/e*a*6}}e.j+=2,t+=.05*Math.cos(e.j),i+=.05*Math.sin(1.3*e.j),e.vx=(e.vx+t)*Math.random(),e.vy=(e.vy+i)*Math.random(),e.x+=e.vx,e.y+=e.vy}this.ctx.fillStyle=this.config.particleColor;const t=this.config.pointSize*this.DPR;for(const e of this.particles)this.ctx.beginPath(),this.ctx.arc(e.x,e.y,t,0,2*Math.PI),this.ctx.fill();this.config.onUpdate&&this.config.onUpdate(this)}animate(){this.isRunning&&(this.update(),this.animationId=requestAnimationFrame(()=>this.animate()))}start(){this.isRunning||(this.isRunning=!0,this.animate())}stop(){this.isRunning=!1,this.animationId&&(cancelAnimationFrame(this.animationId),this.animationId=null)}setupEventListeners(){window.addEventListener("resize",this.handleResize),this.canvas.addEventListener("mousemove",this.handleMouseMove),this.canvas.addEventListener("mouseleave",this.handleMouseLeave),this.canvas.addEventListener("mousedown",this.handleMouseDown),window.addEventListener("mouseup",this.handleMouseUp)}removeEventListeners(){window.removeEventListener("resize",this.handleResize),this.canvas.removeEventListener("mousemove",this.handleMouseMove),this.canvas.removeEventListener("mouseleave",this.handleMouseLeave),this.canvas.removeEventListener("mousedown",this.handleMouseDown),window.removeEventListener("mouseup",this.handleMouseUp)}handleResize(){this.resize()}handleMouseMove(t){const e=this.canvas.getBoundingClientRect();this.mouse.x=(t.clientX-e.left)*this.DPR,this.mouse.y=(t.clientY-e.top)*this.DPR}handleMouseLeave(){this.mouse.x=this.mouse.y=0}handleMouseDown(){this.mouse.down=!0}handleMouseUp(){this.mouse.down=!1}updateConfig(t){this._debouncedUpdateConfig(t)}_updateConfigInternal(t){this.config={...this.config,...t},t.text&&this.buildTargets()}destroy(){this.stop(),this.removeEventListeners(),this.intersectionObserver&&(this.intersectionObserver.disconnect(),this.intersectionObserver=null),this.canvas&&this.canvas.parentNode&&this.canvas.parentNode.removeChild(this.canvas)}}function D(t){let e;return{c(){var i;i="div",e=document.createElement(i),c(e,"class",t[0]),c(e,"style",t[1])},m(i,n){!function(t,e,i){t.insertBefore(e,i||null)}(i,e,n),t[21](e)},p(t,[i]){1&i&&c(e,"class",t[0]),2&i&&c(e,"style",t[1])},i:n,o:n,d(i){i&&l(e),t[21](null)}}}function W(t,e,n){let{text:s="mason effect"}=e,{densityStep:o=2}=e,{maxParticles:h=3200}=e,{pointSize:a=.5}=e,{ease:r=.05}=e,{repelRadius:l=150}=e,{repelStrength:c=1}=e,{particleColor:f="#fff"}=e,{fontFamily:d="Inter, system-ui, Arial"}=e,{fontSize:u=null}=e,{width:g=null}=e,{height:m=null}=e,{devicePixelRatio:v=null}=e,{className:x=""}=e,{style:y={}}=e;const w=i.createEventDispatcher();let b,$=null;return i.onMount(()=>{if(!b)return;n(20,$=new E(b,{text:s,densityStep:o,maxParticles:h,pointSize:a,ease:r,repelRadius:l,repelStrength:c,particleColor:f,fontFamily:d,fontSize:u,width:g,height:m,devicePixelRatio:v,onReady:t=>{w("ready",t)},onUpdate:t=>{w("update",t)}}))}),i.onDestroy(()=>{$&&($.destroy(),n(20,$=null))}),t.$$set=t=>{"text"in t&&n(3,s=t.text),"densityStep"in t&&n(4,o=t.densityStep),"maxParticles"in t&&n(5,h=t.maxParticles),"pointSize"in t&&n(6,a=t.pointSize),"ease"in t&&n(7,r=t.ease),"repelRadius"in t&&n(8,l=t.repelRadius),"repelStrength"in t&&n(9,c=t.repelStrength),"particleColor"in t&&n(10,f=t.particleColor),"fontFamily"in t&&n(11,d=t.fontFamily),"fontSize"in t&&n(12,u=t.fontSize),"width"in t&&n(13,g=t.width),"height"in t&&n(14,m=t.height),"devicePixelRatio"in t&&n(15,v=t.devicePixelRatio),"className"in t&&n(0,x=t.className),"style"in t&&n(1,y=t.style)},t.$$.update=()=>{1114104&t.$$.dirty&&$&&$.updateConfig({text:s,densityStep:o,maxParticles:h,pointSize:a,ease:r,repelRadius:l,repelStrength:c,particleColor:f,fontFamily:d,fontSize:u,width:g,height:m,devicePixelRatio:v})},[x,y,b,s,o,h,a,r,l,c,f,d,u,g,m,v,function(t){$&&$.morph(t)},function(){$&&$.scatter()},function(t){$&&$.updateConfig(t)},function(){$&&($.destroy(),n(20,$=null))},$,function(t){p[t?"unshift":"push"](()=>{b=t,n(2,b)})}]}module.exports=class extends _{constructor(t){super(),P(this,t,W,D,r,{text:3,densityStep:4,maxParticles:5,pointSize:6,ease:7,repelRadius:8,repelStrength:9,particleColor:10,fontFamily:11,fontSize:12,width:13,height:14,devicePixelRatio:15,className:0,style:1,morph:16,scatter:17,updateConfig:18,destroy:19})}get morph(){return this.$$.ctx[16]}get scatter(){return this.$$.ctx[17]}get updateConfig(){return this.$$.ctx[18]}get destroy(){return this.$$.ctx[19]}};
|
|
1
|
+
"use strict";var t=Object.defineProperty,e=(e,i,n)=>((e,i,n)=>i in e?t(e,i,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[i]=n)(e,"symbol"!=typeof i?i+"":i,n);const i=require("svelte");function n(){}function s(t){return t()}function o(){return Object.create(null)}function h(t){t.forEach(s)}function a(t){return"function"==typeof t}function r(t,e){return t!=t?e==e:t!==e||t&&"object"==typeof t||"function"==typeof t}function l(t){t.parentNode&&t.parentNode.removeChild(t)}function c(t,e,i){null==i?t.removeAttribute(e):t.getAttribute(e)!==i&&t.setAttribute(e,i)}let d;function u(t){d=t}const f=[],p=[];let g=[];const m=[],v=Promise.resolve();let y=!1;function x(t){g.push(t)}const b=new Set;let w=0;function M(){if(0!==w)return;const t=d;do{try{for(;w<f.length;){const t=f[w];w++,u(t),$(t.$$)}}catch(e){throw f.length=0,w=0,e}for(u(null),f.length=0,w=0;p.length;)p.pop()();for(let t=0;t<g.length;t+=1){const e=g[t];b.has(e)||(b.add(e),e())}g.length=0}while(f.length);for(;m.length;)m.pop()();y=!1,b.clear(),u(t)}function $(t){if(null!==t.fragment){t.update(),h(t.before_update);const e=t.dirty;t.dirty=[-1],t.fragment&&t.fragment.p(t.ctx,e),t.after_update.forEach(x)}}const C=new Set;function R(t,e){const i=t.$$;null!==i.fragment&&(!function(t){const e=[],i=[];g.forEach(n=>-1===t.indexOf(n)?e.push(n):i.push(n)),i.forEach(t=>t()),g=e}(i.after_update),h(i.on_destroy),i.fragment&&i.fragment.d(e),i.on_destroy=i.fragment=null,i.ctx=[])}function P(t,e){-1===t.$$.dirty[0]&&(f.push(t),y||(y=!0,v.then(M)),t.$$.dirty.fill(0)),t.$$.dirty[e/31|0]|=1<<e%31}function S(t,e,i,r,c,f,p=null,g=[-1]){const m=d;u(t);const v=t.$$={fragment:null,ctx:[],props:f,update:n,not_equal:c,bound:o(),on_mount:[],on_destroy:[],on_disconnect:[],before_update:[],after_update:[],context:new Map(e.context||(m?m.$$.context:[])),callbacks:o(),dirty:g,skip_bound:!1,root:e.target||m.$$.root};p&&p(v.root);let y=!1;if(v.ctx=i?i(t,e.props||{},(e,i,...n)=>{const s=n.length?n[0]:i;return v.ctx&&c(v.ctx[e],v.ctx[e]=s)&&(!v.skip_bound&&v.bound[e]&&v.bound[e](s),y&&P(t,e)),i}):[],v.update(),y=!0,h(v.before_update),v.fragment=!!r&&r(v.ctx),e.target){if(e.hydrate){const t=($=e.target,Array.from($.childNodes));v.fragment&&v.fragment.l(t),t.forEach(l)}else v.fragment&&v.fragment.c();e.intro&&((b=t.$$.fragment)&&b.i&&(C.delete(b),b.i(w))),function(t,e,i){const{fragment:n,after_update:o}=t.$$;n&&n.m(e,i),x(()=>{const e=t.$$.on_mount.map(s).filter(a);t.$$.on_destroy?t.$$.on_destroy.push(...e):h(e),t.$$.on_mount=[]}),o.forEach(x)}(t,e.target,e.anchor),M()}var b,w,$;u(m)}class H{constructor(){e(this,"$$"),e(this,"$$set")}$destroy(){R(this,1),this.$destroy=n}$on(t,e){if(!a(e))return n;const i=this.$$.callbacks[t]||(this.$$.callbacks[t]=[]);return i.push(e),()=>{const t=i.indexOf(e);-1!==t&&i.splice(t,1)}}$set(t){var e;this.$$set&&(e=t,0!==Object.keys(e).length)&&(this.$$.skip_bound=!0,this.$$set(t),this.$$.skip_bound=!1)}}"undefined"!=typeof window&&(window.__svelte||(window.__svelte={v:new Set})).v.add("4");class _{constructor(t,e={}){this.container=t,this.options={threshold:e.threshold??.1,rootMargin:e.rootMargin??"0px",onVisible:e.onVisible,onHidden:e.onHidden},this.intersectionObserver=null,this.visibilityChangeHandler=null,this.isVisible=!1,this.isPageVisible="undefined"==typeof document||!document.hidden,this.setupIntersectionObserver(),this.setupPageVisibility()}setupIntersectionObserver(){if("undefined"==typeof window||void 0===window.IntersectionObserver)return this.isVisible=!0,void(this.isPageVisible&&this.options.onVisible&&this.options.onVisible());this.intersectionObserver=new IntersectionObserver(t=>{for(const e of t)e.target===this.container&&(e.isIntersecting?(this.isVisible=!0,this.isPageVisible&&this.options.onVisible&&this.options.onVisible()):(this.isVisible=!1,this.options.onHidden&&this.options.onHidden()))},{threshold:this.options.threshold,rootMargin:this.options.rootMargin}),this.intersectionObserver.observe(this.container)}setupPageVisibility(){"undefined"!=typeof document&&(this.visibilityChangeHandler=()=>{const t=this.isPageVisible;this.isPageVisible=!document.hidden,document.hidden?this.options.onHidden&&this.options.onHidden():t!==this.isPageVisible&&this.isVisible&&this.options.onVisible&&this.options.onVisible()},document.addEventListener("visibilitychange",this.visibilityChangeHandler),document.hidden&&this.isVisible&&this.options.onHidden&&this.options.onHidden())}getIsVisible(){return this.isVisible&&this.isPageVisible}updateOptions(t){this.options={...this.options,...t},this.intersectionObserver&&(this.intersectionObserver.disconnect(),this.intersectionObserver=null),this.setupIntersectionObserver()}destroy(){this.intersectionObserver&&(this.intersectionObserver.disconnect(),this.intersectionObserver=null),this.visibilityChangeHandler&&"undefined"!=typeof document&&(document.removeEventListener("visibilitychange",this.visibilityChangeHandler),this.visibilityChangeHandler=null)}}function z(t,e){let i=null;return function(...n){null!==i&&clearTimeout(i),i=setTimeout(()=>{i=null,t.apply(this,n)},e)}}class E{constructor(t,e={}){if(this.container="string"==typeof t?document.querySelector(t):t,!this.container)throw new Error("Container element not found");this.config={text:e.text||"mason effect",densityStep:e.densityStep??2,maxParticles:e.maxParticles??3200,pointSize:e.pointSize??.5,ease:e.ease??.05,repelRadius:e.repelRadius??150,repelStrength:e.repelStrength??1,particleColor:e.particleColor||"#fff",fontFamily:e.fontFamily||"Inter, system-ui, Arial",fontSize:e.fontSize||null,width:e.width||null,height:e.height||null,devicePixelRatio:e.devicePixelRatio??null,onReady:e.onReady||null,onUpdate:e.onUpdate||null},this.canvas=document.createElement("canvas");const i=this.canvas.getContext("2d",{willReadFrequently:!0});if(!i)throw new Error("Canvas context not available");this.ctx=i,this.container.appendChild(this.canvas),this.canvas.style.display="block",this.offCanvas=document.createElement("canvas");const n=this.offCanvas.getContext("2d",{willReadFrequently:!0});if(!n)throw new Error("Offscreen canvas context not available");this.offCtx=n,this.W=0,this.H=0,this.DPR=this.config.devicePixelRatio||Math.min(window.devicePixelRatio||1,1.8),this.particles=[],this.mouse={x:0,y:0,down:!1},this.animationId=null,this.isRunning=!1,this.visibilityManager=null,this.debounceDelay=e.debounceDelay??150;const s=this.handleResize.bind(this);this.handleResize=z(s,this.debounceDelay),this.handleMouseMove=this.handleMouseMove.bind(this),this.handleMouseLeave=this.handleMouseLeave.bind(this),this.handleMouseDown=this.handleMouseDown.bind(this),this.handleMouseUp=this.handleMouseUp.bind(this),this._debouncedMorph=z(this._morphInternal.bind(this),this.debounceDelay),this._debouncedUpdateConfig=z(this._updateConfigInternal.bind(this),this.debounceDelay),this.init()}init(){this.resize(),this.setupEventListeners(),this.setupVisibilityManager(),this.config.onReady&&this.config.onReady(this)}setupVisibilityManager(){this.visibilityManager=new _(this.container,{threshold:.1,onVisible:()=>{this.start()},onHidden:()=>{this.stop()}})}resize(){const t=this.config.width||this.container.clientWidth||window.innerWidth,e=this.config.height||this.container.clientHeight||.7*window.innerHeight;if(t<=0||e<=0)return;this.W=Math.floor(t*this.DPR),this.H=Math.floor(e*this.DPR);const i=4096;if(this.W>i||this.H>i){const t=Math.min(i/this.W,i/this.H);this.W=Math.floor(this.W*t),this.H=Math.floor(this.H*t),this.DPR=this.DPR*t}this.canvas.width=this.W,this.canvas.height=this.H,this.canvas.style.width=t+"px",this.canvas.style.height=e+"px",this.W>0&&this.H>0&&(this.buildTargets(),this.particles.length||this.initParticles())}measureTextFit(t,e,i,n){this.offCtx.font=`400 ${t}px ${this.config.fontFamily}`;const s=e.split("\n"),o=t,h=.1*t,a=.05*t;let r=0;for(const c of s){if(0===c.length)continue;const t=this.offCtx.measureText(c).width+a*(c.length>0?c.length-1:0);r=Math.max(r,t)}const l=s.length>0?o*s.length+h*(s.length-1):o;return{width:r,height:l,fits:r<=i&&l<=n}}findOptimalFontSize(t,e,i,n){if(this.measureTextFit(n,t,e,i).fits)return n;if(n<=12)return 12;let s=12,o=n,h=12;for(;s<=o;){const n=Math.floor((s+o)/2);this.measureTextFit(n,t,e,i).fits?(h=n,s=n+1):o=n-1}return h}buildTargets(){if(this.W<=0||this.H<=0)return;const t=this.config.text;this.offCanvas.width=this.W,this.offCanvas.height=this.H,this.offCtx.clearRect(0,0,this.offCanvas.width,this.offCanvas.height);const e=Math.min(this.W,this.H),i=this.config.fontSize||Math.max(80,Math.floor(.18*e)),n=this.W-80,s=this.H-80,o=this.findOptimalFontSize(t,n,s,i);this.offCtx.fillStyle="#ffffff",this.offCtx.textAlign="center",this.offCtx.textBaseline="middle",this.offCtx.font=`400 ${o}px ${this.config.fontFamily}`;const h=t.split("\n"),a=o,r=.1*o,l=.05*o,c=h.length>0?a*h.length+r*(h.length-1):a;let d=this.H/2-c/2+a/2;for(const g of h){if(0===g.length){d+=a+r;continue}const t=g.split(""),e=this.offCtx.measureText(g).width+l*(t.length>0?t.length-1:0);let i=this.W/2-e/2;for(const n of t)this.offCtx.fillText(n,i+this.offCtx.measureText(n).width/2,d),i+=this.offCtx.measureText(n).width+l;d+=a+r}const u=Math.max(2,this.config.densityStep),f=this.offCtx.getImageData(0,0,this.W,this.H).data,p=[];for(let g=0;g<this.H;g+=u)for(let t=0;t<this.W;t+=u){const e=4*(g*this.W+t);f[e]+f[e+1]+f[e+2]>600&&p.push({x:t,y:g})}for(;p.length>this.config.maxParticles;)p.splice(Math.floor(Math.random()*p.length),1);if(this.particles.length<p.length){const t=p.length-this.particles.length;for(let e=0;e<t;e++)this.particles.push(this.makeParticle())}else this.particles.length>p.length&&(this.particles.length=p.length);for(let g=0;g<this.particles.length;g++){const t=this.particles[g],e=p[g];t.tx=e.x,t.ty=e.y}}makeParticle(){const t=Math.random()*this.W,e=Math.random()*this.H;return{x:t,y:e,vx:0,vy:0,tx:t,ty:e,initialX:t,initialY:e,j:Math.random()*Math.PI*2}}initParticles(){for(const t of this.particles){const e=Math.random()*this.W,i=Math.random()*this.H;t.x=e,t.y=i,t.vx=t.vy=0,t.initialX=e,t.initialY=i}}scatter(){for(const t of this.particles)void 0!==t.initialX&&void 0!==t.initialY?(t.tx=t.initialX,t.ty=t.initialY):(t.initialX=t.x,t.initialY=t.y,t.tx=t.initialX,t.ty=t.initialY)}morph(t){this._debouncedMorph(t)}_morphInternal(t){if(0!==this.W&&0!==this.H||this.resize(),"string"==typeof t)this.config.text=t,this.buildTargets();else if(t&&"object"==typeof t){const e=void 0!==t.text;this.config={...this.config,...t},e&&this.buildTargets()}else this.buildTargets()}update(){this.ctx.clearRect(0,0,this.W,this.H);for(const n of this.particles){let t=(n.tx-n.x)*this.config.ease,e=(n.ty-n.y)*this.config.ease;if(this.mouse.x||this.mouse.y){const i=n.x-this.mouse.x,s=n.y-this.mouse.y,o=i*i+s*s,h=this.config.repelRadius*this.DPR;if(o<h*h){const n=Math.sqrt(o)+1e-4,a=(this.mouse.down?-1:1)*this.config.repelStrength*(1-n/h);t+=i/n*a*6,e+=s/n*a*6}}n.j+=2,t+=.05*Math.cos(n.j),e+=.05*Math.sin(1.3*n.j),n.vx=(n.vx+t)*Math.random(),n.vy=(n.vy+e)*Math.random(),n.x+=n.vx,n.y+=n.vy}this.ctx.fillStyle=this.config.particleColor;const t=Math.min(this.W,this.H)/this.DPR,e=Math.max(.5,Math.min(2,t/1920)),i=this.config.pointSize*this.DPR*e;for(const n of this.particles)this.ctx.beginPath(),this.ctx.arc(n.x,n.y,i,0,2*Math.PI),this.ctx.fill();this.config.onUpdate&&this.config.onUpdate(this)}animate(){this.isRunning&&(this.update(),this.animationId=requestAnimationFrame(()=>this.animate()))}start(){this.isRunning||(this.isRunning=!0,this.animate())}stop(){this.isRunning=!1,this.animationId&&(cancelAnimationFrame(this.animationId),this.animationId=null)}setupEventListeners(){window.addEventListener("resize",this.handleResize),this.canvas.addEventListener("mousemove",this.handleMouseMove),this.canvas.addEventListener("mouseleave",this.handleMouseLeave),this.canvas.addEventListener("mousedown",this.handleMouseDown),window.addEventListener("mouseup",this.handleMouseUp)}removeEventListeners(){window.removeEventListener("resize",this.handleResize),this.canvas.removeEventListener("mousemove",this.handleMouseMove),this.canvas.removeEventListener("mouseleave",this.handleMouseLeave),this.canvas.removeEventListener("mousedown",this.handleMouseDown),window.removeEventListener("mouseup",this.handleMouseUp)}handleResize(){this.resize()}handleMouseMove(t){const e=this.canvas.getBoundingClientRect();this.mouse.x=(t.clientX-e.left)*this.DPR,this.mouse.y=(t.clientY-e.top)*this.DPR}handleMouseLeave(){this.mouse.x=this.mouse.y=0}handleMouseDown(){this.mouse.down=!0}handleMouseUp(){this.mouse.down=!1}updateConfig(t){this._debouncedUpdateConfig(t)}_updateConfigInternal(t){this.config={...this.config,...t},t.text&&this.buildTargets()}destroy(){this.stop(),this.removeEventListeners(),this.visibilityManager&&(this.visibilityManager.destroy(),this.visibilityManager=null),this.canvas&&this.canvas.parentNode&&this.canvas.parentNode.removeChild(this.canvas)}}function V(t){let e;return{c(){var i;i="div",e=document.createElement(i),c(e,"class",t[0]),c(e,"style",t[1])},m(i,n){!function(t,e,i){t.insertBefore(e,i||null)}(i,e,n),t[21](e)},p(t,[i]){1&i&&c(e,"class",t[0]),2&i&&c(e,"style",t[1])},i:n,o:n,d(i){i&&l(e),t[21](null)}}}function D(t,e,n){let{text:s="mason effect"}=e,{densityStep:o=2}=e,{maxParticles:h=3200}=e,{pointSize:a=.5}=e,{ease:r=.05}=e,{repelRadius:l=150}=e,{repelStrength:c=1}=e,{particleColor:d="#fff"}=e,{fontFamily:u="Inter, system-ui, Arial"}=e,{fontSize:f=null}=e,{width:g=null}=e,{height:m=null}=e,{devicePixelRatio:v=null}=e,{className:y=""}=e,{style:x={}}=e;const b=i.createEventDispatcher();let w,M=null;return i.onMount(()=>{if(!w)return;n(20,M=new E(w,{text:s,densityStep:o,maxParticles:h,pointSize:a,ease:r,repelRadius:l,repelStrength:c,particleColor:d,fontFamily:u,fontSize:f,width:g,height:m,devicePixelRatio:v,onReady:t=>{b("ready",t)},onUpdate:t=>{b("update",t)}}))}),i.onDestroy(()=>{M&&(M.destroy(),n(20,M=null))}),t.$$set=t=>{"text"in t&&n(3,s=t.text),"densityStep"in t&&n(4,o=t.densityStep),"maxParticles"in t&&n(5,h=t.maxParticles),"pointSize"in t&&n(6,a=t.pointSize),"ease"in t&&n(7,r=t.ease),"repelRadius"in t&&n(8,l=t.repelRadius),"repelStrength"in t&&n(9,c=t.repelStrength),"particleColor"in t&&n(10,d=t.particleColor),"fontFamily"in t&&n(11,u=t.fontFamily),"fontSize"in t&&n(12,f=t.fontSize),"width"in t&&n(13,g=t.width),"height"in t&&n(14,m=t.height),"devicePixelRatio"in t&&n(15,v=t.devicePixelRatio),"className"in t&&n(0,y=t.className),"style"in t&&n(1,x=t.style)},t.$$.update=()=>{1114104&t.$$.dirty&&M&&M.updateConfig({text:s,densityStep:o,maxParticles:h,pointSize:a,ease:r,repelRadius:l,repelStrength:c,particleColor:d,fontFamily:u,fontSize:f,width:g,height:m,devicePixelRatio:v})},[y,x,w,s,o,h,a,r,l,c,d,u,f,g,m,v,function(t){M&&M.morph(t)},function(){M&&M.scatter()},function(t){M&&M.updateConfig(t)},function(){M&&(M.destroy(),n(20,M=null))},M,function(t){p[t?"unshift":"push"](()=>{w=t,n(2,w)})}]}module.exports=class extends H{constructor(t){super(),S(this,t,D,V,r,{text:3,densityStep:4,maxParticles:5,pointSize:6,ease:7,repelRadius:8,repelStrength:9,particleColor:10,fontFamily:11,fontSize:12,width:13,height:14,devicePixelRatio:15,className:0,style:1,morph:16,scatter:17,updateConfig:18,destroy:19})}get morph(){return this.$$.ctx[16]}get scatter(){return this.$$.ctx[17]}get updateConfig(){return this.$$.ctx[18]}get destroy(){return this.$$.ctx[19]}};
|
|
@@ -7,12 +7,12 @@ export declare class Count {
|
|
|
7
7
|
currentValue: number;
|
|
8
8
|
startTime: number | null;
|
|
9
9
|
animationFrameId: number | null;
|
|
10
|
-
|
|
10
|
+
visibilityManager: VisibilityManager | null;
|
|
11
11
|
isRunning: boolean;
|
|
12
12
|
hasTriggered: boolean;
|
|
13
13
|
constructor(container: HTMLElement | string, options: CountOptions);
|
|
14
14
|
init(): void;
|
|
15
|
-
|
|
15
|
+
setupVisibilityManager(): void;
|
|
16
16
|
start(): void;
|
|
17
17
|
stop(): void;
|
|
18
18
|
reset(): void;
|
|
@@ -23,13 +23,6 @@ export declare class Count {
|
|
|
23
23
|
destroy(): void;
|
|
24
24
|
}
|
|
25
25
|
|
|
26
|
-
/**
|
|
27
|
-
* Count - 숫자 카운팅 애니메이션 효과
|
|
28
|
-
* 바닐라 JS 코어 클래스
|
|
29
|
-
*
|
|
30
|
-
* 사용법:
|
|
31
|
-
* import { Count } from 'masoneffect/count';
|
|
32
|
-
*/
|
|
33
26
|
export declare interface CountOptions {
|
|
34
27
|
targetValue: number;
|
|
35
28
|
duration?: number;
|
|
@@ -84,14 +77,13 @@ declare class TextToParticle {
|
|
|
84
77
|
};
|
|
85
78
|
animationId: number | null;
|
|
86
79
|
isRunning: boolean;
|
|
87
|
-
|
|
88
|
-
intersectionObserver: IntersectionObserver | null;
|
|
80
|
+
visibilityManager: VisibilityManager | null;
|
|
89
81
|
debounceDelay: number;
|
|
90
82
|
_debouncedMorph: (textOrOptions?: string | Partial<TextToParticleOptions> | null) => void;
|
|
91
83
|
_debouncedUpdateConfig: (newConfig: Partial<TextToParticleOptions>) => void;
|
|
92
84
|
constructor(container: HTMLElement | string, options?: TextToParticleOptions);
|
|
93
85
|
init(): void;
|
|
94
|
-
|
|
86
|
+
setupVisibilityManager(): void;
|
|
95
87
|
resize(): void;
|
|
96
88
|
/**
|
|
97
89
|
* 텍스트가 영역 안에 들어가는지 확인하는 헬퍼 함수 (줄바꿈 지원)
|
|
@@ -132,13 +124,6 @@ declare class TextToParticle {
|
|
|
132
124
|
export { TextToParticle }
|
|
133
125
|
export default TextToParticle;
|
|
134
126
|
|
|
135
|
-
/**
|
|
136
|
-
* TextToParticle - 텍스트를 파티클로 변환하는 효과
|
|
137
|
-
* 바닐라 JS 코어 클래스
|
|
138
|
-
*
|
|
139
|
-
* 사용법:
|
|
140
|
-
* import { TextToParticle } from 'masoneffect/textToParticle';
|
|
141
|
-
*/
|
|
142
127
|
declare interface TextToParticleOptions {
|
|
143
128
|
text?: string;
|
|
144
129
|
densityStep?: number;
|
|
@@ -175,13 +160,13 @@ declare class TextToParticle {
|
|
|
175
160
|
currentIndex: number;
|
|
176
161
|
displayedText: string;
|
|
177
162
|
timeoutId: ReturnType<typeof setTimeout> | null;
|
|
178
|
-
|
|
163
|
+
visibilityManager: VisibilityManager | null;
|
|
179
164
|
isRunning: boolean;
|
|
180
165
|
hasTriggered: boolean;
|
|
181
166
|
originalText: string;
|
|
182
167
|
constructor(container: HTMLElement | string, options: TypingOptions);
|
|
183
168
|
init(): void;
|
|
184
|
-
|
|
169
|
+
setupVisibilityManager(): void;
|
|
185
170
|
private buildTextFromUnits;
|
|
186
171
|
start(): void;
|
|
187
172
|
typeNext(): void;
|
|
@@ -192,13 +177,6 @@ declare class TextToParticle {
|
|
|
192
177
|
destroy(): void;
|
|
193
178
|
}
|
|
194
179
|
|
|
195
|
-
/**
|
|
196
|
-
* Typing - 타이핑 애니메이션 효과
|
|
197
|
-
* 바닐라 JS 코어 클래스
|
|
198
|
-
*
|
|
199
|
-
* 사용법:
|
|
200
|
-
* import { Typing } from 'masoneffect/typing';
|
|
201
|
-
*/
|
|
202
180
|
export declare interface TypingOptions {
|
|
203
181
|
text: string;
|
|
204
182
|
speed?: number;
|
|
@@ -213,4 +191,39 @@ declare class TextToParticle {
|
|
|
213
191
|
onComplete?: () => void;
|
|
214
192
|
}
|
|
215
193
|
|
|
194
|
+
declare class VisibilityManager {
|
|
195
|
+
private container;
|
|
196
|
+
private options;
|
|
197
|
+
private intersectionObserver;
|
|
198
|
+
private visibilityChangeHandler;
|
|
199
|
+
private isVisible;
|
|
200
|
+
private isPageVisible;
|
|
201
|
+
constructor(container: HTMLElement, options?: VisibilityManagerOptions);
|
|
202
|
+
private setupIntersectionObserver;
|
|
203
|
+
private setupPageVisibility;
|
|
204
|
+
/**
|
|
205
|
+
* 현재 요소가 화면에 보이는지 확인
|
|
206
|
+
*/
|
|
207
|
+
getIsVisible(): boolean;
|
|
208
|
+
/**
|
|
209
|
+
* 옵션 업데이트
|
|
210
|
+
*/
|
|
211
|
+
updateOptions(newOptions: Partial<VisibilityManagerOptions>): void;
|
|
212
|
+
/**
|
|
213
|
+
* 리소스 정리
|
|
214
|
+
*/
|
|
215
|
+
destroy(): void;
|
|
216
|
+
}
|
|
217
|
+
|
|
218
|
+
/**
|
|
219
|
+
* VisibilityManager - IntersectionObserver와 Page Visibility API를 통합 관리
|
|
220
|
+
* 모든 효과에서 공통으로 사용하는 가시성 관리 유틸리티
|
|
221
|
+
*/
|
|
222
|
+
declare interface VisibilityManagerOptions {
|
|
223
|
+
threshold?: number;
|
|
224
|
+
rootMargin?: string;
|
|
225
|
+
onVisible?: () => void;
|
|
226
|
+
onHidden?: () => void;
|
|
227
|
+
}
|
|
228
|
+
|
|
216
229
|
export { }
|
|
@@ -263,6 +263,107 @@ class SvelteComponent {
|
|
|
263
263
|
const PUBLIC_VERSION = "4";
|
|
264
264
|
if (typeof window !== "undefined")
|
|
265
265
|
(window.__svelte || (window.__svelte = { v: /* @__PURE__ */ new Set() })).v.add(PUBLIC_VERSION);
|
|
266
|
+
class VisibilityManager {
|
|
267
|
+
constructor(container, options = {}) {
|
|
268
|
+
this.container = container;
|
|
269
|
+
this.options = {
|
|
270
|
+
threshold: options.threshold ?? 0.1,
|
|
271
|
+
rootMargin: options.rootMargin ?? "0px",
|
|
272
|
+
onVisible: options.onVisible,
|
|
273
|
+
onHidden: options.onHidden
|
|
274
|
+
};
|
|
275
|
+
this.intersectionObserver = null;
|
|
276
|
+
this.visibilityChangeHandler = null;
|
|
277
|
+
this.isVisible = false;
|
|
278
|
+
this.isPageVisible = typeof document !== "undefined" ? !document.hidden : true;
|
|
279
|
+
this.setupIntersectionObserver();
|
|
280
|
+
this.setupPageVisibility();
|
|
281
|
+
}
|
|
282
|
+
setupIntersectionObserver() {
|
|
283
|
+
if (typeof window === "undefined" || typeof window.IntersectionObserver === "undefined") {
|
|
284
|
+
this.isVisible = true;
|
|
285
|
+
if (this.isPageVisible && this.options.onVisible) {
|
|
286
|
+
this.options.onVisible();
|
|
287
|
+
}
|
|
288
|
+
return;
|
|
289
|
+
}
|
|
290
|
+
this.intersectionObserver = new IntersectionObserver(
|
|
291
|
+
(entries) => {
|
|
292
|
+
for (const entry of entries) {
|
|
293
|
+
if (entry.target !== this.container) continue;
|
|
294
|
+
if (entry.isIntersecting) {
|
|
295
|
+
this.isVisible = true;
|
|
296
|
+
if (this.isPageVisible && this.options.onVisible) {
|
|
297
|
+
this.options.onVisible();
|
|
298
|
+
}
|
|
299
|
+
} else {
|
|
300
|
+
this.isVisible = false;
|
|
301
|
+
if (this.options.onHidden) {
|
|
302
|
+
this.options.onHidden();
|
|
303
|
+
}
|
|
304
|
+
}
|
|
305
|
+
}
|
|
306
|
+
},
|
|
307
|
+
{
|
|
308
|
+
threshold: this.options.threshold,
|
|
309
|
+
rootMargin: this.options.rootMargin
|
|
310
|
+
}
|
|
311
|
+
);
|
|
312
|
+
this.intersectionObserver.observe(this.container);
|
|
313
|
+
}
|
|
314
|
+
setupPageVisibility() {
|
|
315
|
+
if (typeof document === "undefined") return;
|
|
316
|
+
this.visibilityChangeHandler = () => {
|
|
317
|
+
const wasVisible = this.isPageVisible;
|
|
318
|
+
this.isPageVisible = !document.hidden;
|
|
319
|
+
if (document.hidden) {
|
|
320
|
+
if (this.options.onHidden) {
|
|
321
|
+
this.options.onHidden();
|
|
322
|
+
}
|
|
323
|
+
} else if (wasVisible !== this.isPageVisible) {
|
|
324
|
+
if (this.isVisible && this.options.onVisible) {
|
|
325
|
+
this.options.onVisible();
|
|
326
|
+
}
|
|
327
|
+
}
|
|
328
|
+
};
|
|
329
|
+
document.addEventListener("visibilitychange", this.visibilityChangeHandler);
|
|
330
|
+
if (document.hidden && this.isVisible) {
|
|
331
|
+
if (this.options.onHidden) {
|
|
332
|
+
this.options.onHidden();
|
|
333
|
+
}
|
|
334
|
+
}
|
|
335
|
+
}
|
|
336
|
+
/**
|
|
337
|
+
* 현재 요소가 화면에 보이는지 확인
|
|
338
|
+
*/
|
|
339
|
+
getIsVisible() {
|
|
340
|
+
return this.isVisible && this.isPageVisible;
|
|
341
|
+
}
|
|
342
|
+
/**
|
|
343
|
+
* 옵션 업데이트
|
|
344
|
+
*/
|
|
345
|
+
updateOptions(newOptions) {
|
|
346
|
+
this.options = { ...this.options, ...newOptions };
|
|
347
|
+
if (this.intersectionObserver) {
|
|
348
|
+
this.intersectionObserver.disconnect();
|
|
349
|
+
this.intersectionObserver = null;
|
|
350
|
+
}
|
|
351
|
+
this.setupIntersectionObserver();
|
|
352
|
+
}
|
|
353
|
+
/**
|
|
354
|
+
* 리소스 정리
|
|
355
|
+
*/
|
|
356
|
+
destroy() {
|
|
357
|
+
if (this.intersectionObserver) {
|
|
358
|
+
this.intersectionObserver.disconnect();
|
|
359
|
+
this.intersectionObserver = null;
|
|
360
|
+
}
|
|
361
|
+
if (this.visibilityChangeHandler && typeof document !== "undefined") {
|
|
362
|
+
document.removeEventListener("visibilitychange", this.visibilityChangeHandler);
|
|
363
|
+
this.visibilityChangeHandler = null;
|
|
364
|
+
}
|
|
365
|
+
}
|
|
366
|
+
}
|
|
266
367
|
function debounce(func, wait) {
|
|
267
368
|
let timeout = null;
|
|
268
369
|
return function executedFunction(...args) {
|
|
@@ -320,8 +421,7 @@ class TextToParticle {
|
|
|
320
421
|
this.mouse = { x: 0, y: 0, down: false };
|
|
321
422
|
this.animationId = null;
|
|
322
423
|
this.isRunning = false;
|
|
323
|
-
this.
|
|
324
|
-
this.intersectionObserver = null;
|
|
424
|
+
this.visibilityManager = null;
|
|
325
425
|
this.debounceDelay = options.debounceDelay ?? 150;
|
|
326
426
|
const boundHandleResize = this.handleResize.bind(this);
|
|
327
427
|
this.handleResize = debounce(boundHandleResize, this.debounceDelay);
|
|
@@ -336,39 +436,22 @@ class TextToParticle {
|
|
|
336
436
|
init() {
|
|
337
437
|
this.resize();
|
|
338
438
|
this.setupEventListeners();
|
|
339
|
-
this.
|
|
439
|
+
this.setupVisibilityManager();
|
|
340
440
|
if (this.config.onReady) {
|
|
341
441
|
this.config.onReady(this);
|
|
342
442
|
}
|
|
343
443
|
}
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
if (this.intersectionObserver) {
|
|
351
|
-
return;
|
|
352
|
-
}
|
|
353
|
-
this.intersectionObserver = new IntersectionObserver(
|
|
354
|
-
(entries) => {
|
|
355
|
-
for (const entry of entries) {
|
|
356
|
-
if (entry.target !== this.container) continue;
|
|
357
|
-
if (entry.isIntersecting) {
|
|
358
|
-
this.isVisible = true;
|
|
359
|
-
this.start();
|
|
360
|
-
} else {
|
|
361
|
-
this.isVisible = false;
|
|
362
|
-
this.stop();
|
|
363
|
-
}
|
|
364
|
-
}
|
|
444
|
+
setupVisibilityManager() {
|
|
445
|
+
this.visibilityManager = new VisibilityManager(this.container, {
|
|
446
|
+
threshold: 0.1,
|
|
447
|
+
// 10% 이상 보일 때 동작
|
|
448
|
+
onVisible: () => {
|
|
449
|
+
this.start();
|
|
365
450
|
},
|
|
366
|
-
{
|
|
367
|
-
|
|
368
|
-
// 10% 이상 보일 때 동작
|
|
451
|
+
onHidden: () => {
|
|
452
|
+
this.stop();
|
|
369
453
|
}
|
|
370
|
-
);
|
|
371
|
-
this.intersectionObserver.observe(this.container);
|
|
454
|
+
});
|
|
372
455
|
}
|
|
373
456
|
resize() {
|
|
374
457
|
const width = this.config.width || this.container.clientWidth || window.innerWidth;
|
|
@@ -605,7 +688,10 @@ class TextToParticle {
|
|
|
605
688
|
p.y += p.vy;
|
|
606
689
|
}
|
|
607
690
|
this.ctx.fillStyle = this.config.particleColor;
|
|
608
|
-
const
|
|
691
|
+
const baseSize = 1920;
|
|
692
|
+
const currentSize = Math.min(this.W, this.H) / this.DPR;
|
|
693
|
+
const sizeRatio = Math.max(0.5, Math.min(2, currentSize / baseSize));
|
|
694
|
+
const r = this.config.pointSize * this.DPR * sizeRatio;
|
|
609
695
|
for (const p of this.particles) {
|
|
610
696
|
this.ctx.beginPath();
|
|
611
697
|
this.ctx.arc(p.x, p.y, r, 0, Math.PI * 2);
|
|
@@ -677,9 +763,9 @@ class TextToParticle {
|
|
|
677
763
|
destroy() {
|
|
678
764
|
this.stop();
|
|
679
765
|
this.removeEventListeners();
|
|
680
|
-
if (this.
|
|
681
|
-
this.
|
|
682
|
-
this.
|
|
766
|
+
if (this.visibilityManager) {
|
|
767
|
+
this.visibilityManager.destroy();
|
|
768
|
+
this.visibilityManager = null;
|
|
683
769
|
}
|
|
684
770
|
if (this.canvas && this.canvas.parentNode) {
|
|
685
771
|
this.canvas.parentNode.removeChild(this.canvas);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var t=Object.defineProperty,e=(e,n,s)=>((e,n,s)=>n in e?t(e,n,{enumerable:!0,configurable:!0,writable:!0,value:s}):e[n]=s)(e,"symbol"!=typeof n?n+"":n,s);const n=require("svelte");function s(){}function i(t){return t()}function r(){return Object.create(null)}function o(t){t.forEach(i)}function c(t){return"function"==typeof t}function u(t,e){return t!=t?e==e:t!==e||t&&"object"==typeof t||"function"==typeof t}function h(t,e,n){t.$$.on_destroy.push(function(t,...e){if(null==t){for(const t of e)t(void 0);return s}const n=t.subscribe(...e);return n.unsubscribe?()=>n.unsubscribe():n}(e,n))}function a(t){t.parentNode&&t.parentNode.removeChild(t)}function l(t,e,n){null==n?t.removeAttribute(e):t.getAttribute(e)!==n&&t.setAttribute(e,n)}let d;function f(t){d=t}const g=[],p=[];let x=[];const $=[],y=Promise.resolve();let b=!1;function m(t){x.push(t)}const v=new Set;let w=0;function T(){if(0!==w)return;const t=d;do{try{for(;w<g.length;){const t=g[w];w++,f(t),_(t.$$)}}catch(e){throw g.length=0,w=0,e}for(f(null),g.length=0,w=0;p.length;)p.pop()();for(let t=0;t<x.length;t+=1){const e=x[t];v.has(e)||(v.add(e),e())}x.length=0}while(g.length);for(;$.length;)$.pop()();b=!1,v.clear(),f(t)}function _(t){if(null!==t.fragment){t.update(),o(t.before_update);const e=t.dirty;t.dirty=[-1],t.fragment&&t.fragment.p(t.ctx,e),t.after_update.forEach(m)}}const C=new Set;function O(t,e){const n=t.$$;null!==n.fragment&&(!function(t){const e=[],n=[];x.forEach(s=>-1===t.indexOf(s)?e.push(s):n.push(s)),n.forEach(t=>t()),x=e}(n.after_update),o(n.on_destroy),n.fragment&&n.fragment.d(e),n.on_destroy=n.fragment=null,n.ctx=[])}function U(t,e){-1===t.$$.dirty[0]&&(g.push(t),b||(b=!0,y.then(T)),t.$$.dirty.fill(0)),t.$$.dirty[e/31|0]|=1<<e%31}function I(t,e,n,u,h,l,g=null,p=[-1]){const x=d;f(t);const $=t.$$={fragment:null,ctx:[],props:l,update:s,not_equal:h,bound:r(),on_mount:[],on_destroy:[],on_disconnect:[],before_update:[],after_update:[],context:new Map(e.context||(x?x.$$.context:[])),callbacks:r(),dirty:p,skip_bound:!1,root:e.target||x.$$.root};g&&g($.root);let y=!1;if($.ctx=n?n(t,e.props||{},(e,n,...s)=>{const i=s.length?s[0]:n;return $.ctx&&h($.ctx[e],$.ctx[e]=i)&&(!$.skip_bound&&$.bound[e]&&$.bound[e](i),y&&U(t,e)),n}):[],$.update(),y=!0,o($.before_update),$.fragment=!!u&&u($.ctx),e.target){if(e.hydrate){const t=(w=e.target,Array.from(w.childNodes));$.fragment&&$.fragment.l(t),t.forEach(a)}else $.fragment&&$.fragment.c();e.intro&&((b=t.$$.fragment)&&b.i&&(C.delete(b),b.i(v))),function(t,e,n){const{fragment:s,after_update:r}=t.$$;s&&s.m(e,n),m(()=>{const e=t.$$.on_mount.map(i).filter(c);t.$$.on_destroy?t.$$.on_destroy.push(...e):o(e),t.$$.on_mount=[]}),r.forEach(m)}(t,e.target,e.anchor),T()}var b,v,w;f(x)}class R{constructor(){e(this,"$$"),e(this,"$$set")}$destroy(){O(this,1),this.$destroy=s}$on(t,e){if(!c(e))return s;const n=this.$$.callbacks[t]||(this.$$.callbacks[t]=[]);return n.push(e),()=>{const t=n.indexOf(e);-1!==t&&n.splice(t,1)}}$set(t){var e;this.$$set&&(e=t,0!==Object.keys(e).length)&&(this.$$.skip_bound=!0,this.$$set(t),this.$$.skip_bound=!1)}}function M(t){const e=t.charCodeAt(0);if(e<44032||e>55203)return[t];const n=e-44032,s=Math.floor(n/588),i=Math.floor(n%588/28),r=n%28,o=["","ㄱ","ㄲ","ㄳ","ㄴ","ㄵ","ㄶ","ㄷ","ㄹ","ㄺ","ㄻ","ㄼ","ㄽ","ㄾ","ㄿ","ㅀ","ㅁ","ㅂ","ㅄ","ㅅ","ㅆ","ㅇ","ㅈ","ㅊ","ㅋ","ㅌ","ㅍ","ㅎ"],c=[];return c.push(["ㄱ","ㄲ","ㄴ","ㄷ","ㄸ","ㄹ","ㅁ","ㅂ","ㅃ","ㅅ","ㅆ","ㅇ","ㅈ","ㅉ","ㅊ","ㅋ","ㅌ","ㅍ","ㅎ"][s]),c.push(["ㅏ","ㅐ","ㅑ","ㅒ","ㅓ","ㅔ","ㅕ","ㅖ","ㅗ","ㅘ","ㅙ","ㅚ","ㅛ","ㅜ","ㅝ","ㅞ","ㅟ","ㅠ","ㅡ","ㅢ","ㅣ"][i]),r>0&&c.push(o[r]),c}function k(t,e,n){const s=["ㄱ","ㄲ","ㄴ","ㄷ","ㄸ","ㄹ","ㅁ","ㅂ","ㅃ","ㅅ","ㅆ","ㅇ","ㅈ","ㅉ","ㅊ","ㅋ","ㅌ","ㅍ","ㅎ"].indexOf(t),i=["ㅏ","ㅐ","ㅑ","ㅒ","ㅓ","ㅔ","ㅕ","ㅖ","ㅗ","ㅘ","ㅙ","ㅚ","ㅛ","ㅜ","ㅝ","ㅞ","ㅟ","ㅠ","ㅡ","ㅢ","ㅣ"].indexOf(e),r=n?["","ㄱ","ㄲ","ㄳ","ㄴ","ㄵ","ㄶ","ㄷ","ㄹ","ㄺ","ㄻ","ㄼ","ㄽ","ㄾ","ㄿ","ㅀ","ㅁ","ㅂ","ㅄ","ㅅ","ㅆ","ㅇ","ㅈ","ㅊ","ㅋ","ㅌ","ㅍ","ㅎ"].indexOf(n):0;if(-1===s||-1===i)return t+(e||"")+(n||"");const o=44032+21*s*28+28*i+r;return String.fromCharCode(o)}function E(t){const e=[],n=[];for(let s=0;s<t.length;s++){const i=t[s],r=i.charCodeAt(0),o=e.length;if(r>=44032&&r<=55203){const t=M(i);e.push(...t),n.push({start:o,end:e.length,isHangul:!0})}else e.push(i),n.push({start:o,end:e.length,isHangul:!1})}return{units:e,charUnitRanges:n}}"undefined"!=typeof window&&(window.__svelte||(window.__svelte={v:new Set})).v.add("4");class N{constructor(t,e){if(this.container="string"==typeof t?document.querySelector(t):t,!this.container)throw new Error("Container element not found");this.originalText=e.text,this.config={text:e.text,speed:e.speed??50,delay:e.delay??0,enabled:e.enabled??!0,threshold:e.threshold??.2,rootMargin:e.rootMargin??"0px 0px -100px 0px",triggerOnce:e.triggerOnce??!1,showCursor:e.showCursor??!0,cursorChar:e.cursorChar??"|",onUpdate:e.onUpdate||null,onComplete:e.onComplete||null};const n=E(this.config.text);this.textUnits=n.units,this.charUnitRanges=n.charUnitRanges,this.currentIndex=0,this.displayedText="",this.timeoutId=null,this.intersectionObserver=null,this.isRunning=!1,this.hasTriggered=!1,this.init()}init(){this.updateDisplay(""),this.setupIntersectionObserver()}setupIntersectionObserver(){"undefined"!=typeof window&&void 0!==window.IntersectionObserver?(this.intersectionObserver=new IntersectionObserver(t=>{var e;for(const n of t)n.target===this.container&&n.isIntersecting&&!this.hasTriggered&&(this.config.enabled&&setTimeout(()=>this.start(),this.config.delay),this.hasTriggered=!0,this.config.triggerOnce&&(null==(e=this.intersectionObserver)||e.disconnect()))},{threshold:this.config.threshold,rootMargin:this.config.rootMargin}),this.intersectionObserver.observe(this.container)):this.config.enabled&&setTimeout(()=>this.start(),this.config.delay)}buildTextFromUnits(t){if(0===t)return"";let e="";for(let n=0;n<this.charUnitRanges.length;n++){const s=this.charUnitRanges[n];if(s.start>=t)break;const i=Math.min(t-s.start,s.end-s.start);if(i<=0)break;if(s.isHangul){const t=this.textUnits.slice(s.start,s.start+i);1===t.length?e+=t[0]:2===t.length?e+=k(t[0],t[1]):t.length>=3&&(e+=k(t[0],t[1],t[2]))}else i>0&&(e+=this.textUnits[s.start])}return e}start(){this.isRunning||(this.isRunning=!0,this.currentIndex=0,this.displayedText="",this.typeNext())}typeNext(){if(this.currentIndex>=this.textUnits.length)return this.isRunning=!1,this.config.showCursor&&this.updateDisplay(this.originalText),void(this.config.onComplete&&this.config.onComplete());this.displayedText=this.buildTextFromUnits(this.currentIndex+1);let t=this.displayedText;this.config.showCursor&&(t+=this.config.cursorChar),this.updateDisplay(t),this.config.onUpdate&&this.config.onUpdate(this.displayedText),this.currentIndex++,this.timeoutId=setTimeout(()=>{this.typeNext()},this.config.speed)}stop(){this.isRunning=!1,this.timeoutId&&(clearTimeout(this.timeoutId),this.timeoutId=null)}reset(){this.stop(),this.currentIndex=0,this.displayedText="",this.hasTriggered=!1,this.updateDisplay("")}updateDisplay(t){this.container.textContent=t}setText(t){this.originalText=t,this.config.text=t;const e=E(t);this.textUnits=e.units,this.charUnitRanges=e.charUnitRanges,this.reset(),this.config.enabled&&setTimeout(()=>this.start(),this.config.delay)}destroy(){this.stop(),this.intersectionObserver&&(this.intersectionObserver.disconnect(),this.intersectionObserver=null)}}function A(t){let e;return{c(){var n;n="div",e=document.createElement(n),l(e,"class",t[1]),l(e,"style",t[2])},m(n,s){!function(t,e,n){t.insertBefore(e,n||null)}(n,e,s),t[8](e)},p:s,i:s,o:s,d(n){n&&a(e),t[8](null)}}}function D(t,e,s){let i,r;h(t,effect,t=>s(10,i=t)),h(t,props,t=>s(11,r=t));let{text:o,speed:c=50,delay:u=0,enabled:a=!0,threshold:l=.2,rootMargin:d="0px 0px -100px 0px",triggerOnce:f=!1,showCursor:g=!0,cursorChar:x="|",className:$="",style:y="",onUpdate:b,onComplete:m}=r(),v=null,w=null;return n.onMount(()=>{if(!v)return;w=new N(v,{text:o,speed:c,delay:u,enabled:a,threshold:l,rootMargin:d,triggerOnce:f,showCursor:g,cursorChar:x,onUpdate:b,onComplete:m})}),n.onDestroy(()=>{w&&(w.destroy(),w=null)}),i(()=>{w&&o!==w.originalText&&w.setText(o)}),[v,$,y,function(){null==w||w.start()},function(){null==w||w.stop()},function(){null==w||w.reset()},function(t){null==w||w.setText(t)},function(){w&&(w.destroy(),w=null)},function(t){p[t?"unshift":"push"](()=>{v=t,s(0,v)})}]}module.exports=class extends R{constructor(t){super(),I(this,t,D,A,u,{start:3,stop:4,reset:5,setText:6,destroy:7})}get start(){return this.$$.ctx[3]}get stop(){return this.$$.ctx[4]}get reset(){return this.$$.ctx[5]}get setText(){return this.$$.ctx[6]}get destroy(){return this.$$.ctx[7]}};
|
|
1
|
+
"use strict";var t=Object.defineProperty,e=(e,i,n)=>((e,i,n)=>i in e?t(e,i,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[i]=n)(e,"symbol"!=typeof i?i+"":i,n);const i=require("svelte");function n(){}function s(t){return t()}function o(){return Object.create(null)}function r(t){t.forEach(s)}function h(t){return"function"==typeof t}function l(t,e){return t!=t?e==e:t!==e||t&&"object"==typeof t||"function"==typeof t}function a(t,e,i){t.$$.on_destroy.push(function(t,...e){if(null==t){for(const t of e)t(void 0);return n}const i=t.subscribe(...e);return i.unsubscribe?()=>i.unsubscribe():i}(e,i))}function u(t){t.parentNode&&t.parentNode.removeChild(t)}function c(t,e,i){null==i?t.removeAttribute(e):t.getAttribute(e)!==i&&t.setAttribute(e,i)}let d;function f(t){d=t}const g=[],p=[];let b=[];const y=[],x=Promise.resolve();let m=!1;function $(t){b.push(t)}const v=new Set;let C=0;function w(){if(0!==C)return;const t=d;do{try{for(;C<g.length;){const t=g[C];C++,f(t),V(t.$$)}}catch(e){throw g.length=0,C=0,e}for(f(null),g.length=0,C=0;p.length;)p.pop()();for(let t=0;t<b.length;t+=1){const e=b[t];v.has(e)||(v.add(e),e())}b.length=0}while(g.length);for(;y.length;)y.pop()();m=!1,v.clear(),f(t)}function V(t){if(null!==t.fragment){t.update(),r(t.before_update);const e=t.dirty;t.dirty=[-1],t.fragment&&t.fragment.p(t.ctx,e),t.after_update.forEach($)}}const O=new Set;function _(t,e){const i=t.$$;null!==i.fragment&&(!function(t){const e=[],i=[];b.forEach(n=>-1===t.indexOf(n)?e.push(n):i.push(n)),i.forEach(t=>t()),b=e}(i.after_update),r(i.on_destroy),i.fragment&&i.fragment.d(e),i.on_destroy=i.fragment=null,i.ctx=[])}function T(t,e){-1===t.$$.dirty[0]&&(g.push(t),m||(m=!0,x.then(w)),t.$$.dirty.fill(0)),t.$$.dirty[e/31|0]|=1<<e%31}function M(t,e,i,l,a,c,g=null,p=[-1]){const b=d;f(t);const y=t.$$={fragment:null,ctx:[],props:c,update:n,not_equal:a,bound:o(),on_mount:[],on_destroy:[],on_disconnect:[],before_update:[],after_update:[],context:new Map(e.context||(b?b.$$.context:[])),callbacks:o(),dirty:p,skip_bound:!1,root:e.target||b.$$.root};g&&g(y.root);let x=!1;if(y.ctx=i?i(t,e.props||{},(e,i,...n)=>{const s=n.length?n[0]:i;return y.ctx&&a(y.ctx[e],y.ctx[e]=s)&&(!y.skip_bound&&y.bound[e]&&y.bound[e](s),x&&T(t,e)),i}):[],y.update(),x=!0,r(y.before_update),y.fragment=!!l&&l(y.ctx),e.target){if(e.hydrate){const t=(C=e.target,Array.from(C.childNodes));y.fragment&&y.fragment.l(t),t.forEach(u)}else y.fragment&&y.fragment.c();e.intro&&((m=t.$$.fragment)&&m.i&&(O.delete(m),m.i(v))),function(t,e,i){const{fragment:n,after_update:o}=t.$$;n&&n.m(e,i),$(()=>{const e=t.$$.on_mount.map(s).filter(h);t.$$.on_destroy?t.$$.on_destroy.push(...e):r(e),t.$$.on_mount=[]}),o.forEach($)}(t,e.target,e.anchor),w()}var m,v,C;f(b)}class U{constructor(){e(this,"$$"),e(this,"$$set")}$destroy(){_(this,1),this.$destroy=n}$on(t,e){if(!h(e))return n;const i=this.$$.callbacks[t]||(this.$$.callbacks[t]=[]);return i.push(e),()=>{const t=i.indexOf(e);-1!==t&&i.splice(t,1)}}$set(t){var e;this.$$set&&(e=t,0!==Object.keys(e).length)&&(this.$$.skip_bound=!0,this.$$set(t),this.$$.skip_bound=!1)}}"undefined"!=typeof window&&(window.__svelte||(window.__svelte={v:new Set})).v.add("4");class H{constructor(t,e={}){this.container=t,this.options={threshold:e.threshold??.1,rootMargin:e.rootMargin??"0px",onVisible:e.onVisible,onHidden:e.onHidden},this.intersectionObserver=null,this.visibilityChangeHandler=null,this.isVisible=!1,this.isPageVisible="undefined"==typeof document||!document.hidden,this.setupIntersectionObserver(),this.setupPageVisibility()}setupIntersectionObserver(){if("undefined"==typeof window||void 0===window.IntersectionObserver)return this.isVisible=!0,void(this.isPageVisible&&this.options.onVisible&&this.options.onVisible());this.intersectionObserver=new IntersectionObserver(t=>{for(const e of t)e.target===this.container&&(e.isIntersecting?(this.isVisible=!0,this.isPageVisible&&this.options.onVisible&&this.options.onVisible()):(this.isVisible=!1,this.options.onHidden&&this.options.onHidden()))},{threshold:this.options.threshold,rootMargin:this.options.rootMargin}),this.intersectionObserver.observe(this.container)}setupPageVisibility(){"undefined"!=typeof document&&(this.visibilityChangeHandler=()=>{const t=this.isPageVisible;this.isPageVisible=!document.hidden,document.hidden?this.options.onHidden&&this.options.onHidden():t!==this.isPageVisible&&this.isVisible&&this.options.onVisible&&this.options.onVisible()},document.addEventListener("visibilitychange",this.visibilityChangeHandler),document.hidden&&this.isVisible&&this.options.onHidden&&this.options.onHidden())}getIsVisible(){return this.isVisible&&this.isPageVisible}updateOptions(t){this.options={...this.options,...t},this.intersectionObserver&&(this.intersectionObserver.disconnect(),this.intersectionObserver=null),this.setupIntersectionObserver()}destroy(){this.intersectionObserver&&(this.intersectionObserver.disconnect(),this.intersectionObserver=null),this.visibilityChangeHandler&&"undefined"!=typeof document&&(document.removeEventListener("visibilitychange",this.visibilityChangeHandler),this.visibilityChangeHandler=null)}}function I(t){const e=t.charCodeAt(0);if(e<44032||e>55203)return[t];const i=e-44032,n=Math.floor(i/588),s=Math.floor(i%588/28),o=i%28,r=["","ㄱ","ㄲ","ㄳ","ㄴ","ㄵ","ㄶ","ㄷ","ㄹ","ㄺ","ㄻ","ㄼ","ㄽ","ㄾ","ㄿ","ㅀ","ㅁ","ㅂ","ㅄ","ㅅ","ㅆ","ㅇ","ㅈ","ㅊ","ㅋ","ㅌ","ㅍ","ㅎ"],h=[];return h.push(["ㄱ","ㄲ","ㄴ","ㄷ","ㄸ","ㄹ","ㅁ","ㅂ","ㅃ","ㅅ","ㅆ","ㅇ","ㅈ","ㅉ","ㅊ","ㅋ","ㅌ","ㅍ","ㅎ"][n]),h.push(["ㅏ","ㅐ","ㅑ","ㅒ","ㅓ","ㅔ","ㅕ","ㅖ","ㅗ","ㅘ","ㅙ","ㅚ","ㅛ","ㅜ","ㅝ","ㅞ","ㅟ","ㅠ","ㅡ","ㅢ","ㅣ"][s]),o>0&&h.push(r[o]),h}function R(t,e,i){const n=["ㄱ","ㄲ","ㄴ","ㄷ","ㄸ","ㄹ","ㅁ","ㅂ","ㅃ","ㅅ","ㅆ","ㅇ","ㅈ","ㅉ","ㅊ","ㅋ","ㅌ","ㅍ","ㅎ"].indexOf(t),s=["ㅏ","ㅐ","ㅑ","ㅒ","ㅓ","ㅔ","ㅕ","ㅖ","ㅗ","ㅘ","ㅙ","ㅚ","ㅛ","ㅜ","ㅝ","ㅞ","ㅟ","ㅠ","ㅡ","ㅢ","ㅣ"].indexOf(e),o=i?["","ㄱ","ㄲ","ㄳ","ㄴ","ㄵ","ㄶ","ㄷ","ㄹ","ㄺ","ㄻ","ㄼ","ㄽ","ㄾ","ㄿ","ㅀ","ㅁ","ㅂ","ㅄ","ㅅ","ㅆ","ㅇ","ㅈ","ㅊ","ㅋ","ㅌ","ㅍ","ㅎ"].indexOf(i):0;if(-1===n||-1===s)return t+(e||"")+(i||"");const r=44032+21*n*28+28*s+o;return String.fromCharCode(r)}function P(t){const e=[],i=[];for(let n=0;n<t.length;n++){const s=t[n],o=s.charCodeAt(0),r=e.length;if(o>=44032&&o<=55203){const t=I(s);e.push(...t),i.push({start:r,end:e.length,isHangul:!0})}else e.push(s),i.push({start:r,end:e.length,isHangul:!1})}return{units:e,charUnitRanges:i}}class k{constructor(t,e){if(this.container="string"==typeof t?document.querySelector(t):t,!this.container)throw new Error("Container element not found");this.originalText=e.text,this.config={text:e.text,speed:e.speed??50,delay:e.delay??0,enabled:e.enabled??!0,threshold:e.threshold??.2,rootMargin:e.rootMargin??"0px 0px -100px 0px",triggerOnce:e.triggerOnce??!1,showCursor:e.showCursor??!0,cursorChar:e.cursorChar??"|",onUpdate:e.onUpdate||null,onComplete:e.onComplete||null};const i=P(this.config.text);this.textUnits=i.units,this.charUnitRanges=i.charUnitRanges,this.currentIndex=0,this.displayedText="",this.timeoutId=null,this.visibilityManager=null,this.isRunning=!1,this.hasTriggered=!1,this.init()}init(){this.updateDisplay(""),this.setupVisibilityManager()}setupVisibilityManager(){this.visibilityManager=new H(this.container,{threshold:this.config.threshold,rootMargin:this.config.rootMargin,onVisible:()=>{!this.hasTriggered&&this.config.enabled&&(this.hasTriggered=!0,setTimeout(()=>this.start(),this.config.delay))},onHidden:()=>{}})}buildTextFromUnits(t){if(0===t)return"";let e="";for(let i=0;i<this.charUnitRanges.length;i++){const n=this.charUnitRanges[i];if(n.start>=t)break;const s=Math.min(t-n.start,n.end-n.start);if(s<=0)break;if(n.isHangul){const t=this.textUnits.slice(n.start,n.start+s);1===t.length?e+=t[0]:2===t.length?e+=R(t[0],t[1]):t.length>=3&&(e+=R(t[0],t[1],t[2]))}else s>0&&(e+=this.textUnits[n.start])}return e}start(){this.isRunning||(this.isRunning=!0,this.currentIndex=0,this.displayedText="",this.typeNext())}typeNext(){if(this.currentIndex>=this.textUnits.length)return this.isRunning=!1,this.config.showCursor&&this.updateDisplay(this.originalText),void(this.config.onComplete&&this.config.onComplete());this.displayedText=this.buildTextFromUnits(this.currentIndex+1);let t=this.displayedText;this.config.showCursor&&(t+=this.config.cursorChar),this.updateDisplay(t),this.config.onUpdate&&this.config.onUpdate(this.displayedText),this.currentIndex++,this.timeoutId=setTimeout(()=>{this.typeNext()},this.config.speed)}stop(){this.isRunning=!1,this.timeoutId&&(clearTimeout(this.timeoutId),this.timeoutId=null)}reset(){this.stop(),this.currentIndex=0,this.displayedText="",this.hasTriggered=!1,this.updateDisplay("")}updateDisplay(t){this.container.textContent=t}setText(t){this.originalText=t,this.config.text=t;const e=P(t);this.textUnits=e.units,this.charUnitRanges=e.charUnitRanges,this.reset(),this.config.enabled&&setTimeout(()=>this.start(),this.config.delay)}destroy(){this.stop(),this.visibilityManager&&(this.visibilityManager.destroy(),this.visibilityManager=null)}}function E(t){let e;return{c(){var i;i="div",e=document.createElement(i),c(e,"class",t[1]),c(e,"style",t[2])},m(i,n){!function(t,e,i){t.insertBefore(e,i||null)}(i,e,n),t[8](e)},p:n,i:n,o:n,d(i){i&&u(e),t[8](null)}}}function N(t,e,n){let s,o;a(t,effect,t=>n(10,s=t)),a(t,props,t=>n(11,o=t));let{text:r,speed:h=50,delay:l=0,enabled:u=!0,threshold:c=.2,rootMargin:d="0px 0px -100px 0px",triggerOnce:f=!1,showCursor:g=!0,cursorChar:b="|",className:y="",style:x="",onUpdate:m,onComplete:$}=o(),v=null,C=null;return i.onMount(()=>{if(!v)return;C=new k(v,{text:r,speed:h,delay:l,enabled:u,threshold:c,rootMargin:d,triggerOnce:f,showCursor:g,cursorChar:b,onUpdate:m,onComplete:$})}),i.onDestroy(()=>{C&&(C.destroy(),C=null)}),s(()=>{C&&r!==C.originalText&&C.setText(r)}),[v,y,x,function(){null==C||C.start()},function(){null==C||C.stop()},function(){null==C||C.reset()},function(t){null==C||C.setText(t)},function(){C&&(C.destroy(),C=null)},function(t){p[t?"unshift":"push"](()=>{v=t,n(0,v)})}]}module.exports=class extends U{constructor(t){super(),M(this,t,N,E,l,{start:3,stop:4,reset:5,setText:6,destroy:7})}get start(){return this.$$.ctx[3]}get stop(){return this.$$.ctx[4]}get reset(){return this.$$.ctx[5]}get setText(){return this.$$.ctx[6]}get destroy(){return this.$$.ctx[7]}};
|
|
@@ -7,12 +7,12 @@ export declare class Count {
|
|
|
7
7
|
currentValue: number;
|
|
8
8
|
startTime: number | null;
|
|
9
9
|
animationFrameId: number | null;
|
|
10
|
-
|
|
10
|
+
visibilityManager: VisibilityManager | null;
|
|
11
11
|
isRunning: boolean;
|
|
12
12
|
hasTriggered: boolean;
|
|
13
13
|
constructor(container: HTMLElement | string, options: CountOptions);
|
|
14
14
|
init(): void;
|
|
15
|
-
|
|
15
|
+
setupVisibilityManager(): void;
|
|
16
16
|
start(): void;
|
|
17
17
|
stop(): void;
|
|
18
18
|
reset(): void;
|
|
@@ -23,13 +23,6 @@ export declare class Count {
|
|
|
23
23
|
destroy(): void;
|
|
24
24
|
}
|
|
25
25
|
|
|
26
|
-
/**
|
|
27
|
-
* Count - 숫자 카운팅 애니메이션 효과
|
|
28
|
-
* 바닐라 JS 코어 클래스
|
|
29
|
-
*
|
|
30
|
-
* 사용법:
|
|
31
|
-
* import { Count } from 'masoneffect/count';
|
|
32
|
-
*/
|
|
33
26
|
export declare interface CountOptions {
|
|
34
27
|
targetValue: number;
|
|
35
28
|
duration?: number;
|
|
@@ -84,14 +77,13 @@ declare class TextToParticle {
|
|
|
84
77
|
};
|
|
85
78
|
animationId: number | null;
|
|
86
79
|
isRunning: boolean;
|
|
87
|
-
|
|
88
|
-
intersectionObserver: IntersectionObserver | null;
|
|
80
|
+
visibilityManager: VisibilityManager | null;
|
|
89
81
|
debounceDelay: number;
|
|
90
82
|
_debouncedMorph: (textOrOptions?: string | Partial<TextToParticleOptions> | null) => void;
|
|
91
83
|
_debouncedUpdateConfig: (newConfig: Partial<TextToParticleOptions>) => void;
|
|
92
84
|
constructor(container: HTMLElement | string, options?: TextToParticleOptions);
|
|
93
85
|
init(): void;
|
|
94
|
-
|
|
86
|
+
setupVisibilityManager(): void;
|
|
95
87
|
resize(): void;
|
|
96
88
|
/**
|
|
97
89
|
* 텍스트가 영역 안에 들어가는지 확인하는 헬퍼 함수 (줄바꿈 지원)
|
|
@@ -132,13 +124,6 @@ declare class TextToParticle {
|
|
|
132
124
|
export { TextToParticle }
|
|
133
125
|
export default TextToParticle;
|
|
134
126
|
|
|
135
|
-
/**
|
|
136
|
-
* TextToParticle - 텍스트를 파티클로 변환하는 효과
|
|
137
|
-
* 바닐라 JS 코어 클래스
|
|
138
|
-
*
|
|
139
|
-
* 사용법:
|
|
140
|
-
* import { TextToParticle } from 'masoneffect/textToParticle';
|
|
141
|
-
*/
|
|
142
127
|
declare interface TextToParticleOptions {
|
|
143
128
|
text?: string;
|
|
144
129
|
densityStep?: number;
|
|
@@ -175,13 +160,13 @@ declare class TextToParticle {
|
|
|
175
160
|
currentIndex: number;
|
|
176
161
|
displayedText: string;
|
|
177
162
|
timeoutId: ReturnType<typeof setTimeout> | null;
|
|
178
|
-
|
|
163
|
+
visibilityManager: VisibilityManager | null;
|
|
179
164
|
isRunning: boolean;
|
|
180
165
|
hasTriggered: boolean;
|
|
181
166
|
originalText: string;
|
|
182
167
|
constructor(container: HTMLElement | string, options: TypingOptions);
|
|
183
168
|
init(): void;
|
|
184
|
-
|
|
169
|
+
setupVisibilityManager(): void;
|
|
185
170
|
private buildTextFromUnits;
|
|
186
171
|
start(): void;
|
|
187
172
|
typeNext(): void;
|
|
@@ -192,13 +177,6 @@ declare class TextToParticle {
|
|
|
192
177
|
destroy(): void;
|
|
193
178
|
}
|
|
194
179
|
|
|
195
|
-
/**
|
|
196
|
-
* Typing - 타이핑 애니메이션 효과
|
|
197
|
-
* 바닐라 JS 코어 클래스
|
|
198
|
-
*
|
|
199
|
-
* 사용법:
|
|
200
|
-
* import { Typing } from 'masoneffect/typing';
|
|
201
|
-
*/
|
|
202
180
|
export declare interface TypingOptions {
|
|
203
181
|
text: string;
|
|
204
182
|
speed?: number;
|
|
@@ -213,4 +191,39 @@ declare class TextToParticle {
|
|
|
213
191
|
onComplete?: () => void;
|
|
214
192
|
}
|
|
215
193
|
|
|
194
|
+
declare class VisibilityManager {
|
|
195
|
+
private container;
|
|
196
|
+
private options;
|
|
197
|
+
private intersectionObserver;
|
|
198
|
+
private visibilityChangeHandler;
|
|
199
|
+
private isVisible;
|
|
200
|
+
private isPageVisible;
|
|
201
|
+
constructor(container: HTMLElement, options?: VisibilityManagerOptions);
|
|
202
|
+
private setupIntersectionObserver;
|
|
203
|
+
private setupPageVisibility;
|
|
204
|
+
/**
|
|
205
|
+
* 현재 요소가 화면에 보이는지 확인
|
|
206
|
+
*/
|
|
207
|
+
getIsVisible(): boolean;
|
|
208
|
+
/**
|
|
209
|
+
* 옵션 업데이트
|
|
210
|
+
*/
|
|
211
|
+
updateOptions(newOptions: Partial<VisibilityManagerOptions>): void;
|
|
212
|
+
/**
|
|
213
|
+
* 리소스 정리
|
|
214
|
+
*/
|
|
215
|
+
destroy(): void;
|
|
216
|
+
}
|
|
217
|
+
|
|
218
|
+
/**
|
|
219
|
+
* VisibilityManager - IntersectionObserver와 Page Visibility API를 통합 관리
|
|
220
|
+
* 모든 효과에서 공통으로 사용하는 가시성 관리 유틸리티
|
|
221
|
+
*/
|
|
222
|
+
declare interface VisibilityManagerOptions {
|
|
223
|
+
threshold?: number;
|
|
224
|
+
rootMargin?: string;
|
|
225
|
+
onVisible?: () => void;
|
|
226
|
+
onHidden?: () => void;
|
|
227
|
+
}
|
|
228
|
+
|
|
216
229
|
export { }
|