Leopoldadmin/web-cad
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

T19: Fix TypeScript errors in SidePanel.tsx (type narrowing + RefObject casts)

Browse Source
This commit is contained in:
Leopoldadmin
2026-06-22 23:07:25 +00:00
parent a4351f63c6
commit 585b6696d8
1 changed files with 45 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/SidePanel.tsx
+20 -10
View File
@@ -11,7 +11,7 @@ interface SidePanelProps {
const SidePanel: React.FC<SidePanelProps> = ({ canvasRef, yjsDoc }) => { const SidePanel: React.FC<SidePanelProps> = ({ canvasRef, yjsDoc }) => {
const [activeTab, setActiveTab] = useState('blocks'); const [activeTab, setActiveTab] = useState('blocks');
const [layers, setLayers] = useState([]); const [layers, setLayers] = useState<Record<string, unknown> & { id: string }[]>([]);
const [activeLayer, setActiveLayer] = useState(''); const [activeLayer, setActiveLayer] = useState('');
const localCanvasRef = useRef(null); const localCanvasRef = useRef(null);
const localYjsDocRef = useRef(null); const localYjsDocRef = useRef(null);
@@ -29,17 +29,23 @@ const SidePanel: React.FC<SidePanelProps> = ({ canvasRef, yjsDoc }) => {
// Observe changes in yjsDoc.layers // Observe changes in yjsDoc.layers
useEffect(() => { useEffect(() => {
const yjsDocInstance = effectiveYjsDocRef?.current as { layers?: { forEach: (cb: (layer: Record<string, unknown>, id: string) => void) => void; observe: (cb: () => void) => void; unobserve: (cb: () => void) => void } } | null; const yjsDocInstance = effectiveYjsDocRef?.current as {
if (yjsDocInstance?.layers) { layers?: {
const yjsDoc = yjsDocInstance; forEach: (cb: (layer: Record<string, unknown>, 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 // Function to update layers from yjsDoc
const updateLayers = () => { const updateLayers = () => {
const layersArray: Array<Record<string, unknown> & { id: string }> = []; const layersArray: Array<Record<string, unknown> & { id: string }> = [];
yjsDoc.layers.forEach((layer, id) => { yjsLayers.forEach((layer, id) => {
layersArray.push({ ...layer, id }); layersArray.push({ ...layer, id });
}); });
setLayers(layersArray as never); setLayers(layersArray);
// Set active layer if none is set or if current active layer doesn't exist // Set active layer if none is set or if current active layer doesn't exist
if (!activeLayer || !layersArray.some(layer => layer.id === activeLayer)) { if (!activeLayer || !layersArray.some(layer => layer.id === activeLayer)) {
@@ -53,13 +59,12 @@ const SidePanel: React.FC<SidePanelProps> = ({ canvasRef, yjsDoc }) => {
updateLayers(); updateLayers();
// Observe changes // Observe changes
yjsDoc.layers.observe(updateLayers); yjsLayers.observe(updateLayers);
// Cleanup observer on unmount // Cleanup observer on unmount
return () => { return () => {
yjsDoc.layers.unobserve(updateLayers); yjsLayers.unobserve(updateLayers);
}; };
}
}, [activeLayer, effectiveYjsDocRef]); }, [activeLayer, effectiveYjsDocRef]);
const renderContent = () => { const renderContent = () => {
@@ -77,7 +82,12 @@ const SidePanel: React.FC<SidePanelProps> = ({ canvasRef, yjsDoc }) => {
/> />
); );
case 'properties': case 'properties':
return <PropertiesPanel canvasRef={effectiveCanvasRef} yjsDocRef={effectiveYjsDocRef} />; return (
<PropertiesPanel
canvasRef={effectiveCanvasRef as never}
yjsDocRef={effectiveYjsDocRef as never}
/>
);
case 'copilot': case 'copilot':
return <div className="panel-content">KI Copilot content goes here</div>; return <div className="panel-content">KI Copilot content goes here</div>;
default: default: