masoneffect 2.0.3 → 2.0.4
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/typing/index.d.ts +5 -4
- package/dist/core/typing/index.d.ts.map +1 -1
- package/dist/count/core/typing/index.d.ts +5 -4
- package/dist/count/core/typing/index.d.ts.map +1 -1
- package/dist/index.cjs +1 -1
- package/dist/index.mjs +1 -1
- package/dist/react/core/typing/index.d.ts +5 -4
- package/dist/react/count/core/typing/index.d.ts +5 -4
- package/dist/react/count/core/typing/index.d.ts.map +1 -1
- package/dist/react/textToParticle/core/typing/index.d.ts +5 -4
- package/dist/react/textToParticle/core/typing/index.d.ts.map +1 -1
- package/dist/react/typing/core/typing/index.d.ts +5 -4
- package/dist/react/typing/core/typing/index.d.ts.map +1 -1
- package/dist/react/typing/index.cjs +1 -1
- package/dist/react/typing/index.mjs +1 -1
- package/dist/svelte/count/index.d.ts +5 -4
- package/dist/svelte/index.cjs +1 -1
- package/dist/svelte/index.d.ts +5 -4
- package/dist/svelte/index.mjs +57 -53
- package/dist/svelte/textToParticle/index.d.ts +5 -4
- package/dist/svelte/typing/index.cjs +1 -1
- package/dist/svelte/typing/index.d.ts +5 -4
- package/dist/svelte/typing/index.mjs +57 -53
- package/dist/textToParticle/core/typing/index.d.ts +5 -4
- package/dist/textToParticle/core/typing/index.d.ts.map +1 -1
- package/dist/typing/core/typing/index.d.ts +5 -4
- package/dist/typing/core/typing/index.d.ts.map +1 -1
- package/dist/typing/index.cjs +1 -1
- package/dist/typing/index.mjs +1 -1
- package/dist/vue/count/index.d.ts +5 -4
- package/dist/vue/index.cjs +1 -1
- package/dist/vue/index.d.ts +5 -4
- package/dist/vue/index.mjs +57 -53
- package/dist/vue/textToParticle/index.d.ts +5 -4
- package/dist/vue/typing/index.cjs +1 -1
- package/dist/vue/typing/index.d.ts +5 -4
- package/dist/vue/typing/index.mjs +57 -53
- package/package.json +1 -1
package/dist/svelte/index.cjs
CHANGED
|
@@ -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);Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("svelte");function n(){}function s(t){return t()}function o(){return Object.create(null)}function r(t){t.forEach(s)}function a(t){return"function"==typeof t}function h(t,e){return t!=t?e==e:t!==e||t&&"object"==typeof t||"function"==typeof t}function l(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 c(t,e,i){t.insertBefore(e,i||null)}function u(t){t.parentNode&&t.parentNode.removeChild(t)}function d(t){return document.createElement(t)}function f(t,e,i){null==i?t.removeAttribute(e):t.getAttribute(e)!==i&&t.setAttribute(e,i)}let g;function p(t){g=t}const m=[],x=[];let y=[];const v=[],b=Promise.resolve();let C=!1;function w(t){y.push(t)}const $=new Set;let M=0;function T(){if(0!==M)return;const t=g;do{try{for(;M<m.length;){const t=m[M];M++,p(t),R(t.$$)}}catch(e){throw m.length=0,M=0,e}for(p(null),m.length=0,M=0;x.length;)x.pop()();for(let t=0;t<y.length;t+=1){const e=y[t];$.has(e)||($.add(e),e())}y.length=0}while(m.length);for(;v.length;)v.pop()();C=!1,$.clear(),p(t)}function R(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(w)}}const O=new Set;function S(t,e){const i=t.$$;null!==i.fragment&&(!function(t){const e=[],i=[];y.forEach(n=>-1===t.indexOf(n)?e.push(n):i.push(n)),i.forEach(t=>t()),y=e}(i.after_update),r(i.on_destroy),i.fragment&&i.fragment.d(e),i.on_destroy=i.fragment=null,i.ctx=[])}function I(t,e){-1===t.$$.dirty[0]&&(m.push(t),C||(C=!0,b.then(T)),t.$$.dirty.fill(0)),t.$$.dirty[e/31|0]|=1<<e%31}function V(t,e,i,h,l,c,d=null,f=[-1]){const m=g;p(t);const x=t.$$={fragment:null,ctx:[],props:c,update:n,not_equal:l,bound:o(),on_mount:[],on_destroy:[],on_disconnect:[],before_update:[],after_update:[],context:new Map(e.context||(m?m.$$.context:[])),callbacks:o(),dirty:f,skip_bound:!1,root:e.target||m.$$.root};d&&d(x.root);let y=!1;if(x.ctx=i?i(t,e.props||{},(e,i,...n)=>{const s=n.length?n[0]:i;return x.ctx&&l(x.ctx[e],x.ctx[e]=s)&&(!x.skip_bound&&x.bound[e]&&x.bound[e](s),y&&I(t,e)),i}):[],x.update(),y=!0,r(x.before_update),x.fragment=!!h&&h(x.ctx),e.target){if(e.hydrate){const t=(C=e.target,Array.from(C.childNodes));x.fragment&&x.fragment.l(t),t.forEach(u)}else x.fragment&&x.fragment.c();e.intro&&((v=t.$$.fragment)&&v.i&&(O.delete(v),v.i(b))),function(t,e,i){const{fragment:n,after_update:o}=t.$$;n&&n.m(e,i),w(()=>{const e=t.$$.on_mount.map(s).filter(a);t.$$.on_destroy?t.$$.on_destroy.push(...e):r(e),t.$$.on_mount=[]}),o.forEach(w)}(t,e.target,e.anchor),T()}var v,b,C;p(m)}class U{constructor(){e(this,"$$"),e(this,"$$set")}$destroy(){S(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 P(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 D{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=P(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=P(this._morphInternal.bind(this),this.debounceDelay),this._debouncedUpdateConfig=P(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,r=.1*t,a=.05*t;let h=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);h=Math.max(h,t)}const l=s.length>0?o*s.length+r*(s.length-1):o;return{width:h,height:l,fits:h<=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,r=12;for(;s<=o;){const n=Math.floor((s+o)/2);this.measureTextFit(n,t,e,i).fits?(r=n,s=n+1):o=n-1}return r}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 r=t.split("\n"),a=o,h=.1*o,l=.05*o,c=r.length>0?a*r.length+h*(r.length-1):a;let u=this.H/2-c/2+a/2;for(const p of r){if(0===p.length){u+=a+h;continue}const t=p.split(""),e=this.offCtx.measureText(p).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,u),i+=this.offCtx.measureText(n).width+l;u+=a+h}const d=Math.max(2,this.config.densityStep),f=this.offCtx.getImageData(0,0,this.W,this.H).data,g=[];for(let p=0;p<this.H;p+=d)for(let t=0;t<this.W;t+=d){const e=4*(p*this.W+t);f[e]+f[e+1]+f[e+2]>600&&g.push({x:t,y:p})}for(;g.length>this.config.maxParticles;)g.splice(Math.floor(Math.random()*g.length),1);if(this.particles.length<g.length){const t=g.length-this.particles.length;for(let e=0;e<t;e++)this.particles.push(this.makeParticle())}else this.particles.length>g.length&&(this.particles.length=g.length);for(let p=0;p<this.particles.length;p++){const t=this.particles[p],e=g[p];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,r=this.config.repelRadius*this.DPR;if(o<r*r){const e=Math.sqrt(o)+1e-4,a=(this.mouse.down?-1:1)*this.config.repelStrength*(1-e/r);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)}}const _={linear:t=>t};class z{constructor(t,e){if(this.container="string"==typeof t?document.querySelector(t):t,!this.container)throw new Error("Container element not found");this.config={targetValue:e.targetValue,duration:e.duration??2e3,startValue:e.startValue??0,enabled:e.enabled??!0,easing:e.easing??_.linear,threshold:e.threshold??.2,rootMargin:e.rootMargin??"0px 0px -100px 0px",triggerOnce:e.triggerOnce??!1,onUpdate:e.onUpdate||null,onComplete:e.onComplete||null},this.currentValue=this.config.startValue,this.startTime=null,this.animationFrameId=null,this.intersectionObserver=null,this.isRunning=!1,this.hasTriggered=!1,this.init()}init(){this.updateDisplay(this.config.startValue),this.setupIntersectionObserver()}setupIntersectionObserver(){"undefined"!=typeof window&&void 0!==window.IntersectionObserver?(this.intersectionObserver=new IntersectionObserver(t=>{var e;for(const i of t)if(i.target===this.container)if(i.isIntersecting)!this.hasTriggered&&this.config.enabled&&(this.hasTriggered=!0,this.start()),this.config.triggerOnce&&(null==(e=this.intersectionObserver)||e.unobserve(this.container));else if(!this.config.triggerOnce){const t=i.boundingClientRect,e=window.innerHeight,n=window.innerWidth;(t.bottom<=0||t.top>=e||t.right<=0||t.left>=n)&&this.isRunning&&this.reset()}},{threshold:this.config.threshold,rootMargin:this.config.rootMargin}),this.intersectionObserver.observe(this.container)):this.config.enabled&&this.start()}start(){if(this.isRunning)return;if(!this.config.enabled)return;this.isRunning=!0,this.startTime=null,this.currentValue=this.config.startValue,this.updateDisplay(this.currentValue);const t=e=>{null===this.startTime&&(this.startTime=e);const i=e-this.startTime,n=Math.min(i/this.config.duration,1),s=this.config.easing(n);this.currentValue=Math.floor(this.config.startValue+(this.config.targetValue-this.config.startValue)*s),this.updateDisplay(this.currentValue),this.config.onUpdate&&this.config.onUpdate(this.currentValue),n<1?this.animationFrameId=requestAnimationFrame(t):(this.currentValue=this.config.targetValue,this.updateDisplay(this.currentValue),this.isRunning=!1,this.config.onComplete&&this.config.onComplete())};this.animationFrameId=requestAnimationFrame(t)}stop(){this.isRunning=!1,null!==this.animationFrameId&&(cancelAnimationFrame(this.animationFrameId),this.animationFrameId=null)}reset(){this.stop(),this.currentValue=this.config.startValue,this.updateDisplay(this.currentValue),this.hasTriggered=!1,this.startTime=null}updateDisplay(t){this.container.textContent=this.formatNumber(t)}formatNumber(t){return Math.floor(t).toLocaleString()}updateConfig(t){const e=this.isRunning;this.stop(),this.config={...this.config,...t,onUpdate:void 0!==t.onUpdate?t.onUpdate:this.config.onUpdate,onComplete:void 0!==t.onComplete?t.onComplete:this.config.onComplete},void 0!==t.targetValue?(this.reset(),e&&this.config.enabled&&this.start()):e&&this.config.enabled&&this.start()}getValue(){return this.currentValue}destroy(){this.stop(),this.intersectionObserver&&(this.intersectionObserver.disconnect(),this.intersectionObserver=null)}}function F(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=["","ㄱ","ㄲ","ㄳ","ㄴ","ㄵ","ㄶ","ㄷ","ㄹ","ㄺ","ㄻ","ㄼ","ㄽ","ㄾ","ㄿ","ㅀ","ㅁ","ㅂ","ㅄ","ㅅ","ㅆ","ㅇ","ㅈ","ㅊ","ㅋ","ㅌ","ㅍ","ㅎ"],a=[];return a.push(["ㄱ","ㄲ","ㄴ","ㄷ","ㄸ","ㄹ","ㅁ","ㅂ","ㅃ","ㅅ","ㅆ","ㅇ","ㅈ","ㅉ","ㅊ","ㅋ","ㅌ","ㅍ","ㅎ"][n]),a.push(["ㅏ","ㅐ","ㅑ","ㅒ","ㅓ","ㅔ","ㅕ","ㅖ","ㅗ","ㅘ","ㅙ","ㅚ","ㅛ","ㅜ","ㅝ","ㅞ","ㅟ","ㅠ","ㅡ","ㅢ","ㅣ"][s]),o>0&&a.push(r[o]),a}function E(t){const e=[];for(let i=0;i<t.length;i++){const n=t[i],s=n.charCodeAt(0);if(s>=44032&&s<=55203){const t=F(n);e.push(...t)}else e.push(n)}return e}class W{constructor(t,e){if(this.originalChars=[],this.charUnitMap=[],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},this.textUnits=E(this.config.text),this.originalChars=[],this.charUnitMap=[],this.initializeTextStructure(),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 i of t)i.target===this.container&&i.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)}initializeTextStructure(){this.originalChars=[],this.charUnitMap=[];for(let t=0;t<this.originalText.length;t++){const e=this.originalText[t],i=e.charCodeAt(0);if(this.originalChars.push(e),i>=44032&&i<=55203){const t=F(e);this.charUnitMap.push(t.length)}else this.charUnitMap.push(1)}}getCharIndexFromUnitIndex(t){if(0===t)return 0;let e=0,i=0;for(let n=0;n<this.charUnitMap.length;n++){const s=this.charUnitMap[n];if(i+=s,!(t>=i)){const o=t-(i-s);if(o>0){const t=this.originalChars[n]&&this.originalChars[n].charCodeAt(0)>=44032&&this.originalChars[n].charCodeAt(0)<=55203;(t&&o>=2||!t&&o>=1)&&(e=n+1)}break}e=n+1}return e}buildTextFromUnits(t){if(0===t.length)return"";const e=this.getCharIndexFromUnitIndex(t.length);return this.originalText.substring(0,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());const t=this.textUnits.slice(0,this.currentIndex+1);this.displayedText=this.buildTextFromUnits(t);let e=this.displayedText;this.config.showCursor&&(e+=this.config.cursorChar),this.updateDisplay(e),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,this.textUnits=E(t),this.initializeTextStructure(),this.reset(),this.config.enabled&&setTimeout(()=>this.start(),this.config.delay)}destroy(){this.stop(),this.intersectionObserver&&(this.intersectionObserver.disconnect(),this.intersectionObserver=null)}}function H(t){let e;return{c(){e=d("div"),f(e,"class",t[0]),f(e,"style",t[1])},m(i,n){c(i,e,n),t[21](e)},p(t,[i]){1&i&&f(e,"class",t[0]),2&i&&f(e,"style",t[1])},i:n,o:n,d(i){i&&u(e),t[21](null)}}}function L(t,e,n){let{text:s="mason effect"}=e,{densityStep:o=2}=e,{maxParticles:r=3200}=e,{pointSize:a=.5}=e,{ease:h=.05}=e,{repelRadius:l=150}=e,{repelStrength:c=1}=e,{particleColor:u="#fff"}=e,{fontFamily:d="Inter, system-ui, Arial"}=e,{fontSize:f=null}=e,{width:g=null}=e,{height:p=null}=e,{devicePixelRatio:m=null}=e,{className:y=""}=e,{style:v={}}=e;const b=i.createEventDispatcher();let C,w=null;return i.onMount(()=>{if(!C)return;n(20,w=new D(C,{text:s,densityStep:o,maxParticles:r,pointSize:a,ease:h,repelRadius:l,repelStrength:c,particleColor:u,fontFamily:d,fontSize:f,width:g,height:p,devicePixelRatio:m,onReady:t=>{b("ready",t)},onUpdate:t=>{b("update",t)}}))}),i.onDestroy(()=>{w&&(w.destroy(),n(20,w=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,r=t.maxParticles),"pointSize"in t&&n(6,a=t.pointSize),"ease"in t&&n(7,h=t.ease),"repelRadius"in t&&n(8,l=t.repelRadius),"repelStrength"in t&&n(9,c=t.repelStrength),"particleColor"in t&&n(10,u=t.particleColor),"fontFamily"in t&&n(11,d=t.fontFamily),"fontSize"in t&&n(12,f=t.fontSize),"width"in t&&n(13,g=t.width),"height"in t&&n(14,p=t.height),"devicePixelRatio"in t&&n(15,m=t.devicePixelRatio),"className"in t&&n(0,y=t.className),"style"in t&&n(1,v=t.style)},t.$$.update=()=>{1114104&t.$$.dirty&&w&&w.updateConfig({text:s,densityStep:o,maxParticles:r,pointSize:a,ease:h,repelRadius:l,repelStrength:c,particleColor:u,fontFamily:d,fontSize:f,width:g,height:p,devicePixelRatio:m})},[y,v,C,s,o,r,a,h,l,c,u,d,f,g,p,m,function(t){w&&w.morph(t)},function(){w&&w.scatter()},function(t){w&&w.updateConfig(t)},function(){w&&(w.destroy(),n(20,w=null))},w,function(t){x[t?"unshift":"push"](()=>{C=t,n(2,C)})}]}class N extends U{constructor(t){super(),V(this,t,L,H,h,{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]}}function A(t){let e;return{c(){e=d("div"),f(e,"class",t[0]),f(e,"style",t[1])},m(i,n){c(i,e,n),t[18](e)},p(t,[i]){1&i&&f(e,"class",t[0]),2&i&&f(e,"style",t[1])},i:n,o:n,d(i){i&&u(e),t[18](null)}}}function k(t,e,n){let{targetValue:s=0}=e,{duration:o=2e3}=e,{startValue:r=0}=e,{enabled:a=!0}=e,{easing:h=t=>t}=e,{threshold:l=.2}=e,{rootMargin:c="0px 0px -100px 0px"}=e,{triggerOnce:u=!1}=e,{className:d=""}=e,{style:f={}}=e;const g=i.createEventDispatcher();let p,m=null;return i.onMount(()=>{if(!p)return;n(17,m=new z(p,{targetValue:s,duration:o,startValue:r,enabled:a,easing:h,threshold:l,rootMargin:c,triggerOnce:u,onUpdate:t=>{g("update",t)},onComplete:()=>{g("complete")}}))}),i.onDestroy(()=>{m&&(m.destroy(),n(17,m=null))}),t.$$set=t=>{"targetValue"in t&&n(3,s=t.targetValue),"duration"in t&&n(4,o=t.duration),"startValue"in t&&n(5,r=t.startValue),"enabled"in t&&n(6,a=t.enabled),"easing"in t&&n(7,h=t.easing),"threshold"in t&&n(8,l=t.threshold),"rootMargin"in t&&n(9,c=t.rootMargin),"triggerOnce"in t&&n(10,u=t.triggerOnce),"className"in t&&n(0,d=t.className),"style"in t&&n(1,f=t.style)},t.$$.update=()=>{133112&t.$$.dirty&&m&&m.updateConfig({targetValue:s,duration:o,startValue:r,enabled:a,easing:h,threshold:l,rootMargin:c,triggerOnce:u,onUpdate:t=>{g("update",t)},onComplete:()=>{g("complete")}})},[d,f,p,s,o,r,a,h,l,c,u,function(){m&&m.start()},function(){m&&m.stop()},function(){m&&m.reset()},function(){return m?m.getValue():0},function(t){m&&m.updateConfig(t)},function(){m&&(m.destroy(),n(17,m=null))},m,function(t){x[t?"unshift":"push"](()=>{p=t,n(2,p)})}]}function q(t){let e;return{c(){e=d("div"),f(e,"class",t[1]),f(e,"style",t[2])},m(i,n){c(i,e,n),t[8](e)},p:n,i:n,o:n,d(i){i&&u(e),t[8](null)}}}function j(t,e,n){let s,o;l(t,effect,t=>n(10,s=t)),l(t,props,t=>n(11,o=t));let{text:r,speed:a=50,delay:h=0,enabled:c=!0,threshold:u=.2,rootMargin:d="0px 0px -100px 0px",triggerOnce:f=!1,showCursor:g=!0,cursorChar:p="|",className:m="",style:y="",onUpdate:v,onComplete:b}=o(),C=null,w=null;return i.onMount(()=>{if(!C)return;w=new W(C,{text:r,speed:a,delay:h,enabled:c,threshold:u,rootMargin:d,triggerOnce:f,showCursor:g,cursorChar:p,onUpdate:v,onComplete:b})}),i.onDestroy(()=>{w&&(w.destroy(),w=null)}),s(()=>{w&&r!==w.originalText&&w.setText(r)}),[C,m,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){x[t?"unshift":"push"](()=>{C=t,n(0,C)})}]}exports.Count=class extends U{constructor(t){super(),V(this,t,k,A,h,{targetValue:3,duration:4,startValue:5,enabled:6,easing:7,threshold:8,rootMargin:9,triggerOnce:10,className:0,style:1,start:11,stop:12,reset:13,getValue:14,updateConfig:15,destroy:16})}get start(){return this.$$.ctx[11]}get stop(){return this.$$.ctx[12]}get reset(){return this.$$.ctx[13]}get getValue(){return this.$$.ctx[14]}get updateConfig(){return this.$$.ctx[15]}get destroy(){return this.$$.ctx[16]}},exports.MasonEffect=N,exports.TextToParticle=N,exports.Typing=class extends U{constructor(t){super(),V(this,t,j,q,h,{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]}},exports.default=N;
|
|
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);Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("svelte");function n(){}function s(t){return t()}function o(){return Object.create(null)}function r(t){t.forEach(s)}function a(t){return"function"==typeof t}function h(t,e){return t!=t?e==e:t!==e||t&&"object"==typeof t||"function"==typeof t}function l(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 c(t,e,i){t.insertBefore(e,i||null)}function u(t){t.parentNode&&t.parentNode.removeChild(t)}function d(t){return document.createElement(t)}function f(t,e,i){null==i?t.removeAttribute(e):t.getAttribute(e)!==i&&t.setAttribute(e,i)}let g;function p(t){g=t}const m=[],x=[];let y=[];const v=[],b=Promise.resolve();let w=!1;function $(t){y.push(t)}const C=new Set;let M=0;function R(){if(0!==M)return;const t=g;do{try{for(;M<m.length;){const t=m[M];M++,p(t),O(t.$$)}}catch(e){throw m.length=0,M=0,e}for(p(null),m.length=0,M=0;x.length;)x.pop()();for(let t=0;t<y.length;t+=1){const e=y[t];C.has(e)||(C.add(e),e())}y.length=0}while(m.length);for(;v.length;)v.pop()();w=!1,C.clear(),p(t)}function O(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 T=new Set;function S(t,e){const i=t.$$;null!==i.fragment&&(!function(t){const e=[],i=[];y.forEach(n=>-1===t.indexOf(n)?e.push(n):i.push(n)),i.forEach(t=>t()),y=e}(i.after_update),r(i.on_destroy),i.fragment&&i.fragment.d(e),i.on_destroy=i.fragment=null,i.ctx=[])}function I(t,e){-1===t.$$.dirty[0]&&(m.push(t),w||(w=!0,b.then(R)),t.$$.dirty.fill(0)),t.$$.dirty[e/31|0]|=1<<e%31}function V(t,e,i,h,l,c,d=null,f=[-1]){const m=g;p(t);const x=t.$$={fragment:null,ctx:[],props:c,update:n,not_equal:l,bound:o(),on_mount:[],on_destroy:[],on_disconnect:[],before_update:[],after_update:[],context:new Map(e.context||(m?m.$$.context:[])),callbacks:o(),dirty:f,skip_bound:!1,root:e.target||m.$$.root};d&&d(x.root);let y=!1;if(x.ctx=i?i(t,e.props||{},(e,i,...n)=>{const s=n.length?n[0]:i;return x.ctx&&l(x.ctx[e],x.ctx[e]=s)&&(!x.skip_bound&&x.bound[e]&&x.bound[e](s),y&&I(t,e)),i}):[],x.update(),y=!0,r(x.before_update),x.fragment=!!h&&h(x.ctx),e.target){if(e.hydrate){const t=(w=e.target,Array.from(w.childNodes));x.fragment&&x.fragment.l(t),t.forEach(u)}else x.fragment&&x.fragment.c();e.intro&&((v=t.$$.fragment)&&v.i&&(T.delete(v),v.i(b))),function(t,e,i){const{fragment:n,after_update:o}=t.$$;n&&n.m(e,i),$(()=>{const e=t.$$.on_mount.map(s).filter(a);t.$$.on_destroy?t.$$.on_destroy.push(...e):r(e),t.$$.on_mount=[]}),o.forEach($)}(t,e.target,e.anchor),R()}var v,b,w;p(m)}class U{constructor(){e(this,"$$"),e(this,"$$set")}$destroy(){S(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 P(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 D{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=P(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=P(this._morphInternal.bind(this),this.debounceDelay),this._debouncedUpdateConfig=P(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,r=.1*t,a=.05*t;let h=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);h=Math.max(h,t)}const l=s.length>0?o*s.length+r*(s.length-1):o;return{width:h,height:l,fits:h<=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,r=12;for(;s<=o;){const n=Math.floor((s+o)/2);this.measureTextFit(n,t,e,i).fits?(r=n,s=n+1):o=n-1}return r}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 r=t.split("\n"),a=o,h=.1*o,l=.05*o,c=r.length>0?a*r.length+h*(r.length-1):a;let u=this.H/2-c/2+a/2;for(const p of r){if(0===p.length){u+=a+h;continue}const t=p.split(""),e=this.offCtx.measureText(p).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,u),i+=this.offCtx.measureText(n).width+l;u+=a+h}const d=Math.max(2,this.config.densityStep),f=this.offCtx.getImageData(0,0,this.W,this.H).data,g=[];for(let p=0;p<this.H;p+=d)for(let t=0;t<this.W;t+=d){const e=4*(p*this.W+t);f[e]+f[e+1]+f[e+2]>600&&g.push({x:t,y:p})}for(;g.length>this.config.maxParticles;)g.splice(Math.floor(Math.random()*g.length),1);if(this.particles.length<g.length){const t=g.length-this.particles.length;for(let e=0;e<t;e++)this.particles.push(this.makeParticle())}else this.particles.length>g.length&&(this.particles.length=g.length);for(let p=0;p<this.particles.length;p++){const t=this.particles[p],e=g[p];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,r=this.config.repelRadius*this.DPR;if(o<r*r){const e=Math.sqrt(o)+1e-4,a=(this.mouse.down?-1:1)*this.config.repelStrength*(1-e/r);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)}}const _={linear:t=>t};class z{constructor(t,e){if(this.container="string"==typeof t?document.querySelector(t):t,!this.container)throw new Error("Container element not found");this.config={targetValue:e.targetValue,duration:e.duration??2e3,startValue:e.startValue??0,enabled:e.enabled??!0,easing:e.easing??_.linear,threshold:e.threshold??.2,rootMargin:e.rootMargin??"0px 0px -100px 0px",triggerOnce:e.triggerOnce??!1,onUpdate:e.onUpdate||null,onComplete:e.onComplete||null},this.currentValue=this.config.startValue,this.startTime=null,this.animationFrameId=null,this.intersectionObserver=null,this.isRunning=!1,this.hasTriggered=!1,this.init()}init(){this.updateDisplay(this.config.startValue),this.setupIntersectionObserver()}setupIntersectionObserver(){"undefined"!=typeof window&&void 0!==window.IntersectionObserver?(this.intersectionObserver=new IntersectionObserver(t=>{var e;for(const i of t)if(i.target===this.container)if(i.isIntersecting)!this.hasTriggered&&this.config.enabled&&(this.hasTriggered=!0,this.start()),this.config.triggerOnce&&(null==(e=this.intersectionObserver)||e.unobserve(this.container));else if(!this.config.triggerOnce){const t=i.boundingClientRect,e=window.innerHeight,n=window.innerWidth;(t.bottom<=0||t.top>=e||t.right<=0||t.left>=n)&&this.isRunning&&this.reset()}},{threshold:this.config.threshold,rootMargin:this.config.rootMargin}),this.intersectionObserver.observe(this.container)):this.config.enabled&&this.start()}start(){if(this.isRunning)return;if(!this.config.enabled)return;this.isRunning=!0,this.startTime=null,this.currentValue=this.config.startValue,this.updateDisplay(this.currentValue);const t=e=>{null===this.startTime&&(this.startTime=e);const i=e-this.startTime,n=Math.min(i/this.config.duration,1),s=this.config.easing(n);this.currentValue=Math.floor(this.config.startValue+(this.config.targetValue-this.config.startValue)*s),this.updateDisplay(this.currentValue),this.config.onUpdate&&this.config.onUpdate(this.currentValue),n<1?this.animationFrameId=requestAnimationFrame(t):(this.currentValue=this.config.targetValue,this.updateDisplay(this.currentValue),this.isRunning=!1,this.config.onComplete&&this.config.onComplete())};this.animationFrameId=requestAnimationFrame(t)}stop(){this.isRunning=!1,null!==this.animationFrameId&&(cancelAnimationFrame(this.animationFrameId),this.animationFrameId=null)}reset(){this.stop(),this.currentValue=this.config.startValue,this.updateDisplay(this.currentValue),this.hasTriggered=!1,this.startTime=null}updateDisplay(t){this.container.textContent=this.formatNumber(t)}formatNumber(t){return Math.floor(t).toLocaleString()}updateConfig(t){const e=this.isRunning;this.stop(),this.config={...this.config,...t,onUpdate:void 0!==t.onUpdate?t.onUpdate:this.config.onUpdate,onComplete:void 0!==t.onComplete?t.onComplete:this.config.onComplete},void 0!==t.targetValue?(this.reset(),e&&this.config.enabled&&this.start()):e&&this.config.enabled&&this.start()}getValue(){return this.currentValue}destroy(){this.stop(),this.intersectionObserver&&(this.intersectionObserver.disconnect(),this.intersectionObserver=null)}}function E(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=["","ㄱ","ㄲ","ㄳ","ㄴ","ㄵ","ㄶ","ㄷ","ㄹ","ㄺ","ㄻ","ㄼ","ㄽ","ㄾ","ㄿ","ㅀ","ㅁ","ㅂ","ㅄ","ㅅ","ㅆ","ㅇ","ㅈ","ㅊ","ㅋ","ㅌ","ㅍ","ㅎ"],a=[];return a.push(["ㄱ","ㄲ","ㄴ","ㄷ","ㄸ","ㄹ","ㅁ","ㅂ","ㅃ","ㅅ","ㅆ","ㅇ","ㅈ","ㅉ","ㅊ","ㅋ","ㅌ","ㅍ","ㅎ"][n]),a.push(["ㅏ","ㅐ","ㅑ","ㅒ","ㅓ","ㅔ","ㅕ","ㅖ","ㅗ","ㅘ","ㅙ","ㅚ","ㅛ","ㅜ","ㅝ","ㅞ","ㅟ","ㅠ","ㅡ","ㅢ","ㅣ"][s]),o>0&&a.push(r[o]),a}function F(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 H(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=E(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 W{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=H(this.config.text);this.textUnits=i.units,this.charUnitRanges=i.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 i of t)i.target===this.container&&i.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 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+=F(t[0],t[1]):t.length>=3&&(e+=F(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=H(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 L(t){let e;return{c(){e=d("div"),f(e,"class",t[0]),f(e,"style",t[1])},m(i,n){c(i,e,n),t[21](e)},p(t,[i]){1&i&&f(e,"class",t[0]),2&i&&f(e,"style",t[1])},i:n,o:n,d(i){i&&u(e),t[21](null)}}}function N(t,e,n){let{text:s="mason effect"}=e,{densityStep:o=2}=e,{maxParticles:r=3200}=e,{pointSize:a=.5}=e,{ease:h=.05}=e,{repelRadius:l=150}=e,{repelStrength:c=1}=e,{particleColor:u="#fff"}=e,{fontFamily:d="Inter, system-ui, Arial"}=e,{fontSize:f=null}=e,{width:g=null}=e,{height:p=null}=e,{devicePixelRatio:m=null}=e,{className:y=""}=e,{style:v={}}=e;const b=i.createEventDispatcher();let w,$=null;return i.onMount(()=>{if(!w)return;n(20,$=new D(w,{text:s,densityStep:o,maxParticles:r,pointSize:a,ease:h,repelRadius:l,repelStrength:c,particleColor:u,fontFamily:d,fontSize:f,width:g,height:p,devicePixelRatio:m,onReady:t=>{b("ready",t)},onUpdate:t=>{b("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,r=t.maxParticles),"pointSize"in t&&n(6,a=t.pointSize),"ease"in t&&n(7,h=t.ease),"repelRadius"in t&&n(8,l=t.repelRadius),"repelStrength"in t&&n(9,c=t.repelStrength),"particleColor"in t&&n(10,u=t.particleColor),"fontFamily"in t&&n(11,d=t.fontFamily),"fontSize"in t&&n(12,f=t.fontSize),"width"in t&&n(13,g=t.width),"height"in t&&n(14,p=t.height),"devicePixelRatio"in t&&n(15,m=t.devicePixelRatio),"className"in t&&n(0,y=t.className),"style"in t&&n(1,v=t.style)},t.$$.update=()=>{1114104&t.$$.dirty&&$&&$.updateConfig({text:s,densityStep:o,maxParticles:r,pointSize:a,ease:h,repelRadius:l,repelStrength:c,particleColor:u,fontFamily:d,fontSize:f,width:g,height:p,devicePixelRatio:m})},[y,v,w,s,o,r,a,h,l,c,u,d,f,g,p,m,function(t){$&&$.morph(t)},function(){$&&$.scatter()},function(t){$&&$.updateConfig(t)},function(){$&&($.destroy(),n(20,$=null))},$,function(t){x[t?"unshift":"push"](()=>{w=t,n(2,w)})}]}class A extends U{constructor(t){super(),V(this,t,N,L,h,{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]}}function k(t){let e;return{c(){e=d("div"),f(e,"class",t[0]),f(e,"style",t[1])},m(i,n){c(i,e,n),t[18](e)},p(t,[i]){1&i&&f(e,"class",t[0]),2&i&&f(e,"style",t[1])},i:n,o:n,d(i){i&&u(e),t[18](null)}}}function q(t,e,n){let{targetValue:s=0}=e,{duration:o=2e3}=e,{startValue:r=0}=e,{enabled:a=!0}=e,{easing:h=t=>t}=e,{threshold:l=.2}=e,{rootMargin:c="0px 0px -100px 0px"}=e,{triggerOnce:u=!1}=e,{className:d=""}=e,{style:f={}}=e;const g=i.createEventDispatcher();let p,m=null;return i.onMount(()=>{if(!p)return;n(17,m=new z(p,{targetValue:s,duration:o,startValue:r,enabled:a,easing:h,threshold:l,rootMargin:c,triggerOnce:u,onUpdate:t=>{g("update",t)},onComplete:()=>{g("complete")}}))}),i.onDestroy(()=>{m&&(m.destroy(),n(17,m=null))}),t.$$set=t=>{"targetValue"in t&&n(3,s=t.targetValue),"duration"in t&&n(4,o=t.duration),"startValue"in t&&n(5,r=t.startValue),"enabled"in t&&n(6,a=t.enabled),"easing"in t&&n(7,h=t.easing),"threshold"in t&&n(8,l=t.threshold),"rootMargin"in t&&n(9,c=t.rootMargin),"triggerOnce"in t&&n(10,u=t.triggerOnce),"className"in t&&n(0,d=t.className),"style"in t&&n(1,f=t.style)},t.$$.update=()=>{133112&t.$$.dirty&&m&&m.updateConfig({targetValue:s,duration:o,startValue:r,enabled:a,easing:h,threshold:l,rootMargin:c,triggerOnce:u,onUpdate:t=>{g("update",t)},onComplete:()=>{g("complete")}})},[d,f,p,s,o,r,a,h,l,c,u,function(){m&&m.start()},function(){m&&m.stop()},function(){m&&m.reset()},function(){return m?m.getValue():0},function(t){m&&m.updateConfig(t)},function(){m&&(m.destroy(),n(17,m=null))},m,function(t){x[t?"unshift":"push"](()=>{p=t,n(2,p)})}]}function j(t){let e;return{c(){e=d("div"),f(e,"class",t[1]),f(e,"style",t[2])},m(i,n){c(i,e,n),t[8](e)},p:n,i:n,o:n,d(i){i&&u(e),t[8](null)}}}function X(t,e,n){let s,o;l(t,effect,t=>n(10,s=t)),l(t,props,t=>n(11,o=t));let{text:r,speed:a=50,delay:h=0,enabled:c=!0,threshold:u=.2,rootMargin:d="0px 0px -100px 0px",triggerOnce:f=!1,showCursor:g=!0,cursorChar:p="|",className:m="",style:y="",onUpdate:v,onComplete:b}=o(),w=null,$=null;return i.onMount(()=>{if(!w)return;$=new W(w,{text:r,speed:a,delay:h,enabled:c,threshold:u,rootMargin:d,triggerOnce:f,showCursor:g,cursorChar:p,onUpdate:v,onComplete:b})}),i.onDestroy(()=>{$&&($.destroy(),$=null)}),s(()=>{$&&r!==$.originalText&&$.setText(r)}),[w,m,y,function(){null==$||$.start()},function(){null==$||$.stop()},function(){null==$||$.reset()},function(t){null==$||$.setText(t)},function(){$&&($.destroy(),$=null)},function(t){x[t?"unshift":"push"](()=>{w=t,n(0,w)})}]}exports.Count=class extends U{constructor(t){super(),V(this,t,q,k,h,{targetValue:3,duration:4,startValue:5,enabled:6,easing:7,threshold:8,rootMargin:9,triggerOnce:10,className:0,style:1,start:11,stop:12,reset:13,getValue:14,updateConfig:15,destroy:16})}get start(){return this.$$.ctx[11]}get stop(){return this.$$.ctx[12]}get reset(){return this.$$.ctx[13]}get getValue(){return this.$$.ctx[14]}get updateConfig(){return this.$$.ctx[15]}get destroy(){return this.$$.ctx[16]}},exports.MasonEffect=A,exports.TextToParticle=A,exports.Typing=class extends U{constructor(t){super(),V(this,t,X,j,h,{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]}},exports.default=A;
|
package/dist/svelte/index.d.ts
CHANGED
|
@@ -167,6 +167,11 @@ declare class TextToParticle {
|
|
|
167
167
|
onComplete: TypingOptions['onComplete'];
|
|
168
168
|
};
|
|
169
169
|
textUnits: string[];
|
|
170
|
+
charUnitRanges: Array<{
|
|
171
|
+
start: number;
|
|
172
|
+
end: number;
|
|
173
|
+
isHangul: boolean;
|
|
174
|
+
}>;
|
|
170
175
|
currentIndex: number;
|
|
171
176
|
displayedText: string;
|
|
172
177
|
timeoutId: ReturnType<typeof setTimeout> | null;
|
|
@@ -177,10 +182,6 @@ declare class TextToParticle {
|
|
|
177
182
|
constructor(container: HTMLElement | string, options: TypingOptions);
|
|
178
183
|
init(): void;
|
|
179
184
|
setupIntersectionObserver(): void;
|
|
180
|
-
private originalChars;
|
|
181
|
-
private charUnitMap;
|
|
182
|
-
private initializeTextStructure;
|
|
183
|
-
private getCharIndexFromUnitIndex;
|
|
184
185
|
private buildTextFromUnits;
|
|
185
186
|
start(): void;
|
|
186
187
|
typeNext(): void;
|
package/dist/svelte/index.mjs
CHANGED
|
@@ -880,25 +880,48 @@ function decomposeHangul(char) {
|
|
|
880
880
|
}
|
|
881
881
|
return result;
|
|
882
882
|
}
|
|
883
|
+
function composeHangul(initial, medial, final) {
|
|
884
|
+
const initialChars = ["ㄱ", "ㄲ", "ㄴ", "ㄷ", "ㄸ", "ㄹ", "ㅁ", "ㅂ", "ㅃ", "ㅅ", "ㅆ", "ㅇ", "ㅈ", "ㅉ", "ㅊ", "ㅋ", "ㅌ", "ㅍ", "ㅎ"];
|
|
885
|
+
const medialChars = ["ㅏ", "ㅐ", "ㅑ", "ㅒ", "ㅓ", "ㅔ", "ㅕ", "ㅖ", "ㅗ", "ㅘ", "ㅙ", "ㅚ", "ㅛ", "ㅜ", "ㅝ", "ㅞ", "ㅟ", "ㅠ", "ㅡ", "ㅢ", "ㅣ"];
|
|
886
|
+
const finalChars = ["", "ㄱ", "ㄲ", "ㄳ", "ㄴ", "ㄵ", "ㄶ", "ㄷ", "ㄹ", "ㄺ", "ㄻ", "ㄼ", "ㄽ", "ㄾ", "ㄿ", "ㅀ", "ㅁ", "ㅂ", "ㅄ", "ㅅ", "ㅆ", "ㅇ", "ㅈ", "ㅊ", "ㅋ", "ㅌ", "ㅍ", "ㅎ"];
|
|
887
|
+
const initialIndex = initialChars.indexOf(initial);
|
|
888
|
+
const medialIndex = medialChars.indexOf(medial);
|
|
889
|
+
const finalIndex = final ? finalChars.indexOf(final) : 0;
|
|
890
|
+
if (initialIndex === -1 || medialIndex === -1) {
|
|
891
|
+
return initial + (medial || "") + (final || "");
|
|
892
|
+
}
|
|
893
|
+
const code = 44032 + initialIndex * 21 * 28 + medialIndex * 28 + finalIndex;
|
|
894
|
+
return String.fromCharCode(code);
|
|
895
|
+
}
|
|
883
896
|
function decomposeText(text) {
|
|
884
897
|
const units = [];
|
|
898
|
+
const charUnitRanges = [];
|
|
885
899
|
for (let i = 0; i < text.length; i++) {
|
|
886
900
|
const char = text[i];
|
|
887
901
|
const code = char.charCodeAt(0);
|
|
902
|
+
const startIndex = units.length;
|
|
888
903
|
if (code >= 44032 && code <= 55203) {
|
|
889
904
|
const decomposed = decomposeHangul(char);
|
|
890
905
|
units.push(...decomposed);
|
|
906
|
+
charUnitRanges.push({
|
|
907
|
+
start: startIndex,
|
|
908
|
+
end: units.length,
|
|
909
|
+
isHangul: true
|
|
910
|
+
});
|
|
891
911
|
} else {
|
|
892
912
|
units.push(char);
|
|
913
|
+
charUnitRanges.push({
|
|
914
|
+
start: startIndex,
|
|
915
|
+
end: units.length,
|
|
916
|
+
isHangul: false
|
|
917
|
+
});
|
|
893
918
|
}
|
|
894
919
|
}
|
|
895
|
-
return units;
|
|
920
|
+
return { units, charUnitRanges };
|
|
896
921
|
}
|
|
897
922
|
class Typing {
|
|
898
923
|
// 원본 텍스트
|
|
899
924
|
constructor(container, options) {
|
|
900
|
-
this.originalChars = [];
|
|
901
|
-
this.charUnitMap = [];
|
|
902
925
|
this.container = typeof container === "string" ? document.querySelector(container) : container;
|
|
903
926
|
if (!this.container) {
|
|
904
927
|
throw new Error("Container element not found");
|
|
@@ -917,10 +940,9 @@ class Typing {
|
|
|
917
940
|
onUpdate: options.onUpdate || null,
|
|
918
941
|
onComplete: options.onComplete || null
|
|
919
942
|
};
|
|
920
|
-
|
|
921
|
-
this.
|
|
922
|
-
this.
|
|
923
|
-
this.initializeTextStructure();
|
|
943
|
+
const decomposed = decomposeText(this.config.text);
|
|
944
|
+
this.textUnits = decomposed.units;
|
|
945
|
+
this.charUnitRanges = decomposed.charUnitRanges;
|
|
924
946
|
this.currentIndex = 0;
|
|
925
947
|
this.displayedText = "";
|
|
926
948
|
this.timeoutId = null;
|
|
@@ -963,54 +985,36 @@ class Typing {
|
|
|
963
985
|
);
|
|
964
986
|
this.intersectionObserver.observe(this.container);
|
|
965
987
|
}
|
|
966
|
-
//
|
|
967
|
-
|
|
968
|
-
|
|
969
|
-
|
|
970
|
-
|
|
971
|
-
|
|
972
|
-
const
|
|
973
|
-
|
|
974
|
-
|
|
975
|
-
const decomposed = decomposeHangul(char);
|
|
976
|
-
this.charUnitMap.push(decomposed.length);
|
|
977
|
-
} else {
|
|
978
|
-
this.charUnitMap.push(1);
|
|
988
|
+
// 단위들을 다시 합쳐서 실제 표시할 텍스트 생성
|
|
989
|
+
// 한글의 경우 자음/모음이 하나씩 보이도록 합성
|
|
990
|
+
buildTextFromUnits(unitCount) {
|
|
991
|
+
if (unitCount === 0) return "";
|
|
992
|
+
let result = "";
|
|
993
|
+
for (let charIndex = 0; charIndex < this.charUnitRanges.length; charIndex++) {
|
|
994
|
+
const range = this.charUnitRanges[charIndex];
|
|
995
|
+
if (range.start >= unitCount) {
|
|
996
|
+
break;
|
|
979
997
|
}
|
|
980
|
-
|
|
981
|
-
|
|
982
|
-
|
|
983
|
-
|
|
984
|
-
|
|
985
|
-
|
|
986
|
-
|
|
987
|
-
|
|
988
|
-
|
|
989
|
-
|
|
990
|
-
|
|
991
|
-
|
|
992
|
-
|
|
993
|
-
charIndex = i + 1;
|
|
998
|
+
const unitsEntered = Math.min(unitCount - range.start, range.end - range.start);
|
|
999
|
+
if (unitsEntered <= 0) {
|
|
1000
|
+
break;
|
|
1001
|
+
}
|
|
1002
|
+
if (range.isHangul) {
|
|
1003
|
+
const charUnits = this.textUnits.slice(range.start, range.start + unitsEntered);
|
|
1004
|
+
if (charUnits.length === 1) {
|
|
1005
|
+
result += charUnits[0];
|
|
1006
|
+
} else if (charUnits.length === 2) {
|
|
1007
|
+
result += composeHangul(charUnits[0], charUnits[1]);
|
|
1008
|
+
} else if (charUnits.length >= 3) {
|
|
1009
|
+
result += composeHangul(charUnits[0], charUnits[1], charUnits[2]);
|
|
1010
|
+
}
|
|
994
1011
|
} else {
|
|
995
|
-
const unitsEntered = unitIndex - (currentUnits - unitsForChar);
|
|
996
1012
|
if (unitsEntered > 0) {
|
|
997
|
-
|
|
998
|
-
if (isHangul && unitsEntered >= 2) {
|
|
999
|
-
charIndex = i + 1;
|
|
1000
|
-
} else if (!isHangul && unitsEntered >= 1) {
|
|
1001
|
-
charIndex = i + 1;
|
|
1002
|
-
}
|
|
1013
|
+
result += this.textUnits[range.start];
|
|
1003
1014
|
}
|
|
1004
|
-
break;
|
|
1005
1015
|
}
|
|
1006
1016
|
}
|
|
1007
|
-
return
|
|
1008
|
-
}
|
|
1009
|
-
// 단위들을 다시 합쳐서 실제 표시할 텍스트 생성
|
|
1010
|
-
buildTextFromUnits(units) {
|
|
1011
|
-
if (units.length === 0) return "";
|
|
1012
|
-
const charIndex = this.getCharIndexFromUnitIndex(units.length);
|
|
1013
|
-
return this.originalText.substring(0, charIndex);
|
|
1017
|
+
return result;
|
|
1014
1018
|
}
|
|
1015
1019
|
start() {
|
|
1016
1020
|
if (this.isRunning) return;
|
|
@@ -1030,8 +1034,7 @@ class Typing {
|
|
|
1030
1034
|
}
|
|
1031
1035
|
return;
|
|
1032
1036
|
}
|
|
1033
|
-
|
|
1034
|
-
this.displayedText = this.buildTextFromUnits(unitsToShow);
|
|
1037
|
+
this.displayedText = this.buildTextFromUnits(this.currentIndex + 1);
|
|
1035
1038
|
let displayText = this.displayedText;
|
|
1036
1039
|
if (this.config.showCursor) {
|
|
1037
1040
|
displayText += this.config.cursorChar;
|
|
@@ -1066,8 +1069,9 @@ class Typing {
|
|
|
1066
1069
|
setText(newText) {
|
|
1067
1070
|
this.originalText = newText;
|
|
1068
1071
|
this.config.text = newText;
|
|
1069
|
-
|
|
1070
|
-
this.
|
|
1072
|
+
const decomposed = decomposeText(newText);
|
|
1073
|
+
this.textUnits = decomposed.units;
|
|
1074
|
+
this.charUnitRanges = decomposed.charUnitRanges;
|
|
1071
1075
|
this.reset();
|
|
1072
1076
|
if (this.config.enabled) {
|
|
1073
1077
|
setTimeout(() => this.start(), this.config.delay);
|
|
@@ -167,6 +167,11 @@ declare class TextToParticle {
|
|
|
167
167
|
onComplete: TypingOptions['onComplete'];
|
|
168
168
|
};
|
|
169
169
|
textUnits: string[];
|
|
170
|
+
charUnitRanges: Array<{
|
|
171
|
+
start: number;
|
|
172
|
+
end: number;
|
|
173
|
+
isHangul: boolean;
|
|
174
|
+
}>;
|
|
170
175
|
currentIndex: number;
|
|
171
176
|
displayedText: string;
|
|
172
177
|
timeoutId: ReturnType<typeof setTimeout> | null;
|
|
@@ -177,10 +182,6 @@ declare class TextToParticle {
|
|
|
177
182
|
constructor(container: HTMLElement | string, options: TypingOptions);
|
|
178
183
|
init(): void;
|
|
179
184
|
setupIntersectionObserver(): void;
|
|
180
|
-
private originalChars;
|
|
181
|
-
private charUnitMap;
|
|
182
|
-
private initializeTextStructure;
|
|
183
|
-
private getCharIndexFromUnitIndex;
|
|
184
185
|
private buildTextFromUnits;
|
|
185
186
|
start(): void;
|
|
186
187
|
typeNext(): void;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var t=Object.defineProperty,e=(e,n,
|
|
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]}};
|
|
@@ -167,6 +167,11 @@ declare class TextToParticle {
|
|
|
167
167
|
onComplete: TypingOptions['onComplete'];
|
|
168
168
|
};
|
|
169
169
|
textUnits: string[];
|
|
170
|
+
charUnitRanges: Array<{
|
|
171
|
+
start: number;
|
|
172
|
+
end: number;
|
|
173
|
+
isHangul: boolean;
|
|
174
|
+
}>;
|
|
170
175
|
currentIndex: number;
|
|
171
176
|
displayedText: string;
|
|
172
177
|
timeoutId: ReturnType<typeof setTimeout> | null;
|
|
@@ -177,10 +182,6 @@ declare class TextToParticle {
|
|
|
177
182
|
constructor(container: HTMLElement | string, options: TypingOptions);
|
|
178
183
|
init(): void;
|
|
179
184
|
setupIntersectionObserver(): void;
|
|
180
|
-
private originalChars;
|
|
181
|
-
private charUnitMap;
|
|
182
|
-
private initializeTextStructure;
|
|
183
|
-
private getCharIndexFromUnitIndex;
|
|
184
185
|
private buildTextFromUnits;
|
|
185
186
|
start(): void;
|
|
186
187
|
typeNext(): void;
|
|
@@ -296,25 +296,48 @@ function decomposeHangul(char) {
|
|
|
296
296
|
}
|
|
297
297
|
return result;
|
|
298
298
|
}
|
|
299
|
+
function composeHangul(initial, medial, final) {
|
|
300
|
+
const initialChars = ["ㄱ", "ㄲ", "ㄴ", "ㄷ", "ㄸ", "ㄹ", "ㅁ", "ㅂ", "ㅃ", "ㅅ", "ㅆ", "ㅇ", "ㅈ", "ㅉ", "ㅊ", "ㅋ", "ㅌ", "ㅍ", "ㅎ"];
|
|
301
|
+
const medialChars = ["ㅏ", "ㅐ", "ㅑ", "ㅒ", "ㅓ", "ㅔ", "ㅕ", "ㅖ", "ㅗ", "ㅘ", "ㅙ", "ㅚ", "ㅛ", "ㅜ", "ㅝ", "ㅞ", "ㅟ", "ㅠ", "ㅡ", "ㅢ", "ㅣ"];
|
|
302
|
+
const finalChars = ["", "ㄱ", "ㄲ", "ㄳ", "ㄴ", "ㄵ", "ㄶ", "ㄷ", "ㄹ", "ㄺ", "ㄻ", "ㄼ", "ㄽ", "ㄾ", "ㄿ", "ㅀ", "ㅁ", "ㅂ", "ㅄ", "ㅅ", "ㅆ", "ㅇ", "ㅈ", "ㅊ", "ㅋ", "ㅌ", "ㅍ", "ㅎ"];
|
|
303
|
+
const initialIndex = initialChars.indexOf(initial);
|
|
304
|
+
const medialIndex = medialChars.indexOf(medial);
|
|
305
|
+
const finalIndex = final ? finalChars.indexOf(final) : 0;
|
|
306
|
+
if (initialIndex === -1 || medialIndex === -1) {
|
|
307
|
+
return initial + (medial || "") + (final || "");
|
|
308
|
+
}
|
|
309
|
+
const code = 44032 + initialIndex * 21 * 28 + medialIndex * 28 + finalIndex;
|
|
310
|
+
return String.fromCharCode(code);
|
|
311
|
+
}
|
|
299
312
|
function decomposeText(text) {
|
|
300
313
|
const units = [];
|
|
314
|
+
const charUnitRanges = [];
|
|
301
315
|
for (let i = 0; i < text.length; i++) {
|
|
302
316
|
const char = text[i];
|
|
303
317
|
const code = char.charCodeAt(0);
|
|
318
|
+
const startIndex = units.length;
|
|
304
319
|
if (code >= 44032 && code <= 55203) {
|
|
305
320
|
const decomposed = decomposeHangul(char);
|
|
306
321
|
units.push(...decomposed);
|
|
322
|
+
charUnitRanges.push({
|
|
323
|
+
start: startIndex,
|
|
324
|
+
end: units.length,
|
|
325
|
+
isHangul: true
|
|
326
|
+
});
|
|
307
327
|
} else {
|
|
308
328
|
units.push(char);
|
|
329
|
+
charUnitRanges.push({
|
|
330
|
+
start: startIndex,
|
|
331
|
+
end: units.length,
|
|
332
|
+
isHangul: false
|
|
333
|
+
});
|
|
309
334
|
}
|
|
310
335
|
}
|
|
311
|
-
return units;
|
|
336
|
+
return { units, charUnitRanges };
|
|
312
337
|
}
|
|
313
338
|
class Typing {
|
|
314
339
|
// 원본 텍스트
|
|
315
340
|
constructor(container, options) {
|
|
316
|
-
this.originalChars = [];
|
|
317
|
-
this.charUnitMap = [];
|
|
318
341
|
this.container = typeof container === "string" ? document.querySelector(container) : container;
|
|
319
342
|
if (!this.container) {
|
|
320
343
|
throw new Error("Container element not found");
|
|
@@ -333,10 +356,9 @@ class Typing {
|
|
|
333
356
|
onUpdate: options.onUpdate || null,
|
|
334
357
|
onComplete: options.onComplete || null
|
|
335
358
|
};
|
|
336
|
-
|
|
337
|
-
this.
|
|
338
|
-
this.
|
|
339
|
-
this.initializeTextStructure();
|
|
359
|
+
const decomposed = decomposeText(this.config.text);
|
|
360
|
+
this.textUnits = decomposed.units;
|
|
361
|
+
this.charUnitRanges = decomposed.charUnitRanges;
|
|
340
362
|
this.currentIndex = 0;
|
|
341
363
|
this.displayedText = "";
|
|
342
364
|
this.timeoutId = null;
|
|
@@ -379,54 +401,36 @@ class Typing {
|
|
|
379
401
|
);
|
|
380
402
|
this.intersectionObserver.observe(this.container);
|
|
381
403
|
}
|
|
382
|
-
//
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
const
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
const decomposed = decomposeHangul(char);
|
|
392
|
-
this.charUnitMap.push(decomposed.length);
|
|
393
|
-
} else {
|
|
394
|
-
this.charUnitMap.push(1);
|
|
404
|
+
// 단위들을 다시 합쳐서 실제 표시할 텍스트 생성
|
|
405
|
+
// 한글의 경우 자음/모음이 하나씩 보이도록 합성
|
|
406
|
+
buildTextFromUnits(unitCount) {
|
|
407
|
+
if (unitCount === 0) return "";
|
|
408
|
+
let result = "";
|
|
409
|
+
for (let charIndex = 0; charIndex < this.charUnitRanges.length; charIndex++) {
|
|
410
|
+
const range = this.charUnitRanges[charIndex];
|
|
411
|
+
if (range.start >= unitCount) {
|
|
412
|
+
break;
|
|
395
413
|
}
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
charIndex = i + 1;
|
|
414
|
+
const unitsEntered = Math.min(unitCount - range.start, range.end - range.start);
|
|
415
|
+
if (unitsEntered <= 0) {
|
|
416
|
+
break;
|
|
417
|
+
}
|
|
418
|
+
if (range.isHangul) {
|
|
419
|
+
const charUnits = this.textUnits.slice(range.start, range.start + unitsEntered);
|
|
420
|
+
if (charUnits.length === 1) {
|
|
421
|
+
result += charUnits[0];
|
|
422
|
+
} else if (charUnits.length === 2) {
|
|
423
|
+
result += composeHangul(charUnits[0], charUnits[1]);
|
|
424
|
+
} else if (charUnits.length >= 3) {
|
|
425
|
+
result += composeHangul(charUnits[0], charUnits[1], charUnits[2]);
|
|
426
|
+
}
|
|
410
427
|
} else {
|
|
411
|
-
const unitsEntered = unitIndex - (currentUnits - unitsForChar);
|
|
412
428
|
if (unitsEntered > 0) {
|
|
413
|
-
|
|
414
|
-
if (isHangul && unitsEntered >= 2) {
|
|
415
|
-
charIndex = i + 1;
|
|
416
|
-
} else if (!isHangul && unitsEntered >= 1) {
|
|
417
|
-
charIndex = i + 1;
|
|
418
|
-
}
|
|
429
|
+
result += this.textUnits[range.start];
|
|
419
430
|
}
|
|
420
|
-
break;
|
|
421
431
|
}
|
|
422
432
|
}
|
|
423
|
-
return
|
|
424
|
-
}
|
|
425
|
-
// 단위들을 다시 합쳐서 실제 표시할 텍스트 생성
|
|
426
|
-
buildTextFromUnits(units) {
|
|
427
|
-
if (units.length === 0) return "";
|
|
428
|
-
const charIndex = this.getCharIndexFromUnitIndex(units.length);
|
|
429
|
-
return this.originalText.substring(0, charIndex);
|
|
433
|
+
return result;
|
|
430
434
|
}
|
|
431
435
|
start() {
|
|
432
436
|
if (this.isRunning) return;
|
|
@@ -446,8 +450,7 @@ class Typing {
|
|
|
446
450
|
}
|
|
447
451
|
return;
|
|
448
452
|
}
|
|
449
|
-
|
|
450
|
-
this.displayedText = this.buildTextFromUnits(unitsToShow);
|
|
453
|
+
this.displayedText = this.buildTextFromUnits(this.currentIndex + 1);
|
|
451
454
|
let displayText = this.displayedText;
|
|
452
455
|
if (this.config.showCursor) {
|
|
453
456
|
displayText += this.config.cursorChar;
|
|
@@ -482,8 +485,9 @@ class Typing {
|
|
|
482
485
|
setText(newText) {
|
|
483
486
|
this.originalText = newText;
|
|
484
487
|
this.config.text = newText;
|
|
485
|
-
|
|
486
|
-
this.
|
|
488
|
+
const decomposed = decomposeText(newText);
|
|
489
|
+
this.textUnits = decomposed.units;
|
|
490
|
+
this.charUnitRanges = decomposed.charUnitRanges;
|
|
487
491
|
this.reset();
|
|
488
492
|
if (this.config.enabled) {
|
|
489
493
|
setTimeout(() => this.start(), this.config.delay);
|
|
@@ -25,6 +25,11 @@ export declare class Typing {
|
|
|
25
25
|
onComplete: TypingOptions['onComplete'];
|
|
26
26
|
};
|
|
27
27
|
textUnits: string[];
|
|
28
|
+
charUnitRanges: Array<{
|
|
29
|
+
start: number;
|
|
30
|
+
end: number;
|
|
31
|
+
isHangul: boolean;
|
|
32
|
+
}>;
|
|
28
33
|
currentIndex: number;
|
|
29
34
|
displayedText: string;
|
|
30
35
|
timeoutId: ReturnType<typeof setTimeout> | null;
|
|
@@ -35,10 +40,6 @@ export declare class Typing {
|
|
|
35
40
|
constructor(container: HTMLElement | string, options: TypingOptions);
|
|
36
41
|
init(): void;
|
|
37
42
|
setupIntersectionObserver(): void;
|
|
38
|
-
private originalChars;
|
|
39
|
-
private charUnitMap;
|
|
40
|
-
private initializeTextStructure;
|
|
41
|
-
private getCharIndexFromUnitIndex;
|
|
42
43
|
private buildTextFromUnits;
|
|
43
44
|
start(): void;
|
|
44
45
|
typeNext(): void;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/core/typing/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/core/typing/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB;AAyFD,qBAAa,MAAM;IACjB,SAAS,EAAE,WAAW,CAAC;IACvB,MAAM,EAAE,QAAQ,CAAC,IAAI,CAAC,aAAa,EAAE,UAAU,GAAG,YAAY,CAAC,CAAC,GAAG;QACjE,QAAQ,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;QACpC,UAAU,EAAE,aAAa,CAAC,YAAY,CAAC,CAAC;KACzC,CAAC;IACF,SAAS,EAAE,MAAM,EAAE,CAAC;IACpB,cAAc,EAAE,KAAK,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,OAAO,CAAA;KAAE,CAAC,CAAC;IACzE,YAAY,EAAE,MAAM,CAAC;IACrB,aAAa,EAAE,MAAM,CAAC;IACtB,SAAS,EAAE,UAAU,CAAC,OAAO,UAAU,CAAC,GAAG,IAAI,CAAC;IAChD,oBAAoB,EAAE,oBAAoB,GAAG,IAAI,CAAC;IAClD,SAAS,EAAE,OAAO,CAAC;IACnB,YAAY,EAAE,OAAO,CAAC;IACtB,YAAY,EAAE,MAAM,CAAC;gBAET,SAAS,EAAE,WAAW,GAAG,MAAM,EAAE,OAAO,EAAE,aAAa;IA6CnE,IAAI,IAAI,IAAI;IAQZ,yBAAyB,IAAI,IAAI;IAqCjC,OAAO,CAAC,kBAAkB;IAgD1B,KAAK,IAAI,IAAI;IASb,QAAQ,IAAI,IAAI;IAuChB,IAAI,IAAI,IAAI;IAQZ,KAAK,IAAI,IAAI;IAQb,aAAa,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI;IAKjC,OAAO,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI;IAa9B,OAAO,IAAI,IAAI;CAOhB;AAGD,eAAe,MAAM,CAAC"}
|