Something went wrong. Try again.
This repository has no description
Something went wrong. Try again.
5.5 kB · 165 lines
TSX
at master
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166import { X } from "lucide-react";import type { Note, SpatialDocumentRecord } from "../../types";import { SpatialCanvas } from "../spatial/SpatialCanvas";import type { SpatialCanvasDocument, SpatialNoteDraft,} from "../spatial/model";import type { Dispatch, RefObject, SetStateAction,} from "react";import type { SpatialSession } from "./types";
export function SpatialDialog({ spatialSession, spatialLoading, spatialSaving, spatialError, availableSpatialDocuments, spatialDialogRef, setSpatialSession, spatialNotes, onCreateSpatialNote, onOpenSpatialNote, onChange, onAttach, onClose, onSave, onUploadImage,}: { spatialSession: SpatialSession | null; spatialLoading: boolean; spatialSaving: boolean; spatialError: string; availableSpatialDocuments: SpatialDocumentRecord[]; spatialDialogRef: RefObject<HTMLElement | null>; setSpatialSession: Dispatch<SetStateAction<SpatialSession | null>>; spatialNotes: Note[]; onCreateSpatialNote?: (draft: SpatialNoteDraft) => Promise<Note>; onOpenSpatialNote?: (noteId: string) => void; onChange: (document: SpatialCanvasDocument) => void; onAttach: (documentId: string) => void | Promise<void>; onClose: () => void; onSave: () => void; onUploadImage: (file: File) => Promise<{ assetId: string; src: string }>;}) { if (!spatialSession && !spatialLoading) return null;
return ( <div className="modal-backdrop"> <section ref={spatialDialogRef} className="diagram-modal spatial-editor-modal" role="dialog" aria-modal="true" aria-labelledby="spatial-editor-title" > <header> <div> <h2 id="spatial-editor-title"> {spatialSession?.documentId || spatialSession?.sourceId ? "Edit canvas" : "Create canvas"} </h2> {spatialSession && ( <div className="spatial-document-controls"> <label> <span>Title</span> <input value={spatialSession.title} onChange={(event) => setSpatialSession((current) => current ? { ...current, title: event.target.value } : current, ) } aria-label="Canvas title" /> </label> {availableSpatialDocuments.length > 0 && ( <label className="spatial-attach-control"> <span>Open existing</span> <select value={spatialSession.documentId ?? ""} onChange={(event) => void onAttach(event.target.value)} disabled={spatialSaving || spatialLoading} aria-label="Open existing canvas" > <option value="">New embedded canvas</option> {availableSpatialDocuments.map((document) => ( <option key={document.id} value={document.id}> {document.title} </option> ))} </select> </label> )} <label className="spatial-listed-control"> <input type="checkbox" checked={spatialSession.listed} onChange={(event) => setSpatialSession((current) => current ? { ...current, listed: event.target.checked } : current, ) } /> <span>Show in Whiteboards</span> </label> </div> )} </div> <div className="button-row"> <button type="button" className="icon-button" onClick={onClose} aria-label="Close diagram editor" disabled={spatialSaving} > <X /> </button> <button className="secondary-button diagram-cancel" onClick={onClose} disabled={spatialSaving} > Cancel </button> <button className="primary-button" onClick={onSave} disabled={!spatialSession || spatialSaving} > {spatialSaving ? "Saving…" : spatialSession?.documentId || spatialSession?.sourceId ? "Update canvas" : "Insert into note"} </button> </div> </header> {spatialError && <p className="diagram-error">{spatialError}</p>} {spatialSession ? ( <div className="excalidraw-frame"> <SpatialCanvas value={spatialSession.document} notes={spatialNotes} onChange={onChange} onCreateNote={onCreateSpatialNote} onOpenNote={onOpenSpatialNote} onUploadImage={onUploadImage} /> </div> ) : ( <div className="diagram-loading">Loading canvas…</div> )} </section> </div> );}