Merge branch xyflow into svelte-flow-fit-view-options

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

@@ -51,6 +51,11 @@
     const edge = $edges.find((e) => e.id === id);
     dispatch('edgeclick', { event, edge });
   }
+
+  function onContextMenu(event: MouseEvent) {
+    const edge = $edges.find((e) => e.id === id);
+    dispatch('edgecontextmenu', { event, edge });
+  }
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
@@ -62,6 +67,7 @@
     class:selected
     data-id={id}
     on:click={onClick}
+    on:contextmenu={onContextMenu}
     aria-label={ariaLabel === null
       ? undefined
       : ariaLabel

packages/svelte/src/lib/container/EdgeRenderer/EdgeRenderer.svelte

@@ -30,7 +30,8 @@
           edge.selectable ||
           ($elementsSelectable && typeof edge.selectable === 'undefined')
         )}
-        <EdgeWrapper {...edge} type={edgeType} {selectable} on:edgeclick />
+
+        <EdgeWrapper {...edge} type={edgeType} {selectable} on:edgeclick on:edgecontextmenu />
       {/each}
     </g>
   </svg>

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

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { onMount, hasContext } from 'svelte';
   import cc from 'classcat';
-  import { PanOnScrollMode, type Viewport } from '@xyflow/system';
+  import { ConnectionMode, PanOnScrollMode, type Viewport } from '@xyflow/system';
 
   import { Zoom } from '$lib/container/Zoom';
   import { Pane } from '$lib/container/Pane';
@@ -39,6 +39,7 @@
   export let deleteKey: $$Props['deleteKey'] = undefined;
   export let connectionRadius: $$Props['connectionRadius'] = undefined;
   export let connectionLineType: $$Props['connectionLineType'] = undefined;
+  export let connectionMode: $$Props['connectionMode'] = ConnectionMode.Strict;
   export let onMoveStart: $$Props['onMoveStart'] = undefined;
   export let onMove: $$Props['onMove'] = undefined;
   export let onMoveEnd: $$Props['onMoveEnd'] = undefined;
@@ -55,6 +56,8 @@
   export let autoPanOnConnect: $$Props['autoPanOnConnect'] = true;
   export let autoPanOnNodeDrag: $$Props['autoPanOnNodeDrag'] = true;
   export let onError: $$Props['onError'] = undefined;
+  export let attributionPosition: $$Props['attributionPosition'] = undefined;
+  export let proOptions: $$Props['proOptions'] = undefined;
   export let defaultEdgeOptions: $$Props['defaultEdgeOptions'] = undefined;
 
   export let defaultMarkerColor = '#b1b1b7';
@@ -114,7 +117,8 @@
       isValidConnection,
       autoPanOnConnect,
       autoPanOnNodeDrag,
-      onError
+      onError,
+      connectionMode
     };
 
     updateStoreByKeys(store, updatableProps);
@@ -155,7 +159,7 @@
   >
     <Pane on:paneclick panOnDrag={panOnDrag === undefined ? true : panOnDrag}>
       <ViewportComponent>
-        <EdgeRenderer on:edgeclick {defaultEdgeOptions} />
+        <EdgeRenderer on:edgeclick on:edgecontextmenu {defaultEdgeOptions} />
         <ConnectionLine />
         <div class="svelte-flow__edgelabel-renderer" />
         <NodeRenderer
@@ -176,7 +180,7 @@
       <UserSelection />
     </Pane>
   </Zoom>
-  <Attribution />
+  <Attribution {proOptions} position={attributionPosition} />
   <slot />
 </div>
 

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

@@ -14,7 +14,10 @@ import type {
   IsValidConnection,
   HandleType,
   NodeBase,
-  OnError
+  OnError,
+  ConnectionMode,
+  PanelPosition,
+  ProOptions
 } from '@xyflow/system';
 
 import type {
@@ -44,6 +47,7 @@ export type SvelteFlowProps = DOMAttributes<HTMLDivElement> & {
   maxZoom?: number;
   initialViewport?: Viewport;
   connectionRadius?: number;
+  connectionMode?: ConnectionMode;
   selectionMode?: SelectionMode;
   snapGrid?: SnapGrid;
   defaultMarkerColor?: string;
@@ -61,6 +65,8 @@ export type SvelteFlowProps = DOMAttributes<HTMLDivElement> & {
   onlyRenderVisibleElements?: boolean;
   autoPanOnConnect?: boolean;
   autoPanOnNodeDrag?: boolean;
+  attributionPosition?: PanelPosition;
+  proOptions?: ProOptions;
   defaultEdgeOptions?: DefaultEdgeOptions;
 
   class?: string;
@@ -79,6 +85,7 @@ export type SvelteFlowProps = DOMAttributes<HTMLDivElement> & {
   '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;

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

@@ -61,6 +61,7 @@ export type UpdatableStoreProps = {
   isValidConnection?: UnwrapWritable<SvelteFlowStore['isValidConnection']>;
   autoPanOnConnect?: UnwrapWritable<SvelteFlowStore['autoPanOnConnect']>;
   autoPanOnNodeDrag?: UnwrapWritable<SvelteFlowStore['autoPanOnNodeDrag']>;
+  connectionMode?: UnwrapWritable<SvelteFlowStore['connectionMode']>;
   onError?: UnwrapWritable<SvelteFlowStore['onError']>;
 };