62 lines
1.7 KiB
Svelte
62 lines
1.7 KiB
Svelte
<script lang="ts">
|
|
import cc from 'classcat';
|
|
|
|
import { useStore } from '$lib/store';
|
|
import {
|
|
ConnectionLineType,
|
|
getBezierPath,
|
|
getConnectionStatus,
|
|
getSmoothStepPath,
|
|
getStraightPath
|
|
} from '@xyflow/system';
|
|
|
|
export let containerStyle: string = '';
|
|
export let style: string = '';
|
|
export let isCustomComponent: boolean = false;
|
|
|
|
const { width, height, connection, connectionLineType } = useStore();
|
|
|
|
let path: string | null = null;
|
|
|
|
$: if ($connection.inProgress && !isCustomComponent) {
|
|
const { from, to, fromPosition, toPosition } = $connection;
|
|
const pathParams = {
|
|
sourceX: from.x,
|
|
sourceY: from.y,
|
|
sourcePosition: fromPosition,
|
|
targetX: to.x,
|
|
targetY: to.y,
|
|
targetPosition: toPosition
|
|
};
|
|
|
|
switch ($connectionLineType) {
|
|
case ConnectionLineType.Bezier:
|
|
[path] = getBezierPath(pathParams);
|
|
break;
|
|
case ConnectionLineType.Step:
|
|
[path] = getSmoothStepPath({
|
|
...pathParams,
|
|
borderRadius: 0
|
|
});
|
|
break;
|
|
case ConnectionLineType.SmoothStep:
|
|
[path] = getSmoothStepPath(pathParams);
|
|
break;
|
|
default:
|
|
[path] = getStraightPath(pathParams);
|
|
}
|
|
}
|
|
</script>
|
|
|
|
{#if $connection.inProgress}
|
|
<svg width={$width} height={$height} class="svelte-flow__connectionline" style={containerStyle}>
|
|
<g class={cc(['svelte-flow__connection', getConnectionStatus($connection.isValid)])}>
|
|
<slot name="connectionLine" />
|
|
<!-- slot fallbacks do not work if slots are forwarded in parent -->
|
|
{#if !isCustomComponent}
|
|
<path d={path} {style} fill="none" class="svelte-flow__connection-path" />
|
|
{/if}
|
|
</g>
|
|
</svg>
|
|
{/if}
|