From 8100390142690cf63c56e52675c699971830276e Mon Sep 17 00:00:00 2001
From: Peter <p.korcsak@googlemail.com>
Date: Mon, 25 Sep 2023 10:00:38 +0200
Subject: [PATCH 1/2] feat(svelte) add attributionPosition and proOptions,
 closes #3424

---
 examples/svelte/src/routes/overview/+page.svelte            | 1 +
 .../svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte   | 4 +++-
 packages/svelte/src/lib/container/SvelteFlow/types.ts       | 6 +++++-
 3 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/examples/svelte/src/routes/overview/+page.svelte b/examples/svelte/src/routes/overview/+page.svelte
index 05bc506b..f6e0e683 100644
--- a/examples/svelte/src/routes/overview/+page.svelte
+++ b/examples/svelte/src/routes/overview/+page.svelte
@@ -161,6 +161,7 @@
 	}}
 	autoPanOnConnect
 	autoPanOnNodeDrag
+	attributionPosition={'top-center'}
 >
 	<Controls />
 	<Background variant={BackgroundVariant.Dots} />
diff --git a/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte b/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte
index d6e55ee2..2d2c1a44 100644
--- a/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte
+++ b/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte
@@ -54,6 +54,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 defaultMarkerColor = '#b1b1b7';
 
@@ -170,7 +172,7 @@
       <UserSelection />
     </Pane>
   </Zoom>
-  <Attribution />
+  <Attribution {proOptions} position={attributionPosition} />
   <slot />
 </div>
 
diff --git a/packages/svelte/src/lib/container/SvelteFlow/types.ts b/packages/svelte/src/lib/container/SvelteFlow/types.ts
index 04838c3a..a482bbbf 100644
--- a/packages/svelte/src/lib/container/SvelteFlow/types.ts
+++ b/packages/svelte/src/lib/container/SvelteFlow/types.ts
@@ -14,7 +14,9 @@ import type {
   IsValidConnection,
   HandleType,
   NodeBase,
-  OnError
+  OnError,
+  PanelPosition,
+  ProOptions
 } from '@xyflow/system';
 
 import type { Edge, Node, NodeTypes, KeyDefinition, EdgeTypes } from '$lib/types';
@@ -52,6 +54,8 @@ export type SvelteFlowProps = DOMAttributes<HTMLDivElement> & {
   onlyRenderVisibleElements?: boolean;
   autoPanOnConnect?: boolean;
   autoPanOnNodeDrag?: boolean;
+  attributionPosition?: PanelPosition;
+  proOptions?: ProOptions;
 
   class?: string;
   style?: string;

From 852372f41b698d65fab1a54906cf40db57d08b5e Mon Sep 17 00:00:00 2001
From: Peter <p.korcsak@googlemail.com>
Date: Mon, 25 Sep 2023 15:32:40 +0200
Subject: [PATCH 2/2] feat(svelte) added on:edgecontextmenu

---
 examples/svelte/src/routes/overview/+page.svelte            | 4 ++++
 .../src/lib/components/EdgeWrapper/EdgeWrapper.svelte       | 6 ++++++
 .../src/lib/container/EdgeRenderer/EdgeRenderer.svelte      | 2 +-
 .../svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte   | 2 +-
 packages/svelte/src/lib/container/SvelteFlow/types.ts       | 1 +
 5 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/examples/svelte/src/routes/overview/+page.svelte b/examples/svelte/src/routes/overview/+page.svelte
index 05bc506b..769e0662 100644
--- a/examples/svelte/src/routes/overview/+page.svelte
+++ b/examples/svelte/src/routes/overview/+page.svelte
@@ -159,6 +159,10 @@
 		event.detail.event.preventDefault();
 		console.log('on node contextmenu', event);
 	}}
+	on:edgecontextmenu={({ detail: { event, edge } }) => {
+		event.preventDefault();
+		console.log('on edge contextmenu', edge);
+	}}
 	autoPanOnConnect
 	autoPanOnNodeDrag
 >
diff --git a/packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte b/packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte
index 0b99d744..81d35e49 100644
--- a/packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte
+++ b/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
diff --git a/packages/svelte/src/lib/container/EdgeRenderer/EdgeRenderer.svelte b/packages/svelte/src/lib/container/EdgeRenderer/EdgeRenderer.svelte
index 0658f47a..8835c19a 100644
--- a/packages/svelte/src/lib/container/EdgeRenderer/EdgeRenderer.svelte
+++ b/packages/svelte/src/lib/container/EdgeRenderer/EdgeRenderer.svelte
@@ -17,7 +17,7 @@
           ($elementsSelectable && typeof edge.selectable === 'undefined')
         )}
 
-        <EdgeWrapper {...edge} type={edgeType} {selectable} on:edgeclick />
+        <EdgeWrapper {...edge} type={edgeType} {selectable} on:edgeclick on:edgecontextmenu />
       {/each}
     </g>
   </svg>
diff --git a/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte b/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte
index d6e55ee2..8b43ddb3 100644
--- a/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte
+++ b/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte
@@ -149,7 +149,7 @@
   >
     <Pane on:paneclick panOnDrag={panOnDrag === undefined ? true : panOnDrag}>
       <ViewportComponent>
-        <EdgeRenderer on:edgeclick />
+        <EdgeRenderer on:edgeclick on:edgecontextmenu />
         <ConnectionLine />
         <div class="svelte-flow__edgelabel-renderer" />
         <NodeRenderer
diff --git a/packages/svelte/src/lib/container/SvelteFlow/types.ts b/packages/svelte/src/lib/container/SvelteFlow/types.ts
index 04838c3a..b7ea42b7 100644
--- a/packages/svelte/src/lib/container/SvelteFlow/types.ts
+++ b/packages/svelte/src/lib/container/SvelteFlow/types.ts
@@ -69,6 +69,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;