alighasami/xyflow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(svelte) added connectionLineContainerStyle and connectionLineStyle props

Browse Source
This commit is contained in:
Peter
2023-09-26 16:01:00 +02:00
parent beecd9623b
commit 854a9d3606
3 changed files with 10 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/svelte/src/lib/components/ConnectionLine/ConnectionLine.svelte
+5 -2
View File
@@ -3,13 +3,16 @@
import { useStore } from '$lib/store'; import { useStore } from '$lib/store';
export let containerStyle: string = '';
export let style: string = '';
const { connectionPath, width, height, connection } = useStore(); const { connectionPath, width, height, connection } = useStore();
</script> </script>
{#if $connectionPath} {#if $connectionPath}
<svg width={$width} height={$height} class="svelte-flow__connectionline"> <svg width={$width} height={$height} class="svelte-flow__connectionline" style={containerStyle}>
<slot name="connectionLineComponent"> <slot name="connectionLineComponent">
<g class={cc(['svelte-flow__connection', $connection.connectionStatus])}> <g class={cc(['svelte-flow__connection', $connection.connectionStatus])} {style}>
<path d={$connectionPath} fill="none" class="svelte-flow__connection-path" /> <path d={$connectionPath} fill="none" class="svelte-flow__connection-path" />
</g> </g>
</slot> </slot>
packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte
+3 -1
View File
@@ -39,6 +39,8 @@
export let connectionRadius: $$Props['connectionRadius'] = undefined; export let connectionRadius: $$Props['connectionRadius'] = undefined;
export let connectionLineType: $$Props['connectionLineType'] = undefined; export let connectionLineType: $$Props['connectionLineType'] = undefined;
export let connectionMode: $$Props['connectionMode'] = ConnectionMode.Strict; export let connectionMode: $$Props['connectionMode'] = ConnectionMode.Strict;
export let connectionLineStyle: $$Props['connectionLineStyle'] = '';
export let connectionLineContainerStyle: $$Props['connectionLineContainerStyle'] = '';
export let onMoveStart: $$Props['onMoveStart'] = undefined; export let onMoveStart: $$Props['onMoveStart'] = undefined;
export let onMove: $$Props['onMove'] = undefined; export let onMove: $$Props['onMove'] = undefined;
export let onMoveEnd: $$Props['onMoveEnd'] = undefined; export let onMoveEnd: $$Props['onMoveEnd'] = undefined;
@@ -154,7 +156,7 @@
<Pane on:paneclick panOnDrag={panOnDrag === undefined ? true : panOnDrag}> <Pane on:paneclick panOnDrag={panOnDrag === undefined ? true : panOnDrag}>
<ViewportComponent> <ViewportComponent>
<EdgeRenderer on:edgeclick on:edgecontextmenu /> <EdgeRenderer on:edgeclick on:edgecontextmenu />
<ConnectionLine> <ConnectionLine containerStyle={connectionLineContainerStyle} style={connectionLineStyle}>
<slot name="connectionLineComponent" slot="connectionLineComponent" /> <slot name="connectionLineComponent" slot="connectionLineComponent" />
</ConnectionLine> </ConnectionLine>
<div class="svelte-flow__edgelabel-renderer" /> <div class="svelte-flow__edgelabel-renderer" />
packages/svelte/src/lib/container/SvelteFlow/types.ts
+2
View File
@@ -39,6 +39,8 @@ export type SvelteFlowProps = DOMAttributes<HTMLDivElement> & {
initialViewport?: Viewport; initialViewport?: Viewport;
connectionRadius?: number; connectionRadius?: number;
connectionMode?: ConnectionMode; connectionMode?: ConnectionMode;
connectionLineStyle?: string;
connectionLineContainerStyle?: string;
selectionMode?: SelectionMode; selectionMode?: SelectionMode;
snapGrid?: SnapGrid; snapGrid?: SnapGrid;
defaultMarkerColor?: string; defaultMarkerColor?: string;