Merge pull request #3512 from wbkd/refactor/svelte

refactor(svelte): minor updates

packages/react/src/additional-components/Background/Background.tsx

@@ -46,6 +46,8 @@ function Background({
     ? [scaledSize / offset, scaledSize / offset]
     : [patternDimensions[0] / offset, patternDimensions[1] / offset];
 
+  const _patternId = `${patternId}${id ? id : ''}`;
+
   return (
     <svg
       className={cc(['react-flow__background', className])}
@@ -61,7 +63,7 @@ function Background({
       data-testid="rf__background"
     >
       <pattern
-        id={patternId + id}
+        id={_patternId}
         x={transform[0] % scaledGap[0]}
         y={transform[1] % scaledGap[1]}
         width={scaledGap[0]}
@@ -80,7 +82,7 @@ function Background({
           />
         )}
       </pattern>
-      <rect x="0" y="0" width="100%" height="100%" fill={`url(#${patternId + id})`} />
+      <rect x="0" y="0" width="100%" height="100%" fill={`url(#${_patternId})`} />
     </svg>
   );
 }

packages/svelte/src/lib/components/BaseEdge/BaseEdge.svelte

@@ -14,6 +14,8 @@
   export let markerEnd: $$Props['markerEnd'] = undefined;
   export let style: $$Props['style'] = undefined;
   export let interactionWidth: $$Props['interactionWidth'] = 20;
+  let className: $$Props['class'] = undefined;
+  export { className as class };
 </script>
 
 <path

packages/svelte/src/lib/components/BaseEdge/types.ts

@@ -10,4 +10,5 @@ export type BaseEdgeProps = Pick<
   labelY?: number;
   markerStart?: string;
   markerEnd?: string;
+  class?: string;
 };

packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte

@@ -6,7 +6,7 @@
 
   import { useStore } from '$lib/store';
   import BezierEdge from '$lib/components/edges/BezierEdge.svelte';
-  import type { EdgeLayouted } from '$lib/types';
+  import type { EdgeLayouted, Edge } from '$lib/types';
 
   type $$Props = EdgeLayouted;
 
@@ -39,7 +39,10 @@
   export { className as class };
 
   const { edges, edgeTypes, flowId, addSelectedEdges } = useStore();
-  const dispatch = createEventDispatcher();
+  const dispatch = createEventDispatcher<{
+    edgeclick: { edge: Edge; event: MouseEvent | TouchEvent };
+    edgecontextmenu: { edge: Edge; event: MouseEvent };
+  }>();
 
   $: edgeComponent = $edgeTypes[type!] || BezierEdge;
   $: markerStartUrl = markerStart ? `url(#${getMarkerId(markerStart, $flowId)})` : undefined;
@@ -51,12 +54,18 @@
     }
 
     const edge = $edges.find((e) => e.id === id);
-    dispatch('edgeclick', { event, edge });
+
+    if (edge) {
+      dispatch('edgeclick', { event, edge });
+    }
   }
 
   function onContextMenu(event: MouseEvent) {
     const edge = $edges.find((e) => e.id === id);
-    dispatch('edgecontextmenu', { event, edge });
+
+    if (edge) {
+      dispatch('edgecontextmenu', { event, edge });
+    }
   }
 </script>
 

packages/svelte/src/lib/components/Handle/Handle.svelte

@@ -1,7 +1,13 @@
 <script lang="ts">
   import { getContext, createEventDispatcher } from 'svelte';
   import cc from 'classcat';
-  import { Position, XYHandle, isMouseEvent } from '@xyflow/system';
+  import {
+    Position,
+    XYHandle,
+    isMouseEvent,
+    type Connection,
+    type HandleType
+  } from '@xyflow/system';
 
   import { useStore } from '$lib/store';
   import type { HandleComponentProps } from '$lib/types';
@@ -26,7 +32,18 @@
   $: handleConnectable = isConnectable !== undefined ? isConnectable : $connectable;
 
   const handleId = id || null;
