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
packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte
+2 -2
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;
packages/svelte/src/lib/components/edges/BezierEdge.svelte
-30
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}
/>
packages/svelte/src/lib/components/edges/BezierEdgeInternal.svelte → packages/svelte/src/lib/components/edges/BezierEdge/BaseBezierEdge.svelte
+7 -3
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}
packages/svelte/src/lib/components/edges/BezierEdge/BezierEdge.svelte
+10
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} />
packages/svelte/src/lib/components/edges/BezierEdge/BezierEdgeInternal.svelte
+10
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 />
packages/svelte/src/lib/components/edges/SmoothStepEdge.svelte
-30
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}
/>
packages/svelte/src/lib/components/edges/SmoothStepEdgeInternal.svelte → packages/svelte/src/lib/components/edges/SmoothStepEdge/BaseSmoothStepEdge.svelte
+8 -3
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}
packages/svelte/src/lib/components/edges/SmoothStepEdge/SmoothStepEdge.svelte
+10
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} />
packages/svelte/src/lib/components/edges/SmoothStepEdge/SmoothStepEdgeInternal.svelte
+10
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 />
packages/svelte/src/lib/components/edges/StepEdge.svelte
-31
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}
/>
packages/svelte/src/lib/components/edges/StepEdgeInternal.svelte → packages/svelte/src/lib/components/edges/StepEdge/BaseStepEdge.svelte
+7 -3
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}
packages/svelte/src/lib/components/edges/StepEdge/StepEdge.svelte
+10
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} />
packages/svelte/src/lib/components/edges/StepEdge/StepEdgeInternal.svelte
+10
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 />
packages/svelte/src/lib/components/edges/StraightEdge.svelte
-28
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}
/>
packages/svelte/src/lib/components/edges/StraightEdgeInternal.svelte → packages/svelte/src/lib/components/edges/StraightEdge/BaseStraightEdge.svelte
+5 -2
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}
packages/svelte/src/lib/components/edges/StraightEdge/StraightEdge.svelte
+10
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} />
packages/svelte/src/lib/components/edges/StraightEdge/StraightEdgeInternal.svelte
+10
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 />
packages/svelte/src/lib/components/edges/index.ts
+15 -4
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';
packages/svelte/src/lib/components/edges/internal.ts
-4
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';