24 Commits

Author SHA1 Message Date
BaekRyang
48fdd5e17c Add sprite particle effects and improve lens distortion
- 스프라이트 기반 파티클 이펙트 관리 기능 추가 (SpriteEffectManager)
- 렌즈 왜곡 셰이더 로직 개선 및 픽셀 공간 기준 등방성 확대 적용
- 파티클 최적화를 위한 오브젝트 풀링(SpriteParticlePool) 도입
- DistortionArea 타입에 spriteEffects 설정 필드 추가
- ThreeScene에 씬 객체 접근 기능 및 렌더 순서 제어 추가
- useMouseInteraction 훅에서 마우스 상태 조회 기능 추가
- 버전 1.3.0 업데이트 및 관련 타입 정의 반영
2026-03-10 13:24:12 +09:00
BaekRyang
ecf3e81101 Refactor step easing into independent snapSteps property
- EasingFunction에서 step 옵션을 제거하고 독립적인 snapSteps 속성으로 분리
- AnimationLoop에 snapSteps 기반의 움직임 양자화 로직 구현
- 에디터 파라미터 패널에 움직임 단계 조절 슬라이더 추가
- 기본 설정값에 SNAP_STEPS 추가 및 패키지 버전 업데이트 (1.2.10)
2026-02-25 16:14:46 +09:00
BaekRyang
6d9dd082c1 Add lens effect and step easing functions
- 단계별(Step) 이징 함수 추가 (steps2 ~ steps10)
- 영역별 렌즈 왜곡 효과(볼록/오목) 기능 및 셰이더 로직 추가
- 에디터 파라미터 패널에 렌즈 효과 슬라이더 및 스텝 이징 옵션 추가
- 관련 상수, 타입 정의 및 유니폼 변수 업데이트
- 패키지 버전 업데이트 (1.2.7)
2026-02-25 14:35:45 +09:00
BaekRyang
031230bc36 feat: Improve canvas resizing and animation handling
- EditorCanvas:
  - 컨테이너 크기 측정 로직을 ResizeObserver를 사용하여 개선했습니다.
  - 초기 크기 설정 및 크기 변경 감지 기능을 추가했습니다.
  - 컨테이너의 width, height 스타일을 '100%'로 변경하여 부모 요소에 맞게 조절되도록 했습니다.
- ImageDistortion:
  - isPlaying prop을 제거하고 애니메이션을 항상 실행하도록 변경했습니다.
  - useAnimationFrame의 실행 조건을 항상 true로 설정하여 애니메이션 루프가 안정적으로 동작하도록 했습니다.
- package.json:
  - 버전 정보를 1.2.1에서 1.2.6으로 업데이트했습니다.
