diff --git a/examples/svelte/src/routes/overview/+page.svelte b/examples/svelte/src/routes/overview/+page.svelte
index a9b32f6d..f830baf7 100644
--- a/examples/svelte/src/routes/overview/+page.svelte
+++ b/examples/svelte/src/routes/overview/+page.svelte
@@ -160,9 +160,14 @@
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
connectionMode={ConnectionMode.Strict}
+ attributionPosition={'top-center'}
>
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 });
+ }
@@ -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')
)}
-
+
{/each}
diff --git a/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte b/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte
index 0b578b63..600622ce 100644
--- a/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte
+++ b/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte
@@ -55,6 +55,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';
@@ -151,7 +153,7 @@
>
-
+
-
+
diff --git a/packages/svelte/src/lib/container/SvelteFlow/types.ts b/packages/svelte/src/lib/container/SvelteFlow/types.ts
index 4c99e74e..8f038bcb 100644
--- a/packages/svelte/src/lib/container/SvelteFlow/types.ts
+++ b/packages/svelte/src/lib/container/SvelteFlow/types.ts
@@ -15,7 +15,9 @@ import type {
HandleType,
NodeBase,
OnError,
- ConnectionMode
+ ConnectionMode,
+ PanelPosition,
+ ProOptions
} from '@xyflow/system';
import type { Edge, Node, NodeTypes, KeyDefinition, EdgeTypes } from '$lib/types';
@@ -54,6 +56,8 @@ export type SvelteFlowProps = DOMAttributes & {
onlyRenderVisibleElements?: boolean;
autoPanOnConnect?: boolean;
autoPanOnNodeDrag?: boolean;
+ attributionPosition?: PanelPosition;
+ proOptions?: ProOptions;
class?: string;
style?: string;
@@ -71,6 +75,7 @@ export type SvelteFlowProps = DOMAttributes & {
'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;