\n onRename(e.target.value)}\n className=\"canvas-name\"\n />\n onUrlChange(e.target.value)}\n className=\"canvas-url\"\n />\n

\n \n

\n \n \n

\n );\n}\n\nfunction Card({ title, url, svgUrl }) {\n const [svg, setSvg] = useState(\"\");\n\n useEffect(() => {\n const fetchSvg = async () => {\n try {\n const response = await fetch(svgUrl);\n const svgContent = await response.text();\n setSvg(svgContent);\n } catch (error) {\n console.error(\"Error fetching SVG:\", error);\n }\n };\n\n fetchSvg();\n }, [svgUrl]);\n\n return (\n

{title}

{url}

\n );\n}\n\nfunction Console({ canvases }) {\n return (\n

Configuration Console

{JSON.stringify(canvases, null, 2)}

\n );\n}\n\nfunction SideNav({ activeCanvas, canvases, onJsonChange }) {\n const [json, setJson] = useState(\"\");\n\n useEffect(() => {\n const canvas = canvases.find(c => c.id === activeCanvas);\n if (canvas) {\n const fetchJson = async () => {\n try {\n const response = await fetch(`${canvas.url}/json`);\n const jsonData = await response.json();\n setJson(JSON.stringify(jsonData, null, 2));\n } catch (error) {\n console.error(\"Error fetching JSON:\", error);\n }\n };\n fetchJson();\n }\n }, [activeCanvas, canvases]);\n\n const handleJsonChange = (e) => {\n setJson(e.target.value);\n onJsonChange(activeCanvas, e.target.value);\n };\n\n return (\n

Excalidraw JSON

\n \n

\n );\n}\n\nfunction App() {\n const [canvases, setCanvases] = useState([\n {\n \"id\": 1,\n \"name\": \"excali-\",\n \"url\": \"https://pomdtr-excalidraw.web.val.run\",\n },\n {\n \"id\": 2,\n \"name\": \"val-\",\n \"url\": \"https://pomdtr-excalidraw.web.val.run\",\n },\n {\n \"id\": 3,\n \"name\": \"town-\",\n \"url\": \"https://pomdtr-excalidraw.web.val.run\",\n },\n {\n \"id\": 4,\n \"name\": \"go!\",\n \"url\": \"https://all-religiousivoryworm.web.val.run\",\n },\n ]);\n const [activeCanvas, setActiveCanvas] = useState(canvases[0].id);\n\n const addCanvas = useCallback(() => {\n const newId = Math.max(0, ...canvases.map(c => c.id)) + 1;\n setCanvases(prev => [...prev, {\n id: newId,\n name: `Canvas ${newId}`,\n url: \"https://pomdtr-excalidraw.web.val.run\",\n }]);\n setActiveCanvas(newId);\n }, [canvases]);\n\n const removeCanvas = useCallback((id) => {\n setCanvases(prev => prev.filter(canvas => canvas.id !== id));\n if (activeCanvas === id) {\n setActiveCanvas(canvases[0]?.id || null);\n }\n }, [activeCanvas, canvases]);\n\n const renameCanvas = useCallback((id, newName) => {\n setCanvases(prev => prev.map(canvas => canvas.id === id ? { ...canvas, name: newName } : canvas));\n }, []);\n\n const changeCanvasUrl = useCallback((id, newUrl) => {\n setCanvases(prev => prev.map(canvas => canvas.id === id ? { ...canvas, url: newUrl } : canvas));\n }, []);\n\n const handleJsonChange = useCallback((id, newJson) => {\n // Here you would typically send the updated JSON to the server\n console.log(`Updated JSON for canvas ${id}:`, newJson);\n }, []);\n\n return (\n

Multiple Excalidraw Canvases

\n {canvases.map(canvas => (\n setActiveCanvas(canvas.id)}\n className={`canvas-button ${activeCanvas === canvas.id ? \"active\" : \"\"}`}\n >\n {canvas.name}\n \n ))}\n \n

\n {canvases.map(canvas => (\n canvas.id === activeCanvas && (\n removeCanvas(canvas.id)}\n onRename={(newName) => renameCanvas(canvas.id, newName)}\n onUrlChange={(newUrl) => changeCanvasUrl(canvas.id, newUrl)}\n onJsonChange={(newJson) => handleJsonChange(canvas.id, newJson)}\n />\n )\n ))}\n

\n \n

Canvas Cards

\n {canvases.map((canvas) => (\n \n ))}\n

\n \n

\n View source on Val Town\n

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\n\nif (typeof document !== \"undefined\") {\n client();\n}\n\nexport default async function server(request: Request): Promise {\n return new Response(\n `\n \n \n \n \n \n Multiple Excalidraw Canvases\n \n \n \n

\n \n \n \n \n `,\n {\n headers: {\n \"content-type\": \"text/html\",\n },\n },\n );\n}\n\nconst css = `\n body {\n font-family: Arial, sans-serif;\n line-height: 1.6;\n color: #333;\n margin: 0;\n padding: 0;\n background-color: #f4f4f4;\n }\n .container {\n max-width: 1200px;\n margin: 0 auto;\n padding: 20px;\n }\n h1, h2, h3 {\n color: #2c3e50;\n }\n .main-content {\n display: flex;\n gap: 20px;\n }\n .canvas-container {\n flex: 1;\n }\n .canvas-list {\n display: flex;\n flex-wrap: wrap;\n gap: 10px;\n margin-bottom: 20px;\n }\n .canvas-button, .add-button {\n padding: 5px 10px;\n background-color: #3498db;\n color: white;\n border: none;\n border-radius: 4px;\n cursor: pointer;\n }\n .canvas-button:hover, .add-button:hover {\n background-color: #2980b9;\n }\n .canvas-button.active {\n background-color: #2c3e50;\n }\n .excalidraw-canvas {\n border: 1px solid #ddd;\n border-radius: 4px;\n overflow: hidden;\n margin-bottom: 20px;\n }\n .canvas-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 10px;\n background-color: #f8f8f8;\n border-bottom: 1px solid #ddd;\n }\n .canvas-name, .canvas-url {\n font-size: 1em;\n padding: 5px;\n border: 1px solid #ddd;\n border-radius: 4px;\n margin-bottom: 5px;\n width: 100%;\n }\n .card-url {\n font-size: 0.8em;\n color: #666;\n word-break: break-all;\n }\n .remove-button {\n padding: 5px 10px;\n background-color: #e74c3c;\n color: white;\n border: none;\n border-radius: 4px;\n cursor: pointer;\n }\n .remove-button:hover {\n background-color: #c0392b;\n }\n .card-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));\n gap: 20px;\n margin-top: 20px;\n }\n .card {\n background-color: white;\n border-radius: 8px;\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n padding: 20px;\n transition: transform 0.3s ease;\n }\n .card:hover {\n transform: translateY(-5px);\n }\n .card h3 {\n margin-top: 0;\n color: #2c3e50;\n margin-bottom: 5px;\n }\n .card-svg {\n width: 100%;\n height: 200px;\n overflow: hidden;\n margin-top: 10px;\n }\n .card-svg svg {\n width: 100%;\n height: 100%;\n object-fit: contain;\n }\n .console {\n background-color: #f0f0f0;\n border: 1px solid #d0d0d0;\n border-radius: 4px;\n padding: 15px;\n margin-top: 30px;\n overflow-x: auto;\n color: #555;\n }\n .console h3 {\n margin-top: 0;\n margin-bottom: 10px;\n color: #444;\n }\n .console pre {\n margin: 0;\n white-space: pre-wrap;\n word-wrap: break-word;\n font-size: 0.9em;\n }\n .footer {\n margin-top: 20px;\n font-size: 0.9em;\n color: #666;\n }\n a {\n color: #3498db;\n text-decoration: none;\n }\n a:hover {\n text-decoration: underline;\n }\n .side-nav {\n width: 300px;\n background-color: #f8f8f8;\n padding: 20px;\n border-radius: 4px;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n }\n .json-editor {\n width: 100%;\n height: 500px;\n font-family: monospace;\n font-size: 14px;\n padding: 10px;\n border: 1px solid #ddd;\n border-radius: 4px;\n resize: vertical;\n }\n`;",[],[175],"files",[154,173],"counts",{"_186":32,"_187":119,"_188":32,"_189":190},"pulls","branches","forks","envVars",{"_191":32,"_192":32},"count","emptyCount","contents",[195,198],{"_102":155,"_95":156,"_157":158,"_159":-5,"_160":139,"_161":119,"_162":108,"_104":196,"_99":32,"_164":165,"_166":167,"_168":22,"_169":-5,"_98":197},["D",1727420870058],[156],{"_102":174,"_95":175,"_157":115,"_159":-5,"_160":139,"_161":138,"_162":108,"_104":199,"_99":177,"_164":178,"_166":179,"_168":22,"_169":-5,"_98":200},["D",1727637400060],[175],"upstreamProject",{"_102":147,"_95":203,"_111":-5,"_112":-5,"_109":145,"_23":204},"excaliGrid",{"_93":94,"_131":132},"upstreamBranch",{"_102":142,"_104":207,"_208":209,"_95":43,"_140":147,"_99":210,"_141":211,"_143":32,"_212":213,"_106":-5,"_151":22,"_109":145,"_150":94,"_16":120,"_149":203},["D",1746218465622],"updatedAt",["D",1727337232854],17,"4e0206ae-2796-11f0-9d52-569c3dd06744","lockfileKey","1746239255715-esm.town_v_all_excaliGrid@17-main","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name._index",{"_93":94,"_95":96,"_97":-7,"_99":-7,"_100":220,"_193":225,"_230":231,"_234":235,"_238":-5,"_182":239,"_246":247},{"_102":103,"_95":96,"_104":221,"_106":-5,"_107":108,"_109":110,"_111":-5,"_112":-5,"_14":113,"_114":115,"_116":108,"_117":-5,"_118":119,"_16":120,"_121":122,"_123":122,"_124":125,"_126":125,"_127":125,"_128":122,"_129":122,"_23":222,"_133":223,"_136":224,"_151":22},["D",1746218508173],{"_93":94,"_131":132},{"_93":94,"_135":132},{"_99":138,"_95":43,"_102":139,"_140":103,"_141":142,"_143":32,"_144":145,"_146":147,"_148":120,"_149":96,"_150":94},[226,228],{"_102":155,"_95":156,"_157":158,"_159":-5,"_160":139,"_161":119,"_162":108,"_104":196,"_99":32,"_164":165,"_166":167,"_168":22,"_169":-5,"_98":227},[156],{"_102":174,"_95":175,"_157":115,"_159":-5,"_160":139,"_161":138,"_162":108,"_104":199,"_99":177,"_164":178,"_166":179,"_168":22,"_169":-5,"_98":229},[175],"readme",{"_102":155,"_95":156,"_157":158,"_159":-5,"_160":139,"_161":119,"_162":108,"_104":232,"_99":32,"_164":165,"_166":167,"_168":22,"_169":-5,"_98":233},["D",1727420870058],[156],"upstream",{"_102":142,"_104":236,"_208":237,"_95":43,"_140":147,"_99":210,"_141":211,"_143":32,"_212":213,"_106":-5,"_151":22,"_109":145,"_150":94,"_16":120,"_149":203},["D",1746218465622],["D",1727337232854],"pull",[240,243],{"_102":155,"_95":156,"_157":158,"_159":-5,"_160":139,"_161":119,"_162":108,"_104":163,"_99":32,"_164":165,"_166":167,"_168":22,"_169":-5,"_170":241,"_98":242},[],[156],{"_102":174,"_95":175,"_157":115,"_159":-5,"_160":139,"_161":138,"_162":108,"_104":176,"_99":177,"_164":178,"_166":179,"_168":22,"_169":-5,"_170":244,"_98":245},[],[175],"previews",[243],"actionData","errors"]

all

excaliMe2