\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`;","deleted","label",[99],"permalink","https://www.val.town/x/all/excaliMe2/code/main.tsx","extension","actionData","errors"]