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

refactor(svelte/edges): simplify

Browse Source
This commit is contained in:
moklick
2023-11-30 10:41:18 +01:00
parent 8f43160236
commit 6825b486ec
25 changed files with 176 additions and 150 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/react/src/components/Edges/StepEdge.tsx
View File

@@ -1,11 +1,11 @@
import { memo, useMemo } from 'react';
import { SmoothStepEdge } from './SmoothStepEdge';
import type { SmoothStepEdgeProps } from '../../types';
import type { StepEdgeProps } from '../../types';
function createStepEdge(params: { isInternal: boolean }) {
// eslint-disable-next-line react/display-name
return memo(({ id, ...props }: SmoothStepEdgeProps) => {
return memo(({ id, ...props }: StepEdgeProps) => {
const _id = params.isInternal ? undefined : id;
return (

4
packages/react/src/components/Edges/index.ts
View File

@@ -1,3 +1,7 @@
// We distinguish between internal and exported edges
// 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 { SimpleBezierEdge, SimpleBezierEdgeInternal } from './SimpleBezierEdge';
export { SmoothStepEdge, SmoothStepEdgeInternal } from './SmoothStepEdge';
export { StepEdge, StepEdgeInternal } from './StepEdge';

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

@@ -14,6 +14,7 @@ import type {
ConnectionStatus,
EdgePosition,
Optional,
StepPathOptions,
} from '@xyflow/system';
import { Node } from '.';
@@ -47,7 +48,12 @@ type BezierEdgeType<T> = DefaultEdge<T> & {
pathOptions?: BezierPathOptions;
};
export type Edge<T = any> = DefaultEdge<T> | SmoothStepEdgeType<T> | BezierEdgeType<T>;
type StepEdgeType<T> = DefaultEdge<T> & {
type: 'step';
pathOptions?: StepPathOptions;
};
export type Edge<T = any> = DefaultEdge<T> | SmoothStepEdgeType<T> | BezierEdgeType<T> | StepEdgeType<T>;
export type EdgeMouseHandler = (event: ReactMouseEvent, edge: Edge) => void;
@@ -113,6 +119,10 @@ export type BezierEdgeProps<T = any> = EdgeComponentProps<T> & {
pathOptions?: BezierPathOptions;
};
export type StepEdgeProps<T = any> = EdgeComponentProps<T> & {
pathOptions?: StepPathOptions;
};
export type SimpleBezierEdgeProps<T = any> = EdgeComponentProps<T>;
export type OnEdgeUpdateFunc<T = any> = (oldEdge: Edge<T>, newConnection: Connection) => void;

4
packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte
View File

@@ -6,7 +6,7 @@
import { errorMessages, getMarkerId } from '@xyflow/system';
import { useStore } from '$lib/store';
import { BezierEdge } from '$lib/components/edges/internal';
import { BezierEdgeInternal } from '$lib/components/edges';
import type { EdgeLayouted, Edge } from '$lib/types';
import { get } from 'svelte/store';
@@ -57,7 +57,7 @@
edgecontextmenu: { edge: Edge; event: MouseEvent };
}>();
$: edgeComponent = $edgeTypes[type!] || BezierEdge;
$: edgeComponent = $edgeTypes[type!] || BezierEdgeInternal;
$: markerStartUrl = markerStart ? `url(#${getMarkerId(markerStart, $flowId)})` : undefined;
$: markerEndUrl = markerEnd ? `url(#${getMarkerId(markerEnd, $flowId)})` : undefined;

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

@@ -1,30 +0,0 @@
<script lang="ts">
import { getBezierPath, type Optional } from '@xyflow/system';
import type { EdgeProps } from '$lib/types';
import { BaseEdge } from '$lib/components/BaseEdge';
type $$Props = Optional<EdgeProps, 'id' | 'target' | 'source'>;
$: [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}
id={$$props.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/BezierEdgeInternal.svelte → packages/svelte/src/lib/components/edges/BezierEdge/BaseBezierEdge.svelte
View File

@@ -1,10 +1,10 @@
<script lang="ts">
import { getBezierPath } from '@xyflow/system';
import type { EdgeProps } from '$lib/types';
import type { BezierEdgeProps } from '$lib/types';
import { BaseEdge } from '$lib/components/BaseEdge';
type $$Props = EdgeProps;
type $$Props = BezierEdgeProps & { internal?: boolean };
$: [path, labelX, labelY] = getBezierPath({
sourceX: $$props.sourceX,
@@ -12,14 +12,18 @@
targetX: $$props.targetX,
targetY: $$props.targetY,
sourcePosition: $$props.sourcePosition,
targetPosition: $$props.targetPosition
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}

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

@@ -0,0 +1,10 @@
<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 Normal file
View File

@@ -0,0 +1,10 @@
<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 />

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

@@ -1,30 +0,0 @@
<script lang="ts">
import { getSmoothStepPath, type Optional } from '@xyflow/system';
import type { EdgeProps } from '$lib/types';
import { BaseEdge } from '$lib/components/BaseEdge';
type $$Props = Optional<EdgeProps, 'id' | 'target' | 'source'>;
$: [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}
id={$$props.id}
label={$$props.label}
labelStyle={$$props.labelStyle}
markerStart={$$props.markerStart}
markerEnd={$$props.markerEnd}
interactionWidth={$$props.interactionWidth}
style={$$props.style}
/>

11
packages/svelte/src/lib/components/edges/SmoothStepEdgeInternal.svelte → packages/svelte/src/lib/components/edges/SmoothStepEdge/BaseSmoothStepEdge.svelte
View File

@@ -1,10 +1,10 @@
<script lang="ts">
import { getSmoothStepPath } from '@xyflow/system';
import type { EdgeProps } from '$lib/types';
import type { SmoothStepEdgeProps } from '$lib/types';
import { BaseEdge } from '$lib/components/BaseEdge';
type $$Props = EdgeProps;
type $$Props = SmoothStepEdgeProps & { internal?: boolean };
$: [path, labelX, labelY] = getSmoothStepPath({
sourceX: $$props.sourceX,
@@ -12,14 +12,19 @@
targetX: $$props.targetX,
targetY: $$props.targetY,
sourcePosition: $$props.sourcePosition,
targetPosition: $$props.targetPosition
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}

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

@@ -0,0 +1,10 @@
<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 Normal file
View File

@@ -0,0 +1,10 @@
<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 />

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

@@ -1,31 +0,0 @@
<script lang="ts">
import { getSmoothStepPath, type Optional } from '@xyflow/system';
import type { EdgeProps } from '$lib/types';
import { BaseEdge } from '$lib/components/BaseEdge';
type $$Props = Optional<EdgeProps, 'id' | 'target' | 'source'>;
$: [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}
id={$$props.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/StepEdgeInternal.svelte → packages/svelte/src/lib/components/edges/StepEdge/BaseStepEdge.svelte
View File

@@ -1,10 +1,10 @@
<script lang="ts">
import { getSmoothStepPath } from '@xyflow/system';
import type { EdgeProps } from '$lib/types';
import type { StepEdgeProps } from '$lib/types';
import { BaseEdge } from '$lib/components/BaseEdge';
type $$Props = EdgeProps;
type $$Props = StepEdgeProps & { internal?: boolean };
$: [path, labelX, labelY] = getSmoothStepPath({
sourceX: $$props.sourceX,
@@ -13,14 +13,18 @@
targetY: $$props.targetY,
sourcePosition: $$props.sourcePosition,
targetPosition: $$props.targetPosition,
borderRadius: 0
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}

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

@@ -0,0 +1,10 @@
<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 Normal file
View File

@@ -0,0 +1,10 @@
<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 />

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

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

7
packages/svelte/src/lib/components/edges/StraightEdgeInternal.svelte → packages/svelte/src/lib/components/edges/StraightEdge/BaseStraightEdge.svelte
View File

@@ -1,10 +1,10 @@
<script lang="ts">
import { getStraightPath } from '@xyflow/system';
import type { EdgeProps } from '$lib/types';
import type { SmoothStepEdgeProps } from '$lib/types';
import { BaseEdge } from '$lib/components/BaseEdge';
type $$Props = EdgeProps;
type $$Props = SmoothStepEdgeProps & { internal?: boolean };
$: [path, labelX, labelY] = getStraightPath({
sourceX: $$props.sourceX,
@@ -12,12 +12,15 @@
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}

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

@@ -0,0 +1,10 @@
<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 Normal file
View File

@@ -0,0 +1,10 @@
<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 />

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

@@ -1,4 +1,15 @@
export { default as BezierEdge } from './BezierEdge.svelte';
export { default as StraightEdge } from './StraightEdge.svelte';
export { default as SmoothStepEdge } from './SmoothStepEdge.svelte';
export { default as StepEdge } from './StepEdge.svelte';
// We distinguish between internal and exported edges
// 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';
export { default as SmoothStepEdge } from './SmoothStepEdge/BaseSmoothStepEdge.svelte';
export { default as SmoothStepEdgeInternal } from './SmoothStepEdge/SmoothStepEdgeInternal.svelte';
export { default as StraightEdge } from './StraightEdge/StraightEdge.svelte';
export { default as StraightEdgeInternal } from './StraightEdge/StraightEdgeInternal.svelte';
export { default as StepEdge } from './StepEdge/StepEdge.svelte';
export { default as StepEdgeInternal } from './StepEdge/StepEdgeInternal.svelte';

4
packages/svelte/src/lib/components/edges/internal.ts
View File

@@ -1,4 +0,0 @@
export { default as BezierEdge } from './BezierEdgeInternal.svelte';
export { default as StraightEdge } from './StraightEdgeInternal.svelte';
export { default as SmoothStepEdge } from './SmoothStepEdgeInternal.svelte';
export { default as StepEdge } from './StepEdgeInternal.svelte';

15
packages/svelte/src/lib/store/initial-store.ts
View File

@@ -25,7 +25,12 @@ 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, StraightEdge, StepEdge, SmoothStepEdge } from '$lib/components/edges/internal';
import {
BezierEdgeInternal,
SmoothStepEdgeInternal,
StraightEdgeInternal,
StepEdgeInternal
} from '$lib/components/edges';
import type {
NodeTypes,
@@ -47,10 +52,10 @@ export const initialNodeTypes = {
};
export const initialEdgeTypes = {
straight: StraightEdge,
smoothstep: SmoothStepEdge,
default: BezierEdge,
step: StepEdge
straight: StraightEdgeInternal,
smoothstep: SmoothStepEdgeInternal,
default: BezierEdgeInternal,
step: StepEdgeInternal
};
export const getInitialStore = ({

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

@@ -5,7 +5,9 @@ import type {
BezierPathOptions,
DefaultEdgeOptionsBase,
EdgePosition,
SmoothStepPathOptions
SmoothStepPathOptions,
Optional,
StepPathOptions
} from '@xyflow/system';
import type { Node } from '$lib/types';
@@ -29,6 +31,7 @@ type BezierEdgeType<T> = DefaultEdge<T> & {
type StepEdgeType<T> = DefaultEdge<T> & {
type: 'step';
pathOptions?: StepPathOptions;
};
export type Edge<T = any> =
@@ -37,7 +40,7 @@ export type Edge<T = any> =
| BezierEdgeType<T>
| StepEdgeType<T>;
export type EdgeProps = Omit<Edge, 'sourceHandle' | 'targetHandle'> &
export type EdgeProps<T = any> = Omit<Edge<T>, 'sourceHandle' | 'targetHandle'> &
EdgePosition & {
markerStart?: string;
markerEnd?: string;
@@ -45,6 +48,22 @@ export type EdgeProps = Omit<Edge, 'sourceHandle' | 'targetHandle'> &
targetHandleId?: string | null;
};
export type EdgeComponentProps<T = any> = Optional<Omit<EdgeProps<T>, 'source' | 'target'>, 'id'>;
export type BezierEdgeProps<T = any> = EdgeComponentProps<T> & {
pathOptions?: BezierPathOptions;
};
export type SmoothStepEdgeProps<T = any> = EdgeComponentProps<T> & {
pathOptions?: SmoothStepPathOptions;
};
export type StepEdgeProps<T = any> = EdgeComponentProps<T> & {
pathOptions?: StepPathOptions;
};
export type StraightEdgeProps<T = any> = EdgeComponentProps<T>;
export type EdgeTypes = Record<string, ComponentType<SvelteComponent<EdgeProps>>>;
export type DefaultEdgeOptions = Omit<DefaultEdgeOptionsBase<Edge>, 'focusable'>;

4
packages/system/src/types/edges.ts
View File

@@ -27,6 +27,10 @@ export type SmoothStepPathOptions = {
borderRadius?: number;
};
export type StepPathOptions = {
offset?: number;
};
export type BezierPathOptions = {
curvature?: number;
};