\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`;",[],[177],"files",[156,175],"counts",{"_188":32,"_189":121,"_190":32,"_191":192},"pulls","branches","forks","envVars",{"_193":32,"_194":32},"count","emptyCount","contents",[197,200],{"_103":157,"_96":158,"_159":160,"_161":-5,"_162":141,"_163":121,"_164":109,"_105":198,"_100":32,"_166":167,"_168":169,"_170":22,"_171":-5,"_99":199},["D",1727420870058],[158],{"_103":176,"_96":177,"_159":116,"_161":-5,"_162":141,"_163":140,"_164":109,"_105":201,"_100":179,"_166":180,"_168":181,"_170":22,"_171":-5,"_99":202},["D",1727637400060],[177],"upstreamProject",{"_103":149,"_96":205,"_112":-5,"_113":-5,"_110":147,"_23":206},"excaliGrid",{"_94":95,"_133":134},"upstreamBranch",{"_103":144,"_105":209,"_210":211,"_96":44,"_142":149,"_100":212,"_143":213,"_145":32,"_214":215,"_107":-5,"_153":22,"_110":147,"_152":95,"_16":122,"_151":205},["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",{"_94":95,"_96":97,"_98":-7,"_100":-7,"_101":222,"_195":227,"_232":233,"_236":237,"_240":-5,"_184":241,"_248":245,"_249":140,"_250":212,"_251":22,"_252":22},{"_103":104,"_96":97,"_105":223,"_107":-5,"_108":109,"_110":111,"_112":-5,"_113":-5,"_14":114,"_115":116,"_117":109,"_118":-5,"_119":-5,"_120":121,"_16":122,"_123":124,"_125":124,"_126":127,"_128":127,"_129":127,"_130":124,"_131":124,"_23":224,"_135":225,"_138":226,"_153":22},["D",1746218508173],{"_94":95,"_133":134},{"_94":95,"_137":134,"_14":114},{"_100":140,"_96":44,"_103":141,"_142":104,"_143":144,"_145":32,"_146":147,"_148":149,"_150":122,"_151":97,"_152":95},[228,230],{"_103":157,"_96":158,"_159":160,"_161":-5,"_162":141,"_163":121,"_164":109,"_105":198,"_100":32,"_166":167,"_168":169,"_170":22,"_171":-5,"_99":229},[158],{"_103":176,"_96":177,"_159":116,"_161":-5,"_162":141,"_163":140,"_164":109,"_105":201,"_100":179,"_166":180,"_168":181,"_170":22,"_171":-5,"_99":231},[177],"readme",{"_103":157,"_96":158,"_159":160,"_161":-5,"_162":141,"_163":121,"_164":109,"_105":234,"_100":32,"_166":167,"_168":169,"_170":22,"_171":-5,"_99":235},["D",1727420870058],[158],"upstream",{"_103":144,"_105":238,"_210":239,"_96":44,"_142":149,"_100":212,"_143":213,"_145":32,"_214":215,"_107":-5,"_153":22,"_110":147,"_152":95,"_16":122,"_151":205},["D",1746218465622],["D",1727337232854],"pull",[242,245],{"_103":157,"_96":158,"_159":160,"_161":-5,"_162":141,"_163":121,"_164":109,"_105":165,"_100":32,"_166":167,"_168":169,"_170":22,"_171":-5,"_172":243,"_99":244},[],[158],{"_103":176,"_96":177,"_159":116,"_161":-5,"_162":141,"_163":140,"_164":109,"_105":178,"_100":179,"_166":180,"_168":181,"_170":22,"_171":-5,"_172":246,"_99":247},[],[177],"preview","ahead","behind","showHomeCustomizationHint","showHTTPPreviewSettingsHint","actionData","errors"]

all

excaliMe2