bobbitt/drawpad
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

batman

Browse Source
This commit is contained in:
Michael Bobbitt 2024-12-19 20:35:08 -05:00
commit 6860ab45cc
11 changed files with 225 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.gitignore vendored Normal file
View File

@ -0,0 +1,3 @@
node_modules/*
client/node_modules/*
package-lock.json

13
client/index.html Normal file
View File

@ -0,0 +1,13 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=2.0,user-scalable=no" />
<title>Excalidraw App</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/index.jsx"></script>
</body>
</html>

15
client/package.json Normal file
View File

@ -0,0 +1,15 @@
{
"dependencies": {
"@excalidraw/excalidraw": "^0.17.6",
"@solidjs/router": "^0.6.0",
"@vitejs/plugin-react": "^4.3.4",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"solid-js": "^1.7.0",
"solid-react-compat": "^0.0.2"
},
"scripts": {
"build": "vite build",
"dev": "vite dev"
}
}

16
client/src/index.jsx Normal file
View File

@ -0,0 +1,16 @@
import { render } from "solid-js/web";
import { Excalidraw } from "@excalidraw/excalidraw";
function App() {
return (
<div>
<h1 style={{ textAlign: "center" }}>Excalidraw Example</h1>
<div style={{ height: "500px" }}>
<Excalidraw />
</div>
</div>
);
}
render(() => <App />, document.getElementById("root"));

19
client/src/initExcalidraw.js Normal file
View File

@ -0,0 +1,19 @@
// src/initExcalidraw.js
// Helper to initialize Excalidraw in a SolidJS environment.
// We import the necessary modules from 'excalidraw' and create the editor.
import { initializeApp, importFromLocalStorage } from "@excalidraw/excalidraw";
export async function initializeExcalidraw(container, { initialData }) {
// In a real scenario, you'd use the official Excalidraw package API.
// The pseudo code below assumes a function `initializeApp` that returns { app, api }.
// Check Excalidraw docs for actual integration steps.
const { app, api } = await initializeApp({
target: container,
// initialData may be: { elements, appState, ... }
initialData: initialData || {},
UIOptions: { dockedSidebar: true },
});
return api;
}

7
client/vite.config.js Normal file
View File

@ -0,0 +1,7 @@
// vite.config.js
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
export default defineConfig({
plugins: [react()],
});

5
package.json Normal file
View File

@ -0,0 +1,5 @@
{
"devDependencies": {
"vite": "^6.0.3"
}
}

68
server/cmd/main.go Normal file
View File

@ -0,0 +1,68 @@
// main.go
// (Run: go build && ./yourapp)
// This server serves the static files for the client from "./public"
// and provides endpoints to load/save a single .excalidraw file.
//
// Make sure to create a "public" folder and build the SolidJS client into it.
package main
import (
"encoding/json"
"io"
"log"
"net/http"
"os"
)
const stateFile = "drawing.excalidraw"
func main() {
http.Handle("/", http.FileServer(http.Dir("public")))
http.HandleFunc("/api/state", func(w http.ResponseWriter, r *http.Request) {
w.Header().Set("Access-Control-Allow-Origin", "*")
w.Header().Set("Access-Control-Allow-Methods", "GET, POST, OPTIONS")
w.Header().Set("Access-Control-Allow-Headers", "Content-Type")
if r.Method == http.MethodOptions {
w.WriteHeader(http.StatusOK)
return
}
if r.Method == http.MethodGet {
w.Header().Set("Content-Type", "application/json")
data, err := os.ReadFile(stateFile)
if err != nil {
log.Println("No file yet or error reading file:", err)
// If no file yet, return empty object
w.Write([]byte(`{}`))
return
}
w.Write(data)
return
} else if r.Method == http.MethodPost {
log.Println("POST /api/state")
body, err := io.ReadAll(r.Body)
if err != nil {
http.Error(w, "cannot read body", http.StatusBadRequest)
return
}
// Validate JSON
var js interface{}
if err := json.Unmarshal(body, &js); err != nil {
http.Error(w, "invalid json", http.StatusBadRequest)
return
}
if err := os.WriteFile(stateFile, body, 0644); err != nil {
http.Error(w, "cannot save file", http.StatusInternalServerError)
return
}
w.WriteHeader(http.StatusOK)
return
}
http.Error(w, "method not allowed", http.StatusMethodNotAllowed)
})
log.Println("Server running on http://localhost:8080")
http.ListenAndServe(":8080", nil)
}

1
server/drawing.excalidraw Normal file
View File

File diff suppressed because one or more lines are too long

21
server/public/index.html Normal file
View File

@ -0,0 +1,21 @@
<!DOCTYPE html>
<html>
<head>
<title>Excalidraw in browser</title>
<meta charset="UTF-8" />
<script src="https://unpkg.com/react@18.2.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18.2.0/umd/react-dom.development.js"></script>
<script
type="text/javascript"
src="https://unpkg.com/@excalidraw/excalidraw/dist/excalidraw.development.js"
></script>
</head>
<body>
<div class="container">
<div id="app"></div>
</div>
<script type="text/javascript" src="packages/excalidraw/index.js"></script>
</body>
</html>

57
server/public/packages/excalidraw/index.js Normal file
View File

@ -0,0 +1,57 @@
// public/packages/excalidraw/index.js
// This version fetches initial data from /api/state and saves changes back.
// Make sure your Go server (from previous snippets) is running and serving /api/state.
// Assumes a simple backend that returns/accepts JSON of the Excalidraw file.
const { useState, useEffect } = React;
function App() {
const [initialData, setInitialData] = useState(null);
useEffect(() => {
fetch("/api/state")
.then((res) => {
console.log("Fetch response:", res);
return res.json();
})
.then((data) => {
console.log("Fetched data:", data);
setInitialData(data);
})
.catch((err) => {
console.error("Error loading initial data:", err);
setInitialData({});
});
}, []);
const handleChange = (elements, appState) => {
const data = {
type: "excalidraw",
version: 2,
source: "excalidraw",
elements: elements,
appState: appState,
files: {},
};
fetch("/api/state", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(data),
}).catch(console.error);
};
return React.createElement(
"div",
{ style: { height: "100vh" } },
initialData &&
React.createElement(ExcalidrawLib.Excalidraw, {
initialData: initialData,
onChange: handleChange,
}),
);
}
const excalidrawWrapper = document.getElementById("app");
const root = ReactDOM.createRoot(excalidrawWrapper);
root.render(React.createElement(App));