From fddd4be6f8413dede329302ef50d86d65a60e868 Mon Sep 17 00:00:00 2001
From: peterkogo <peter@xyflow.com>
Date: Tue, 29 Apr 2025 19:03:09 +0200
Subject: [PATCH] implement noWheelClass, noPanClass, noDragClass

---
 .../EdgeReconnectAnchor.svelte                |  7 ++++++-
 .../src/lib/components/Handle/Handle.svelte   |  4 ++--
 .../NodeSelection/NodeSelection.svelte        |  2 +-
 .../components/NodeWrapper/NodeWrapper.svelte |  2 +-
 .../src/lib/container/SvelteFlow/types.ts     | 21 +++++++++++++++++++
 .../svelte/src/lib/container/Zoom/Zoom.svelte |  4 ++--
 .../plugins/NodeResizer/ResizeControl.svelte  |  4 ++--
 .../src/lib/store/initial-store.svelte.ts     |  4 ++++
 8 files changed, 39 insertions(+), 9 deletions(-)

diff --git a/packages/svelte/src/lib/components/EdgeReconnectAnchor/EdgeReconnectAnchor.svelte b/packages/svelte/src/lib/components/EdgeReconnectAnchor/EdgeReconnectAnchor.svelte
index b49edbb6..96842f26 100644
--- a/packages/svelte/src/lib/components/EdgeReconnectAnchor/EdgeReconnectAnchor.svelte
+++ b/packages/svelte/src/lib/components/EdgeReconnectAnchor/EdgeReconnectAnchor.svelte
@@ -107,7 +107,12 @@
   y={position?.y}
   width={size}
   height={size}
-  class={['svelte-flow__edgeupdater nopan', `svelte-flow__edgeupdater-${type}`, className]}
+  class={[
+    'svelte-flow__edgeupdater',
+    `svelte-flow__edgeupdater-${type}`,
+    store.noPanClass,
+    className
+  ]}
   onpointerdown={onPointerDown}
   transparent
   {...rest}
diff --git a/packages/svelte/src/lib/components/Handle/Handle.svelte b/packages/svelte/src/lib/components/Handle/Handle.svelte
index 1e477d79..fbc0ea6e 100644
--- a/packages/svelte/src/lib/components/Handle/Handle.svelte
+++ b/packages/svelte/src/lib/components/Handle/Handle.svelte
@@ -205,8 +205,8 @@ The Handle component is the part of a node that can be used to connect nodes.
   class={[
     'svelte-flow__handle',
     `svelte-flow__handle-${position}`,
-    'nodrag',
-    'nopan',
+    store.noDragClass,
+    store.noPanClass,
     position,
     className
   ]}