-  const dispatch = createEventDispatcher();
+  const dispatch = createEventDispatcher<{
+    connect: { connection: Connection };
+    connectstart: {
+      event: MouseEvent | TouchEvent;
+      nodeId: string | null;
+      handleId: string | null;
+      handleType: HandleType | null;
+    };
+    connectend: {
+      event: MouseEvent | TouchEvent;
+    };
+  }>();
 
   const store = useStore();
   const {

packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte

@@ -16,6 +16,7 @@
   import { useStore } from '$lib/store';
   import DefaultNode from '$lib/components/nodes/DefaultNode.svelte';
   import type { NodeWrapperProps } from './types';
+  import type { Node } from '$lib/types';
 
   interface $$Props extends NodeWrapperProps {}
 
@@ -54,7 +55,16 @@
 
   const nodeComponent: ComponentType<SvelteComponent<NodeProps>> = $nodeTypes[type!] || DefaultNode;
   const selectNodesOnDrag = false;
-  const dispatch = createEventDispatcher();
+  const dispatch = createEventDispatcher<{
+    nodeclick: { node: Node; event: MouseEvent | TouchEvent };
+    nodecontextmenu: { node: Node; event: MouseEvent | TouchEvent };
+    nodedrag: { node: Node; nodes: Node[]; event: MouseEvent | TouchEvent };
+    nodedragstart: { node: Node; nodes: Node[]; event: MouseEvent | TouchEvent };
+    nodedragstop: { node: Node; nodes: Node[]; event: MouseEvent | TouchEvent };
+    nodemouseenter: { node: Node; event: MouseEvent | TouchEvent };
+    nodemouseleave: { node: Node; event: MouseEvent | TouchEvent };
+    nodemousemove: { node: Node; event: MouseEvent | TouchEvent };
+  }>();
   const connectableStore = writable(connectable);
 
   $: {

packages/svelte/src/lib/container/Pane/Pane.svelte

@@ -41,7 +41,14 @@
 
   export let panOnDrag: $$Props['panOnDrag'] = undefined;
 
-  const dispatch = createEventDispatcher();
+  const dispatch = createEventDispatcher<{
+    paneclick: {
+      event: MouseEvent | TouchEvent;
+    };
+    panecontextmenu: {
+      event: MouseEvent;
+    };
+  }>();
   const {
     nodes,
     edges,

packages/svelte/src/lib/container/SvelteFlow/types.ts

@@ -83,25 +83,4 @@ export type SvelteFlowProps = DOMAttributes<HTMLDivElement> & {
   onMove?: OnMove;
   onMoveEnd?: OnMoveEnd;
   onError?: OnError;
-
-  'on:nodeclick'?: CustomEvent<{ event: MouseEvent | TouchEvent; node: Node }>;
-  'on:nodemouseenter'?: CustomEvent<{ event: MouseEvent; node: Node }>;
-  'on:nodemousemove'?: CustomEvent<{ event: MouseEvent; node: Node }>;
-  'on:nodemouseleave'?: CustomEvent<{ event: MouseEvent; node: Node }>;
-  'on:edgeclick'?: CustomEvent<{ event: MouseEvent; edge: Edge }>;
-  'on:edgecontextmenu'?: CustomEvent<{ event: MouseEvent; edge: Edge }>;
-  'on:connectstart'?: CustomEvent<{
-    event: MouseEvent | TouchEvent;
-    nodeId?: string;
-    handleId?: string;
-    handleType?: HandleType;
-  }>;
-  'on:connect'?: CustomEvent<{ connection: Connection }>;
-  'on:connectend'?: CustomEvent<{ event: MouseEvent | TouchEvent }>;
-  'on:paneclick'?: CustomEvent<{ event: MouseEvent | TouchEvent }>;
-  'on:panecontextmenu'?: CustomEvent<{ event: MouseEvent }>;
-  'on:nodedragstart'?: CustomEvent<{ event: MouseEvent; node: NodeBase; nodes: NodeBase[] }>;
-  'on:nodedrag'?: CustomEvent<{ event: MouseEvent; node: NodeBase; nodes: NodeBase[] }>;
-  'on:nodedragstop'?: CustomEvent<{ event: MouseEvent; node: NodeBase; nodes: NodeBase[] }>;
-  'on:nodecontextmenu'?: CustomEvent<{ event: MouseEvent; node: NodeBase }>;
 };

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

@@ -16,6 +16,7 @@
 
   type $$Props = BackgroundProps;
 
+  export let id: $$Props['id'] = undefined;
   export let variant: $$Props['variant'] = BackgroundVariant.Dots;
   export let gap: $$Props['gap'] = 20;
   export let size: $$Props['size'] = 1;
@@ -32,7 +33,7 @@
   const isCross = variant === BackgroundVariant.Cross;
   const gapXY: number[] = Array.isArray(gap!) ? gap! : [gap!, gap!];
 
-  $: patternId = `background-pattern-${$flowId}`;
+  $: patternId = `background-pattern-${$flowId}-${id ? id : ''}`;
   $: scaledGap = [gapXY[0] * $viewport.zoom || 1, gapXY[1] * $viewport.zoom || 1];
   $: scaledSize = patternSize * $viewport.zoom;
   $: patternDimensions = (isCross ? [scaledSize, scaledSize] : scaledGap) as [number, number];

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

@@ -5,6 +5,7 @@ export enum BackgroundVariant {
 }
 
 export type BackgroundProps = {
+  id?: string;
   bgColor?: string;
   patternColor?: string;
   patternClass?: string;

packages/svelte/src/lib/plugins/Controls/Controls.svelte

@@ -15,7 +15,7 @@
   export let position: $$Props['position'] = 'bottom-left';
   export let showZoom: $$Props['showZoom'] = true;
   export let showFitView: $$Props['showFitView'] = true;
-  export let showInteractive: $$Props['showInteractive'] = true;
+  export let showLock: $$Props['showLock'] = true;
   export let buttonBgColor: $$Props['buttonBgColor'] = undefined;
   export let buttonBgColorHover: $$Props['buttonBgColorHover'] = undefined;
   export let buttonColor: $$Props['buttonColor'] = undefined;
@@ -101,7 +101,7 @@
       <FitViewIcon />
     </ControlButton>
   {/if}
-  {#if showInteractive}
+  {#if showLock}
     <ControlButton
       class="svelte-flow__controls-interactive"
       on:click={onToggleInteractivity}

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

@@ -4,7 +4,7 @@ export type ControlsProps = {
   position?: PanelPosition;
   showZoom?: boolean;
   showFitView?: boolean;
-  showInteractive?: boolean;
+  showLock?: boolean;
   buttonBgColor?: string;
   buttonBgColorHover?: string;
   buttonColor?: string;

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

@@ -121,6 +121,7 @@
             y={pos.y}
             width={node.width}
             height={node.height}
+            selected={node.selected}
             color={nodeColorFunc(node)}
             borderRadius={nodeBorderRadius}
             strokeColor={nodeStrokeColorFunc(node)}

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

@@ -10,12 +10,14 @@
   export let shapeRendering: string;
   export let strokeColor: string;
   export let strokeWidth: number = 2;
+  export let selected: boolean = false;
   let className: string = '';
   export { className as class };
 </script>
 
 <rect
   class={cc(['svelte-flow__minimap-node', className])}
+  class:selected
   {x}
   {y}
   rx={borderRadius}

packages/svelte/src/lib/types/edges.ts

@@ -10,13 +10,11 @@ import type {
 
 import type { Node } from '$lib/types';
 
-export type DefaultEdge<EdgeData = any> = EdgeBase<EdgeData> & {
+export type DefaultEdge<EdgeData = any> = Omit<EdgeBase<EdgeData>, 'focusable'> & {
   label?: string;
   labelStyle?: string;
   style?: string;
   class?: string;
-  sourceNode?: Node;
-  targetNode?: Node;
 };
 
 type SmoothStepEdgeType<T> = DefaultEdge<T> & {
@@ -47,7 +45,7 @@ export type EdgeProps = Omit<Edge, 'sourceHandle' | 'targetHandle'> &
 
 export type EdgeTypes = Record<string, ComponentType<SvelteComponent<EdgeProps>>>;
 
-export type DefaultEdgeOptions = DefaultEdgeOptionsBase<Edge>;
+export type DefaultEdgeOptions = Omit<DefaultEdgeOptionsBase<Edge>, 'focusable'>;
 
 export type EdgeLayouted = Pick<
   Edge,
@@ -72,6 +70,8 @@ export type EdgeLayouted = Pick<
   | 'class'
 > &
   EdgePosition & {
+    sourceNode?: Node;
+    targetNode?: Node;
     sourceHandleId?: string | null;
     targetHandleId?: string | null;
   };