import { ExcalidrawElement , Hash , PrintableArea } from "@excalideck/deck" ; import Excalidraw from "@excalidraw/excalidraw" ; import { ExcalidrawImperativeAPI } from "@excalidraw/excalidraw/types/types" ; import { cloneDeep } from "lodash" ; import { useEffect , useMemo , useRef } from "react" ; import Library from "../../entities/Library" ; import PrintableAreaUtils from "../../utils/PrintableAreaUtils" ; import "./index.css" ; const EXCALIDRAW_ELEMENTS_INPUT_ONCHANGE_CHECK_INTERVAL = parseInt ( process . env [ "EXCALIDRAW_ELEMENTS_INPUT_ONCHANGE_CHECK_INTERVAL" ] ?? "100" , 10 ) ; interface Props { printableArea : PrintableArea ; initialValue : ExcalidrawElement [ ] ; onChange : ( newValue : ExcalidrawElement [ ] ) => void ; initialLibrary : Library ; onLibraryChange : ( newLibrary : Library ) => void ; } /**
 * ### Uncontrolled component warning
 *
 * The `initialValue` prop is only used on first render. Changing it afterwards,
 * while allowed, does not affect the component and does not trigger a
 * re-render. If you need the component to re-render with a new `initialValue`,
 * destroy and re-create it (e.g. changing its `key`).
 */ export default function ExcalidrawElementsInput ( { printableArea , initialValue , onChange , initialLibrary , onLibraryChange , } ) { const excalidrawRef = useRef < ExcalidrawImperativeAPI > ( null ) ; const initialData = useMemo ( ( ) => ( { elements : cloneDeep ( initialValue as any ) , appState : { zoom : PrintableAreaUtils . getFittingZoom ( printableArea ) , } , libraryItems : initialLibrary as any , } ) , undefined ) ; const initialHash = useMemo ( ( ) => Hash . excalidrawElements ( initialValue ) , undefined ) ; const previousHashRef = useRef < number > ( initialHash ) ; useEffect ( ( ) => { const intervalId = setInterval ( ( ) => { if ( ! excalidrawRef . current ) { return ; } const currentElements = excalidrawRef . current . getSceneElementsIncludingDeleted ( ) ; const currentHash = Hash . excalidrawElements ( currentElements as any ) ; if ( currentHash !== previousHashRef . current ) { previousHashRef . current = currentHash ; onChange ( cloneDeep ( currentElements as any ) ) ; } } , EXCALIDRAW_ELEMENTS_INPUT_ONCHANGE_CHECK_INTERVAL ) ; return ( ) => clearInterval ( intervalId ) ; } , [ onChange ] ) ; return ( < div className = "ExcalidrawElementsInput" > < Excalidraw ref = { excalidrawRef } initialData = { initialData } viewModeEnabled = { false } onLibraryChange = { onLibraryChange as any } UIOptions = { { canvasActions : { changeViewBackgroundColor : true , theme : true , clearCanvas : false , export : false , loadScene : false , saveAsImage : false , saveToActiveFile : false , } , } } /> < /div>); }