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.
Files changed (101) hide show
  1. package/README.md +2 -2
  2. package/dist/core/count/index.d.ts +3 -2
  3. package/dist/core/count/index.d.ts.map +1 -1
  4. package/dist/core/textToParticle/index.d.ts +3 -3
  5. package/dist/core/textToParticle/index.d.ts.map +1 -1
  6. package/dist/core/typing/index.d.ts +3 -2
  7. package/dist/core/typing/index.d.ts.map +1 -1
  8. package/dist/core/utils/visibilityManager.d.ts +35 -0
  9. package/dist/core/utils/visibilityManager.d.ts.map +1 -0
  10. package/dist/count/core/count/index.d.ts +3 -2
  11. package/dist/count/core/count/index.d.ts.map +1 -1
  12. package/dist/count/core/textToParticle/index.d.ts +3 -3
  13. package/dist/count/core/textToParticle/index.d.ts.map +1 -1
  14. package/dist/count/core/typing/index.d.ts +3 -2
  15. package/dist/count/core/typing/index.d.ts.map +1 -1
  16. package/dist/count/core/utils/visibilityManager.d.ts +35 -0
  17. package/dist/count/core/utils/visibilityManager.d.ts.map +1 -0
  18. package/dist/count/index.cjs +1 -1
  19. package/dist/count/index.mjs +1 -1
  20. package/dist/index.cjs +1 -1
  21. package/dist/index.mjs +1 -1
  22. package/dist/index.umd.min.js +1 -1
  23. package/dist/react/core/count/index.d.ts +3 -2
  24. package/dist/react/core/textToParticle/index.d.ts +3 -3
  25. package/dist/react/core/typing/index.d.ts +3 -2
  26. package/dist/react/core/utils/visibilityManager.d.ts +34 -0
  27. package/dist/react/count/core/count/index.d.ts +3 -2
  28. package/dist/react/count/core/count/index.d.ts.map +1 -1
  29. package/dist/react/count/core/textToParticle/index.d.ts +3 -3
  30. package/dist/react/count/core/textToParticle/index.d.ts.map +1 -1
  31. package/dist/react/count/core/typing/index.d.ts +3 -2
  32. package/dist/react/count/core/typing/index.d.ts.map +1 -1
  33. package/dist/react/count/core/utils/visibilityManager.d.ts +35 -0
  34. package/dist/react/count/core/utils/visibilityManager.d.ts.map +1 -0
  35. package/dist/react/count/index.cjs +1 -1
  36. package/dist/react/count/index.mjs +1 -1
  37. package/dist/react/textToParticle/core/count/index.d.ts +3 -2
  38. package/dist/react/textToParticle/core/count/index.d.ts.map +1 -1
  39. package/dist/react/textToParticle/core/textToParticle/index.d.ts +3 -3
  40. package/dist/react/textToParticle/core/textToParticle/index.d.ts.map +1 -1
  41. package/dist/react/textToParticle/core/typing/index.d.ts +3 -2
  42. package/dist/react/textToParticle/core/typing/index.d.ts.map +1 -1
  43. package/dist/react/textToParticle/core/utils/visibilityManager.d.ts +35 -0
  44. package/dist/react/textToParticle/core/utils/visibilityManager.d.ts.map +1 -0
  45. package/dist/react/textToParticle/index.cjs +1 -1
  46. package/dist/react/textToParticle/index.mjs +1 -1
  47. package/dist/react/typing/core/count/index.d.ts +3 -2
  48. package/dist/react/typing/core/count/index.d.ts.map +1 -1
  49. package/dist/react/typing/core/textToParticle/index.d.ts +3 -3
  50. package/dist/react/typing/core/textToParticle/index.d.ts.map +1 -1
  51. package/dist/react/typing/core/typing/index.d.ts +3 -2
  52. package/dist/react/typing/core/typing/index.d.ts.map +1 -1
  53. package/dist/react/typing/core/utils/visibilityManager.d.ts +35 -0
  54. package/dist/react/typing/core/utils/visibilityManager.d.ts.map +1 -0
  55. package/dist/react/typing/index.cjs +1 -1
  56. package/dist/react/typing/index.mjs +1 -1
  57. package/dist/svelte/count/index.cjs +1 -1
  58. package/dist/svelte/count/index.d.ts +41 -28
  59. package/dist/svelte/count/index.mjs +120 -42
  60. package/dist/svelte/index.cjs +1 -1
  61. package/dist/svelte/index.d.ts +41 -28
  62. package/dist/svelte/index.mjs +154 -107
  63. package/dist/svelte/textToParticle/index.cjs +1 -1
  64. package/dist/svelte/textToParticle/index.d.ts +41 -28
  65. package/dist/svelte/textToParticle/index.mjs +119 -33
  66. package/dist/svelte/typing/index.cjs +1 -1
  67. package/dist/svelte/typing/index.d.ts +41 -28
  68. package/dist/svelte/typing/index.mjs +117 -32
  69. package/dist/textToParticle/core/count/index.d.ts +3 -2
  70. package/dist/textToParticle/core/count/index.d.ts.map +1 -1
  71. package/dist/textToParticle/core/textToParticle/index.d.ts +3 -3
  72. package/dist/textToParticle/core/textToParticle/index.d.ts.map +1 -1
  73. package/dist/textToParticle/core/typing/index.d.ts +3 -2
  74. package/dist/textToParticle/core/typing/index.d.ts.map +1 -1
  75. package/dist/textToParticle/core/utils/visibilityManager.d.ts +35 -0
  76. package/dist/textToParticle/core/utils/visibilityManager.d.ts.map +1 -0
  77. package/dist/textToParticle/index.cjs +1 -1
  78. package/dist/textToParticle/index.mjs +1 -1
  79. package/dist/typing/core/count/index.d.ts +3 -2
  80. package/dist/typing/core/count/index.d.ts.map +1 -1
  81. package/dist/typing/core/textToParticle/index.d.ts +3 -3
  82. package/dist/typing/core/textToParticle/index.d.ts.map +1 -1
  83. package/dist/typing/core/typing/index.d.ts +3 -2
  84. package/dist/typing/core/typing/index.d.ts.map +1 -1
  85. package/dist/typing/core/utils/visibilityManager.d.ts +35 -0
  86. package/dist/typing/core/utils/visibilityManager.d.ts.map +1 -0
  87. package/dist/typing/index.cjs +1 -1
  88. package/dist/typing/index.mjs +1 -1
  89. package/dist/vue/count/index.cjs +1 -1
  90. package/dist/vue/count/index.d.ts +41 -28
  91. package/dist/vue/count/index.mjs +119 -41
  92. package/dist/vue/index.cjs +1 -1
  93. package/dist/vue/index.d.ts +41 -28
  94. package/dist/vue/index.mjs +152 -105
  95. package/dist/vue/textToParticle/index.cjs +1 -1
  96. package/dist/vue/textToParticle/index.d.ts +41 -28
  97. package/dist/vue/textToParticle/index.mjs +119 -33
  98. package/dist/vue/typing/index.cjs +1 -1
  99. package/dist/vue/typing/index.d.ts +41 -28
  100. package/dist/vue/typing/index.mjs +116 -31
  101. package/package.json +1 -1
