refactor: remove sidebar exports
This commit is contained in:
+1
-82
@@ -1,9 +1,5 @@
|
|||||||
import "../node_modules/@excalidraw/excalidraw/dist/prod/index.css";
|
import "../node_modules/@excalidraw/excalidraw/dist/prod/index.css";
|
||||||
import {
|
import { Excalidraw } from "@excalidraw/excalidraw";
|
||||||
Excalidraw,
|
|
||||||
exportToBlob,
|
|
||||||
serializeAsJSON,
|
|
||||||
} from "@excalidraw/excalidraw";
|
|
||||||
import type {
|
import type {
|
||||||
AppState,
|
AppState,
|
||||||
BinaryFiles,
|
BinaryFiles,
|
||||||
@@ -65,32 +61,6 @@ function sceneFromEditor(
|
|||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
function downloadBlob(blob: Blob, filename: string) {
|
|
||||||
const url = URL.createObjectURL(blob);
|
|
||||||
const link = document.createElement("a");
|
|
||||||
link.href = url;
|
|
||||||
link.download = filename;
|
|
||||||
link.click();
|
|
||||||
URL.revokeObjectURL(url);
|
|
||||||
}
|
|
||||||
|
|
||||||
function filenameBase(title: string): string {
|
|
||||||
const safeTitle = title
|
|
||||||
.trim()
|
|
||||||
.toLowerCase()
|
|
||||||
.replace(/[^a-z0-9]+/g, "-")
|
|
||||||
.replace(/^-+|-+$/g, "");
|
|
||||||
|
|
||||||
const now = new Date();
|
|
||||||
const stamp = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, "0")}-${String(
|
|
||||||
now.getDate(),
|
|
||||||
).padStart(2, "0")}-${String(now.getHours()).padStart(2, "0")}${String(
|
|
||||||
now.getMinutes(),
|
|
||||||
).padStart(2, "0")}`;
|
|
||||||
|
|
||||||
return `${safeTitle || "drawing"}-${stamp}`;
|
|
||||||
}
|
|
||||||
|
|
||||||
async function requestJson<T>(url: string, init?: RequestInit): Promise<T> {
|
async function requestJson<T>(url: string, init?: RequestInit): Promise<T> {
|
||||||
const response = await fetch(url, {
|
const response = await fetch(url, {
|
||||||
...init,
|
...init,
|
||||||
@@ -332,49 +302,6 @@ export function App() {
|
|||||||
}
|
}
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
const exportPng = useCallback(async () => {
|
|
||||||
const latest = latestSceneRef.current;
|
|
||||||
if (!latest) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const blob = await exportToBlob({
|
|
||||||
elements: latest.elements as never[],
|
|
||||||
appState: {
|
|
||||||
...(latest.appState as unknown as AppState),
|
|
||||||
exportBackground: true,
|
|
||||||
},
|
|
||||||
files: latest.files as BinaryFiles,
|
|
||||||
mimeType: "image/png",
|
|
||||||
getDimensions: (width: number, height: number) => ({
|
|
||||||
width,
|
|
||||||
height,
|
|
||||||
scale: 2,
|
|
||||||
}),
|
|
||||||
});
|
|
||||||
|
|
||||||
downloadBlob(blob, `${filenameBase(currentTitleRef.current)}.png`);
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const exportExcalidraw = useCallback(() => {
|
|
||||||
const latest = latestSceneRef.current;
|
|
||||||
if (!latest) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const json = serializeAsJSON(
|
|
||||||
latest.elements as never[],
|
|
||||||
latest.appState as Partial<AppState>,
|
|
||||||
latest.files as BinaryFiles,
|
|
||||||
"local",
|
|
||||||
);
|
|
||||||
|
|
||||||
downloadBlob(
|
|
||||||
new Blob([json], { type: "application/json" }),
|
|
||||||
`${filenameBase(currentTitleRef.current)}.excalidraw`,
|
|
||||||
);
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const syncThemeTokens = useCallback(() => {
|
const syncThemeTokens = useCallback(() => {
|
||||||
const appShell = appShellRef.current;
|
const appShell = appShellRef.current;
|
||||||
const excalidrawRoot = appShell?.querySelector<HTMLElement>(".excalidraw");
|
const excalidrawRoot = appShell?.querySelector<HTMLElement>(".excalidraw");
|
||||||
@@ -536,14 +463,6 @@ export function App() {
|
|||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="sidebar-toolbar">
|
|
||||||
<button type="button" className="secondary-button" onClick={() => void exportPng()} disabled={!scene}>
|
|
||||||
Export PNG
|
|
||||||
</button>
|
|
||||||
<button type="button" className="secondary-button" onClick={exportExcalidraw} disabled={!scene}>
|
|
||||||
Export .excalidraw
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div className="drawing-list">
|
<div className="drawing-list">
|
||||||
{drawings.map((drawing) => (
|
{drawings.map((drawing) => (
|
||||||
<div
|
<div
|
||||||
|
|||||||
@@ -178,14 +178,6 @@ input {
|
|||||||
height: 0.95rem;
|
height: 0.95rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar-toolbar {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 8px;
|
|
||||||
border-bottom: 1px solid var(--app-sidebar-border);
|
|
||||||
padding: 12px 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.primary-button,
|
.primary-button,
|
||||||
.secondary-button,
|
.secondary-button,
|
||||||
.icon-button {
|
.icon-button {
|
||||||
|
|||||||
Reference in New Issue
Block a user