dtoro/zui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: improvements

Browse Source
This commit is contained in:
authentik Default Admin
2026-03-12 18:14:21 +01:00
parent 51c96641f0
commit a0bf9c6b70
4 changed files with 123 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
frontend/src/app/canvas/CanvasPage.tsx
View File

@@ -37,6 +37,7 @@ import { CanvasContextMenuContent } from '@/app/canvas/CanvasContextMenuContent'
import { useCanvasConnectionPath } from '@/app/canvas/useCanvasConnectionPath'
import { CanvasMenubar } from '@/app/canvas/CanvasMenubar'
import { createContextualNode } from '@/app/canvas/ContextualZoomNode'
import { ViewportDisplayProvider } from '@/app/canvas/ViewportDisplayContext'
import { FlowKeyboardShortcuts } from '@/components/graph/FlowKeyboardShortcuts'
import {
Empty,
@@ -247,24 +248,22 @@ export function CanvasPage({ projectId }: CanvasPageProps) {
[setEdges]
)
const isValidConnection = useCallback(
(connection: Connection | AppEdge) => {
const src = 'source' in connection ? connection.source : undefined
const tgt = 'target' in connection ? connection.target : undefined
if (typeof src !== 'string' || typeof tgt !== 'string') return false
const sourceNode = nodes.find((n) => n.id === src)
const targetNode = nodes.find((n) => n.id === tgt)
const sourceType = sourceNode?.type
const targetType = targetNode?.type
if (!sourceType || !targetType) return false
if (sourceType === 'render' && targetType === 'config') {
const targetData = targetNode?.data as { configType?: string } | undefined
if (targetData?.configType !== 'markdown') return false
}
return isConnectionAllowed(sourceType, targetType, src, tgt)
},
[nodes]
)
const isValidConnection = useCallback((connection: Connection | AppEdge) => {
const src = 'source' in connection ? connection.source : undefined
const tgt = 'target' in connection ? connection.target : undefined
if (typeof src !== 'string' || typeof tgt !== 'string') return false
const currentNodes = nodesRef.current
const sourceNode = currentNodes.find((n) => n.id === src)
const targetNode = currentNodes.find((n) => n.id === tgt)
const sourceType = sourceNode?.type
const targetType = targetNode?.type
if (!sourceType || !targetType) return false
if (sourceType === 'render' && targetType === 'config') {
const targetData = targetNode?.data as { configType?: string } | undefined
if (targetData?.configType !== 'markdown') return false
}
return isConnectionAllowed(sourceType, targetType, src, tgt)
}, [])
const onConnectStart = useCallback(
(
@@ -655,9 +654,10 @@ export function CanvasPage({ projectId }: CanvasPageProps) {
</div>
)}
<ReactFlowProvider initialNodes={nodes} initialEdges={edges} fitView>
<FlowFitViewOnLoad />
<FlowKeyboardShortcuts />
<ReactFlow
<ViewportDisplayProvider>
<FlowFitViewOnLoad />
<FlowKeyboardShortcuts />
<ReactFlow
className={isPanning ? 'react-flow--panning' : isSelecting ? 'react-flow--selecting' : undefined}
nodes={nodesForFlow}
edges={edgesForFlow}
@@ -684,6 +684,8 @@ export function CanvasPage({ projectId }: CanvasPageProps) {
fitView
onInit={onInit}
nodeDragThreshold={1}
onlyRenderVisibleElements
nodeOrigin={[0, 0]}
nodesDraggable
nodesConnectable
elementsSelectable
@@ -698,12 +700,13 @@ export function CanvasPage({ projectId }: CanvasPageProps) {
<div role="group" aria-label="Canvas controls: zoom and fit view">
<Controls />
</div>
{showMinimap && (
{showMinimap && nodes.length > 5 && (
<div role="region" aria-label="Minimap: overview of the graph">
<MiniMap />
</div>
)}
</ReactFlow>
</ViewportDisplayProvider>
</ReactFlowProvider>
</div>
</ContextMenuTrigger>