masoneffect 0.1.19 → 0.1.21

package/dist/react/index.js

@@ -1,549 +0,0 @@
-import React, { forwardRef, useRef, useEffect, useImperativeHandle } from 'react';
-
-/**
- * MasonEffect - 파티클 모핑 효과 라이브러리
- * 바닐라 JS 코어 클래스
- */
-// 디바운스 유틸리티 함수
-function debounce(func, wait) {
-    let timeout = null;
-    return function executedFunction(...args) {
-        const later = () => {
-            timeout = null;
-            func.apply(this, args);
-        };
-        if (timeout !== null) {
-            clearTimeout(timeout);
-        }
-        timeout = setTimeout(later, wait);
-    };
-}
-class MasonEffect {
-    constructor(container, options = {}) {
-        // 컨테이너 요소
-        this.container = typeof container === 'string'
-            ? document.querySelector(container)
-            : container;
-        if (!this.container) {
-            throw new Error('Container element not found');
-        }
-        // 설정값들
-        this.config = {
-            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',
-            fontSize: options.fontSize || null,
-            width: options.width || null,
-            height: options.height || null,
-            devicePixelRatio: options.devicePixelRatio ?? null,
-            onReady: options.onReady || null,
-            onUpdate: options.onUpdate || null,
-        };
-        // 캔버스 생성
-        this.canvas = document.createElement('canvas');
-        const ctx = this.canvas.getContext('2d');
-        if (!ctx) {
-            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');
-        if (!offCtx) {
-            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);
-        this.particles = [];
-        this.mouse = { x: 0, y: 0, down: false };
-        this.animationId = null;
-        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() {
-        this.resize();
-        this.setupEventListeners();
-        this.setupIntersectionObserver();
-        if (this.config.onReady) {
-            this.config.onReady(this);
-        }
-    }
-    setupIntersectionObserver() {
-        // IntersectionObserver가 지원되지 않는 환경에서는 항상 재생
-        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();
-                }
-                else {
-                    this.isVisible = false;
-                    this.stop();
-                }
-            }
-        }, {
-            threshold: 0.1, // 10% 이상 보일 때 동작
-        });
-        this.intersectionObserver.observe(this.container);
-    }
-    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);
-        // 캔버스 크기 제한 (메모리 오류 방지)
-        // getImageData는 최대 약 268MB (4096x4096x4)까지 지원
-        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';
-        // 크기가 유효할 때만 buildTargets 실행
-        if (this.W > 0 && this.H > 0) {
-            this.buildTargets();
-            if (!this.particles.length) {
-                this.initParticles();
-            }
-        }
-    }
-    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.font = `400 ${fontSize}px ${this.config.fontFamily}`;
-        // 글자 간격 계산 및 그리기
-        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 = [];
-        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;
-                if (img[i] + img[i + 1] + img[i + 2] > 600) {
-                    targets.push({ x, 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++) {
-                this.particles.push(this.makeParticle());
-            }
-        }
-        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];
-            p.tx = t.x;
-            p.ty = t.y;
-        }
-    }
-    makeParticle() {
-        // 캔버스 전체에 골고루 분포 (여백 없이)
-        const sx = Math.random() * this.W;
-        const sy = Math.random() * this.H;
-        return {
-            x: sx,
-            y: sy,
-            vx: 0,
-            vy: 0,
-            tx: sx,
-            ty: sy,
-            initialX: sx, // 초기 위치 저장 (scatter 시 돌아갈 위치)
-            initialY: sy,
-            j: Math.random() * Math.PI * 2,
-        };
-    }
-    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() {
-        // 각 파티클을 초기 위치로 돌아가도록 설정
-        for (const p of this.particles) {
-            // 초기 위치가 저장되어 있으면 그 위치로, 없으면 현재 위치 유지
-            if (p.initialX !== undefined && p.initialY !== undefined) {
-                p.tx = p.initialX;
-                p.ty = p.initialY;
-            }
-            else {
-                // 초기 위치가 없으면 현재 위치를 초기 위치로 저장
-                p.initialX = p.x;
-                p.initialY = p.y;
-                p.tx = p.initialX;
-                p.ty = p.initialY;
-            }
-        }
-    }
-    morph(textOrOptions) {
-        // 즉시 실행이 필요한 경우 (예: 초기화 시)를 위해 내부 메서드 직접 호출
-        // 일반적인 경우에는 디바운스 적용
-        this._debouncedMorph(textOrOptions);
-    }
-    _morphInternal(textOrOptions) {
-        // W와 H가 0이면 resize 먼저 실행
-        if (this.W === 0 || this.H === 0) {
-            this.resize();
-        }
-        if (typeof textOrOptions === 'string') {
-            // 문자열인 경우: 기존 동작 유지
-            this.config.text = textOrOptions;
-            this.buildTargets();
-        }
-        else if (textOrOptions && typeof textOrOptions === 'object') {
-            // 객체인 경우: 텍스트와 함께 다른 설정도 변경
-            const needsRebuild = textOrOptions.text !== undefined;
-            this.config = { ...this.config, ...textOrOptions };
-            if (needsRebuild) {
-                this.buildTargets();
-            }
-        }
-        else {
-            // null이거나 undefined인 경우: 현재 텍스트로 재빌드
-            this.buildTargets();
-        }
-    }
-    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;
-                }
-            }
-            // 진동 효과
-            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) {
-            this.ctx.beginPath();
-            this.ctx.arc(p.x, p.y, r, 0, Math.PI * 2);
-            this.ctx.fill();
-        }
-        if (this.config.onUpdate) {
-            this.config.onUpdate(this);
-        }
-    }
-    animate() {
-        if (!this.isRunning)
-            return;
-        this.update();
-        this.animationId = requestAnimationFrame(() => this.animate());
-    }
-    start() {
-        if (this.isRunning)
-            return;
-        this.isRunning = true;
-        this.animate();
-    }
-    stop() {
-        this.isRunning = false;
-        if (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(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() {
-        this.mouse.x = this.mouse.y = 0;
-    }
-    handleMouseDown() {
-        this.mouse.down = true;
-    }
-    handleMouseUp() {
-        this.mouse.down = false;
-    }
-    // 설정 업데이트
-    updateConfig(newConfig) {
-        // 디바운스 적용
-        this._debouncedUpdateConfig(newConfig);
-    }
-    _updateConfigInternal(newConfig) {
-        this.config = { ...this.config, ...newConfig };
-        if (newConfig.text) {
-            this.buildTargets();
-        }
-    }
-    // 파괴 및 정리
-    destroy() {
-        this.stop();
-        this.removeEventListeners();
-        if (this.intersectionObserver) {
-            this.intersectionObserver.disconnect();
-            this.intersectionObserver = null;
-        }
-        if (this.canvas && this.canvas.parentNode) {
-            this.canvas.parentNode.removeChild(this.canvas);
-        }
-    }
-}
-
-const MasonEffectComponent = forwardRef((props, ref) => {
-    const containerRef = useRef(null);
-    const instanceRef = useRef(null);
-    useEffect(() => {
-        if (!containerRef.current)
-            return;
-        let resizeObserver = null;
-        let initTimeout = null;
-        // 컨테이너가 실제 크기를 가지도록 대기
-        const initEffect = () => {
-            const container = containerRef.current;
-            if (!container)
-                return;
-            // 컨테이너 크기가 0이거나 너무 작으면 다음 프레임에 다시 시도
-            const rect = container.getBoundingClientRect();
-            if (rect.width <= 0 || rect.height <= 0) {
-                initTimeout = window.setTimeout(initEffect, 50);
-                return;
-            }
-            // 최소 크기 보장 (너무 작으면 기본값 사용)
-            const minSize = 100;
-            if (rect.width < minSize || rect.height < minSize) {
-                container.style.minWidth = minSize + 'px';
-                container.style.minHeight = minSize + 'px';
-            }
-            const { className, style, text, densityStep, maxParticles, pointSize, ease, repelRadius, repelStrength, particleColor, fontFamily, fontSize, width, height, devicePixelRatio, onReady, onUpdate, } = props;
-            const options = {
-                text,
-                densityStep,
-                maxParticles,
-                pointSize,
-                ease,
-                repelRadius,
-                repelStrength,
-                particleColor,
-                fontFamily,
-                fontSize,
-                width,
-                height,
-                devicePixelRatio,
-                onReady,
-                onUpdate,
-            };
-            instanceRef.current = new MasonEffect(container, options);
-            // ResizeObserver로 컨테이너 크기 변경 감지
-            if (typeof ResizeObserver !== 'undefined') {
-                resizeObserver = new ResizeObserver(() => {
-                    if (instanceRef.current) {
-                        instanceRef.current.resize();
-                    }
-                });
-                resizeObserver.observe(container);
-            }
-        };
-        // 다음 프레임에 초기화 (DOM이 완전히 렌더링된 후)
-        requestAnimationFrame(initEffect);
-        return () => {
-            if (initTimeout) {
-                clearTimeout(initTimeout);
-            }
-            if (resizeObserver) {
-                resizeObserver.disconnect();
-            }
-            if (instanceRef.current) {
-                instanceRef.current.destroy();
-                instanceRef.current = null;
-            }
-        };
-    }, []);
-    // props 변경 시 설정 업데이트
-    useEffect(() => {
-        if (!instanceRef.current)
-            return;
-        const { text, densityStep, maxParticles, pointSize, ease, repelRadius, repelStrength, particleColor, fontFamily, fontSize, width, height, devicePixelRatio, } = props;
-        instanceRef.current.updateConfig({
-            text,
-            densityStep,
-            maxParticles,
-            pointSize,
-            ease,
-            repelRadius,
-            repelStrength,
-            particleColor,
-            fontFamily,
-            fontSize,
-            width,
-            height,
-            devicePixelRatio,
-        });
-    }, [
-        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,
-    ]);
-    useImperativeHandle(ref, () => ({
-        morph: (textOrOptions) => {
-            if (!instanceRef.current) {
-                console.warn('MasonEffect: 인스턴스가 아직 초기화되지 않았습니다.');
-                return;
-            }
-            instanceRef.current.morph(textOrOptions);
-        },
-        scatter: () => {
-            if (!instanceRef.current) {
-                console.warn('MasonEffect: 인스턴스가 아직 초기화되지 않았습니다.');
-                return;
-            }
-            instanceRef.current.scatter();
-        },
-        updateConfig: (config) => {
-            if (!instanceRef.current) {
-                console.warn('MasonEffect: 인스턴스가 아직 초기화되지 않았습니다.');
-                return;
-            }
-            instanceRef.current.updateConfig(config);
-        },
-        destroy: () => {
-            if (instanceRef.current) {
-                instanceRef.current.destroy();
-                instanceRef.current = null;
-            }
-        },
-    }));
-    // 기본 스타일: 컨테이너가 크기를 가지도록 함
-    const defaultStyle = {
-        width: '100%',
-        height: '100%',
-        minHeight: props.height || 400,
-        position: 'relative',
-        ...props.style,
-    };
-    return (React.createElement("div", { ref: containerRef, className: props.className, style: defaultStyle }));
-});
-MasonEffectComponent.displayName = 'MasonEffect';
-
-export { MasonEffectComponent as default };

package/src/index.ts

@@ -1,14 +0,0 @@
-/**
- * MasonEffect - 메인 엔트리 포인트
- */
-
-import MasonEffect from './core/index.js';
-
-// Named export (ES modules, CommonJS용)
-export { MasonEffect };
-export type { MasonEffectOptions, Particle } from './core/index.js';
-
-// Default export (UMD 빌드에서 전역 변수로 직접 노출됨)
-// CDN 사용 시: new MasonEffect()로 직접 사용 가능
-export default MasonEffect;
-

package/src/index.umd.ts

@@ -1,10 +0,0 @@
-/**
- * MasonEffect - UMD 전용 엔트리 포인트
- * CDN 사용 시: new MasonEffect()로 직접 사용 가능
- */
-
-import MasonEffect from './core/index.js';
-
-// Default export만 사용 (UMD 빌드에서 전역 변수로 직접 노출됨)
-export default MasonEffect;
-