54 lines
1.3 KiB
TypeScript
54 lines
1.3 KiB
TypeScript
import { memo } from "react";
|
|
import { Excalidraw } from "@excalidraw/excalidraw";
|
|
import type { ExcalidrawInitialDataState } from "@excalidraw/excalidraw/types";
|
|
import "../../../node_modules/@excalidraw/excalidraw/dist/prod/index.css";
|
|
import { type PublicDrawing } from "../../core/shared";
|
|
|
|
type PublicViewerProps = {
|
|
drawing: PublicDrawing | null;
|
|
loading: boolean;
|
|
error: string | null;
|
|
};
|
|
|
|
function drawingToInitialData(
|
|
drawing: PublicDrawing,
|
|
): ExcalidrawInitialDataState {
|
|
return drawing as ExcalidrawInitialDataState;
|
|
}
|
|
|
|
const viewerUiOptions = {
|
|
canvasActions: {
|
|
changeViewBackgroundColor: false,
|
|
clearCanvas: false,
|
|
export: false,
|
|
loadScene: false,
|
|
saveAsImage: false,
|
|
saveToActiveFile: false,
|
|
toggleTheme: false,
|
|
},
|
|
tools: {
|
|
image: false,
|
|
},
|
|
} as const;
|
|
|
|
export const PublicViewer = memo(function PublicViewer({
|
|
drawing,
|
|
loading,
|
|
error,
|
|
}: PublicViewerProps) {
|
|
if (loading || !drawing) {
|
|
return <div className="editor-loading">{error ?? "Loading..."}</div>;
|
|
}
|
|
|
|
return (
|
|
<div className="public-viewer-shell">
|
|
<Excalidraw
|
|
initialData={drawingToInitialData(drawing)}
|
|
viewModeEnabled={true}
|
|
zenModeEnabled={true}
|
|
UIOptions={viewerUiOptions}
|
|
/>
|
|
</div>
|
|
);
|
|
});
|