Merge pull request #3404 from wbkd/svelte-flow-fix-pattern-class

fix(svelte) Renamed className to class where possible

packages/svelte/src/lib/actions/drag/index.ts

@@ -6,7 +6,7 @@ import type { SvelteFlowStore } from '$lib/store/types';
 type UseDragParams = {
   store: SvelteFlowStore;
   disabled?: boolean;
-  noDragClassName?: string;
+  noDragClass?: string;
   handleSelector?: string;
   nodeId?: string;
   isSelectable?: boolean;
@@ -47,7 +47,7 @@ export default function drag(domNode: Element, params: UseDragParams) {
 
     dragInstance.update({
       domNode,
-      noDragClassName: params.noDragClassName,
+      noDragClassName: params.noDragClass,
       handleSelector: params.handleSelector,
       nodeId: params.nodeId,
       isSelectable: params.isSelectable

packages/svelte/src/lib/actions/zoom/index.ts

@@ -30,6 +30,8 @@ type ZoomParams = {
   panOnScrollMode: PanOnScrollMode;
   zoomActivationKeyPressed: boolean;
   preventScrolling: boolean;
+  // last two instances of 'classname' being used
+  // changing it to class would require object restructuring for use with panZoomInstance.update
   noPanClassName: string;
   noWheelClassName: string;
   userSelectionActive: boolean;

packages/svelte/src/lib/plugins/Background/Background.svelte

@@ -22,7 +22,7 @@
   export let lineWidth: $$Props['lineWidth'] = 1;
   export let bgColor: $$Props['bgColor'] = undefined;
   export let patternColor: $$Props['patternColor'] = undefined;
-  export let patternClassName: $$Props['patternClassName'] = undefined;
+  export let patternClass: $$Props['patternClass'] = undefined;
   let className: $$Props['class'] = '';
   export { className as class };
 
@@ -57,9 +57,9 @@
     patternTransform={`translate(-${patternOffset[0]},-${patternOffset[1]})`}
   >
     {#if isDots}
-      <DotPattern radius={scaledSize / 2} class={patternClassName} />
+      <DotPattern radius={scaledSize / 2} class={patternClass} />
     {:else}
-      <LinePattern dimensions={patternDimensions} {variant} {lineWidth} class={patternClassName} />
+      <LinePattern dimensions={patternDimensions} {variant} {lineWidth} class={patternClass} />
     {/if}
   </pattern>
   <rect x="0" y="0" width="100%" height="100%" fill={`url(#${patternId})`} />

packages/svelte/src/lib/plugins/Background/types.ts

@@ -7,7 +7,7 @@ export enum BackgroundVariant {
 export type BackgroundProps = {
   bgColor?: string;
   patternColor?: string;
-  patternClassName?: string;
+  patternClass?: string;
   class?: string;
   gap?: number | [number, number];
   size?: number;

packages/svelte/src/lib/plugins/Minimap/Minimap.svelte

@@ -21,7 +21,7 @@
   export let ariaLabel: $$Props['ariaLabel'] = 'Mini map';
   export let nodeStrokeColor: $$Props['nodeStrokeColor'] = 'transparent';
   export let nodeColor: $$Props['nodeColor'] = '#e2e2e2';
-  export let nodeClassName: $$Props['nodeClassName'] = '';
+  export let nodeClass: $$Props['nodeClass'] = '';
   export let nodeBorderRadius: $$Props['nodeBorderRadius'] = 5;
   export let nodeStrokeWidth: $$Props['nodeStrokeWidth'] = 2;
   export let bgColor: $$Props['bgColor'] = undefined;
@@ -53,7 +53,7 @@
 
   const nodeColorFunc = getAttrFunction(nodeColor);
   const nodeStrokeColorFunc = getAttrFunction(nodeStrokeColor);
-  const nodeClassNameFunc = getAttrFunction(nodeClassName);
+  const nodeClassFunc = getAttrFunction(nodeClass);
   const shapeRendering =
     typeof window === 'undefined' || !!window.chrome ? 'crispEdges' : 'geometricPrecision';
   const labelledBy = `svelte-flow__minimap-desc-${$flowId}`;
@@ -126,7 +126,7 @@
             strokeColor={nodeStrokeColorFunc(node)}
             strokeWidth={nodeStrokeWidth}
             {shapeRendering}
-            class={nodeClassNameFunc(node)}
+            class={nodeClassFunc(node)}
           />
         {/if}
       {/each}

packages/svelte/src/lib/plugins/Minimap/types.ts

@@ -8,7 +8,7 @@ export type MiniMapProps = {
   bgColor?: string;
   nodeColor?: string | GetMiniMapNodeAttribute;
   nodeStrokeColor?: string | GetMiniMapNodeAttribute;
-  nodeClassName?: string | GetMiniMapNodeAttribute;
+  nodeClass?: string | GetMiniMapNodeAttribute;
   nodeBorderRadius?: number;
   nodeStrokeWidth?: number;
   maskColor?: string;