56 lines
2.3 KiB
TypeScript
56 lines
2.3 KiB
TypeScript
'use client';
|
|
|
|
import { useEffect } from 'react';
|
|
import Canvas from '@/components/slide-renderer/Editor/Canvas';
|
|
import { SpotlightOverlay } from '@/components/slide-renderer/Editor/SpotlightOverlay';
|
|
import { LaserPointerOverlay } from '@/components/slide-renderer/Editor/LaserPointerOverlay';
|
|
import { SceneProvider } from '@/lib/contexts/scene-context';
|
|
import { isEditorRendererEnabled } from '@/lib/config/feature-flags';
|
|
import { useCanvasStore } from '@/lib/store/canvas';
|
|
import { AnchoredTextBar } from './AnchoredTextBar';
|
|
import { AnchoredElementBar } from './AnchoredElementBar';
|
|
import { ElementPickLayer } from './ElementPickLayer';
|
|
import { EDITABLE_ELEMENT_ID_PREFIX } from './renderer-element-dom';
|
|
import {
|
|
useEditingTextElementId,
|
|
useSelectedNonTextElement,
|
|
useSlideCanvasController,
|
|
useSyncEditingElementId,
|
|
} from './use-slide-surface';
|
|
import { RendererEditorCanvas } from './RendererEditorCanvas';
|
|
|
|
/** Switches between the preserved legacy editor and the renderer editor. */
|
|
export function SlideCanvas() {
|
|
const { controller, gestureProps } = useSlideCanvasController();
|
|
const useRendererEditor = isEditorRendererEnabled();
|
|
const requestedEditingElementId = useCanvasStore.use.editingElementId();
|
|
const editingElementId = useEditingTextElementId(
|
|
useRendererEditor ? requestedEditingElementId : undefined,
|
|
);
|
|
const nonTextElement = useSelectedNonTextElement();
|
|
useSyncEditingElementId(editingElementId, !useRendererEditor);
|
|
|
|
useEffect(() => {
|
|
const handler = (event: KeyboardEvent) => {
|
|
if (event.key !== 'Escape') return;
|
|
const canvas = useCanvasStore.getState();
|
|
if (canvas.creatingElement) canvas.setCreatingElement(null);
|
|
};
|
|
document.addEventListener('keydown', handler);
|
|
return () => document.removeEventListener('keydown', handler);
|
|
}, []);
|
|
|
|
return (
|
|
<div className="relative h-full w-full" {...gestureProps}>
|
|
<SceneProvider controller={controller}>
|
|
{useRendererEditor ? <RendererEditorCanvas /> : <Canvas />}
|
|
<SpotlightOverlay domIdPrefix={EDITABLE_ELEMENT_ID_PREFIX} />
|
|
<LaserPointerOverlay domIdPrefix={EDITABLE_ELEMENT_ID_PREFIX} />
|
|
</SceneProvider>
|
|
{!useRendererEditor && <AnchoredTextBar editingElementId={editingElementId} />}
|
|
{!useRendererEditor && <AnchoredElementBar element={nonTextElement} />}
|
|
<ElementPickLayer />
|
|
</div>
|
|
);
|
|
}
|