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

refactor(svelte/edges): cleanup types and components

Browse Source
This commit is contained in:
moklick
2023-11-30 12:58:44 +01:00
parent 6825b486ec
commit a70e25b1a2
30 changed files with 640 additions and 233 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
examples/svelte/src/routes/examples/edges/+page.svelte
View File

@@ -10,6 +10,8 @@
} from '@xyflow/svelte';
import '@xyflow/svelte/dist/style.css';
import ButtonEdge from './ButtonEdge.svelte';
import CustomBezierEdge from './CustomBezierEdge.svelte';
const nodes = writable([
{
@@ -110,13 +112,14 @@
id: 'e5-8',
source: '5',
target: '8',
data: { text: 'custom edge' }
type: 'button'
},
{
id: 'e5-9',
source: '5',
target: '9',
data: { text: 'custom edge 2' }
type: 'customBezier',
label: 'custom bezier'
},
{
id: 'e5-6',
@@ -143,9 +146,14 @@
}
}
]);
const edgeTypes = {
button: ButtonEdge,
customBezier: CustomBezierEdge
};
</script>
<SvelteFlow {nodes} {edges} fitView nodeDragThreshold={2}>
<SvelteFlow {nodes} {edges} {edgeTypes} fitView nodeDragThreshold={2}>
<Controls />
<Background variant={BackgroundVariant.Dots} />
<MiniMap />

92
examples/svelte/src/routes/examples/edges/ButtonEdge.svelte Normal file
View File

@@ -0,0 +1,92 @@
<script lang="ts">
import { getBezierPath, BaseEdge, type EdgeProps, EdgeLabelRenderer } from '@xyflow/svelte';
type $$Props = EdgeProps;
export let id: $$Props['id'] = '';
export let source: $$Props['source'] = '';
export let target: $$Props['target'] = '';
export let animated: $$Props['animated'] = undefined;
export let selected: $$Props['selected'] = undefined;
export let label: $$Props['label'] = undefined;
export let labelStyle: $$Props['labelStyle'] = undefined;
export let data: $$Props['data'] = undefined;
export let style: $$Props['style'] = undefined;
export let markerStart: $$Props['markerStart'] = undefined;
export let markerEnd: $$Props['markerEnd'] = undefined;
export let interactionWidth: $$Props['interactionWidth'] = undefined;
export let sourceX: $$Props['sourceX'];
export let sourceY: $$Props['sourceY'];
export let sourcePosition: $$Props['sourcePosition'];
export let sourceHandleId: $$Props['sourceHandleId'] = undefined;
export let targetX: $$Props['targetX'];
export let targetY: $$Props['targetY'];
export let targetPosition: $$Props['targetPosition'];
export let targetHandleId: $$Props['targetHandleId'] = undefined;
$: [edgePath, labelX, labelY] = getBezierPath({
sourceX,
sourceY,
sourcePosition,
targetX,
targetY,
targetPosition
});
source;
target;
animated;
selected;
data;
label;
labelStyle;
markerStart;
interactionWidth;
sourceHandleId;
targetHandleId;
</script>
<BaseEdge path={edgePath} {markerEnd} {style} />
<EdgeLabelRenderer>
<div
class="edgeButtonContainer nodrag nopan"
style:transform="translate(-50%, -50%) translate({labelX}px,{labelY}px)"
>
<button
class="edgeButton"
on:click={(event) => {
event.stopPropagation();
alert(`remove ${id}`);
}}
>
×
</button>
</div>
</EdgeLabelRenderer>
<style>
.edgeButtonContainer {
position: absolute;
font-size: 12pt;
/* everything inside EdgeLabelRenderer has no pointer events by default */
/* if you have an interactive element, set pointer-events: all */
pointer-events: all;
}
.edgeButton {
width: 20px;
height: 20px;
background: #eee;
border: 1px solid #fff;
cursor: pointer;
border-radius: 50%;
font-size: 12px;
line-height: 1;
}
.edgeButton:hover {
box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.08);
}
</style>

55
examples/svelte/src/routes/examples/edges/CustomBezierEdge.svelte Normal file
View File

