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;