2025-11-28 16:37:20 +09:00
BaekRyang
6b6c8d8fd0 feat: Add area selection functionality
- EditorCanvas 컴포넌트에 영역 선택 콜백(onSelectArea) 추가
- 비선택 영역 클릭 시 해당 영역을 선택하는 기능 구현
- 드래그 시작 조건에서 showEditor만 확인하도록 수정 (selectedArea 불필요)
- package.json 버전 1.2.0에서 1.2.1로 업데이트
2025-11-26 13:53:15 +09:00
BaekRyang
317c7c5c92 feat: Add cubic easing and improve oscillation motion
- `src/types/area.ts`: cubic easing 함수 타입 추가
- `package.json`: 버전 1.1.0에서 1.2.0으로 업데이트
- `src/engine/AnimationLoop.ts`: 왕복 모션 로직을 sin 함수 기반으로 개선하여 자연스러운 좌우/상하 왕복 구현
- `src/utils/easing.ts`: easeInCubic, easeOutCubic 함수 추가
2025-11-26 13:48:21 +09:00
BaekRyang
4db9839f28 feat: Add motion preset registration API
- 모션 프리셋을 동적으로 등록하고 관리할 수 있는 API를 추가했습니다.
- `registerMotionPreset`, `registerMotionPresets`, `unregisterMotionPreset`, `getRegisteredPresets`, `hasPreset`, `resetToBuiltInPresets` 함수를 제공합니다.
- `MotionPreset` 타입을 `BuiltInMotionPreset`과 사용자 정의 문자열을 포함하도록 확장했습니다.
- `MotionPresetDefinition` 타입을 추가하여 커스텀 프리셋 정의 방식을 명확히 했습니다.
2025-11-26 11:05:36 +09:00
BaekRyang
5f6e780b40 feat: Add AreaList and ParameterPanel components
- 영역 목록과 파라미터 편집 패널을 추가하여 왜곡 영역 관리를 개선했습니다.
- 각 영역의 강도, 애니메이션 지속 시간, 이징 함수 등을 조절할 수 있습니다.
- 새 영역 추가 및 기존 영역 삭제 기능을 제공합니다.
2025-11-24 15:16:48 +09:00
BaekRyang
e08f34caab feat: Add per-area physics configuration
- 영역별 물리 설정 `physics` 옵션을 추가했습니다.
- `useMouseInteraction` 훅에서 영역별 물리 설정을 적용하도록 수정했습니다.
- `ImageDistortion` 컴포넌트에서 `selectedAreaId` prop을 제거하고, 마우스 인터랙션 시 `interactingAreaIndices`를 활용하도록 변경했습니다.
- 셰이더에서 텍스처 좌표가 범위를 벗어날 때 부드럽게 페이드 아웃되도록 수정했습니다.
2025-11-24 14:23:06 +09:00
BaekRyang
61952ce79c feat: Add selectedAreaId prop to ImageDistortion
- 선택된 영역 ID를 ImageDistortion 컴포넌트에 추가했습니다.
- selectedAreaId prop을 통해 특정 영역의 자동 애니메이션을 제외할 수 있습니다.
- ImageDistortion 컴포넌트의 animationCallback 로직을 수정하여 selectedAreaId를 반영했습니다.
2025-11-24 14:09:05 +09:00
BaekRyang
4bdae13f7f feat: Add isDragging hook to mouse interaction
- useMouseInteraction 훅에 isDragging 함수를 추가했습니다.
- ImageDistortion 컴포넌트의 애니메이션 콜백에서 마우스 드래그 상태를 감지하여,
  드래그 중일 때는 자동 애니메이션의 dragVector를 0으로 설정하도록 로직을 개선했습니다.
