102 lines
4.7 KiB
TypeScript
102 lines
4.7 KiB
TypeScript
import React from 'react';
|
|
import { useCanvasStore } from '../store/canvasStore';
|
|
import type { CodeElement, TextElement, ArrowElement } from '../types';
|
|
import BackgroundPanel from './inspector/BackgroundPanel';
|
|
import CodeInspector from './inspector/CodeInspector';
|
|
import TextInspector from './inspector/TextInspector';
|
|
import ArrowInspector from './inspector/ArrowInspector';
|
|
|
|
const Inspector: React.FC = () => {
|
|
const {
|
|
snap,
|
|
selectedElementId,
|
|
deleteElement,
|
|
duplicateElement,
|
|
moveElementUp,
|
|
moveElementDown,
|
|
} = useCanvasStore();
|
|
|
|
const selectedElement = snap.elements.find(el => el.id === selectedElementId);
|
|
|
|
return (
|
|
<div className="w-80 bg-[#09090b] border-l border-white/5 overflow-y-auto h-full">
|
|
<div className="p-6">
|
|
{selectedElement ? (
|
|
<div className="space-y-6">
|
|
{/* Header with Title and Element Actions */}
|
|
<div className="flex items-center justify-between">
|
|
<h3 className="text-white font-semibold text-sm uppercase tracking-wider">
|
|
{selectedElement.type}
|
|
</h3>
|
|
<div className="flex items-center gap-1">
|
|
<button
|
|
onClick={() => duplicateElement(selectedElement.id)}
|
|
className="p-1.5 hover:bg-white/10 rounded-md text-neutral-400 hover:text-white transition-colors"
|
|
title="Duplicate (⌘D)"
|
|
>
|
|
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
|
|
</svg>
|
|
</button>
|
|
<div className="w-px h-3 bg-white/10 mx-1" />
|
|
<button
|
|
onClick={() => deleteElement(selectedElement.id)}
|
|
className="p-1.5 hover:bg-red-500/10 hover:text-red-500 rounded-md text-neutral-400 transition-colors"
|
|
title="Delete (⌫)"
|
|
>
|
|
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Layer Controls */}
|
|
<div className="grid grid-cols-2 gap-2">
|
|
<button
|
|
onClick={() => moveElementDown(selectedElement.id)}
|
|
className="flex items-center justify-center gap-2 px-3 py-2 bg-white/5 hover:bg-white/10 rounded-lg text-xs font-medium text-neutral-400 hover:text-white transition-colors border border-white/5"
|
|
>
|
|
<svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 14l-7 7m0 0l-7-7m7 7V3" />
|
|
</svg>
|
|
Send Backward
|
|
</button>
|
|
<button
|
|
onClick={() => moveElementUp(selectedElement.id)}
|
|
className="flex items-center justify-center gap-2 px-3 py-2 bg-white/5 hover:bg-white/10 rounded-lg text-xs font-medium text-neutral-400 hover:text-white transition-colors border border-white/5"
|
|
>
|
|
<svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 10l7-7m0 0l7 7m-7-7v18" />
|
|
</svg>
|
|
Bring Forward
|
|
</button>
|
|
</div>
|
|
|
|
<div className="h-px bg-white/5 w-full -mx-2" />
|
|
|
|
{/* Element-specific inspector */}
|
|
<div className="inspector-content">
|
|
{selectedElement.type === 'code' && (
|
|
<CodeInspector element={selectedElement as CodeElement} />
|
|
)}
|
|
{selectedElement.type === 'text' && (
|
|
<TextInspector element={selectedElement as TextElement} />
|
|
)}
|
|
{selectedElement.type === 'arrow' && (
|
|
<ArrowInspector element={selectedElement as ArrowElement} />
|
|
)}
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div className="space-y-6">
|
|
<h3 className="text-white font-semibold text-sm uppercase tracking-wider">Canvas Settings</h3>
|
|
<BackgroundPanel />
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
export default Inspector;
|