-
- );
-}
-
-function App() {
- return (
-
-
- Lade...
;
-
+
return (
- {/* Search bar */}
-
-
{filteredBlocks.length === 0 && (
-
- setSearchQuery(e.target.value)}
- style={{
- width: '100%',
- padding: '4px 8px',
- fontSize: 12,
- border: '1px solid #ddd',
- borderRadius: 4
- }}
- />
-
-
{/* Category filter */}
{categories.map(cat => (
@@ -164,26 +67,6 @@ const BlockLibrary = ({ canvasRef, yjsDoc }) => {
))}
-
- {/* Create block button */}
-
-
-
-
{/* Block grid */}
{filteredBlocks.map(block => (
@@ -191,7 +74,6 @@ const BlockLibrary = ({ canvasRef, yjsDoc }) => {
key={block.id}
draggable
onDragStart={(e) => handleDragStart(e, block)}
- onClick={() => handleInsertBlock(block)}
style={{
border: '1px solid #ddd',
borderRadius: 4,
@@ -199,7 +81,6 @@ const BlockLibrary = ({ canvasRef, yjsDoc }) => {
background: 'white',
cursor: 'grab',
textAlign: 'center',
- position: 'relative',
}}
title={block.name}
>
@@ -210,128 +91,11 @@ const BlockLibrary = ({ canvasRef, yjsDoc }) => {
))}
{block.name}
-
Keine Blöcke gefunden.
- )} - - {/* Create Block Dialog */} - {showCreateDialog && ( -
-
+
-
- Neuen Block erstellen
-
-
- setNewBlockName(e.target.value)}
- style={{
- width: '100%',
- padding: '6px',
- fontSize: 12,
- border: '1px solid #ddd',
- borderRadius: 4,
- }}
- />
-
-
-
- setNewBlockCategory(e.target.value)}
- placeholder="Allgemein"
- style={{
- width: '100%',
- padding: '6px',
- fontSize: 12,
- border: '1px solid #ddd',
- borderRadius: 4,
- }}
- />
-
-
-
-
-
- Keine Blöcke in dieser Kategorie.
)} ); diff --git a/frontend/src/components/CADCanvas.jsx b/frontend/src/components/CADCanvas.jsx index 17620e8..905e435 100644 --- a/frontend/src/components/CADCanvas.jsx +++ b/frontend/src/components/CADCanvas.jsx @@ -43,37 +43,6 @@ const CADCanvas = forwardRef(({ activeTool, setActiveTool, onCanvasReady }, ref) if (shape) fabricRef.current.add(shape); }); fabricRef.current.renderAll(); - }, - // Get selected elements for block creation - getSelectedElements: () => { - if (!fabricRef.current) return []; - const activeObject = fabricRef.current.getActiveObject(); - if (!activeObject) return []; - - // If it's a group, return all objects in the group - if (activeObject.type === 'group') { - return activeObject.getObjects().map(obj => ({ - id: obj.id || Date.now() + Math.random(), - type: obj.type, - ...obj.toObject(['id', 'type', 'left', 'top', 'width', 'height', 'radius', 'x1', 'y1', 'x2', 'y2', 'points', 'fill', 'stroke', 'strokeWidth']) - })); - } - - // If it's a single object, return it - return [{ - id: activeObject.id || Date.now() + Math.random(), - type: activeObject.type, - ...activeObject.toObject(['id', 'type', 'left', 'top', 'width', 'height', 'radius', 'x1', 'y1', 'x2', 'y2', 'points', 'fill', 'stroke', 'strokeWidth']) - }]; - }, - // Generate SVG data for selected elements - generateSvgData: () => { - if (!fabricRef.current) return ''; - const activeObject = fabricRef.current.getActiveObject(); - if (!activeObject) return ''; - - // Clone the object to avoid modifying the original - return activeObject.toSVG(); } })); diff --git a/frontend/src/components/CanvasArea.tsx b/frontend/src/components/CanvasArea.tsx deleted file mode 100644 index e482b5e..0000000 --- a/frontend/src/components/CanvasArea.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import React, { forwardRef } from 'react'; -import './CanvasArea.css'; -import CADCanvas from './CADCanvas'; - -const CanvasArea = forwardRef((_, ref) => { - return ( -
-
- );
-});
-
-export default CanvasArea;
\ No newline at end of file
diff --git a/frontend/src/components/CommandLine.tsx b/frontend/src/components/CommandLine.tsx
deleted file mode 100644
index 019bd8f..0000000
--- a/frontend/src/components/CommandLine.tsx
+++ /dev/null
@@ -1,108 +0,0 @@
-import React, { useState, useRef, useEffect } from 'react';
-import './CommandLine.css';
-
-const CommandLine: React.FC = () => {
- const [command, setCommand] = useState('');
- const [suggestions, setSuggestions] = useState
-
-
- );
-};
-
-export default CommandLine;
\ No newline at end of file
diff --git a/frontend/src/components/LayerPanel.jsx b/frontend/src/components/LayerPanel.jsx
index ad20a8b..132518a 100644
--- a/frontend/src/components/LayerPanel.jsx
+++ b/frontend/src/components/LayerPanel.jsx
@@ -1,214 +1,30 @@
-import React, { useState, useRef } from 'react';
+import React, { useState } from 'react';
-const LayerPanel = ({ layers, setLayers, activeLayer, setActiveLayer, yjsDoc }) => {
+const LayerPanel = ({ layers, setLayers, activeLayer, setActiveLayer }) => {
const [newLayerName, setNewLayerName] = useState('');
- const [editingLayerId, setEditingLayerId] = useState(null);
- const [editingName, setEditingName] = useState('');
- const [filterText, setFilterText] = useState('');
- const [showImportDialog, setShowImportDialog] = useState(false);
- const [importFile, setImportFile] = useState(null);
- const fileInputRef = useRef(null);
const addLayer = () => {
if (!newLayerName.trim()) return;
-
- const newLayer = {
- id: Date.now().toString(),
- name: newLayerName,
- visible: true,
- locked: false,
- color: '#000000',
- lineType: 'solid',
- transparency: 0,
- sortOrder: layers.length
- };
-
- // Add to Yjs document
- if (yjsDoc) {
- yjsDoc.layers.set(newLayer.id, newLayer);
- }
-
- setLayers([...layers, newLayer]);
+ setLayers([...layers, { name: newLayerName, visible: true, locked: false }]);
setNewLayerName('');
};
- const deleteLayer = (id) => {
+ const deleteLayer = (name) => {
if (layers.length <= 1) return;
-
- // Confirmation
- if (!window.confirm('Sind Sie sicher, dass Sie diesen Layer löschen möchten?')) {
- return;
- }
-
- // Remove from Yjs document
- if (yjsDoc) {
- yjsDoc.layers.delete(id);
- }
-
- const updatedLayers = layers.filter(l => l.id !== id);
- setLayers(updatedLayers);
-
- if (activeLayer === id) {
- setActiveLayer(updatedLayers[0]?.id || null);
- }
+ setLayers(layers.filter(l => l.name !== name));
+ if (activeLayer === name) setActiveLayer(layers[0].name);
};
- const toggleVisible = (id) => {
- const updatedLayers = layers.map(l =>
- l.id === id ? { ...l, visible: !l.visible } : l
- );
-
- // Update in Yjs document
- if (yjsDoc) {
- const layer = yjsDoc.layers.get(id);
- if (layer) {
- layer.visible = !layer.visible;
- yjsDoc.layers.set(id, layer);
- }
- }
-
- setLayers(updatedLayers);
+ const toggleVisible = (name) => {
+ setLayers(layers.map(l => l.name === name ? { ...l, visible: !l.visible } : l));
};
- const toggleLocked = (id) => {
- const updatedLayers = layers.map(l =>
- l.id === id ? { ...l, locked: !l.locked } : l
- );
-
- // Update in Yjs document
- if (yjsDoc) {
- const layer = yjsDoc.layers.get(id);
- if (layer) {
- layer.locked = !layer.locked;
- yjsDoc.layers.set(id, layer);
- }
- }
-
- setLayers(updatedLayers);
- };
-
- const startEditing = (id, name) => {
- setEditingLayerId(id);
- setEditingName(name);
- };
-
- const saveEditing = (id) => {
- if (!editingName.trim()) return;
-
- const updatedLayers = layers.map(l =>
- l.id === id ? { ...l, name: editingName } : l
- );
-
- // Update in Yjs document
- if (yjsDoc) {
- const layer = yjsDoc.layers.get(id);
- if (layer) {
- layer.name = editingName;
- yjsDoc.layers.set(id, layer);
- }
- }
-
- setLayers(updatedLayers);
- setEditingLayerId(null);
- setEditingName('');
- };
-
- const cancelEditing = () => {
- setEditingLayerId(null);
- setEditingName('');
- };
-
- const setColor = (id, color) => {
- const updatedLayers = layers.map(l =>
- l.id === id ? { ...l, color } : l
- );
-
- // Update in Yjs document
- if (yjsDoc) {
- const layer = yjsDoc.layers.get(id);
- if (layer) {
- layer.color = color;
- yjsDoc.layers.set(id, layer);
- }
- }
-
- setLayers(updatedLayers);
- };
-
- const setLineType = (id, lineType) => {
- const updatedLayers = layers.map(l =>
- l.id === id ? { ...l, lineType } : l
- );
-
- // Update in Yjs document
- if (yjsDoc) {
- const layer = yjsDoc.layers.get(id);
- if (layer) {
- layer.lineType = lineType;
- yjsDoc.layers.set(id, layer);
- }
- }
-
- setLayers(updatedLayers);
- };
-
- const filteredLayers = layers.filter(layer =>
- layer.name.toLowerCase().includes(filterText.toLowerCase())
- );
-
- const exportLayers = () => {
- const dataStr = JSON.stringify(layers, null, 2);
- const dataUri = 'data:application/json;charset=utf-8,'+ encodeURIComponent(dataStr);
-
- const exportFileDefaultName = 'layers.json';
-
- const linkElement = document.createElement('a');
- linkElement.setAttribute('href', dataUri);
- linkElement.setAttribute('download', exportFileDefaultName);
- linkElement.click();
- };
-
- const handleImportClick = () => {
- fileInputRef.current?.click();
- };
-
- const handleFileChange = (event) => {
- const file = event.target.files[0];
- if (!file) return;
-
- const reader = new FileReader();
- reader.onload = (e) => {
- try {
- const importedLayers = JSON.parse(e.target.result);
-
- // Validate imported layers
- if (Array.isArray(importedLayers)) {
- // Add to Yjs document
- if (yjsDoc) {
- importedLayers.forEach(layer => {
- yjsDoc.layers.set(layer.id, layer);
- });
- }
-
- setLayers(importedLayers);
-
- // Set first layer as active if none is active
- if (!activeLayer && importedLayers.length > 0) {
- setActiveLayer(importedLayers[0].id);
- }
- }
- } catch (error) {
- alert('Fehler beim Importieren der Layer: ' + error.message);
- }
- };
- reader.readAsText(file);
-
- // Reset file input
- event.target.value = '';
+ const toggleLocked = (name) => {
+ setLayers(layers.map(l => l.name === name ? { ...l, locked: !l.locked } : l));
};
return (
-
+
);
};
-export default LayerPanel;
\ No newline at end of file
+export default LayerPanel;
diff --git a/frontend/src/components/PrintPreview/PrintPreview.tsx b/frontend/src/components/PrintPreview/PrintPreview.tsx
deleted file mode 100644
index d82ac33..0000000
--- a/frontend/src/components/PrintPreview/PrintPreview.tsx
+++ /dev/null
@@ -1,364 +0,0 @@
-import React, { useState, useMemo, useCallback, useRef, useEffect } from 'react';
-import type { YjsDocument } from '../../crdt/YjsDocument';
-import {
- preparePrint,
- printPages,
- svgToDataUrl,
- DEFAULT_PRINT_SETTINGS,
- type PrintSettings,
- type PrintResult,
- type PageSize,
- type Orientation,
- type ScalePreset,
-} from '../../services/printService';
-import './PrintPreview.css';
-
-interface PrintPreviewProps {
- yjsDoc: React.RefObject;
- onClose: () => void;
-}
-
-const PAGE_SIZES: PageSize[] = ['a4', 'a3', 'a2', 'a1'];
-const SCALE_PRESETS: ScalePreset[] = ['1:50', '1:100', '1:200', 'custom'];
-
-const FOCUSABLE_SELECTOR =
- 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
-
-const PrintPreview: React.FC = ({ yjsDoc, onClose }) => {
- const [settings, setSettings] = useState({ ...DEFAULT_PRINT_SETTINGS });
- const [currentPage, setCurrentPage] = useState(0);
-
- const modalRef = useRef(null);
- const previouslyFocusedRef = useRef(null);
-
- const printResult: PrintResult | null = useMemo(() => {
- const doc = yjsDoc?.current;
- if (!doc) return null;
- return preparePrint(doc, settings);
- }, [yjsDoc, settings]);
-
- const updateSettings = useCallback((updates: Partial) => {
- setSettings((prev) => ({ ...prev, ...updates }));
- setCurrentPage(0);
- }, []);
-
- const updateTitleBlock = useCallback((updates: Partial>) => {
- setSettings((prev) => ({
- ...prev,
- titleBlockData: { ...prev.titleBlockData!, ...updates },
- }));
- }, []);
-
- const handlePrint = useCallback(() => {
- if (printResult) {
- printPages(printResult);
- }
- }, [printResult]);
-
- // Keyboard accessibility: Escape to close, focus trap, focus management
- useEffect(() => {
- // Store the element that had focus before the modal opened
- previouslyFocusedRef.current = document.activeElement as HTMLElement;
-
- // Focus the first focusable element in the modal
- const modal = modalRef.current;
- if (modal) {
- const focusable = modal.querySelectorAll(FOCUSABLE_SELECTOR);
- if (focusable.length > 0) {
- focusable[0].focus();
- } else {
- modal.focus();
- }
- }
-
- const handleKeyDown = (e: KeyboardEvent) => {
- if (e.key === 'Escape') {
- e.preventDefault();
- onClose();
- return;
- }
-
- if (e.key === 'Tab') {
- const modalEl = modalRef.current;
- if (!modalEl) return;
-
- const focusableElements = modalEl.querySelectorAll(FOCUSABLE_SELECTOR);
- if (focusableElements.length === 0) return;
-
- const first = focusableElements[0];
- const last = focusableElements[focusableElements.length - 1];
-
- if (e.shiftKey) {
- if (document.activeElement === first || !modalEl.contains(document.activeElement)) {
- e.preventDefault();
- last.focus();
- }
- } else {
- if (document.activeElement === last || !modalEl.contains(document.activeElement)) {
- e.preventDefault();
- first.focus();
- }
- }
- }
- };
-
- document.addEventListener('keydown', handleKeyDown);
-
- return () => {
- document.removeEventListener('keydown', handleKeyDown);
- // Restore focus to the trigger element
- if (previouslyFocusedRef.current) {
- previouslyFocusedRef.current.focus();
- }
- };
- }, [onClose]);
-
- if (!printResult) {
- return (
- ) => void;
- getElementById: (id: string) => CADElement | undefined;
-}
-
-interface FabricObjectLike {
- id?: string;
- type?: string;
- left?: number;
- top?: number;
- width?: number;
- height?: number;
- angle?: number;
- fill?: string | null;
- stroke?: string | null;
- strokeWidth?: number;
- strokeDashArray?: number[];
- set: (props: Record) => void;
- setCoords: () => void;
-}
-
-interface FabricCanvasLike {
- getActiveObject: () => FabricObjectLike | null;
- on: (event: string, handler: (...args: unknown[]) => void) => void;
- off: (event: string, handler: (...args: unknown[]) => void) => void;
- renderAll: () => void;
- fire: (event: string, payload?: unknown) => void;
-}
-
-interface CanvasRefLike {
- getCanvas?: () => FabricCanvasLike;
- getSelectedElements?: () => FabricObjectLike[];
-}
-
-interface PropertiesPanelProps {
- canvasRef: React.RefObject;
- yjsDocRef: React.RefObject;
-}
-
-// ─── Helpers ─────────────────────────────────────────────────────────────────
-
-const LINE_TYPE_DASH_MAP: Record = {
- solid: null,
- dashed: [8, 4],
- dotted: [2, 3],
-};
-
-function dashArrayToLineType(dashArray?: number[] | null): 'solid' | 'dashed' | 'dotted' {
- if (!dashArray || dashArray.length === 0) return 'solid';
- if (dashArray[0] <= 2) return 'dotted';
- return 'dashed';
-}
-
-function clampNumber(value: string, min: number, max: number): number {
- const n = parseFloat(value);
- if (Number.isNaN(n)) return min;
- return Math.min(Math.max(n, min), max);
-}
-
-// ─── Component ───────────────────────────────────────────────────────────────
-
-const PropertiesPanel: React.FC = ({ canvasRef, yjsDocRef }) => {
- const [selectedElement, setSelectedElement] = useState(null);
- const [layers, setLayers] = useState([]);
- const [fabricObject, setFabricObject] = useState(null);
- const fabricCanvasRef = useRef(null);
-
- // Debounce timer for Yjs updates (300ms) — no new dependency needed
- const yjsDebounceRef = useRef | null>(null);
-
- // Clear debounce timer on unmount
- useEffect(() => {
- return () => {
- if (yjsDebounceRef.current) {
- clearTimeout(yjsDebounceRef.current);
- }
- };
- }, []);
-
- // ── Sync layers from YjsDocument ──────────────────────────────────────────
- useEffect(() => {
- const yjsDoc = yjsDocRef?.current;
- if (!yjsDoc) return;
-
- const syncLayers = () => {
- const arr: CADLayer[] = [];
- yjsDoc.layers.forEach((layer, id) => {
- arr.push({ ...layer, id });
- });
- arr.sort((a, b) => (a.sortOrder ?? 0) - (b.sortOrder ?? 0));
- setLayers(arr);
- };
-
- syncLayers();
- yjsDoc.layers.observe(syncLayers);
- return () => yjsDoc.layers.unobserve(syncLayers);
- }, [yjsDocRef]);
-
- // ── Sync elements from YjsDocument (for external updates) ─────────────────
- useEffect(() => {
- const yjsDoc = yjsDocRef?.current;
- if (!yjsDoc) return;
-
- const syncElements = () => {
- if (selectedElement) {
- const updated = yjsDoc.getElementById(selectedElement.id);
- if (updated) {
- setSelectedElement(updated);
- }
- }
- };
-
- yjsDoc.elements.observe(syncElements);
- return () => yjsDoc.elements.unobserve(syncElements);
- }, [yjsDocRef, selectedElement]);
-
- // ── Wire fabric selection events ──────────────────────────────────────────
- useEffect(() => {
- const ref = canvasRef?.current;
- if (!ref || !ref.getCanvas) return;
-
- const fabricCanvas = ref.getCanvas();
- if (!fabricCanvas) return;
-
- fabricCanvasRef.current = fabricCanvas;
-
- const handleSelection = () => {
- const active = fabricCanvas.getActiveObject();
- if (!active) {
- setSelectedElement(null);
- setFabricObject(null);
- return;
- }
-
- setFabricObject(active);
-
- // Try to match with YjsDocument element by id
- const yjsDoc = yjsDocRef?.current;
- const elementId = (active as FabricObjectLike).id;
- if (elementId && yjsDoc) {
- const el = yjsDoc.getElementById(elementId);
- if (el) {
- setSelectedElement(el);
- return;
- }
- }
-
- // Fallback: build a transient element from fabric properties
- setSelectedElement({
- id: (active as FabricObjectLike).id ?? 'transient',
- type: (active as FabricObjectLike).type ?? 'unknown',
- layerId: 'default',
- x: active.left ?? 0,
- y: active.top ?? 0,
- width: active.width ?? 0,
- height: active.height ?? 0,
- properties: {
- fill: (active.fill as string) ?? 'transparent',
- stroke: active.stroke ?? '#000000',
- strokeWidth: active.strokeWidth ?? 1,
- rotation: active.angle ?? 0,
- lineType: dashArrayToLineType(active.strokeDashArray),
- },
- });
- };
-
- const handleCleared = () => {
- setSelectedElement(null);
- setFabricObject(null);
- };
-
- fabricCanvas.on('selection:created', handleSelection);
- fabricCanvas.on('selection:updated', handleSelection);
- fabricCanvas.on('selection:cleared', handleCleared);
-
- return () => {
- fabricCanvas.off('selection:created', handleSelection);
- fabricCanvas.off('selection:updated', handleSelection);
- fabricCanvas.off('selection:cleared', handleCleared);
- };
- }, [canvasRef, yjsDocRef]);
-
- // ── Update handlers (Panel → Canvas + YjsDocument) ──────────────────────────
-
- const updateFabricAndYjs = useCallback(
- (updates: Partial & { properties?: Partial }) => {
- if (!selectedElement) return;
-
- // Debounce Yjs write (300ms) — only write after user pauses typing
- if (yjsDebounceRef.current) {
- clearTimeout(yjsDebounceRef.current);
- }
- const elId = selectedElement.id;
- yjsDebounceRef.current = setTimeout(() => {
- const yjsDoc = yjsDocRef?.current;
- if (yjsDoc) {
- yjsDoc.updateElement(elId, updates);
- }
- yjsDebounceRef.current = null;
- }, 300);
-
- // Update fabric object directly (immediate, no debounce)
- const fabricObj = fabricObject;
- const fabricCanvas = fabricCanvasRef.current;
- if (fabricObj && fabricCanvas) {
- if (updates.x !== undefined) fabricObj.set({ left: updates.x });
- if (updates.y !== undefined) fabricObj.set({ top: updates.y });
- if (updates.width !== undefined) fabricObj.set({ width: updates.width });
- if (updates.height !== undefined) fabricObj.set({ height: updates.height });
- if (updates.properties?.rotation !== undefined)
- fabricObj.set({ angle: updates.properties.rotation });
- if (updates.properties?.fill !== undefined)
- fabricObj.set({ fill: updates.properties.fill });
- if (updates.properties?.stroke !== undefined)
- fabricObj.set({ stroke: updates.properties.stroke });
- if (updates.properties?.strokeWidth !== undefined)
- fabricObj.set({ strokeWidth: updates.properties.strokeWidth });
- if (updates.properties?.lineType !== undefined) {
- const dash = LINE_TYPE_DASH_MAP[updates.properties.lineType];
- fabricObj.set({ strokeDashArray: dash });
- }
- fabricObj.setCoords();
- fabricCanvas.renderAll();
- }
-
- // Update local state (immediate, no debounce)
- setSelectedElement((prev) => {
- if (!prev) return prev;
- return {
- ...prev,
- ...updates,
- properties: { ...prev.properties, ...updates.properties },
- };
- });
- },
- [selectedElement, fabricObject, yjsDocRef]
- );
-
- // ── Field change handlers ──────────────────────────────────────────────────
-
- const handleNumberChange = (field: 'x' | 'y' | 'width' | 'height', value: string) => {
- const n = clampNumber(value, -100000, 100000);
- updateFabricAndYjs({ [field]: n });
- };
-
- const handleRotationChange = (value: string) => {
- const n = clampNumber(value, -360, 360);
- updateFabricAndYjs({ properties: { rotation: n } });
- };
-
- const handleFillChange = (value: string) => {
- updateFabricAndYjs({ properties: { fill: value } });
- };
-
- const handleStrokeChange = (value: string) => {
- updateFabricAndYjs({ properties: { stroke: value } });
- };
-
- const handleStrokeWidthChange = (value: string) => {
- const n = clampNumber(value, 0, 100);
- updateFabricAndYjs({ properties: { strokeWidth: n } });
- };
-
- const handleLineTypeChange = (value: 'solid' | 'dashed' | 'dotted') => {
- updateFabricAndYjs({ properties: { lineType: value } });
- };
-
- const handleLayerChange = (value: string) => {
- updateFabricAndYjs({ layerId: value });
- };
-
- // ── Render ──────────────────────────────────────────────────────────────────
-
- if (!selectedElement) {
- return (
- ;
-}
-
-const RibbonBar: React.FC = ({ onTabChange, yjsDoc }) => {
- const [activeTab, setActiveTab] = useState('draw');
- const [showExportMenu, setShowExportMenu] = useState(false);
- const [showImportMenu, setShowImportMenu] = useState(false);
- const [importStatus, setImportStatus] = useState(null);
- const [showPrintPreview, setShowPrintPreview] = useState(false);
- const fileInputRef = useRef(null);
- const pendingImportFormat = useRef('json');
-
- // Refs for dropdown wrappers (for outside-click detection)
- const exportDropdownRef = useRef(null);
- const importDropdownRef = useRef(null);
- // Ref to track the trigger button that opened the print preview (for focus restoration)
- const printTriggerRef = useRef(null);
-
- const tabs = [
- { id: 'draw', label: 'Draw', icon: '✏️' },
- { id: 'modify', label: 'Modify', icon: '🔧' },
- { id: 'annotate', label: 'Annotate', icon: '📝' },
- { id: 'view', label: 'View', icon: '👁️' },
- { id: 'tools', label: 'Tools', icon: '🛠️' },
- ];
-
- const handleTabClick = (tabId: string) => {
- setActiveTab(tabId);
- onTabChange(tabId);
- };
-
- const handleExport = useCallback(async (format: ExportFormat) => {
- setShowExportMenu(false);
- const doc = yjsDoc?.current;
- if (!doc) {
- setImportStatus('Error: No document available');
- setTimeout(() => setImportStatus(null), 3000);
- return;
- }
- try {
- const result: ExportResult = await exportDrawing(doc, format);
- if (!result.success) {
- setImportStatus(`Export error: ${result.error}`);
- setTimeout(() => setImportStatus(null), 5000);
- }
- } catch (e) {
- setImportStatus(`Export error: ${(e as Error).message}`);
- setTimeout(() => setImportStatus(null), 5000);
- }
- }, [yjsDoc]);
-
- const triggerImport = useCallback((format: ImportFormat) => {
- setShowImportMenu(false);
- pendingImportFormat.current = format;
- if (fileInputRef.current) {
- fileInputRef.current.accept = format === 'json' ? '.json,application/json' : '.dxf,application/dxf';
- fileInputRef.current.click();
- }
- }, []);
-
- const handleFileSelected = useCallback(async (e: React.ChangeEvent) => {
- const file = e.target.files?.[0];
- if (!file) return;
- const doc = yjsDoc?.current;
- if (!doc) {
- setImportStatus('Error: No document available');
- setTimeout(() => setImportStatus(null), 3000);
- return;
- }
- try {
- const result: ImportResult = await importDrawing(file, pendingImportFormat.current, doc);
- if (result.success) {
- setImportStatus(`Imported: ${result.elementsImported} elements, ${result.layersImported} layers`);
- } else {
- setImportStatus(`Import failed: ${result.errors.join(', ')}`);
- }
- } catch (err) {
- setImportStatus(`Import error: ${(err as Error).message}`);
- }
- setTimeout(() => setImportStatus(null), 5000);
- if (fileInputRef.current) {
- fileInputRef.current.value = '';
- }
- }, [yjsDoc]);
-
- // Outside-click and Escape close for dropdowns
- useEffect(() => {
- const handleClickOutside = (e: MouseEvent) => {
- const target = e.target as Node;
- if (showExportMenu && exportDropdownRef.current && !exportDropdownRef.current.contains(target)) {
- setShowExportMenu(false);
- }
- if (showImportMenu && importDropdownRef.current && !importDropdownRef.current.contains(target)) {
- setShowImportMenu(false);
- }
- };
-
- const handleKeyDown = (e: KeyboardEvent) => {
- if (e.key === 'Escape') {
- if (showExportMenu) {
- setShowExportMenu(false);
- }
- if (showImportMenu) {
- setShowImportMenu(false);
- }
- }
- };
-
- if (showExportMenu || showImportMenu) {
- document.addEventListener('mousedown', handleClickOutside);
- document.addEventListener('keydown', handleKeyDown);
- }
-
- return () => {
- document.removeEventListener('mousedown', handleClickOutside);
- document.removeEventListener('keydown', handleKeyDown);
- };
- }, [showExportMenu, showImportMenu]);
-
- return (
- ;
- yjsDoc?: React.RefObject;
-}
-
-const SidePanel: React.FC = ({ canvasRef, yjsDoc }) => {
- const [activeTab, setActiveTab] = useState('blocks');
- const [layers, setLayers] = useState([]);
- const [activeLayer, setActiveLayer] = useState('');
- const localCanvasRef = useRef(null);
- const localYjsDocRef = useRef(null);
-
- // Use props if provided, otherwise fall back to local refs
- const effectiveCanvasRef = (canvasRef ?? localCanvasRef) as React.RefObject;
- const effectiveYjsDocRef = (yjsDoc ?? localYjsDocRef) as React.RefObject;
-
- const tabs = [
- { id: 'blocks', label: 'Blocks', icon: '🧱' },
- { id: 'layers', label: 'Layers', icon: '📄' },
- { id: 'properties', label: 'Properties', icon: '⚙️' },
- { id: 'copilot', label: 'KI Copilot', icon: '🤖' },
- ];
-
- // Observe changes in yjsDoc.layers
- useEffect(() => {
- const yjsDocInstance = effectiveYjsDocRef?.current as {
- layers?: {
- forEach: (cb: (layer: Record, id: string) => void) => void;
- observe: (cb: () => void) => void;
- unobserve: (cb: () => void) => void;
- };
- } | null;
- const yjsLayers = yjsDocInstance?.layers;
- if (!yjsLayers) return;
-
- // Function to update layers from yjsDoc
- const updateLayers = () => {
- const layersArray: Array & { id: string }> = [];
- yjsLayers.forEach((layer, id) => {
- layersArray.push({ ...layer, id });
- });
- setLayers(layersArray);
-
- // Set active layer if none is set or if current active layer doesn't exist
- if (!activeLayer || !layersArray.some(layer => layer.id === activeLayer)) {
- if (layersArray.length > 0) {
- setActiveLayer(layersArray[0].id);
- }
- }
- };
-
- // Initial update
- updateLayers();
-
- // Observe changes
- yjsLayers.observe(updateLayers);
-
- // Cleanup observer on unmount
- return () => {
- yjsLayers.unobserve(updateLayers);
- };
- }, [activeLayer, effectiveYjsDocRef]);
-
- const renderContent = () => {
- switch (activeTab) {
- case 'blocks':
- return ).current} />;
- case 'layers':
- return (
- ).current}
- />
- );
- case 'properties':
- return (
-
+ {children}
+
+ );
+};
+
+export const useAuth = () => useContext(AuthContext);
diff --git a/frontend/src/contexts/ThemeContext.tsx b/frontend/src/contexts/ThemeContext.tsx
deleted file mode 100644
index 6d99c08..0000000
--- a/frontend/src/contexts/ThemeContext.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import React, { createContext, useContext, useState, ReactNode } from 'react';
-
-interface ThemeContextType {
- theme: 'light' | 'dark';
- toggleTheme: () => void;
-}
-
-const ThemeContext = createContext(undefined);
-
-interface ThemeProviderProps {
- children: ReactNode;
-}
-
-export const ThemeProvider: React.FC = ({ children }) => {
- const [theme, setTheme] = useState<'light' | 'dark'>('dark');
-
- const toggleTheme = () => {
- setTheme(prevTheme => prevTheme === 'light' ? 'dark' : 'light');
- };
-
- return (
-
- {children}
-
- );
-};
-
-export const useTheme = (): ThemeContextType => {
- const context = useContext(ThemeContext);
- if (!context) {
- throw new Error('useTheme must be used within a ThemeProvider');
- }
- return context;
-};
\ No newline at end of file
diff --git a/frontend/src/crdt/AwarenessManager.ts b/frontend/src/crdt/AwarenessManager.ts
deleted file mode 100644
index 6e8a7c0..0000000
--- a/frontend/src/crdt/AwarenessManager.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-import { Awareness } from 'y-protocols/awareness';
-import * as Y from 'yjs';
-
-export class AwarenessManager {
- awareness: Awareness;
-
- constructor(doc: Y.Doc) {
- this.awareness = new Awareness(doc);
- }
-
- setLocalState(state: Record) {
- this.awareness.setLocalState(state);
- }
-
- getStates(): Map> {
- return this.awareness.getStates();
- }
-
- on(event: 'change', callback: (updates: AwarenessUpdate) => void): void;
- on(event: 'update', callback: (updates: AwarenessUpdate) => void): void;
- on(event: string, callback: (updates: AwarenessUpdate) => void): void {
- this.awareness.on(event as any, callback);
- }
-
- off(event: 'change', callback: (updates: AwarenessUpdate) => void): void;
- off(event: 'update', callback: (updates: AwarenessUpdate) => void): void;
- off(event: string, callback: (updates: AwarenessUpdate) => void): void {
- this.awareness.off(event as any, callback);
- }
-
- destroy() {
- this.awareness.destroy();
- }
-}
-
-type AwarenessUpdate = {
- added: number[];
- updated: number[];
- removed: number[];
-};
\ No newline at end of file
diff --git a/frontend/src/crdt/WebSocketProvider.ts b/frontend/src/crdt/WebSocketProvider.ts
deleted file mode 100644
index 5003440..0000000
--- a/frontend/src/crdt/WebSocketProvider.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import { WebsocketProvider } from 'y-websocket';
-import * as Y from 'yjs';
-
-export class WebSocketProvider {
- provider: WebsocketProvider;
-
- constructor(doc: Y.Doc, projectId: string, jwtToken: string) {
- const proto = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
- const url = `${proto}//${window.location.host}/ws/collab`;
- this.provider = new WebsocketProvider(url, `project:${projectId}`, doc, {
- params: { token: jwtToken }
- });
- }
-
- disconnect() {
- this.provider.disconnect();
- }
-
- connect() {
- this.provider.connect();
- }
-
- destroy() {
- this.provider.destroy();
- }
-}
\ No newline at end of file
diff --git a/frontend/src/crdt/YjsDocument.ts b/frontend/src/crdt/YjsDocument.ts
deleted file mode 100644
index 10b7a27..0000000
--- a/frontend/src/crdt/YjsDocument.ts
+++ /dev/null
@@ -1,151 +0,0 @@
-import * as Y from 'yjs';
-
-type ProjectMeta = {
- id: string;
- name: string;
- createdAt: number;
- updatedAt: number;
-};
-
-type Layer = {
- id: string;
- name: string;
- visible: boolean;
- locked: boolean;
- color?: string;
- lineType?: string;
- transparency?: number;
- sortOrder?: number;
-};
-
-type Element = {
- id: string;
- type: string;
- layerId: string;
- x: number;
- y: number;
- width: number;
- height: number;
- properties: Record;
-};
-
-type Block = {
- id: string;
- name: string;
- elements: string[]; // element IDs
-};
-
-type BlockInstance = {
- id: string;
- blockId: string;
- x: number;
- y: number;
- properties: Record;
-};
-
-export class YjsDocument {
- doc: Y.Doc;
- projectMeta: Y.Map;
- layers: Y.Map;
- elements: Y.Array;
- blocks: Y.Map;
- blockInstances: Y.Array;
-
- constructor() {
- this.doc = new Y.Doc();
- this.projectMeta = this.doc.getMap('projectMeta');
- this.layers = this.doc.getMap('layers');
- this.elements = this.doc.getArray('elements');
- this.blocks = this.doc.getMap('blocks');
- this.blockInstances = this.doc.getArray('blockInstances');
- }
-
- destroy() {
- this.doc.destroy();
- }
-
- // Create a new element
- createElement(element: Element): void {
- this.doc.transact(() => {
- this.elements.push([element]);
- });
- }
-
- // Update an existing element
- updateElement(id: string, updates: Partial): void {
- this.doc.transact(() => {
- const index = this.elements.toArray().findIndex(el => el.id === id);
- if (index !== -1) {
- const currentElement = this.elements.get(index);
- const updatedElement = { ...currentElement, ...updates };
- this.elements.delete(index, 1);
- this.elements.insert(index, [updatedElement]);
- }
- });
- }
-
- // Delete an element
- deleteElement(id: string): void {
- this.doc.transact(() => {
- const index = this.elements.toArray().findIndex(el => el.id === id);
- if (index !== -1) {
- this.elements.delete(index, 1);
- }
- });
- }
-
- // Get all elements
- getElements(): Element[] {
- return this.elements.toArray();
- }
-
- // Get element by ID
- getElementById(id: string): Element | undefined {
- return this.elements.toArray().find(el => el.id === id);
- }
-
- // Helper method to create a rectangle element
- createRectangle(x: number, y: number, width: number, height: number): void {
- const element: Element = {
- id: Date.now().toString(),
- type: 'rect',
- layerId: 'default',
- x,
- y,
- width,
- height,
- properties: {}
- };
- this.createElement(element);
- }
-
- // Helper method to create a circle element
- createCircle(x: number, y: number, radius: number): void {
- const element: Element = {
- id: Date.now().toString(),
- type: 'circle',
- layerId: 'default',
- x: x - radius,
- y: y - radius,
- width: radius * 2,
- height: radius * 2,
- properties: { radius }
- };
- this.createElement(element);
- }
-
- // Helper method to create a line element
- createLine(x1: number, y1: number, x2: number, y2: number): void {
- const element: Element = {
- id: Date.now().toString(),
- type: 'line',
- layerId: 'default',
- x: Math.min(x1, x2),
- y: Math.min(y1, y2),
- width: Math.abs(x2 - x1),
- height: Math.abs(y2 - y1),
- properties: { x1, y1, x2, y2 }
- };
- this.createElement(element);
- }
-}
\ No newline at end of file
diff --git a/frontend/src/crdt/index.ts b/frontend/src/crdt/index.ts
deleted file mode 100644
index 963c7e0..0000000
--- a/frontend/src/crdt/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export { YjsDocument } from './YjsDocument';
-export { WebSocketProvider } from './WebSocketProvider';
-export { useYjsBinding } from './useYjsBinding';
-export { AwarenessManager } from './AwarenessManager';
\ No newline at end of file
diff --git a/frontend/src/crdt/useYjsBinding.ts b/frontend/src/crdt/useYjsBinding.ts
deleted file mode 100644
index 8325afd..0000000
--- a/frontend/src/crdt/useYjsBinding.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import { useEffect, useState } from 'react';
-import * as Y from 'yjs';
-import { YjsDocument } from './YjsDocument';
-
-export const useYjsBinding = (yjsDoc: YjsDocument) => {
- const [doc, setDoc] = useState(yjsDoc.doc);
-
- useEffect(() => {
- const handleUpdate = (update: Uint8Array, origin: any, doc: Y.Doc) => {
- // Trigger re-render by updating state
- setDoc({} as Y.Doc); // Force re-render
-
- // Update rbush index
- updateRbushIndex(yjsDoc);
- };
-
- yjsDoc.doc.on('update', handleUpdate);
-
- return () => {
- yjsDoc.doc.off('update', handleUpdate);
- };
- }, [yjsDoc]);
-
- return doc;
-};
-
-const updateRbushIndex = (yjsDoc: YjsDocument) => {
- // Implementation for updating rbush index with Yjs changes
- // This would integrate with the canvas rendering system
- console.log('Updating rbush index with Yjs changes');
-};
\ No newline at end of file
diff --git a/frontend/src/history/HistoryManager.ts b/frontend/src/history/HistoryManager.ts
deleted file mode 100644
index 942b02f..0000000
--- a/frontend/src/history/HistoryManager.ts
+++ /dev/null
@@ -1,62 +0,0 @@
-import * as Y from 'yjs';
-
-class HistoryManager {
- private undoStack: Uint8Array[] = [];
- private redoStack: Uint8Array[] = [];
- private maxSize: number;
- private doc: Y.Doc;
-
- constructor(doc: Y.Doc, maxSize: number = 100) {
- this.doc = doc;
- this.maxSize = maxSize;
- }
-
- push(update: Uint8Array) {
- this.undoStack.push(update);
- if (this.undoStack.length > this.maxSize) {
- this.undoStack.shift();
- }
- // Clear redo stack when new action is performed
- this.redoStack = [];
- }
-
- undo() {
- if (this.undoStack.length === 0) return false;
-
- const update = this.undoStack.pop();
- if (update) {
- // Apply inverse of the update
- Y.applyUpdate(this.doc, Y.encodeStateAsUpdate(this.doc, Y.createRelativePositionFromJSON(Y.createRelativePositionFromType(update as any))));
- this.redoStack.push(update);
- return true;
- }
- return false;
- }
-
- redo() {
- if (this.redoStack.length === 0) return false;
-
- const update = this.redoStack.pop();
- if (update) {
- Y.applyUpdate(this.doc, update);
- this.undoStack.push(update);
- return true;
- }
- return false;
- }
-
- canUndo(): boolean {
- return this.undoStack.length > 0;
- }
-
- canRedo(): boolean {
- return this.redoStack.length > 0;
- }
-
- clear() {
- this.undoStack = [];
- this.redoStack = [];
- }
-}
-
-export default HistoryManager;
\ No newline at end of file
diff --git a/frontend/src/history/index.ts b/frontend/src/history/index.ts
deleted file mode 100644
index 8442a4b..0000000
--- a/frontend/src/history/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as HistoryManager } from './HistoryManager';
diff --git a/frontend/src/index.css b/frontend/src/index.css
index e44c215..122aedf 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -1,40 +1,8 @@
-:root {
- font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
- line-height: 1.5;
- font-weight: 400;
-
- color-scheme: light dark;
- color: rgba(255, 255, 255, 0.87);
- background-color: #242424;
-
- font-synthesis: none;
- text-rendering: optimizeLegibility;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
+* {
+ box-sizing: border-box;
}
-
-a {
- font-weight: 500;
- color: #646cff;
- text-decoration: inherit;
-}
-
body {
margin: 0;
- display: flex;
- place-items: center;
- min-width: 320px;
- min-height: 100vh;
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+ background: #f0f2f5;
}
-
-h1 {
- font-size: 3.2em;
- line-height: 1.1;
-}
-
-#root {
- max-width: 1280px;
- margin: 0 auto;
- padding: 2rem;
- text-align: center;
-}
\ No newline at end of file
diff --git a/frontend/src/interaction/SelectionEngine.ts b/frontend/src/interaction/SelectionEngine.ts
deleted file mode 100644
index 43ddfcc..0000000
--- a/frontend/src/interaction/SelectionEngine.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-import RBush from 'rbush';
-
-class SelectionEngine {
- private rbush: RBush;
-
- constructor() {
- this.rbush = new RBush();
- }
-
- // Single click selection
- selectSingle(x: number, y: number): any[] {
- // Implementation for single click selection
- return [];
- }
-
- // Window selection (left-to-right)
- selectWindow(startX: number, startY: number, endX: number, endY: number): any[] {
- // Implementation for window selection
- return [];
- }
-
- // Crossing selection (right-to-left)
- selectCrossing(startX: number, startY: number, endX: number, endY: number): any[] {
- // Implementation for crossing selection
- return [];
- }
-
- // Fence selection (polyline crossing)
- selectFence(points: {x: number, y: number}[]): any[] {
- // Implementation for fence selection
- return [];
- }
-
- // Quick-select (by layer/type/color)
- quickSelect(criteria: {layer?: string, type?: string, color?: string}): any[] {
- // Implementation for quick-select
- return [];
- }
-
- // Lasso selection
- selectLasso(points: {x: number, y: number}[]): any[] {
- // Implementation for lasso selection
- return [];
- }
-}
-
-export default SelectionEngine;
diff --git a/frontend/src/interaction/SnapEngine.ts b/frontend/src/interaction/SnapEngine.ts
deleted file mode 100644
index 8dc394a..0000000
--- a/frontend/src/interaction/SnapEngine.ts
+++ /dev/null
@@ -1,86 +0,0 @@
-class SnapEngine {
- private isEnabled: boolean;
- private gridSize: number;
- private tolerance: number;
- private activeZoom: number;
-
- constructor(gridSize: number = 10) {
- this.isEnabled = true;
- this.gridSize = gridSize;
- this.tolerance = 5;
- this.activeZoom = 1;
- }
-
- // Toggle snap on/off with F3
- toggleSnap(): void {
- this.isEnabled = !this.isEnabled;
- }
-
- // Set active zoom level
- setZoom(zoom: number): void {
- this.activeZoom = zoom;
- }
-
- // Snap to grid
- snapToGrid(x: number, y: number): {x: number, y: number} | null {
- if (!this.isEnabled) return null;
- // Implementation for snap to grid
- return null;
- }
-
- // Snap to endpoint
- snapToEndpoint(x: number, y: number): {x: number, y: number} | null {
- if (!this.isEnabled) return null;
- // Implementation for snap to endpoint
- return null;
- }
-
- // Snap to midpoint
- snapToMidpoint(x: number, y: number): {x: number, y: number} | null {
- if (!this.isEnabled) return null;
- // Implementation for snap to midpoint
- return null;
- }
-
- // Snap to center
- snapToCenter(x: number, y: number): {x: number, y: number} | null {
- if (!this.isEnabled) return null;
- // Implementation for snap to center
- return null;
- }
-
- // Snap to intersection
- snapToIntersection(x: number, y: number): {x: number, y: number} | null {
- if (!this.isEnabled) return null;
- // Implementation for snap to intersection
- return null;
- }
-
- // Snap to perpendicular
- snapToPerpendicular(x: number, y: number): {x: number, y: number} | null {
- if (!this.isEnabled) return null;
- // Implementation for snap to perpendicular
- return null;
- }
-
- // Snap to tangent
- snapToTangent(x: number, y: number): {x: number, y: number} | null {
- if (!this.isEnabled) return null;
- // Implementation for snap to tangent
- return null;
- }
-
- // Snap to nearest
- snapToNearest(x: number, y: number): {x: number, y: number} | null {
- if (!this.isEnabled) return null;
- // Implementation for snap to nearest
- return null;
- }
-
- // Render visual snap markers on canvas
- renderSnapMarkers(context: CanvasRenderingContext2D): void {
- // Implementation for rendering snap markers
- }
-}
-
-export default SnapEngine;
diff --git a/frontend/src/interaction/index.ts b/frontend/src/interaction/index.ts
deleted file mode 100644
index e3ac39b..0000000
--- a/frontend/src/interaction/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { default as SelectionEngine } from './SelectionEngine';
-export { default as SnapEngine } from './SnapEngine';
diff --git a/frontend/src/main.tsx b/frontend/src/main.jsx
similarity index 61%
rename from frontend/src/main.tsx
rename to frontend/src/main.jsx
index cbe1cdf..5cc5991 100644
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.jsx
@@ -1,10 +1,10 @@
import React from 'react'
import ReactDOM from 'react-dom/client'
-import App from './App.tsx'
+import App from './App'
import './index.css'
-ReactDOM.createRoot(document.getElementById('root')!).render(
+ReactDOM.createRoot(document.getElementById('root')).render(
,
-)
\ No newline at end of file
+)
diff --git a/frontend/src/pages/Dashboard.jsx b/frontend/src/pages/Dashboard.jsx
new file mode 100644
index 0000000..ea85654
--- /dev/null
+++ b/frontend/src/pages/Dashboard.jsx
@@ -0,0 +1,72 @@
+import React, { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import api from '../services/api';
+import { useAuth } from '../contexts/AuthContext';
+
+const Dashboard = () => {
+ const [drawings, setDrawings] = useState([]);
+ const [loading, setLoading] = useState(true);
+ const { user, logout } = useAuth();
+ const navigate = useNavigate();
+
+ useEffect(() => {
+ api.get('/drawings').then(res => {
+ setDrawings(res.data);
+ setLoading(false);
+ }).catch(() => setLoading(false));
+ }, []);
+
+ const handleCreate = async () => {
+ try {
+ const res = await api.post('/drawings', { name: 'Neue Zeichnung' });
+ navigate(`/editor/${res.data.id}`);
+ } catch (err) {
+ alert('Fehler beim Erstellen');
+ }
+ };
+
+ const handleDelete = async (id) => {
+ if (!confirm('Zeichnung wirklich löschen?')) return;
+ try {
+ await api.delete(`/drawings/${id}`);
+ setDrawings(drawings.filter(d => d.id !== id));
+ } catch (err) {
+ alert('Fehler beim Löschen');
+ }
+ };
+
+ if (loading) return = {};
- yjsDoc.projectMeta.forEach((value, key) => {
- projectMeta[key] = value;
- });
-
- return {
- version: '1.0.0',
- exportedAt: Date.now(),
- projectMeta,
- layers,
- elements,
- };
-}
-
-function downloadBlob(content: string | Blob, filename: string, mimeType: string): void {
- const blob = typeof content === 'string' ? new Blob([content], { type: mimeType }) : content;
- const url = URL.createObjectURL(blob);
- const a = document.createElement('a');
- a.href = url;
- a.download = filename;
- document.body.appendChild(a);
- a.click();
- document.body.removeChild(a);
- URL.revokeObjectURL(url);
-}
-
-// ── JSON Export ───────────────────────────────────────────────────────────────
-
-export function exportJSON(yjsDoc: YjsDocument, filename = 'cad-export.json'): ExportResult {
- try {
- const data = collectExportData(yjsDoc, {});
- const json = JSON.stringify(data, null, 2);
- downloadBlob(json, filename, 'application/json');
- return { success: true, data: json };
- } catch (e) {
- return {
- success: false,
- error: `exportJSON failed: ${(e as Error).message}`,
- };
- }
-}
-
-export function exportJSONString(yjsDoc: YjsDocument): ExportResult {
- try {
- const data = collectExportData(yjsDoc, {});
- const json = JSON.stringify(data, null, 2);
- return { success: true, data: json };
- } catch (e) {
- return {
- success: false,
- error: `exportJSONString failed: ${(e as Error).message}`,
- };
- }
-}
-
-// ── SVG Export ────────────────────────────────────────────────────────────────
-
-export function exportSVG(yjsDoc: YjsDocument, filename = 'cad-export.svg', options: ExportOptions = {}): ExportResult {
- try {
- const data = collectExportData(yjsDoc, options);
-
- let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
- for (const el of data.elements) {
- minX = Math.min(minX, el.x);
- minY = Math.min(minY, el.y);
- maxX = Math.max(maxX, el.x + el.width);
- maxY = Math.max(maxY, el.y + el.height);
- }
- if (data.elements.length === 0) {
- minX = 0; minY = 0; maxX = 100; maxY = 100;
- }
-
- const padding = 10;
- const vbX = minX - padding;
- const vbY = minY - padding;
- const vbW = (maxX - minX) + padding * 2;
- const vbH = (maxY - minY) + padding * 2;
-
- const svgParts: string[] = [];
- svgParts.push(``);
- svgParts.push(`');
- const svg = svgParts.join('\n');
- downloadBlob(svg, filename, 'image/svg+xml');
- return { success: true, data: svg };
- } catch (e) {
- return {
- success: false,
- error: `exportSVG failed: ${(e as Error).message}`,
- };
- }
-}
-
-// ── DXF Export ────────────────────────────────────────────────────────────────
-
-export function exportDXF(yjsDoc: YjsDocument, filename = 'cad-export.dxf', options: ExportOptions = {}): ExportResult {
- try {
- const data = collectExportData(yjsDoc, options);
- const lines: string[] = [];
-
- lines.push('0'); lines.push('SECTION');
- lines.push('2'); lines.push('HEADER');
- lines.push('9'); lines.push('$ACADVER');
- lines.push('1'); lines.push('AC1009');
- lines.push('9'); lines.push('$INSBASE');
- lines.push('10'); lines.push('0.0');
- lines.push('20'); lines.push('0.0');
- lines.push('30'); lines.push('0.0');
- lines.push('0'); lines.push('ENDSEC');
-
- lines.push('0'); lines.push('SECTION');
- lines.push('2'); lines.push('TABLES');
- lines.push('0'); lines.push('TABLE');
- lines.push('2'); lines.push('LAYER');
- lines.push('70'); lines.push(String(data.layers.length));
-
- for (const layer of data.layers) {
- const color = layer.color || '#000000';
- const rgb = hexToRgb(color);
- const aci = rgbToAci(rgb.r, rgb.g, rgb.b);
- lines.push('0'); lines.push('LAYER');
- lines.push('2'); lines.push(layer.name || layer.id);
- lines.push('70'); lines.push('0');
- lines.push('62'); lines.push(String(aci));
- lines.push('6'); lines.push(layer.lineType || 'CONTINUOUS');
- }
-
- lines.push('0'); lines.push('ENDTAB');
- lines.push('0'); lines.push('ENDSEC');
-
- lines.push('0'); lines.push('SECTION');
- lines.push('2'); lines.push('ENTITIES');
-
- for (const el of data.elements) {
- const layer = getLayerById(data.layers, el.layerId);
- const layerName = layer?.name || layer?.id || '0';
- const color = el.properties.stroke || layer?.color || '#000000';
- const rgb = hexToRgb(color);
- const aci = rgbToAci(rgb.r, rgb.g, rgb.b);
-
- switch (el.type) {
- case 'line': {
- const x1 = el.properties.x1 ?? el.x;
- const y1 = el.properties.y1 ?? el.y;
- const x2 = el.properties.x2 ?? (el.x + el.width);
- const y2 = el.properties.y2 ?? (el.y + el.height);
- lines.push('0'); lines.push('LINE');
- lines.push('8'); lines.push(layerName);
- lines.push('62'); lines.push(String(aci));
- lines.push('10'); lines.push(String(x1));
- lines.push('20'); lines.push(String(y1));
- lines.push('30'); lines.push('0.0');
- lines.push('11'); lines.push(String(x2));
- lines.push('21'); lines.push(String(y2));
- lines.push('31'); lines.push('0.0');
- break;
- }
- case 'circle': {
- const radius = el.properties.radius ?? el.width / 2;
- const cx = el.x + radius;
- const cy = el.y + radius;
- lines.push('0'); lines.push('CIRCLE');
- lines.push('8'); lines.push(layerName);
- lines.push('62'); lines.push(String(aci));
- lines.push('10'); lines.push(String(cx));
- lines.push('20'); lines.push(String(cy));
- lines.push('30'); lines.push('0.0');
- lines.push('40'); lines.push(String(radius));
- break;
- }
- case 'rect': {
- const x = el.x, y = el.y, w = el.width, h = el.height;
- lines.push('0'); lines.push('LWPOLYLINE');
- lines.push('8'); lines.push(layerName);
- lines.push('62'); lines.push(String(aci));
- lines.push('90'); lines.push('4');
- lines.push('70'); lines.push('1');
- lines.push('10'); lines.push(String(x)); lines.push('20'); lines.push(String(y));
- lines.push('10'); lines.push(String(x + w)); lines.push('20'); lines.push(String(y));
- lines.push('10'); lines.push(String(x + w)); lines.push('20'); lines.push(String(y + h));
- lines.push('10'); lines.push(String(x)); lines.push('20'); lines.push(String(y + h));
- break;
- }
- case 'text': {
- const text = el.properties.text || '';
- const fontSize = el.properties.fontSize || 14;
- lines.push('0'); lines.push('TEXT');
- lines.push('8'); lines.push(layerName);
- lines.push('62'); lines.push(String(aci));
- lines.push('10'); lines.push(String(el.x));
- lines.push('20'); lines.push(String(el.y));
- lines.push('30'); lines.push('0.0');
- lines.push('40'); lines.push(String(fontSize));
- lines.push('1'); lines.push(text);
- break;
- }
- case 'polyline': {
- if (el.properties.points && el.properties.points.length > 0) {
- const pts = el.properties.points;
- lines.push('0'); lines.push('LWPOLYLINE');
- lines.push('8'); lines.push(layerName);
- lines.push('62'); lines.push(String(aci));
- lines.push('90'); lines.push(String(pts.length));
- lines.push('70'); lines.push('0');
- for (const p of pts) {
- lines.push('10'); lines.push(String(p.x));
- lines.push('20'); lines.push(String(p.y));
- }
- }
- break;
- }
- case 'polygon': {
- if (el.properties.points && el.properties.points.length > 0) {
- const pts = el.properties.points;
- lines.push('0'); lines.push('LWPOLYLINE');
- lines.push('8'); lines.push(layerName);
- lines.push('62'); lines.push(String(aci));
- lines.push('90'); lines.push(String(pts.length));
- lines.push('70'); lines.push('1');
- for (const p of pts) {
- lines.push('10'); lines.push(String(p.x));
- lines.push('20'); lines.push(String(p.y));
- }
- }
- break;
- }
- case 'arc': {
- const radius = el.properties.radius ?? el.width / 2;
- const cx = el.x + radius;
- const cy = el.y + radius;
- // M4 fix: Export actual startAngle (group code 50) and endAngle (group code 51)
- const startAngle = el.properties.startAngle ?? 0;
- const endAngle = el.properties.endAngle ?? 360;
- lines.push('0'); lines.push('ARC');
- lines.push('8'); lines.push(layerName);
- lines.push('62'); lines.push(String(aci));
- lines.push('10'); lines.push(String(cx));
- lines.push('20'); lines.push(String(cy));
- lines.push('30'); lines.push('0.0');
- lines.push('40'); lines.push(String(radius));
- lines.push('50'); lines.push(String(startAngle));
- lines.push('51'); lines.push(String(endAngle));
- break;
- }
- default:
- break;
- }
- }
-
- lines.push('0'); lines.push('ENDSEC');
- lines.push('0'); lines.push('EOF');
-
- const dxf = lines.join('\n');
- downloadBlob(dxf, filename, 'application/dxf');
- return { success: true, data: dxf };
- } catch (e) {
- return {
- success: false,
- error: `exportDXF failed: ${(e as Error).message}`,
- };
- }
-}
-
-// ── PDF Export ────────────────────────────────────────────────────────────────
-
-export async function exportPDF(
- yjsDoc: YjsDocument,
- filename = 'cad-export.pdf',
- options: ExportOptions = {}
-): Promise {
- try {
- const data = collectExportData(yjsDoc, options);
-
- const { jsPDF } = await import('jspdf');
-
- const pageSize = options.pageSize || 'a4';
- const orientation = options.landscape ? 'landscape' : 'portrait';
- const pdf = new jsPDF({
- orientation,
- unit: 'mm',
- format: pageSize,
- });
-
- const pageWidth = pdf.internal.pageSize.getWidth();
- const pageHeight = pdf.internal.pageSize.getHeight();
- const margin = 10;
- const drawableW = pageWidth - margin * 2;
- const drawableH = pageHeight - margin * 2;
-
- let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
- for (const el of data.elements) {
- minX = Math.min(minX, el.x);
- minY = Math.min(minY, el.y);
- maxX = Math.max(maxX, el.x + el.width);
- maxY = Math.max(maxY, el.y + el.height);
- }
- if (data.elements.length === 0) {
- minX = 0; minY = 0; maxX = 100; maxY = 100;
- }
-
- const contentW = maxX - minX;
- const contentH = maxY - minY;
- const scale = Math.min(drawableW / contentW, drawableH / contentH, 1);
- const offsetX = margin + (drawableW - contentW * scale) / 2;
- const offsetY = margin + (drawableH - contentH * scale) / 2;
-
- const tx = (x: number) => offsetX + (x - minX) * scale;
- const ty = (y: number) => pageHeight - offsetY - (y - minY) * scale;
-
- for (const el of data.elements) {
- const layer = getLayerById(data.layers, el.layerId);
- const strokeColor = el.properties.stroke || layer?.color || '#000000';
- const rgb = hexToRgb(strokeColor);
- pdf.setDrawColor(rgb.r, rgb.g, rgb.b);
- pdf.setLineWidth((el.properties.strokeWidth || 1) * scale);
-
- const fillColor = el.properties.fill;
- if (fillColor && fillColor !== 'transparent') {
- const fRgb = hexToRgb(fillColor);
- pdf.setFillColor(fRgb.r, fRgb.g, fRgb.b);
- }
-
- switch (el.type) {
- case 'line': {
- const x1 = el.properties.x1 ?? el.x;
- const y1 = el.properties.y1 ?? el.y;
- const x2 = el.properties.x2 ?? (el.x + el.width);
- const y2 = el.properties.y2 ?? (el.y + el.height);
- pdf.line(tx(x1), ty(y1), tx(x2), ty(y2));
- break;
- }
- case 'circle': {
- const radius = el.properties.radius ?? el.width / 2;
- const cx = tx(el.x + radius);
- const cy = ty(el.y + radius);
- pdf.circle(cx, cy, radius * scale, fillColor && fillColor !== 'transparent' ? 'FD' : 'S');
- break;
- }
- case 'rect': {
- const x = tx(el.x);
- const y = ty(el.y + el.height);
- pdf.rect(x, y, el.width * scale, el.height * scale, fillColor && fillColor !== 'transparent' ? 'FD' : 'S');
- break;
- }
- case 'polyline': {
- if (el.properties.points && el.properties.points.length > 1) {
- const pts = el.properties.points;
- for (let i = 0; i < pts.length - 1; i++) {
- pdf.line(tx(pts[i].x), ty(pts[i].y), tx(pts[i + 1].x), ty(pts[i + 1].y));
- }
- }
- break;
- }
- case 'polygon': {
- if (el.properties.points && el.properties.points.length > 2) {
- const pts = el.properties.points;
- for (let i = 0; i < pts.length; i++) {
- const next = (i + 1) % pts.length;
- pdf.line(tx(pts[i].x), ty(pts[i].y), tx(pts[next].x), ty(pts[next].y));
- }
- }
- break;
- }
- case 'text': {
- const text = el.properties.text || '';
- const fontSize = (el.properties.fontSize || 14) * scale;
- pdf.setFontSize(fontSize);
- pdf.text(text, tx(el.x), ty(el.y));
- break;
- }
- case 'arc': {
- const radius = el.properties.radius ?? el.width / 2;
- const cx = tx(el.x + radius);
- const cy = ty(el.y + radius);
- pdf.circle(cx, cy, radius * scale, 'S');
- break;
- }
- default:
- break;
- }
- }
-
- pdf.setFontSize(8);
- pdf.setTextColor(128, 128, 128);
- pdf.text(
- `Exported: ${new Date().toISOString()} | Elements: ${data.elements.length} | Layers: ${data.layers.length}`,
- margin,
- pageHeight - 5
- );
-
- pdf.save(filename);
- return { success: true };
- } catch (e) {
- return {
- success: false,
- error: `exportPDF failed: ${(e as Error).message}`,
- };
- }
-}
-
-// ── Unified Export ─────────────────────────────────────────────────────────────
-
-export type ExportFormat = 'json' | 'svg' | 'dxf' | 'pdf';
-
-export async function exportDrawing(
- yjsDoc: YjsDocument,
- format: ExportFormat,
- filename?: string,
- options?: ExportOptions
-): Promise {
- const ext = format;
- const name = filename || `cad-export.${ext}`;
-
- switch (format) {
- case 'json':
- return exportJSON(yjsDoc, name);
- case 'svg':
- return exportSVG(yjsDoc, name, options);
- case 'dxf':
- return exportDXF(yjsDoc, name, options);
- case 'pdf':
- return exportPDF(yjsDoc, name, options);
- default:
- return {
- success: false,
- error: `Unsupported export format: ${format}`,
- };
- }
-}
diff --git a/frontend/src/services/importService.ts b/frontend/src/services/importService.ts
deleted file mode 100644
index 23dd74b..0000000
--- a/frontend/src/services/importService.ts
+++ /dev/null
@@ -1,487 +0,0 @@
-import type { YjsDocument } from '../crdt/YjsDocument';
-import type {
- CADLayer,
- CADProperties,
- CADElement,
- ImportData,
-} from '../types/cad.types';
-
-export interface ImportResult {
- success: boolean;
- elementsImported: number;
- layersImported: number;
- errors: string[];
- warnings: string[];
-}
-
-// ── JSON Import ───────────────────────────────────────────────────────────────
-
-/**
- * Import a JSON string (from exportJSON) into a YjsDocument.
- * This is the round-trip counterpart to exportJSON.
- * Clears existing elements and layers before importing.
- */
-export function importJSON(jsonString: string, yjsDoc: YjsDocument): ImportResult {
- const errors: string[] = [];
- const warnings: string[] = [];
-
- let data: ImportData;
- try {
- data = JSON.parse(jsonString) as ImportData;
- } catch (e) {
- return {
- success: false,
- elementsImported: 0,
- layersImported: 0,
- errors: [`JSON parse error: ${(e as Error).message}`],
- warnings: [],
- };
- }
-
- if (!data.version || !data.layers || !data.elements) {
- return {
- success: false,
- elementsImported: 0,
- layersImported: 0,
- errors: ['Invalid export format: missing version, layers, or elements'],
- warnings: [],
- };
- }
-
- // Clear existing data
- yjsDoc.doc.transact(() => {
- // Clear elements
- const currentElements = yjsDoc.getElements();
- if (currentElements.length > 0) {
- yjsDoc.elements.delete(0, currentElements.length);
- }
-
- // Clear layers
- const layerIds: string[] = [];
- yjsDoc.layers.forEach((_, id) => {
- layerIds.push(id);
- });
- for (const id of layerIds) {
- yjsDoc.layers.delete(id);
- }
-
- // Clear projectMeta
- const metaKeys: string[] = [];
- yjsDoc.projectMeta.forEach((_, key) => {
- metaKeys.push(key);
- });
- for (const key of metaKeys) {
- yjsDoc.projectMeta.delete(key);
- }
- });
-
- // Import layers
- let layersImported = 0;
- yjsDoc.doc.transact(() => {
- for (const layer of data.layers) {
- if (!layer.id) {
- warnings.push(`Layer without id skipped: ${layer.name || 'unnamed'}`);
- continue;
- }
- const { id, ...layerData } = layer;
- yjsDoc.layers.set(id, layerData as never);
- layersImported++;
- }
- });
-
- // Import elements
- let elementsImported = 0;
- yjsDoc.doc.transact(() => {
- for (const element of data.elements) {
- if (!element.id || !element.type) {
- warnings.push(`Element without id or type skipped`);
- continue;
- }
- yjsDoc.createElement(element as never);
- elementsImported++;
- }
- });
-
- // Import projectMeta
- if (data.projectMeta) {
- yjsDoc.doc.transact(() => {
- for (const [key, value] of Object.entries(data.projectMeta)) {
- yjsDoc.projectMeta.set(key, value as never);
- }
- });
- }
-
- return {
- success: true,
- elementsImported,
- layersImported,
- errors,
- warnings,
- };
-}
-
-/**
- * Import a JSON file from a File object (e.g., from ).
- */
-export async function importJSONFile(file: File, yjsDoc: YjsDocument): Promise {
- const text = await file.text();
- return importJSON(text, yjsDoc);
-}
-
-// ── DXF Import (basic) ────────────────────────────────────────────────────────
-
-interface DxfEntity {
- type: string;
- layer: string;
- color?: number;
- data: Record;
- dataArrays: Record;
-}
-
-/**
- * Parse a DXF string into entities.
- * Supports: LINE, CIRCLE, TEXT, LWPOLYLINE, ARC
- */
-function parseDxf(dxfContent: string): { entities: DxfEntity[]; layers: Map } {
- const lines = dxfContent.split(/\r?\n/);
- const entities: DxfEntity[] = [];
- const layers = new Map();
-
- let i = 0;
- let inEntities = false;
- let inTables = false;
- let inLayerTable = false;
-
- while (i < lines.length) {
- const code = lines[i]?.trim();
- const value = lines[i + 1]?.trim() ?? '';
-
- // Section detection
- if (code === '0' && value === 'SECTION') {
- const sectionName = lines[i + 3]?.trim() ?? '';
- inEntities = sectionName === 'ENTITIES';
- inTables = sectionName === 'TABLES';
- i += 4;
- continue;
- }
-
- if (code === '0' && value === 'ENDSEC') {
- inEntities = false;
- inTables = false;
- inLayerTable = false;
- i += 2;
- continue;
- }
-
- // Parse LAYER table entries
- if (inTables && code === '0' && value === 'TABLE') {
- const tableName = lines[i + 3]?.trim() ?? '';
- inLayerTable = tableName === 'LAYER';
- i += 4;
- continue;
- }
-
- if (inTables && code === '0' && value === 'LAYER' && inLayerTable) {
- // Read layer properties
- let layerName = '';
- let layerColor = '';
- let j = i + 2;
- while (j < lines.length && lines[j]?.trim() !== '0') {
- const c = lines[j]?.trim();
- const v = lines[j + 1]?.trim() ?? '';
- if (c === '2') layerName = v;
- if (c === '62') layerColor = v;
- j += 2;
- }
- if (layerName) {
- layers.set(layerName, { name: layerName, color: layerColor });
- }
- i = j;
- continue;
- }
-
- // Parse entities
- if (inEntities && code === '0' && value !== 'ENDSEC') {
- const entityType = value;
- const entityData: Record = {};
- const entityDataArrays: Record = {};
- let entityLayer = '0';
- let entityColor: number | undefined;
-
- let j = i + 2;
- while (j < lines.length && lines[j]?.trim() !== '0') {
- const c = lines[j]?.trim();
- const v = lines[j + 1]?.trim() ?? '';
- const codeNum = parseInt(c, 10);
- if (c === '8') entityLayer = v;
- if (c === '62') entityColor = parseInt(v, 10);
- // Store last value in entityData (for non-repeated codes)
- entityData[codeNum] = v;
- // Collect all values per group code into arrays (for repeated codes like 10/20)
- if (!entityDataArrays[codeNum]) {
- entityDataArrays[codeNum] = [];
- }
- entityDataArrays[codeNum].push(v);
- j += 2;
- }
-
- entities.push({
- type: entityType,
- layer: entityLayer,
- color: entityColor,
- data: entityData,
- dataArrays: entityDataArrays,
- });
- i = j;
- continue;
- }
-
- i += 2;
- }
-
- return { entities, layers };
-}
-
-/**
- * Import a DXF string into a YjsDocument.
- * Supports basic LINE, CIRCLE, TEXT, LWPOLYLINE, ARC entities.
- * Clears existing elements and layers before importing.
- */
-export function importDXF(dxfContent: string, yjsDoc: YjsDocument): ImportResult {
- const errors: string[] = [];
- const warnings: string[] = [];
-
- const { entities, layers: dxfLayers } = parseDxf(dxfContent);
-
- // Clear existing data (M2 fix: clear canvas and Yjs document before import)
- yjsDoc.doc.transact(() => {
- // Clear elements
- const currentElements = yjsDoc.getElements();
- if (currentElements.length > 0) {
- yjsDoc.elements.delete(0, currentElements.length);
- }
-
- // Clear layers
- const layerIds: string[] = [];
- yjsDoc.layers.forEach((_, id) => {
- layerIds.push(id);
- });
- for (const id of layerIds) {
- yjsDoc.layers.delete(id);
- }
-
- // Clear projectMeta
- const metaKeys: string[] = [];
- yjsDoc.projectMeta.forEach((_, key) => {
- metaKeys.push(key);
- });
- for (const key of metaKeys) {
- yjsDoc.projectMeta.delete(key);
- }
- });
-
- // Import layers
- let layersImported = 0;
- yjsDoc.doc.transact(() => {
- for (const [name, info] of dxfLayers) {
- const layerId = name.replace(/[^a-zA-Z0-9_-]/g, '_');
- if (!yjsDoc.layers.has(layerId)) {
- yjsDoc.layers.set(layerId, {
- id: layerId,
- name,
- visible: true,
- locked: false,
- color: info.color ? aciToHex(parseInt(info.color, 10)) : undefined,
- } as never);
- layersImported++;
- }
- }
-
- // Ensure default layer exists
- if (!yjsDoc.layers.has('default')) {
- yjsDoc.layers.set('default', {
- id: 'default',
- name: 'Default',
- visible: true,
- locked: false,
- } as never);
- layersImported++;
- }
- });
-
- // Import entities
- let elementsImported = 0;
- yjsDoc.doc.transact(() => {
- for (const entity of entities) {
- const layerId = entity.layer.replace(/[^a-zA-Z0-9_-]/g, '_') || 'default';
- const stroke = entity.color ? aciToHex(entity.color) : '#000000';
- const id = `dxf-${Date.now()}-${elementsImported}`;
-
- switch (entity.type) {
- case 'LINE': {
- const x1 = parseFloat(entity.data[10] || '0');
- const y1 = parseFloat(entity.data[20] || '0');
- const x2 = parseFloat(entity.data[11] || '0');
- const y2 = parseFloat(entity.data[21] || '0');
- yjsDoc.createElement({
- id,
- type: 'line',
- layerId,
- x: Math.min(x1, x2),
- y: Math.min(y1, y2),
- width: Math.abs(x2 - x1),
- height: Math.abs(y2 - y1),
- properties: { x1, y1, x2, y2, stroke, strokeWidth: 1 },
- } as never);
- elementsImported++;
- break;
- }
- case 'CIRCLE': {
- const cx = parseFloat(entity.data[10] || '0');
- const cy = parseFloat(entity.data[20] || '0');
- const radius = parseFloat(entity.data[40] || '0');
- yjsDoc.createElement({
- id,
- type: 'circle',
- layerId,
- x: cx - radius,
- y: cy - radius,
- width: radius * 2,
- height: radius * 2,
- properties: { radius, stroke, strokeWidth: 1, fill: 'transparent' },
- } as never);
- elementsImported++;
- break;
- }
- case 'TEXT': {
- const x = parseFloat(entity.data[10] || '0');
- const y = parseFloat(entity.data[20] || '0');
- const fontSize = parseFloat(entity.data[40] || '14');
- const text = entity.data[1] || '';
- yjsDoc.createElement({
- id,
- type: 'text',
- layerId,
- x,
- y,
- width: text.length * fontSize * 0.6,
- height: fontSize,
- properties: { text, fontSize, stroke },
- } as never);
- elementsImported++;
- break;
- }
- case 'LWPOLYLINE': {
- // M1 fix: Use dataArrays to collect repeated group codes 10/20
- // instead of overwriting single values in entityData
- const numVerts = parseInt(entity.data[90] || '0', 10);
- const closed = parseInt(entity.data[70] || '0', 10) === 1;
- const xs = entity.dataArrays[10] || [];
- const ys = entity.dataArrays[20] || [];
- const vertexCount = numVerts > 0 ? numVerts : Math.min(xs.length, ys.length);
- const points: Array<{ x: number; y: number }> = [];
- for (let v = 0; v < vertexCount; v++) {
- const px = parseFloat(xs[v] || '0');
- const py = parseFloat(ys[v] || '0');
- points.push({ x: px, y: py });
- }
- if (points.length > 0) {
- const allXs = points.map(p => p.x);
- const allYs = points.map(p => p.y);
- yjsDoc.createElement({
- id,
- type: closed ? 'polygon' : 'polyline',
- layerId,
- x: Math.min(...allXs),
- y: Math.min(...allYs),
- width: Math.max(...allXs) - Math.min(...allXs),
- height: Math.max(...allYs) - Math.min(...allYs),
- properties: { points, stroke, strokeWidth: 1, fill: closed ? 'transparent' : undefined },
- } as never);
- elementsImported++;
- }
- break;
- }
- case 'ARC': {
- const cx = parseFloat(entity.data[10] || '0');
- const cy = parseFloat(entity.data[20] || '0');
- const radius = parseFloat(entity.data[40] || '0');
- // M4 fix: Read startAngle (group code 50) and endAngle (group code 51)
- const startAngle = entity.data[50] !== undefined ? parseFloat(entity.data[50]) : 0;
- const endAngle = entity.data[51] !== undefined ? parseFloat(entity.data[51]) : 360;
- yjsDoc.createElement({
- id,
- type: 'arc',
- layerId,
- x: cx - radius,
- y: cy - radius,
- width: radius * 2,
- height: radius * 2,
- properties: { radius, stroke, strokeWidth: 1, fill: 'transparent', startAngle, endAngle },
- } as never);
- elementsImported++;
- break;
- }
- default:
- warnings.push(`Unsupported DXF entity type: ${entity.type}`);
- break;
- }
- }
- });
-
- return {
- success: errors.length === 0,
- elementsImported,
- layersImported,
- errors,
- warnings,
- };
-}
-
-/**
- * Import a DXF file from a File object.
- */
-export async function importDXFFile(file: File, yjsDoc: YjsDocument): Promise {
- const text = await file.text();
- return importDXF(text, yjsDoc);
-}
-
-// ── Helpers ───────────────────────────────────────────────────────────────────
-
-function aciToHex(aci: number): string {
- const aciMap: Record = {
- 1: '#ff0000', // red
- 2: '#ffff00', // yellow
- 3: '#00ff00', // green
- 4: '#00ffff', // cyan
- 5: '#0000ff', // blue
- 6: '#ff00ff', // magenta
- 7: '#ffffff', // white
- };
- return aciMap[aci] || '#000000';
-}
-
-// ── Unified Import ────────────────────────────────────────────────────────────
-
-export type ImportFormat = 'json' | 'dxf';
-
-export async function importDrawing(
- file: File,
- format: ImportFormat,
- yjsDoc: YjsDocument
-): Promise {
- switch (format) {
- case 'json':
- return importJSONFile(file, yjsDoc);
- case 'dxf':
- return importDXFFile(file, yjsDoc);
- default:
- return {
- success: false,
- elementsImported: 0,
- layersImported: 0,
- errors: [`Unsupported import format: ${format}`],
- warnings: [],
- };
- }
-}
diff --git a/frontend/src/services/printService.ts b/frontend/src/services/printService.ts
deleted file mode 100644
index 6001499..0000000
--- a/frontend/src/services/printService.ts
+++ /dev/null
@@ -1,387 +0,0 @@
-import type { YjsDocument } from '../crdt/YjsDocument';
-
-export type PageSize = 'a4' | 'a3' | 'a2' | 'a1';
-export type Orientation = 'portrait' | 'landscape';
-export type ScalePreset = '1:50' | '1:100' | '1:200' | 'custom';
-
-export interface PrintSettings {
- pageSize: PageSize;
- orientation: Orientation;
- scale: ScalePreset;
- customScale: number;
- showBorder: boolean;
- showTitleBlock: boolean;
- titleBlockData?: TitleBlockData;
- margin: number;
-}
-
-export interface TitleBlockData {
- title: string;
- author: string;
- date: string;
- scale: string;
- sheet: string;
-}
-
-export interface PageLayout {
- pageWidth: number;
- pageHeight: number;
- drawableWidth: number;
- drawableHeight: number;
- cols: number;
- rows: number;
- totalPages: number;
- scale: number;
- scaleValue: number;
-}
-
-export interface BoundingBox {
- minX: number;
- minY: number;
- width: number;
- height: number;
-}
-
-export interface PrintPage {
- index: number;
- col: number;
- row: number;
- offsetX: number;
- offsetY: number;
- width: number;
- height: number;
- svg: string;
-}
-
-export interface PrintResult {
- settings: PrintSettings;
- layout: PageLayout;
- bbox: BoundingBox;
- pages: PrintPage[];
-}
-
-const PAGE_DIMENSIONS: Record = {
- a4: { width: 210, height: 297 },
- a3: { width: 297, height: 420 },
- a2: { width: 420, height: 594 },
- a1: { width: 594, height: 841 },
-};
-
-const SCALE_VALUES: Record = {
- '1:50': 50,
- '1:100': 100,
- '1:200': 200,
- custom: 100,
-};
-
-export const DEFAULT_PRINT_SETTINGS: PrintSettings = {
- pageSize: 'a4',
- orientation: 'landscape',
- scale: '1:100',
- customScale: 100,
- showBorder: true,
- showTitleBlock: true,
- titleBlockData: {
- title: 'CAD Drawing',
- author: '',
- date: new Date().toISOString().split('T')[0],
- scale: '1:100',
- sheet: '1/1',
- },
- margin: 10,
-};
-
-export function calculateBoundingBox(yjsDoc: YjsDocument): BoundingBox {
- const elements = yjsDoc.getElements();
- if (elements.length === 0) {
- return { minX: 0, minY: 0, width: 100, height: 100 };
- }
-
- let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
- for (const el of elements) {
- minX = Math.min(minX, el.x);
- minY = Math.min(minY, el.y);
- maxX = Math.max(maxX, el.x + el.width);
- maxY = Math.max(maxY, el.y + el.height);
- }
-
- return {
- minX,
- minY,
- width: maxX - minX,
- height: maxY - minY,
- };
-}
-
-export function calculatePageLayout(
- bbox: BoundingBox,
- settings: PrintSettings
-): PageLayout {
- const dims = PAGE_DIMENSIONS[settings.pageSize];
- const pageWidth = settings.orientation === 'landscape' ? dims.height : dims.width;
- const pageHeight = settings.orientation === 'landscape' ? dims.width : dims.height;
-
- const margin = settings.margin;
- const drawableWidth = pageWidth - margin * 2;
- const drawableHeight = pageHeight - margin * 2;
-
- const scaleValue = settings.scale === 'custom' ? settings.customScale : SCALE_VALUES[settings.scale];
- const scale = 1 / scaleValue;
-
- const cadUnitsPerPageW = drawableWidth * scaleValue;
- const cadUnitsPerPageH = drawableHeight * scaleValue;
-
- const cols = Math.max(1, Math.ceil(bbox.width / cadUnitsPerPageW));
- const rows = Math.max(1, Math.ceil(bbox.height / cadUnitsPerPageH));
- const totalPages = cols * rows;
-
- return {
- pageWidth,
- pageHeight,
- drawableWidth,
- drawableHeight,
- cols,
- rows,
- totalPages,
- scale,
- scaleValue,
- };
-}
-
-function escapeXml(text: string): string {
- return text
- .replace(/&/g, '&')
- .replace(//g, '>')
- .replace(/"/g, '"')
- .replace(/'/g, ''');
-}
-
-function generatePageSVG(
- yjsDoc: YjsDocument,
- bbox: BoundingBox,
- layout: PageLayout,
- settings: PrintSettings,
- pageIndex: number,
- col: number,
- row: number
-): string {
- const elements = yjsDoc.getElements();
- const scaleValue = layout.scaleValue;
-
- const cadUnitsPerPageW = layout.drawableWidth * scaleValue;
- const cadUnitsPerPageH = layout.drawableHeight * scaleValue;
-
- const offsetX = bbox.minX + col * cadUnitsPerPageW;
- const offsetY = bbox.minY + row * cadUnitsPerPageH;
-
- const vbW = layout.drawableWidth;
- const vbH = layout.drawableHeight;
-
- const parts: string[] = [];
- parts.push(``);
- parts.push(`');
- return parts.join('\n');
-}
-
-export function preparePrint(
- yjsDoc: YjsDocument,
- settings: PrintSettings
-): PrintResult {
- const bbox = calculateBoundingBox(yjsDoc);
- const layout = calculatePageLayout(bbox, settings);
-
- const pages: PrintPage[] = [];
- for (let row = 0; row < layout.rows; row++) {
- for (let col = 0; col < layout.cols; col++) {
- const index = row * layout.cols + col;
- const cadUnitsPerPageW = layout.drawableWidth * layout.scaleValue;
- const cadUnitsPerPageH = layout.drawableHeight * layout.scaleValue;
- const offsetX = bbox.minX + col * cadUnitsPerPageW;
- const offsetY = bbox.minY + row * cadUnitsPerPageH;
- const visibleW = Math.min(cadUnitsPerPageW, bbox.minX + bbox.width - offsetX);
- const visibleH = Math.min(cadUnitsPerPageH, bbox.minY + bbox.height - offsetY);
-
- pages.push({
- index,
- col,
- row,
- offsetX,
- offsetY,
- width: visibleW,
- height: visibleH,
- svg: generatePageSVG(yjsDoc, bbox, layout, settings, index, col, row),
- });
- }
- }
-
- return {
- settings,
- layout,
- bbox,
- pages,
- };
-}
-
-export function printPages(printResult: PrintResult): void {
- const printWindow = window.open('', '_blank', 'width=800,height=600');
- if (!printWindow) {
- alert('Please allow popups to print.');
- return;
- }
-
- const { layout, pages, settings } = printResult;
-
- const html = `
-
-
-
-CAD Print — ${settings.titleBlockData?.title || 'Drawing'}
-
-
-
-${pages.map(p => ` = new Map();
- private canvas: HTMLElement;
-
- constructor(yjsDoc: YjsDocument, canvas: HTMLElement) {
- this.yjsDoc = yjsDoc;
- this.canvas = canvas;
- this.setupEventListeners();
- }
-
- registerTool(name: string, toolConstructor: ToolConstructor): void {
- this.tools.set(name, toolConstructor);
- }
-
- activateTool(toolName: string): void {
- // Reset current tool if exists
- if (this.activeTool) {
- this.activeTool.reset();
- }
-
- // Create and activate new tool
- const ToolClass = this.tools.get(toolName);
- if (ToolClass) {
- this.activeTool = new ToolClass(this.yjsDoc);
- }
- }
-
- deactivateTool(): void {
- if (this.activeTool) {
- this.activeTool.reset();
- this.activeTool = null;
- }
- }
-
- private setupEventListeners(): void {
- this.canvas.addEventListener('mousedown', this.handleMouseDown.bind(this));
- this.canvas.addEventListener('mousemove', this.handleMouseMove.bind(this));
- this.canvas.addEventListener('mouseup', this.handleMouseUp.bind(this));
- document.addEventListener('keyup', this.handleKeyUp.bind(this));
- }
-
- private handleMouseDown(event: MouseEvent): void {
- if (this.activeTool) {
- this.activeTool.onMouseDown(event);
- }
- }
-
- private handleMouseMove(event: MouseEvent): void {
- if (this.activeTool) {
- this.activeTool.onMouseMove(event);
- }
- }
-
- private handleMouseUp(event: MouseEvent): void {
- if (this.activeTool) {
- this.activeTool.onMouseUp(event);
- }
- }
-
- private handleKeyUp(event: KeyboardEvent): void {
- if (this.activeTool) {
- this.activeTool.onKeyUp(event);
- }
- }
-}
-
-export { ToolManager };
\ No newline at end of file
diff --git a/frontend/src/tools/drawing/ArcTool.ts b/frontend/src/tools/drawing/ArcTool.ts
deleted file mode 100644
index a23b9c3..0000000
--- a/frontend/src/tools/drawing/ArcTool.ts
+++ /dev/null
@@ -1,68 +0,0 @@
-import { Tool } from '../Tool';
-import { YjsDocument } from '../../crdt/YjsDocument';
-
-class ArcTool extends Tool {
- private centerPoint: { x: number; y: number } | null = null;
- private startPoint: { x: number; y: number } | null = null;
-
- constructor(yjsDoc: YjsDocument) {
- super(yjsDoc);
- this.name = 'ArcTool';
- }
-
- onMouseDown(event: MouseEvent): void {
- if (!this.centerPoint) {
- this.centerPoint = { x: event.clientX, y: event.clientY };
- } else if (!this.startPoint) {
- this.startPoint = { x: event.clientX, y: event.clientY };
- } else {
- // Calculate start and end angles and create arc element in Yjs document
- const startAngle = Math.atan2(
- this.startPoint.y - this.centerPoint.y,
- this.startPoint.x - this.centerPoint.x
- );
-
- const endAngle = Math.atan2(
- event.clientY - this.centerPoint.y,
- event.clientX - this.centerPoint.x
- );
-
- const radius = Math.sqrt(
- Math.pow(this.startPoint.x - this.centerPoint.x, 2) +
- Math.pow(this.startPoint.y - this.centerPoint.y, 2)
- );
-
- this.yjsDoc.createArc(
- this.centerPoint.x,
- this.centerPoint.y,
- radius,
- startAngle,
- endAngle
- );
-
- this.reset();
- }
- }
-
- onMouseMove(event: MouseEvent): void {
- // Preview arc while drawing
- }
-
- onMouseUp(event: MouseEvent): void {
- // Handle mouse up if needed
- }
-
- onKeyUp(event: KeyboardEvent): void {
- // Handle key up events
- if (event.key === 'Escape') {
- this.reset();
- }
- }
-
- reset(): void {
- this.centerPoint = null;
- this.startPoint = null;
- }
-}
-
-export { ArcTool };
\ No newline at end of file
diff --git a/frontend/src/tools/drawing/AutoChairPlacementTool.ts b/frontend/src/tools/drawing/AutoChairPlacementTool.ts
deleted file mode 100644
index c9545cc..0000000
--- a/frontend/src/tools/drawing/AutoChairPlacementTool.ts
+++ /dev/null
@@ -1,170 +0,0 @@
-import { Tool } from '../Tool';
-import { YjsDocument } from '../../crdt/YjsDocument';
-
-class AutoChairPlacementTool extends Tool {
- private chairSpacing: number = 60; // Default spacing between chairs
- private chairsPerSide: number = 2; // Default chairs per side for rectangular tables
- private chairsAroundRound: number = 8; // Default chairs around round tables
-
- constructor(yjsDoc: YjsDocument) {
- super(yjsDoc);
- this.name = 'AutoChairPlacementTool';
- }
-
- onMouseDown(event: MouseEvent): void {
- // This tool works on selected tables, not on mouse clicks
- // The actual placement logic would be triggered through a UI action
- // rather than a mouse click on the canvas
- }
-
- onMouseMove(event: MouseEvent): void {
- // No preview needed for this tool
- }
-
- onMouseUp(event: MouseEvent): void {
- // No action needed on mouse up
- }
-
- onKeyUp(event: KeyboardEvent): void {
- // Handle key up events
- if (event.key === 'Escape') {
- this.reset();
- }
- }
-
- reset(): void {
- // Reset any state if needed
- }
-
- // Place chairs around a rectangular table
- placeChairsAroundRectangularTable(table: any): void {
- const { x, y, width, height } = table;
- const chairWidth = 45;
- const chairHeight = 45;
-
- // Calculate chairs per side based on table dimensions
- const chairsOnLongSides = this.chairsPerSide;
- const chairsOnShortSides = Math.max(1, Math.floor(this.chairsPerSide * (Math.min(width, height) / Math.max(width, height))));
-
- // Place chairs on the longer sides (top and bottom)
- for (let i = 0; i < chairsOnLongSides; i++) {
- const positionRatio = (i + 1) / (chairsOnLongSides + 1);
-
- // Top side
- this.yjsDoc.createElement({
- id: crypto.randomUUID() + '_chair_top_' + i,
- type: 'chair',
- layerId: 'default',
- x: x + positionRatio * width - chairWidth / 2,
- y: y - this.chairSpacing - chairHeight,
- width: chairWidth,
- height: chairHeight,
- properties: {}
- });
-
- // Bottom side
- this.yjsDoc.createElement({
- id: crypto.randomUUID() + '_chair_bottom_' + i,
- type: 'chair',
- layerId: 'default',
- x: x + positionRatio * width - chairWidth / 2,
- y: y + height + this.chairSpacing,
- width: chairWidth,
- height: chairHeight,
- properties: {}
- });
- }
-
- // Place chairs on the shorter sides (left and right)
- for (let i = 0; i < chairsOnShortSides; i++) {
- const positionRatio = (i + 1) / (chairsOnShortSides + 1);
-
- // Left side
- this.yjsDoc.createElement({
- id: crypto.randomUUID() + '_chair_left_' + i,
- type: 'chair',
- layerId: 'default',
- x: x - this.chairSpacing - chairWidth,
- y: y + positionRatio * height - chairHeight / 2,
- width: chairWidth,
- height: chairHeight,
- properties: {}
- });
-
- // Right side
- this.yjsDoc.createElement({
- id: crypto.randomUUID() + '_chair_right_' + i,
- type: 'chair',
- layerId: 'default',
- x: x + width + this.chairSpacing,
- y: y + positionRatio * height - chairHeight / 2,
- width: chairWidth,
- height: chairHeight,
- properties: {}
- });
- }
- }
-
- // Place chairs around a round table
- placeChairsAroundRoundTable(table: any): void {
- const { centerX, centerY, radius } = table.properties;
- const chairWidth = 45;
- const chairHeight = 45;
-
- // Place chairs in a circle around the table
- for (let i = 0; i < this.chairsAroundRound; i++) {
- const angle = (2 * Math.PI * i) / this.chairsAroundRound;
- const chairX = centerX + (radius + this.chairSpacing) * Math.cos(angle) - chairWidth / 2;
- const chairY = centerY + (radius + this.chairSpacing) * Math.sin(angle) - chairHeight / 2;
-
- this.yjsDoc.createElement({
- id: crypto.randomUUID() + '_chair_' + i,
- type: 'chair',
- layerId: 'default',
- x: chairX,
- y: chairY,
- width: chairWidth,
- height: chairHeight,
- properties: {}
- });
- }
- }
-
- // Place chairs on selected tables
- placeChairsOnSelectedTables(selectedTableIds: string[]): void {
- // Get all elements from the document
- const elements = this.yjsDoc.getElements();
-
- // Filter for selected tables
- const selectedTables = elements.filter(element =>
- selectedTableIds.includes(element.id) &&
- (element.type === 'rectangular_table' || element.type === 'round_table')
- );
-
- // Place chairs around each selected table
- selectedTables.forEach(table => {
- if (table.type === 'rectangular_table') {
- this.placeChairsAroundRectangularTable(table);
- } else if (table.type === 'round_table') {
- this.placeChairsAroundRoundTable(table);
- }
- });
- }
-
- // Set chair spacing
- setChairSpacing(spacing: number): void {
- this.chairSpacing = spacing;
- }
-
- // Set chairs per side for rectangular tables
- setChairsPerSide(count: number): void {
- this.chairsPerSide = count;
- }
-
- // Set chairs around round tables
- setChairsAroundRound(count: number): void {
- this.chairsAroundRound = count;
- }
-}
-
-export { AutoChairPlacementTool };
\ No newline at end of file
diff --git a/frontend/src/tools/drawing/CapacityDisplayTool.ts b/frontend/src/tools/drawing/CapacityDisplayTool.ts
deleted file mode 100644
index a1808d2..0000000
--- a/frontend/src/tools/drawing/CapacityDisplayTool.ts
+++ /dev/null
@@ -1,75 +0,0 @@
-import { Tool } from '../Tool';
-import { YjsDocument } from '../../crdt/YjsDocument';
-
-class CapacityDisplayTool extends Tool {
- private onCapacityUpdate: (totalCapacity: number, selectedCapacity: number) => void;
-
- constructor(yjsDoc: YjsDocument, onCapacityUpdate?: (totalCapacity: number, selectedCapacity: number) => void) {
- super(yjsDoc);
- this.name = 'CapacityDisplayTool';
- this.onCapacityUpdate = onCapacityUpdate || (() => {});
- }
-
- onMouseDown(event: MouseEvent): void {
- // This tool doesn't create elements on mouse click
- // It displays capacity information based on selected elements or entire drawing
- }
-
- onMouseMove(event: MouseEvent): void {
- // No preview needed for this tool
- }
-
- onMouseUp(event: MouseEvent): void {
- // No action needed on mouse up
- }
-
- onKeyUp(event: KeyboardEvent): void {
- // Handle key up events
- if (event.key === 'Escape') {
- this.reset();
- }
- }
-
- reset(): void {
- // Reset any state if needed
- }
-
- // Calculate capacity for selected tables
- calculateSelectedCapacity(): number {
- // In a real implementation, this would get selected tables from the canvas
- // For now, we'll count all chair elements as selected capacity
- const elements = this.yjsDoc.getElements();
- let count = 0;
- elements.forEach(element => {
- if (element.type === 'chair') {
- count++;
- }
- });
- return count;
- }
-
- // Calculate capacity for entire drawing
- calculateTotalCapacity(): number {
- // Iterate through all elements in the Yjs document
- // and count chairs
- const elements = this.yjsDoc.getElements();
- let count = 0;
- elements.forEach(element => {
- if (element.type === 'chair') {
- count++;
- }
- });
- return count;
- }
-
- // Display capacity information
- displayCapacity(): void {
- const totalCapacity = this.calculateTotalCapacity();
- const selectedCapacity = this.calculateSelectedCapacity();
-
- // Update the UI through the callback
- this.onCapacityUpdate(totalCapacity, selectedCapacity);
- }
-}
-
-export { CapacityDisplayTool };
\ No newline at end of file
diff --git a/frontend/src/tools/drawing/ChairTool.ts b/frontend/src/tools/drawing/ChairTool.ts
deleted file mode 100644
index c2073ea..0000000
--- a/frontend/src/tools/drawing/ChairTool.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-import { Tool } from '../Tool';
-import { YjsDocument } from '../../crdt/YjsDocument';
-
-class ChairTool extends Tool {
- private width: number = 45; // Default chair width
- private height: number = 45; // Default chair height
-
- constructor(yjsDoc: YjsDocument) {
- super(yjsDoc);
- this.name = 'ChairTool';
- }
-
- onMouseDown(event: MouseEvent): void {
- // Create chair element at click position
- const x = event.clientX - this.width / 2;
- const y = event.clientY - this.height / 2;
-
- this.yjsDoc.createElement({
- id: crypto.randomUUID(),
- type: 'chair',
- layerId: 'default',
- x,
- y,
- width: this.width,
- height: this.height,
- properties: {
- // Chair-specific properties can be added here
- }
- });
- }
-
- onMouseMove(event: MouseEvent): void {
- // Preview chair at cursor position
- }
-
- onMouseUp(event: MouseEvent): void {
- // Handle mouse up if needed
- }
-
- onKeyUp(event: KeyboardEvent): void {
- // Handle key up events
- if (event.key === 'Escape') {
- this.reset();
- }
- }
-
- reset(): void {
- // Reset any state if needed
- }
-
- // Set chair dimensions
- setDimensions(width: number, height: number): void {
- this.width = width;
- this.height = height;
- }
-}
-
-export { ChairTool };
\ No newline at end of file
diff --git a/frontend/src/tools/drawing/CircleTool.ts b/frontend/src/tools/drawing/CircleTool.ts
deleted file mode 100644
index e4fcb8f..0000000
--- a/frontend/src/tools/drawing/CircleTool.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-import { Tool } from '../Tool';
-import { YjsDocument } from '../../crdt/YjsDocument';
-
-class CircleTool extends Tool {
- private centerPoint: { x: number; y: number } | null = null;
-
- constructor(yjsDoc: YjsDocument) {
- super(yjsDoc);
- this.name = 'CircleTool';
- }
-
- onMouseDown(event: MouseEvent): void {
- if (!this.centerPoint) {
- this.centerPoint = { x: event.clientX, y: event.clientY };
- } else {
- // Calculate radius and create circle element in Yjs document
- const radius = Math.sqrt(
- Math.pow(event.clientX - this.centerPoint.x, 2) +
- Math.pow(event.clientY - this.centerPoint.y, 2)
- );
- this.yjsDoc.createCircle(this.centerPoint.x, this.centerPoint.y, radius);
- this.centerPoint = null;
- }
- }
-
- onMouseMove(event: MouseEvent): void {
- // Preview circle while dragging
- }
-
- onMouseUp(event: MouseEvent): void {
- // Handle mouse up if needed
- }
-
- onKeyUp(event: KeyboardEvent): void {
- // Handle key up events
- }
-
- reset(): void {
- this.centerPoint = null;
- }
-}
-
-export { CircleTool };
\ No newline at end of file
diff --git a/frontend/src/tools/drawing/DimensionTool.ts b/frontend/src/tools/drawing/DimensionTool.ts
deleted file mode 100644
index bbae64a..0000000
--- a/frontend/src/tools/drawing/DimensionTool.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-import { Tool } from '../Tool';
-import { YjsDocument } from '../../crdt/YjsDocument';
-
-class DimensionTool extends Tool {
- private startPoint: { x: number; y: number } | null = null;
-
- constructor(yjsDoc: YjsDocument) {
- super(yjsDoc);
- this.name = 'DimensionTool';
- }
-
- onMouseDown(event: MouseEvent): void {
- if (!this.startPoint) {
- this.startPoint = { x: event.clientX, y: event.clientY };
- } else {
- // Create dimension element in Yjs document
- this.yjsDoc.createDimension(
- this.startPoint.x,
- this.startPoint.y,
- event.clientX,
- event.clientY
- );
- this.startPoint = null;
- }
- }
-
- onMouseMove(event: MouseEvent): void {
- // Preview dimension while dragging
- }
-
- onMouseUp(event: MouseEvent): void {
- // Handle mouse up if needed
- }
-
- onKeyUp(event: KeyboardEvent): void {
- // Handle key up events
- }
-
- reset(): void {
- this.startPoint = null;
- }
-}
-
-export { DimensionTool };
\ No newline at end of file
diff --git a/frontend/src/tools/drawing/LineTool.ts b/frontend/src/tools/drawing/LineTool.ts
deleted file mode 100644
index 129c599..0000000
--- a/frontend/src/tools/drawing/LineTool.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-import { Tool } from '../Tool';
-import { YjsDocument } from '../../crdt/YjsDocument';
-
-class LineTool extends Tool {
- private startPoint: { x: number; y: number } | null = null;
-
- constructor(yjsDoc: YjsDocument) {
- super(yjsDoc);
- this.name = 'LineTool';
- }
-
- onMouseDown(event: MouseEvent): void {
- if (!this.startPoint) {
- this.startPoint = { x: event.clientX, y: event.clientY };
- } else {
- // Create line element in Yjs document
- this.yjsDoc.createLine(this.startPoint.x, this.startPoint.y, event.clientX, event.clientY);
- this.startPoint = null;
- }
- }
-
- onMouseMove(event: MouseEvent): void {
- // Preview line while dragging
- }
-
- onMouseUp(event: MouseEvent): void {
- // Handle mouse up if needed
- }
-
- onKeyUp(event: KeyboardEvent): void {
- // Handle key up events
- }
-
- reset(): void {
- this.startPoint = null;
- }
-}
-
-export { LineTool };
\ No newline at end of file
diff --git a/frontend/src/tools/drawing/PolygonTool.ts b/frontend/src/tools/drawing/PolygonTool.ts
deleted file mode 100644
index 14efda1..0000000
--- a/frontend/src/tools/drawing/PolygonTool.ts
+++ /dev/null
@@ -1,51 +0,0 @@
-import { Tool } from '../Tool';
-import { YjsDocument } from '../../crdt/YjsDocument';
-
-class PolygonTool extends Tool {
- private points: Array<{ x: number; y: number }> = [];
- private isDrawing: boolean = false;
-
- constructor(yjsDoc: YjsDocument) {
- super(yjsDoc);
- this.name = 'PolygonTool';
- }
-
- onMouseDown(event: MouseEvent): void {
- if (!this.isDrawing) {
- // Start drawing
- this.isDrawing = true;
- this.points = [{ x: event.clientX, y: event.clientY }];
- } else {
- // Add point to polygon
- this.points.push({ x: event.clientX, y: event.clientY });
-
- // If shift key is not pressed, finish the polygon (close it)
- if (!event.shiftKey) {
- this.yjsDoc.createPolygon([...this.points]);
- this.reset();
- }
- }
- }
-
- onMouseMove(event: MouseEvent): void {
- // Preview polygon while drawing
- }
-
- onMouseUp(event: MouseEvent): void {
- // Handle mouse up if needed
- }
-
- onKeyUp(event: KeyboardEvent): void {
- // Handle key up events
- if (event.key === 'Escape') {
- this.reset();
- }
- }
-
- reset(): void {
- this.points = [];
- this.isDrawing = false;
- }
-}
-
-export { PolygonTool };
\ No newline at end of file
diff --git a/frontend/src/tools/drawing/PolylineTool.ts b/frontend/src/tools/drawing/PolylineTool.ts
deleted file mode 100644
index 19a96ea..0000000
--- a/frontend/src/tools/drawing/PolylineTool.ts
+++ /dev/null
@@ -1,51 +0,0 @@
-import { Tool } from '../Tool';
-import { YjsDocument } from '../../crdt/YjsDocument';
-
-class PolylineTool extends Tool {
- private points: Array<{ x: number; y: number }> = [];
- private isDrawing: boolean = false;
-
- constructor(yjsDoc: YjsDocument) {
- super(yjsDoc);
- this.name = 'PolylineTool';
- }
-
- onMouseDown(event: MouseEvent): void {
- if (!this.isDrawing) {
- // Start drawing
- this.isDrawing = true;
- this.points = [{ x: event.clientX, y: event.clientY }];
- } else {
- // Add point to polyline
- this.points.push({ x: event.clientX, y: event.clientY });
-
- // If shift key is not pressed, finish the polyline
- if (!event.shiftKey) {
- this.yjsDoc.createPolyline([...this.points]);
- this.reset();
- }
- }
- }
-
- onMouseMove(event: MouseEvent): void {
- // Preview polyline while drawing
- }
-
- onMouseUp(event: MouseEvent): void {
- // Handle mouse up if needed
- }
-
- onKeyUp(event: KeyboardEvent): void {
- // Handle key up events
- if (event.key === 'Escape') {
- this.reset();
- }
- }
-
- reset(): void {
- this.points = [];
- this.isDrawing = false;
- }
-}
-
-export { PolylineTool };
\ No newline at end of file
diff --git a/frontend/src/tools/drawing/RectTool.ts b/frontend/src/tools/drawing/RectTool.ts
deleted file mode 100644
index 7e29651..0000000
--- a/frontend/src/tools/drawing/RectTool.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-import { Tool } from '../Tool';
-import { YjsDocument } from '../../crdt/YjsDocument';
-
-class RectTool extends Tool {
- private startPoint: { x: number; y: number } | null = null;
-
- constructor(yjsDoc: YjsDocument) {
- super(yjsDoc);
- this.name = 'RectTool';
- }
-
- onMouseDown(event: MouseEvent): void {
- if (!this.startPoint) {
- this.startPoint = { x: event.clientX, y: event.clientY };
- } else {
- // Create rectangle element in Yjs document
- const x = Math.min(this.startPoint.x, event.clientX);
- const y = Math.min(this.startPoint.y, event.clientY);
- const width = Math.abs(event.clientX - this.startPoint.x);
- const height = Math.abs(event.clientY - this.startPoint.y);
- this.yjsDoc.createRectangle(x, y, width, height);
- this.startPoint = null;
- }
- }
-
- onMouseMove(event: MouseEvent): void {
- // Preview rectangle while dragging
- }
-
- onMouseUp(event: MouseEvent): void {
- // Handle mouse up if needed
- }
-
- onKeyUp(event: KeyboardEvent): void {
- // Handle key up events
- }
-
- reset(): void {
- this.startPoint = null;
- }
-}
-
-export { RectTool };
\ No newline at end of file
diff --git a/frontend/src/tools/drawing/RotateSeatingGroupTool.ts b/frontend/src/tools/drawing/RotateSeatingGroupTool.ts
deleted file mode 100644
index f4e55cc..0000000
--- a/frontend/src/tools/drawing/RotateSeatingGroupTool.ts
+++ /dev/null
@@ -1,75 +0,0 @@
-import { Tool } from '../Tool';
-import { YjsDocument } from '../../crdt/YjsDocument';
-
-class RotateSeatingGroupTool extends Tool {
- private selectedElementIds: string[] = [];
- private rotationAngle: number = 90; // Default rotation angle in degrees
-
- constructor(yjsDoc: YjsDocument) {
- super(yjsDoc);
- this.name = 'RotateSeatingGroupTool';
- }
-
- onMouseDown(event: MouseEvent): void {
- // This tool works on selected elements, not on mouse clicks
- // The actual rotation logic would be triggered through a UI action
- }
-
- onMouseMove(event: MouseEvent): void {
- // No preview needed for this tool
- }
-
- onMouseUp(event: MouseEvent): void {
- // No action needed on mouse up
- }
-
- onKeyUp(event: KeyboardEvent): void {
- // Handle key up events
- if (event.key === 'Escape') {
- this.reset();
- }
- }
-
- reset(): void {
- // Reset any state if needed
- this.selectedElementIds = [];
- }
-
- // Rotate selected elements
- rotateSelectedElements(): void {
- // Get all elements from the document
- const elements = this.yjsDoc.getElements();
-
- // Filter for selected elements
- const selectedElements = elements.filter(element =>
- this.selectedElementIds.includes(element.id)
- );
-
- // Rotate each selected element
- selectedElements.forEach(element => {
- // Calculate new rotation (add rotation angle, wrapping at 360 degrees)
- let newRotation = element.properties.rotation || 0;
- newRotation = (newRotation + this.rotationAngle) % 360;
-
- // Update element with new rotation property
- this.yjsDoc.updateElement(element.id, {
- properties: {
- ...element.properties,
- rotation: newRotation
- }
- });
- });
- }
-
- // Set selected elements
- setSelectedElements(elementIds: string[]): void {
- this.selectedElementIds = elementIds;
- }
-
- // Set rotation angle
- setRotationAngle(angle: number): void {
- this.rotationAngle = angle;
- }
-}
-
-export { RotateSeatingGroupTool };
\ No newline at end of file
diff --git a/frontend/src/tools/drawing/SeatingTemplateTool.ts b/frontend/src/tools/drawing/SeatingTemplateTool.ts
deleted file mode 100644
index e2a1ed7..0000000
--- a/frontend/src/tools/drawing/SeatingTemplateTool.ts
+++ /dev/null
@@ -1,340 +0,0 @@
-import { Tool } from '../Tool';
-import { YjsDocument } from '../../crdt/YjsDocument';
-
-type SeatingTemplate = 'bankett' | 'gala' | 'stehempfang' | 'parlament' | 'klasse';
-
-class SeatingTemplateTool extends Tool {
- private template: SeatingTemplate = 'bankett';
- private tableSpacing: number = 150; // Spacing between tables
- private chairSpacing: number = 60; // Spacing between chairs
-
- constructor(yjsDoc: YjsDocument, template: SeatingTemplate = 'bankett') {
- super(yjsDoc);
- this.name = 'SeatingTemplateTool';
- this.template = template;
- }
-
- onMouseDown(event: MouseEvent): void {
- // This tool creates templates at the click position
- const x = event.clientX;
- const y = event.clientY;
-
- switch (this.template) {
- case 'bankett':
- this.createBankettTemplate(x, y);
- break;
- case 'gala':
- this.createGalaTemplate(x, y);
- break;
- case 'stehempfang':
- this.createStehempfangTemplate(x, y);
- break;
- case 'parlament':
- this.createParlamentTemplate(x, y);
- break;
- case 'klasse':
- this.createKlasseTemplate(x, y);
- break;
- }
- }
-
- onMouseMove(event: MouseEvent): void {
- // Preview template at cursor position
- }
-
- onMouseUp(event: MouseEvent): void {
- // Handle mouse up if needed
- }
-
- onKeyUp(event: KeyboardEvent): void {
- // Handle key up events
- if (event.key === 'Escape') {
- this.reset();
- }
- }
-
- reset(): void {
- // Reset any state if needed
- }
-
- // Create Bankett template (long tables with chairs on both sides)
- private createBankettTemplate(x: number, y: number): void {
- const tableWidth = 240;
- const tableHeight = 100;
- const chairWidth = 45;
- const chairHeight = 45;
- const tablesCount = 3;
-
- for (let i = 0; i < tablesCount; i++) {
- const tableX = x + i * (tableWidth + this.tableSpacing);
- const tableY = y;
-
- // Create table
- this.yjsDoc.createElement({
- id: crypto.randomUUID() + '_table_' + i,
- type: 'rectangular_table',
- layerId: 'default',
- x: tableX,
- y: tableY,
- width: tableWidth,
- height: tableHeight,
- properties: {}
- });
-
- // Create chairs on both sides
- const chairsPerSide = 4;
- for (let j = 0; j < chairsPerSide; j++) {
- const positionRatio = (j + 1) / (chairsPerSide + 1);
-
- // Top side chairs
- this.yjsDoc.createElement({
- id: crypto.randomUUID() + '_chair_top_' + i + '_' + j,
- type: 'chair',
- layerId: 'default',
- x: tableX + positionRatio * tableWidth - chairWidth / 2,
- y: tableY - this.chairSpacing - chairHeight,
- width: chairWidth,
- height: chairHeight,
- properties: {}
- });
-
- // Bottom side chairs
- this.yjsDoc.createElement({
- id: crypto.randomUUID() + '_chair_bottom_' + i + '_' + j,
- type: 'chair',
- layerId: 'default',
- x: tableX + positionRatio * tableWidth - chairWidth / 2,
- y: tableY + tableHeight + this.chairSpacing,
- width: chairWidth,
- height: chairHeight,
- properties: {}
- });
- }
- }
- }
-
- // Create Gala template (round tables with chairs around)
- private createGalaTemplate(x: number, y: number): void {
- const tableRadius = 50;
- const tablesPerRow = 3;
- const tablesRows = 2;
-
- for (let i = 0; i < tablesRows; i++) {
- for (let j = 0; j < tablesPerRow; j++) {
- const tableX = x + j * (tableRadius * 2 + this.tableSpacing);
- const tableY = y + i * (tableRadius * 2 + this.tableSpacing);
-
- // Create round table
- this.yjsDoc.createElement({
- id: crypto.randomUUID() + '_table_' + i + '_' + j,
- type: 'round_table',
- layerId: 'default',
- x: tableX - tableRadius,
- y: tableY - tableRadius,
- width: tableRadius * 2,
- height: tableRadius * 2,
- properties: {
- radius: tableRadius,
- centerX: tableX,
- centerY: tableY
- }
- });
-
- // Create chairs around table
- const chairsAround = 8;
- for (let k = 0; k < chairsAround; k++) {
- const angle = (2 * Math.PI * k) / chairsAround;
- const chairX = tableX + (tableRadius + this.chairSpacing) * Math.cos(angle) - 22.5;
- const chairY = tableY + (tableRadius + this.chairSpacing) * Math.sin(angle) - 22.5;
-
- this.yjsDoc.createElement({
- id: crypto.randomUUID() + '_chair_' + i + '_' + j + '_' + k,
- type: 'chair',
- layerId: 'default',
- x: chairX,
- y: chairY,
- width: 45,
- height: 45,
- properties: {}
- });
- }
- }
- }
- }
-
- // Create Stehempfang template (no chairs, just tables for drinks/food)
- private createStehempfangTemplate(x: number, y: number): void {
- const tableWidth = 120;
- const tableHeight = 60;
- const tablesPerRow = 4;
- const tablesRows = 2;
-
- for (let i = 0; i < tablesRows; i++) {
- for (let j = 0; j < tablesPerRow; j++) {
- const tableX = x + j * (tableWidth + this.tableSpacing);
- const tableY = y + i * (tableHeight + this.tableSpacing);
-
- // Create table
- this.yjsDoc.createElement({
- id: crypto.randomUUID() + '_table_' + i + '_' + j,
- type: 'rectangular_table',
- layerId: 'default',
- x: tableX,
- y: tableY,
- width: tableWidth,
- height: tableHeight,
- properties: {}
- });
- }
- }
- }
-
- // Create Parlament template (U-shape with chairs)
- private createParlamentTemplate(x: number, y: number): void {
- const tableWidth = 200;
- const tableHeight = 60;
- const chairWidth = 45;
- const chairHeight = 45;
-
- // Create main table (president's table)
- this.yjsDoc.createElement({
- id: crypto.randomUUID() + '_main_table',
- type: 'rectangular_table',
- layerId: 'default',
- x: x + tableWidth / 2,
- y: y,
- width: tableWidth,
- height: tableHeight,
- properties: {}
- });
-
- // Create side tables (delegates' tables)
- const sideTablesCount = 4;
- for (let i = 0; i < sideTablesCount; i++) {
- // Left side table
- this.yjsDoc.createElement({
- id: crypto.randomUUID() + '_left_table_' + i,
- type: 'rectangular_table',
- layerId: 'default',
- x: x,
- y: y + (i + 1) * (tableHeight + this.tableSpacing),
- width: tableWidth / 2,
- height: tableHeight,
- properties: {}
- });
-
- // Right side table
- this.yjsDoc.createElement({
- id: crypto.randomUUID() + '_right_table_' + i,
- type: 'rectangular_table',
- layerId: 'default',
- x: x + tableWidth + tableWidth / 2,
- y: y + (i + 1) * (tableHeight + this.tableSpacing),
- width: tableWidth / 2,
- height: tableHeight,
- properties: {}
- });
-
- // Create chairs for side tables
- // Left side chairs
- this.yjsDoc.createElement({
- id: crypto.randomUUID() + '_left_chair_' + i,
- type: 'chair',
- layerId: 'default',
- x: x - this.chairSpacing - chairWidth,
- y: y + (i + 1) * (tableHeight + this.tableSpacing) + tableHeight / 2 - chairHeight / 2,
- width: chairWidth,
- height: chairHeight,
- properties: {}
- });
-
- // Right side chairs
- this.yjsDoc.createElement({
- id: crypto.randomUUID() + '_right_chair_' + i,
- type: 'chair',
- layerId: 'default',
- x: x + tableWidth + tableWidth / 2 + tableWidth / 2 + this.chairSpacing,
- y: y + (i + 1) * (tableHeight + this.tableSpacing) + tableHeight / 2 - chairHeight / 2,
- width: chairWidth,
- height: chairHeight,
- properties: {}
- });
- }
- }
-
- // Create Klasse template (U-shape classroom layout open at bottom)
- private createKlasseTemplate(x: number, y: number): void {
- const tableWidth = 120;
- const tableHeight = 60;
- const chairWidth = 45;
- const chairHeight = 45;
-
- // Create teacher's table
- this.yjsDoc.createElement({
- id: crypto.randomUUID() + '_teacher_table',
- type: 'rectangular_table',
- layerId: 'default',
- x: x + tableWidth,
- y: y,
- width: tableWidth,
- height: tableHeight,
- properties: {}
- });
-
- // Create student tables in U-shape (open at bottom)
- const rows = 4;
- const cols = 5;
-
- for (let i = 0; i < rows; i++) {
- for (let j = 0; j < cols; j++) {
- // Create U-shape that is open at the bottom
- // Skip inner tables but keep the bottom row
- if (i > 0 && i < rows - 1 && j > 0 && j < cols - 1) continue;
-
- const tableX = x + j * (tableWidth + this.tableSpacing);
- const tableY = y + (i + 1) * (tableHeight + this.tableSpacing);
-
- // Create table
- this.yjsDoc.createElement({
- id: crypto.randomUUID() + '_student_table_' + i + '_' + j,
- type: 'rectangular_table',
- layerId: 'default',
- x: tableX,
- y: tableY,
- width: tableWidth,
- height: tableHeight,
- properties: {}
- });
-
- // Create chair behind each table
- this.yjsDoc.createElement({
- id: crypto.randomUUID() + '_student_chair_' + i + '_' + j,
- type: 'chair',
- layerId: 'default',
- x: tableX + tableWidth / 2 - chairWidth / 2,
- y: tableY + tableHeight + this.chairSpacing,
- width: chairWidth,
- height: chairHeight,
- properties: {}
- });
- }
- }
- }
-
- // Set template
- setTemplate(template: SeatingTemplate): void {
- this.template = template;
- }
-
- // Set table spacing
- setTableSpacing(spacing: number): void {
- this.tableSpacing = spacing;
- }
-
- // Set chair spacing
- setChairSpacing(spacing: number): void {
- this.chairSpacing = spacing;
- }
-}
-
-export { SeatingTemplateTool };
\ No newline at end of file
diff --git a/frontend/src/tools/drawing/TableTool.ts b/frontend/src/tools/drawing/TableTool.ts
deleted file mode 100644
index 15300a5..0000000
--- a/frontend/src/tools/drawing/TableTool.ts
+++ /dev/null
@@ -1,93 +0,0 @@
-import { Tool } from '../Tool';
-import { YjsDocument } from '../../crdt/YjsDocument';
-
-type TableType = 'rectangular' | 'round';
-
-class TableTool extends Tool {
- private startPoint: { x: number; y: number } | null = null;
- private tableType: TableType = 'rectangular';
- private radius: number = 37.5; // Default radius for round table (75cm diameter)
- private width: number = 120; // Default width for rectangular table
- private height: number = 80; // Default height for rectangular table
-
- constructor(yjsDoc: YjsDocument, tableType: TableType = 'rectangular') {
- super(yjsDoc);
- this.name = 'TableTool';
- this.tableType = tableType;
- }
-
- onMouseDown(event: MouseEvent): void {
- if (!this.startPoint) {
- this.startPoint = { x: event.clientX, y: event.clientY };
- } else {
- // Create table element in Yjs document
- if (this.tableType === 'round') {
- // Create round table (circle)
- const x = this.startPoint.x;
- const y = this.startPoint.y;
- this.yjsDoc.createElement({
- id: crypto.randomUUID(),
- type: 'round_table',
- layerId: 'default',
- x: x - this.radius,
- y: y - this.radius,
- width: this.radius * 2,
- height: this.radius * 2,
- properties: {
- radius: this.radius,
- centerX: x,
- centerY: y
- }
- });
- } else {
- // Create rectangular table (rectangle)
- const x = Math.min(this.startPoint.x, event.clientX);
- const y = Math.min(this.startPoint.y, event.clientY);
- const width = Math.abs(event.clientX - this.startPoint.x);
- const height = Math.abs(event.clientY - this.startPoint.y);
- this.yjsDoc.createElement({
- id: crypto.randomUUID(),
- type: 'rectangular_table',
- layerId: 'default',
- x,
- y,
- width: width || this.width,
- height: height || this.height,
- properties: {}
- });
- }
- this.startPoint = null;
- }
- }
-
- onMouseMove(event: MouseEvent): void {
- // Preview table while dragging
- }
-
- onMouseUp(event: MouseEvent): void {
- // Handle mouse up if needed
- }
-
- onKeyUp(event: KeyboardEvent): void {
- // Handle key up events
- if (event.key === 'Escape') {
- this.reset();
- }
- }
-
- reset(): void {
- this.startPoint = null;
- }
-
- // Set table parameters
- setRadius(radius: number): void {
- this.radius = radius;
- }
-
- setDimensions(width: number, height: number): void {
- this.width = width;
- this.height = height;
- }
-}
-
-export { TableTool };
\ No newline at end of file
diff --git a/frontend/src/tools/drawing/TextTool.ts b/frontend/src/tools/drawing/TextTool.ts
deleted file mode 100644
index 9730053..0000000
--- a/frontend/src/tools/drawing/TextTool.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import { Tool } from '../Tool';
-import { YjsDocument } from '../../crdt/YjsDocument';
-
-class TextTool extends Tool {
- constructor(yjsDoc: YjsDocument) {
- super(yjsDoc);
- this.name = 'TextTool';
- }
-
- onMouseDown(event: MouseEvent): void {
- // Get text input from user
- const text = prompt('Enter text:');
- if (text !== null && text !== '') {
- // Create text element in Yjs document
- this.yjsDoc.createText(event.clientX, event.clientY, text);
- }
- }
-
- onMouseMove(event: MouseEvent): void {
- // No preview needed for text tool
- }
-
- onMouseUp(event: MouseEvent): void {
- // Handle mouse up if needed
- }
-
- onKeyUp(event: KeyboardEvent): void {
- // Handle key up events
- }
-}
-
-export { TextTool };
\ No newline at end of file
diff --git a/frontend/src/tools/drawing/index.ts b/frontend/src/tools/drawing/index.ts
deleted file mode 100644
index b6fe42b..0000000
--- a/frontend/src/tools/drawing/index.ts
+++ /dev/null
@@ -1,49 +0,0 @@
-import { LineTool } from './LineTool';
-import { CircleTool } from './CircleTool';
-import { PolylineTool } from './PolylineTool';
-import { PolygonTool } from './PolygonTool';
-import { RectTool } from './RectTool';
-import { ArcTool } from './ArcTool';
-import { TextTool } from './TextTool';
-import { DimensionTool } from './DimensionTool';
-import { TableTool } from './TableTool';
-import { ChairTool } from './ChairTool';
-import { AutoChairPlacementTool } from './AutoChairPlacementTool';
-import { SeatingTemplateTool } from './SeatingTemplateTool';
-import { CapacityDisplayTool } from './CapacityDisplayTool';
-
-// Export all drawing tools
-export {
- LineTool,
- CircleTool,
- PolylineTool,
- PolygonTool,
- RectTool,
- ArcTool,
- TextTool,
- DimensionTool,
- TableTool,
- ChairTool,
- AutoChairPlacementTool,
- SeatingTemplateTool,
- CapacityDisplayTool
-};
-
-// Tool registry
-const drawingTools = [
- LineTool,
- CircleTool,
- PolylineTool,
- PolygonTool,
- RectTool,
- ArcTool,
- TextTool,
- DimensionTool,
- TableTool,
- ChairTool,
- AutoChairPlacementTool,
- SeatingTemplateTool,
- CapacityDisplayTool
-];
-
-export default drawingTools;
\ No newline at end of file
diff --git a/frontend/src/tools/modification/CopyTool.ts b/frontend/src/tools/modification/CopyTool.ts
deleted file mode 100644
index 0943625..0000000
--- a/frontend/src/tools/modification/CopyTool.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { Tool } from '../Tool';
-import { Canvas } from '../../canvas/Canvas';
-
-export class CopyTool extends Tool {
- name = 'Copy';
- icon = 'copy';
-
- constructor(canvas: Canvas) {
- super(canvas);
- }
-
- async execute(): Promise {
- // Implementation for copy tool
- // Select elements, get base point and target point
- // Create copies of elements in Yjs document
- // Add to undo history
- }
-}
\ No newline at end of file
diff --git a/frontend/src/tools/modification/ExtendTool.ts b/frontend/src/tools/modification/ExtendTool.ts
deleted file mode 100644
index cafeccc..0000000
--- a/frontend/src/tools/modification/ExtendTool.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { Tool } from '../Tool';
-import { Canvas } from '../../canvas/Canvas';
-
-export class ExtendTool extends Tool {
- name = 'Extend';
- icon = 'extend';
-
- constructor(canvas: Canvas) {
- super(canvas);
- }
-
- async execute(): Promise {
- // Implementation for extend tool
- // Select boundary and elements to extend
- // Update Yjs document with extended elements
- // Add to undo history
- }
-}
\ No newline at end of file
diff --git a/frontend/src/tools/modification/FilletTool.ts b/frontend/src/tools/modification/FilletTool.ts
deleted file mode 100644
index 3f9279e..0000000
--- a/frontend/src/tools/modification/FilletTool.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { Tool } from '../Tool';
-import { Canvas } from '../../canvas/Canvas';
-
-export class FilletTool extends Tool {
- name = 'Fillet';
- icon = 'fillet';
-
- constructor(canvas: Canvas) {
- super(canvas);
- }
-
- async execute(): Promise {
- // Implementation for fillet tool
- // Select two elements and radius
- // Update Yjs document with filleted elements
- // Add to undo history
- }
-}
\ No newline at end of file
diff --git a/frontend/src/tools/modification/MirrorTool.ts b/frontend/src/tools/modification/MirrorTool.ts
deleted file mode 100644
index 98c3a8e..0000000
--- a/frontend/src/tools/modification/MirrorTool.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { Tool } from '../Tool';
-import { Canvas } from '../../canvas/Canvas';
-
-export class MirrorTool extends Tool {
- name = 'Mirror';
- icon = 'mirror';
-
- constructor(canvas: Canvas) {
- super(canvas);
- }
-
- async execute(): Promise {
- // Implementation for mirror tool
- // Select elements, get mirror axis
- // Update Yjs document with mirrored positions
- // Add to undo history
- }
-}
\ No newline at end of file
diff --git a/frontend/src/tools/modification/MoveTool.ts b/frontend/src/tools/modification/MoveTool.ts
deleted file mode 100644
index 4418e8c..0000000
--- a/frontend/src/tools/modification/MoveTool.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { Tool } from '../Tool';
-import { Canvas } from '../../canvas/Canvas';
-
-export class MoveTool extends Tool {
- name = 'Move';
- icon = 'move';
-
- constructor(canvas: Canvas) {
- super(canvas);
- }
-
- async execute(): Promise {
- // Implementation for move tool
- // Select elements, get base point and target point
- // Update Yjs document with new positions
- // Add to undo history
- }
-}
\ No newline at end of file
diff --git a/frontend/src/tools/modification/OffsetTool.ts b/frontend/src/tools/modification/OffsetTool.ts
deleted file mode 100644
index d482c9f..0000000
--- a/frontend/src/tools/modification/OffsetTool.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { Tool } from '../Tool';
-import { Canvas } from '../../canvas/Canvas';
-
-export class OffsetTool extends Tool {
- name = 'Offset';
- icon = 'offset';
-
- constructor(canvas: Canvas) {
- super(canvas);
- }
-
- async execute(): Promise {
- // Implementation for offset tool
- // Select elements and distance
- // Update Yjs document with offset elements
- // Add to undo history
- }
-}
\ No newline at end of file
diff --git a/frontend/src/tools/modification/RotateSeatingGroupTool.ts b/frontend/src/tools/modification/RotateSeatingGroupTool.ts
deleted file mode 100644
index 5163cd3..0000000
--- a/frontend/src/tools/modification/RotateSeatingGroupTool.ts
+++ /dev/null
@@ -1,117 +0,0 @@
-import { Tool } from '../Tool';
-import { YjsDocument } from '../../crdt/YjsDocument';
-
-class RotateSeatingGroupTool extends Tool {
- private selectedElements: any[] = [];
- private rotationCenter: { x: number; y: number } | null = null;
- private currentAngle: number = 0;
-
- constructor(yjsDoc: YjsDocument) {
- super(yjsDoc);
- this.name = 'RotateSeatingGroupTool';
- }
-
- onMouseDown(event: MouseEvent): void {
- // This tool works on selected elements, not on mouse clicks
- // The actual rotation logic would be triggered through a UI action
- // rather than a mouse click on the canvas
- }
-
- onMouseMove(event: MouseEvent): void {
- // No preview needed for this tool
- }
-
- onMouseUp(event: MouseEvent): void {
- // No action needed on mouse up
- }
-
- onKeyUp(event: KeyboardEvent): void {
- // Handle key up events
- if (event.key === 'Escape') {
- this.reset();
- }
- }
-
- reset(): void {
- this.selectedElements = [];
- this.rotationCenter = null;
- this.currentAngle = 0;
- }
-
- // Set selected elements for rotation
- setSelectedElements(elements: any[]): void {
- this.selectedElements = elements;
-
- // Calculate rotation center as the centroid of all selected elements
- if (elements.length > 0) {
- let totalX = 0;
- let totalY = 0;
-
- elements.forEach(element => {
- totalX += element.x + element.width / 2;
- totalY += element.y + element.height / 2;
- });
-
- this.rotationCenter = {
- x: totalX / elements.length,
- y: totalY / elements.length
- };
- }
- }
-
- // Rotate selected elements by a given angle
- rotateElements(angle: number): void {
- if (!this.rotationCenter || this.selectedElements.length === 0) return;
-
- // Update current angle
- this.currentAngle += angle;
-
- // Rotate each element around the rotation center
- this.selectedElements.forEach(element => {
- // Calculate current center of element
- const elementCenterX = element.x + element.width / 2;
- const elementCenterY = element.y + element.height / 2;
-
- // Calculate vector from rotation center to element center
- const dx = elementCenterX - this.rotationCenter!.x;
- const dy = elementCenterY - this.rotationCenter!.y;
-
- // Calculate new position after rotation
- const cos = Math.cos(angle);
- const sin = Math.sin(angle);
- const newX = this.rotationCenter!.x + dx * cos - dy * sin;
- const newY = this.rotationCenter!.y + dx * sin + dy * cos;
-
- // Update element position (maintaining original size)
- const newElementX = newX - element.width / 2;
- const newElementY = newY - element.height / 2;
-
- // In a real implementation, this would update the element in the Yjs document
- // For now, we'll just log the new position
- console.log(`Rotating element ${element.id} to (${newElementX}, ${newElementY})`);
-
- // Update element in Yjs document
- this.yjsDoc.updateElement(element.id, {
- x: newElementX,
- y: newElementY
- });
- });
- }
-
- // Rotate by 90 degrees
- rotate90(): void {
- this.rotateElements(Math.PI / 2);
- }
-
- // Rotate by 180 degrees
- rotate180(): void {
- this.rotateElements(Math.PI);
- }
-
- // Rotate by 270 degrees
- rotate270(): void {
- this.rotateElements(Math.PI * 3 / 2);
- }
-}
-
-export { RotateSeatingGroupTool };
\ No newline at end of file
diff --git a/frontend/src/tools/modification/RotateTool.ts b/frontend/src/tools/modification/RotateTool.ts
deleted file mode 100644
index e98639e..0000000
--- a/frontend/src/tools/modification/RotateTool.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { Tool } from '../Tool';
-import { Canvas } from '../../canvas/Canvas';
-
-export class RotateTool extends Tool {
- name = 'Rotate';
- icon = 'rotate';
-
- constructor(canvas: Canvas) {
- super(canvas);
- }
-
- async execute(): Promise {
- // Implementation for rotate tool
- // Select elements, get center point and angle
- // Update Yjs document with rotated positions
- // Add to undo history
- }
-}
\ No newline at end of file
diff --git a/frontend/src/tools/modification/ScaleTool.ts b/frontend/src/tools/modification/ScaleTool.ts
deleted file mode 100644
index 8cbb916..0000000
--- a/frontend/src/tools/modification/ScaleTool.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { Tool } from '../Tool';
-import { Canvas } from '../../canvas/Canvas';
-
-export class ScaleTool extends Tool {
- name = 'Scale';
- icon = 'scale';
-
- constructor(canvas: Canvas) {
- super(canvas);
- }
-
- async execute(): Promise {
- // Implementation for scale tool
- // Select elements, get base point and scale factor
- // Update Yjs document with scaled positions
- // Add to undo history
- }
-}
\ No newline at end of file
diff --git a/frontend/src/tools/modification/TrimTool.ts b/frontend/src/tools/modification/TrimTool.ts
deleted file mode 100644
index cd78628..0000000
--- a/frontend/src/tools/modification/TrimTool.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { Tool } from '../Tool';
-import { Canvas } from '../../canvas/Canvas';
-
-export class TrimTool extends Tool {
- name = 'Trim';
- icon = 'trim';
-
- constructor(canvas: Canvas) {
- super(canvas);
- }
-
- async execute(): Promise {
- // Implementation for trim tool
- // Select boundary and elements to trim
- // Update Yjs document with trimmed elements
- // Add to undo history
- }
-}
\ No newline at end of file
diff --git a/frontend/src/tools/modification/index.ts b/frontend/src/tools/modification/index.ts
deleted file mode 100644
index 6c58bc4..0000000
--- a/frontend/src/tools/modification/index.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-export { MoveTool } from './MoveTool';
-export { CopyTool } from './CopyTool';
-export { RotateTool } from './RotateTool';
-export { ScaleTool } from './ScaleTool';
-export { MirrorTool } from './MirrorTool';
-export { TrimTool } from './TrimTool';
-export { ExtendTool } from './ExtendTool';
-export { FilletTool } from './FilletTool';
-export { OffsetTool } from './OffsetTool';
-export { RotateSeatingGroupTool } from './RotateSeatingGroupTool';
-
-export const modificationTools = [
- MoveTool,
- CopyTool,
- RotateTool,
- ScaleTool,
- MirrorTool,
- TrimTool,
- ExtendTool,
- FilletTool,
- OffsetTool,
- RotateSeatingGroupTool
-];
\ No newline at end of file
diff --git a/frontend/src/types/cad.types.ts b/frontend/src/types/cad.types.ts
deleted file mode 100644
index ced82a7..0000000
--- a/frontend/src/types/cad.types.ts
+++ /dev/null
@@ -1,75 +0,0 @@
-/**
- * Shared CAD type definitions — single source of truth.
- * Import from here instead of duplicating interfaces across services/components.
- */
-
-export interface CADLayer {
- id: string;
- name: string;
- visible: boolean;
- locked: boolean;
- color?: string;
- lineType?: string;
- transparency?: number;
- sortOrder?: number;
-}
-
-export interface CADProperties {
- fill?: string;
- stroke?: string;
- strokeWidth?: number;
- rotation?: number;
- lineType?: 'solid' | 'dashed' | 'dotted';
- radius?: number;
- x1?: number;
- y1?: number;
- x2?: number;
- y2?: number;
- points?: Array<{ x: number; y: number }>;
- text?: string;
- fontSize?: number;
- startAngle?: number;
- endAngle?: number;
- [key: string]: unknown;
-}
-
-export interface CADElement {
- id: string;
- type: string;
- layerId: string;
- x: number;
- y: number;
- width: number;
- height: number;
- properties: CADProperties;
-}
-
-export interface ExportData {
- version: string;
- exportedAt: number;
- projectMeta: Record;
- layers: CADLayer[];
- elements: CADElement[];
-}
-
-export interface ImportData {
- version: string;
- exportedAt: number;
- projectMeta: Record;
- layers: CADLayer[];
- elements: CADElement[];
-}
-
-export interface ExportOptions {
- includeHiddenLayers?: boolean;
- includeInvisibleElements?: boolean;
- pageSize?: 'a4' | 'a3' | 'letter';
- landscape?: boolean;
-}
-
-/** Unified return type for all export functions. */
-export interface ExportResult {
- success: boolean;
- data?: string;
- error?: string;
-}
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
deleted file mode 100644
index 2669312..0000000
--- a/frontend/tsconfig.json
+++ /dev/null
@@ -1,23 +0,0 @@
-{
- "compilerOptions": {
- "target": "ES2020",
- "useDefineForClassFields": true,
- "lib": ["ES2020", "DOM", "DOM.Iterable"],
- "module": "ESNext",
- "skipLibCheck": true,
-
- "moduleResolution": "bundler",
- "allowImportingTsExtensions": true,
- "resolveJsonModule": true,
- "isolatedModules": true,
- "noEmit": true,
- "jsx": "react-jsx",
-
- "strict": true,
- "noUnusedLocals": true,
- "noUnusedParameters": true,
- "noFallthroughCasesInSwitch": true
- },
- "include": ["src"],
- "references": [{ "path": "./tsconfig.node.json" }]
-}
\ No newline at end of file
diff --git a/frontend/tsconfig.node.json b/frontend/tsconfig.node.json
deleted file mode 100644
index 4eb43d0..0000000
--- a/frontend/tsconfig.node.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
- "compilerOptions": {
- "composite": true,
- "skipLibCheck": true,
- "module": "ESNext",
- "moduleResolution": "bundler",
- "allowSyntheticDefaultImports": true,
- "strict": true
- },
- "include": ["vite.config.ts"]
-}
\ No newline at end of file
diff --git a/frontend/vite.config.js b/frontend/vite.config.js
new file mode 100644
index 0000000..fe264af
--- /dev/null
+++ b/frontend/vite.config.js
@@ -0,0 +1,14 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+ plugins: [react()],
+ server: {
+ proxy: {
+ '/api': 'http://localhost:5000',
+ },
+ },
+ preview: {
+ allowedHosts: ['cad.media-on.de', '.media-on.de'],
+ },
+});
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
deleted file mode 100644
index c63992a..0000000
--- a/frontend/vite.config.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
-
-export default defineConfig({
- plugins: [react()],
- server: {
- proxy: {
- '/api': 'http://localhost:3001',
- '/ws': {
- target: 'http://localhost:3001',
- ws: true,
- },
- },
- },
-})
diff --git a/frontend/vitest.config.ts b/frontend/vitest.config.ts
deleted file mode 100644
index 84e40e9..0000000
--- a/frontend/vitest.config.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { defineConfig } from 'vitest/config'
-
-export default defineConfig({
- test: {
- environment: 'jsdom',
- setupFiles: ['./src/test/setup.ts'],
- globals: true
- }
-})
\ No newline at end of file
setNewLayerName(e.target.value)}
style={{ flex: 1, padding: 4, borderRadius: 3, border: '1px solid #ccc' }}
- onKeyDown={(e) => e.key === 'Enter' && addLayer()}
/>
-
-
- setFilterText(e.target.value)}
- style={{ flex: 1, padding: 4, borderRadius: 3, border: '1px solid #ccc' }}
- />
-
-
-
-
-
-
- {filteredLayers.map((layer) => (
-
-
- setActiveLayer(layer.id)}
- style={{
- padding: '6px 8px',
- marginBottom: 4,
- background: activeLayer === layer.id ? '#e6f7ff' : '#fff',
- border: activeLayer === layer.id ? '1px solid #1890ff' : '1px solid #ddd',
- borderRadius: 4,
- cursor: 'pointer',
- display: 'flex',
- alignItems: 'center',
- justifyContent: 'space-between',
- fontSize: 13,
- }}
- >
-
- ))}
-
-
- {editingLayerId === layer.id ? (
- setEditingName(e.target.value)}
- onBlur={() => saveEditing(layer.id)}
- onKeyDown={(e) => {
- if (e.key === 'Enter') saveEditing(layer.id);
- if (e.key === 'Escape') cancelEditing();
- }}
- autoFocus
- style={{ flex: 1, padding: 2, borderRadius: 2, border: '1px solid #1890ff' }}
- />
- ) : (
- startEditing(layer.id, layer.name)}
- style={{ flex: 1 }}
- >
- {layer.name}
-
- )}
-
-
-
-
-
-
-
-
- Doppelklick auf Layername zum Umbenennen
-
+ {layers.map((layer, idx) => (
+ setActiveLayer(layer.name)}
+ style={{
+ padding: '6px 8px',
+ marginBottom: 4,
+ background: activeLayer === layer.name ? '#e6f7ff' : '#fff',
+ border: activeLayer === layer.name ? '1px solid #1890ff' : '1px solid #ddd',
+ borderRadius: 4,
+ cursor: 'pointer',
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'space-between',
+ fontSize: 13,
+ }}
+ >
+ {layer.name}
+
+
+
+
+
+
+ ))}
-
- );
- }
-
- const { layout, pages, bbox } = printResult;
- const page = pages[currentPage];
- const previewUrl = page ? svgToDataUrl(page.svg) : '';
-
- return (
-
-
-
-
- Druckvorschau
- -Kein Dokument verfügbar.
-
-
- );
-};
-
-export default PrintPreview;
diff --git a/frontend/src/components/PropertiesPanel/PropertiesPanel.tsx b/frontend/src/components/PropertiesPanel/PropertiesPanel.tsx
deleted file mode 100644
index f563c8d..0000000
--- a/frontend/src/components/PropertiesPanel/PropertiesPanel.tsx
+++ /dev/null
@@ -1,485 +0,0 @@
-import React, { useState, useEffect, useCallback, useRef } from 'react';
-import type { CADLayer, CADProperties, CADElement } from '../../types/cad.types';
-import './PropertiesPanel.css';
-
-// ─── Types (local-only, not duplicated from cad.types.ts) ─────────────────────
-
-interface YjsDocumentLike {
- layers: {
- forEach: (cb: (layer: CADLayer, id: string) => void) => void;
- observe: (cb: () => void) => void;
- unobserve: (cb: () => void) => void;
- };
- elements: {
- toArray: () => CADElement[];
- observe: (cb: () => void) => void;
- unobserve: (cb: () => void) => void;
- };
- updateElement: (id: string, updates: Partial
- {/* Header */}
-
-
-
-
- Druckvorschau
- -
- {/* Settings sidebar */}
-
-
- {/* Footer with actions */}
-
-
-
-
-
-
-
- {settings.showTitleBlock && settings.titleBlockData && (
-
- )}
-
- {/* Info */}
-
-
- {/* Preview area */}
-
-
-
- Zeichnung:
- {Math.round(bbox.width)} × {Math.round(bbox.height)} CAD
-
-
- Seiten:
- {layout.totalPages} ({layout.cols} × {layout.rows})
-
-
- Format:
- {layout.pageWidth} × {layout.pageHeight} mm
-
-
- Maßstab:
- 1:{layout.scaleValue}
-
-
- {pages.length > 0 && previewUrl ? (
- <>
-
-
- 
-
-
- {/* Page navigation */}
- {pages.length > 1 && (
-
- Seite {currentPage + 1} / {pages.length}
-
-
-
-
- {currentPage + 1} / {pages.length}
-
-
-
- )}
-
- {/* Page grid overview */}
- {pages.length > 1 && (
-
- {pages.map((p, i) => (
-
- ))}
-
- )}
-
- ) : (
- Keine Elemente zum Drucken.
- )}
-
-
-
-
-
-
-
- );
- }
-
- const props = selectedElement.properties;
- const fillValue = props.fill ?? 'transparent';
- const strokeValue = props.stroke ?? '#000000';
- const strokeWidthValue = props.strokeWidth ?? 1;
- const rotationValue = props.rotation ?? 0;
- const lineTypeValue = props.lineType ?? 'solid';
-
- return (
- - Kein Element ausgewählt. Wähle ein Element auf dem Canvas, um seine Eigenschaften zu bearbeiten. -
-
- {/* Element info header */}
-
- );
-};
-
-export default PropertiesPanel;
diff --git a/frontend/src/components/RibbonBar.tsx b/frontend/src/components/RibbonBar.tsx
deleted file mode 100644
index 3ae9083..0000000
--- a/frontend/src/components/RibbonBar.tsx
+++ /dev/null
@@ -1,224 +0,0 @@
-import React, { useState, useRef, useCallback, useEffect } from 'react';
-import type { YjsDocument } from '../crdt/YjsDocument';
-import { exportDrawing, type ExportFormat } from '../services/exportService';
-import type { ExportResult } from '../types/cad.types';
-import { importDrawing, type ImportFormat, type ImportResult } from '../services/importService';
-import PrintPreview from './PrintPreview/PrintPreview';
-import './RibbonBar.css';
-
-interface RibbonBarProps {
- onTabChange: (tab: string) => void;
- yjsDoc?: React.RefObject
- {selectedElement.type}
- ID: {selectedElement.id.substring(0, 12)}
-
-
- {/* Position section */}
-
-
- {/* Size section */}
-
-
- {/* Rotation section */}
-
-
- {/* Appearance section */}
-
-
- {/* Layer assignment section */}
-
-
- {tabs.map((tab) => (
-
- ))}
-
-
-
- {
- setShowPrintPreview(false);
- // Restore focus to the Print trigger button
- if (printTriggerRef.current) {
- printTriggerRef.current.focus();
- }
- }} />
- )}
-
- );
-};
-
-export default RibbonBar;
diff --git a/frontend/src/components/SidePanel.tsx b/frontend/src/components/SidePanel.tsx
deleted file mode 100644
index a901c22..0000000
--- a/frontend/src/components/SidePanel.tsx
+++ /dev/null
@@ -1,128 +0,0 @@
-import React, { useState, useEffect, useRef } from 'react';
-import './SidePanel.css';
-import LayerPanel from './LayerPanel';
-import BlockLibrary from './BlockLibrary';
-import PropertiesPanel from './PropertiesPanel/PropertiesPanel';
-
-interface SidePanelProps {
- canvasRef?: React.RefObject
-
- {showExportMenu && (
-
-
-
-
-
-
-
-
- )}
-
-
- {showImportMenu && (
-
-
-
-
-
-
- {importStatus && (
- {importStatus}
- )}
-
-
-
- {showPrintPreview && yjsDoc && (
-
-
-
-
- )}
- KI Copilot content goes here
;
- default:
- return Select a tab
;
- }
- };
-
- return (
-
-
- );
-};
-
-export default SidePanel;
diff --git a/frontend/src/components/StatusBar.tsx b/frontend/src/components/StatusBar.tsx
deleted file mode 100644
index a9d268c..0000000
--- a/frontend/src/components/StatusBar.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import React from 'react';
-import './StatusBar.css';
-
-const StatusBar: React.FC = () => {
- // Mock status data
- const coordinates = { x: 10.5, y: 20.3 };
- const snapEnabled = true;
- const activeLayer = 'Layer 1';
- const units = 'mm';
-
- return (
-
- {tabs.map((tab) => (
-
- ))}
-
-
- {renderContent()}
-
-
-
- );
-};
-
-export default StatusBar;
\ No newline at end of file
diff --git a/frontend/src/contexts/AuthContext.jsx b/frontend/src/contexts/AuthContext.jsx
new file mode 100644
index 0000000..4b07234
--- /dev/null
+++ b/frontend/src/contexts/AuthContext.jsx
@@ -0,0 +1,51 @@
+import React, { createContext, useState, useEffect, useContext } from 'react';
+import api from '../services/api';
+
+const AuthContext = createContext(null);
+
+export const AuthProvider = ({ children }) => {
+ const [user, setUser] = useState(null);
+ const [loading, setLoading] = useState(true);
+
+ useEffect(() => {
+ const token = localStorage.getItem('token');
+ if (token) {
+ api.get('/auth/me').then((res) => {
+ setUser(res.data);
+ }).catch(() => {
+ localStorage.removeItem('token');
+ }).finally(() => setLoading(false));
+ } else {
+ setLoading(false);
+ }
+ }, []);
+
+ const login = async (email, password) => {
+ const res = await api.post('/auth/login', { email, password });
+ const { token, user } = res.data;
+ localStorage.setItem('token', token);
+ setUser(user);
+ return user;
+ };
+
+ const register = async (email, password) => {
+ const res = await api.post('/auth/register', { email, password });
+ const { token, user } = res.data;
+ localStorage.setItem('token', token);
+ setUser(user);
+ return user;
+ };
+
+ const logout = () => {
+ localStorage.removeItem('token');
+ setUser(null);
+ };
+
+ return (
+
- Coordinates:
- X: {coordinates.x}, Y: {coordinates.y}
-
-
- Snap:
-
-
-
- Layer:
- {activeLayer}
-
-
- Units:
- {units}
-
- Lade...
;
+
+ return (
+
+
+
+
+ )}
+
+ );
+};
+
+export default Dashboard;
diff --git a/frontend/src/pages/Editor.jsx b/frontend/src/pages/Editor.jsx
new file mode 100644
index 0000000..0b5c1a1
--- /dev/null
+++ b/frontend/src/pages/Editor.jsx
@@ -0,0 +1,238 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { useParams, useNavigate } from 'react-router-dom';
+import api from '../services/api';
+import CADCanvas from '../components/CADCanvas';
+import Toolbar from '../components/Toolbar';
+import LayerPanel from '../components/LayerPanel';
+import BlockLibrary from '../components/BlockLibrary';
+import pluginRegistry from '../components/PluginRegistry';
+
+const Editor = () => {
+ const { id } = useParams();
+ const navigate = useNavigate();
+ const canvasRef = useRef(null);
+ const [drawing, setDrawing] = useState(null);
+ const [activeTool, setActiveTool] = useState('select');
+ const [layers, setLayers] = useState([
+ { name: 'Layer 0', visible: true, locked: false },
+ ]);
+ const [activeLayer, setActiveLayer] = useState('Layer 0');
+ const [showLayers, setShowLayers] = useState(true);
+ const [showBlocks, setShowBlocks] = useState(true);
+ const [saveStatus, setSaveStatus] = useState('');
+ const fileInputRef = useRef(null);
+
+ // Load drawing
+ useEffect(() => {
+ if (id && id !== 'new') {
+ api.get(`/drawings/${id}`).then(res => {
+ setDrawing(res.data);
+ if (res.data.canvas_json) {
+ try {
+ const json = JSON.parse(res.data.canvas_json);
+ canvasRef.current?.loadFromJSON?.(json);
+ } catch (e) {
+ console.warn('Canvas JSON parse error, starting fresh');
+ }
+ }
+ }).catch(err => {
+ console.error(err);
+ navigate('/dashboard');
+ });
+ } else {
+ api.post('/drawings', { name: 'Neue Zeichnung' }).then(res => {
+ setDrawing(res.data);
+ navigate(`/editor/${res.data.id}`, { replace: true });
+ }).catch(err => {
+ console.error(err);
+ navigate('/dashboard');
+ });
+ }
+ }, [id]);
+
+ // Initialize plugin registry when canvas is ready
+ const handleCanvasReady = (canvas) => {
+ const cadApp = {
+ getCanvas: () => canvas,
+ getApi: () => api,
+ getDrawing: () => drawing,
+ registerTool: (id, label, icon, handler) => {
+ console.log(`Plugin registered tool: ${id}`);
+ // Would integrate into toolbar dynamically
+ },
+ };
+ pluginRegistry.init(cadApp);
+ };
+
+ // Save canvas JSON to backend
+ const saveCanvas = async () => {
+ if (!drawing || !canvasRef.current) return;
+ try {
+ setSaveStatus('Speichere...');
+ const json = canvasRef.current.toJSON();
+ await api.put(`/drawings/${drawing.id}`, {
+ canvas_json: JSON.stringify(json),
+ name: drawing.name,
+ });
+ setSaveStatus('Gespeichert ✓');
+ setTimeout(() => setSaveStatus(''), 2000);
+ } catch (err) {
+ setSaveStatus('Fehler ✗');
+ console.error(err);
+ }
+ };
+
+ // DXF Import
+ const handleDxfImport = async (e) => {
+ const file = e.target.files?.[0];
+ if (!file) return;
+ try {
+ const formData = new FormData();
+ formData.append('file', file);
+ const res = await api.post('/dxf/import', formData);
+ if (res.data?.objects && canvasRef.current) {
+ canvasRef.current.addObjects(res.data.objects);
+ setSaveStatus('DXF importiert ✓');
+ setTimeout(() => setSaveStatus(''), 2000);
+ }
+ e.target.value = '';
+ } catch (err) {
+ console.error('DXF import error:', err);
+ setSaveStatus('DXF-Import Fehler ✗');
+ setTimeout(() => setSaveStatus(''), 3000);
+ e.target.value = '';
+ }
+ };
+
+ // DXF Export
+ const handleDxfExport = async () => {
+ if (!canvasRef.current) return;
+ try {
+ const json = canvasRef.current.toJSON();
+ const res = await api.post('/dxf/export', { objects: json.objects || [] }, {
+ responseType: 'blob',
+ });
+ const blob = new Blob([res.data], { type: 'application/dxf' });
+ const url = URL.createObjectURL(blob);
+ const a = document.createElement('a');
+ a.href = url;
+ a.download = (drawing?.name || 'zeichnung') + '.dxf';
+ a.click();
+ URL.revokeObjectURL(url);
+ setSaveStatus('DXF exportiert ✓');
+ setTimeout(() => setSaveStatus(''), 2000);
+ } catch (err) {
+ console.error('DXF export error:', err);
+ setSaveStatus('DXF-Export Fehler ✗');
+ setTimeout(() => setSaveStatus(''), 3000);
+ }
+ };
+
+ // SVG Export (client-side)
+ const handleSvgExport = () => {
+ if (!canvasRef.current) return;
+ const canvas = canvasRef.current.getCanvas();
+ if (!canvas) return;
+ try {
+ const svg = canvas.toSVG();
+ const blob = new Blob([svg], { type: 'image/svg+xml' });
+ const url = URL.createObjectURL(blob);
+ const a = document.createElement('a');
+ a.href = url;
+ a.download = (drawing?.name || 'zeichnung') + '.svg';
+ a.click();
+ URL.revokeObjectURL(url);
+ setSaveStatus('SVG exportiert ✓');
+ setTimeout(() => setSaveStatus(''), 2000);
+ } catch (err) {
+ console.error('SVG export error:', err);
+ }
+ };
+
+ const handleDelete = () => {
+ if (!confirm('Ausgewähltes Objekt löschen?')) return;
+ const canvas = canvasRef.current?.getCanvas();
+ if (canvas) {
+ const active = canvas.getActiveObject();
+ if (active) {
+ canvas.remove(active);
+ canvas.renderAll();
+ }
+ }
+ };
+
+ // Keyboard shortcuts
+ useEffect(() => {
+ const handleKeyDown = (e) => {
+ if (e.ctrlKey && e.key === 's') {
+ e.preventDefault();
+ saveCanvas();
+ } else if (e.key === 'Delete' || e.key === 'Backspace') {
+ handleDelete();
+ } else if (e.ctrlKey && e.key === 'z') {
+ // Undo would need command stack
+ }
+ };
+ window.addEventListener('keydown', handleKeyDown);
+ return () => window.removeEventListener('keydown', handleKeyDown);
+ }, [drawing]);
+
+ return (
+
+
+
+ {drawings.length === 0 ? (
+ Meine Zeichnungen ({user?.email})
+ +Keine Zeichnungen vorhanden.
+ ) : ( +| Name | Zuletzt geändert | Aktionen |
|---|---|---|
| {d.name} | +{new Date(d.updatedAt).toLocaleString()} | ++ + + | +
+ {/* Toolbar */}
+
+ );
+};
+
+export default Editor;
diff --git a/frontend/src/pages/Login.jsx b/frontend/src/pages/Login.jsx
new file mode 100644
index 0000000..2c18392
--- /dev/null
+++ b/frontend/src/pages/Login.jsx
@@ -0,0 +1,45 @@
+import React, { useState } from 'react';
+import { useNavigate, Link } from 'react-router-dom';
+import { useAuth } from '../contexts/AuthContext';
+
+const Login = () => {
+ const [email, setEmail] = useState('');
+ const [password, setPassword] = useState('');
+ const [error, setError] = useState('');
+ const { login } = useAuth();
+ const navigate = useNavigate();
+
+ const handleSubmit = async (e) => {
+ e.preventDefault();
+ setError('');
+ try {
+ await login(email, password);
+ navigate('/dashboard');
+ } catch (err) {
+ setError(err.response?.data?.error || 'Login fehlgeschlagen');
+ }
+ };
+
+ return (
+
+
+
+ {/* Canvas area */}
+
+
+
+ {/* Right panels */}
+
+
+
+
+
+
+ {saveStatus}
+
+
+
+
+ setShowLayers(!showLayers)}>
+ Layer {showLayers ? '▲' : '▼'}
+
+ {showLayers && (
+ setShowBlocks(!showBlocks)}>
+ Teilebibliothek {showBlocks ? '▲' : '▼'}
+
+ {showBlocks && (
+
+
+ );
+};
+
+export default Login;
diff --git a/frontend/src/pages/Register.jsx b/frontend/src/pages/Register.jsx
new file mode 100644
index 0000000..1ceb0ce
--- /dev/null
+++ b/frontend/src/pages/Register.jsx
@@ -0,0 +1,54 @@
+import React, { useState } from 'react';
+import { useNavigate, Link } from 'react-router-dom';
+import { useAuth } from '../contexts/AuthContext';
+
+const Register = () => {
+ const [email, setEmail] = useState('');
+ const [password, setPassword] = useState('');
+ const [passwordConfirm, setPasswordConfirm] = useState('');
+ const [error, setError] = useState('');
+ const { register } = useAuth();
+ const navigate = useNavigate();
+
+ const handleSubmit = async (e) => {
+ e.preventDefault();
+ setError('');
+ if (password !== passwordConfirm) {
+ setError('Passwörter stimmen nicht überein');
+ return;
+ }
+ try {
+ await register(email, password);
+ navigate('/dashboard');
+ } catch (err) {
+ setError(err.response?.data?.error || 'Registrierung fehlgeschlagen');
+ }
+ };
+
+ return (
+ Web-CAD Anmeldung
+ {error &&{error}
} + ++ Kein Konto? Registrieren +
+
+
+ );
+};
+
+export default Register;
diff --git a/frontend/src/services/exportService.ts b/frontend/src/services/exportService.ts
deleted file mode 100644
index 0e4635c..0000000
--- a/frontend/src/services/exportService.ts
+++ /dev/null
@@ -1,576 +0,0 @@
-import type { YjsDocument } from '../crdt/YjsDocument';
-import type {
- CADLayer,
- CADProperties,
- CADElement,
- ExportData,
- ExportOptions,
- ExportResult,
-} from '../types/cad.types';
-
-// ── Helpers ───────────────────────────────────────────────────────────────────
-
-function hexToRgb(hex: string): { r: number; g: number; b: number } {
- const clean = hex.replace('#', '');
- if (clean.length === 3) {
- return {
- r: parseInt(clean[0] + clean[0], 16),
- g: parseInt(clean[1] + clean[1], 16),
- b: parseInt(clean[2] + clean[2], 16),
- };
- }
- return {
- r: parseInt(clean.substring(0, 2), 16) || 0,
- g: parseInt(clean.substring(2, 4), 16) || 0,
- b: parseInt(clean.substring(4, 6), 16) || 0,
- };
-}
-
-function rgbToAci(r: number, g: number, b: number): number {
- if (r > 200 && g > 200 && b > 200) return 7;
- if (r < 50 && g < 50 && b < 50) return 7;
- if (r > 200 && g < 100 && b < 100) return 1;
- if (r < 100 && g > 200 && b < 100) return 3;
- if (r < 100 && g < 100 && b > 200) return 5;
- if (r > 200 && g > 200 && b < 100) return 2;
- if (r > 200 && g < 100 && b > 200) return 6;
- if (r < 100 && g > 200 && b > 200) return 4;
- return 7;
-}
-
-function escapeXml(text: string): string {
- return text
- .replace(/&/g, '&')
- .replace(//g, '>')
- .replace(/"/g, '"')
- .replace(/'/g, ''');
-}
-
-function getLayerById(layers: CADLayer[], id: string): CADLayer | undefined {
- return layers.find((l) => l.id === id);
-}
-
-function shouldExportElement(
- element: CADElement,
- layers: CADLayer[],
- options: ExportOptions
-): boolean {
- if (options.includeInvisibleElements) return true;
- const layer = getLayerById(layers, element.layerId);
- if (layer && !layer.visible) return false;
- return true;
-}
-
-function collectExportData(yjsDoc: YjsDocument, options: ExportOptions): ExportData {
- const layers: CADLayer[] = [];
- yjsDoc.layers.forEach((layer, id) => {
- if (!options.includeHiddenLayers && !layer.visible) return;
- layers.push({ ...layer, id });
- });
- layers.sort((a, b) => (a.sortOrder ?? 0) - (b.sortOrder ?? 0));
-
- const elements = yjsDoc.getElements().filter((el) =>
- shouldExportElement(el, layers, options)
- );
-
- const projectMeta: RecordRegistrierung
+ {error &&{error}
} + ++ Bereits registriert? Anmelden +
+${p.svg}
`).join('\n')}
-
-`;
-
- printWindow.document.write(html);
- printWindow.document.close();
-
- printWindow.onload = () => {
- setTimeout(() => {
- printWindow.print();
- }, 500);
- };
-}
-
-export function svgToDataUrl(svg: string): string {
- const encoded = encodeURIComponent(svg);
- return `data:image/svg+xml;charset=utf-8,${encoded}`;
-}
diff --git a/frontend/src/tools/Tool.ts b/frontend/src/tools/Tool.ts
deleted file mode 100644
index a11257a..0000000
--- a/frontend/src/tools/Tool.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { YjsDocument } from '../crdt/YjsDocument';
-export abstract class Tool {
- protected yjsDoc: YjsDocument;
- protected name: string;
-
- constructor(yjsDoc: YjsDocument) {
- this.yjsDoc = yjsDoc;
- this.name = '';
- }
-
- abstract onMouseDown(event: MouseEvent): void;
- abstract onMouseMove(event: MouseEvent): void;
- abstract onMouseUp(event: MouseEvent): void;
- abstract onKeyUp(event: KeyboardEvent): void;
- abstract reset(): void;
-}
\ No newline at end of file
diff --git a/frontend/src/tools/ToolManager.ts b/frontend/src/tools/ToolManager.ts
deleted file mode 100644
index b1cadcd..0000000
--- a/frontend/src/tools/ToolManager.ts
+++ /dev/null
@@ -1,76 +0,0 @@
-import { YjsDocument } from '../crdt/YjsDocument';
-import { Tool } from './Tool';
-
-interface ToolConstructor {
- new (yjsDoc: YjsDocument): Tool;
-}
-
-class ToolManager {
- private yjsDoc: YjsDocument;
- private activeTool: Tool | null = null;
- private tools: Map