\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 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://pomdtr-excalidraw.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 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 />\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 .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`;",[],[177],"files",[157,175],"counts",{"_187":32,"_188":102,"_189":32,"_190":191},"pulls","branches","forks","envVars",{"_192":32,"_193":32},"count","emptyCount","contents",[],{"_105":158,"_96":100,"_159":160,"_161":-5,"_162":142,"_163":102,"_164":111,"_107":197,"_101":32,"_166":167,"_168":169,"_170":22,"_171":-5,"_99":198},["D",1727420870058],[100],"upstreamProject",{"_105":150,"_96":201,"_114":-5,"_115":-5,"_112":148,"_23":202},"excaliGrid",{"_94":95,"_134":135},"upstreamBranch",{"_105":145,"_107":205,"_206":207,"_96":44,"_143":150,"_101":208,"_144":209,"_146":32,"_210":211,"_109":-5,"_154":22,"_112":148,"_153":95,"_16":123,"_152":201},["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.branch.$branch.version.$version.code.$",{"_94":95,"_96":97,"_98":44,"_101":102,"_99":100,"_103":218,"_155":223,"_183":230,"_167":231,"_194":233,"_234":235,"_238":-5,"_239":141,"_240":208,"_241":242,"_190":-5},{"_105":106,"_96":97,"_107":219,"_109":-5,"_110":111,"_112":113,"_114":-5,"_115":-5,"_14":116,"_117":118,"_119":111,"_120":-5,"_121":-5,"_122":102,"_16":123,"_124":125,"_126":125,"_127":128,"_129":128,"_130":128,"_131":125,"_132":125,"_23":220,"_136":221,"_139":222,"_154":22},["D",1746218508173],{"_94":95,"_134":135},{"_94":95,"_138":135,"_14":116},{"_101":141,"_96":44,"_105":142,"_143":106,"_144":145,"_146":32,"_147":148,"_149":150,"_151":123,"_152":97,"_153":95},[224,227],{"_105":158,"_96":100,"_159":160,"_161":-5,"_162":142,"_163":102,"_164":111,"_107":165,"_101":32,"_166":167,"_168":169,"_170":22,"_171":-5,"_172":225,"_99":226},[],[100],{"_105":176,"_96":177,"_159":118,"_161":-5,"_162":142,"_163":102,"_164":22,"_107":178,"_101":32,"_166":179,"_168":180,"_170":22,"_171":-5,"_172":228,"_99":229},[],[177],[224,227],{"_105":158,"_96":100,"_159":160,"_161":-5,"_162":142,"_163":102,"_164":111,"_107":197,"_101":32,"_166":167,"_168":169,"_170":22,"_171":-5,"_99":232},[100],[],"upstream",{"_105":145,"_107":236,"_206":237,"_96":44,"_143":150,"_101":208,"_144":209,"_146":32,"_210":211,"_109":-5,"_154":22,"_112":148,"_153":95,"_16":123,"_152":201},["D",1746218465622],["D",1727337232854],"pull","ahead","behind","templates",[],"actionData","errors"]

all

excaliMe2