Initial Upload

public/webapp/button.js

@@ -0,0 +1,56 @@
+function copyEditLink(fileID) {
+    navigator.clipboard.writeText(getEditLink(fileID));
+}
+
+function refreshPage() {
+    window.location.reload();
+}
+
+function addButton(document, fileID) {
+
+    // Add floating button
+    const floatingButton = document.createElement('button');
+    floatingButton.id = 'floatingButton';
+    floatingButton.innerHTML = '⚙️';
+    document.body.appendChild(floatingButton);
+
+    // Add popup menu
+    const popupMenu = document.createElement('div');
+    popupMenu.id = 'popupMenu';
+    popupMenu.innerHTML = `
+                        <button onclick="refreshPage()">Refresh</button>
+                        <button onclick="copyEditLink('${fileID}')">Copy Direct Edit Link</button>
+                        
+                    `;
+    document.body.appendChild(popupMenu);
+
+    // Show/hide floating button on mouse move
+    document.body.addEventListener('mousemove', () => {
+        floatingButton.style.display = 'block';
+    });
+
+    document.body.addEventListener('mouseleave', () => {
+        floatingButton.style.display = 'none';
+    });
+
+    // Toggle popup menu on button click
+    floatingButton.addEventListener('click', (e) => {
+        e.stopPropagation();
+        popupMenu.style.display = popupMenu.style.display === 'block' ? 'none' : 'block';
+    });
+
+    // Hide popup menu when clicking outside
+    document.addEventListener('click', () => {
+        popupMenu.style.display = 'none';
+    });
+
+    // Set CSS variable for correct scaling of SVG
+    const svg = document.body.querySelector('svg');
+    if (svg) {
+        const viewBox = svg.getAttribute('viewBox')?.split(' ') || [];
+        const width = parseFloat(viewBox[2]) || svg.clientWidth;
+        const height = parseFloat(viewBox[3]) || svg.clientHeight;
+        document.documentElement.style.setProperty('--svg-aspect-ratio', width/height);
+    }
+
+}

public/webapp/draw.js

@@ -0,0 +1,47 @@
+const FALLBACK = "<p>Nothing here yet! Click me to open the editor.</p>"
+async function getFile(path) {
+
+    const response = await fetch('/api/file/getFile', {
+        method: 'POST',
+        headers: {'Content-Type': 'application/json'},
+        body: JSON.stringify({path: path})
+    });
+
+    if (!response.ok) {
+        console.log('Failed to fetch HTML content');
+        return null;
+    }
+
+    const blob = await response.blob();
+    const resTxt =  await blob.text();
+
+    // if we got a 404 api response, we will return null
+    try {
+        const res = JSON.parse(resTxt);
+        if(res.code === 404) {
+            return null;
+        }
+    }catch {}
+
+    return resTxt;
+
+}
+
+async function getSVG(fileID) {
+
+    const resp = await getFile("/data/assets/" + fileID + '.svg');
+    if(resp == null) {
+        return FALLBACK;
+    }
+    return resp;
+
+}
+
+function getEditLink(fileID) {
+    const data = encodeURIComponent(
+        JSON.stringify({
+            id: fileID
+        })
+    )
+    return `siyuan://plugins/siyuan-jsdraw-pluginwhiteboard/?icon=iconDraw&title=Drawing&data=${data}`;
+}

public/webapp/index.css

@@ -0,0 +1,91 @@
+a > div > p {
+    color: var(--text, black);
+}
+
+html, body {
+    height: 100%;
+    width: 100%;
+    margin: 0;
+    padding: 0;
+    overflow: hidden; /* Prevent scrollbars */
+}
+
+body {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: transparent;
+}
+
+div {
+    max-width: min(100vw, 100vh * var(--svg-aspect-ratio));
+    max-height: min(100vh, 100vw / var(--svg-aspect-ratio));
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+svg {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+    overflow: hidden;
+}
+
+/* Floating button styles */
+#floatingButton {
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    background-color: #007bff;
+    color: white;
+    border: none;
+    border-radius: 50%;
+    width: 40px;
+    height: 40px;
+    font-size: 20px;
+    cursor: pointer;
+    display: none; /* Initially hidden */
+}
+
+/* Popup menu styles */
+#popupMenu {
+    position: fixed;
+    bottom: 70px;
+    right: 20px;
+    background-color: var(--popup-bg, white);
+    border: 1px solid var(--popup-border, #ccc);
+    border-radius: 5px;
+    padding: 10px;
+    display: none; /* Initially hidden */
+    max-height: calc(100vh - 90px); /* Adjust based on window height */
+    overflow-y: auto; /* Add scroll if content overflows */
+}
+
+#popupMenu button {
+    display: block;
+    margin: 5px 0;
+    padding: 5px 10px;
+    background-color: var(--button-bg, #f8f9fa);
+    border: 1px solid var(--button-border, #ccc);
+    border-radius: 3px;
+    cursor: pointer;
+    color: var(--button-text, black);
+}
+
+#popupMenu button:hover {
+    background-color: var(--button-hover-bg, #e2e6ea);
+}
+
+/* Dark theme styles */
+@media (prefers-color-scheme: dark) {
+    :root {
+        --text: white;
+        --popup-bg: #333;
+        --popup-border: #555;
+        --button-bg: #444;
+        --button-border: #666;
+        --button-text: #fff;
+        --button-hover-bg: #555;
+    }
+}

public/webapp/index.html

@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <script src="draw.js"></script>
+        <script src="button.js"></script>
+        <script>
+            const urlParams = new URLSearchParams(window.location.search);
+            const fileID = urlParams.get('id');
+
+            document.addEventListener('DOMContentLoaded', async () => {
+                const editLink = document.createElement('a');
+                editLink.href = getEditLink(fileID);
+                document.body.appendChild(editLink);
+
+                const htmlContainer = document.createElement('div');
+                htmlContainer.innerHTML = await getSVG(fileID);
+                editLink.appendChild(htmlContainer);
+
+                addButton(document, fileID);
+            });
+        </script>
+        <link rel="stylesheet" href="index.css">
+    </head>
+    <body>
+    </body>
+</html>