admin08077/Githubgemini

1{"version":3,"file":"SchemaDesigner-CSx-Y31t.js","sources":["../../components/features/SchemaDesigner.tsx"],"sourcesContent":["import React, { useState, useRef } from 'react';\nimport { MapIcon, ArrowDownTrayIcon } from '../icons.tsx';\nimport { downloadFile } from '../../services/fileUtils.ts';\n\ninterface Column { id: number; name: string; type: string; }\ninterface Table { id: number; name: string; columns: Column[]; x: number; y: number; }\n\nconst exportToSQL = (tables: Table[]) => {\n    return tables.map(table => {\n        const columnsSQL = table.columns.map(col => `  \"${col.name}\" ${col.type.toUpperCase()}`).join(',\\n');\n        return `CREATE TABLE \"${table.name}\" (\\n${columnsSQL}\\n);`;\n    }).join('\\n\\n');\n};\n\nexport const SchemaDesigner: React.FC = () => {\n    const [tables, setTables] = useState<Table[]>([\n        { id: 1, name: 'users', columns: [{ id: 1, name: 'id', type: 'INTEGER PRIMARY KEY' }, {id: 2, name: 'username', type: 'VARCHAR(255)'}], x: 50, y: 50 },\n        { id: 2, name: 'posts', columns: [{ id: 1, name: 'id', type: 'INTEGER PRIMARY KEY' }, {id: 2, name: 'user_id', type: 'INTEGER'}, {id: 3, name: 'content', type: 'TEXT'}], x: 300, y: 100 },\n    ]);\n    const [dragging, setDragging] = useState<{ id: number; offsetX: number; offsetY: number } | null>(null);\n    const canvasRef = useRef<HTMLDivElement>(null);\n\n    const onMouseDown = (e: React.MouseEvent<HTMLDivElement>, id: number) => {\n        const tableElement = e.currentTarget;\n        const rect = tableElement.getBoundingClientRect();\n        setDragging({ id, offsetX: e.clientX - rect.left, offsetY: e.clientY - rect.top });\n    };\n\n    const onMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {\n        if (!dragging || !canvasRef.current) return;\n        const canvasRect = canvasRef.current.getBoundingClientRect();\n        setTables(tables.map(t => t.id === dragging.id ? { ...t, x: e.clientX - dragging.offsetX - canvasRect.left + canvasRef.current.scrollLeft, y: e.clientY - dragging.offsetY - canvasRect.top + canvasRef.current.scrollTop } : t));\n    };\n\n    const onMouseUp = () => setDragging(null);\n\n    return (\n        <div className=\"h-full flex flex-col p-4 sm:p-6 lg:p-8 text-text-primary\">\n            <header className=\"mb-6\"><h1 className=\"text-3xl font-bold flex items-center\"><MapIcon /><span className=\"ml-3\">Schema Designer</span></h1><p className=\"text-text-secondary mt-1\">Visually design your database schema with drag-and-drop.</p></header>\n            <div className=\"flex-grow flex gap-6 min-h-0\">\n                <main ref={canvasRef} className=\"flex-grow relative bg-background rounded-lg border-2 border-dashed border-border overflow-auto\" onMouseMove={onMouseMove} onMouseUp={onMouseUp} onMouseLeave={onMouseUp}>\n                    {tables.map(table => (\n                        <div key={table.id} className={`absolute w-64 bg-surface rounded-lg shadow-xl border cursor-grab active:cursor-grabbing ${dragging?.id === table.id ? 'border-primary' : 'border-border'}`} style={{ top: table.y, left: table.x }} onMouseDown={e => onMouseDown(e, table.id)}>\n                            <h3 className=\"font-bold text-primary text-lg p-2 bg-gray-50 rounded-t-lg border-b border-border\">{table.name}</h3>\n                            <div className=\"p-2 space-y-1 font-mono text-xs\">\n                                {table.columns.map(col => (<div key={col.id} className=\"flex justify-between items-center\"><span className=\"text-text-primary\">{col.name}</span><span className=\"text-text-secondary\">{col.type}</span></div>))}\n                            </div>\n                        </div>\n                    ))}\n                </main>\n                <aside className=\"w-80 flex-shrink-0 flex flex-col gap-4\">\n                    <div className=\"flex flex-col gap-2\">\n                         <button onClick={() => downloadFile(JSON.stringify(tables, null, 2), 'schema.json', 'application/json')} className=\"flex-1 text-sm py-2 bg-gray-100 border border-border rounded-md flex items-center justify-center gap-2 hover:bg-gray-200\">\n                            <ArrowDownTrayIcon className=\"w-4 h-4\"/> Download JSON\n                        </button>\n                         <button onClick={() => downloadFile(exportToSQL(tables), 'schema.sql', 'application/sql')} className=\"btn-primary flex-1 text-sm py-2 flex items-center justify-center gap-2\">\n                            <ArrowDownTrayIcon className=\"w-4 h-4\"/> Download SQL\n                         </button>\n                    </div>\n                    <div className=\"flex-grow bg-surface border border-border p-4 rounded-lg overflow-y-auto\">\n                        <h3 className=\"font-bold mb-2\">Editor</h3>\n                        <p className=\"text-xs text-text-secondary\">Schema editing coming soon!</p>\n                    </div>\n                </aside>\n            </div>\n        </div>\n    );\n};"],"names":["exportToSQL","tables","table","columnsSQL","col","SchemaDesigner","setTables","useState","dragging","setDragging","canvasRef","useRef","onMouseDown","e","id","rect","onMouseMove","canvasRect","t","onMouseUp","jsxs","jsx","MapIcon","downloadFile","ArrowDownTrayIcon"],"mappings":"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"}