diff --git a/packages/svelte/src/lib/components/NodeSelection/NodeSelection.svelte b/packages/svelte/src/lib/components/NodeSelection/NodeSelection.svelte
index abda573a..ea0073b6 100644
--- a/packages/svelte/src/lib/components/NodeSelection/NodeSelection.svelte
+++ b/packages/svelte/src/lib/components/NodeSelection/NodeSelection.svelte
@@ -56,7 +56,7 @@
 
 {#if store.selectionRectMode === 'nodes' && bounds && isNumeric(bounds.x) && isNumeric(bounds.y)}
   <div
-    class="svelte-flow__selection-wrapper nopan"
+    class={['svelte-flow__selection-wrapper', store.noPanClass]}
     style:width={toPxString(bounds.width)}
     style:height={toPxString(bounds.height)}
     style:transform="translate({bounds.x}px, {bounds.y}px)"
diff --git a/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte b/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte
index f05edf00..c02af3fe 100644
--- a/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte
+++ b/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte
@@ -206,7 +206,7 @@
       isSelectable: selectable,
       disabled: !draggable,
       handleSelector: dragHandle,
-      noDragClass: 'nodrag',
+      noDragClass: store.noDragClass,
       nodeClickDistance,
       onNodeMouseDown: store.handleNodeSelection,
       onDrag: (event, _, targetNode, nodes) => {
diff --git a/packages/svelte/src/lib/container/SvelteFlow/types.ts b/packages/svelte/src/lib/container/SvelteFlow/types.ts
index fb10afd1..53afe4c7 100644
--- a/packages/svelte/src/lib/container/SvelteFlow/types.ts
+++ b/packages/svelte/src/lib/container/SvelteFlow/types.ts
@@ -363,6 +363,27 @@ export type SvelteFlowProps<
      * @default false
      */
     disableKeyboardA11y?: boolean;
+    /**
+     * If a node is draggable, clicking and dragging that node will move it around the canvas. Adding
+     * the `"nodrag"` class prevents this behavior and this prop allows you to change the name of that
+     * class.
+     * @default "nodrag"
+     */
+    noDragClass?: string;
+    /**
+     * Typically, scrolling the mouse wheel when the mouse is over the canvas will zoom the viewport.
+     * Adding the `"nowheel"` class to an element n the canvas will prevent this behavior and this prop
+     * allows you to change the name of that class.
+     * @default "nowheel"
+     */
+    noWheelClass?: string;
+    /**
+     * If an element in the canvas does not stop mouse events from propagating, clicking and dragging
+     * that element will pan the viewport. Adding the `"nopan"` class prevents this behavior and this
+     * prop allows you to change the name of that class.
+     * @default "nopan"
+     */
+    noPanClass?: string;
     /**
      * This callback can be used to validate a new connection
      *
diff --git a/packages/svelte/src/lib/container/Zoom/Zoom.svelte b/packages/svelte/src/lib/container/Zoom/Zoom.svelte
index 01d1c461..42a644a6 100644
--- a/packages/svelte/src/lib/container/Zoom/Zoom.svelte
+++ b/packages/svelte/src/lib/container/Zoom/Zoom.svelte
@@ -62,8 +62,8 @@
     panOnScrollMode: panOnScrollMode || PanOnScrollMode.Free,
     zoomActivationKeyPressed: store.zoomActivationKeyPressed,
     preventScrolling: typeof preventScrolling === 'boolean' ? preventScrolling : true,
-    noPanClassName: 'nopan',
-    noWheelClassName: 'nowheel',
+    noPanClassName: store.noPanClass,
+    noWheelClassName: store.noWheelClass,
     userSelectionActive: !!store.selectionRect,
     translateExtent: store.translateExtent,
     lib: 'svelte',
diff --git a/packages/svelte/src/lib/plugins/NodeResizer/ResizeControl.svelte b/packages/svelte/src/lib/plugins/NodeResizer/ResizeControl.svelte
index afcb6d30..b30ecc47 100644
--- a/packages/svelte/src/lib/plugins/NodeResizer/ResizeControl.svelte
+++ b/packages/svelte/src/lib/plugins/NodeResizer/ResizeControl.svelte
@@ -47,7 +47,7 @@
     return position ?? defaultPosition;
   });
 
-  let positionClassNames = $derived(controlPosition.split('-'));
+  let positionClasses = $derived(controlPosition.split('-'));
 
   onMount(() => {
     if (resizeControlRef) {
@@ -117,7 +117,7 @@
 </script>
 
 <div
-  class={['svelte-flow__resize-control', 'nodrag', ...positionClassNames, variant, className]}
+  class={['svelte-flow__resize-control', store.noDragClass, ...positionClasses, variant, className]}
   bind:this={resizeControlRef}
   style:border-color={variant === ResizeControlVariant.Line ? color : undefined}
   style:background-color={variant === ResizeControlVariant.Line ? undefined : color}
diff --git a/packages/svelte/src/lib/store/initial-store.svelte.ts b/packages/svelte/src/lib/store/initial-store.svelte.ts
index 36ec8f41..25c055de 100644
--- a/packages/svelte/src/lib/store/initial-store.svelte.ts
+++ b/packages/svelte/src/lib/store/initial-store.svelte.ts
@@ -238,6 +238,10 @@ export function getInitialStore<NodeType extends Node = Node, EdgeType extends E
     nodeTypes: NodeTypes = $derived({ ...initialNodeTypes, ...signals.props.nodeTypes });
     edgeTypes: EdgeTypes = $derived({ ...initialEdgeTypes, ...signals.props.edgeTypes });
 
+    noPanClass: string = $derived(signals.props.noPanClass ?? 'nopan');
+    noDragClass: string = $derived(signals.props.noDragClass ?? 'nodrag');
+    noWheelClass: string = $derived(signals.props.noWheelClass ?? 'nowheel');
+
     // _viewport is the internal viewport.
     // when binding to viewport, we operate on signals.viewport instead
     _viewport: Viewport = $state(signals.props.initialViewport ?? { x: 0, y: 0, zoom: 1 });