2025-11-24 13:48:06 +09:00
BaekRyang
f6ad8b11b0 feat: Add motion presets for distortion animations
- 왜곡 애니메이션에 사용할 수 있는 다양한 모션 프리셋(horizontal, vertical, rotate-cw 등)을 추가했습니다.
- `DistortionMovement` 인터페이스에 `preset`과 `strength` 옵션을 추가하여 모션 프리셋을 설정할 수 있도록 변경했습니다.
- `presetToVector` 함수와 `isRotationPreset` 함수를 추가하여 모션 프리셋 로직을 구현했습니다.
- `AnimationLoop` 클래스에서 모션 프리셋을 적용하여 `vectorA`를 계산하도록 수정했습니다.
2025-11-24 13:41:36 +09:00
BaekRyang
bbbb49aa1d feat: Update package version and description
- `package.json` 파일에서 패키지 버전이 1.0.0에서 1.0.1로 업데이트되었습니다.
- 패키지 이름이 `@baekryang/responsive-image-canvas`로 변경되었습니다.
- `publishConfig`에 npm 레지스트리 주소가 추가되었습니다.
- `.gitignore` 파일에 `demo.npmrc` 파일이 추가되어 불필요한 파일이 추적되지 않도록 수정되었습니다.
2025-11-24 13:27:11 +09:00
BaekRyang
d2e83ac9a5 feat: 마우스 드래그 및 터치 이벤트 처리 개선
- 캔버스 드래그 시 스크롤 방지 로직 추가
- 마우스/터치 이벤트 핸들러 통합 및 개선
- 이벤트 리스너 등록/제거 로직 최적화
2025-11-06 09:23:10 +09:00
BaekRyang
ddcf8b463a feat: Improve mouse interaction to affect multiple areas
- 마우스가 닿는 모든 영역에 왜곡 효과가 적용되도록 수정했습니다.
- 기존에는 마우스가 처음 닿는 단일 영역에만 효과가 적용되었으나, 이제는 마우스 커서가 영역을 벗어나도 해당 영역에 대한 스프링 물리 효과가 유지되도록 변경되었습니다.
- `useMouseInteraction` 훅에서 `interactingAreaIndex` 대신 `interactingAreaIndices` (Set)를 사용하여 여러 영역을 동시에 추적합니다.
- 영역 진입 시 스프링이 리셋되고, 영역 이탈 시 평형 상태로 복귀하는 로직이 추가되었습니다.
2025-11-05 15:31:11 +09:00
BaekRyang
7f6a72c058 feat: Add mouse interaction for physics-based distortion
- 마우스 움직임에 따라 왜곡 영역이 튕기는 효과를 추가했습니다.
- `useMouseVelocity` 훅을 사용하여 마우스 속도와 가속도를 추적합니다.
- `SpringPhysics` 클래스를 구현하여 스프링 기반 물리 효과를 시뮬레이션합니다.
- `useMouseInteraction` 훅은 마우스 이벤트를 감지하고 `SpringPhysics`를 제어하여 왜곡 영역의 `dragVector`를 업데이트합니다.
- `ImageDistortion` 컴포넌트에서 `mouseInteraction` prop을 통해 이 기능을 활성화/설정할 수 있습니다.
2025-11-05 14:56:36 +09:00
BaekRyang
fed9dc7606 feat: Add editor UI toggle functionality
- 캔버스 편집 UI 표시/숨김 기능을 추가했습니다.
- 에디터 툴바에 토글 버튼을 추가하여 UI 표시 상태를 제어할 수 있습니다.
- 에디터 UI가 숨겨졌을 때 캔버스에 마우스 이벤트가 전달되지 않도록 수정했습니다.
2025-11-05 11:52:33 +09:00
BaekRyang
0c3c0b606e feat: Add canvas style customization
- 왜곡 영역 원 레벨 스타일, 중심점, 포인트 핸들, 영역 외곽선 등
  캔버스 스타일을 커스터마이징할 수 있도록 `EditorCanvasStyle` 타입을
  추가했습니다.
- `DistortionEditorProps`에 `canvasStyle` prop을 추가하여
  외부에서 캔버스 스타일을 전달받을 수 있도록 했습니다.
- `EditorCanvas` 컴포넌트에서 `useMemo`를 사용하여
  기본 스타일과 사용자 정의 스타일을 병합하고, 이를 렌더링에
  반영하도록 수정했습니다.
2025-11-05 11:48:05 +09:00
BaekRyang
e66b078dd8 build: Update compiled distribution files
- Update CJS and ESM bundles with coordinate system fixes
- Update type definitions (d.ts, d.mts)
- Add editor styles (CSS)
- Update shader files
- Update source maps
2025-11-05 11:20:53 +09:00
BaekRyang
e371321fd2 feat: Fix image distortion shader and improve loading state
- Fix distortion.frag.glsl to match Flutter original implementation
  - Update computeUV function with single Newton-Raphson iteration
  - Fix coordinate transformation (normalized to pixel)
  - Fix distortion application logic
  - Add break after first matching area (Flutter behavior)

- Add image loading state management
  - Add imageLoaded state
  - Add loading progress callback
  - Add loading UI indicator
  - Improve error handling

- Add comprehensive debug logging
  - ShaderManager: fetch status and shader lengths
  - ThreeScene: shader compilation check, render calls
  - ImageDistortion: lifecycle and loading status

- Add test/debug shaders for troubleshooting
  - test.frag.glsl: Simple pass-through shader
  - debug.frag.glsl: Area visualization shader

- Fix infinite loop bug in animationCallback
  - Use setState updater function to avoid dependency

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-04 11:51:39 +09:00
BaekRyang
c3b5aaadcb Debug: Add more detailed logging for containerRef 2025-11-04 10:55:43 +09:00
BaekRyang
d66c43f6f1 Debug: Add console logs for troubleshooting 2025-11-04 10:49:38 +09:00
BaekRyang
05b47fb177 Fix: Resolve infinite loop in animationCallback using setState with updater function 2025-11-04 10:45:44 +09:00
BaekRyang
6ddae08d86 init dist 2025-11-04 10:17:17 +09:00