chore(a11y): merge labelConfig with defaults

examples/react/src/examples/A11y/index.tsx

@@ -67,7 +67,7 @@ const A11y = () => {
         'a11yDescription.edge.default': 'Custom Edge Desc.',
         'controls.zoomin.title': 'Custom Zoom in',
         'controls.zoomout.title': 'Custom Zoom Out',
-        'controls.fitview.title': 'Custom Fit View',
+        // 'controls.fitview.title': 'Custom Fit View',
         'controls.interactive.title': 'Custom Toggle Interactivity',
       }}
     >

examples/svelte/src/routes/examples/a11y/+page.svelte

@@ -39,7 +39,7 @@
         'a11yDescription.edge.default': 'Svelte Custom Edge Desc.',
         'controls.zoomin.title': 'Svelte Custom Zoom in',
         'controls.zoomout.title': 'Svelte Custom Zoom Out',
-        'controls.fitview.title': 'Svelte Custom Fit View',
+        // 'controls.fitview.title': 'Svelte Custom Fit View',
         'controls.interactive.title': 'Svelte Custom Toggle Interactivity',
 	}}
 >

packages/react/src/components/StoreUpdater/index.tsx

@@ -5,7 +5,7 @@
  */
 import { useEffect, useRef } from 'react';
 import { shallow } from 'zustand/shallow';
-import { infiniteExtent, type CoordinateExtent } from '@xyflow/system';
+import { infiniteExtent, type CoordinateExtent, mergeLabelConfig, LabelConfig } from '@xyflow/system';
 
 import { useStore, useStoreApi } from '../../hooks/useStore';
 import type { Node, Edge, ReactFlowState, ReactFlowProps, FitViewOptions } from '../../types';
@@ -157,6 +157,10 @@ export function StoreUpdater<NodeType extends Node = Node, EdgeType extends Edge
         // Renamed fields
         else if (fieldName === 'fitView') store.setState({ fitViewQueued: fieldValue as boolean });
         else if (fieldName === 'fitViewOptions') store.setState({ fitViewOptions: fieldValue as FitViewOptions });
+
+        if (fieldName === 'labelConfig') {
+          store.setState({ labelConfig: mergeLabelConfig(fieldValue as LabelConfig) });
+        }
         // General case
         else store.setState({ [fieldName]: fieldValue });
       }

packages/svelte/src/lib/store/initial-store.svelte.ts

@@ -7,7 +7,7 @@ import {
   getViewportForBounds,
   updateConnectionLookup,
   initialConnection,
-  defaultLabelConfig,
+  mergeLabelConfig,
   type SelectionRect,
   type SnapGrid,
   type MarkerProps,
@@ -291,7 +291,7 @@ export function getInitialStore<NodeType extends Node = Node, EdgeType extends E
     noPanClass: string = $derived(signals.props.noPanClass ?? 'nopan');
     noDragClass: string = $derived(signals.props.noDragClass ?? 'nodrag');
     noWheelClass: string = $derived(signals.props.noWheelClass ?? 'nowheel');
-    labelConfig: LabelConfig = $derived(signals.props.labelConfig ?? defaultLabelConfig);
+    labelConfig: LabelConfig = $derived(mergeLabelConfig(signals.props.labelConfig));
 
     // _viewport is the internal viewport.
     // when binding to viewport, we operate on signals.viewport instead

packages/system/src/utils/general.ts

@@ -16,6 +16,8 @@ import type {
 import { type Viewport } from '../types';
 import { getNodePositionWithOrigin, isInternalNodeBase } from './graph';
 
+import { defaultLabelConfig, type LabelConfig } from '../constants';
+
 export const clamp = (val: number, min = 0, max = 1): number => Math.min(Math.max(val, min), max);
 
 export const clampPosition = (
@@ -418,3 +420,7 @@ export function withResolvers<T>(): {
   });
   return { promise, resolve, reject };
 }
+
+export function mergeLabelConfig(partial?: Partial<LabelConfig>): LabelConfig {
+  return { ...defaultLabelConfig, ...(partial || {}) };
+}