UI правки

This commit is contained in:
NikitaKalitov
2026-07-20 13:17:41 +03:00
parent 6e880963ab
commit 179be1f63b
+13 -3
View File
@@ -169,7 +169,7 @@ function DiagramCanvas({ initialValue, onChange }: DiagramEditorProps) {
const lastTypingHistoryPushRef = useRef(0); const lastTypingHistoryPushRef = useRef(0);
const clipboardRef = useRef<Node | null>(null); const clipboardRef = useRef<Node | null>(null);
const canvasWrapperRef = useRef<HTMLDivElement>(null); const canvasWrapperRef = useRef<HTMLDivElement>(null);
const { screenToFlowPosition } = useReactFlow(); const { screenToFlowPosition, zoomIn, zoomOut, fitView } = useReactFlow();
const emitChange = useMemo( const emitChange = useMemo(
() => debounce((n: Node[], e: Edge[]) => onChange(serializeDocument(n, e)), 400), () => debounce((n: Node[], e: Edge[]) => onChange(serializeDocument(n, e)), 400),
@@ -586,6 +586,7 @@ function DiagramCanvas({ initialValue, onChange }: DiagramEditorProps) {
zIndexMode="manual" zIndexMode="manual"
className={mode === 'view' ? 'diagram-flow--view-mode' : undefined} className={mode === 'view' ? 'diagram-flow--view-mode' : undefined}
fitView fitView
proOptions={{ hideAttribution: true }}
> >
<Background /> <Background />
<ViewportPortal> <ViewportPortal>
@@ -601,7 +602,16 @@ function DiagramCanvas({ initialValue, onChange }: DiagramEditorProps) {
/> />
))} ))}
</ViewportPortal> </ViewportPortal>
<Controls> <Controls showZoom={false} showFitView={false} showInteractive={false}>
<ControlButton onClick={() => zoomIn()} title="Увеличить">
+
</ControlButton>
<ControlButton onClick={() => zoomOut()} title="Уменьшить">
−
</ControlButton>
<ControlButton onClick={() => fitView()} title="Показать всё">
⛶
</ControlButton>
{mode === 'edit' && ( {mode === 'edit' && (
<> <>
<ControlButton onClick={undo} disabled={historyRef.current.length === 0} title="Отменить (Ctrl+Z)"> <ControlButton onClick={undo} disabled={historyRef.current.length === 0} title="Отменить (Ctrl+Z)">
@@ -613,7 +623,7 @@ function DiagramCanvas({ initialValue, onChange }: DiagramEditorProps) {
</> </>
)} )}
</Controls> </Controls>
<MiniMap /> {mode === 'edit' && <MiniMap />}
<Panel position="top-right" className="diagram-mode-toggle"> <Panel position="top-right" className="diagram-mode-toggle">
<button type="button" disabled={mode === 'view'} onClick={() => setMode('view')}> <button type="button" disabled={mode === 'view'} onClick={() => setMode('view')}>
Просмотр Просмотр