masoneffect 0.1.18 → 0.1.20

package/src/react/MasonEffect.tsx

@@ -1,228 +0,0 @@
-import React, { useEffect, useRef, forwardRef, useImperativeHandle } from 'react';
-import { MasonEffect } from '../core/index.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;
-  onReady?: (instance: MasonEffect) => void;
-  onUpdate?: (instance: MasonEffect) => void;
-}
-
-export interface MasonEffectRef {
-  morph: (textOrOptions?: string | Partial<MasonEffectOptions>) => void;
-  scatter: () => void;
-  updateConfig: (config: Partial<MasonEffectOptions>) => void;
-  destroy: () => void;
-}
-
-interface MasonEffectProps extends MasonEffectOptions {
-  className?: string;
-  style?: React.CSSProperties;
-}
-
-const MasonEffectComponent = forwardRef<MasonEffectRef, MasonEffectProps>(
-  (props, ref) => {
-    const containerRef = useRef<HTMLDivElement>(null);
-    const instanceRef = useRef<MasonEffect | null>(null);
-
-    useEffect(() => {
-      if (!containerRef.current) return;
-
-      let resizeObserver: ResizeObserver | null = null;
-      let initTimeout: number | null = 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 {
-          className,
-          style,
-          text,
-          densityStep,
-          maxParticles,
-          pointSize,
-          ease,
-          repelRadius,
-          repelStrength,
-          particleColor,
-          fontFamily,
-          fontSize,
-          width,
-          height,
-          devicePixelRatio,
-          onReady,
-          onUpdate,
-        } = props;
-
-        const options: MasonEffectOptions = {
-          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?: string | Partial<MasonEffectOptions>) => {
-        if (!instanceRef.current) {
-          console.warn('MasonEffect: 인스턴스가 아직 초기화되지 않았습니다.');
-          return;
-        }
-        instanceRef.current.morph(textOrOptions);
-      },
-      scatter: () => {
-        if (!instanceRef.current) {
-          console.warn('MasonEffect: 인스턴스가 아직 초기화되지 않았습니다.');
-          return;
-        }
-        instanceRef.current.scatter();
-      },
-      updateConfig: (config: Partial<MasonEffectOptions>) => {
-        if (!instanceRef.current) {
-          console.warn('MasonEffect: 인스턴스가 아직 초기화되지 않았습니다.');
-          return;
-        }
-        instanceRef.current.updateConfig(config);
-      },
-      destroy: () => {
-        if (instanceRef.current) {
-          instanceRef.current.destroy();
-          instanceRef.current = null;
-        }
-      },
-    }));
-
-    // 기본 스타일: 컨테이너가 크기를 가지도록 함
-    const defaultStyle: React.CSSProperties = {
-      width: '100%',
-      height: '100%',
-      minHeight: props.height || 400,
-      position: 'relative',
-      ...props.style,
-    };
-
-    return (
-      <div
-        ref={containerRef}
-        className={props.className}
-        style={defaultStyle}
-      />
-    );
-  }
-);
-
-MasonEffectComponent.displayName = 'MasonEffect';
-
-export default MasonEffectComponent;
-

package/src/react/index.js

@@ -1,2 +0,0 @@
-export { default, MasonEffectRef, MasonEffectOptions } from './MasonEffect';
-

package/src/vue/MasonEffect.vue

@@ -1,140 +0,0 @@
-<template>
-  <div ref="container" :class="className" :style="style"></div>
-</template>
-
-<script setup lang="ts">
-import { ref, onMounted, onBeforeUnmount, watch } from 'vue';
-import { MasonEffect } from '../core/index';
-import type { MasonEffectOptions } from '../core/index';
-
-interface Props extends Partial<MasonEffectOptions> {
-  className?: string;
-  style?: Record<string, any>;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  text: 'mason effect',
-  densityStep: 2,
-  maxParticles: 3200,
-  pointSize: 0.5,
-  ease: 0.05,
-  repelRadius: 150,
-  repelStrength: 1,
-  particleColor: '#fff',
-  fontFamily: 'Inter, system-ui, Arial',
-  fontSize: null,
-  width: null,
-  height: null,
-  devicePixelRatio: null,
-  className: '',
-  style: () => ({}),
-  onReady: null,
-  onUpdate: null,
-});
-
-const emit = defineEmits<{
-  ready: [instance: MasonEffect];
-  update: [instance: MasonEffect];
-}>();
-
-const container = ref<HTMLElement | null>(null);
-let instance: MasonEffect | null = null;
-
-const init = () => {
-  if (!container.value) return;
-
-  const options: MasonEffectOptions = {
-    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);
-};
-
-// props 변경 감지
-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;
-  }
-});
-
-// 외부에서 사용할 수 있는 메서드 노출
-defineExpose({
-  morph: (textOrOptions?: string | Partial<MasonEffectOptions>) => {
-    if (instance) instance.morph(textOrOptions);
-  },
-  scatter: () => {
-    if (instance) instance.scatter();
-  },
-  updateConfig: (config: Partial<MasonEffectOptions>) => {
-    if (instance) instance.updateConfig(config);
-  },
-  destroy: () => {
-    if (instance) {
-      instance.destroy();
-      instance = null;
-    }
-  },
-});
-</script>