fix(svelte) split edges into internal/external. external edges dont require id, source, target anymore

This commit is contained in:
Peter
2023-11-28 12:33:54 +01:00
parent 8fe8f73ed3
commit 9f538c6b7c
10 changed files with 124 additions and 9 deletions

View File

@@ -6,7 +6,7 @@
import { errorMessages, getMarkerId } from '@xyflow/system';
import { useStore } from '$lib/store';
import BezierEdge from '$lib/components/edges/BezierEdge.svelte';
import BezierEdge from '$lib/components/edges/InternalBezierEdge.svelte';
import type { EdgeLayouted, Edge } from '$lib/types';
import { get } from 'svelte/store';

View File

@@ -4,7 +4,7 @@
import type { EdgeProps } from '$lib/types';
import { BaseEdge } from '$lib/components/BaseEdge';
type $$Props = EdgeProps;
type $$Props = Partial<EdgeProps>;
$: [path, labelX, labelY] = getBezierPath({
sourceX: $$props.sourceX,

View File

@@ -0,0 +1,29 @@
<script lang="ts">
import { getBezierPath } from '@xyflow/system';
import type { EdgeProps } from '$lib/types';
import { BaseEdge } from '$lib/components/BaseEdge';
type $$Props = EdgeProps;
$: [path, labelX, labelY] = getBezierPath({
sourceX: $$props.sourceX,
sourceY: $$props.sourceY,
targetX: $$props.targetX,
targetY: $$props.targetY,
sourcePosition: $$props.sourcePosition,
targetPosition: $$props.targetPosition
});
</script>
<BaseEdge
{path}
{labelX}
{labelY}
label={$$props.label}
labelStyle={$$props.labelStyle}
markerStart={$$props.markerStart}
markerEnd={$$props.markerEnd}
interactionWidth={$$props.interactionWidth}
style={$$props.style}
/>

View File

@@ -0,0 +1,29 @@
<script lang="ts">
import { getSmoothStepPath } from '@xyflow/system';
import type { EdgeProps } from '$lib/types';
import { BaseEdge } from '$lib/components/BaseEdge';
type $$Props = EdgeProps;
$: [path, labelX, labelY] = getSmoothStepPath({
sourceX: $$props.sourceX,
sourceY: $$props.sourceY,
targetX: $$props.targetX,
targetY: $$props.targetY,
sourcePosition: $$props.sourcePosition,
targetPosition: $$props.targetPosition
});
</script>
<BaseEdge
{path}
{labelX}
{labelY}
label={$$props.label}
labelStyle={$$props.labelStyle}
markerStart={$$props.markerStart}
markerEnd={$$props.markerEnd}
interactionWidth={$$props.interactionWidth}
style={$$props.style}
/>

View File

@@ -0,0 +1,30 @@
<script lang="ts">
import { getSmoothStepPath } from '@xyflow/system';
import type { EdgeProps } from '$lib/types';
import { BaseEdge } from '$lib/components/BaseEdge';
type $$Props = EdgeProps;
$: [path, labelX, labelY] = getSmoothStepPath({
sourceX: $$props.sourceX,
sourceY: $$props.sourceY,
targetX: $$props.targetX,
targetY: $$props.targetY,
sourcePosition: $$props.sourcePosition,
targetPosition: $$props.targetPosition,
borderRadius: 0
});
</script>
<BaseEdge
{path}
{labelX}
{labelY}
label={$$props.label}
labelStyle={$$props.labelStyle}
markerStart={$$props.markerStart}
markerEnd={$$props.markerEnd}
interactionWidth={$$props.interactionWidth}
style={$$props.style}
/>

View File

@@ -0,0 +1,27 @@
<script lang="ts">
import { getStraightPath } from '@xyflow/system';
import type { EdgeProps } from '$lib/types';
import { BaseEdge } from '$lib/components/BaseEdge';
type $$Props = EdgeProps;
$: [path, labelX, labelY] = getStraightPath({
sourceX: $$props.sourceX,
sourceY: $$props.sourceY,
targetX: $$props.targetX,
targetY: $$props.targetY
});
</script>
<BaseEdge
{path}
{labelX}
{labelY}
label={$$props.label}
labelStyle={$$props.labelStyle}
markerStart={$$props.markerStart}
markerEnd={$$props.markerEnd}
interactionWidth={$$props.interactionWidth}
style={$$props.style}
/>

View File

@@ -4,7 +4,7 @@
import type { EdgeProps } from '$lib/types';
import { BaseEdge } from '$lib/components/BaseEdge';
type $$Props = EdgeProps;
type $$Props = Partial<EdgeProps>;
$: [path, labelX, labelY] = getSmoothStepPath({
sourceX: $$props.sourceX,

View File

@@ -4,7 +4,7 @@
import type { EdgeProps } from '$lib/types';
import { BaseEdge } from '$lib/components/BaseEdge';
type $$Props = EdgeProps;
type $$Props = Partial<EdgeProps>;
$: [path, labelX, labelY] = getSmoothStepPath({
sourceX: $$props.sourceX,

View File

@@ -4,7 +4,7 @@
import type { EdgeProps } from '$lib/types';
import { BaseEdge } from '$lib/components/BaseEdge';
type $$Props = EdgeProps;
type $$Props = Partial<EdgeProps>;
$: [path, labelX, labelY] = getStraightPath({
sourceX: $$props.sourceX,

View File

@@ -24,10 +24,10 @@ import DefaultNode from '$lib/components/nodes/DefaultNode.svelte';
import InputNode from '$lib/components/nodes/InputNode.svelte';
import OutputNode from '$lib/components/nodes/OutputNode.svelte';
import GroupNode from '$lib/components/nodes/GroupNode.svelte';
import BezierEdge from '$lib/components/edges/BezierEdge.svelte';
import StraightEdge from '$lib/components/edges/StraightEdge.svelte';
import SmoothStepEdge from '$lib/components/edges/SmoothStepEdge.svelte';
import StepEdge from '$lib/components/edges/StepEdge.svelte';
import BezierEdge from '$lib/components/edges/InternalBezierEdge.svelte';
import StraightEdge from '$lib/components/edges/InternalStraightEdge.svelte';
import SmoothStepEdge from '$lib/components/edges/InternalSmoothStepEdge.svelte';
import StepEdge from '$lib/components/edges/InternalStepEdge.svelte';
import type {
NodeTypes,
EdgeTypes,