fix(svelte) split edges into internal/external. external edges dont require id, source, target anymore
This commit is contained in:
@@ -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';
|
||||
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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}
|
||||
/>
|
||||
@@ -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}
|
||||
/>
|
||||
@@ -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}
|
||||
/>
|
||||
@@ -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}
|
||||
/>
|
||||
@@ -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,
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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,
|
||||
|
||||
Reference in New Issue
Block a user