feat: add background panel for solid and gradient backgrounds
feat: implement code inspector with language detection and theme selection feat: create text inspector for text properties and styling style: add global styles and custom scrollbar for better UI chore: initialize main entry point for the application feat: set up Zustand store for canvas state management feat: define types for canvas elements and background options feat: implement code highlighting utility with language detection chore: configure TypeScript settings for the project chore: set up Vite configuration for React and Tailwind CSS
This commit is contained in:
@@ -0,0 +1,214 @@
|
||||
import React, { useRef, useState, useEffect, useCallback } from 'react';
|
||||
import { Stage, Layer, Rect, Line } from 'react-konva';
|
||||
import type Konva from 'konva';
|
||||
import { useCanvasStore, createCodeElement, createTextElement, createArrowElement } from '../store/canvasStore';
|
||||
import CodeBlock from './elements/CodeBlock';
|
||||
import TextBlock from './elements/TextBlock';
|
||||
import Arrow from './elements/Arrow';
|
||||
import type { CodeElement, TextElement, ArrowElement } from '../types';
|
||||
|
||||
interface CanvasProps {
|
||||
stageRef: React.RefObject<Konva.Stage | null>;
|
||||
}
|
||||
|
||||
const Canvas: React.FC<CanvasProps> = ({ stageRef }) => {
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
const [dimensions, setDimensions] = useState({ width: window.innerWidth, height: window.innerHeight - 120 });
|
||||
const {
|
||||
snap,
|
||||
zoom,
|
||||
showGrid,
|
||||
tool,
|
||||
selectedElementId,
|
||||
selectElement,
|
||||
addElement,
|
||||
updateElement,
|
||||
} = useCanvasStore();
|
||||
|
||||
const { width, height } = snap.meta;
|
||||
const { background } = snap;
|
||||
|
||||
// Handle resize
|
||||
useEffect(() => {
|
||||
const updateDimensions = () => {
|
||||
if (containerRef.current) {
|
||||
setDimensions({
|
||||
width: containerRef.current.offsetWidth,
|
||||
height: containerRef.current.offsetHeight,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
updateDimensions();
|
||||
window.addEventListener('resize', updateDimensions);
|
||||
return () => window.removeEventListener('resize', updateDimensions);
|
||||
}, []);
|
||||
|
||||
// Calculate stage position to center the canvas
|
||||
const getStagePosition = useCallback(() => {
|
||||
const scaledWidth = width * zoom;
|
||||
const scaledHeight = height * zoom;
|
||||
return {
|
||||
x: Math.max(20, (dimensions.width - scaledWidth) / 2),
|
||||
y: Math.max(20, (dimensions.height - scaledHeight) / 2),
|
||||
};
|
||||
}, [width, height, zoom, dimensions]);
|
||||
|
||||
const handleStageClick = (e: Konva.KonvaEventObject<MouseEvent>) => {
|
||||
const clickedOnEmpty = e.target === e.target.getStage() || e.target.name() === 'background';
|
||||
|
||||
if (clickedOnEmpty) {
|
||||
const stage = e.target.getStage();
|
||||
if (!stage) return;
|
||||
|
||||
const pos = stage.getPointerPosition();
|
||||
if (!pos) return;
|
||||
|
||||
// Convert screen position to canvas position
|
||||
const stagePos = getStagePosition();
|
||||
const canvasX = (pos.x - stagePos.x) / zoom;
|
||||
const canvasY = (pos.y - stagePos.y) / zoom;
|
||||
|
||||
if (tool === 'code') {
|
||||
addElement(createCodeElement(canvasX - 300, canvasY - 150));
|
||||
} else if (tool === 'text') {
|
||||
addElement(createTextElement(canvasX, canvasY));
|
||||
} else if (tool === 'arrow') {
|
||||
addElement(createArrowElement(canvasX, canvasY));
|
||||
} else {
|
||||
selectElement(null);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Background gradient
|
||||
const renderBackground = () => {
|
||||
if (background.type === 'gradient') {
|
||||
return (
|
||||
<Rect
|
||||
name="background"
|
||||
x={0}
|
||||
y={0}
|
||||
width={width}
|
||||
height={height}
|
||||
fillLinearGradientStartPoint={{ x: 0, y: 0 }}
|
||||
fillLinearGradientEndPoint={{
|
||||
x: width * Math.cos((background.gradient.angle * Math.PI) / 180),
|
||||
y: height * Math.sin((background.gradient.angle * Math.PI) / 180)
|
||||
}}
|
||||
fillLinearGradientColorStops={[0, background.gradient.from, 1, background.gradient.to]}
|
||||
/>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<Rect
|
||||
name="background"
|
||||
x={0}
|
||||
y={0}
|
||||
width={width}
|
||||
height={height}
|
||||
fill={background.solid.color}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
// Grid overlay
|
||||
const renderGrid = () => {
|
||||
if (!showGrid) return null;
|
||||
const gridSize = 50;
|
||||
const lines = [];
|
||||
|
||||
// Vertical lines
|
||||
for (let i = 0; i <= width; i += gridSize) {
|
||||
lines.push(
|
||||
<Line
|
||||
key={`v-${i}`}
|
||||
points={[i, 0, i, height]}
|
||||
stroke="rgba(255,255,255,0.1)"
|
||||
strokeWidth={1}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
// Horizontal lines
|
||||
for (let i = 0; i <= height; i += gridSize) {
|
||||
lines.push(
|
||||
<Line
|
||||
key={`h-${i}`}
|
||||
points={[0, i, width, i]}
|
||||
stroke="rgba(255,255,255,0.1)"
|
||||
strokeWidth={1}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return <>{lines}</>;
|
||||
};
|
||||
|
||||
const stagePosition = getStagePosition();
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={containerRef}
|
||||
className="flex-1 bg-neutral-900 overflow-hidden relative"
|
||||
style={{ cursor: tool !== 'select' ? 'crosshair' : 'default' }}
|
||||
>
|
||||
<Stage
|
||||
ref={stageRef}
|
||||
width={dimensions.width}
|
||||
height={dimensions.height}
|
||||
onClick={handleStageClick}
|
||||
x={stagePosition.x}
|
||||
y={stagePosition.y}
|
||||
scaleX={zoom}
|
||||
scaleY={zoom}
|
||||
>
|
||||
<Layer>
|
||||
{renderBackground()}
|
||||
{renderGrid()}
|
||||
|
||||
{snap.elements.map((element) => {
|
||||
if (!element.visible) return null;
|
||||
|
||||
switch (element.type) {
|
||||
case 'code':
|
||||
return (
|
||||
<CodeBlock
|
||||
key={element.id}
|
||||
element={element as CodeElement}
|
||||
isSelected={selectedElementId === element.id}
|
||||
onSelect={() => selectElement(element.id)}
|
||||
onChange={(updates: Partial<CodeElement>) => updateElement(element.id, updates)}
|
||||
/>
|
||||
);
|
||||
case 'text':
|
||||
return (
|
||||
<TextBlock
|
||||
key={element.id}
|
||||
element={element as TextElement}
|
||||
isSelected={selectedElementId === element.id}
|
||||
onSelect={() => selectElement(element.id)}
|
||||
onChange={(updates: Partial<TextElement>) => updateElement(element.id, updates)}
|
||||
/>
|
||||
);
|
||||
case 'arrow':
|
||||
return (
|
||||
<Arrow
|
||||
key={element.id}
|
||||
element={element as ArrowElement}
|
||||
isSelected={selectedElementId === element.id}
|
||||
onSelect={() => selectElement(element.id)}
|
||||
onChange={(updates: Partial<ArrowElement>) => updateElement(element.id, updates)}
|
||||
/>
|
||||
);
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
})}
|
||||
</Layer>
|
||||
</Stage>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Canvas;
|
||||
@@ -0,0 +1,93 @@
|
||||
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-72 bg-neutral-800 border-l border-neutral-700 overflow-y-auto">
|
||||
<div className="p-4">
|
||||
{selectedElement ? (
|
||||
<>
|
||||
{/* Element header */}
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h3 className="text-white font-medium capitalize">
|
||||
{selectedElement.type} Element
|
||||
</h3>
|
||||
<div className="flex gap-1">
|
||||
<button
|
||||
onClick={() => moveElementDown(selectedElement.id)}
|
||||
className="p-1.5 hover:bg-neutral-700 rounded text-neutral-400 hover:text-white"
|
||||
title="Move Back"
|
||||
>
|
||||
<svg className="w-4 h-4" 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>
|
||||
</button>
|
||||
<button
|
||||
onClick={() => moveElementUp(selectedElement.id)}
|
||||
className="p-1.5 hover:bg-neutral-700 rounded text-neutral-400 hover:text-white"
|
||||
title="Move Front"
|
||||
>
|
||||
<svg className="w-4 h-4" 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>
|
||||
</button>
|
||||
<button
|
||||
onClick={() => duplicateElement(selectedElement.id)}
|
||||
className="p-1.5 hover:bg-neutral-700 rounded text-neutral-400 hover:text-white"
|
||||
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>
|
||||
<button
|
||||
onClick={() => deleteElement(selectedElement.id)}
|
||||
className="p-1.5 hover:bg-red-600 rounded text-neutral-400 hover:text-white"
|
||||
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>
|
||||
|
||||
{/* Element-specific inspector */}
|
||||
{selectedElement.type === 'code' && (
|
||||
<CodeInspector element={selectedElement as CodeElement} />
|
||||
)}
|
||||
{selectedElement.type === 'text' && (
|
||||
<TextInspector element={selectedElement as TextElement} />
|
||||
)}
|
||||
{selectedElement.type === 'arrow' && (
|
||||
<ArrowInspector element={selectedElement as ArrowElement} />
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<h3 className="text-white font-medium mb-4">Canvas Settings</h3>
|
||||
<BackgroundPanel />
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Inspector;
|
||||
@@ -0,0 +1,82 @@
|
||||
import React from 'react';
|
||||
import { useCanvasStore } from '../store/canvasStore';
|
||||
|
||||
const Toolbar: React.FC = () => {
|
||||
const { tool, setTool, showGrid, setShowGrid, zoom, setZoom } = useCanvasStore();
|
||||
|
||||
const tools = [
|
||||
{ id: 'select', icon: '↖', label: 'Select (V)' },
|
||||
{ id: 'code', icon: '{ }', label: 'Code Block (C)' },
|
||||
{ id: 'text', icon: 'T', label: 'Text (T)' },
|
||||
{ id: 'arrow', icon: '→', label: 'Arrow (A)' },
|
||||
] as const;
|
||||
|
||||
return (
|
||||
<div className="w-14 bg-neutral-800 border-r border-neutral-700 flex flex-col items-center py-4 gap-2">
|
||||
{/* Tools */}
|
||||
<div className="flex flex-col gap-1">
|
||||
{tools.map(({ id, icon, label }) => (
|
||||
<button
|
||||
key={id}
|
||||
onClick={() => setTool(id)}
|
||||
className={`w-10 h-10 rounded flex items-center justify-center text-lg transition-colors ${
|
||||
tool === id
|
||||
? 'bg-blue-600 text-white'
|
||||
: 'text-neutral-400 hover:bg-neutral-700 hover:text-white'
|
||||
}`}
|
||||
title={label}
|
||||
>
|
||||
{icon}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="h-px w-8 bg-neutral-600 my-2" />
|
||||
|
||||
{/* Grid toggle */}
|
||||
<button
|
||||
onClick={() => setShowGrid(!showGrid)}
|
||||
className={`w-10 h-10 rounded flex items-center justify-center transition-colors ${
|
||||
showGrid
|
||||
? 'bg-neutral-600 text-white'
|
||||
: 'text-neutral-400 hover:bg-neutral-700 hover:text-white'
|
||||
}`}
|
||||
title="Toggle Grid (⌘;)"
|
||||
>
|
||||
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 5a1 1 0 011-1h14a1 1 0 011 1v14a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM9 4v16M15 4v16M4 9h16M4 15h16" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
{/* Spacer */}
|
||||
<div className="flex-1" />
|
||||
|
||||
{/* Zoom controls */}
|
||||
<div className="flex flex-col gap-1">
|
||||
<button
|
||||
onClick={() => setZoom(zoom + 0.1)}
|
||||
className="w-10 h-10 rounded flex items-center justify-center text-neutral-400 hover:bg-neutral-700 hover:text-white transition-colors"
|
||||
title="Zoom In (⌘+)"
|
||||
>
|
||||
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v6m3-3H7" />
|
||||
</svg>
|
||||
</button>
|
||||
<div className="text-xs text-neutral-400 text-center py-1">
|
||||
{Math.round(zoom * 100)}%
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setZoom(zoom - 0.1)}
|
||||
className="w-10 h-10 rounded flex items-center justify-center text-neutral-400 hover:bg-neutral-700 hover:text-white transition-colors"
|
||||
title="Zoom Out (⌘-)"
|
||||
>
|
||||
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM13 10H7" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Toolbar;
|
||||
@@ -0,0 +1,219 @@
|
||||
import React from 'react';
|
||||
import { useCanvasStore } from '../store/canvasStore';
|
||||
import { ASPECT_RATIOS } from '../types';
|
||||
import type Konva from 'konva';
|
||||
|
||||
interface TopBarProps {
|
||||
stageRef: React.RefObject<Konva.Stage | null>;
|
||||
}
|
||||
|
||||
const TopBar: React.FC<TopBarProps> = ({ stageRef }) => {
|
||||
const {
|
||||
snap,
|
||||
updateMeta,
|
||||
newSnap,
|
||||
exportSnap,
|
||||
importSnap,
|
||||
undo,
|
||||
redo,
|
||||
history,
|
||||
} = useCanvasStore();
|
||||
|
||||
const handleNewSnap = () => {
|
||||
if (confirm('Create a new canvas? Unsaved changes will be lost.')) {
|
||||
newSnap({ title: 'Untitled', aspect: '16:9', width: 1920, height: 1080 });
|
||||
}
|
||||
};
|
||||
|
||||
const handleAspectChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
|
||||
const ratio = ASPECT_RATIOS.find(r => r.name === e.target.value);
|
||||
if (ratio) {
|
||||
updateMeta({
|
||||
aspect: ratio.name,
|
||||
width: ratio.width,
|
||||
height: ratio.height,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const handleExportImage = async (format: 'png' | 'jpeg', scale: number = 2) => {
|
||||
const stage = stageRef.current;
|
||||
if (!stage) return;
|
||||
|
||||
// Temporarily set scale for export
|
||||
const oldScale = stage.scaleX();
|
||||
const oldPosition = { x: stage.x(), y: stage.y() };
|
||||
|
||||
stage.scale({ x: scale, y: scale });
|
||||
stage.position({ x: 0, y: 0 });
|
||||
|
||||
const dataUrl = stage.toDataURL({
|
||||
pixelRatio: 1,
|
||||
mimeType: format === 'png' ? 'image/png' : 'image/jpeg',
|
||||
quality: 0.95,
|
||||
width: snap.meta.width * scale,
|
||||
height: snap.meta.height * scale,
|
||||
});
|
||||
|
||||
// Restore scale
|
||||
stage.scale({ x: oldScale, y: oldScale });
|
||||
stage.position(oldPosition);
|
||||
|
||||
// Download
|
||||
const link = document.createElement('a');
|
||||
link.download = `${snap.meta.title || 'canvas'}.${format}`;
|
||||
link.href = dataUrl;
|
||||
link.click();
|
||||
};
|
||||
|
||||
const handleExportJSON = () => {
|
||||
const json = exportSnap();
|
||||
const blob = new Blob([json], { type: 'application/json' });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const link = document.createElement('a');
|
||||
link.download = `${snap.meta.title || 'canvas'}.json`;
|
||||
link.href = url;
|
||||
link.click();
|
||||
URL.revokeObjectURL(url);
|
||||
};
|
||||
|
||||
const handleImportJSON = () => {
|
||||
const input = document.createElement('input');
|
||||
input.type = 'file';
|
||||
input.accept = '.json';
|
||||
input.onchange = (e) => {
|
||||
const file = (e.target as HTMLInputElement).files?.[0];
|
||||
if (file) {
|
||||
const reader = new FileReader();
|
||||
reader.onload = (e) => {
|
||||
const json = e.target?.result as string;
|
||||
importSnap(json);
|
||||
};
|
||||
reader.readAsText(file);
|
||||
}
|
||||
};
|
||||
input.click();
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="h-14 bg-neutral-800 border-b border-neutral-700 flex items-center justify-between px-4">
|
||||
{/* Left section */}
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={handleNewSnap}
|
||||
className="p-2 hover:bg-neutral-700 rounded text-neutral-300 hover:text-white transition-colors"
|
||||
title="New (⌘N)"
|
||||
>
|
||||
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
|
||||
</svg>
|
||||
</button>
|
||||
<button
|
||||
onClick={handleImportJSON}
|
||||
className="p-2 hover:bg-neutral-700 rounded text-neutral-300 hover:text-white transition-colors"
|
||||
title="Open"
|
||||
>
|
||||
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 19a2 2 0 01-2-2V7a2 2 0 012-2h4l2 2h4a2 2 0 012 2v1M5 19h14a2 2 0 002-2v-5a2 2 0 00-2-2H9a2 2 0 00-2 2v5a2 2 0 01-2 2z" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="h-6 w-px bg-neutral-600" />
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={undo}
|
||||
disabled={history.past.length === 0}
|
||||
className="p-2 hover:bg-neutral-700 rounded text-neutral-300 hover:text-white transition-colors disabled:opacity-30"
|
||||
title="Undo (⌘Z)"
|
||||
>
|
||||
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6" />
|
||||
</svg>
|
||||
</button>
|
||||
<button
|
||||
onClick={redo}
|
||||
disabled={history.future.length === 0}
|
||||
className="p-2 hover:bg-neutral-700 rounded text-neutral-300 hover:text-white transition-colors disabled:opacity-30"
|
||||
title="Redo (⇧⌘Z)"
|
||||
>
|
||||
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 10h-10a8 8 0 00-8 8v2M21 10l-6 6m6-6l-6-6" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Center section */}
|
||||
<div className="flex items-center gap-4">
|
||||
<input
|
||||
type="text"
|
||||
value={snap.meta.title}
|
||||
onChange={(e) => updateMeta({ title: e.target.value })}
|
||||
className="bg-transparent text-white text-center px-2 py-1 border-b border-transparent hover:border-neutral-600 focus:border-blue-500 outline-none"
|
||||
/>
|
||||
|
||||
<select
|
||||
value={snap.meta.aspect}
|
||||
onChange={handleAspectChange}
|
||||
className="bg-neutral-700 text-white px-3 py-1.5 rounded text-sm"
|
||||
>
|
||||
{ASPECT_RATIOS.map((ratio) => (
|
||||
<option key={ratio.name} value={ratio.name}>
|
||||
{ratio.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Right section */}
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={handleExportJSON}
|
||||
className="px-3 py-1.5 text-sm bg-neutral-700 hover:bg-neutral-600 rounded text-white transition-colors"
|
||||
>
|
||||
Save JSON
|
||||
</button>
|
||||
|
||||
<div className="relative group">
|
||||
<button
|
||||
className="px-4 py-1.5 text-sm bg-blue-600 hover:bg-blue-500 rounded text-white font-medium transition-colors"
|
||||
>
|
||||
Export
|
||||
</button>
|
||||
<div className="absolute right-0 top-full mt-1 bg-neutral-800 border border-neutral-700 rounded shadow-xl opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all z-50">
|
||||
<button
|
||||
onClick={() => handleExportImage('png', 1)}
|
||||
className="block w-full px-4 py-2 text-sm text-left text-white hover:bg-neutral-700"
|
||||
>
|
||||
PNG (1x)
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleExportImage('png', 2)}
|
||||
className="block w-full px-4 py-2 text-sm text-left text-white hover:bg-neutral-700"
|
||||
>
|
||||
PNG (2x)
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleExportImage('png', 3)}
|
||||
className="block w-full px-4 py-2 text-sm text-left text-white hover:bg-neutral-700"
|
||||
>
|
||||
PNG (3x)
|
||||
</button>
|
||||
<div className="border-t border-neutral-700" />
|
||||
<button
|
||||
onClick={() => handleExportImage('jpeg', 2)}
|
||||
className="block w-full px-4 py-2 text-sm text-left text-white hover:bg-neutral-700"
|
||||
>
|
||||
JPEG (2x)
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default TopBar;
|
||||
@@ -0,0 +1,70 @@
|
||||
import React, { useRef } from 'react';
|
||||
import { Group, Arrow as KonvaArrow, Circle } from 'react-konva';
|
||||
import type Konva from 'konva';
|
||||
import type { ArrowElement } from '../../types';
|
||||
|
||||
interface ArrowProps {
|
||||
element: ArrowElement;
|
||||
isSelected: boolean;
|
||||
onSelect: () => void;
|
||||
onChange: (updates: Partial<ArrowElement>) => void;
|
||||
}
|
||||
|
||||
const Arrow: React.FC<ArrowProps> = ({ element, isSelected, onSelect, onChange }) => {
|
||||
const arrowRef = useRef<Konva.Arrow>(null);
|
||||
const { points, props } = element;
|
||||
|
||||
// Flatten points for Konva
|
||||
const flatPoints = points.flatMap(p => [p.x, p.y]);
|
||||
|
||||
const handlePointDrag = (index: number, e: Konva.KonvaEventObject<DragEvent>) => {
|
||||
const newPoints = [...points];
|
||||
newPoints[index] = {
|
||||
x: e.target.x(),
|
||||
y: e.target.y(),
|
||||
};
|
||||
onChange({ points: newPoints });
|
||||
};
|
||||
|
||||
// Arrow head pointer
|
||||
const pointerLength = props.head === 'none' ? 0 : props.thickness * 4;
|
||||
const pointerWidth = props.head === 'none' ? 0 : props.thickness * 3;
|
||||
|
||||
return (
|
||||
<Group>
|
||||
<KonvaArrow
|
||||
ref={arrowRef}
|
||||
points={flatPoints}
|
||||
stroke={props.color}
|
||||
strokeWidth={props.thickness}
|
||||
fill={props.head === 'filled' ? props.color : 'transparent'}
|
||||
pointerLength={pointerLength}
|
||||
pointerWidth={pointerWidth}
|
||||
tension={props.style === 'curved' ? 0.5 : 0}
|
||||
lineCap="round"
|
||||
lineJoin="round"
|
||||
onClick={onSelect}
|
||||
onTap={onSelect}
|
||||
hitStrokeWidth={20}
|
||||
/>
|
||||
|
||||
{/* Control points when selected */}
|
||||
{isSelected && points.map((point, index) => (
|
||||
<Circle
|
||||
key={index}
|
||||
x={point.x}
|
||||
y={point.y}
|
||||
radius={8}
|
||||
fill="#3b82f6"
|
||||
stroke="#ffffff"
|
||||
strokeWidth={2}
|
||||
draggable={!element.locked}
|
||||
onDragMove={(e) => handlePointDrag(index, e)}
|
||||
onDragEnd={(e) => handlePointDrag(index, e)}
|
||||
/>
|
||||
))}
|
||||
</Group>
|
||||
);
|
||||
};
|
||||
|
||||
export default Arrow;
|
||||
@@ -0,0 +1,184 @@
|
||||
import React, { useRef, useEffect } from 'react';
|
||||
import { Group, Rect, Text, Transformer } from 'react-konva';
|
||||
import type Konva from 'konva';
|
||||
import type { CodeElement } from '../../types';
|
||||
|
||||
interface CodeBlockProps {
|
||||
element: CodeElement;
|
||||
isSelected: boolean;
|
||||
onSelect: () => void;
|
||||
onChange: (updates: Partial<CodeElement>) => void;
|
||||
}
|
||||
|
||||
const CodeBlock: React.FC<CodeBlockProps> = ({ element, isSelected, onSelect, onChange }) => {
|
||||
const groupRef = useRef<Konva.Group>(null);
|
||||
const trRef = useRef<Konva.Transformer>(null);
|
||||
const { x, y, width, height, rotation, props } = element;
|
||||
|
||||
useEffect(() => {
|
||||
if (isSelected && trRef.current && groupRef.current) {
|
||||
trRef.current.nodes([groupRef.current]);
|
||||
trRef.current.getLayer()?.batchDraw();
|
||||
}
|
||||
}, [isSelected]);
|
||||
|
||||
// Simple code rendering with line numbers
|
||||
const renderCode = () => {
|
||||
const lines = props.code.split('\n');
|
||||
const lineHeight = props.fontSize * props.lineHeight;
|
||||
const startY = props.padding;
|
||||
const lineNumberWidth = props.lineNumbers ? 40 : 0;
|
||||
|
||||
const elements: React.ReactNode[] = [];
|
||||
|
||||
lines.forEach((line, index) => {
|
||||
const yPos = startY + index * lineHeight;
|
||||
const lineNum = index + 1;
|
||||
|
||||
// Check if this line is highlighted
|
||||
const highlight = props.highlights.find(
|
||||
h => lineNum >= h.from && lineNum <= h.to
|
||||
);
|
||||
|
||||
// Line highlight background
|
||||
if (highlight) {
|
||||
let bgColor = 'rgba(255, 255, 0, 0.15)'; // focus
|
||||
if (highlight.style === 'added') bgColor = 'rgba(0, 255, 0, 0.15)';
|
||||
if (highlight.style === 'removed') bgColor = 'rgba(255, 0, 0, 0.15)';
|
||||
|
||||
elements.push(
|
||||
<Rect
|
||||
key={`highlight-${index}`}
|
||||
x={0}
|
||||
y={yPos - 2}
|
||||
width={width}
|
||||
height={lineHeight}
|
||||
fill={bgColor}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
// Line number
|
||||
if (props.lineNumbers) {
|
||||
elements.push(
|
||||
<Text
|
||||
key={`linenum-${index}`}
|
||||
x={props.padding}
|
||||
y={yPos}
|
||||
text={String(lineNum)}
|
||||
fontSize={props.fontSize}
|
||||
fontFamily={props.fontFamily}
|
||||
fill={props.theme === 'dark' ? 'rgba(255,255,255,0.4)' : 'rgba(0,0,0,0.4)'}
|
||||
width={30}
|
||||
align="right"
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
// Code text
|
||||
elements.push(
|
||||
<Text
|
||||
key={`code-${index}`}
|
||||
x={props.padding + lineNumberWidth + 10}
|
||||
y={yPos}
|
||||
text={line || ' '}
|
||||
fontSize={props.fontSize}
|
||||
fontFamily={props.fontFamily}
|
||||
fill={props.theme === 'dark' ? '#e5e5e5' : '#1f1f1f'}
|
||||
/>
|
||||
);
|
||||
});
|
||||
|
||||
return elements;
|
||||
};
|
||||
|
||||
const handleDragEnd = (e: Konva.KonvaEventObject<DragEvent>) => {
|
||||
onChange({
|
||||
x: e.target.x(),
|
||||
y: e.target.y(),
|
||||
});
|
||||
};
|
||||
|
||||
const handleTransformEnd = () => {
|
||||
const node = groupRef.current;
|
||||
if (!node) return;
|
||||
|
||||
const scaleX = node.scaleX();
|
||||
const scaleY = node.scaleY();
|
||||
|
||||
node.scaleX(1);
|
||||
node.scaleY(1);
|
||||
|
||||
onChange({
|
||||
x: node.x(),
|
||||
y: node.y(),
|
||||
width: Math.max(200, node.width() * scaleX),
|
||||
height: Math.max(100, node.height() * scaleY),
|
||||
rotation: node.rotation(),
|
||||
});
|
||||
};
|
||||
|
||||
const bgColor = props.theme === 'dark' ? '#1e1e2e' : '#f8f8f8';
|
||||
|
||||
return (
|
||||
<>
|
||||
<Group
|
||||
ref={groupRef}
|
||||
x={x}
|
||||
y={y}
|
||||
width={width}
|
||||
height={height}
|
||||
rotation={rotation}
|
||||
draggable={!element.locked}
|
||||
onClick={onSelect}
|
||||
onTap={onSelect}
|
||||
onDragEnd={handleDragEnd}
|
||||
onTransformEnd={handleTransformEnd}
|
||||
>
|
||||
{/* Shadow */}
|
||||
<Rect
|
||||
x={props.shadow.spread}
|
||||
y={props.shadow.spread}
|
||||
width={width}
|
||||
height={height}
|
||||
cornerRadius={props.cornerRadius}
|
||||
fill={props.shadow.color}
|
||||
shadowBlur={props.shadow.blur}
|
||||
shadowColor={props.shadow.color}
|
||||
/>
|
||||
|
||||
{/* Background */}
|
||||
<Rect
|
||||
width={width}
|
||||
height={height}
|
||||
fill={bgColor}
|
||||
cornerRadius={props.cornerRadius}
|
||||
/>
|
||||
|
||||
{/* Code content */}
|
||||
<Group clipFunc={(ctx) => {
|
||||
ctx.beginPath();
|
||||
ctx.roundRect(0, 0, width, height, props.cornerRadius);
|
||||
ctx.closePath();
|
||||
}}>
|
||||
{renderCode()}
|
||||
</Group>
|
||||
</Group>
|
||||
|
||||
{isSelected && (
|
||||
<Transformer
|
||||
ref={trRef}
|
||||
flipEnabled={false}
|
||||
boundBoxFunc={(oldBox, newBox) => {
|
||||
if (Math.abs(newBox.width) < 200 || Math.abs(newBox.height) < 100) {
|
||||
return oldBox;
|
||||
}
|
||||
return newBox;
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default CodeBlock;
|
||||
@@ -0,0 +1,120 @@
|
||||
import React, { useRef, useEffect, useState } from 'react';
|
||||
import { Group, Rect, Text, Transformer } from 'react-konva';
|
||||
import type Konva from 'konva';
|
||||
import type { TextElement } from '../../types';
|
||||
|
||||
interface TextBlockProps {
|
||||
element: TextElement;
|
||||
isSelected: boolean;
|
||||
onSelect: () => void;
|
||||
onChange: (updates: Partial<TextElement>) => void;
|
||||
}
|
||||
|
||||
const TextBlock: React.FC<TextBlockProps> = ({ element, isSelected, onSelect, onChange }) => {
|
||||
const groupRef = useRef<Konva.Group>(null);
|
||||
const textRef = useRef<Konva.Text>(null);
|
||||
const trRef = useRef<Konva.Transformer>(null);
|
||||
const [textDimensions, setTextDimensions] = useState({ width: 200, height: 30 });
|
||||
const { x, y, rotation, props } = element;
|
||||
|
||||
useEffect(() => {
|
||||
if (isSelected && trRef.current && groupRef.current) {
|
||||
trRef.current.nodes([groupRef.current]);
|
||||
trRef.current.getLayer()?.batchDraw();
|
||||
}
|
||||
}, [isSelected]);
|
||||
|
||||
useEffect(() => {
|
||||
if (textRef.current) {
|
||||
setTextDimensions({
|
||||
width: textRef.current.width(),
|
||||
height: textRef.current.height(),
|
||||
});
|
||||
}
|
||||
}, [props.text, props.fontSize, props.fontFamily, props.bold, props.italic]);
|
||||
|
||||
const handleDragEnd = (e: Konva.KonvaEventObject<DragEvent>) => {
|
||||
onChange({
|
||||
x: e.target.x(),
|
||||
y: e.target.y(),
|
||||
});
|
||||
};
|
||||
|
||||
const handleTransformEnd = () => {
|
||||
const node = groupRef.current;
|
||||
if (!node) return;
|
||||
|
||||
node.scaleX(1);
|
||||
node.scaleY(1);
|
||||
|
||||
onChange({
|
||||
x: node.x(),
|
||||
y: node.y(),
|
||||
rotation: node.rotation(),
|
||||
});
|
||||
};
|
||||
|
||||
const totalWidth = textDimensions.width + props.padding * 2;
|
||||
const totalHeight = textDimensions.height + props.padding * 2;
|
||||
|
||||
const fontStyle = [
|
||||
props.bold ? 'bold' : '',
|
||||
props.italic ? 'italic' : '',
|
||||
].filter(Boolean).join(' ') || 'normal';
|
||||
|
||||
return (
|
||||
<>
|
||||
<Group
|
||||
ref={groupRef}
|
||||
x={x}
|
||||
y={y}
|
||||
rotation={rotation}
|
||||
draggable={!element.locked}
|
||||
onClick={onSelect}
|
||||
onTap={onSelect}
|
||||
onDragEnd={handleDragEnd}
|
||||
onTransformEnd={handleTransformEnd}
|
||||
>
|
||||
{/* Background */}
|
||||
{props.background && (
|
||||
<Rect
|
||||
x={-props.padding}
|
||||
y={-props.padding}
|
||||
width={totalWidth}
|
||||
height={totalHeight}
|
||||
fill={props.background.color}
|
||||
cornerRadius={props.cornerRadius}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Text */}
|
||||
<Text
|
||||
ref={textRef}
|
||||
text={props.text}
|
||||
fontSize={props.fontSize}
|
||||
fontFamily={props.fontFamily}
|
||||
fontStyle={fontStyle}
|
||||
fill={props.color}
|
||||
align={props.align}
|
||||
textDecoration={props.underline ? 'underline' : ''}
|
||||
/>
|
||||
</Group>
|
||||
|
||||
{isSelected && (
|
||||
<Transformer
|
||||
ref={trRef}
|
||||
flipEnabled={false}
|
||||
enabledAnchors={['middle-left', 'middle-right']}
|
||||
boundBoxFunc={(oldBox, newBox) => {
|
||||
if (Math.abs(newBox.width) < 50) {
|
||||
return oldBox;
|
||||
}
|
||||
return newBox;
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default TextBlock;
|
||||
@@ -0,0 +1,131 @@
|
||||
import React from 'react';
|
||||
import { useCanvasStore } from '../../store/canvasStore';
|
||||
import type { ArrowElement } from '../../types';
|
||||
|
||||
interface ArrowInspectorProps {
|
||||
element: ArrowElement;
|
||||
}
|
||||
|
||||
const ArrowInspector: React.FC<ArrowInspectorProps> = ({ element }) => {
|
||||
const { updateElement } = useCanvasStore();
|
||||
|
||||
const update = (updates: Partial<ArrowElement>) => {
|
||||
updateElement(element.id, updates);
|
||||
};
|
||||
|
||||
const updateProps = (props: Partial<ArrowElement['props']>) => {
|
||||
update({ props: { ...element.props, ...props } });
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{/* Style */}
|
||||
<div>
|
||||
<label className="block text-sm text-neutral-400 mb-2">Style</label>
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
onClick={() => updateProps({ style: 'straight' })}
|
||||
className={`flex-1 py-2 rounded text-sm ${
|
||||
element.props.style === 'straight'
|
||||
? 'bg-blue-600 text-white'
|
||||
: 'bg-neutral-700 text-neutral-300'
|
||||
}`}
|
||||
>
|
||||
Straight
|
||||
</button>
|
||||
<button
|
||||
onClick={() => updateProps({ style: 'curved' })}
|
||||
className={`flex-1 py-2 rounded text-sm ${
|
||||
element.props.style === 'curved'
|
||||
? 'bg-blue-600 text-white'
|
||||
: 'bg-neutral-700 text-neutral-300'
|
||||
}`}
|
||||
>
|
||||
Curved
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Color */}
|
||||
<div>
|
||||
<label className="block text-sm text-neutral-400 mb-2">Color</label>
|
||||
<div className="flex gap-2 items-center">
|
||||
<input
|
||||
type="color"
|
||||
value={element.props.color}
|
||||
onChange={(e) => updateProps({ color: e.target.value })}
|
||||
className="w-10 h-10 rounded cursor-pointer bg-transparent"
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
value={element.props.color}
|
||||
onChange={(e) => updateProps({ color: e.target.value })}
|
||||
className="flex-1 bg-neutral-700 text-white px-3 py-2 rounded text-sm"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Thickness */}
|
||||
<div>
|
||||
<label className="block text-sm text-neutral-400 mb-2">
|
||||
Thickness: {element.props.thickness}px
|
||||
</label>
|
||||
<input
|
||||
type="range"
|
||||
value={element.props.thickness}
|
||||
onChange={(e) => updateProps({ thickness: parseInt(e.target.value) })}
|
||||
className="w-full"
|
||||
min={1}
|
||||
max={12}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Arrow head */}
|
||||
<div>
|
||||
<label className="block text-sm text-neutral-400 mb-2">Arrow Head</label>
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
onClick={() => updateProps({ head: 'filled' })}
|
||||
className={`flex-1 py-2 rounded text-sm ${
|
||||
element.props.head === 'filled'
|
||||
? 'bg-blue-600 text-white'
|
||||
: 'bg-neutral-700 text-neutral-300'
|
||||
}`}
|
||||
>
|
||||
Filled
|
||||
</button>
|
||||
<button
|
||||
onClick={() => updateProps({ head: 'outline' })}
|
||||
className={`flex-1 py-2 rounded text-sm ${
|
||||
element.props.head === 'outline'
|
||||
? 'bg-blue-600 text-white'
|
||||
: 'bg-neutral-700 text-neutral-300'
|
||||
}`}
|
||||
>
|
||||
Outline
|
||||
</button>
|
||||
<button
|
||||
onClick={() => updateProps({ head: 'none' })}
|
||||
className={`flex-1 py-2 rounded text-sm ${
|
||||
element.props.head === 'none'
|
||||
? 'bg-blue-600 text-white'
|
||||
: 'bg-neutral-700 text-neutral-300'
|
||||
}`}
|
||||
>
|
||||
None
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Points info */}
|
||||
<div>
|
||||
<label className="block text-sm text-neutral-400 mb-2">Points</label>
|
||||
<p className="text-xs text-neutral-500">
|
||||
Drag the blue handles on the canvas to adjust arrow points.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ArrowInspector;
|
||||
@@ -0,0 +1,155 @@
|
||||
import React from 'react';
|
||||
import { useCanvasStore } from '../../store/canvasStore';
|
||||
|
||||
const GRADIENT_PRESETS = [
|
||||
{ from: '#101022', to: '#1f1f3a', name: 'Midnight' },
|
||||
{ from: '#0f172a', to: '#1e3a5f', name: 'Ocean' },
|
||||
{ from: '#1a1a2e', to: '#16213e', name: 'Deep Blue' },
|
||||
{ from: '#0f0f0f', to: '#232323', name: 'Charcoal' },
|
||||
{ from: '#1a1a1a', to: '#2d2d2d', name: 'Dark' },
|
||||
{ from: '#2d1b4e', to: '#1a1a2e', name: 'Purple' },
|
||||
{ from: '#1e3c72', to: '#2a5298', name: 'Royal' },
|
||||
{ from: '#134e5e', to: '#71b280', name: 'Teal' },
|
||||
{ from: '#f5f5f5', to: '#e0e0e0', name: 'Light' },
|
||||
{ from: '#ffffff', to: '#f0f0f0', name: 'White' },
|
||||
];
|
||||
|
||||
const BackgroundPanel: React.FC = () => {
|
||||
const { snap, setBackground } = useCanvasStore();
|
||||
const { background } = snap;
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{/* Background type */}
|
||||
<div>
|
||||
<label className="block text-sm text-neutral-400 mb-2">Type</label>
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
onClick={() => setBackground({ type: 'solid' })}
|
||||
className={`flex-1 py-2 rounded text-sm ${
|
||||
background.type === 'solid'
|
||||
? 'bg-blue-600 text-white'
|
||||
: 'bg-neutral-700 text-neutral-300 hover:bg-neutral-600'
|
||||
}`}
|
||||
>
|
||||
Solid
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setBackground({ type: 'gradient' })}
|
||||
className={`flex-1 py-2 rounded text-sm ${
|
||||
background.type === 'gradient'
|
||||
? 'bg-blue-600 text-white'
|
||||
: 'bg-neutral-700 text-neutral-300 hover:bg-neutral-600'
|
||||
}`}
|
||||
>
|
||||
Gradient
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{background.type === 'solid' ? (
|
||||
<div>
|
||||
<label className="block text-sm text-neutral-400 mb-2">Color</label>
|
||||
<div className="flex gap-2 items-center">
|
||||
<input
|
||||
type="color"
|
||||
value={background.solid.color}
|
||||
onChange={(e) => setBackground({ solid: { color: e.target.value } })}
|
||||
className="w-10 h-10 rounded cursor-pointer bg-transparent"
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
value={background.solid.color}
|
||||
onChange={(e) => setBackground({ solid: { color: e.target.value } })}
|
||||
className="flex-1 bg-neutral-700 text-white px-3 py-2 rounded text-sm"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div>
|
||||
<label className="block text-sm text-neutral-400 mb-2">Presets</label>
|
||||
<div className="grid grid-cols-5 gap-2">
|
||||
{GRADIENT_PRESETS.map((preset, i) => (
|
||||
<button
|
||||
key={i}
|
||||
onClick={() => setBackground({
|
||||
gradient: { ...background.gradient, from: preset.from, to: preset.to }
|
||||
})}
|
||||
className="w-10 h-10 rounded border border-neutral-600 hover:border-blue-500 transition-colors"
|
||||
style={{
|
||||
background: `linear-gradient(135deg, ${preset.from}, ${preset.to})`
|
||||
}}
|
||||
title={preset.name}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div>
|
||||
<label className="block text-sm text-neutral-400 mb-2">From</label>
|
||||
<div className="flex gap-2 items-center">
|
||||
<input
|
||||
type="color"
|
||||
value={background.gradient.from}
|
||||
onChange={(e) => setBackground({
|
||||
gradient: { ...background.gradient, from: e.target.value }
|
||||
})}
|
||||
className="w-8 h-8 rounded cursor-pointer bg-transparent"
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
value={background.gradient.from}
|
||||
onChange={(e) => setBackground({
|
||||
gradient: { ...background.gradient, from: e.target.value }
|
||||
})}
|
||||
className="flex-1 bg-neutral-700 text-white px-2 py-1.5 rounded text-xs"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm text-neutral-400 mb-2">To</label>
|
||||
<div className="flex gap-2 items-center">
|
||||
<input
|
||||
type="color"
|
||||
value={background.gradient.to}
|
||||
onChange={(e) => setBackground({
|
||||
gradient: { ...background.gradient, to: e.target.value }
|
||||
})}
|
||||
className="w-8 h-8 rounded cursor-pointer bg-transparent"
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
value={background.gradient.to}
|
||||
onChange={(e) => setBackground({
|
||||
gradient: { ...background.gradient, to: e.target.value }
|
||||
})}
|
||||
className="flex-1 bg-neutral-700 text-white px-2 py-1.5 rounded text-xs"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm text-neutral-400 mb-2">
|
||||
Angle: {background.gradient.angle}°
|
||||
</label>
|
||||
<input
|
||||
type="range"
|
||||
min="0"
|
||||
max="360"
|
||||
value={background.gradient.angle}
|
||||
onChange={(e) => setBackground({
|
||||
gradient: { ...background.gradient, angle: parseInt(e.target.value) }
|
||||
})}
|
||||
className="w-full"
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default BackgroundPanel;
|
||||
@@ -0,0 +1,202 @@
|
||||
import React from 'react';
|
||||
import { useCanvasStore } from '../../store/canvasStore';
|
||||
import type { CodeElement } from '../../types';
|
||||
import { LANGUAGES, FONT_FAMILIES } from '../../types';
|
||||
import { detectLanguage } from '../../utils/highlighter';
|
||||
|
||||
interface CodeInspectorProps {
|
||||
element: CodeElement;
|
||||
}
|
||||
|
||||
const CodeInspector: React.FC<CodeInspectorProps> = ({ element }) => {
|
||||
const { updateElement, saveToHistory } = useCanvasStore();
|
||||
|
||||
const update = (updates: Partial<CodeElement>) => {
|
||||
updateElement(element.id, updates);
|
||||
};
|
||||
|
||||
const updateProps = (props: Partial<CodeElement['props']>) => {
|
||||
update({ props: { ...element.props, ...props } });
|
||||
};
|
||||
|
||||
const handleCodeChange = (code: string) => {
|
||||
updateProps({ code });
|
||||
};
|
||||
|
||||
const handleAutoDetect = () => {
|
||||
const detected = detectLanguage(element.props.code);
|
||||
updateProps({ language: detected });
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{/* Code editor */}
|
||||
<div>
|
||||
<label className="block text-sm text-neutral-400 mb-2">Code</label>
|
||||
<textarea
|
||||
value={element.props.code}
|
||||
onChange={(e) => handleCodeChange(e.target.value)}
|
||||
onBlur={saveToHistory}
|
||||
className="w-full h-32 bg-neutral-900 text-white text-sm font-mono p-3 rounded resize-y"
|
||||
spellCheck={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Language */}
|
||||
<div>
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<label className="text-sm text-neutral-400">Language</label>
|
||||
<button
|
||||
onClick={handleAutoDetect}
|
||||
className="text-xs text-blue-400 hover:text-blue-300"
|
||||
>
|
||||
Auto-detect
|
||||
</button>
|
||||
</div>
|
||||
<select
|
||||
value={element.props.language}
|
||||
onChange={(e) => updateProps({ language: e.target.value })}
|
||||
className="w-full bg-neutral-700 text-white px-3 py-2 rounded text-sm"
|
||||
>
|
||||
{LANGUAGES.map((lang) => (
|
||||
<option key={lang} value={lang}>
|
||||
{lang}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Theme */}
|
||||
<div>
|
||||
<label className="block text-sm text-neutral-400 mb-2">Theme</label>
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
onClick={() => updateProps({ theme: 'dark' })}
|
||||
className={`flex-1 py-2 rounded text-sm ${
|
||||
element.props.theme === 'dark'
|
||||
? 'bg-blue-600 text-white'
|
||||
: 'bg-neutral-700 text-neutral-300'
|
||||
}`}
|
||||
>
|
||||
Dark
|
||||
</button>
|
||||
<button
|
||||
onClick={() => updateProps({ theme: 'light' })}
|
||||
className={`flex-1 py-2 rounded text-sm ${
|
||||
element.props.theme === 'light'
|
||||
? 'bg-blue-600 text-white'
|
||||
: 'bg-neutral-700 text-neutral-300'
|
||||
}`}
|
||||
>
|
||||
Light
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Font */}
|
||||
<div>
|
||||
<label className="block text-sm text-neutral-400 mb-2">Font</label>
|
||||
<select
|
||||
value={element.props.fontFamily}
|
||||
onChange={(e) => updateProps({ fontFamily: e.target.value })}
|
||||
className="w-full bg-neutral-700 text-white px-3 py-2 rounded text-sm"
|
||||
>
|
||||
{FONT_FAMILIES.code.map((font) => (
|
||||
<option key={font} value={font}>
|
||||
{font}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Font size & Line height */}
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div>
|
||||
<label className="block text-sm text-neutral-400 mb-2">Size</label>
|
||||
<input
|
||||
type="number"
|
||||
value={element.props.fontSize}
|
||||
onChange={(e) => updateProps({ fontSize: parseInt(e.target.value) || 14 })}
|
||||
className="w-full bg-neutral-700 text-white px-3 py-2 rounded text-sm"
|
||||
min={10}
|
||||
max={32}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm text-neutral-400 mb-2">Line Height</label>
|
||||
<input
|
||||
type="number"
|
||||
value={element.props.lineHeight}
|
||||
onChange={(e) => updateProps({ lineHeight: parseFloat(e.target.value) || 1.5 })}
|
||||
className="w-full bg-neutral-700 text-white px-3 py-2 rounded text-sm"
|
||||
min={1}
|
||||
max={3}
|
||||
step={0.1}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Line numbers */}
|
||||
<div className="flex items-center justify-between">
|
||||
<label className="text-sm text-neutral-400">Line Numbers</label>
|
||||
<button
|
||||
onClick={() => updateProps({ lineNumbers: !element.props.lineNumbers })}
|
||||
className={`w-12 h-6 rounded-full transition-colors ${
|
||||
element.props.lineNumbers ? 'bg-blue-600' : 'bg-neutral-600'
|
||||
}`}
|
||||
>
|
||||
<div
|
||||
className={`w-5 h-5 bg-white rounded-full transition-transform ${
|
||||
element.props.lineNumbers ? 'translate-x-6' : 'translate-x-0.5'
|
||||
}`}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Padding & Corner radius */}
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div>
|
||||
<label className="block text-sm text-neutral-400 mb-2">Padding</label>
|
||||
<input
|
||||
type="number"
|
||||
value={element.props.padding}
|
||||
onChange={(e) => updateProps({ padding: parseInt(e.target.value) || 0 })}
|
||||
className="w-full bg-neutral-700 text-white px-3 py-2 rounded text-sm"
|
||||
min={0}
|
||||
max={64}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm text-neutral-400 mb-2">Radius</label>
|
||||
<input
|
||||
type="number"
|
||||
value={element.props.cornerRadius}
|
||||
onChange={(e) => updateProps({ cornerRadius: parseInt(e.target.value) || 0 })}
|
||||
className="w-full bg-neutral-700 text-white px-3 py-2 rounded text-sm"
|
||||
min={0}
|
||||
max={32}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Shadow */}
|
||||
<div>
|
||||
<label className="block text-sm text-neutral-400 mb-2">
|
||||
Shadow Blur: {element.props.shadow.blur}
|
||||
</label>
|
||||
<input
|
||||
type="range"
|
||||
value={element.props.shadow.blur}
|
||||
onChange={(e) => updateProps({
|
||||
shadow: { ...element.props.shadow, blur: parseInt(e.target.value) }
|
||||
})}
|
||||
className="w-full"
|
||||
min={0}
|
||||
max={64}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CodeInspector;
|
||||
@@ -0,0 +1,198 @@
|
||||
import React from 'react';
|
||||
import { useCanvasStore } from '../../store/canvasStore';
|
||||
import type { TextElement } from '../../types';
|
||||
import { FONT_FAMILIES } from '../../types';
|
||||
|
||||
interface TextInspectorProps {
|
||||
element: TextElement;
|
||||
}
|
||||
|
||||
const TextInspector: React.FC<TextInspectorProps> = ({ element }) => {
|
||||
const { updateElement, saveToHistory } = useCanvasStore();
|
||||
|
||||
const update = (updates: Partial<TextElement>) => {
|
||||
updateElement(element.id, updates);
|
||||
};
|
||||
|
||||
const updateProps = (props: Partial<TextElement['props']>) => {
|
||||
update({ props: { ...element.props, ...props } });
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{/* Text */}
|
||||
<div>
|
||||
<label className="block text-sm text-neutral-400 mb-2">Text</label>
|
||||
<textarea
|
||||
value={element.props.text}
|
||||
onChange={(e) => updateProps({ text: e.target.value })}
|
||||
onBlur={saveToHistory}
|
||||
className="w-full h-24 bg-neutral-900 text-white text-sm p-3 rounded resize-y"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Font */}
|
||||
<div>
|
||||
<label className="block text-sm text-neutral-400 mb-2">Font</label>
|
||||
<select
|
||||
value={element.props.fontFamily}
|
||||
onChange={(e) => updateProps({ fontFamily: e.target.value })}
|
||||
className="w-full bg-neutral-700 text-white px-3 py-2 rounded text-sm"
|
||||
>
|
||||
{FONT_FAMILIES.text.map((font) => (
|
||||
<option key={font} value={font}>
|
||||
{font}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Font size */}
|
||||
<div>
|
||||
<label className="block text-sm text-neutral-400 mb-2">Size: {element.props.fontSize}</label>
|
||||
<input
|
||||
type="range"
|
||||
value={element.props.fontSize}
|
||||
onChange={(e) => updateProps({ fontSize: parseInt(e.target.value) })}
|
||||
className="w-full"
|
||||
min={12}
|
||||
max={96}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Color */}
|
||||
<div>
|
||||
<label className="block text-sm text-neutral-400 mb-2">Color</label>
|
||||
<div className="flex gap-2 items-center">
|
||||
<input
|
||||
type="color"
|
||||
value={element.props.color}
|
||||
onChange={(e) => updateProps({ color: e.target.value })}
|
||||
className="w-10 h-10 rounded cursor-pointer bg-transparent"
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
value={element.props.color}
|
||||
onChange={(e) => updateProps({ color: e.target.value })}
|
||||
className="flex-1 bg-neutral-700 text-white px-3 py-2 rounded text-sm"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Style buttons */}
|
||||
<div>
|
||||
<label className="block text-sm text-neutral-400 mb-2">Style</label>
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
onClick={() => updateProps({ bold: !element.props.bold })}
|
||||
className={`flex-1 py-2 rounded text-sm font-bold ${
|
||||
element.props.bold
|
||||
? 'bg-blue-600 text-white'
|
||||
: 'bg-neutral-700 text-neutral-300'
|
||||
}`}
|
||||
>
|
||||
B
|
||||
</button>
|
||||
<button
|
||||
onClick={() => updateProps({ italic: !element.props.italic })}
|
||||
className={`flex-1 py-2 rounded text-sm italic ${
|
||||
element.props.italic
|
||||
? 'bg-blue-600 text-white'
|
||||
: 'bg-neutral-700 text-neutral-300'
|
||||
}`}
|
||||
>
|
||||
I
|
||||
</button>
|
||||
<button
|
||||
onClick={() => updateProps({ underline: !element.props.underline })}
|
||||
className={`flex-1 py-2 rounded text-sm underline ${
|
||||
element.props.underline
|
||||
? 'bg-blue-600 text-white'
|
||||
: 'bg-neutral-700 text-neutral-300'
|
||||
}`}
|
||||
>
|
||||
U
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Alignment */}
|
||||
<div>
|
||||
<label className="block text-sm text-neutral-400 mb-2">Alignment</label>
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
onClick={() => updateProps({ align: 'left' })}
|
||||
className={`flex-1 py-2 rounded text-sm ${
|
||||
element.props.align === 'left'
|
||||
? 'bg-blue-600 text-white'
|
||||
: 'bg-neutral-700 text-neutral-300'
|
||||
}`}
|
||||
>
|
||||
Left
|
||||
</button>
|
||||
<button
|
||||
onClick={() => updateProps({ align: 'center' })}
|
||||
className={`flex-1 py-2 rounded text-sm ${
|
||||
element.props.align === 'center'
|
||||
? 'bg-blue-600 text-white'
|
||||
: 'bg-neutral-700 text-neutral-300'
|
||||
}`}
|
||||
>
|
||||
Center
|
||||
</button>
|
||||
<button
|
||||
onClick={() => updateProps({ align: 'right' })}
|
||||
className={`flex-1 py-2 rounded text-sm ${
|
||||
element.props.align === 'right'
|
||||
? 'bg-blue-600 text-white'
|
||||
: 'bg-neutral-700 text-neutral-300'
|
||||
}`}
|
||||
>
|
||||
Right
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Background */}
|
||||
<div>
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<label className="text-sm text-neutral-400">Background</label>
|
||||
<button
|
||||
onClick={() => updateProps({
|
||||
background: element.props.background
|
||||
? null
|
||||
: { color: 'rgba(0,0,0,0.5)' }
|
||||
})}
|
||||
className={`w-12 h-6 rounded-full transition-colors ${
|
||||
element.props.background ? 'bg-blue-600' : 'bg-neutral-600'
|
||||
}`}
|
||||
>
|
||||
<div
|
||||
className={`w-5 h-5 bg-white rounded-full transition-transform ${
|
||||
element.props.background ? 'translate-x-6' : 'translate-x-0.5'
|
||||
}`}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
{element.props.background && (
|
||||
<div className="flex gap-2 items-center">
|
||||
<input
|
||||
type="color"
|
||||
value={element.props.background.color.substring(0, 7)}
|
||||
onChange={(e) => updateProps({ background: { color: e.target.value } })}
|
||||
className="w-10 h-10 rounded cursor-pointer bg-transparent"
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
value={element.props.background.color}
|
||||
onChange={(e) => updateProps({ background: { color: e.target.value } })}
|
||||
className="flex-1 bg-neutral-700 text-white px-3 py-2 rounded text-sm"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default TextInspector;
|
||||
Reference in New Issue
Block a user