e66b078dd8
- 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
1106 lines
36 KiB
JavaScript
1106 lines
36 KiB
JavaScript
// src/components/ImageDistortion.tsx
|
||
import { useEffect as useEffect2, useRef as useRef2, useState, useCallback } from "react";
|
||
import * as THREE2 from "three";
|
||
|
||
// src/engine/ThreeScene.ts
|
||
import * as THREE from "three";
|
||
var ThreeScene = class {
|
||
constructor(container) {
|
||
this.container = container;
|
||
this.mesh = null;
|
||
/**
|
||
* 윈도우 리사이즈 핸들러
|
||
*/
|
||
this.handleResize = () => {
|
||
const width = this.container.clientWidth;
|
||
const height = this.container.clientHeight;
|
||
this.renderer.setSize(width, height);
|
||
this.uniforms.u_resolution.value.set(width, height);
|
||
if (this.mesh) {
|
||
this.render();
|
||
}
|
||
};
|
||
this.scene = new THREE.Scene();
|
||
this.camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);
|
||
this.renderer = new THREE.WebGLRenderer({
|
||
antialias: true,
|
||
alpha: false
|
||
});
|
||
this.renderer.setPixelRatio(window.devicePixelRatio);
|
||
this.container.appendChild(this.renderer.domElement);
|
||
this.uniforms = {
|
||
u_resolution: { value: new THREE.Vector2() },
|
||
u_texture: { value: null },
|
||
u_points: { value: new Float32Array(64) },
|
||
// 32포인트 × 2(x,y)
|
||
u_numAreas: { value: 0 },
|
||
u_dragVectors: { value: new Float32Array(16) },
|
||
// 8벡터 × 2(x,y)
|
||
u_distortionStrengths: { value: new Float32Array(8) }
|
||
};
|
||
this.handleResize();
|
||
window.addEventListener("resize", this.handleResize);
|
||
}
|
||
/**
|
||
* 셰이더 머티리얼 설정
|
||
* @param vertexShader 버텍스 셰이더 소스
|
||
* @param fragmentShader 프래그먼트 셰이더 소스
|
||
*/
|
||
setShaderMaterial(vertexShader, fragmentShader) {
|
||
console.log("[ThreeScene] setShaderMaterial \uD638\uCD9C\uB428");
|
||
console.log("[ThreeScene] vertexShader \uAE38\uC774:", vertexShader.length);
|
||
console.log("[ThreeScene] fragmentShader \uAE38\uC774:", fragmentShader.length);
|
||
const geometry = new THREE.PlaneGeometry(2, 2);
|
||
const material = new THREE.ShaderMaterial({
|
||
uniforms: this.uniforms,
|
||
vertexShader,
|
||
fragmentShader
|
||
});
|
||
console.log("[ThreeScene] ShaderMaterial \uC0DD\uC131\uB428");
|
||
const renderer = this.renderer;
|
||
const testScene = new THREE.Scene();
|
||
const testMesh = new THREE.Mesh(new THREE.PlaneGeometry(1, 1), material);
|
||
testScene.add(testMesh);
|
||
try {
|
||
renderer.compile(testScene, this.camera);
|
||
console.log("[ThreeScene] \uC170\uC774\uB354 \uCEF4\uD30C\uC77C \uC131\uACF5!");
|
||
} catch (e) {
|
||
console.error("[ThreeScene] \uC170\uC774\uB354 \uCEF4\uD30C\uC77C \uC5D0\uB7EC:", e);
|
||
}
|
||
if (this.mesh) {
|
||
this.scene.remove(this.mesh);
|
||
}
|
||
this.mesh = new THREE.Mesh(geometry, material);
|
||
this.scene.add(this.mesh);
|
||
console.log("[ThreeScene] mesh\uB97C \uC52C\uC5D0 \uCD94\uAC00\uD568");
|
||
}
|
||
/**
|
||
* 유니폼 값 업데이트
|
||
* @param updates 업데이트할 유니폼 값들
|
||
*/
|
||
updateUniforms(updates) {
|
||
Object.keys(updates).forEach((key) => {
|
||
const uniformKey = key;
|
||
this.uniforms[uniformKey].value = updates[uniformKey].value;
|
||
});
|
||
}
|
||
/**
|
||
* 씬 렌더링
|
||
*/
|
||
render() {
|
||
console.log("[ThreeScene] render() \uD638\uCD9C\uB428, mesh:", this.mesh);
|
||
this.renderer.render(this.scene, this.camera);
|
||
}
|
||
/**
|
||
* 현재 해상도 가져오기
|
||
*/
|
||
getResolution() {
|
||
return {
|
||
x: this.uniforms.u_resolution.value.x,
|
||
y: this.uniforms.u_resolution.value.y
|
||
};
|
||
}
|
||
/**
|
||
* 리소스 정리
|
||
*/
|
||
dispose() {
|
||
window.removeEventListener("resize", this.handleResize);
|
||
this.renderer.dispose();
|
||
if (this.mesh) {
|
||
this.mesh.geometry.dispose();
|
||
this.mesh.material.dispose();
|
||
}
|
||
if (this.container.contains(this.renderer.domElement)) {
|
||
this.container.removeChild(this.renderer.domElement);
|
||
}
|
||
}
|
||
};
|
||
|
||
// src/engine/ShaderManager.ts
|
||
var ShaderManager = class {
|
||
constructor() {
|
||
this.vertexShaderSource = null;
|
||
this.fragmentShaderSource = null;
|
||
}
|
||
/**
|
||
* 셰이더 파일들을 비동기로 로드
|
||
* @param vertexPath 버텍스 셰이더 파일 경로
|
||
* @param fragmentPath 프래그먼트 셰이더 파일 경로
|
||
* @returns 로드된 셰이더 소스 코드
|
||
*/
|
||
async loadShaders(vertexPath, fragmentPath) {
|
||
console.log("[ShaderManager] loadShaders \uC2DC\uC791:", { vertexPath, fragmentPath });
|
||
try {
|
||
console.log("[ShaderManager] fetch \uC2DC\uC791...");
|
||
const [vertexResponse, fragmentResponse] = await Promise.all([
|
||
fetch(vertexPath),
|
||
fetch(fragmentPath)
|
||
]);
|
||
console.log("[ShaderManager] fetch \uC644\uB8CC:", {
|
||
vertexStatus: vertexResponse.status,
|
||
fragmentStatus: fragmentResponse.status
|
||
});
|
||
if (!vertexResponse.ok) {
|
||
throw new Error(`\uBC84\uD14D\uC2A4 \uC170\uC774\uB354 \uB85C\uB4DC \uC2E4\uD328: ${vertexResponse.statusText}`);
|
||
}
|
||
if (!fragmentResponse.ok) {
|
||
throw new Error(`\uD504\uB798\uADF8\uBA3C\uD2B8 \uC170\uC774\uB354 \uB85C\uB4DC \uC2E4\uD328: ${fragmentResponse.statusText}`);
|
||
}
|
||
console.log("[ShaderManager] text() \uBCC0\uD658 \uC2DC\uC791...");
|
||
this.vertexShaderSource = await vertexResponse.text();
|
||
this.fragmentShaderSource = await fragmentResponse.text();
|
||
console.log("[ShaderManager] \uC170\uC774\uB354 \uB85C\uB4DC \uC644\uB8CC!", {
|
||
vertexLength: this.vertexShaderSource.length,
|
||
fragmentLength: this.fragmentShaderSource.length
|
||
});
|
||
return {
|
||
vertex: this.vertexShaderSource,
|
||
fragment: this.fragmentShaderSource
|
||
};
|
||
} catch (error) {
|
||
console.error("[ShaderManager] \uC170\uC774\uB354 \uB85C\uB4DC \uC2E4\uD328:", error);
|
||
throw new Error("\uC170\uC774\uB354 \uB85C\uB529\uC5D0 \uC2E4\uD328\uD588\uC2B5\uB2C8\uB2E4");
|
||
}
|
||
}
|
||
/**
|
||
* 버텍스 셰이더 소스 코드 반환
|
||
*/
|
||
getVertexShader() {
|
||
if (!this.vertexShaderSource) {
|
||
throw new Error("\uBC84\uD14D\uC2A4 \uC170\uC774\uB354\uAC00 \uB85C\uB4DC\uB418\uC9C0 \uC54A\uC558\uC2B5\uB2C8\uB2E4");
|
||
}
|
||
return this.vertexShaderSource;
|
||
}
|
||
/**
|
||
* 프래그먼트 셰이더 소스 코드 반환
|
||
*/
|
||
getFragmentShader() {
|
||
if (!this.fragmentShaderSource) {
|
||
throw new Error("\uD504\uB798\uADF8\uBA3C\uD2B8 \uC170\uC774\uB354\uAC00 \uB85C\uB4DC\uB418\uC9C0 \uC54A\uC558\uC2B5\uB2C8\uB2E4");
|
||
}
|
||
return this.fragmentShaderSource;
|
||
}
|
||
};
|
||
|
||
// src/utils/easing.ts
|
||
var easingFunctions = {
|
||
linear: (t) => t,
|
||
easeIn: (t) => t * t,
|
||
easeOut: (t) => t * (2 - t),
|
||
easeInOut: (t) => t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t,
|
||
easeInQuad: (t) => t * t,
|
||
easeOutQuad: (t) => t * (2 - t)
|
||
};
|
||
var applyEasing = (progress, easingType) => {
|
||
const clampedProgress = Math.max(0, Math.min(1, progress));
|
||
return easingFunctions[easingType](clampedProgress);
|
||
};
|
||
|
||
// src/engine/AnimationLoop.ts
|
||
var AnimationLoop = class {
|
||
/**
|
||
* 영역들의 드래그 벡터를 현재 진행도에 따라 업데이트
|
||
* @param areas 왜곡 영역 배열
|
||
* @returns 업데이트된 영역 배열
|
||
*/
|
||
static updateAreaDragVectors(areas) {
|
||
return areas.map((area) => {
|
||
const { progress, movement } = area;
|
||
const easedProgress = applyEasing(progress, movement.easing);
|
||
let dragVector;
|
||
if (easedProgress < 0.5) {
|
||
const t = easedProgress * 2;
|
||
dragVector = {
|
||
x: movement.vectorA.x * t,
|
||
y: movement.vectorA.y * t
|
||
};
|
||
} else {
|
||
const t = (easedProgress - 0.5) * 2;
|
||
dragVector = {
|
||
x: movement.vectorA.x * (1 - t),
|
||
y: movement.vectorA.y * (1 - t)
|
||
};
|
||
}
|
||
return {
|
||
...area,
|
||
dragVector
|
||
};
|
||
});
|
||
}
|
||
/**
|
||
* 모든 영역의 진행도를 델타 타임만큼 업데이트
|
||
* @param areas 왜곡 영역 배열
|
||
* @param deltaTime 델타 타임 (초)
|
||
* @returns 업데이트된 영역 배열
|
||
*/
|
||
static updateProgress(areas, deltaTime) {
|
||
return areas.map((area) => {
|
||
let newProgress = area.progress + deltaTime / area.movement.duration;
|
||
newProgress %= 1;
|
||
return {
|
||
...area,
|
||
progress: newProgress
|
||
};
|
||
});
|
||
}
|
||
};
|
||
|
||
// src/hooks/useAnimationFrame.ts
|
||
import { useEffect, useRef } from "react";
|
||
var useAnimationFrame = (callback, isPlaying = true) => {
|
||
const requestRef = useRef(void 0);
|
||
const previousTimeRef = useRef(void 0);
|
||
useEffect(() => {
|
||
if (!isPlaying) return;
|
||
const animate = (time) => {
|
||
if (previousTimeRef.current !== void 0) {
|
||
const deltaTime = (time - previousTimeRef.current) / 1e3;
|
||
callback(deltaTime);
|
||
}
|
||
previousTimeRef.current = time;
|
||
requestRef.current = requestAnimationFrame(animate);
|
||
};
|
||
requestRef.current = requestAnimationFrame(animate);
|
||
return () => {
|
||
if (requestRef.current) {
|
||
cancelAnimationFrame(requestRef.current);
|
||
}
|
||
};
|
||
}, [callback, isPlaying]);
|
||
};
|
||
|
||
// src/utils/constants.ts
|
||
var SHADER_CONFIG = {
|
||
/** 최대 영역 개수 */
|
||
MAX_AREAS: 8,
|
||
/** 최대 포인트 개수 (8영역 × 4포인트) */
|
||
MAX_POINTS: 32,
|
||
/** 최대 드래그 벡터 개수 */
|
||
MAX_DRAG_VECTORS: 8,
|
||
/** 최대 강도 배열 크기 */
|
||
MAX_STRENGTHS: 8
|
||
};
|
||
var ANIMATION_CONFIG = {
|
||
/** 목표 FPS */
|
||
TARGET_FPS: 60,
|
||
/** 델타 타임 (약 16.67ms) */
|
||
DELTA_TIME: 1 / 60
|
||
};
|
||
var DEFAULT_AREA = {
|
||
/** 기본 왜곡 강도 */
|
||
DISTORTION_STRENGTH: 0.5,
|
||
/** 기본 애니메이션 지속 시간 (초) */
|
||
DURATION: 2,
|
||
/** 기본 이징 함수 */
|
||
EASING: "easeInOut",
|
||
/** 기본 벡터 A */
|
||
VECTOR_A: { x: 0.1, y: 0.1 },
|
||
/** 기본 벡터 B */
|
||
VECTOR_B: { x: -0.1, y: -0.1 }
|
||
};
|
||
|
||
// src/components/ImageDistortion.tsx
|
||
import { jsx } from "react/jsx-runtime";
|
||
var ImageDistortion = ({
|
||
imageSrc,
|
||
areas,
|
||
vertexShaderPath,
|
||
fragmentShaderPath,
|
||
isPlaying = true,
|
||
style,
|
||
className
|
||
}) => {
|
||
const containerRef = useRef2(null);
|
||
const sceneRef = useRef2(null);
|
||
const shaderManagerRef = useRef2(new ShaderManager());
|
||
const textureRef = useRef2(null);
|
||
const [isReady, setIsReady] = useState(false);
|
||
const [imageLoaded, setImageLoaded] = useState(false);
|
||
const [currentAreas, setCurrentAreas] = useState(areas);
|
||
useEffect2(() => {
|
||
setCurrentAreas(areas);
|
||
}, [areas]);
|
||
useEffect2(() => {
|
||
console.log("[ImageDistortion] useEffect \uC2E4\uD589, containerRef.current:", containerRef.current);
|
||
if (!containerRef.current) {
|
||
console.warn("[ImageDistortion] containerRef.current\uAC00 null\uC785\uB2C8\uB2E4. \uCEF4\uD3EC\uB10C\uD2B8\uAC00 \uC81C\uB300\uB85C \uB9C8\uC6B4\uD2B8\uB418\uC9C0 \uC54A\uC558\uC2B5\uB2C8\uB2E4.");
|
||
return;
|
||
}
|
||
console.log("[ImageDistortion] \uCD08\uAE30\uD654 \uC2DC\uC791");
|
||
const scene = new ThreeScene(containerRef.current);
|
||
sceneRef.current = scene;
|
||
const vertPath = vertexShaderPath || "/shaders/distortion.vert.glsl";
|
||
const fragPath = fragmentShaderPath || "/shaders/distortion.frag.glsl";
|
||
console.log("[ImageDistortion] \uC170\uC774\uB354 \uB85C\uB4DC \uC2DC\uB3C4:", { vertPath, fragPath });
|
||
shaderManagerRef.current.loadShaders(vertPath, fragPath).then(({ vertex, fragment }) => {
|
||
console.log("[ImageDistortion] \uC170\uC774\uB354 \uB85C\uB4DC \uC131\uACF5");
|
||
scene.setShaderMaterial(vertex, fragment);
|
||
setIsReady(true);
|
||
}).catch((error) => {
|
||
console.error("[ImageDistortion] \uC170\uC774\uB354 \uB85C\uB4DC \uC2E4\uD328:", error);
|
||
});
|
||
return () => {
|
||
scene.dispose();
|
||
if (textureRef.current) {
|
||
textureRef.current.dispose();
|
||
}
|
||
};
|
||
}, [vertexShaderPath, fragmentShaderPath]);
|
||
useEffect2(() => {
|
||
if (!imageSrc || !isReady) {
|
||
console.log("[ImageDistortion] \uC774\uBBF8\uC9C0 \uB85C\uB4DC \uC2A4\uD0B5:", { imageSrc, isReady });
|
||
return;
|
||
}
|
||
console.log("[ImageDistortion] \uC774\uBBF8\uC9C0 \uB85C\uB4DC \uC2DC\uC791:", imageSrc);
|
||
setImageLoaded(false);
|
||
const loader = new THREE2.TextureLoader();
|
||
loader.load(
|
||
imageSrc,
|
||
(texture) => {
|
||
console.log("[ImageDistortion] \uC774\uBBF8\uC9C0 \uB85C\uB4DC \uC131\uACF5!", {
|
||
width: texture.image.width,
|
||
height: texture.image.height
|
||
});
|
||
textureRef.current = texture;
|
||
setImageLoaded(true);
|
||
if (sceneRef.current) {
|
||
sceneRef.current.updateUniforms({
|
||
u_texture: { value: texture }
|
||
});
|
||
sceneRef.current.render();
|
||
console.log("[ImageDistortion] \uD14D\uC2A4\uCC98 \uC5C5\uB370\uC774\uD2B8 \uBC0F \uB80C\uB354\uB9C1 \uC644\uB8CC");
|
||
}
|
||
},
|
||
(progress) => {
|
||
console.log(
|
||
"[ImageDistortion] \uC774\uBBF8\uC9C0 \uB85C\uB529 \uC911...",
|
||
Math.round(progress.loaded / progress.total * 100) + "%"
|
||
);
|
||
},
|
||
(error) => {
|
||
console.error("[ImageDistortion] \uC774\uBBF8\uC9C0 \uB85C\uB4DC \uC2E4\uD328:", error);
|
||
setImageLoaded(false);
|
||
}
|
||
);
|
||
return () => {
|
||
if (textureRef.current) {
|
||
textureRef.current.dispose();
|
||
textureRef.current = null;
|
||
}
|
||
};
|
||
}, [imageSrc, isReady]);
|
||
useEffect2(() => {
|
||
if (!sceneRef.current || !isReady) return;
|
||
const resolution = sceneRef.current.getResolution();
|
||
const points = new Float32Array(SHADER_CONFIG.MAX_POINTS * 2);
|
||
currentAreas.forEach((area, areaIndex) => {
|
||
area.basePoints.forEach((point, pointIndex) => {
|
||
const index = (areaIndex * 4 + pointIndex) * 2;
|
||
points[index] = point.x;
|
||
points[index + 1] = 1 - point.y;
|
||
});
|
||
});
|
||
const dragVectors = new Float32Array(SHADER_CONFIG.MAX_DRAG_VECTORS * 2);
|
||
currentAreas.forEach((area, index) => {
|
||
const baseIndex = index * 2;
|
||
dragVectors[baseIndex] = area.dragVector.x;
|
||
dragVectors[baseIndex + 1] = -area.dragVector.y;
|
||
});
|
||
const strengths = new Float32Array(SHADER_CONFIG.MAX_STRENGTHS);
|
||
currentAreas.forEach((area, index) => {
|
||
strengths[index] = area.distortionStrength;
|
||
});
|
||
sceneRef.current.updateUniforms({
|
||
u_numAreas: { value: currentAreas.length },
|
||
u_points: { value: points },
|
||
u_dragVectors: { value: dragVectors },
|
||
u_distortionStrengths: { value: strengths }
|
||
});
|
||
sceneRef.current.render();
|
||
}, [currentAreas, isReady]);
|
||
const animationCallback = useCallback((deltaTime) => {
|
||
if (!isReady) return;
|
||
setCurrentAreas((prevAreas) => {
|
||
const updatedAreas = AnimationLoop.updateProgress(prevAreas, deltaTime);
|
||
return AnimationLoop.updateAreaDragVectors(updatedAreas);
|
||
});
|
||
}, [isReady]);
|
||
useAnimationFrame(animationCallback, isPlaying);
|
||
return /* @__PURE__ */ jsx(
|
||
"div",
|
||
{
|
||
ref: containerRef,
|
||
style: {
|
||
width: "100%",
|
||
height: "100%",
|
||
position: "relative",
|
||
...style
|
||
},
|
||
className,
|
||
children: !imageLoaded && /* @__PURE__ */ jsx(
|
||
"div",
|
||
{
|
||
style: {
|
||
position: "absolute",
|
||
top: "50%",
|
||
left: "50%",
|
||
transform: "translate(-50%, -50%)",
|
||
background: "rgba(0, 0, 0, 0.7)",
|
||
color: "white",
|
||
padding: "20px",
|
||
borderRadius: "8px",
|
||
zIndex: 999
|
||
},
|
||
children: "\uC774\uBBF8\uC9C0 \uB85C\uB529 \uC911..."
|
||
}
|
||
)
|
||
}
|
||
);
|
||
};
|
||
|
||
// src/editor/DistortionEditor.tsx
|
||
import { useEffect as useEffect4 } from "react";
|
||
|
||
// src/editor/hooks/useDistortionEditor.ts
|
||
import { useState as useState2, useCallback as useCallback2 } from "react";
|
||
var useDistortionEditor = (initialAreas = []) => {
|
||
const [state, setState] = useState2({
|
||
selectedAreaId: initialAreas[0]?.id || null,
|
||
areas: initialAreas,
|
||
editMode: "normal",
|
||
draggingPointIndex: null
|
||
});
|
||
const selectArea = useCallback2((areaId) => {
|
||
setState((prev) => ({ ...prev, selectedAreaId: areaId }));
|
||
}, []);
|
||
const addArea = useCallback2((area) => {
|
||
setState((prev) => ({
|
||
...prev,
|
||
areas: [...prev.areas, area],
|
||
selectedAreaId: area.id
|
||
}));
|
||
}, []);
|
||
const removeArea = useCallback2((areaId) => {
|
||
setState((prev) => {
|
||
const newAreas = prev.areas.filter((a) => a.id !== areaId);
|
||
return {
|
||
...prev,
|
||
areas: newAreas,
|
||
selectedAreaId: prev.selectedAreaId === areaId ? newAreas[0]?.id || null : prev.selectedAreaId
|
||
};
|
||
});
|
||
}, []);
|
||
const updateArea = useCallback2((areaId, updates) => {
|
||
setState((prev) => ({
|
||
...prev,
|
||
areas: prev.areas.map((area) => area.id === areaId ? { ...area, ...updates } : area)
|
||
}));
|
||
}, []);
|
||
const updatePoint = useCallback2((areaId, pointIndex, point) => {
|
||
setState((prev) => ({
|
||
...prev,
|
||
areas: prev.areas.map((area) => {
|
||
if (area.id === areaId) {
|
||
const newPoints = [...area.basePoints];
|
||
newPoints[pointIndex] = point;
|
||
return { ...area, basePoints: newPoints };
|
||
}
|
||
return area;
|
||
})
|
||
}));
|
||
}, []);
|
||
const startDragging = useCallback2((pointIndex) => {
|
||
setState((prev) => ({ ...prev, draggingPointIndex: pointIndex }));
|
||
}, []);
|
||
const stopDragging = useCallback2(() => {
|
||
setState((prev) => ({ ...prev, draggingPointIndex: null }));
|
||
}, []);
|
||
const setEditMode = useCallback2((mode) => {
|
||
setState((prev) => ({ ...prev, editMode: mode }));
|
||
}, []);
|
||
const getSelectedArea = useCallback2(() => {
|
||
return state.areas.find((a) => a.id === state.selectedAreaId) || null;
|
||
}, [state.areas, state.selectedAreaId]);
|
||
return {
|
||
state,
|
||
selectArea,
|
||
addArea,
|
||
removeArea,
|
||
updateArea,
|
||
updatePoint,
|
||
startDragging,
|
||
stopDragging,
|
||
setEditMode,
|
||
getSelectedArea
|
||
};
|
||
};
|
||
|
||
// src/editor/components/EditorCanvas.tsx
|
||
import { useRef as useRef3, useEffect as useEffect3, useState as useState3, useCallback as useCallback3 } from "react";
|
||
import { jsx as jsx2, jsxs } from "react/jsx-runtime";
|
||
var EditorCanvas = ({
|
||
areas,
|
||
selectedAreaId,
|
||
imageSrc,
|
||
width,
|
||
height,
|
||
onUpdatePoint,
|
||
onUpdateArea,
|
||
draggingPointIndex,
|
||
onStartDragging,
|
||
onStopDragging
|
||
}) => {
|
||
const containerRef = useRef3(null);
|
||
const [canvasSize, setCanvasSize] = useState3({ width: 0, height: 0 });
|
||
const [isDraggingArea, setIsDraggingArea] = useState3(false);
|
||
const [dragStartPos, setDragStartPos] = useState3(null);
|
||
useEffect3(() => {
|
||
if (!containerRef.current) return;
|
||
const rect = containerRef.current.getBoundingClientRect();
|
||
setCanvasSize({ width: rect.width, height: rect.height });
|
||
}, [width, height]);
|
||
const selectedArea = areas.find((a) => a.id === selectedAreaId);
|
||
const isPointInPolygon = useCallback3((point, polygon) => {
|
||
let inside = false;
|
||
for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
|
||
const xi = polygon[i].x, yi = polygon[i].y;
|
||
const xj = polygon[j].x, yj = polygon[j].y;
|
||
const intersect = yi > point.y !== yj > point.y && point.x < (xj - xi) * (point.y - yi) / (yj - yi) + xi;
|
||
if (intersect) inside = !inside;
|
||
}
|
||
return inside;
|
||
}, []);
|
||
const handleMouseDown = useCallback3(
|
||
(pointIndex) => (e) => {
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
onStartDragging(pointIndex);
|
||
},
|
||
[onStartDragging]
|
||
);
|
||
const handleCanvasMouseDown = useCallback3(
|
||
(e) => {
|
||
if (!selectedArea || !containerRef.current) return;
|
||
const rect = containerRef.current.getBoundingClientRect();
|
||
const x = (e.clientX - rect.left) / rect.width;
|
||
const y = (e.clientY - rect.top) / rect.height;
|
||
const clickPoint = { x, y };
|
||
if (isPointInPolygon(clickPoint, selectedArea.basePoints)) {
|
||
setIsDraggingArea(true);
|
||
setDragStartPos(clickPoint);
|
||
e.preventDefault();
|
||
}
|
||
},
|
||
[selectedArea, isPointInPolygon]
|
||
);
|
||
const handleMouseMove = useCallback3(
|
||
(e) => {
|
||
if (!selectedArea || !containerRef.current) return;
|
||
const rect = containerRef.current.getBoundingClientRect();
|
||
const x = (e.clientX - rect.left) / rect.width;
|
||
const y = (e.clientY - rect.top) / rect.height;
|
||
if (draggingPointIndex !== null) {
|
||
const clampedX = Math.max(0, Math.min(1, x));
|
||
const clampedY = Math.max(0, Math.min(1, y));
|
||
onUpdatePoint(selectedArea.id, draggingPointIndex, { x: clampedX, y: clampedY });
|
||
} else if (isDraggingArea && dragStartPos) {
|
||
const deltaX = x - dragStartPos.x;
|
||
const deltaY = y - dragStartPos.y;
|
||
const newPoints = selectedArea.basePoints.map((point) => ({
|
||
x: Math.max(0, Math.min(1, point.x + deltaX)),
|
||
y: Math.max(0, Math.min(1, point.y + deltaY))
|
||
}));
|
||
onUpdateArea(selectedArea.id, { basePoints: newPoints });
|
||
setDragStartPos({ x, y });
|
||
}
|
||
},
|
||
[draggingPointIndex, isDraggingArea, dragStartPos, selectedArea, onUpdatePoint, onUpdateArea]
|
||
);
|
||
const handleMouseUp = useCallback3(() => {
|
||
if (draggingPointIndex !== null) {
|
||
onStopDragging();
|
||
}
|
||
if (isDraggingArea) {
|
||
setIsDraggingArea(false);
|
||
setDragStartPos(null);
|
||
}
|
||
}, [draggingPointIndex, isDraggingArea, onStopDragging]);
|
||
useEffect3(() => {
|
||
if (draggingPointIndex !== null || isDraggingArea) {
|
||
window.addEventListener("mouseup", handleMouseUp);
|
||
return () => window.removeEventListener("mouseup", handleMouseUp);
|
||
}
|
||
}, [draggingPointIndex, isDraggingArea, handleMouseUp]);
|
||
const uvToPixel = (u, v, points, canvasWidth, canvasHeight) => {
|
||
const [p0, p1, p2, p3] = points;
|
||
const leftX = p0.x * (1 - u) + p1.x * u;
|
||
const leftY = p0.y * (1 - u) + p1.y * u;
|
||
const rightX = p3.x * (1 - u) + p2.x * u;
|
||
const rightY = p3.y * (1 - u) + p2.y * u;
|
||
const posX = leftX * (1 - v) + rightX * v;
|
||
const posY = leftY * (1 - v) + rightY * v;
|
||
return {
|
||
x: posX * canvasWidth,
|
||
y: posY * canvasHeight
|
||
};
|
||
};
|
||
const drawDistortionCircle = (ctx, points, canvasWidth, canvasHeight) => {
|
||
const segments = 128;
|
||
const centerU = 0.5;
|
||
const centerV = 0.5;
|
||
const maxRadius = 0.5;
|
||
const circlePoints = [];
|
||
for (let i = 0; i <= segments; i++) {
|
||
const theta = i / segments * 2 * Math.PI;
|
||
const u = centerU - maxRadius * Math.sin(theta);
|
||
const v = centerV + maxRadius * Math.cos(theta);
|
||
const pixelPos = uvToPixel(u, v, points, canvasWidth, canvasHeight);
|
||
circlePoints.push(pixelPos);
|
||
}
|
||
ctx.beginPath();
|
||
ctx.moveTo(circlePoints[0].x, circlePoints[0].y);
|
||
for (let i = 1; i < circlePoints.length; i++) {
|
||
ctx.lineTo(circlePoints[i].x, circlePoints[i].y);
|
||
}
|
||
ctx.closePath();
|
||
ctx.strokeStyle = "rgba(255, 200, 0, 0.9)";
|
||
ctx.lineWidth = 3;
|
||
ctx.setLineDash([8, 4]);
|
||
ctx.stroke();
|
||
ctx.setLineDash([]);
|
||
ctx.fillStyle = "rgba(255, 200, 0, 0.12)";
|
||
ctx.fill();
|
||
for (const r of [0.25, 0.375]) {
|
||
const gradientPoints = [];
|
||
for (let i = 0; i <= segments; i++) {
|
||
const theta = i / segments * 2 * Math.PI;
|
||
const u = centerU - r * Math.sin(theta);
|
||
const v = centerV + r * Math.cos(theta);
|
||
const pixelPos = uvToPixel(u, v, points, canvasWidth, canvasHeight);
|
||
gradientPoints.push(pixelPos);
|
||
}
|
||
ctx.beginPath();
|
||
ctx.moveTo(gradientPoints[0].x, gradientPoints[0].y);
|
||
for (let i = 1; i < gradientPoints.length; i++) {
|
||
ctx.lineTo(gradientPoints[i].x, gradientPoints[i].y);
|
||
}
|
||
ctx.closePath();
|
||
const alpha = r / maxRadius;
|
||
ctx.strokeStyle = `rgba(255, 220, 100, ${0.3 * alpha})`;
|
||
ctx.lineWidth = 1;
|
||
ctx.setLineDash([3, 3]);
|
||
ctx.stroke();
|
||
ctx.setLineDash([]);
|
||
}
|
||
const centerPixel = uvToPixel(centerU, centerV, points, canvasWidth, canvasHeight);
|
||
ctx.beginPath();
|
||
ctx.arc(centerPixel.x, centerPixel.y, 5, 0, 2 * Math.PI);
|
||
ctx.fillStyle = "rgba(255, 200, 0, 1)";
|
||
ctx.fill();
|
||
ctx.strokeStyle = "rgba(255, 255, 255, 0.8)";
|
||
ctx.lineWidth = 2;
|
||
ctx.stroke();
|
||
};
|
||
const getCursorStyle = () => {
|
||
if (draggingPointIndex !== null) return "grabbing";
|
||
if (isDraggingArea) return "grabbing";
|
||
return "default";
|
||
};
|
||
return /* @__PURE__ */ jsxs(
|
||
"div",
|
||
{
|
||
ref: containerRef,
|
||
className: "editor-canvas",
|
||
style: { width, height, position: "relative", cursor: getCursorStyle() },
|
||
onMouseDown: handleCanvasMouseDown,
|
||
onMouseMove: handleMouseMove,
|
||
children: [
|
||
/* @__PURE__ */ jsx2(ImageDistortion, { imageSrc, areas, width, height }),
|
||
/* @__PURE__ */ jsx2(
|
||
"svg",
|
||
{
|
||
style: {
|
||
position: "absolute",
|
||
top: 0,
|
||
left: 0,
|
||
width: "100%",
|
||
height: "100%",
|
||
pointerEvents: "none"
|
||
},
|
||
children: areas.map((area) => {
|
||
const isSelected = area.id === selectedAreaId;
|
||
const points = area.basePoints;
|
||
return /* @__PURE__ */ jsx2("g", { children: /* @__PURE__ */ jsx2(
|
||
"polygon",
|
||
{
|
||
points: points.map((p) => `${p.x * canvasSize.width},${p.y * canvasSize.height}`).join(" "),
|
||
fill: "none",
|
||
stroke: isSelected ? "#00aaff" : "#888",
|
||
strokeWidth: isSelected ? 2 : 1,
|
||
strokeDasharray: isSelected ? "0" : "5,5",
|
||
opacity: isSelected ? 1 : 0.5
|
||
}
|
||
) }, area.id);
|
||
})
|
||
}
|
||
),
|
||
selectedArea && canvasSize.width > 0 && /* @__PURE__ */ jsx2(
|
||
"canvas",
|
||
{
|
||
style: {
|
||
position: "absolute",
|
||
top: 0,
|
||
left: 0,
|
||
width: "100%",
|
||
height: "100%",
|
||
pointerEvents: "none"
|
||
},
|
||
width: canvasSize.width,
|
||
height: canvasSize.height,
|
||
ref: (canvas) => {
|
||
if (canvas) {
|
||
const ctx = canvas.getContext("2d");
|
||
if (ctx) {
|
||
ctx.clearRect(0, 0, canvasSize.width, canvasSize.height);
|
||
drawDistortionCircle(ctx, selectedArea.basePoints, canvasSize.width, canvasSize.height);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
),
|
||
selectedArea && selectedArea.basePoints.map((point, index) => /* @__PURE__ */ jsx2(
|
||
"div",
|
||
{
|
||
className: `point-handle ${draggingPointIndex === index ? "dragging" : ""}`,
|
||
style: {
|
||
position: "absolute",
|
||
left: `${point.x * 100}%`,
|
||
top: `${point.y * 100}%`,
|
||
transform: "translate(-50%, -50%)",
|
||
width: 16,
|
||
height: 16,
|
||
borderRadius: "50%",
|
||
backgroundColor: "#00aaff",
|
||
border: "2px solid white",
|
||
cursor: "grab",
|
||
pointerEvents: "auto",
|
||
boxShadow: "0 2px 4px rgba(0,0,0,0.3)"
|
||
},
|
||
onMouseDown: handleMouseDown(index),
|
||
children: /* @__PURE__ */ jsxs(
|
||
"div",
|
||
{
|
||
style: {
|
||
position: "absolute",
|
||
top: -24,
|
||
left: "50%",
|
||
transform: "translateX(-50%)",
|
||
fontSize: 11,
|
||
color: "#00aaff",
|
||
fontWeight: "bold",
|
||
textShadow: "1px 1px 2px rgba(0,0,0,0.8)",
|
||
whiteSpace: "nowrap"
|
||
},
|
||
children: [
|
||
"P",
|
||
index + 1
|
||
]
|
||
}
|
||
)
|
||
},
|
||
index
|
||
))
|
||
]
|
||
}
|
||
);
|
||
};
|
||
|
||
// src/editor/components/AreaList.tsx
|
||
import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
|
||
var AreaList = ({
|
||
areas,
|
||
selectedAreaId,
|
||
onSelectArea,
|
||
onRemoveArea,
|
||
onAddArea
|
||
}) => {
|
||
return /* @__PURE__ */ jsxs2("div", { className: "area-list", children: [
|
||
/* @__PURE__ */ jsxs2("div", { className: "area-list-header", children: [
|
||
/* @__PURE__ */ jsx3("h3", { children: "\uC65C\uACE1 \uC601\uC5ED" }),
|
||
/* @__PURE__ */ jsx3(
|
||
"button",
|
||
{
|
||
onClick: onAddArea,
|
||
disabled: areas.length >= 8,
|
||
className: "btn-add",
|
||
title: areas.length >= 8 ? "\uCD5C\uB300 8\uAC1C \uC601\uC5ED\uAE4C\uC9C0 \uC9C0\uC6D0" : "\uC0C8 \uC601\uC5ED \uCD94\uAC00",
|
||
children: "+ \uCD94\uAC00"
|
||
}
|
||
)
|
||
] }),
|
||
/* @__PURE__ */ jsx3("div", { className: "area-list-items", children: areas.length === 0 ? /* @__PURE__ */ jsx3("div", { className: "area-list-empty", children: "\uC601\uC5ED\uC774 \uC5C6\uC2B5\uB2C8\uB2E4. + \uCD94\uAC00 \uBC84\uD2BC\uC744 \uB20C\uB7EC\uC8FC\uC138\uC694." }) : areas.map((area, index) => /* @__PURE__ */ jsxs2(
|
||
"div",
|
||
{
|
||
className: `area-item ${selectedAreaId === area.id ? "selected" : ""}`,
|
||
onClick: () => onSelectArea(area.id),
|
||
children: [
|
||
/* @__PURE__ */ jsxs2("div", { className: "area-item-info", children: [
|
||
/* @__PURE__ */ jsxs2("span", { className: "area-item-name", children: [
|
||
"\uC601\uC5ED ",
|
||
index + 1
|
||
] }),
|
||
/* @__PURE__ */ jsxs2("span", { className: "area-item-strength", children: [
|
||
"\uAC15\uB3C4: ",
|
||
(area.distortionStrength * 100).toFixed(0),
|
||
"%"
|
||
] })
|
||
] }),
|
||
/* @__PURE__ */ jsx3(
|
||
"button",
|
||
{
|
||
onClick: (e) => {
|
||
e.stopPropagation();
|
||
onRemoveArea(area.id);
|
||
},
|
||
className: "btn-remove",
|
||
title: "\uC601\uC5ED \uC0AD\uC81C",
|
||
children: "\xD7"
|
||
}
|
||
)
|
||
]
|
||
},
|
||
area.id
|
||
)) })
|
||
] });
|
||
};
|
||
|
||
// src/editor/components/ParameterPanel.tsx
|
||
import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
|
||
var EASING_OPTIONS = [
|
||
{ value: "linear", label: "\uC120\uD615 (Linear)" },
|
||
{ value: "easeIn", label: "\uAC00\uC18D (Ease In)" },
|
||
{ value: "easeOut", label: "\uAC10\uC18D (Ease Out)" },
|
||
{ value: "easeInOut", label: "\uAC00\uAC10\uC18D (Ease In Out)" },
|
||
{ value: "easeInQuad", label: "\uAC00\uC18D\xB2 (Ease In Quad)" },
|
||
{ value: "easeOutQuad", label: "\uAC10\uC18D\xB2 (Ease Out Quad)" }
|
||
];
|
||
var ParameterPanel = ({ area, onUpdateArea }) => {
|
||
if (!area) {
|
||
return /* @__PURE__ */ jsx4("div", { className: "parameter-panel", children: /* @__PURE__ */ jsx4("div", { className: "parameter-panel-empty", children: "\uC601\uC5ED\uC744 \uC120\uD0DD\uD574\uC8FC\uC138\uC694" }) });
|
||
}
|
||
return /* @__PURE__ */ jsxs3("div", { className: "parameter-panel", children: [
|
||
/* @__PURE__ */ jsx4("h3", { children: "\uD30C\uB77C\uBBF8\uD130 \uD3B8\uC9D1" }),
|
||
/* @__PURE__ */ jsxs3("div", { className: "parameter-group", children: [
|
||
/* @__PURE__ */ jsxs3("label", { children: [
|
||
"\uC65C\uACE1 \uAC15\uB3C4: ",
|
||
(area.distortionStrength * 100).toFixed(0),
|
||
"%"
|
||
] }),
|
||
/* @__PURE__ */ jsx4(
|
||
"input",
|
||
{
|
||
type: "range",
|
||
min: "0",
|
||
max: "1",
|
||
step: "0.01",
|
||
value: area.distortionStrength,
|
||
onChange: (e) => onUpdateArea({ distortionStrength: parseFloat(e.target.value) }),
|
||
className: "slider"
|
||
}
|
||
)
|
||
] }),
|
||
/* @__PURE__ */ jsxs3("div", { className: "parameter-group", children: [
|
||
/* @__PURE__ */ jsxs3("label", { children: [
|
||
"\uC9C0\uC18D \uC2DC\uAC04: ",
|
||
area.movement.duration.toFixed(1),
|
||
"\uCD08"
|
||
] }),
|
||
/* @__PURE__ */ jsx4(
|
||
"input",
|
||
{
|
||
type: "number",
|
||
min: "0.1",
|
||
max: "10",
|
||
step: "0.1",
|
||
value: area.movement.duration,
|
||
onChange: (e) => onUpdateArea({
|
||
movement: { ...area.movement, duration: parseFloat(e.target.value) }
|
||
}),
|
||
className: "input-number"
|
||
}
|
||
)
|
||
] }),
|
||
/* @__PURE__ */ jsxs3("div", { className: "parameter-group", children: [
|
||
/* @__PURE__ */ jsx4("label", { children: "\uC774\uC9D5 \uD568\uC218" }),
|
||
/* @__PURE__ */ jsx4(
|
||
"select",
|
||
{
|
||
value: area.movement.easing,
|
||
onChange: (e) => onUpdateArea({
|
||
movement: { ...area.movement, easing: e.target.value }
|
||
}),
|
||
className: "select",
|
||
children: EASING_OPTIONS.map((option) => /* @__PURE__ */ jsx4("option", { value: option.value, children: option.label }, option.value))
|
||
}
|
||
)
|
||
] }),
|
||
/* @__PURE__ */ jsxs3("div", { className: "parameter-group", children: [
|
||
/* @__PURE__ */ jsxs3("label", { children: [
|
||
"\uBCA1\uD130 X: ",
|
||
area.movement.vectorA.x.toFixed(2)
|
||
] }),
|
||
/* @__PURE__ */ jsx4(
|
||
"input",
|
||
{
|
||
type: "range",
|
||
min: "-1",
|
||
max: "1",
|
||
step: "0.01",
|
||
value: area.movement.vectorA.x,
|
||
onChange: (e) => onUpdateArea({
|
||
movement: {
|
||
...area.movement,
|
||
vectorA: { ...area.movement.vectorA, x: parseFloat(e.target.value) }
|
||
}
|
||
}),
|
||
className: "slider"
|
||
}
|
||
)
|
||
] }),
|
||
/* @__PURE__ */ jsxs3("div", { className: "parameter-group", children: [
|
||
/* @__PURE__ */ jsxs3("label", { children: [
|
||
"\uBCA1\uD130 Y: ",
|
||
area.movement.vectorA.y.toFixed(2)
|
||
] }),
|
||
/* @__PURE__ */ jsx4(
|
||
"input",
|
||
{
|
||
type: "range",
|
||
min: "-1",
|
||
max: "1",
|
||
step: "0.01",
|
||
value: area.movement.vectorA.y,
|
||
onChange: (e) => onUpdateArea({
|
||
movement: {
|
||
...area.movement,
|
||
vectorA: { ...area.movement.vectorA, y: parseFloat(e.target.value) }
|
||
}
|
||
}),
|
||
className: "slider"
|
||
}
|
||
)
|
||
] }),
|
||
/* @__PURE__ */ jsxs3("div", { className: "parameter-group", children: [
|
||
/* @__PURE__ */ jsx4("label", { children: "\uD3EC\uC778\uD2B8 \uC88C\uD45C (\uCE94\uBC84\uC2A4\uC5D0\uC11C \uB4DC\uB798\uADF8)" }),
|
||
/* @__PURE__ */ jsx4("div", { className: "points-display", children: area.basePoints.map((point, idx) => /* @__PURE__ */ jsxs3("div", { className: "point-coord", children: [
|
||
"P",
|
||
idx + 1,
|
||
": (",
|
||
point.x.toFixed(3),
|
||
", ",
|
||
point.y.toFixed(3),
|
||
")"
|
||
] }, idx)) })
|
||
] })
|
||
] });
|
||
};
|
||
|
||
// src/editor/DistortionEditor.tsx
|
||
import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
|
||
var DistortionEditor = ({
|
||
initialAreas = [],
|
||
imageSrc,
|
||
onAreasChange,
|
||
onSelectedAreaChange,
|
||
width = 800,
|
||
height = 600
|
||
}) => {
|
||
const {
|
||
state,
|
||
selectArea,
|
||
addArea,
|
||
removeArea,
|
||
updateArea,
|
||
updatePoint,
|
||
startDragging,
|
||
stopDragging,
|
||
getSelectedArea
|
||
} = useDistortionEditor(initialAreas);
|
||
useEffect4(() => {
|
||
onAreasChange?.(state.areas);
|
||
}, [state.areas, onAreasChange]);
|
||
useEffect4(() => {
|
||
onSelectedAreaChange?.(state.selectedAreaId);
|
||
}, [state.selectedAreaId, onSelectedAreaChange]);
|
||
const handleAddArea = () => {
|
||
const newArea = {
|
||
id: `area-${Date.now()}`,
|
||
basePoints: [
|
||
{ x: 0.3, y: 0.3 },
|
||
{ x: 0.7, y: 0.3 },
|
||
{ x: 0.7, y: 0.7 },
|
||
{ x: 0.3, y: 0.7 }
|
||
],
|
||
movement: {
|
||
vectorA: { x: DEFAULT_AREA.VECTOR_A.x, y: DEFAULT_AREA.VECTOR_A.y },
|
||
vectorB: { x: DEFAULT_AREA.VECTOR_B.x, y: DEFAULT_AREA.VECTOR_B.y },
|
||
duration: DEFAULT_AREA.DURATION,
|
||
easing: DEFAULT_AREA.EASING
|
||
},
|
||
distortionStrength: DEFAULT_AREA.DISTORTION_STRENGTH,
|
||
progress: 0,
|
||
dragVector: { x: 0, y: 0 }
|
||
};
|
||
addArea(newArea);
|
||
};
|
||
const handleUpdateArea = (updates) => {
|
||
if (state.selectedAreaId) {
|
||
updateArea(state.selectedAreaId, updates);
|
||
}
|
||
};
|
||
const selectedArea = getSelectedArea();
|
||
return /* @__PURE__ */ jsx5("div", { className: "distortion-editor", children: /* @__PURE__ */ jsxs4("div", { className: "editor-main", children: [
|
||
/* @__PURE__ */ jsx5("div", { className: "editor-canvas-container", children: /* @__PURE__ */ jsx5(
|
||
EditorCanvas,
|
||
{
|
||
areas: state.areas,
|
||
selectedAreaId: state.selectedAreaId,
|
||
imageSrc,
|
||
width,
|
||
height,
|
||
onUpdatePoint: updatePoint,
|
||
onUpdateArea: updateArea,
|
||
draggingPointIndex: state.draggingPointIndex,
|
||
onStartDragging: startDragging,
|
||
onStopDragging: stopDragging
|
||
}
|
||
) }),
|
||
/* @__PURE__ */ jsxs4("div", { className: "editor-sidebar", children: [
|
||
/* @__PURE__ */ jsx5(
|
||
AreaList,
|
||
{
|
||
areas: state.areas,
|
||
selectedAreaId: state.selectedAreaId,
|
||
onSelectArea: selectArea,
|
||
onRemoveArea: removeArea,
|
||
onAddArea: handleAddArea
|
||
}
|
||
),
|
||
/* @__PURE__ */ jsx5(ParameterPanel, { area: selectedArea, onUpdateArea: handleUpdateArea })
|
||
] })
|
||
] }) });
|
||
};
|
||
export {
|
||
ANIMATION_CONFIG,
|
||
AnimationLoop,
|
||
DEFAULT_AREA,
|
||
DistortionEditor,
|
||
ImageDistortion,
|
||
SHADER_CONFIG,
|
||
ShaderManager,
|
||
ThreeScene,
|
||
applyEasing,
|
||
useAnimationFrame,
|
||
useDistortionEditor
|
||
};
|
||
//# sourceMappingURL=index.mjs.map
|