implement noWheelClass, noPanClass, noDragClass

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}

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',
+    store.noDragClass,
-    'nopan',
+    store.noPanClass,
     position,
     className
   ]}

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)"

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) => {

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
      *

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',
+    noPanClassName: store.noPanClass,
-    noWheelClassName: 'nowheel',
+    noWheelClassName: store.noWheelClass,
     userSelectionActive: !!store.selectionRect,
     translateExtent: store.translateExtent,
     lib: 'svelte',

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}

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 });