UI правки
This commit is contained in:
+13
-3
@@ -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')}>
|
||||||
Просмотр
|
Просмотр
|
||||||
|
|||||||
Reference in New Issue
Block a user