PowerOn/frontend_nyla
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: resized canvas size and fixed delete comments

Browse source
This commit is contained in:
Ida 2026-05-13 15:42:00 +02:00
parent 3a7a34a4f3
commit 9e36075f0e
4 changed files with 59 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/components/FlowEditor/editor/Automation2FlowEditor.module.css
View file

@ -593,7 +593,7 @@
.canvasArea {
flex: 1;
padding: 2rem;
padding: 0;
min-height: 400px;
overflow-x: visible;
overflow-y: hidden;

2
src/components/FlowEditor/editor/Automation2FlowEditor.tsx
View file

@ -136,6 +136,7 @@ export const Automation2FlowEditor: React.FC<Automation2FlowEditorProps> = ({ in
zoom: 1,
selectedNodeCount: 0,
connectionSelected: false,
stickyNoteSelected: false,
});
const [canvasConnectionToolActive, setCanvasConnectionToolActive] = useState(false);
const [canvasStickyNotes, setCanvasStickyNotes] = useState<CanvasStickyNote[]>([]);
@ -822,6 +823,7 @@ export const Automation2FlowEditor: React.FC<Automation2FlowEditorProps> = ({ in
zoomPercent: Math.round(canvasViewportEdit.zoom * 100),
selectedNodeCount: canvasViewportEdit.selectedNodeCount,
connectionSelected: canvasViewportEdit.connectionSelected,
stickyNoteSelected: canvasViewportEdit.stickyNoteSelected,
connectionToolActive: canvasConnectionToolActive,
canUndo: canCanvasUndo,
canRedo: canCanvasRedo,

6
src/components/FlowEditor/editor/CanvasHeader.tsx
View file

@ -39,6 +39,7 @@ export interface CanvasHeaderCanvasEditProps {
zoomPercent: number;
selectedNodeCount: number;
connectionSelected: boolean;
stickyNoteSelected: boolean;
connectionToolActive: boolean;
canUndo: boolean;
canRedo: boolean;
@ -206,7 +207,10 @@ export const CanvasHeader: React.FC<CanvasHeaderProps> = ({
};
const _canDeleteSelection =
!!canvasEdit && (canvasEdit.selectedNodeCount > 0 || canvasEdit.connectionSelected);
!!canvasEdit &&
(canvasEdit.selectedNodeCount > 0 ||
canvasEdit.connectionSelected ||
canvasEdit.stickyNoteSelected);
const _singleNodeOnly =
!!canvasEdit && canvasEdit.selectedNodeCount === 1 && !canvasEdit.connectionSelected;

64
src/components/FlowEditor/editor/FlowCanvas.tsx
View file

@ -123,6 +123,8 @@ export interface FlowCanvasViewportEditState {
zoom: number;
selectedNodeCount: number;
connectionSelected: boolean;
/** Canvas-Sticky-/Kommentarnote ausgewählt (nicht Workflow-Knoten). */
stickyNoteSelected: boolean;
}
export type FlowCanvasHandle = {
@ -518,8 +520,9 @@ export const FlowCanvas = forwardRef<FlowCanvasHandle, FlowCanvasProps>(function
zoom,
selectedNodeCount: selectedNodeIds.size,
connectionSelected: !!selectedConnectionId,
stickyNoteSelected: !!selectedStickyId,
});
}, [zoom, selectedNodeIds, selectedConnectionId, onViewportEditState]);
}, [zoom, selectedNodeIds, selectedConnectionId, selectedStickyId, onViewportEditState]);
useEffect(() => {
onConnectionToolActiveChange?.(connectionToolActive);
@ -590,17 +593,27 @@ export const FlowCanvas = forwardRef<FlowCanvasHandle, FlowCanvasProps>(function
emitHistoryCheckpoint();
return;
}
if (selectedNodeIds.size === 0) return;
const ids = selectedNodeIds;
onNodesChange(nodes.filter((n) => !ids.has(n.id)));
onConnectionsChange(
connections.filter((c) => !ids.has(c.sourceId) && !ids.has(c.targetId))
);
setSelectedNodeIds(new Set());
setEditingNodeId(null);
setEditingField(null);
setSelectedStickyId(null);
emitHistoryCheckpoint();
if (selectedNodeIds.size > 0) {
const ids = selectedNodeIds;
onNodesChange(nodes.filter((n) => !ids.has(n.id)));
onConnectionsChange(
connections.filter((c) => !ids.has(c.sourceId) && !ids.has(c.targetId))
);
setSelectedNodeIds(new Set());
setEditingNodeId(null);
setEditingField(null);
setSelectedStickyId(null);
emitHistoryCheckpoint();
return;
}
const changeSticky = onStickyNotesChangeRef.current;
const sid = selectedStickyId;
if (sid && changeSticky) {
changeSticky(stickyNotesRef.current.filter((s) => s.id !== sid));
setSelectedStickyId(null);
setEditingStickyId(null);
emitHistoryCheckpoint();
}
},
duplicateSingleSelection: () => {
if (selectedNodeIds.size !== 1) return;
@ -663,6 +676,7 @@ export const FlowCanvas = forwardRef<FlowCanvasHandle, FlowCanvasProps>(function
onNodesChange,
selectedConnectionId,
selectedNodeIds,
selectedStickyId,
]
);
@ -1199,6 +1213,15 @@ export const FlowCanvas = forwardRef<FlowCanvasHandle, FlowCanvasProps>(function
emitHistoryCheckpoint();
}, [selectedNodeIds, nodes, connections, onNodesChange, onConnectionsChange, emitHistoryCheckpoint]);
const handleDeleteSelectedStickyNote = useCallback(() => {
const change = onStickyNotesChangeRef.current;
if (!selectedStickyId || !change) return;
change(stickyNotesRef.current.filter((s) => s.id !== selectedStickyId));
setSelectedStickyId(null);
setEditingStickyId(null);
emitHistoryCheckpoint();
}, [selectedStickyId, emitHistoryCheckpoint]);
React.useEffect(() => {
const onKeyDown = (e: KeyboardEvent) => {
const target = e.target as HTMLElement;
@ -1220,12 +1243,22 @@ export const FlowCanvas = forwardRef<FlowCanvasHandle, FlowCanvasProps>(function
} else if (selectedNodeIds.size > 0) {
e.preventDefault();
handleDeleteNode();
} else if (selectedStickyId && onStickyNotesChangeRef.current) {
e.preventDefault();
handleDeleteSelectedStickyNote();
}
}
};
window.addEventListener('keydown', onKeyDown);
return () => window.removeEventListener('keydown', onKeyDown);
}, [handleDeleteNode, handleDeleteConnection, selectedNodeIds.size, selectedConnectionId]);
}, [
handleDeleteNode,
handleDeleteConnection,
handleDeleteSelectedStickyNote,
selectedNodeIds.size,
selectedConnectionId,
selectedStickyId,
]);
const handleNodeUpdate = useCallback(
(nodeId: string, updates: Partial<Pick<CanvasNode, 'title' | 'comment'>>) => {
@ -1778,6 +1811,11 @@ export const FlowCanvas = forwardRef<FlowCanvasHandle, FlowCanvasProps>(function
backgroundColor: pal.bg,
borderColor: pal.border,
}}
onFocus={() => {
setSelectedStickyId(sn.id);
setSelectedNodeIds(new Set());
setSelectedConnectionId(null);
}}
onDoubleClick={(e) => {
e.stopPropagation();
setSelectedStickyId(sn.id);