function MainComponent() { const [bubbles, setBubbles] = React.useState({ main: { id: 'main', type: 'main', text: 'User', x: 0, y: 0 }, categories: [], contents: [] }); const [selectedBubble, setSelectedBubble] = React.useState(null); const [tableData, setTableData] = React.useState({}); const [showTable, setShowTable] = React.useState(null); const addCategoryBubble = ()=>{ const angle = Math.random() * 2 * Math.PI; const radius = 200; const newCategory = { id: `category-${Date.now()}`, type: 'category', text: 'New Category', x: Math.cos(angle) * radius, y: Math.sin(angle) * radius, color: `hsl(${Math.random() * 360}, 70%, 50%)` }; setBubbles((prev)=>({ ...prev, categories: [ ...prev.categories, newCategory ] })); }; const addContentBubble = (categoryId)=>{ const category = bubbles.categories.find((cat)=>cat.id === categoryId); if (!category) return; const angle = Math.random() * 2 * Math.PI; const radius = 150; const newContent = { id: `content-${Date.now()}`, type: 'content', text: 'New Content', categoryId: categoryId, x: category.x + Math.cos(angle) * radius, y: category.y + Math.sin(angle) * radius }; setBubbles((prev)=>({ ...prev, contents: [ ...prev.contents, newContent ] })); }; const handleDragStart = (e, id)=>{ setSelectedBubble(id); }; const handleDrag = (e, id)=>{ if (selectedBubble === id) { const newX = e.clientX; const newY = e.clientY; setBubbles((prev)=>({ ...prev, categories: prev.categories.map((cat)=>cat.id === id ? { ...cat, x: newX, y: newY } : cat), contents: prev.contents.map((cont)=>cont.id === id ? { ...cont, x: newX, y: newY } : cont) })); } }; const handleDragEnd = ()=>{ setSelectedBubble(null); }; const handleContextMenu = (e, id)=>{ e.preventDefault(); const newText = prompt('Enter new text for the bubble:'); if (newText) { setBubbles((prev)=>({ ...prev, categories: prev.categories.map((cat)=>cat.id === id ? { ...cat, text: newText } : cat), contents: prev.contents.map((cont)=>cont.id === id ? { ...cont, text: newText } : cont) })); } }; const handleDoubleClick = (id)=>{ setShowTable(id); if (!tableData[id]) { setTableData((prev)=>({ ...prev, [id]: { siteURL: '', id: '', password: '' } })); } }; const handleTableChange = (id, field, value)=>{ setTableData((prev)=>({ ...prev, [id]: { ...prev[id], [field]: value } })); }; return /*#__PURE__*/ React.createElement("div", { className: "relative w-full h-screen overflow-auto bg-gray-100", __source: { fileName: "", lineNumber: 104, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2", __source: { fileName: "", lineNumber: 105, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-16 h-16 rounded-full bg-black text-white flex items-center justify-center cursor-pointer", onDoubleClick: ()=>handleDoubleClick('main'), __source: { fileName: "", lineNumber: 106, columnNumber: 9 }, __self: this }, bubbles.main.text), bubbles.categories.map((category)=>/*#__PURE__*/ React.createElement(React.Fragment, { key: category.id, __source: { fileName: "", lineNumber: 111, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute w-24 h-24 rounded-full flex items-center justify-center cursor-move", style: { left: `${category.x}px`, top: `${category.y}px`, backgroundColor: category.color }, draggable: true, onDragStart: (e)=>handleDragStart(e, category.id), onDrag: (e)=>handleDrag(e, category.id), onDragEnd: handleDragEnd, onContextMenu: (e)=>handleContextMenu(e, category.id), onDoubleClick: ()=>handleDoubleClick(category.id), __source: { fileName: "", lineNumber: 112, columnNumber: 13 }, __self: this }, category.text), /*#__PURE__*/ React.createElement("svg", { className: "absolute top-1/2 left-1/2", style: { width: `${Math.abs(category.x)}px`, height: `${Math.abs(category.y)}px` }, __source: { fileName: "", lineNumber: 128, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("line", { x1: "0", y1: "0", x2: category.x, y2: category.y, stroke: "gray", strokeWidth: "2", __source: { fileName: "", lineNumber: 129, columnNumber: 15 }, __self: this })))), bubbles.contents.map((content)=>{ const category = bubbles.categories.find((cat)=>cat.id === content.categoryId); return /*#__PURE__*/ React.createElement(React.Fragment, { key: content.id, __source: { fileName: "", lineNumber: 136, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute w-20 h-20 rounded-full bg-blue-400 flex items-center justify-center cursor-move", style: { left: `${content.x}px`, top: `${content.y}px` }, draggable: true, onDragStart: (e)=>handleDragStart(e, content.id), onDrag: (e)=>handleDrag(e, content.id), onDragEnd: handleDragEnd, onContextMenu: (e)=>handleContextMenu(e, content.id), onDoubleClick: ()=>handleDoubleClick(content.id), __source: { fileName: "", lineNumber: 137, columnNumber: 15 }, __self: this }, content.text), category && /*#__PURE__*/ React.createElement("svg", { className: "absolute", style: { left: `${category.x}px`, top: `${category.y}px` }, __source: { fileName: "", lineNumber: 150, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("line", { x1: "0", y1: "0", x2: content.x - category.x, y2: content.y - category.y, stroke: "gray", strokeWidth: "2", __source: { fileName: "", lineNumber: 151, columnNumber: 19 }, __self: this }))); })), /*#__PURE__*/ React.createElement("button", { className: "fixed bottom-4 right-4 bg-blue-500 text-white px-4 py-2 rounded", onClick: addCategoryBubble, __source: { fileName: "", lineNumber: 158, columnNumber: 7 }, __self: this }, "Add Category"), /*#__PURE__*/ React.createElement("button", { className: "fixed bottom-4 left-4 bg-green-500 text-white px-4 py-2 rounded", onClick: ()=>bubbles.categories.length > 0 && addContentBubble(bubbles.categories[0].id), __source: { fileName: "", lineNumber: 164, columnNumber: 7 }, __self: this }, "Add Content"), showTable && /*#__PURE__*/ React.createElement("div", { className: "fixed top-4 left-4 bg-white p-4 rounded shadow", __source: { fileName: "", lineNumber: 171, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-bold mb-2", __source: { fileName: "", lineNumber: 172, columnNumber: 11 }, __self: this }, "Bubble Data"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "siteURL", placeholder: "Site URL", value: tableData[showTable]?.siteURL || '', onChange: (e)=>handleTableChange(showTable, 'siteURL', e.target.value), className: "block w-full mb-2 p-2 border rounded", __source: { fileName: "", lineNumber: 173, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", name: "id", placeholder: "ID", value: tableData[showTable]?.id || '', onChange: (e)=>handleTableChange(showTable, 'id', e.target.value), className: "block w-full mb-2 p-2 border rounded", __source: { fileName: "", lineNumber: 181, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "password", name: "password", placeholder: "Password", value: tableData[showTable]?.password || '', onChange: (e)=>handleTableChange(showTable, 'password', e.target.value), className: "block w-full mb-2 p-2 border rounded", __source: { fileName: "", lineNumber: 189, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowTable(null), className: "bg-red-500 text-white px-2 py-1 rounded", __source: { fileName: "", lineNumber: 197, columnNumber: 11 }, __self: this }, "Close"))); }