+
+
+ {/* Zoom controls */}
+
+ );
+}
+
diff --git a/src/components/ExportModal.tsx b/src/components/ExportModal.tsx
new file mode 100644
index 0000000..191fbc8
--- /dev/null
+++ b/src/components/ExportModal.tsx
@@ -0,0 +1,160 @@
+import { useState } from 'react';
+import {
+ Dialog,
+ DialogContent,
+ DialogDescription,
+ DialogFooter,
+ DialogHeader,
+ DialogTitle,
+ DialogTrigger,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
+import { Label } from '@/components/ui/label';
+import { Switch } from '@/components/ui/switch';
+import { useBadgeStore } from '@/stores/badgeStore';
+import { generateBadgeSVG } from '@/utils/svgGenerators';
+
+export function ExportModal() {
+ const [open, setOpen] = useState(false);
+ const [format, setFormat] = useState<'svg' | 'png' | 'pdf' | 'dxf' | 'ai' | 'eps'>('svg');
+ const [includeDepthMap, setIncludeDepthMap] = useState(false);
+ const [includeWatermark, setIncludeWatermark] = useState(false);
+
+ const geometry = useBadgeStore((state) => state.geometry);
+ const star = useBadgeStore((state) => state.star);
+ const shield = useBadgeStore((state) => state.shield);
+ const arcTexts = useBadgeStore((state) => state.text.arcTexts);
+ const ribbonTexts = useBadgeStore((state) => state.text.ribbonTexts);
+
+ const handleExport = () => {
+ const svgString = generateBadgeSVG(geometry, star, shield, arcTexts, ribbonTexts);
+
+ if (format === 'svg') {
+ // Export as SVG
+ const blob = new Blob([svgString], { type: 'image/svg+xml' });
+ const url = URL.createObjectURL(blob);
+ const link = document.createElement('a');
+ link.href = url;
+ link.download = `badge-${Date.now()}.svg`;
+ link.click();
+ URL.revokeObjectURL(url);
+ } else if (format === 'png') {
+ // Export as PNG
+ const parser = new DOMParser();
+ const doc = parser.parseFromString(svgString, 'image/svg+xml');
+ const svgElement = doc.documentElement;
+
+ const canvas = document.createElement('canvas');
+ const ctx = canvas.getContext('2d');
+ if (!ctx) return;
+
+ const diameterPx = geometry.diameter * 96;
+ canvas.width = diameterPx;
+ canvas.height = diameterPx;
+
+ const img = new Image();
+ const svgBlob = new Blob([svgString], { type: 'image/svg+xml' });
+ const url = URL.createObjectURL(svgBlob);
+
+ img.onload = () => {
+ ctx.drawImage(img, 0, 0);
+ canvas.toBlob((blob) => {
+ if (blob) {
+ const downloadUrl = URL.createObjectURL(blob);
+ const link = document.createElement('a');
+ link.href = downloadUrl;
+ link.download = `badge-${Date.now()}.png`;
+ link.click();
+ URL.revokeObjectURL(downloadUrl);
+ }
+ });
+ URL.revokeObjectURL(url);
+ };
+
+ img.src = url;
+ } else if (format === 'pdf' || format === 'dxf' || format === 'ai' || format === 'eps') {
+ // Placeholder for advanced export formats
+ // In a full implementation, these would use PDFKit.js, DXF exporters, etc.
+ alert(`${format.toUpperCase()} export is coming soon! This requires additional libraries and backend support.`);
+ }
+
+ setOpen(false);
+ };
+
+ return (
+
+ );
+}
+
diff --git a/src/components/HistoryTimeline.tsx b/src/components/HistoryTimeline.tsx
new file mode 100644
index 0000000..1352d6f
--- /dev/null
+++ b/src/components/HistoryTimeline.tsx
@@ -0,0 +1,63 @@
+import { useBadgeStore } from '@/stores/badgeStore';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import { Button } from '@/components/ui/button';
+import { cn } from '@/lib/utils';
+
+export function HistoryTimeline() {
+ const history = useBadgeStore((state) => state.history);
+ const historyIndex = useBadgeStore((state) => state.historyIndex);
+ const undo = useBadgeStore((state) => state.undo);
+ const redo = useBadgeStore((state) => state.redo);
+
+ const goToHistoryIndex = (index: number) => {
+ const currentIndex = historyIndex;
+ if (index < currentIndex) {
+ // Go back
+ for (let i = currentIndex; i > index; i--) {
+ undo();
+ }
+ } else if (index > currentIndex) {
+ // Go forward
+ for (let i = currentIndex; i < index; i++) {
+ redo();
+ }
+ }
+ };
+
+ return (
+
+
+
+
+
+
+ {Math.round(zoom * 100)}%
+
+
+
+
+
+ );
+}
+
diff --git a/src/components/LayerManager.tsx b/src/components/LayerManager.tsx
new file mode 100644
index 0000000..186e3c2
--- /dev/null
+++ b/src/components/LayerManager.tsx
@@ -0,0 +1,125 @@
+import { useBadgeStore } from '@/stores/badgeStore';
+import { BadgeLayer } from '@/types/badge';
+import { Button } from '@/components/ui/button';
+import { Switch } from '@/components/ui/switch';
+import { Label } from '@/components/ui/label';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuItem,
+ DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { GripVertical, Eye, EyeOff, Lock, Unlock, Copy, Trash2, MoreVertical } from 'lucide-react';
+import { useDrag, useDrop } from 'react-dnd';
+
+interface LayerItemProps {
+ layer: BadgeLayer;
+ index: number;
+ moveLayer: (dragIndex: number, hoverIndex: number) => void;
+}
+
+function LayerItem({ layer, index, moveLayer }: LayerItemProps) {
+ const updateLayer = useBadgeStore((state) => {
+ // This would be implemented in the store
+ return () => {};
+ });
+ const deleteLayer = useBadgeStore((state) => {
+ // This would be implemented in the store
+ return () => {};
+ });
+
+ const [{ isDragging }, drag] = useDrag({
+ type: 'layer',
+ item: { index },
+ collect: (monitor) => ({
+ isDragging: monitor.isDragging(),
+ }),
+ });
+
+ const [, drop] = useDrop({
+ accept: 'layer',
+ hover: (draggedItem: { index: number }) => {
+ if (draggedItem.index !== index) {
+ moveLayer(draggedItem.index, index);
+ draggedItem.index = index;
+ }
+ },
+ });
+
+ return (
+ History
+
+ {history.map((_, index) => {
+ const isActive = index === historyIndex;
+ return (
+
+ );
+ })}
+
+ drag(drop(node))}
+ className={`flex items-center gap-2 p-2 rounded border ${
+ isDragging ? 'opacity-50' : ''
+ }`}
+ >
+ {
+ // Update visibility
+ }}
+ />
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+export function LayerManager() {
+ const layers = useBadgeStore((state) => state.layers);
+
+ const moveLayer = (dragIndex: number, hoverIndex: number) => {
+ // This would be implemented in the store
+ console.log('Move layer', dragIndex, hoverIndex);
+ };
+
+ return (
+
+
+
+
+
+
+
+ );
+}
+
diff --git a/src/components/controls/GeometryControls.tsx b/src/components/controls/GeometryControls.tsx
new file mode 100644
index 0000000..849bc80
--- /dev/null
+++ b/src/components/controls/GeometryControls.tsx
@@ -0,0 +1,101 @@
+import { useBadgeStore } from '@/stores/badgeStore';
+import { Label } from '@/components/ui/label';
+import { Slider } from '@/components/ui/slider';
+import { Switch } from '@/components/ui/switch';
+import { Input } from '@/components/ui/input';
+
+export function GeometryControls() {
+ const geometry = useBadgeStore((state) => state.geometry);
+ const setDiameter = useBadgeStore((state) => state.setDiameter);
+ const setStrokeWidth = useBadgeStore((state) => state.setStrokeWidth);
+ const setDualRing = useBadgeStore((state) => state.setDualRing);
+ const setDualRingOffset = useBadgeStore((state) => state.setDualRingOffset);
+
+ return (
+
+
+ Layers
+
+ {layers.length === 0 ? (
+
+ + No layers yet. Layers will appear here as you add elements. +
+ ) : ( + layers.map((layer, index) => ( +
+
+ );
+}
+
diff --git a/src/components/controls/ShieldControls.tsx b/src/components/controls/ShieldControls.tsx
new file mode 100644
index 0000000..8923423
--- /dev/null
+++ b/src/components/controls/ShieldControls.tsx
@@ -0,0 +1,116 @@
+import { useBadgeStore } from '@/stores/badgeStore';
+import { Label } from '@/components/ui/label';
+import { Switch } from '@/components/ui/switch';
+import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
+import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/button';
+import { useState } from 'react';
+
+export function ShieldControls() {
+ const shield = useBadgeStore((state) => state.shield);
+ const setShieldEnabled = useBadgeStore((state) => state.setShieldEnabled);
+ const setShieldQuadrants = useBadgeStore((state) => state.setShieldQuadrants);
+ const setShieldQuadrantImage = useBadgeStore((state) => state.setShieldQuadrantImage);
+ const setShieldQuadrantColor = useBadgeStore((state) => state.setShieldQuadrantColor);
+
+ const handleImageUpload = (index: number, file: File) => {
+ const reader = new FileReader();
+ reader.onload = (e) => {
+ const result = e.target?.result as string;
+ setShieldQuadrantImage(index, result);
+ };
+ reader.readAsDataURL(file);
+ };
+
+ return (
+
+
+ setDiameter(value[0])}
+ className="mt-2"
+ />
+ setDiameter(parseFloat(e.target.value) || 2.0)}
+ className="mt-2"
+ />
+
+
+
+
+ setStrokeWidth(value[0])}
+ className="mt-2"
+ />
+ setStrokeWidth(parseFloat(e.target.value) || 0.05)}
+ className="mt-2"
+ />
+
+
+
+
+
+ {geometry.hasDualRing && (
+
+
+ setDualRingOffset(value[0])}
+ className="mt-2"
+ />
+ setDualRingOffset(parseFloat(e.target.value) || 0.1)}
+ className="mt-2"
+ />
+
+ )}
+
+
+ );
+}
+
diff --git a/src/components/controls/StarControls.tsx b/src/components/controls/StarControls.tsx
new file mode 100644
index 0000000..f4911e9
--- /dev/null
+++ b/src/components/controls/StarControls.tsx
@@ -0,0 +1,123 @@
+import { useBadgeStore } from '@/stores/badgeStore';
+import { Label } from '@/components/ui/label';
+import { Slider } from '@/components/ui/slider';
+import { Switch } from '@/components/ui/switch';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { Input } from '@/components/ui/input';
+
+export function StarControls() {
+ const star = useBadgeStore((state) => state.star);
+ const setStarEnabled = useBadgeStore((state) => state.setStarEnabled);
+ const setStarPoints = useBadgeStore((state) => state.setStarPoints);
+ const setStarInnerRadius = useBadgeStore((state) => state.setStarInnerRadius);
+ const setStarOuterRadius = useBadgeStore((state) => state.setStarOuterRadius);
+ const setStarBevelDepth = useBadgeStore((state) => state.setStarBevelDepth);
+ const setStarMetallic = useBadgeStore((state) => state.setStarMetallic);
+ const setStarScale = useBadgeStore((state) => state.setStarScale);
+
+ return (
+
+
+
+ {shield.enabled && (
+ <>
+
+
+ setShieldQuadrants(parseInt(value) as 1 | 2 | 3 | 4)}
+ className="mt-2"
+ >
+
+
+
+ {Array.from({ length: shield.quadrants }).map((_, index) => (
+
+
+
+
+
+
+
+
+
+
+
+
+ ))}
+
+ )}
+
+
+ setShieldQuadrantColor(index, e.target.value)}
+ className="mt-2 h-10"
+ />
+
+
+
+
+ {
+ const file = e.target.files?.[0];
+ if (file) handleImageUpload(index, file);
+ }}
+ className="mt-2"
+ />
+ {shield.quadrantsData[index]?.imageUrl && (
+
+
+ 
+
+
+ )}
+
+
+ );
+}
+
diff --git a/src/components/controls/TextControls.tsx b/src/components/controls/TextControls.tsx
new file mode 100644
index 0000000..115fed2
--- /dev/null
+++ b/src/components/controls/TextControls.tsx
@@ -0,0 +1,240 @@
+import { useBadgeStore } from '@/stores/badgeStore';
+import { Label } from '@/components/ui/label';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { Slider } from '@/components/ui/slider';
+import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/button';
+import { useState } from 'react';
+import { ArcText, RibbonText } from '@/types/badge';
+
+export function TextControls() {
+ const arcTexts = useBadgeStore((state) => state.text.arcTexts);
+ const ribbonTexts = useBadgeStore((state) => state.text.ribbonTexts);
+ const addArcText = useBadgeStore((state) => state.addArcText);
+ const updateArcText = useBadgeStore((state) => state.updateArcText);
+ const removeArcText = useBadgeStore((state) => state.removeArcText);
+ const addRibbonText = useBadgeStore((state) => state.addRibbonText);
+ const updateRibbonText = useBadgeStore((state) => state.updateRibbonText);
+ const removeRibbonText = useBadgeStore((state) => state.removeRibbonText);
+
+ const [newArcText, setNewArcText] = useState({
+ text: '',
+ position: 'top' as 'top' | 'bottom',
+ fontSize: 12,
+ fontFamily: 'Arial',
+ color: '#000000',
+ curvature: 50,
+ spacing: 1,
+ alignment: 'center' as 'left' | 'center' | 'right',
+ });
+
+ const [newRibbonText, setNewRibbonText] = useState({
+ text: '',
+ fontSize: 12,
+ fontFamily: 'Arial',
+ color: '#000000',
+ x: 0,
+ y: 0,
+ });
+
+ const handleAddArcText = () => {
+ if (newArcText.text) {
+ const arcText: ArcText = {
+ id: Date.now().toString(),
+ ...newArcText,
+ };
+ addArcText(arcText);
+ setNewArcText({
+ text: '',
+ position: 'top',
+ fontSize: 12,
+ fontFamily: 'Arial',
+ color: '#000000',
+ curvature: 50,
+ spacing: 1,
+ alignment: 'center',
+ });
+ }
+ };
+
+ const handleAddRibbonText = () => {
+ if (newRibbonText.text) {
+ const ribbonText: RibbonText = {
+ id: Date.now().toString(),
+ ...newRibbonText,
+ };
+ addRibbonText(ribbonText);
+ setNewRibbonText({
+ text: '',
+ fontSize: 12,
+ fontFamily: 'Arial',
+ color: '#000000',
+ x: 0,
+ y: 0,
+ });
+ }
+ };
+
+ return (
+
+
+
+ {star.enabled && (
+ <>
+
+
+
+
+
+
+
+ setStarInnerRadius(value[0])}
+ className="mt-2"
+ />
+
+
+
+
+ setStarOuterRadius(value[0])}
+ className="mt-2"
+ />
+
+
+
+
+ setStarBevelDepth(value[0])}
+ className="mt-2"
+ />
+
+
+
+
+ setStarScale(value[0])}
+ className="mt-2"
+ />
+
+
+
+
+
+ )}
+
+ {arcTexts.map((arcText) => (
+
+
+
+ ))}
+
+
+
+
+
+
+
+
+ updateArcText(arcText.id, { text: e.target.value })}
+ className="mt-1"
+ />
+
+
+
+
+
+
+
+
+
+ updateArcText(arcText.id, { fontSize: value[0] })}
+ className="mt-2"
+ />
+
+
+
+
+ updateArcText(arcText.id, { color: e.target.value })}
+ className="mt-1 h-10"
+ />
+
+
+
+ setNewArcText({ ...newArcText, text: e.target.value })}
+ />
+
+
+
+
+ {ribbonTexts.map((ribbonText) => (
+
+
+
+ ))}
+
+
+
+
+
+
+
+
+ updateRibbonText(ribbonText.id, { text: e.target.value })}
+ className="mt-1"
+ />
+
+
+
+
+ updateRibbonText(ribbonText.id, { fontSize: value[0] })}
+ className="mt-2"
+ />
+
+
+
+
+ updateRibbonText(ribbonText.id, { color: e.target.value })}
+ className="mt-1 h-10"
+ />
+
+
+
+ setNewRibbonText({ ...newRibbonText, text: e.target.value })}
+ />
+
+
+ {children}
+