feat: Add external control for editor visibility
- 에디터 표시 여부를 외부에서 제어할 수 있도록 `showEditor` prop 추가 - `DistortionEditor` 컴포넌트에서 내부 `showEditor` 상태 제거 - `package.json` 버전 1.0.2에서 1.0.3으로 업데이트
This commit is contained in:
parent
0af2287a50
commit
6babf68c71
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@baekryang/responsive-image-canvas",
|
||||
"version": "1.0.2",
|
||||
"version": "1.0.3",
|
||||
"publishConfig": {
|
||||
"registry": "https://git.bnovalab.com/api/packages/baekryang/npm/"
|
||||
},
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import React, { useEffect } from 'react';
|
||||
import { DistortionArea } from '../types/area';
|
||||
import { DistortionEditorProps } from './types';
|
||||
import { useDistortionEditor } from './hooks/useDistortionEditor';
|
||||
@ -15,6 +15,7 @@ export const DistortionEditor: React.FC<DistortionEditorProps> = ({
|
||||
width = 800,
|
||||
height = 600,
|
||||
canvasStyle,
|
||||
showEditor = true,
|
||||
}) => {
|
||||
const {
|
||||
state,
|
||||
@ -28,9 +29,6 @@ export const DistortionEditor: React.FC<DistortionEditorProps> = ({
|
||||
getSelectedArea,
|
||||
} = useDistortionEditor(initialAreas);
|
||||
|
||||
// 에디터 모드 토글 상태
|
||||
const [showEditor, setShowEditor] = useState(true);
|
||||
|
||||
// 영역 변경 시 콜백 호출
|
||||
useEffect(() => {
|
||||
onAreasChange?.(state.areas);
|
||||
@ -75,17 +73,6 @@ export const DistortionEditor: React.FC<DistortionEditorProps> = ({
|
||||
|
||||
return (
|
||||
<div className="distortion-editor">
|
||||
{/* 에디터 모드 토글 버튼 */}
|
||||
<div className="editor-toolbar">
|
||||
<button
|
||||
className={`editor-toggle-btn ${showEditor ? 'active' : ''}`}
|
||||
onClick={() => setShowEditor(!showEditor)}
|
||||
title={showEditor ? '에디터 숨기기 (왜곡 효과만 보기)' : '에디터 표시'}
|
||||
>
|
||||
{showEditor ? '👁️ 에디터 숨기기' : '✏️ 에디터 표시'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="editor-main">
|
||||
{/* 왼쪽: 캔버스 */}
|
||||
<div className="editor-canvas-container">
|
||||
|
||||
@ -134,4 +134,6 @@ export interface DistortionEditorProps {
|
||||
height?: number;
|
||||
/** 에디터 캔버스 스타일 커스터마이징 */
|
||||
canvasStyle?: EditorCanvasStyle;
|
||||
/** 에디터 표시 여부 (외부에서 제어) */
|
||||
showEditor?: boolean;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user