@@ -0,0 +1,55 @@
<script lang="ts">
import { BezierEdge, type EdgeProps } from '@xyflow/svelte';
type $$Props = EdgeProps;
export let id: $$Props['id'] = '';
export let source: $$Props['source'] = '';
export let target: $$Props['target'] = '';
export let animated: $$Props['animated'] = undefined;
export let selected: $$Props['selected'] = undefined;
export let label: $$Props['label'] = undefined;
export let labelStyle: $$Props['labelStyle'] = undefined;
export let data: $$Props['data'] = undefined;
export let style: $$Props['style'] = undefined;
export let markerStart: $$Props['markerStart'] = undefined;
export let markerEnd: $$Props['markerEnd'] = undefined;
export let interactionWidth: $$Props['interactionWidth'] = undefined;
export let sourceX: $$Props['sourceX'];
export let sourceY: $$Props['sourceY'];
export let sourcePosition: $$Props['sourcePosition'];
export let sourceHandleId: $$Props['sourceHandleId'] = undefined;
export let targetX: $$Props['targetX'];
export let targetY: $$Props['targetY'];
export let targetPosition: $$Props['targetPosition'];
export let targetHandleId: $$Props['targetHandleId'] = undefined;
id;
source;
target;
animated;
selected;
data;
sourcePosition;
targetPosition;
sourceHandleId;
targetHandleId;
</script>
<BezierEdge
{sourceX}
{sourceY}
{sourcePosition}
{targetX}
{targetY}
{targetPosition}
{label}
{labelStyle}
{markerStart}
{markerEnd}
{style}
{interactionWidth}
pathOptions={{ curvature: 1 }}
/>

6
packages/react/src/components/Edges/StraightEdge.tsx
View File