@@ -276,6 +276,107 @@ class SvelteComponent {
276
276
  const PUBLIC_VERSION = "4";
277
277
  if (typeof window !== "undefined")
278
278
  (window.__svelte || (window.__svelte = { v: /* @__PURE__ */ new Set() })).v.add(PUBLIC_VERSION);
279
+ class VisibilityManager {
280
+ constructor(container, options = {}) {
281
+ this.container = container;
282
+ this.options = {
283
+ threshold: options.threshold ?? 0.1,
284
+ rootMargin: options.rootMargin ?? "0px",
285
+ onVisible: options.onVisible,
286
+ onHidden: options.onHidden
287
+ };
288
+ this.intersectionObserver = null;
289
+ this.visibilityChangeHandler = null;
290
+ this.isVisible = false;
291
+ this.isPageVisible = typeof document !== "undefined" ? !document.hidden : true;
292
+ this.setupIntersectionObserver();
293
+ this.setupPageVisibility();
294
+ }
295
+ setupIntersectionObserver() {
296
+ if (typeof window === "undefined" || typeof window.IntersectionObserver === "undefined") {
297
+ this.isVisible = true;
298
+ if (this.isPageVisible && this.options.onVisible) {
299
+ this.options.onVisible();
300
+ }
301
+ return;
302
+ }
303
+ this.intersectionObserver = new IntersectionObserver(
304
+ (entries) => {
305
+ for (const entry of entries) {
306
+ if (entry.target !== this.container) continue;
307
+ if (entry.isIntersecting) {
308
+ this.isVisible = true;
309
+ if (this.isPageVisible && this.options.onVisible) {
310
+ this.options.onVisible();
311
+ }
312
+ } else {
313
+ this.isVisible = false;
314
+ if (this.options.onHidden) {
315
+ this.options.onHidden();
316
+ }
317
+ }
318
+ }
319
+ },
320
+ {
321
+ threshold: this.options.threshold,
322
+ rootMargin: this.options.rootMargin
323
+ }
324
+ );
325
+ this.intersectionObserver.observe(this.container);
326
+ }
327
+ setupPageVisibility() {
328
+ if (typeof document === "undefined") return;
329
+ this.visibilityChangeHandler = () => {
330
+ const wasVisible = this.isPageVisible;
331
+ this.isPageVisible = !document.hidden;
332
+ if (document.hidden) {
333
+ if (this.options.onHidden) {
334
+ this.options.onHidden();
335
+ }
336
+ } else if (wasVisible !== this.isPageVisible) {
337
+ if (this.isVisible && this.options.onVisible) {
338
+ this.options.onVisible();
339
+ }
340
+ }
341
+ };
342
+ document.addEventListener("visibilitychange", this.visibilityChangeHandler);
343
+ if (document.hidden && this.isVisible) {
344
+ if (this.options.onHidden) {
345
+ this.options.onHidden();
346
+ }
347
+ }
348
+ }
349
+ /**
350
+ * 현재 요소가 화면에 보이는지 확인
351
+ */
352
+ getIsVisible() {
353
+ return this.isVisible && this.isPageVisible;
354
+ }
355
+ /**
356
+ * 옵션 업데이트
357
+ */
358
+ updateOptions(newOptions) {
359
+ this.options = { ...this.options, ...newOptions };
360
+ if (this.intersectionObserver) {
361
+ this.intersectionObserver.disconnect();
362
+ this.intersectionObserver = null;
363
+ }
364
+ this.setupIntersectionObserver();
365
+ }
366
+ /**
367
+ * 리소스 정리
368
+ */
369
+ destroy() {
370
+ if (this.intersectionObserver) {
371
+ this.intersectionObserver.disconnect();
372
+ this.intersectionObserver = null;
373
+ }
374
+ if (this.visibilityChangeHandler && typeof document !== "undefined") {
375
+ document.removeEventListener("visibilitychange", this.visibilityChangeHandler);
376
+ this.visibilityChangeHandler = null;
377
+ }
378
+ }
379
+ }
279
380
  function decomposeHangul(char) {
280
381
  const code = char.charCodeAt(0);
281
382
  if (code < 44032 || code > 55203) {
@@ -362,44 +463,28 @@ class Typing {
362
463
  this.currentIndex = 0;
363
464
  this.displayedText = "";
364
465
  this.timeoutId = null;
365
- this.intersectionObserver = null;
466
+ this.visibilityManager = null;
366
467
  this.isRunning = false;
367
468
  this.hasTriggered = false;
368
469
  this.init();
369
470
  }
370
471
  init() {
371
472
  this.updateDisplay("");
372
- this.setupIntersectionObserver();
373
- }
374
- setupIntersectionObserver() {
375
- if (typeof window === "undefined" || typeof window.IntersectionObserver === "undefined") {
376
- if (this.config.enabled) {
377
- setTimeout(() => this.start(), this.config.delay);
378
- }
379
- return;
380
- }
381
- this.intersectionObserver = new IntersectionObserver(
382
- (entries) => {
383
- var _a;
384
- for (const entry of entries) {
385
- if (entry.target !== this.container) continue;
386
- if (entry.isIntersecting && !this.hasTriggered) {
387
- if (this.config.enabled) {
388
- setTimeout(() => this.start(), this.config.delay);
389
- }
390
- this.hasTriggered = true;
391
- if (this.config.triggerOnce) {
392
- (_a = this.intersectionObserver) == null ? void 0 : _a.disconnect();
393
- }
394
- }
473
+ this.setupVisibilityManager();
474
+ }
475
+ setupVisibilityManager() {
476
+ this.visibilityManager = new VisibilityManager(this.container, {
477
+ threshold: this.config.threshold,
478
+ rootMargin: this.config.rootMargin,
479
+ onVisible: () => {
480
+ if (!this.hasTriggered && this.config.enabled) {
481
+ this.hasTriggered = true;
482
+ setTimeout(() => this.start(), this.config.delay);
395
483
  }
396
484
  },
397
- {
398
- threshold: this.config.threshold,
399
- rootMargin: this.config.rootMargin
485
+ onHidden: () => {
400
486
  }
401
- );
402
- this.intersectionObserver.observe(this.container);
487
+ });
403
488
  }
404
489
  // 단위들을 다시 합쳐서 실제 표시할 텍스트 생성
405
490
  // 한글의 경우 자음/모음이 하나씩 보이도록 합성
@@ -495,9 +580,9 @@ class Typing {
495
580
  }
496
581
  destroy() {
497
582
  this.stop();
498
- if (this.intersectionObserver) {
499
- this.intersectionObserver.disconnect();
500
- this.intersectionObserver = null;
583
+ if (this.visibilityManager) {
584
+ this.visibilityManager.destroy();
585
+ this.visibilityManager = null;
501
586
  }
502
587
  }
503
588
  }
@@ -5,6 +5,7 @@
5
5
  * 사용법:
6
6
  * import { Count } from 'masoneffect/count';
7
7
  */
8
+ import { VisibilityManager } from '../utils/visibilityManager.js';
8
9
  export interface CountOptions {
9
10
  targetValue: number;
10
11
  duration?: number;
@@ -33,12 +34,12 @@ export declare class Count {
33
34
  currentValue: number;
34
35
  startTime: number | null;
35
36
  animationFrameId: number | null;
36
- intersectionObserver: IntersectionObserver | null;
37
+ visibilityManager: VisibilityManager | null;
37
38
  isRunning: boolean;
38
39
  hasTriggered: boolean;
39
40
  constructor(container: HTMLElement | string, options: CountOptions);
40
41
  init(): void;
41
- setupIntersectionObserver(): void;
42
+ setupVisibilityManager(): void;
42
43
  start(): void;
43
44
  stop(): void;
44
45
  reset(): void;
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/core/count/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,MAAM,WAAW,YAAY;IAC3B,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB;AAGD,eAAO,MAAM,eAAe;gBACd,MAAM;oBACF,MAAM;qBACL,MAAM;uBACJ,MAAM;sBACP,MAAM;CACzB,CAAC;AAEF,qBAAa,KAAK;IAChB,SAAS,EAAE,WAAW,CAAC;IACvB,MAAM,EAAE,QAAQ,CAAC,IAAI,CAAC,YAAY,EAAE,UAAU,GAAG,YAAY,CAAC,CAAC,GAAG;QAChE,QAAQ,EAAE,YAAY,CAAC,UAAU,CAAC,CAAC;QACnC,UAAU,EAAE,YAAY,CAAC,YAAY,CAAC,CAAC;KACxC,CAAC;IACF,YAAY,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,gBAAgB,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,oBAAoB,EAAE,oBAAoB,GAAG,IAAI,CAAC;IAClD,SAAS,EAAE,OAAO,CAAC;IACnB,YAAY,EAAE,OAAO,CAAC;gBAEV,SAAS,EAAE,WAAW,GAAG,MAAM,EAAE,OAAO,EAAE,YAAY;IAoClE,IAAI,IAAI,IAAI;IAQZ,yBAAyB,IAAI,IAAI;IAsDjC,KAAK,IAAI,IAAI;IA6Cb,IAAI,IAAI,IAAI;IAQZ,KAAK,IAAI,IAAI;IAQb,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAKlC,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM;IAMnC,YAAY,CAAC,SAAS,EAAE,OAAO,CAAC,YAAY,CAAC,GAAG,IAAI;IA0BpD,QAAQ,IAAI,MAAM;IAKlB,OAAO,IAAI,IAAI;CAOhB;AAGD,eAAe,KAAK,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/core/count/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,EAAE,iBAAiB,EAAE,MAAM,+BAA+B,CAAC;AAElE,MAAM,WAAW,YAAY;IAC3B,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB;AAGD,eAAO,MAAM,eAAe;gBACd,MAAM;oBACF,MAAM;qBACL,MAAM;uBACJ,MAAM;sBACP,MAAM;CACzB,CAAC;AAEF,qBAAa,KAAK;IAChB,SAAS,EAAE,WAAW,CAAC;IACvB,MAAM,EAAE,QAAQ,CAAC,IAAI,CAAC,YAAY,EAAE,UAAU,GAAG,YAAY,CAAC,CAAC,GAAG;QAChE,QAAQ,EAAE,YAAY,CAAC,UAAU,CAAC,CAAC;QACnC,UAAU,EAAE,YAAY,CAAC,YAAY,CAAC,CAAC;KACxC,CAAC;IACF,YAAY,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,gBAAgB,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,iBAAiB,EAAE,iBAAiB,GAAG,IAAI,CAAC;IAC5C,SAAS,EAAE,OAAO,CAAC;IACnB,YAAY,EAAE,OAAO,CAAC;gBAEV,SAAS,EAAE,WAAW,GAAG,MAAM,EAAE,OAAO,EAAE,YAAY;IAoClE,IAAI,IAAI,IAAI;IAQZ,sBAAsB,IAAI,IAAI;IAoB9B,KAAK,IAAI,IAAI;IA6Cb,IAAI,IAAI,IAAI;IAQZ,KAAK,IAAI,IAAI;IAQb,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAKlC,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM;IAMnC,YAAY,CAAC,SAAS,EAAE,OAAO,CAAC,YAAY,CAAC,GAAG,IAAI;IA0BpD,QAAQ,IAAI,MAAM;IAKlB,OAAO,IAAI,IAAI;CAOhB;AAGD,eAAe,KAAK,CAAC"}
@@ -5,6 +5,7 @@
5
5
  * 사용법:
6
6
  * import { TextToParticle } from 'masoneffect/textToParticle';
7
7
  */
8
+ import { VisibilityManager } from '../utils/visibilityManager.js';
8
9
  export interface TextToParticleOptions {
9
10
  text?: string;
10
11
  densityStep?: number;
@@ -55,14 +56,13 @@ export declare class TextToParticle {
55
56
  };
56
57
  animationId: number | null;
57
58
  isRunning: boolean;
58
- isVisible: boolean;
59
- intersectionObserver: IntersectionObserver | null;
59
+ visibilityManager: VisibilityManager | null;
60
60
  debounceDelay: number;
61
61
  _debouncedMorph: (textOrOptions?: string | Partial<TextToParticleOptions> | null) => void;
62
62
  _debouncedUpdateConfig: (newConfig: Partial<TextToParticleOptions>) => void;
63
63
  constructor(container: HTMLElement | string, options?: TextToParticleOptions);
64
64
  init(): void;
65
- setupIntersectionObserver(): void;
65
+ setupVisibilityManager(): void;
66
66
  resize(): void;
67
67
  /**
68
68
  * 텍스트가 영역 안에 들어가는지 확인하는 헬퍼 함수 (줄바꿈 지원)
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/core/textToParticle/index.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/core/textToParticle/index.ts"],"names":[],"mappings":"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"}
@@ -5,6 +5,7 @@
5
5
  * 사용법:
6
6
  * import { Typing } from 'masoneffect/typing';
7
7
  */
8
+ import { VisibilityManager } from '../utils/visibilityManager.js';
8
9
  export interface TypingOptions {
9
10
  text: string;
10
11
  speed?: number;
@@ -33,13 +34,13 @@ export declare class Typing {
33
34
  currentIndex: number;
34
35
  displayedText: string;
35
36
  timeoutId: ReturnType<typeof setTimeout> | null;
36
- intersectionObserver: IntersectionObserver | null;
37
+ visibilityManager: VisibilityManager | null;
37
38
  isRunning: boolean;
38
39
  hasTriggered: boolean;
39
40
  originalText: string;
40
41
  constructor(container: HTMLElement | string, options: TypingOptions);
41
42
  init(): void;
42
- setupIntersectionObserver(): void;
43
+ setupVisibilityManager(): void;
43
44
  private buildTextFromUnits;
44
45
  start(): void;
45
46
  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;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"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/core/typing/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,EAAE,iBAAiB,EAAE,MAAM,+BAA+B,CAAC;AAElE,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,iBAAiB,EAAE,iBAAiB,GAAG,IAAI,CAAC;IAC5C,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,sBAAsB,IAAI,IAAI;IAmB9B,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"}
@@ -0,0 +1,35 @@
1
+ /**
2
+ * VisibilityManager - IntersectionObserver와 Page Visibility API를 통합 관리
3
+ * 모든 효과에서 공통으로 사용하는 가시성 관리 유틸리티
4
+ */
5
+ export interface VisibilityManagerOptions {
6
+ threshold?: number;
7
+ rootMargin?: string;
8
+ onVisible?: () => void;
9
+ onHidden?: () => void;
10
+ }
11
+ export declare class VisibilityManager {
12
+ private container;
13
+ private options;
14
+ private intersectionObserver;
15
+ private visibilityChangeHandler;
16
+ private isVisible;
17
+ private isPageVisible;
18
+ constructor(container: HTMLElement, options?: VisibilityManagerOptions);
19
+ private setupIntersectionObserver;
20
+ private setupPageVisibility;
21
+ /**
22
+ * 현재 요소가 화면에 보이는지 확인
23
+ */
24
+ getIsVisible(): boolean;
25
+ /**
26
+ * 옵션 업데이트
27
+ */
28
+ updateOptions(newOptions: Partial<VisibilityManagerOptions>): void;
29
+ /**
30
+ * 리소스 정리
31
+ */
32
+ destroy(): void;
33
+ }
34
+ export default VisibilityManager;
35
+ //# sourceMappingURL=visibilityManager.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"visibilityManager.d.ts","sourceRoot":"","sources":["../../../../src/core/utils/visibilityManager.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,MAAM,WAAW,wBAAwB;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,qBAAa,iBAAiB;IAC5B,OAAO,CAAC,SAAS,CAAc;IAC/B,OAAO,CAAC,OAAO,CAA2B;IAC1C,OAAO,CAAC,oBAAoB,CAA8B;IAC1D,OAAO,CAAC,uBAAuB,CAAsB;IACrD,OAAO,CAAC,SAAS,CAAU;IAC3B,OAAO,CAAC,aAAa,CAAU;gBAEnB,SAAS,EAAE,WAAW,EAAE,OAAO,GAAE,wBAA6B;IAiB1E,OAAO,CAAC,yBAAyB;IAsCjC,OAAO,CAAC,mBAAmB;IA+B3B;;OAEG;IACH,YAAY,IAAI,OAAO;IAIvB;;OAEG;IACH,aAAa,CAAC,UAAU,EAAE,OAAO,CAAC,wBAAwB,CAAC,GAAG,IAAI;IAWlE;;OAEG;IACH,OAAO,IAAI,IAAI;CAUhB;AAED,eAAe,iBAAiB,CAAC"}
@@ -1 +1 @@
1
- function t(t,i){let s=null;return function(...h){null!==s&&clearTimeout(s),s=setTimeout(()=>{s=null,t.apply(this,h)},i)}}Object.defineProperty(exports,"t",{value:!0});class i{constructor(i,s={}){if(this.container="string"==typeof i?document.querySelector(i):i,!this.container)throw new Error("Container element not found");this.config={text:s.text||"mason effect",densityStep:s.densityStep??2,maxParticles:s.maxParticles??3200,pointSize:s.pointSize??.5,ease:s.ease??.05,repelRadius:s.repelRadius??150,repelStrength:s.repelStrength??1,particleColor:s.particleColor||"#fff",fontFamily:s.fontFamily||"Inter, system-ui, Arial",fontSize:s.fontSize||null,width:s.width||null,height:s.height||null,devicePixelRatio:s.devicePixelRatio??null,onReady:s.onReady||null,onUpdate:s.onUpdate||null},this.canvas=document.createElement("canvas");const h=this.canvas.getContext("2d",{willReadFrequently:!0});if(!h)throw new Error("Canvas context not available");this.ctx=h,this.container.appendChild(this.canvas),this.canvas.style.display="block",this.offCanvas=document.createElement("canvas");const e=this.offCanvas.getContext("2d",{willReadFrequently:!0});if(!e)throw new Error("Offscreen canvas context not available");this.offCtx=e,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=s.debounceDelay??150;const n=this.handleResize.bind(this);this.handleResize=t(n,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.i=t(this.h.bind(this),this.debounceDelay),this.o=t(this.l.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 i of t)i.target===this.container&&(i.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,i=this.config.height||this.container.clientHeight||.7*window.innerHeight;if(t<=0||i<=0)return;this.W=Math.floor(t*this.DPR),this.H=Math.floor(i*this.DPR);const s=4096;if(this.W>s||this.H>s){const t=Math.min(s/this.W,s/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=i+"px",this.W>0&&this.H>0&&(this.buildTargets(),this.particles.length||this.initParticles())}measureTextFit(t,i,s,h){this.offCtx.font=`400 ${t}px ${this.config.fontFamily}`;const e=i.split("\n"),n=t,o=.1*t,r=.05*t;let a=0;for(const t of e){if(0===t.length)continue;const i=this.offCtx.measureText(t).width+r*(t.length>0?t.length-1:0);a=Math.max(a,i)}const l=e.length>0?n*e.length+o*(e.length-1):n;return{width:a,height:l,fits:a<=s&&l<=h}}findOptimalFontSize(t,i,s,h){if(this.measureTextFit(h,t,i,s).fits)return h;if(h<=12)return 12;let e=12,n=h,o=12;for(;e<=n;){const h=Math.floor((e+n)/2);this.measureTextFit(h,t,i,s).fits?(o=h,e=h+1):n=h-1}return o}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 i=Math.min(this.W,this.H),s=this.config.fontSize||Math.max(80,Math.floor(.18*i)),h=this.W-80,e=this.H-80,n=this.findOptimalFontSize(t,h,e,s);this.offCtx.fillStyle="#ffffff",this.offCtx.textAlign="center",this.offCtx.textBaseline="middle",this.offCtx.font=`400 ${n}px ${this.config.fontFamily}`;const o=t.split("\n"),r=n,a=.1*n,l=.05*n,c=o.length>0?r*o.length+a*(o.length-1):r;let f=this.H/2-c/2+r/2;for(const t of o){if(0===t.length){f+=r+a;continue}const i=t.split(""),s=this.offCtx.measureText(t).width+l*(i.length>0?i.length-1:0);let h=this.W/2-s/2;for(const t of i)this.offCtx.fillText(t,h+this.offCtx.measureText(t).width/2,f),h+=this.offCtx.measureText(t).width+l;f+=r+a}const u=Math.max(2,this.config.densityStep),d=this.offCtx.getImageData(0,0,this.W,this.H).data,w=[];for(let t=0;t<this.H;t+=u)for(let i=0;i<this.W;i+=u){const s=4*(t*this.W+i);d[s]+d[s+1]+d[s+2]>600&&w.push({x:i,y:t})}for(;w.length>this.config.maxParticles;)w.splice(Math.floor(Math.random()*w.length),1);if(this.particles.length<w.length){const t=w.length-this.particles.length;for(let i=0;i<t;i++)this.particles.push(this.makeParticle())}else this.particles.length>w.length&&(this.particles.length=w.length);for(let t=0;t<this.particles.length;t++){const i=this.particles[t],s=w[t];i.tx=s.x,i.ty=s.y}}makeParticle(){const t=Math.random()*this.W,i=Math.random()*this.H;return{x:t,y:i,vx:0,vy:0,tx:t,ty:i,initialX:t,initialY:i,j:Math.random()*Math.PI*2}}initParticles(){for(const t of this.particles){const i=Math.random()*this.W,s=Math.random()*this.H;t.x=i,t.y=s,t.vx=t.vy=0,t.initialX=i,t.initialY=s}}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.i(t)}h(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 i=void 0!==t.text;this.config={...this.config,...t},i&&this.buildTargets()}else this.buildTargets()}update(){this.ctx.clearRect(0,0,this.W,this.H);for(const t of this.particles){let i=(t.tx-t.x)*this.config.ease,s=(t.ty-t.y)*this.config.ease;if(this.mouse.x||this.mouse.y){const h=t.x-this.mouse.x,e=t.y-this.mouse.y,n=h*h+e*e,o=this.config.repelRadius*this.DPR;if(n<o*o){const t=Math.sqrt(n)+1e-4,r=(this.mouse.down?-1:1)*this.config.repelStrength*(1-t/o);i+=h/t*r*6,s+=e/t*r*6}}t.j+=2,i+=.05*Math.cos(t.j),s+=.05*Math.sin(1.3*t.j),t.vx=(t.vx+i)*Math.random(),t.vy=(t.vy+s)*Math.random(),t.x+=t.vx,t.y+=t.vy}this.ctx.fillStyle=this.config.particleColor;const t=this.config.pointSize*this.DPR;for(const i of this.particles)this.ctx.beginPath(),this.ctx.arc(i.x,i.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 i=this.canvas.getBoundingClientRect();this.mouse.x=(t.clientX-i.left)*this.DPR,this.mouse.y=(t.clientY-i.top)*this.DPR}handleMouseLeave(){this.mouse.x=this.mouse.y=0}handleMouseDown(){this.mouse.down=!0}handleMouseUp(){this.mouse.down=!1}updateConfig(t){this.o(t)}l(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)}}exports.TextToParticle=i,exports.default=i;
1
+ Object.defineProperty(exports,"t",{value:!0});class t{constructor(t,i={}){this.container=t,this.options={threshold:i.threshold??.1,rootMargin:i.rootMargin??"0px",onVisible:i.onVisible,onHidden:i.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 i of t)i.target===this.container&&(i.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,i){let s=null;return function(...h){null!==s&&clearTimeout(s),s=setTimeout(()=>{s=null,t.apply(this,h)},i)}}class s{constructor(t,s={}){if(this.container="string"==typeof t?document.querySelector(t):t,!this.container)throw new Error("Container element not found");this.config={text:s.text||"mason effect",densityStep:s.densityStep??2,maxParticles:s.maxParticles??3200,pointSize:s.pointSize??.5,ease:s.ease??.05,repelRadius:s.repelRadius??150,repelStrength:s.repelStrength??1,particleColor:s.particleColor||"#fff",fontFamily:s.fontFamily||"Inter, system-ui, Arial",fontSize:s.fontSize||null,width:s.width||null,height:s.height||null,devicePixelRatio:s.devicePixelRatio??null,onReady:s.onReady||null,onUpdate:s.onUpdate||null},this.canvas=document.createElement("canvas");const h=this.canvas.getContext("2d",{willReadFrequently:!0});if(!h)throw new Error("Canvas context not available");this.ctx=h,this.container.appendChild(this.canvas),this.canvas.style.display="block",this.offCanvas=document.createElement("canvas");const e=this.offCanvas.getContext("2d",{willReadFrequently:!0});if(!e)throw new Error("Offscreen canvas context not available");this.offCtx=e,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=s.debounceDelay??150;const n=this.handleResize.bind(this);this.handleResize=i(n,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.i=i(this.h.bind(this),this.debounceDelay),this.o=i(this.l.bind(this),this.debounceDelay),this.init()}init(){this.resize(),this.setupEventListeners(),this.setupVisibilityManager(),this.config.onReady&&this.config.onReady(this)}setupVisibilityManager(){this.visibilityManager=new t(this.container,{threshold:.1,onVisible:()=>{this.start()},onHidden:()=>{this.stop()}})}resize(){const t=this.config.width||this.container.clientWidth||window.innerWidth,i=this.config.height||this.container.clientHeight||.7*window.innerHeight;if(t<=0||i<=0)return;this.W=Math.floor(t*this.DPR),this.H=Math.floor(i*this.DPR);const s=4096;if(this.W>s||this.H>s){const t=Math.min(s/this.W,s/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=i+"px",this.W>0&&this.H>0&&(this.buildTargets(),this.particles.length||this.initParticles())}measureTextFit(t,i,s,h){this.offCtx.font=`400 ${t}px ${this.config.fontFamily}`;const e=i.split("\n"),n=t,o=.1*t,r=.05*t;let l=0;for(const t of e){if(0===t.length)continue;const i=this.offCtx.measureText(t).width+r*(t.length>0?t.length-1:0);l=Math.max(l,i)}const a=e.length>0?n*e.length+o*(e.length-1):n;return{width:l,height:a,fits:l<=s&&a<=h}}findOptimalFontSize(t,i,s,h){if(this.measureTextFit(h,t,i,s).fits)return h;if(h<=12)return 12;let e=12,n=h,o=12;for(;e<=n;){const h=Math.floor((e+n)/2);this.measureTextFit(h,t,i,s).fits?(o=h,e=h+1):n=h-1}return o}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 i=Math.min(this.W,this.H),s=this.config.fontSize||Math.max(80,Math.floor(.18*i)),h=this.W-80,e=this.H-80,n=this.findOptimalFontSize(t,h,e,s);this.offCtx.fillStyle="#ffffff",this.offCtx.textAlign="center",this.offCtx.textBaseline="middle",this.offCtx.font=`400 ${n}px ${this.config.fontFamily}`;const o=t.split("\n"),r=n,l=.1*n,a=.05*n,u=o.length>0?r*o.length+l*(o.length-1):r;let c=this.H/2-u/2+r/2;for(const t of o){if(0===t.length){c+=r+l;continue}const i=t.split(""),s=this.offCtx.measureText(t).width+a*(i.length>0?i.length-1:0);let h=this.W/2-s/2;for(const t of i)this.offCtx.fillText(t,h+this.offCtx.measureText(t).width/2,c),h+=this.offCtx.measureText(t).width+a;c+=r+l}const d=Math.max(2,this.config.densityStep),f=this.offCtx.getImageData(0,0,this.W,this.H).data,m=[];for(let t=0;t<this.H;t+=d)for(let i=0;i<this.W;i+=d){const s=4*(t*this.W+i);f[s]+f[s+1]+f[s+2]>600&&m.push({x:i,y:t})}for(;m.length>this.config.maxParticles;)m.splice(Math.floor(Math.random()*m.length),1);if(this.particles.length<m.length){const t=m.length-this.particles.length;for(let i=0;i<t;i++)this.particles.push(this.makeParticle())}else this.particles.length>m.length&&(this.particles.length=m.length);for(let t=0;t<this.particles.length;t++){const i=this.particles[t],s=m[t];i.tx=s.x,i.ty=s.y}}makeParticle(){const t=Math.random()*this.W,i=Math.random()*this.H;return{x:t,y:i,vx:0,vy:0,tx:t,ty:i,initialX:t,initialY:i,j:Math.random()*Math.PI*2}}initParticles(){for(const t of this.particles){const i=Math.random()*this.W,s=Math.random()*this.H;t.x=i,t.y=s,t.vx=t.vy=0,t.initialX=i,t.initialY=s}}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.i(t)}h(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 i=void 0!==t.text;this.config={...this.config,...t},i&&this.buildTargets()}else this.buildTargets()}update(){this.ctx.clearRect(0,0,this.W,this.H);for(const t of this.particles){let i=(t.tx-t.x)*this.config.ease,s=(t.ty-t.y)*this.config.ease;if(this.mouse.x||this.mouse.y){const h=t.x-this.mouse.x,e=t.y-this.mouse.y,n=h*h+e*e,o=this.config.repelRadius*this.DPR;if(n<o*o){const t=Math.sqrt(n)+1e-4,r=(this.mouse.down?-1:1)*this.config.repelStrength*(1-t/o);i+=h/t*r*6,s+=e/t*r*6}}t.j+=2,i+=.05*Math.cos(t.j),s+=.05*Math.sin(1.3*t.j),t.vx=(t.vx+i)*Math.random(),t.vy=(t.vy+s)*Math.random(),t.x+=t.vx,t.y+=t.vy}this.ctx.fillStyle=this.config.particleColor;const t=Math.min(this.W,this.H)/this.DPR,i=Math.max(.5,Math.min(2,t/1920)),s=this.config.pointSize*this.DPR*i;for(const t of this.particles)this.ctx.beginPath(),this.ctx.arc(t.x,t.y,s,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 i=this.canvas.getBoundingClientRect();this.mouse.x=(t.clientX-i.left)*this.DPR,this.mouse.y=(t.clientY-i.top)*this.DPR}handleMouseLeave(){this.mouse.x=this.mouse.y=0}handleMouseDown(){this.mouse.down=!0}handleMouseUp(){this.mouse.down=!1}updateConfig(t){this.o(t)}l(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)}}exports.TextToParticle=s,exports.default=s;
@@ -1 +1 @@
1
- function t(t,i){let s=null;return function(...h){null!==s&&clearTimeout(s),s=setTimeout(()=>{s=null,t.apply(this,h)},i)}}class i{constructor(i,s={}){if(this.container="string"==typeof i?document.querySelector(i):i,!this.container)throw new Error("Container element not found");this.config={text:s.text||"mason effect",densityStep:s.densityStep??2,maxParticles:s.maxParticles??3200,pointSize:s.pointSize??.5,ease:s.ease??.05,repelRadius:s.repelRadius??150,repelStrength:s.repelStrength??1,particleColor:s.particleColor||"#fff",fontFamily:s.fontFamily||"Inter, system-ui, Arial",fontSize:s.fontSize||null,width:s.width||null,height:s.height||null,devicePixelRatio:s.devicePixelRatio??null,onReady:s.onReady||null,onUpdate:s.onUpdate||null},this.canvas=document.createElement("canvas");const h=this.canvas.getContext("2d",{willReadFrequently:!0});if(!h)throw new Error("Canvas context not available");this.ctx=h,this.container.appendChild(this.canvas),this.canvas.style.display="block",this.offCanvas=document.createElement("canvas");const e=this.offCanvas.getContext("2d",{willReadFrequently:!0});if(!e)throw new Error("Offscreen canvas context not available");this.offCtx=e,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=s.debounceDelay??150;const n=this.handleResize.bind(this);this.handleResize=t(n,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.t=t(this.i.bind(this),this.debounceDelay),this.h=t(this.o.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 i of t)i.target===this.container&&(i.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,i=this.config.height||this.container.clientHeight||.7*window.innerHeight;if(t<=0||i<=0)return;this.W=Math.floor(t*this.DPR),this.H=Math.floor(i*this.DPR);const s=4096;if(this.W>s||this.H>s){const t=Math.min(s/this.W,s/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=i+"px",this.W>0&&this.H>0&&(this.buildTargets(),this.particles.length||this.initParticles())}measureTextFit(t,i,s,h){this.offCtx.font=`400 ${t}px ${this.config.fontFamily}`;const e=i.split("\n"),n=t,o=.1*t,r=.05*t;let a=0;for(const t of e){if(0===t.length)continue;const i=this.offCtx.measureText(t).width+r*(t.length>0?t.length-1:0);a=Math.max(a,i)}const l=e.length>0?n*e.length+o*(e.length-1):n;return{width:a,height:l,fits:a<=s&&l<=h}}findOptimalFontSize(t,i,s,h){if(this.measureTextFit(h,t,i,s).fits)return h;if(h<=12)return 12;let e=12,n=h,o=12;for(;e<=n;){const h=Math.floor((e+n)/2);this.measureTextFit(h,t,i,s).fits?(o=h,e=h+1):n=h-1}return o}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 i=Math.min(this.W,this.H),s=this.config.fontSize||Math.max(80,Math.floor(.18*i)),h=this.W-80,e=this.H-80,n=this.findOptimalFontSize(t,h,e,s);this.offCtx.fillStyle="#ffffff",this.offCtx.textAlign="center",this.offCtx.textBaseline="middle",this.offCtx.font=`400 ${n}px ${this.config.fontFamily}`;const o=t.split("\n"),r=n,a=.1*n,l=.05*n,f=o.length>0?r*o.length+a*(o.length-1):r;let c=this.H/2-f/2+r/2;for(const t of o){if(0===t.length){c+=r+a;continue}const i=t.split(""),s=this.offCtx.measureText(t).width+l*(i.length>0?i.length-1:0);let h=this.W/2-s/2;for(const t of i)this.offCtx.fillText(t,h+this.offCtx.measureText(t).width/2,c),h+=this.offCtx.measureText(t).width+l;c+=r+a}const u=Math.max(2,this.config.densityStep),d=this.offCtx.getImageData(0,0,this.W,this.H).data,w=[];for(let t=0;t<this.H;t+=u)for(let i=0;i<this.W;i+=u){const s=4*(t*this.W+i);d[s]+d[s+1]+d[s+2]>600&&w.push({x:i,y:t})}for(;w.length>this.config.maxParticles;)w.splice(Math.floor(Math.random()*w.length),1);if(this.particles.length<w.length){const t=w.length-this.particles.length;for(let i=0;i<t;i++)this.particles.push(this.makeParticle())}else this.particles.length>w.length&&(this.particles.length=w.length);for(let t=0;t<this.particles.length;t++){const i=this.particles[t],s=w[t];i.tx=s.x,i.ty=s.y}}makeParticle(){const t=Math.random()*this.W,i=Math.random()*this.H;return{x:t,y:i,vx:0,vy:0,tx:t,ty:i,initialX:t,initialY:i,j:Math.random()*Math.PI*2}}initParticles(){for(const t of this.particles){const i=Math.random()*this.W,s=Math.random()*this.H;t.x=i,t.y=s,t.vx=t.vy=0,t.initialX=i,t.initialY=s}}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.t(t)}i(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 i=void 0!==t.text;this.config={...this.config,...t},i&&this.buildTargets()}else this.buildTargets()}update(){this.ctx.clearRect(0,0,this.W,this.H);for(const t of this.particles){let i=(t.tx-t.x)*this.config.ease,s=(t.ty-t.y)*this.config.ease;if(this.mouse.x||this.mouse.y){const h=t.x-this.mouse.x,e=t.y-this.mouse.y,n=h*h+e*e,o=this.config.repelRadius*this.DPR;if(n<o*o){const t=Math.sqrt(n)+1e-4,r=(this.mouse.down?-1:1)*this.config.repelStrength*(1-t/o);i+=h/t*r*6,s+=e/t*r*6}}t.j+=2,i+=.05*Math.cos(t.j),s+=.05*Math.sin(1.3*t.j),t.vx=(t.vx+i)*Math.random(),t.vy=(t.vy+s)*Math.random(),t.x+=t.vx,t.y+=t.vy}this.ctx.fillStyle=this.config.particleColor;const t=this.config.pointSize*this.DPR;for(const i of this.particles)this.ctx.beginPath(),this.ctx.arc(i.x,i.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 i=this.canvas.getBoundingClientRect();this.mouse.x=(t.clientX-i.left)*this.DPR,this.mouse.y=(t.clientY-i.top)*this.DPR}handleMouseLeave(){this.mouse.x=this.mouse.y=0}handleMouseDown(){this.mouse.down=!0}handleMouseUp(){this.mouse.down=!1}updateConfig(t){this.h(t)}o(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)}}export{i as TextToParticle,i as default};
1
+ class t{constructor(t,i={}){this.container=t,this.options={threshold:i.threshold??.1,rootMargin:i.rootMargin??"0px",onVisible:i.onVisible,onHidden:i.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 i of t)i.target===this.container&&(i.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,i){let s=null;return function(...h){null!==s&&clearTimeout(s),s=setTimeout(()=>{s=null,t.apply(this,h)},i)}}class s{constructor(t,s={}){if(this.container="string"==typeof t?document.querySelector(t):t,!this.container)throw new Error("Container element not found");this.config={text:s.text||"mason effect",densityStep:s.densityStep??2,maxParticles:s.maxParticles??3200,pointSize:s.pointSize??.5,ease:s.ease??.05,repelRadius:s.repelRadius??150,repelStrength:s.repelStrength??1,particleColor:s.particleColor||"#fff",fontFamily:s.fontFamily||"Inter, system-ui, Arial",fontSize:s.fontSize||null,width:s.width||null,height:s.height||null,devicePixelRatio:s.devicePixelRatio??null,onReady:s.onReady||null,onUpdate:s.onUpdate||null},this.canvas=document.createElement("canvas");const h=this.canvas.getContext("2d",{willReadFrequently:!0});if(!h)throw new Error("Canvas context not available");this.ctx=h,this.container.appendChild(this.canvas),this.canvas.style.display="block",this.offCanvas=document.createElement("canvas");const e=this.offCanvas.getContext("2d",{willReadFrequently:!0});if(!e)throw new Error("Offscreen canvas context not available");this.offCtx=e,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=s.debounceDelay??150;const n=this.handleResize.bind(this);this.handleResize=i(n,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.t=i(this.i.bind(this),this.debounceDelay),this.h=i(this.o.bind(this),this.debounceDelay),this.init()}init(){this.resize(),this.setupEventListeners(),this.setupVisibilityManager(),this.config.onReady&&this.config.onReady(this)}setupVisibilityManager(){this.visibilityManager=new t(this.container,{threshold:.1,onVisible:()=>{this.start()},onHidden:()=>{this.stop()}})}resize(){const t=this.config.width||this.container.clientWidth||window.innerWidth,i=this.config.height||this.container.clientHeight||.7*window.innerHeight;if(t<=0||i<=0)return;this.W=Math.floor(t*this.DPR),this.H=Math.floor(i*this.DPR);const s=4096;if(this.W>s||this.H>s){const t=Math.min(s/this.W,s/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=i+"px",this.W>0&&this.H>0&&(this.buildTargets(),this.particles.length||this.initParticles())}measureTextFit(t,i,s,h){this.offCtx.font=`400 ${t}px ${this.config.fontFamily}`;const e=i.split("\n"),n=t,o=.1*t,r=.05*t;let a=0;for(const t of e){if(0===t.length)continue;const i=this.offCtx.measureText(t).width+r*(t.length>0?t.length-1:0);a=Math.max(a,i)}const l=e.length>0?n*e.length+o*(e.length-1):n;return{width:a,height:l,fits:a<=s&&l<=h}}findOptimalFontSize(t,i,s,h){if(this.measureTextFit(h,t,i,s).fits)return h;if(h<=12)return 12;let e=12,n=h,o=12;for(;e<=n;){const h=Math.floor((e+n)/2);this.measureTextFit(h,t,i,s).fits?(o=h,e=h+1):n=h-1}return o}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 i=Math.min(this.W,this.H),s=this.config.fontSize||Math.max(80,Math.floor(.18*i)),h=this.W-80,e=this.H-80,n=this.findOptimalFontSize(t,h,e,s);this.offCtx.fillStyle="#ffffff",this.offCtx.textAlign="center",this.offCtx.textBaseline="middle",this.offCtx.font=`400 ${n}px ${this.config.fontFamily}`;const o=t.split("\n"),r=n,a=.1*n,l=.05*n,u=o.length>0?r*o.length+a*(o.length-1):r;let c=this.H/2-u/2+r/2;for(const t of o){if(0===t.length){c+=r+a;continue}const i=t.split(""),s=this.offCtx.measureText(t).width+l*(i.length>0?i.length-1:0);let h=this.W/2-s/2;for(const t of i)this.offCtx.fillText(t,h+this.offCtx.measureText(t).width/2,c),h+=this.offCtx.measureText(t).width+l;c+=r+a}const d=Math.max(2,this.config.densityStep),f=this.offCtx.getImageData(0,0,this.W,this.H).data,m=[];for(let t=0;t<this.H;t+=d)for(let i=0;i<this.W;i+=d){const s=4*(t*this.W+i);f[s]+f[s+1]+f[s+2]>600&&m.push({x:i,y:t})}for(;m.length>this.config.maxParticles;)m.splice(Math.floor(Math.random()*m.length),1);if(this.particles.length<m.length){const t=m.length-this.particles.length;for(let i=0;i<t;i++)this.particles.push(this.makeParticle())}else this.particles.length>m.length&&(this.particles.length=m.length);for(let t=0;t<this.particles.length;t++){const i=this.particles[t],s=m[t];i.tx=s.x,i.ty=s.y}}makeParticle(){const t=Math.random()*this.W,i=Math.random()*this.H;return{x:t,y:i,vx:0,vy:0,tx:t,ty:i,initialX:t,initialY:i,j:Math.random()*Math.PI*2}}initParticles(){for(const t of this.particles){const i=Math.random()*this.W,s=Math.random()*this.H;t.x=i,t.y=s,t.vx=t.vy=0,t.initialX=i,t.initialY=s}}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.t(t)}i(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 i=void 0!==t.text;this.config={...this.config,...t},i&&this.buildTargets()}else this.buildTargets()}update(){this.ctx.clearRect(0,0,this.W,this.H);for(const t of this.particles){let i=(t.tx-t.x)*this.config.ease,s=(t.ty-t.y)*this.config.ease;if(this.mouse.x||this.mouse.y){const h=t.x-this.mouse.x,e=t.y-this.mouse.y,n=h*h+e*e,o=this.config.repelRadius*this.DPR;if(n<o*o){const t=Math.sqrt(n)+1e-4,r=(this.mouse.down?-1:1)*this.config.repelStrength*(1-t/o);i+=h/t*r*6,s+=e/t*r*6}}t.j+=2,i+=.05*Math.cos(t.j),s+=.05*Math.sin(1.3*t.j),t.vx=(t.vx+i)*Math.random(),t.vy=(t.vy+s)*Math.random(),t.x+=t.vx,t.y+=t.vy}this.ctx.fillStyle=this.config.particleColor;const t=Math.min(this.W,this.H)/this.DPR,i=Math.max(.5,Math.min(2,t/1920)),s=this.config.pointSize*this.DPR*i;for(const t of this.particles)this.ctx.beginPath(),this.ctx.arc(t.x,t.y,s,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 i=this.canvas.getBoundingClientRect();this.mouse.x=(t.clientX-i.left)*this.DPR,this.mouse.y=(t.clientY-i.top)*this.DPR}handleMouseLeave(){this.mouse.x=this.mouse.y=0}handleMouseDown(){this.mouse.down=!0}handleMouseUp(){this.mouse.down=!1}updateConfig(t){this.h(t)}o(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)}}export{s as TextToParticle,s as default};
@@ -5,6 +5,7 @@
5
5
  * 사용법:
6
6
  * import { Count } from 'masoneffect/count';
7
7
  */
8
+ import { VisibilityManager } from '../utils/visibilityManager.js';
8
9
  export interface CountOptions {
9
10
  targetValue: number;
10
11
  duration?: number;
@@ -33,12 +34,12 @@ export declare class Count {
33
34
  currentValue: number;
34
35
  startTime: number | null;
35
36
  animationFrameId: number | null;
36
- intersectionObserver: IntersectionObserver | null;
37
+ visibilityManager: VisibilityManager | null;
37
38
  isRunning: boolean;
38
39
  hasTriggered: boolean;
39
40
  constructor(container: HTMLElement | string, options: CountOptions);
40
41
  init(): void;
41
- setupIntersectionObserver(): void;
42
+ setupVisibilityManager(): void;
42
43
  start(): void;
43
44
  stop(): void;
44
45
  reset(): void;
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/core/count/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,MAAM,WAAW,YAAY;IAC3B,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB;AAGD,eAAO,MAAM,eAAe;gBACd,MAAM;oBACF,MAAM;qBACL,MAAM;uBACJ,MAAM;sBACP,MAAM;CACzB,CAAC;AAEF,qBAAa,KAAK;IAChB,SAAS,EAAE,WAAW,CAAC;IACvB,MAAM,EAAE,QAAQ,CAAC,IAAI,CAAC,YAAY,EAAE,UAAU,GAAG,YAAY,CAAC,CAAC,GAAG;QAChE,QAAQ,EAAE,YAAY,CAAC,UAAU,CAAC,CAAC;QACnC,UAAU,EAAE,YAAY,CAAC,YAAY,CAAC,CAAC;KACxC,CAAC;IACF,YAAY,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,gBAAgB,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,oBAAoB,EAAE,oBAAoB,GAAG,IAAI,CAAC;IAClD,SAAS,EAAE,OAAO,CAAC;IACnB,YAAY,EAAE,OAAO,CAAC;gBAEV,SAAS,EAAE,WAAW,GAAG,MAAM,EAAE,OAAO,EAAE,YAAY;IAoClE,IAAI,IAAI,IAAI;IAQZ,yBAAyB,IAAI,IAAI;IAsDjC,KAAK,IAAI,IAAI;IA6Cb,IAAI,IAAI,IAAI;IAQZ,KAAK,IAAI,IAAI;IAQb,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAKlC,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM;IAMnC,YAAY,CAAC,SAAS,EAAE,OAAO,CAAC,YAAY,CAAC,GAAG,IAAI;IA0BpD,QAAQ,IAAI,MAAM;IAKlB,OAAO,IAAI,IAAI;CAOhB;AAGD,eAAe,KAAK,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/core/count/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,EAAE,iBAAiB,EAAE,MAAM,+BAA+B,CAAC;AAElE,MAAM,WAAW,YAAY;IAC3B,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB;AAGD,eAAO,MAAM,eAAe;gBACd,MAAM;oBACF,MAAM;qBACL,MAAM;uBACJ,MAAM;sBACP,MAAM;CACzB,CAAC;AAEF,qBAAa,KAAK;IAChB,SAAS,EAAE,WAAW,CAAC;IACvB,MAAM,EAAE,QAAQ,CAAC,IAAI,CAAC,YAAY,EAAE,UAAU,GAAG,YAAY,CAAC,CAAC,GAAG;QAChE,QAAQ,EAAE,YAAY,CAAC,UAAU,CAAC,CAAC;QACnC,UAAU,EAAE,YAAY,CAAC,YAAY,CAAC,CAAC;KACxC,CAAC;IACF,YAAY,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,gBAAgB,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,iBAAiB,EAAE,iBAAiB,GAAG,IAAI,CAAC;IAC5C,SAAS,EAAE,OAAO,CAAC;IACnB,YAAY,EAAE,OAAO,CAAC;gBAEV,SAAS,EAAE,WAAW,GAAG,MAAM,EAAE,OAAO,EAAE,YAAY;IAoClE,IAAI,IAAI,IAAI;IAQZ,sBAAsB,IAAI,IAAI;IAoB9B,KAAK,IAAI,IAAI;IA6Cb,IAAI,IAAI,IAAI;IAQZ,KAAK,IAAI,IAAI;IAQb,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAKlC,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM;IAMnC,YAAY,CAAC,SAAS,EAAE,OAAO,CAAC,YAAY,CAAC,GAAG,IAAI;IA0BpD,QAAQ,IAAI,MAAM;IAKlB,OAAO,IAAI,IAAI;CAOhB;AAGD,eAAe,KAAK,CAAC"}
@@ -5,6 +5,7 @@
5
5
  * 사용법:
6
6
  * import { TextToParticle } from 'masoneffect/textToParticle';
7
7
  */
8
+ import { VisibilityManager } from '../utils/visibilityManager.js';
8
9
  export interface TextToParticleOptions {
9
10
  text?: string;
10
11
  densityStep?: number;
@@ -55,14 +56,13 @@ export declare class TextToParticle {
55
56
  };
56
57
  animationId: number | null;
57
58
  isRunning: boolean;
58
- isVisible: boolean;
59
- intersectionObserver: IntersectionObserver | null;
59
+ visibilityManager: VisibilityManager | null;
60
60
  debounceDelay: number;
61
61
  _debouncedMorph: (textOrOptions?: string | Partial<TextToParticleOptions> | null) => void;
62
62
  _debouncedUpdateConfig: (newConfig: Partial<TextToParticleOptions>) => void;
63
63
  constructor(container: HTMLElement | string, options?: TextToParticleOptions);
64
64
  init(): void;
65
- setupIntersectionObserver(): void;
65
+ setupVisibilityManager(): void;
66
66
  resize(): void;
67
67
  /**
68
68
  * 텍스트가 영역 안에 들어가는지 확인하는 헬퍼 함수 (줄바꿈 지원)
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/core/textToParticle/index.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/core/textToParticle/index.ts"],"names":[],"mappings":"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"}
@@ -5,6 +5,7 @@
5
5
  * 사용법:
6
6
  * import { Typing } from 'masoneffect/typing';
7
7
  */
8
+ import { VisibilityManager } from '../utils/visibilityManager.js';
8
9
  export interface TypingOptions {
9
10
  text: string;
10
11
  speed?: number;
@@ -33,13 +34,13 @@ export declare class Typing {
33
34
  currentIndex: number;
34
35
  displayedText: string;
35
36
  timeoutId: ReturnType<typeof setTimeout> | null;
36
- intersectionObserver: IntersectionObserver | null;
37
+ visibilityManager: VisibilityManager | null;
37
38
  isRunning: boolean;
38
39
  hasTriggered: boolean;
39
40
  originalText: string;
40
41
  constructor(container: HTMLElement | string, options: TypingOptions);
41
42
  init(): void;
42
- setupIntersectionObserver(): void;
43
+ setupVisibilityManager(): void;
43
44
  private buildTextFromUnits;
44
45
  start(): void;
45
46
  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;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"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/core/typing/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,EAAE,iBAAiB,EAAE,MAAM,+BAA+B,CAAC;AAElE,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,iBAAiB,EAAE,iBAAiB,GAAG,IAAI,CAAC;IAC5C,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,sBAAsB,IAAI,IAAI;IAmB9B,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"}
@@ -0,0 +1,35 @@
1
+ /**
2
+ * VisibilityManager - IntersectionObserver와 Page Visibility API를 통합 관리
3
+ * 모든 효과에서 공통으로 사용하는 가시성 관리 유틸리티
4
+ */
5
+ export interface VisibilityManagerOptions {
6
+ threshold?: number;
7
+ rootMargin?: string;
8
+ onVisible?: () => void;
9
+ onHidden?: () => void;
10
+ }
11
+ export declare class VisibilityManager {
12
+ private container;
13
+ private options;
14
+ private intersectionObserver;
15
+ private visibilityChangeHandler;
16
+ private isVisible;
17
+ private isPageVisible;
18
+ constructor(container: HTMLElement, options?: VisibilityManagerOptions);
19
+ private setupIntersectionObserver;
20
+ private setupPageVisibility;
21
+ /**
22
+ * 현재 요소가 화면에 보이는지 확인
23
+ */
24
+ getIsVisible(): boolean;
25
+ /**
26
+ * 옵션 업데이트
27
+ */
28
+ updateOptions(newOptions: Partial<VisibilityManagerOptions>): void;
29
+ /**
30
+ * 리소스 정리
31
+ */
32
+ destroy(): void;
33
+ }
34
+ export default VisibilityManager;
35
+ //# sourceMappingURL=visibilityManager.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"visibilityManager.d.ts","sourceRoot":"","sources":["../../../../src/core/utils/visibilityManager.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,MAAM,WAAW,wBAAwB;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,qBAAa,iBAAiB;IAC5B,OAAO,CAAC,SAAS,CAAc;IAC/B,OAAO,CAAC,OAAO,CAA2B;IAC1C,OAAO,CAAC,oBAAoB,CAA8B;IAC1D,OAAO,CAAC,uBAAuB,CAAsB;IACrD,OAAO,CAAC,SAAS,CAAU;IAC3B,OAAO,CAAC,aAAa,CAAU;gBAEnB,SAAS,EAAE,WAAW,EAAE,OAAO,GAAE,wBAA6B;IAiB1E,OAAO,CAAC,yBAAyB;IAsCjC,OAAO,CAAC,mBAAmB;IA+B3B;;OAEG;IACH,YAAY,IAAI,OAAO;IAIvB;;OAEG;IACH,aAAa,CAAC,UAAU,EAAE,OAAO,CAAC,wBAAwB,CAAC,GAAG,IAAI;IAWlE;;OAEG;IACH,OAAO,IAAI,IAAI;CAUhB;AAED,eAAe,iBAAiB,CAAC"}
@@ -1 +1 @@
1
- function t(t){const s=t.charCodeAt(0);if(s<44032||s>55203)return[t];const i=s-44032,h=Math.floor(i/588),e=Math.floor(i%588/28),n=i%28,o=[];return o.push(["ㄱ","ㄲ","ㄴ","ㄷ","ㄸ","ㄹ","ㅁ","ㅂ","ㅃ","ㅅ","ㅆ","ㅇ","ㅈ","ㅉ","ㅊ","ㅋ","ㅌ","ㅍ","ㅎ"][h]),o.push(["ㅏ","ㅐ","ㅑ","ㅒ","ㅓ","ㅔ","ㅕ","ㅖ","ㅗ","ㅘ","ㅙ","ㅚ","ㅛ","ㅜ","ㅝ","ㅞ","ㅟ","ㅠ","ㅡ","ㅢ","ㅣ"][e]),n>0&&o.push(["","ㄱ","ㄲ","ㄳ","ㄴ","ㄵ","ㄶ","ㄷ","ㄹ","ㄺ","ㄻ","ㄼ","ㄽ","ㄾ","ㄿ","ㅀ","ㅁ","ㅂ","ㅄ","ㅅ","ㅆ","ㅇ","ㅈ","ㅊ","ㅋ","ㅌ","ㅍ","ㅎ"][n]),o}function s(t,s,i){const h=["ㄱ","ㄲ","ㄴ","ㄷ","ㄸ","ㄹ","ㅁ","ㅂ","ㅃ","ㅅ","ㅆ","ㅇ","ㅈ","ㅉ","ㅊ","ㅋ","ㅌ","ㅍ","ㅎ"].indexOf(t),e=["ㅏ","ㅐ","ㅑ","ㅒ","ㅓ","ㅔ","ㅕ","ㅖ","ㅗ","ㅘ","ㅙ","ㅚ","ㅛ","ㅜ","ㅝ","ㅞ","ㅟ","ㅠ","ㅡ","ㅢ","ㅣ"].indexOf(s),n=i?["","ㄱ","ㄲ","ㄳ","ㄴ","ㄵ","ㄶ","ㄷ","ㄹ","ㄺ","ㄻ","ㄼ","ㄽ","ㄾ","ㄿ","ㅀ","ㅁ","ㅂ","ㅄ","ㅅ","ㅆ","ㅇ","ㅈ","ㅊ","ㅋ","ㅌ","ㅍ","ㅎ"].indexOf(i):0;if(-1===h||-1===e)return t+(s||"")+(i||"");const o=44032+21*h*28+28*e+n;return String.fromCharCode(o)}function i(s){const i=[],h=[];for(let e=0;e<s.length;e++){const n=s[e],o=n.charCodeAt(0),r=i.length;if(o>=44032&&o<=55203){const s=t(n);i.push(...s),h.push({start:r,end:i.length,isHangul:!0})}else i.push(n),h.push({start:r,end:i.length,isHangul:!1})}return{units:i,charUnitRanges:h}}Object.defineProperty(exports,"t",{value:!0});class h{constructor(t,s){if(this.container="string"==typeof t?document.querySelector(t):t,!this.container)throw new Error("Container element not found");this.originalText=s.text,this.config={text:s.text,speed:s.speed??50,delay:s.delay??0,enabled:s.enabled??!0,threshold:s.threshold??.2,rootMargin:s.rootMargin??"0px 0px -100px 0px",triggerOnce:s.triggerOnce??!1,showCursor:s.showCursor??!0,cursorChar:s.cursorChar??"|",onUpdate:s.onUpdate||null,onComplete:s.onComplete||null};const h=i(this.config.text);this.textUnits=h.units,this.charUnitRanges=h.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=>{for(const s of t)s.target===this.container&&s.isIntersecting&&!this.hasTriggered&&(this.config.enabled&&setTimeout(()=>this.start(),this.config.delay),this.hasTriggered=!0,this.config.triggerOnce&&this.intersectionObserver?.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 i="";for(let h=0;h<this.charUnitRanges.length;h++){const e=this.charUnitRanges[h];if(e.start>=t)break;const n=Math.min(t-e.start,e.end-e.start);if(n<=0)break;if(e.isHangul){const t=this.textUnits.slice(e.start,e.start+n);1===t.length?i+=t[0]:2===t.length?i+=s(t[0],t[1]):t.length>=3&&(i+=s(t[0],t[1],t[2]))}else n>0&&(i+=this.textUnits[e.start])}return i}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 s=i(t);this.textUnits=s.units,this.charUnitRanges=s.charUnitRanges,this.reset(),this.config.enabled&&setTimeout(()=>this.start(),this.config.delay)}destroy(){this.stop(),this.intersectionObserver&&(this.intersectionObserver.disconnect(),this.intersectionObserver=null)}}exports.Typing=h,exports.default=h;
1
+ Object.defineProperty(exports,"t",{value:!0});class t{constructor(t,i={}){this.container=t,this.options={threshold:i.threshold??.1,rootMargin:i.rootMargin??"0px",onVisible:i.onVisible,onHidden:i.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 i of t)i.target===this.container&&(i.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 i=t.charCodeAt(0);if(i<44032||i>55203)return[t];const s=i-44032,h=Math.floor(s/588),e=Math.floor(s%588/28),n=s%28,o=[];return o.push(["ㄱ","ㄲ","ㄴ","ㄷ","ㄸ","ㄹ","ㅁ","ㅂ","ㅃ","ㅅ","ㅆ","ㅇ","ㅈ","ㅉ","ㅊ","ㅋ","ㅌ","ㅍ","ㅎ"][h]),o.push(["ㅏ","ㅐ","ㅑ","ㅒ","ㅓ","ㅔ","ㅕ","ㅖ","ㅗ","ㅘ","ㅙ","ㅚ","ㅛ","ㅜ","ㅝ","ㅞ","ㅟ","ㅠ","ㅡ","ㅢ","ㅣ"][e]),n>0&&o.push(["","ㄱ","ㄲ","ㄳ","ㄴ","ㄵ","ㄶ","ㄷ","ㄹ","ㄺ","ㄻ","ㄼ","ㄽ","ㄾ","ㄿ","ㅀ","ㅁ","ㅂ","ㅄ","ㅅ","ㅆ","ㅇ","ㅈ","ㅊ","ㅋ","ㅌ","ㅍ","ㅎ"][n]),o}function s(t,i,s){const h=["ㄱ","ㄲ","ㄴ","ㄷ","ㄸ","ㄹ","ㅁ","ㅂ","ㅃ","ㅅ","ㅆ","ㅇ","ㅈ","ㅉ","ㅊ","ㅋ","ㅌ","ㅍ","ㅎ"].indexOf(t),e=["ㅏ","ㅐ","ㅑ","ㅒ","ㅓ","ㅔ","ㅕ","ㅖ","ㅗ","ㅘ","ㅙ","ㅚ","ㅛ","ㅜ","ㅝ","ㅞ","ㅟ","ㅠ","ㅡ","ㅢ","ㅣ"].indexOf(i),n=s?["","ㄱ","ㄲ","ㄳ","ㄴ","ㄵ","ㄶ","ㄷ","ㄹ","ㄺ","ㄻ","ㄼ","ㄽ","ㄾ","ㄿ","ㅀ","ㅁ","ㅂ","ㅄ","ㅅ","ㅆ","ㅇ","ㅈ","ㅊ","ㅋ","ㅌ","ㅍ","ㅎ"].indexOf(s):0;if(-1===h||-1===e)return t+(i||"")+(s||"");const o=44032+21*h*28+28*e+n;return String.fromCharCode(o)}function h(t){const s=[],h=[];for(let e=0;e<t.length;e++){const n=t[e],o=n.charCodeAt(0),r=s.length;if(o>=44032&&o<=55203){const t=i(n);s.push(...t),h.push({start:r,end:s.length,isHangul:!0})}else s.push(n),h.push({start:r,end:s.length,isHangul:!1})}return{units:s,charUnitRanges:h}}class e{constructor(t,i){if(this.container="string"==typeof t?document.querySelector(t):t,!this.container)throw new Error("Container element not found");this.originalText=i.text,this.config={text:i.text,speed:i.speed??50,delay:i.delay??0,enabled:i.enabled??!0,threshold:i.threshold??.2,rootMargin:i.rootMargin??"0px 0px -100px 0px",triggerOnce:i.triggerOnce??!1,showCursor:i.showCursor??!0,cursorChar:i.cursorChar??"|",onUpdate:i.onUpdate||null,onComplete:i.onComplete||null};const s=h(this.config.text);this.textUnits=s.units,this.charUnitRanges=s.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 t(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 i="";for(let h=0;h<this.charUnitRanges.length;h++){const e=this.charUnitRanges[h];if(e.start>=t)break;const n=Math.min(t-e.start,e.end-e.start);if(n<=0)break;if(e.isHangul){const t=this.textUnits.slice(e.start,e.start+n);1===t.length?i+=t[0]:2===t.length?i+=s(t[0],t[1]):t.length>=3&&(i+=s(t[0],t[1],t[2]))}else n>0&&(i+=this.textUnits[e.start])}return i}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 i=h(t);this.textUnits=i.units,this.charUnitRanges=i.charUnitRanges,this.reset(),this.config.enabled&&setTimeout(()=>this.start(),this.config.delay)}destroy(){this.stop(),this.visibilityManager&&(this.visibilityManager.destroy(),this.visibilityManager=null)}}exports.Typing=e,exports.default=e;