masoneffect 0.1.18 → 0.1.20

package/{src/core/index.ts → dist/vue/index.mjs}

@@ -1,46 +1,7 @@
-/**
- * MasonEffect - 파티클 모핑 효과 라이브러리
- * 바닐라 JS 코어 클래스
- */
-
-export interface MasonEffectOptions {
-  text?: string;
-  densityStep?: number;
-  maxParticles?: number;
-  pointSize?: number;
-  ease?: number;
-  repelRadius?: number;
-  repelStrength?: number;
-  particleColor?: string;
-  fontFamily?: string;
-  fontSize?: number | null;
-  width?: number | null;
-  height?: number | null;
-  devicePixelRatio?: number | null;
-  debounceDelay?: number;
-  onReady?: (instance: MasonEffect) => void;
-  onUpdate?: (instance: MasonEffect) => void;
-}
-
-export interface Particle {
-  x: number;
-  y: number;
-  vx: number;
-  vy: number;
-  tx: number;
-  ty: number;
-  initialX?: number;
-  initialY?: number;
-  j: number;
-}
-
-// 디바운스 유틸리티 함수
-function debounce<T extends (...args: any[]) => any>(
-  func: T,
-  wait: number
-): (...args: Parameters<T>) => void {
-  let timeout: ReturnType<typeof setTimeout> | null = null;
-  return function executedFunction(...args: Parameters<T>) {
+import { defineComponent, ref, watch, onMounted, onBeforeUnmount, createElementBlock, openBlock, normalizeStyle, normalizeClass } from "vue";
+function debounce(func, wait) {
+  let timeout = null;
+  return function executedFunction(...args) {
     const later = () => {
       timeout = null;
       func.apply(this, args);
@@ -51,78 +12,43 @@ function debounce<T extends (...args: any[]) => any>(
     timeout = setTimeout(later, wait);
   };
 }
-
-export class MasonEffect {
-  container: HTMLElement;
-  config: Required<Omit<MasonEffectOptions, 'onReady' | 'onUpdate' | 'debounceDelay'>> & {
-    onReady: MasonEffectOptions['onReady'];
-    onUpdate: MasonEffectOptions['onUpdate'];
-  };
-  canvas: HTMLCanvasElement;
-  ctx: CanvasRenderingContext2D;
-  offCanvas: HTMLCanvasElement;
-  offCtx: CanvasRenderingContext2D;
-  W: number;
-  H: number;
-  DPR: number;
-  particles: Particle[];
-  mouse: { x: number; y: number; down: boolean };
-  animationId: number | null;
-  isRunning: boolean;
-  isVisible: boolean;
-  intersectionObserver: IntersectionObserver | null;
-  debounceDelay: number;
-  _debouncedMorph!: (textOrOptions?: string | Partial<MasonEffectOptions> | null) => void;
-  _debouncedUpdateConfig!: (newConfig: Partial<MasonEffectOptions>) => void;
-
-  constructor(container: HTMLElement | string, options: MasonEffectOptions = {}) {
-    // 컨테이너 요소
-    this.container = typeof container === 'string' 
-      ? document.querySelector(container) as HTMLElement
-      : container;
-    
+class MasonEffect {
+  constructor(container, options = {}) {
+    this.container = typeof container === "string" ? document.querySelector(container) : container;
     if (!this.container) {
-      throw new Error('Container element not found');
+      throw new Error("Container element not found");
     }
-
-    // 설정값들
     this.config = {
-      text: options.text || 'mason effect',
+      text: options.text || "mason effect",
       densityStep: options.densityStep ?? 2,
       maxParticles: options.maxParticles ?? 3200,
       pointSize: options.pointSize ?? 0.5,
       ease: options.ease ?? 0.05,
       repelRadius: options.repelRadius ?? 150,
       repelStrength: options.repelStrength ?? 1,
-      particleColor: options.particleColor || '#fff',
-      fontFamily: options.fontFamily || 'Inter, system-ui, Arial',
+      particleColor: options.particleColor || "#fff",
+      fontFamily: options.fontFamily || "Inter, system-ui, Arial",
       fontSize: options.fontSize || null,
       width: options.width || null,
       height: options.height || null,
       devicePixelRatio: options.devicePixelRatio ?? null,
       onReady: options.onReady || null,
-      onUpdate: options.onUpdate || null,
-    } as typeof this.config;
-
-    // 캔버스 생성
-    this.canvas = document.createElement('canvas');
-    const ctx = this.canvas.getContext('2d');
+      onUpdate: options.onUpdate || null
+    };
+    this.canvas = document.createElement("canvas");
+    const ctx = this.canvas.getContext("2d");
     if (!ctx) {
-      throw new Error('Canvas context not available');
+      throw new Error("Canvas context not available");
     }
     this.ctx = ctx;
     this.container.appendChild(this.canvas);
-    this.canvas.style.display = 'block';
-
-    // 오프스크린 캔버스 (텍스트 렌더링용)
-    this.offCanvas = document.createElement('canvas');
-    const offCtx = this.offCanvas.getContext('2d');
+    this.canvas.style.display = "block";
+    this.offCanvas = document.createElement("canvas");
+    const offCtx = this.offCanvas.getContext("2d");
     if (!offCtx) {
-      throw new Error('Offscreen canvas context not available');
+      throw new Error("Offscreen canvas context not available");
     }
     this.offCtx = offCtx;
-
-    // 상태
     this.W = 0;
     this.H = 0;
     this.DPR = this.config.devicePixelRatio || Math.min(window.devicePixelRatio || 1, 1.8);
@@ -132,54 +58,38 @@ export class MasonEffect {
     this.isRunning = false;
     this.isVisible = false;
     this.intersectionObserver = null;
-
-    // 디바운스 설정 (ms)
     this.debounceDelay = options.debounceDelay ?? 150;
-
-    // 이벤트 핸들러 바인딩 (디바운스 적용 전에 바인딩)
     const boundHandleResize = this.handleResize.bind(this);
     this.handleResize = debounce(boundHandleResize, 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);
-
-    // morph와 updateConfig를 위한 디바운스된 내부 메서드
     this._debouncedMorph = debounce(this._morphInternal.bind(this), this.debounceDelay);
     this._debouncedUpdateConfig = debounce(this._updateConfigInternal.bind(this), this.debounceDelay);
-
-    // 초기화
     this.init();
   }
-
-  init(): void {
+  init() {
     this.resize();
     this.setupEventListeners();
     this.setupIntersectionObserver();
-
     if (this.config.onReady) {
       this.config.onReady(this);
     }
   }
-
-  setupIntersectionObserver(): void {
-    // IntersectionObserver가 지원되지 않는 환경에서는 항상 재생
-    if (typeof window === 'undefined' || typeof window.IntersectionObserver === 'undefined') {
+  setupIntersectionObserver() {
+    if (typeof window === "undefined" || typeof window.IntersectionObserver === "undefined") {
       this.isVisible = true;
       this.start();
       return;
     }
-
-    // 이미 설정되어 있다면 다시 만들지 않음
     if (this.intersectionObserver) {
       return;
     }
-
     this.intersectionObserver = new IntersectionObserver(
       (entries) => {
         for (const entry of entries) {
           if (entry.target !== this.container) continue;
-
           if (entry.isIntersecting) {
             this.isVisible = true;
             this.start();
@@ -190,75 +100,74 @@ export class MasonEffect {
         }
       },
       {
-        threshold: 0.1, // 10% 이상 보일 때 동작
+        threshold: 0.1
+        // 10% 이상 보일 때 동작
       }
     );
-
     this.intersectionObserver.observe(this.container);
   }
-
-  resize(): void {
+  resize() {
     const width = this.config.width || this.container.clientWidth || window.innerWidth;
     const height = this.config.height || this.container.clientHeight || window.innerHeight * 0.7;
-    
+    if (width <= 0 || height <= 0) {
+      return;
+    }
     this.W = Math.floor(width * this.DPR);
     this.H = Math.floor(height * this.DPR);
-    
+    const MAX_CANVAS_SIZE = 4096;
+    if (this.W > MAX_CANVAS_SIZE || this.H > MAX_CANVAS_SIZE) {
+      const scale = Math.min(MAX_CANVAS_SIZE / this.W, MAX_CANVAS_SIZE / this.H);
+      this.W = Math.floor(this.W * scale);
+      this.H = Math.floor(this.H * scale);
+      this.DPR = this.DPR * scale;
+    }
     this.canvas.width = this.W;
     this.canvas.height = this.H;
-    this.canvas.style.width = width + 'px';
-    this.canvas.style.height = height + 'px';
-
-    this.buildTargets();
-    if (!this.particles.length) {
-      this.initParticles();
+    this.canvas.style.width = width + "px";
+    this.canvas.style.height = height + "px";
+    if (this.W > 0 && this.H > 0) {
+      this.buildTargets();
+      if (!this.particles.length) {
+        this.initParticles();
+      }
     }
   }
-
-  buildTargets(): void {
+  buildTargets() {
+    if (this.W <= 0 || this.H <= 0) {
+      return;
+    }
     const text = 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 base = Math.min(this.W, this.H);
     const fontSize = this.config.fontSize || Math.max(80, Math.floor(base * 0.18));
-    this.offCtx.fillStyle = '#ffffff';
-    this.offCtx.textAlign = 'center';
-    this.offCtx.textBaseline = 'middle';
+    this.offCtx.fillStyle = "#ffffff";
+    this.offCtx.textAlign = "center";
+    this.offCtx.textBaseline = "middle";
     this.offCtx.font = `400 ${fontSize}px ${this.config.fontFamily}`;
-
-    // 글자 간격 계산 및 그리기
-    const chars = text.split('');
+    const chars = text.split("");
     const spacing = fontSize * 0.05;
     const totalWidth = this.offCtx.measureText(text).width + spacing * (chars.length - 1);
     let x = this.W / 2 - totalWidth / 2;
-    
     for (const ch of chars) {
       this.offCtx.fillText(ch, x + this.offCtx.measureText(ch).width / 2, this.H / 2);
       x += this.offCtx.measureText(ch).width + spacing;
     }
-
-    // 픽셀 샘플링
     const step = Math.max(2, this.config.densityStep);
     const img = this.offCtx.getImageData(0, 0, this.W, this.H).data;
-    const targets: Array<{ x: number; y: number }> = [];
-    
+    const targets = [];
     for (let y = 0; y < this.H; y += step) {
-      for (let x = 0; x < this.W; x += step) {
-        const i = (y * this.W + x) * 4;
+      for (let x2 = 0; x2 < this.W; x2 += step) {
+        const i = (y * this.W + x2) * 4;
         if (img[i] + img[i + 1] + img[i + 2] > 600) {
-          targets.push({ x, y });
+          targets.push({ x: x2, y });
         }
       }
     }
-
-    // 파티클 수 제한
     while (targets.length > this.config.maxParticles) {
       targets.splice(Math.floor(Math.random() * targets.length), 1);
     }
-
-    // 파티클 수 조정
     if (this.particles.length < targets.length) {
       const need = targets.length - this.particles.length;
       for (let i = 0; i < need; i++) {
@@ -267,8 +176,6 @@ export class MasonEffect {
     } else if (this.particles.length > targets.length) {
       this.particles.length = targets.length;
     }
-
-    // 목표 좌표 할당
     for (let i = 0; i < this.particles.length; i++) {
       const p = this.particles[i];
       const t = targets[i];
@@ -276,9 +183,7 @@ export class MasonEffect {
       p.ty = t.y;
     }
   }
-
-  makeParticle(): Particle {
-    // 캔버스 전체에 골고루 분포 (여백 없이)
+  makeParticle() {
     const sx = Math.random() * this.W;
     const sy = Math.random() * this.H;
     return {
@@ -288,35 +193,29 @@ export class MasonEffect {
       vy: 0,
       tx: sx,
       ty: sy,
-      initialX: sx, // 초기 위치 저장 (scatter 시 돌아갈 위치)
+      initialX: sx,
+      // 초기 위치 저장 (scatter 시 돌아갈 위치)
       initialY: sy,
-      j: Math.random() * Math.PI * 2,
+      j: Math.random() * Math.PI * 2
     };
   }
-
-  initParticles(): void {
-    // 캔버스 전체에 골고루 분포 (여백 없이)
+  initParticles() {
     for (const p of this.particles) {
       const sx = Math.random() * this.W;
       const sy = Math.random() * this.H;
       p.x = sx;
       p.y = sy;
       p.vx = p.vy = 0;
-      // 초기 위치 저장 (scatter 시 돌아갈 위치)
       p.initialX = sx;
       p.initialY = sy;
     }
   }
-
-  scatter(): void {
-    // 각 파티클을 초기 위치로 돌아가도록 설정
+  scatter() {
     for (const p of this.particles) {
-      // 초기 위치가 저장되어 있으면 그 위치로, 없으면 현재 위치 유지
-      if (p.initialX !== undefined && p.initialY !== undefined) {
+      if (p.initialX !== void 0 && p.initialY !== void 0) {
         p.tx = p.initialX;
         p.ty = p.initialY;
       } else {
-        // 초기 위치가 없으면 현재 위치를 초기 위치로 저장
         p.initialX = p.x;
         p.initialY = p.y;
         p.tx = p.initialX;
@@ -324,71 +223,51 @@ export class MasonEffect {
       }
     }
   }
-
-  morph(textOrOptions?: string | Partial<MasonEffectOptions> | null): void {
-    // 즉시 실행이 필요한 경우 (예: 초기화 시)를 위해 내부 메서드 직접 호출
-    // 일반적인 경우에는 디바운스 적용
+  morph(textOrOptions) {
     this._debouncedMorph(textOrOptions);
   }
-
-  _morphInternal(textOrOptions?: string | Partial<MasonEffectOptions> | null): void {
-    // W와 H가 0이면 resize 먼저 실행
+  _morphInternal(textOrOptions) {
     if (this.W === 0 || this.H === 0) {
       this.resize();
     }
-    
-    if (typeof textOrOptions === 'string') {
-      // 문자열인 경우: 기존 동작 유지
+    if (typeof textOrOptions === "string") {
       this.config.text = textOrOptions;
       this.buildTargets();
-    } else if (textOrOptions && typeof textOrOptions === 'object') {
-      // 객체인 경우: 텍스트와 함께 다른 설정도 변경
-      const needsRebuild = textOrOptions.text !== undefined;
+    } else if (textOrOptions && typeof textOrOptions === "object") {
+      const needsRebuild = textOrOptions.text !== void 0;
       this.config = { ...this.config, ...textOrOptions };
       if (needsRebuild) {
         this.buildTargets();
       }
     } else {
-      // null이거나 undefined인 경우: 현재 텍스트로 재빌드
       this.buildTargets();
     }
   }
-
-  update(): void {
+  update() {
     this.ctx.clearRect(0, 0, this.W, this.H);
-
     for (const p of this.particles) {
-      // 목표 좌표로 당기는 힘
       let ax = (p.tx - p.x) * this.config.ease;
       let ay = (p.ty - p.y) * this.config.ease;
-
-      // 마우스 반발/흡입
       if (this.mouse.x || this.mouse.y) {
         const dx = p.x - this.mouse.x;
         const dy = p.y - this.mouse.y;
         const d2 = dx * dx + dy * dy;
-        const r = this.config.repelRadius * this.DPR;
-        if (d2 < r * r) {
-          const d = Math.sqrt(d2) + 0.0001;
-          const f = (this.mouse.down ? -1 : 1) * this.config.repelStrength * (1 - d / r);
-          ax += (dx / d) * f * 6.0;
-          ay += (dy / d) * f * 6.0;
+        const r2 = this.config.repelRadius * this.DPR;
+        if (d2 < r2 * r2) {
+          const d = Math.sqrt(d2) + 1e-4;
+          const f = (this.mouse.down ? -1 : 1) * this.config.repelStrength * (1 - d / r2);
+          ax += dx / d * f * 6;
+          ay += dy / d * f * 6;
         }
       }
-
-      // 진동 효과
       p.j += 2;
       ax += Math.cos(p.j) * 0.05;
       ay += Math.sin(p.j * 1.3) * 0.05;
-
-      // 속도와 위치 업데이트
       p.vx = (p.vx + ax) * Math.random();
       p.vy = (p.vy + ay) * Math.random();
       p.x += p.vx;
       p.y += p.vy;
     }
-
-    // 파티클 그리기
     this.ctx.fillStyle = this.config.particleColor;
     const r = this.config.pointSize * this.DPR;
     for (const p of this.particles) {
@@ -396,85 +275,70 @@ export class MasonEffect {
       this.ctx.arc(p.x, p.y, r, 0, Math.PI * 2);
       this.ctx.fill();
     }
-
     if (this.config.onUpdate) {
       this.config.onUpdate(this);
     }
   }
-
-  animate(): void {
+  animate() {
     if (!this.isRunning) return;
     this.update();
     this.animationId = requestAnimationFrame(() => this.animate());
   }
-
-  start(): void {
+  start() {
     if (this.isRunning) return;
     this.isRunning = true;
     this.animate();
   }
-
-  stop(): void {
+  stop() {
     this.isRunning = false;
     if (this.animationId) {
       cancelAnimationFrame(this.animationId);
       this.animationId = null;
     }
   }
-
-  setupEventListeners(): void {
-    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);
+  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(): void {
-    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);
+  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(): void {
+  handleResize() {
     this.resize();
   }
-
-  handleMouseMove(e: MouseEvent): void {
+  handleMouseMove(e) {
     const rect = this.canvas.getBoundingClientRect();
     this.mouse.x = (e.clientX - rect.left) * this.DPR;
     this.mouse.y = (e.clientY - rect.top) * this.DPR;
   }
-
-  handleMouseLeave(): void {
+  handleMouseLeave() {
     this.mouse.x = this.mouse.y = 0;
   }
-
-  handleMouseDown(): void {
+  handleMouseDown() {
     this.mouse.down = true;
   }
-
-  handleMouseUp(): void {
+  handleMouseUp() {
     this.mouse.down = false;
   }
-
   // 설정 업데이트
-  updateConfig(newConfig: Partial<MasonEffectOptions>): void {
-    // 디바운스 적용
+  updateConfig(newConfig) {
     this._debouncedUpdateConfig(newConfig);
   }
-
-  _updateConfigInternal(newConfig: Partial<MasonEffectOptions>): void {
+  _updateConfigInternal(newConfig) {
     this.config = { ...this.config, ...newConfig };
     if (newConfig.text) {
       this.buildTargets();
     }
   }
-
   // 파괴 및 정리
-  destroy(): void {
+  destroy() {
     this.stop();
     this.removeEventListeners();
     if (this.intersectionObserver) {
@@ -486,7 +350,133 @@ export class MasonEffect {
     }
   }
 }
-
-// 기본 export
-export default MasonEffect;
-
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "MasonEffect",
+  props: {
+    className: { default: "" },
+    style: { default: () => ({}) },
+    text: { default: "mason effect" },
+    densityStep: { default: 2 },
+    maxParticles: { default: 3200 },
+    pointSize: { default: 0.5 },
+    ease: { default: 0.05 },
+    repelRadius: { default: 150 },
+    repelStrength: { default: 1 },
+    particleColor: { default: "#fff" },
+    fontFamily: { default: "Inter, system-ui, Arial" },
+    fontSize: { default: null },
+    width: { default: null },
+    height: { default: null },
+    devicePixelRatio: { default: null },
+    debounceDelay: {},
+    onReady: { type: Function, default: null },
+    onUpdate: { type: Function, default: null }
+  },
+  emits: ["ready", "update"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const container = ref(null);
+    let instance = null;
+    const init = () => {
+      if (!container.value) return;
+      const options = {
+        text: props.text,
+        densityStep: props.densityStep,
+        maxParticles: props.maxParticles,
+        pointSize: props.pointSize,
+        ease: props.ease,
+        repelRadius: props.repelRadius,
+        repelStrength: props.repelStrength,
+        particleColor: props.particleColor,
+        fontFamily: props.fontFamily,
+        fontSize: props.fontSize,
+        width: props.width,
+        height: props.height,
+        devicePixelRatio: props.devicePixelRatio,
+        onReady: (inst) => {
+          if (props.onReady) props.onReady(inst);
+          emit("ready", inst);
+        },
+        onUpdate: (inst) => {
+          if (props.onUpdate) props.onUpdate(inst);
+          emit("update", inst);
+        }
+      };
+      instance = new MasonEffect(container.value, options);
+    };
+    watch(
+      () => [
+        props.text,
+        props.densityStep,
+        props.maxParticles,
+        props.pointSize,
+        props.ease,
+        props.repelRadius,
+        props.repelStrength,
+        props.particleColor,
+        props.fontFamily,
+        props.fontSize,
+        props.width,
+        props.height,
+        props.devicePixelRatio
+      ],
+      () => {
+        if (instance) {
+          instance.updateConfig({
+            text: props.text,
+            densityStep: props.densityStep,
+            maxParticles: props.maxParticles,
+            pointSize: props.pointSize,
+            ease: props.ease,
+            repelRadius: props.repelRadius,
+            repelStrength: props.repelStrength,
+            particleColor: props.particleColor,
+            fontFamily: props.fontFamily,
+            fontSize: props.fontSize,
+            width: props.width,
+            height: props.height,
+            devicePixelRatio: props.devicePixelRatio
+          });
+        }
+      }
+    );
+    onMounted(() => {
+      init();
+    });
+    onBeforeUnmount(() => {
+      if (instance) {
+        instance.destroy();
+        instance = null;
+      }
+    });
+    __expose({
+      morph: (textOrOptions) => {
+        if (instance) instance.morph(textOrOptions);
+      },
+      scatter: () => {
+        if (instance) instance.scatter();
+      },
+      updateConfig: (config) => {
+        if (instance) instance.updateConfig(config);
+      },
+      destroy: () => {
+        if (instance) {
+          instance.destroy();
+          instance = null;
+        }
+      }
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        ref_key: "container",
+        ref: container,
+        class: normalizeClass(__props.className),
+        style: normalizeStyle(__props.style)
+      }, null, 6);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};