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

fix(svelte) backup connection line now renders correctly

Browse Source
This commit is contained in:
Peter
2023-09-27 15:53:17 +02:00
parent 2e6c5d9191
commit 1d8fc1bfaf
3 changed files with 11 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/svelte/src/routes/custom-connection-line/+page.svelte
+1 -1
View File
@@ -26,7 +26,7 @@
<div style="height:100vh;"> <div style="height:100vh;">
<SvelteFlow {nodeTypes} {nodes} {edges} fitView> <SvelteFlow {nodeTypes} {nodes} {edges} fitView>
<ConnectionLine slot="connectionLineComponent" /> <ConnectionLine slot="connectionLine" />
<Background variant={BackgroundVariant.Lines} /> <Background variant={BackgroundVariant.Lines} />
</SvelteFlow> </SvelteFlow>
</div> </div>
packages/svelte/src/lib/components/ConnectionLine/ConnectionLine.svelte
+4 -2
View File
@@ -5,16 +5,18 @@
export let containerStyle: string = ''; export let containerStyle: string = '';
export let style: string = ''; export let style: string = '';
export let usingCustomLine: boolean = false;
const { width, height, connection } = useStore(); const { width, height, connection } = useStore();
</script> </script>
{#if $connection.path} {#if $connection.path}
<svg width={$width} height={$height} class="svelte-flow__connectionline" style={containerStyle}> <svg width={$width} height={$height} class="svelte-flow__connectionline" style={containerStyle}>
<slot name="connectionLineComponent"> <slot name="connectionLine" />
{#if !usingCustomLine}
<g class={cc(['svelte-flow__connection', $connection.status])} {style}> <g class={cc(['svelte-flow__connection', $connection.status])} {style}>
<path d={$connection.path} fill="none" class="svelte-flow__connection-path" /> <path d={$connection.path} fill="none" class="svelte-flow__connection-path" />
</g> </g>
</slot> {/if}
</svg> </svg>
{/if} {/if}
packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte
+6 -2
View File
@@ -162,8 +162,12 @@
<Pane on:paneclick panOnDrag={panOnDrag === undefined ? true : panOnDrag}> <Pane on:paneclick panOnDrag={panOnDrag === undefined ? true : panOnDrag}>
<ViewportComponent> <ViewportComponent>
<EdgeRenderer on:edgeclick on:edgecontextmenu {defaultEdgeOptions} /> <EdgeRenderer on:edgeclick on:edgecontextmenu {defaultEdgeOptions} />
<ConnectionLine containerStyle={connectionLineContainerStyle} style={connectionLineStyle}> <ConnectionLine
<slot name="connectionLineComponent" slot="connectionLineComponent" /> containerStyle={connectionLineContainerStyle}
style={connectionLineStyle}
usingCustomLine={$$slots.connectionLine}
>
<slot name="connectionLine" slot="connectionLine" />
</ConnectionLine> </ConnectionLine>
<div class="svelte-flow__edgelabel-renderer" /> <div class="svelte-flow__edgelabel-renderer" />
<NodeRenderer <NodeRenderer