@@ -1,8 +1,8 @@
import { memo } from 'react';
import { type Optional, getStraightPath } from '@xyflow/system';
import { getStraightPath } from '@xyflow/system';
import BaseEdge from './BaseEdge';
import type { EdgeProps } from '../../types';
import type { StraightEdgeProps } from '../../types';
function createStraightEdge(params: { isInternal: boolean }) {
// eslint-disable-next-line react/display-name
@@ -23,7 +23,7 @@ function createStraightEdge(params: { isInternal: boolean }) {
markerEnd,
markerStart,
interactionWidth,
}: Optional<EdgeProps, 'id' | 'source' | 'target'>) => {
}: StraightEdgeProps) => {
const [path, labelX, labelY] = getStraightPath({ sourceX, sourceY, targetX, targetY });
const _id = params.isInternal ? undefined : id;

2
packages/react/src/types/edges.ts
View File

@@ -109,7 +109,7 @@ export type BaseEdgeProps = Pick<EdgeProps, 'style' | 'markerStart' | 'markerEnd
export type EdgeComponentProps<T = any> = Optional<Omit<EdgeProps<T>, 'source' | 'target'>, 'id'>;
export type StraightEdgeProps<T = any> = EdgeComponentProps<T>;
export type StraightEdgeProps<T = any> = Omit<EdgeComponentProps<T>, 'sourcePosition' | 'targetPosition'>;
export type SmoothStepEdgeProps<T = any> = EdgeComponentProps<T> & {
pathOptions?: SmoothStepPathOptions;

48
packages/svelte/src/lib/components/edges/BezierEdge.svelte Normal file
View File

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

33
packages/svelte/src/lib/components/edges/BezierEdge/BaseBezierEdge.svelte
View File

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

10
packages/svelte/src/lib/components/edges/BezierEdge/BezierEdge.svelte
View File

@@ -1,10 +0,0 @@
<script lang="ts">
import BaseBezierEdge from './BaseBezierEdge.svelte';
import type { BezierEdgeProps } from '$lib/types';
type $$Props = BezierEdgeProps;
$: props = $$props as $$Props;
</script>
<BaseBezierEdge {...props} />

10
packages/svelte/src/lib/components/edges/BezierEdge/BezierEdgeInternal.svelte
View File

@@ -1,10 +0,0 @@
<script lang="ts">
import BaseBezierEdge from './BaseBezierEdge.svelte';
import type { EdgeProps } from '$lib/types';
type $$Props = EdgeProps;
$: props = $$props as $$Props;
</script>
<BaseBezierEdge {...props} internal />

63
packages/svelte/src/lib/components/edges/BezierEdgeInternal.svelte Normal file
View File

@@ -0,0 +1,63 @@
<script lang="ts">
import { getBezierPath } from '@xyflow/system';
import type { EdgeProps } from '$lib/types';
import { BaseEdge } from '$lib/components/BaseEdge';
type $$Props = EdgeProps;
// these props are not used in this edge, but passed to every custom edge component
export let id: $$Props['id'] = '';
export let source: $$Props['source'] = '';
export let target: $$Props['target'] = '';
export let animated: $$Props['animated'] = undefined;
export let selected: $$Props['selected'] = undefined;
export let label: $$Props['label'] = undefined;
export let labelStyle: $$Props['labelStyle'] = undefined;
export let data: $$Props['data'] = undefined;
export let style: $$Props['style'] = undefined;
export let markerStart: $$Props['markerStart'] = undefined;
export let markerEnd: $$Props['markerEnd'] = undefined;
export let interactionWidth: $$Props['interactionWidth'] = undefined;
export let sourceX: $$Props['sourceX'];
export let sourceY: $$Props['sourceY'];
export let sourcePosition: $$Props['sourcePosition'];
export let sourceHandleId: $$Props['sourceHandleId'] = undefined;
export let targetX: $$Props['targetX'];
export let targetY: $$Props['targetY'];
export let targetPosition: $$Props['targetPosition'];
export let targetHandleId: $$Props['targetHandleId'] = undefined;
$: [path, labelX, labelY] = getBezierPath({
sourceX,
sourceY,
targetX,
targetY,
sourcePosition,
targetPosition
});
// hopefully with Svelte5, we don't need this kind of workaround anymore
id;
source;
target;
animated;
selected;
data;
sourceHandleId;
targetHandleId;
</script>
<BaseEdge
{path}
{labelX}
{labelY}
{label}
{labelStyle}
{markerStart}
{markerEnd}
{interactionWidth}
{style}
/>

49
packages/svelte/src/lib/components/edges/SmoothStepEdge.svelte Normal file
View File

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

34
packages/svelte/src/lib/components/edges/SmoothStepEdge/BaseSmoothStepEdge.svelte
View File

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

10
packages/svelte/src/lib/components/edges/SmoothStepEdge/SmoothStepEdge.svelte
View File

@@ -1,10 +0,0 @@
<script lang="ts">
import BaseSmoothStepEdge from './BaseSmoothStepEdge.svelte';
import type { SmoothStepEdgeProps } from '$lib/types';
type $$Props = SmoothStepEdgeProps;
$: props = $$props as $$Props;
</script>
<BaseSmoothStepEdge {...props} />

10
packages/svelte/src/lib/components/edges/SmoothStepEdge/SmoothStepEdgeInternal.svelte
View File

@@ -1,10 +0,0 @@
<script lang="ts">
import BaseSmoothStepEdge from './BaseSmoothStepEdge.svelte';
import type { EdgeProps } from '$lib/types';
type $$Props = EdgeProps;
$: props = $$props as $$Props;
</script>
<BaseSmoothStepEdge {...props} internal />

63
packages/svelte/src/lib/components/edges/SmoothStepEdgeInternal.svelte Normal file
View File

@@ -0,0 +1,63 @@
<script lang="ts">
import { getSmoothStepPath } from '@xyflow/system';
import type { EdgeProps } from '$lib/types';
import { BaseEdge } from '$lib/components/BaseEdge';
type $$Props = EdgeProps;
// these props are not used in this edge, but passed to every custom edge component
export let id: $$Props['id'] = '';
export let source: $$Props['source'] = '';
export let target: $$Props['target'] = '';
export let animated: $$Props['animated'] = undefined;
export let selected: $$Props['selected'] = undefined;
export let label: $$Props['label'] = undefined;
export let labelStyle: $$Props['labelStyle'] = undefined;
export let data: $$Props['data'] = undefined;
export let style: $$Props['style'] = undefined;
export let markerStart: $$Props['markerStart'] = undefined;
export let markerEnd: $$Props['markerEnd'] = undefined;
export let interactionWidth: $$Props['interactionWidth'] = undefined;
export let sourceX: $$Props['sourceX'];
export let sourceY: $$Props['sourceY'];
export let sourcePosition: $$Props['sourcePosition'];
export let sourceHandleId: $$Props['sourceHandleId'] = undefined;
export let targetX: $$Props['targetX'];
export let targetY: $$Props['targetY'];
export let targetPosition: $$Props['targetPosition'];
export let targetHandleId: $$Props['targetHandleId'] = undefined;
$: [path, labelX, labelY] = getSmoothStepPath({
sourceX,
sourceY,
targetX,
targetY,
sourcePosition,
targetPosition
});
id;
source;
target;
animated;
selected;
data;
sourceHandleId;
targetHandleId;
</script>
<BaseEdge
{path}
{labelX}
{labelY}
{label}
{labelStyle}
{markerStart}
{markerEnd}
{interactionWidth}
{style}
/>

49
packages/svelte/src/lib/components/edges/StepEdge.svelte Normal file
View File

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

34
packages/svelte/src/lib/components/edges/StepEdge/BaseStepEdge.svelte
View File

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

10
packages/svelte/src/lib/components/edges/StepEdge/StepEdge.svelte
View File

@@ -1,10 +0,0 @@
<script lang="ts">
import BaseStepEdge from './BaseStepEdge.svelte';
import type { StepEdgeProps } from '$lib/types';
type $$Props = StepEdgeProps;
$: props = $$props as $$Props;
</script>
<BaseStepEdge {...props} />

10
packages/svelte/src/lib/components/edges/StepEdge/StepEdgeInternal.svelte
View File

@@ -1,10 +0,0 @@
<script lang="ts">
import BaseStepEdge from './BaseStepEdge.svelte';
import type { EdgeProps } from '$lib/types';
type $$Props = EdgeProps;
$: props = $$props as $$Props;
</script>
<BaseStepEdge {...props} internal />

64
packages/svelte/src/lib/components/edges/StepEdgeInternal.svelte Normal file
View File

@@ -0,0 +1,64 @@
<script lang="ts">
import { getSmoothStepPath } from '@xyflow/system';
import type { EdgeProps } from '$lib/types';
import { BaseEdge } from '$lib/components/BaseEdge';
type $$Props = EdgeProps;
// these props are not used in this edge, but passed to every custom edge component
export let id: $$Props['id'] = '';
export let source: $$Props['source'] = '';
export let target: $$Props['target'] = '';
export let animated: $$Props['animated'] = undefined;
export let selected: $$Props['selected'] = undefined;
export let label: $$Props['label'] = undefined;
export let data: $$Props['data'] = undefined;
export let labelStyle: $$Props['labelStyle'] = undefined;
export let style: $$Props['style'] = undefined;
export let markerStart: $$Props['markerStart'] = undefined;
export let markerEnd: $$Props['markerEnd'] = undefined;
export let interactionWidth: $$Props['interactionWidth'] = undefined;
export let sourceX: $$Props['sourceX'];
export let sourceY: $$Props['sourceY'];
export let sourcePosition: $$Props['sourcePosition'];
export let sourceHandleId: $$Props['sourceHandleId'] = undefined;
export let targetX: $$Props['targetX'];
export let targetY: $$Props['targetY'];
export let targetPosition: $$Props['targetPosition'];
export let targetHandleId: $$Props['targetHandleId'] = undefined;
$: [path, labelX, labelY] = getSmoothStepPath({
sourceX,
sourceY,
targetX,
targetY,
sourcePosition,
targetPosition,
borderRadius: 0
});
id;
source;
target;
animated;
selected;
data;
sourceHandleId;
targetHandleId;
</script>
<BaseEdge
{path}
{labelX}
{labelY}
{label}
{labelStyle}
{markerStart}
{markerEnd}
{interactionWidth}
{style}
/>

42
packages/svelte/src/lib/components/edges/StraightEdge.svelte Normal file
View File

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

30
packages/svelte/src/lib/components/edges/StraightEdge/BaseStraightEdge.svelte
View File

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

10
packages/svelte/src/lib/components/edges/StraightEdge/StraightEdge.svelte
View File

@@ -1,10 +0,0 @@
<script lang="ts">
import BaseStraighEdge from './BaseStraightEdge.svelte';
import type { StraightEdgeProps } from '$lib/types';
type $$Props = StraightEdgeProps;
$: props = $$props as $$Props;
</script>
<BaseStraighEdge {...props} />

10
packages/svelte/src/lib/components/edges/StraightEdge/StraightEdgeInternal.svelte
View File

@@ -1,10 +0,0 @@
<script lang="ts">
import BaseStraighEdge from './BaseStraightEdge.svelte';
import type { EdgeProps } from '$lib/types';
type $$Props = EdgeProps;
$: props = $$props as $$Props;
</script>
<BaseStraighEdge {...props} internal />

63
packages/svelte/src/lib/components/edges/StraightEdgeInternal.svelte Normal file
View File

@@ -0,0 +1,63 @@
<script lang="ts">
import { getStraightPath } from '@xyflow/system';
import type { EdgeProps } from '$lib/types';
import { BaseEdge } from '$lib/components/BaseEdge';
type $$Props = EdgeProps;
// these props are not used in this edge, but passed to every custom edge component
export let id: $$Props['id'] = '';
export let source: $$Props['source'] = '';
export let target: $$Props['target'] = '';
export let animated: $$Props['animated'] = undefined;
export let selected: $$Props['selected'] = undefined;
export let label: $$Props['label'] = undefined;
export let labelStyle: $$Props['labelStyle'] = undefined;
export let data: $$Props['data'] = undefined;
export let style: $$Props['style'] = undefined;
export let markerStart: $$Props['markerStart'] = undefined;
export let markerEnd: $$Props['markerEnd'] = undefined;
export let interactionWidth: $$Props['interactionWidth'] = undefined;
export let sourceX: $$Props['sourceX'];
export let sourceY: $$Props['sourceY'];
export let sourcePosition: $$Props['sourcePosition'];
export let sourceHandleId: $$Props['sourceHandleId'] = undefined;
export let targetX: $$Props['targetX'];
export let targetY: $$Props['targetY'];
export let targetPosition: $$Props['targetPosition'];
export let targetHandleId: $$Props['targetHandleId'] = undefined;
$: [path, labelX, labelY] = getStraightPath({
sourceX,
sourceY,
targetX,
targetY
});
id;
source;
target;
animated;
selected;
data;
sourcePosition;
targetPosition;
sourceHandleId;
targetHandleId;
</script>
<BaseEdge
{path}
{labelX}
{labelY}
{label}
{labelStyle}
{markerStart}
{markerEnd}
{interactionWidth}
{style}
/>

18
packages/svelte/src/lib/components/edges/index.ts
View File

@@ -2,14 +2,16 @@
// The internal edges are used directly like custom edges and always get an id, source and target props
// If you import an edge from the library, the id is optional and source and target are not used at all
export { default as BezierEdge } from './BezierEdge/BezierEdge.svelte';
export { default as BezierEdgeInternal } from './BezierEdge/BezierEdgeInternal.svelte';
// @todo: how can we prevent this duplication in ...Edge/ ...EdgeInternal?
// both are quite similar, it's just about 1-2 props that are different
export { default as BezierEdge } from './BezierEdge.svelte';
export { default as BezierEdgeInternal } from './BezierEdgeInternal.svelte';
export { default as SmoothStepEdge } from './SmoothStepEdge/BaseSmoothStepEdge.svelte';
export { default as SmoothStepEdgeInternal } from './SmoothStepEdge/SmoothStepEdgeInternal.svelte';
export { default as SmoothStepEdge } from './SmoothStepEdge.svelte';
export { default as SmoothStepEdgeInternal } from './SmoothStepEdgeInternal.svelte';
export { default as StraightEdge } from './StraightEdge/StraightEdge.svelte';
export { default as StraightEdgeInternal } from './StraightEdge/StraightEdgeInternal.svelte';
export { default as StraightEdge } from './StraightEdge.svelte';
export { default as StraightEdgeInternal } from './StraightEdgeInternal.svelte';
export { default as StepEdge } from './StepEdge/StepEdge.svelte';
export { default as StepEdgeInternal } from './StepEdge/StepEdgeInternal.svelte';
export { default as StepEdge } from './StepEdge.svelte';
export { default as StepEdgeInternal } from './StepEdgeInternal.svelte';

13
packages/svelte/src/lib/index.ts
View File

@@ -7,7 +7,7 @@ export * from '$lib/container/Panel';
export * from '$lib/components/SvelteFlowProvider';
export * from '$lib/components/EdgeLabelRenderer';
export * from '$lib/components/BaseEdge';
export * from '$lib/components/edges';
export { BezierEdge, StepEdge, SmoothStepEdge, StraightEdge } from '$lib/components/edges';
export * from '$lib/components/Handle';
// plugins
@@ -29,7 +29,16 @@ export * from '$lib/hooks/useConnection';
export * from '$lib/hooks/useNodesEdges';
// types
export type { Edge, EdgeProps, EdgeTypes, DefaultEdgeOptions } from '$lib/types/edges';
export type {
Edge,
EdgeProps,
BezierEdgeProps,
SmoothStepEdgeProps,
StepEdgeProps,
StraightEdgeProps,
EdgeTypes,
DefaultEdgeOptions
} from '$lib/types/edges';
export type { HandleComponentProps, FitViewOptions } from '$lib/types/general';
export type { Node, NodeTypes, DefaultNodeOptions } from '$lib/types/nodes';
export type { SvelteFlowStore } from '$lib/store/types';

15
packages/svelte/src/lib/types/edges.ts
View File

@@ -40,7 +40,7 @@ export type Edge<T = any> =
| BezierEdgeType<T>
| StepEdgeType<T>;
export type EdgeProps<T = any> = Omit<Edge<T>, 'sourceHandle' | 'targetHandle'> &
export type EdgeProps<T = any> = Omit<Edge<T>, 'sourceHandle' | 'targetHandle' | 'type'> &
EdgePosition & {
markerStart?: string;
markerEnd?: string;
@@ -48,7 +48,13 @@ export type EdgeProps<T = any> = Omit<Edge<T>, 'sourceHandle' | 'targetHandle'>
targetHandleId?: string | null;
};
export type EdgeComponentProps<T = any> = Optional<Omit<EdgeProps<T>, 'source' | 'target'>, 'id'>;
export type EdgeComponentProps<T = any> = Optional<
Omit<
EdgeProps<T>,
'source' | 'target' | 'sourceHandleId' | 'targetHandleId' | 'animated' | 'selected' | 'data'
>,
'id'
>;
export type BezierEdgeProps<T = any> = EdgeComponentProps<T> & {
pathOptions?: BezierPathOptions;
@@ -62,7 +68,10 @@ export type StepEdgeProps<T = any> = EdgeComponentProps<T> & {
pathOptions?: StepPathOptions;
};
export type StraightEdgeProps<T = any> = EdgeComponentProps<T>;
export type StraightEdgeProps<T = any> = Omit<
EdgeComponentProps<T>,
'sourcePosition' | 'targetPosition'
>;
export type EdgeTypes = Record<string, ComponentType<SvelteComponent<EdgeProps>>>;

3
packages/svelte/tsconfig.json
View File

@@ -8,7 +8,8 @@
"resolveJsonModule": true,
"skipLibCheck": true,
"sourceMap": true,
"strict": true
"strict": true,
"noErrorTruncation": true
}
// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias

3
tooling/tsconfig/react.json
View File

@@ -6,6 +6,7 @@
"lib": ["dom", "esnext"],
"module": "esnext",
"target": "esnext",
"outDir": "dist"
"outDir": "dist",
"noErrorTruncation": true
}
}