Skip to content

feat(apollo-react): BaseCanvas - add flag for toggling back navigation #314

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
david-rios-uipath wants to merge 1 commit into from
Closed

feat(apollo-react): BaseCanvas - add flag for toggling back navigation #314

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 6 additions & 1 deletion packages/apollo-react/src/canvas/components/BaseCanvas/BaseCanvas.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,6 +82,7 @@ const BaseCanvasInnerComponent = <NodeType extends Node = Node, EdgeType extends
zoomOnDoubleClick = true,
snapToGrid = BASE_CANVAS_DEFAULTS.snapToGrid,
snapGrid = BASE_CANVAS_DEFAULTS.snapGrid,
preventScrolling = false,

// Layout
initialAutoLayout,
Expand All @@ -91,6 +92,9 @@ const BaseCanvasInnerComponent = <NodeType extends Node = Node, EdgeType extends
onToolbarAction,
breakpoints,

// Navigation
enableBackNavigationPrevention = true,

// Pan Shortcut Teaching UI
panShortcutTeachingUIMessage = 'Hold Space and drag to pan around the canvas!',

Expand All @@ -109,7 +113,8 @@ const BaseCanvasInnerComponent = <NodeType extends Node = Node, EdgeType extends
const { ensureNodesInView, ensureAllNodesInView, centerNode } = useEnsureNodesInView();

// Prevent browser back navigation on touch gestures
usePreventBackNavigation();
const preventBackNavigationEnabled = preventScrolling === false && enableBackNavigationPrevention;
usePreventBackNavigation(preventBackNavigationEnabled);

// Maintain specified nodes in view when canvas resizes
// This ensures important nodes remain visible in responsive layouts
Expand Down
7 changes: 7 additions & 0 deletions packages/apollo-react/src/canvas/components/BaseCanvas/BaseCanvas.types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -187,6 +187,13 @@ export interface BaseCanvasProps<NodeType extends Node = Node, EdgeType extends
* @default undefined
*/
isDarkMode?: boolean;

/**
* Whether to prevent browser back navigation on touch gestures and horizontal wheel scrolling.
* Disable this when the canvas is embedded in a scrollable page where horizontal scroll should work normally.
* @default true
*/
enableBackNavigationPrevention?: boolean;
}

/**
Expand Down
5 changes: 3 additions & 2 deletions packages/apollo-react/src/canvas/components/BaseCanvas/usePreventBackNavigation.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,9 @@ import { useEffect } from 'react';
* Custom hook to prevent browser back navigation on touch gestures and horizontal wheel scrolling.
* This is useful for canvas/flow components where accidental navigation can interrupt user work.
*/
export function usePreventBackNavigation() {
export function usePreventBackNavigation(enabled = true) {
useEffect(() => {
if (!enabled) return;
const preventBackNavigation = (e: TouchEvent) => {
if (e.touches.length === 2) {
e.preventDefault();
Expand All @@ -28,5 +29,5 @@ export function usePreventBackNavigation() {
document.removeEventListener('touchmove', preventBackNavigation);
document.removeEventListener('wheel', preventWheel);
};
}, []);
}, [enabled]);
}
Loading