From 9f538c6b7ceb8c1b5cca9c413f24ea19de86aad8 Mon Sep 17 00:00:00 2001 From: Peter Date: Tue, 28 Nov 2023 12:33:54 +0100 Subject: [PATCH 1/8] fix(svelte) split edges into internal/external. external edges dont require id, source, target anymore --- .../components/EdgeWrapper/EdgeWrapper.svelte | 2 +- .../lib/components/edges/BezierEdge.svelte | 2 +- .../edges/InternalBezierEdge.svelte | 29 ++++++++++++++++++ .../edges/InternalSmoothStepEdge.svelte | 29 ++++++++++++++++++ .../components/edges/InternalStepEdge.svelte | 30 +++++++++++++++++++ .../edges/InternalStraightEdge.svelte | 27 +++++++++++++++++ .../components/edges/SmoothStepEdge.svelte | 2 +- .../src/lib/components/edges/StepEdge.svelte | 2 +- .../lib/components/edges/StraightEdge.svelte | 2 +- .../svelte/src/lib/store/initial-store.ts | 8 ++--- 10 files changed, 124 insertions(+), 9 deletions(-) create mode 100644 packages/svelte/src/lib/components/edges/InternalBezierEdge.svelte create mode 100644 packages/svelte/src/lib/components/edges/InternalSmoothStepEdge.svelte create mode 100644 packages/svelte/src/lib/components/edges/InternalStepEdge.svelte create mode 100644 packages/svelte/src/lib/components/edges/InternalStraightEdge.svelte diff --git a/packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte b/packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte index 7a8df68c..7f5b9bbd 100644 --- a/packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte +++ b/packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte @@ -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'; diff --git a/packages/svelte/src/lib/components/edges/BezierEdge.svelte b/packages/svelte/src/lib/components/edges/BezierEdge.svelte index 60921eb6..56ccaf31 100644 --- a/packages/svelte/src/lib/components/edges/BezierEdge.svelte +++ b/packages/svelte/src/lib/components/edges/BezierEdge.svelte @@ -4,7 +4,7 @@ import type { EdgeProps } from '$lib/types'; import { BaseEdge } from '$lib/components/BaseEdge'; - type $$Props = EdgeProps; + type $$Props = Partial; $: [path, labelX, labelY] = getBezierPath({ sourceX: $$props.sourceX, diff --git a/packages/svelte/src/lib/components/edges/InternalBezierEdge.svelte b/packages/svelte/src/lib/components/edges/InternalBezierEdge.svelte new file mode 100644 index 00000000..a1ca0658 --- /dev/null +++ b/packages/svelte/src/lib/components/edges/InternalBezierEdge.svelte @@ -0,0 +1,29 @@ + + + diff --git a/packages/svelte/src/lib/components/edges/InternalSmoothStepEdge.svelte b/packages/svelte/src/lib/components/edges/InternalSmoothStepEdge.svelte new file mode 100644 index 00000000..73324a89 --- /dev/null +++ b/packages/svelte/src/lib/components/edges/InternalSmoothStepEdge.svelte @@ -0,0 +1,29 @@ + + + diff --git a/packages/svelte/src/lib/components/edges/InternalStepEdge.svelte b/packages/svelte/src/lib/components/edges/InternalStepEdge.svelte new file mode 100644 index 00000000..f793376b --- /dev/null +++ b/packages/svelte/src/lib/components/edges/InternalStepEdge.svelte @@ -0,0 +1,30 @@ + + + diff --git a/packages/svelte/src/lib/components/edges/InternalStraightEdge.svelte b/packages/svelte/src/lib/components/edges/InternalStraightEdge.svelte new file mode 100644 index 00000000..8cc984d7 --- /dev/null +++ b/packages/svelte/src/lib/components/edges/InternalStraightEdge.svelte @@ -0,0 +1,27 @@ + + + diff --git a/packages/svelte/src/lib/components/edges/SmoothStepEdge.svelte b/packages/svelte/src/lib/components/edges/SmoothStepEdge.svelte index 30872b68..39acb6e6 100644 --- a/packages/svelte/src/lib/components/edges/SmoothStepEdge.svelte +++ b/packages/svelte/src/lib/components/edges/SmoothStepEdge.svelte @@ -4,7 +4,7 @@ import type { EdgeProps } from '$lib/types'; import { BaseEdge } from '$lib/components/BaseEdge'; - type $$Props = EdgeProps; + type $$Props = Partial; $: [path, labelX, labelY] = getSmoothStepPath({ sourceX: $$props.sourceX, diff --git a/packages/svelte/src/lib/components/edges/StepEdge.svelte b/packages/svelte/src/lib/components/edges/StepEdge.svelte index 65012595..ac6118ca 100644 --- a/packages/svelte/src/lib/components/edges/StepEdge.svelte +++ b/packages/svelte/src/lib/components/edges/StepEdge.svelte @@ -4,7 +4,7 @@ import type { EdgeProps } from '$lib/types'; import { BaseEdge } from '$lib/components/BaseEdge'; - type $$Props = EdgeProps; + type $$Props = Partial; $: [path, labelX, labelY] = getSmoothStepPath({ sourceX: $$props.sourceX, diff --git a/packages/svelte/src/lib/components/edges/StraightEdge.svelte b/packages/svelte/src/lib/components/edges/StraightEdge.svelte index 50f282ff..9e6c88da 100644 --- a/packages/svelte/src/lib/components/edges/StraightEdge.svelte +++ b/packages/svelte/src/lib/components/edges/StraightEdge.svelte @@ -4,7 +4,7 @@ import type { EdgeProps } from '$lib/types'; import { BaseEdge } from '$lib/components/BaseEdge'; - type $$Props = EdgeProps; + type $$Props = Partial; $: [path, labelX, labelY] = getStraightPath({ sourceX: $$props.sourceX, diff --git a/packages/svelte/src/lib/store/initial-store.ts b/packages/svelte/src/lib/store/initial-store.ts index dbbb17fc..bf0166ab 100644 --- a/packages/svelte/src/lib/store/initial-store.ts +++ b/packages/svelte/src/lib/store/initial-store.ts @@ -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, From 0393409e898d4c462110c35190a192bb17ed1696 Mon Sep 17 00:00:00 2001 From: Peter Date: Tue, 28 Nov 2023 13:03:50 +0100 Subject: [PATCH 2/8] fix(system) exportet Optional type, fix(svelte) adjusted exported edge types --- .../svelte/src/routes/examples/customnode/CustomNode.svelte | 2 +- packages/svelte/src/lib/components/edges/BezierEdge.svelte | 4 ++-- .../svelte/src/lib/components/edges/SmoothStepEdge.svelte | 4 ++-- packages/svelte/src/lib/components/edges/StepEdge.svelte | 4 ++-- packages/svelte/src/lib/components/edges/StraightEdge.svelte | 3 ++- packages/system/src/types/utils.ts | 2 ++ packages/system/src/utils/index.ts | 1 + 7 files changed, 12 insertions(+), 8 deletions(-) diff --git a/examples/svelte/src/routes/examples/customnode/CustomNode.svelte b/examples/svelte/src/routes/examples/customnode/CustomNode.svelte index 25d37d32..51ba33ea 100644 --- a/examples/svelte/src/routes/examples/customnode/CustomNode.svelte +++ b/examples/svelte/src/routes/examples/customnode/CustomNode.svelte @@ -1,6 +1,6 @@ - - diff --git a/packages/svelte/src/lib/components/edges/BezierEdgeInternal.svelte b/packages/svelte/src/lib/components/edges/BezierEdge/BaseBezierEdge.svelte similarity index 69% rename from packages/svelte/src/lib/components/edges/BezierEdgeInternal.svelte rename to packages/svelte/src/lib/components/edges/BezierEdge/BaseBezierEdge.svelte index a1ca0658..749a5096 100644 --- a/packages/svelte/src/lib/components/edges/BezierEdgeInternal.svelte +++ b/packages/svelte/src/lib/components/edges/BezierEdge/BaseBezierEdge.svelte @@ -1,10 +1,10 @@ + import BaseBezierEdge from './BaseBezierEdge.svelte'; + import type { BezierEdgeProps } from '$lib/types'; + + type $$Props = BezierEdgeProps; + + $: props = $$props as $$Props; + + + diff --git a/packages/svelte/src/lib/components/edges/BezierEdge/BezierEdgeInternal.svelte b/packages/svelte/src/lib/components/edges/BezierEdge/BezierEdgeInternal.svelte new file mode 100644 index 00000000..75d168f4 --- /dev/null +++ b/packages/svelte/src/lib/components/edges/BezierEdge/BezierEdgeInternal.svelte @@ -0,0 +1,10 @@ + + + diff --git a/packages/svelte/src/lib/components/edges/SmoothStepEdge.svelte b/packages/svelte/src/lib/components/edges/SmoothStepEdge.svelte deleted file mode 100644 index f528da0e..00000000 --- a/packages/svelte/src/lib/components/edges/SmoothStepEdge.svelte +++ /dev/null @@ -1,30 +0,0 @@ - - - diff --git a/packages/svelte/src/lib/components/edges/SmoothStepEdgeInternal.svelte b/packages/svelte/src/lib/components/edges/SmoothStepEdge/BaseSmoothStepEdge.svelte similarity index 65% rename from packages/svelte/src/lib/components/edges/SmoothStepEdgeInternal.svelte rename to packages/svelte/src/lib/components/edges/SmoothStepEdge/BaseSmoothStepEdge.svelte index 73324a89..5ec4dd89 100644 --- a/packages/svelte/src/lib/components/edges/SmoothStepEdgeInternal.svelte +++ b/packages/svelte/src/lib/components/edges/SmoothStepEdge/BaseSmoothStepEdge.svelte @@ -1,10 +1,10 @@ + import BaseSmoothStepEdge from './BaseSmoothStepEdge.svelte'; + import type { SmoothStepEdgeProps } from '$lib/types'; + + type $$Props = SmoothStepEdgeProps; + + $: props = $$props as $$Props; + + + diff --git a/packages/svelte/src/lib/components/edges/SmoothStepEdge/SmoothStepEdgeInternal.svelte b/packages/svelte/src/lib/components/edges/SmoothStepEdge/SmoothStepEdgeInternal.svelte new file mode 100644 index 00000000..803247c2 --- /dev/null +++ b/packages/svelte/src/lib/components/edges/SmoothStepEdge/SmoothStepEdgeInternal.svelte @@ -0,0 +1,10 @@ + + + diff --git a/packages/svelte/src/lib/components/edges/StepEdge.svelte b/packages/svelte/src/lib/components/edges/StepEdge.svelte deleted file mode 100644 index b0860d03..00000000 --- a/packages/svelte/src/lib/components/edges/StepEdge.svelte +++ /dev/null @@ -1,31 +0,0 @@ - - - diff --git a/packages/svelte/src/lib/components/edges/StepEdgeInternal.svelte b/packages/svelte/src/lib/components/edges/StepEdge/BaseStepEdge.svelte similarity index 73% rename from packages/svelte/src/lib/components/edges/StepEdgeInternal.svelte rename to packages/svelte/src/lib/components/edges/StepEdge/BaseStepEdge.svelte index f793376b..4099e7d5 100644 --- a/packages/svelte/src/lib/components/edges/StepEdgeInternal.svelte +++ b/packages/svelte/src/lib/components/edges/StepEdge/BaseStepEdge.svelte @@ -1,10 +1,10 @@ + import BaseStepEdge from './BaseStepEdge.svelte'; + import type { StepEdgeProps } from '$lib/types'; + + type $$Props = StepEdgeProps; + + $: props = $$props as $$Props; + + + diff --git a/packages/svelte/src/lib/components/edges/StepEdge/StepEdgeInternal.svelte b/packages/svelte/src/lib/components/edges/StepEdge/StepEdgeInternal.svelte new file mode 100644 index 00000000..21109992 --- /dev/null +++ b/packages/svelte/src/lib/components/edges/StepEdge/StepEdgeInternal.svelte @@ -0,0 +1,10 @@ + + + diff --git a/packages/svelte/src/lib/components/edges/StraightEdge.svelte b/packages/svelte/src/lib/components/edges/StraightEdge.svelte deleted file mode 100644 index 979c4351..00000000 --- a/packages/svelte/src/lib/components/edges/StraightEdge.svelte +++ /dev/null @@ -1,28 +0,0 @@ - - - diff --git a/packages/svelte/src/lib/components/edges/StraightEdgeInternal.svelte b/packages/svelte/src/lib/components/edges/StraightEdge/BaseStraightEdge.svelte similarity index 75% rename from packages/svelte/src/lib/components/edges/StraightEdgeInternal.svelte rename to packages/svelte/src/lib/components/edges/StraightEdge/BaseStraightEdge.svelte index 8cc984d7..5db480ca 100644 --- a/packages/svelte/src/lib/components/edges/StraightEdgeInternal.svelte +++ b/packages/svelte/src/lib/components/edges/StraightEdge/BaseStraightEdge.svelte @@ -1,10 +1,10 @@ + import BaseStraighEdge from './BaseStraightEdge.svelte'; + import type { StraightEdgeProps } from '$lib/types'; + + type $$Props = StraightEdgeProps; + + $: props = $$props as $$Props; + + + diff --git a/packages/svelte/src/lib/components/edges/StraightEdge/StraightEdgeInternal.svelte b/packages/svelte/src/lib/components/edges/StraightEdge/StraightEdgeInternal.svelte new file mode 100644 index 00000000..bad893b2 --- /dev/null +++ b/packages/svelte/src/lib/components/edges/StraightEdge/StraightEdgeInternal.svelte @@ -0,0 +1,10 @@ + + + diff --git a/packages/svelte/src/lib/components/edges/index.ts b/packages/svelte/src/lib/components/edges/index.ts index 1f1567b6..19f1f129 100644 --- a/packages/svelte/src/lib/components/edges/index.ts +++ b/packages/svelte/src/lib/components/edges/index.ts @@ -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'; diff --git a/packages/svelte/src/lib/components/edges/internal.ts b/packages/svelte/src/lib/components/edges/internal.ts deleted file mode 100644 index f2582b79..00000000 --- a/packages/svelte/src/lib/components/edges/internal.ts +++ /dev/null @@ -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'; diff --git a/packages/svelte/src/lib/store/initial-store.ts b/packages/svelte/src/lib/store/initial-store.ts index 65acad86..dcfee4db 100644 --- a/packages/svelte/src/lib/store/initial-store.ts +++ b/packages/svelte/src/lib/store/initial-store.ts @@ -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 = ({ diff --git a/packages/svelte/src/lib/types/edges.ts b/packages/svelte/src/lib/types/edges.ts index 33f0d908..0a666ce7 100644 --- a/packages/svelte/src/lib/types/edges.ts +++ b/packages/svelte/src/lib/types/edges.ts @@ -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 = DefaultEdge & { type StepEdgeType = DefaultEdge & { type: 'step'; + pathOptions?: StepPathOptions; }; export type Edge = @@ -37,7 +40,7 @@ export type Edge = | BezierEdgeType | StepEdgeType; -export type EdgeProps = Omit & +export type EdgeProps = Omit, 'sourceHandle' | 'targetHandle'> & EdgePosition & { markerStart?: string; markerEnd?: string; @@ -45,6 +48,22 @@ export type EdgeProps = Omit & targetHandleId?: string | null; }; +export type EdgeComponentProps = Optional, 'source' | 'target'>, 'id'>; + +export type BezierEdgeProps = EdgeComponentProps & { + pathOptions?: BezierPathOptions; +}; + +export type SmoothStepEdgeProps = EdgeComponentProps & { + pathOptions?: SmoothStepPathOptions; +}; + +export type StepEdgeProps = EdgeComponentProps & { + pathOptions?: StepPathOptions; +}; + +export type StraightEdgeProps = EdgeComponentProps; + export type EdgeTypes = Record>>; export type DefaultEdgeOptions = Omit, 'focusable'>; diff --git a/packages/system/src/types/edges.ts b/packages/system/src/types/edges.ts index 855682d2..65c8e641 100644 --- a/packages/system/src/types/edges.ts +++ b/packages/system/src/types/edges.ts @@ -27,6 +27,10 @@ export type SmoothStepPathOptions = { borderRadius?: number; }; +export type StepPathOptions = { + offset?: number; +}; + export type BezierPathOptions = { curvature?: number; }; From a70e25b1a244861caf3fbf8a95e042a0ff1ba02b Mon Sep 17 00:00:00 2001 From: moklick Date: Thu, 30 Nov 2023 12:58:44 +0100 Subject: [PATCH 8/8] refactor(svelte/edges): cleanup types and components --- .../src/routes/examples/edges/+page.svelte | 14 ++- .../routes/examples/edges/ButtonEdge.svelte | 92 +++++++++++++++++++ .../examples/edges/CustomBezierEdge.svelte | 55 +++++++++++ .../src/components/Edges/StraightEdge.tsx | 6 +- packages/react/src/types/edges.ts | 2 +- .../lib/components/edges/BezierEdge.svelte | 48 ++++++++++ .../edges/BezierEdge/BaseBezierEdge.svelte | 33 ------- .../edges/BezierEdge/BezierEdge.svelte | 10 -- .../BezierEdge/BezierEdgeInternal.svelte | 10 -- .../edges/BezierEdgeInternal.svelte | 63 +++++++++++++ .../components/edges/SmoothStepEdge.svelte | 49 ++++++++++ .../SmoothStepEdge/BaseSmoothStepEdge.svelte | 34 ------- .../SmoothStepEdge/SmoothStepEdge.svelte | 10 -- .../SmoothStepEdgeInternal.svelte | 10 -- .../edges/SmoothStepEdgeInternal.svelte | 63 +++++++++++++ .../src/lib/components/edges/StepEdge.svelte | 49 ++++++++++ .../edges/StepEdge/BaseStepEdge.svelte | 34 ------- .../components/edges/StepEdge/StepEdge.svelte | 10 -- .../edges/StepEdge/StepEdgeInternal.svelte | 10 -- .../components/edges/StepEdgeInternal.svelte | 64 +++++++++++++ .../lib/components/edges/StraightEdge.svelte | 42 +++++++++ .../StraightEdge/BaseStraightEdge.svelte | 30 ------ .../edges/StraightEdge/StraightEdge.svelte | 10 -- .../StraightEdge/StraightEdgeInternal.svelte | 10 -- .../edges/StraightEdgeInternal.svelte | 63 +++++++++++++ .../svelte/src/lib/components/edges/index.ts | 18 ++-- packages/svelte/src/lib/index.ts | 13 ++- packages/svelte/src/lib/types/edges.ts | 15 ++- packages/svelte/tsconfig.json | 3 +- tooling/tsconfig/react.json | 3 +- 30 files changed, 640 insertions(+), 233 deletions(-) create mode 100644 examples/svelte/src/routes/examples/edges/ButtonEdge.svelte create mode 100644 examples/svelte/src/routes/examples/edges/CustomBezierEdge.svelte create mode 100644 packages/svelte/src/lib/components/edges/BezierEdge.svelte delete mode 100644 packages/svelte/src/lib/components/edges/BezierEdge/BaseBezierEdge.svelte delete mode 100644 packages/svelte/src/lib/components/edges/BezierEdge/BezierEdge.svelte delete mode 100644 packages/svelte/src/lib/components/edges/BezierEdge/BezierEdgeInternal.svelte create mode 100644 packages/svelte/src/lib/components/edges/BezierEdgeInternal.svelte create mode 100644 packages/svelte/src/lib/components/edges/SmoothStepEdge.svelte delete mode 100644 packages/svelte/src/lib/components/edges/SmoothStepEdge/BaseSmoothStepEdge.svelte delete mode 100644 packages/svelte/src/lib/components/edges/SmoothStepEdge/SmoothStepEdge.svelte delete mode 100644 packages/svelte/src/lib/components/edges/SmoothStepEdge/SmoothStepEdgeInternal.svelte create mode 100644 packages/svelte/src/lib/components/edges/SmoothStepEdgeInternal.svelte create mode 100644 packages/svelte/src/lib/components/edges/StepEdge.svelte delete mode 100644 packages/svelte/src/lib/components/edges/StepEdge/BaseStepEdge.svelte delete mode 100644 packages/svelte/src/lib/components/edges/StepEdge/StepEdge.svelte delete mode 100644 packages/svelte/src/lib/components/edges/StepEdge/StepEdgeInternal.svelte create mode 100644 packages/svelte/src/lib/components/edges/StepEdgeInternal.svelte create mode 100644 packages/svelte/src/lib/components/edges/StraightEdge.svelte delete mode 100644 packages/svelte/src/lib/components/edges/StraightEdge/BaseStraightEdge.svelte delete mode 100644 packages/svelte/src/lib/components/edges/StraightEdge/StraightEdge.svelte delete mode 100644 packages/svelte/src/lib/components/edges/StraightEdge/StraightEdgeInternal.svelte create mode 100644 packages/svelte/src/lib/components/edges/StraightEdgeInternal.svelte diff --git a/examples/svelte/src/routes/examples/edges/+page.svelte b/examples/svelte/src/routes/examples/edges/+page.svelte index 403b0ef6..8a2471b8 100644 --- a/examples/svelte/src/routes/examples/edges/+page.svelte +++ b/examples/svelte/src/routes/examples/edges/+page.svelte @@ -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 + }; - + diff --git a/examples/svelte/src/routes/examples/edges/ButtonEdge.svelte b/examples/svelte/src/routes/examples/edges/ButtonEdge.svelte new file mode 100644 index 00000000..235aab98 --- /dev/null +++ b/examples/svelte/src/routes/examples/edges/ButtonEdge.svelte @@ -0,0 +1,92 @@ + + + + +
+ +
+ + + diff --git a/examples/svelte/src/routes/examples/edges/CustomBezierEdge.svelte b/examples/svelte/src/routes/examples/edges/CustomBezierEdge.svelte new file mode 100644 index 00000000..48d86c3d --- /dev/null +++ b/examples/svelte/src/routes/examples/edges/CustomBezierEdge.svelte @@ -0,0 +1,55 @@ + + + diff --git a/packages/react/src/components/Edges/StraightEdge.tsx b/packages/react/src/components/Edges/StraightEdge.tsx index a9a453df..5a3c824d 100644 --- a/packages/react/src/components/Edges/StraightEdge.tsx +++ b/packages/react/src/components/Edges/StraightEdge.tsx @@ -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) => { + }: StraightEdgeProps) => { const [path, labelX, labelY] = getStraightPath({ sourceX, sourceY, targetX, targetY }); const _id = params.isInternal ? undefined : id; diff --git a/packages/react/src/types/edges.ts b/packages/react/src/types/edges.ts index 896c4605..287c277d 100644 --- a/packages/react/src/types/edges.ts +++ b/packages/react/src/types/edges.ts @@ -109,7 +109,7 @@ export type BaseEdgeProps = Pick = Optional, 'source' | 'target'>, 'id'>; -export type StraightEdgeProps = EdgeComponentProps; +export type StraightEdgeProps = Omit, 'sourcePosition' | 'targetPosition'>; export type SmoothStepEdgeProps = EdgeComponentProps & { pathOptions?: SmoothStepPathOptions; diff --git a/packages/svelte/src/lib/components/edges/BezierEdge.svelte b/packages/svelte/src/lib/components/edges/BezierEdge.svelte new file mode 100644 index 00000000..9d32f4c7 --- /dev/null +++ b/packages/svelte/src/lib/components/edges/BezierEdge.svelte @@ -0,0 +1,48 @@ + + + diff --git a/packages/svelte/src/lib/components/edges/BezierEdge/BaseBezierEdge.svelte b/packages/svelte/src/lib/components/edges/BezierEdge/BaseBezierEdge.svelte deleted file mode 100644 index 749a5096..00000000 --- a/packages/svelte/src/lib/components/edges/BezierEdge/BaseBezierEdge.svelte +++ /dev/null @@ -1,33 +0,0 @@ - - - diff --git a/packages/svelte/src/lib/components/edges/BezierEdge/BezierEdge.svelte b/packages/svelte/src/lib/components/edges/BezierEdge/BezierEdge.svelte deleted file mode 100644 index 9f93e7df..00000000 --- a/packages/svelte/src/lib/components/edges/BezierEdge/BezierEdge.svelte +++ /dev/null @@ -1,10 +0,0 @@ - - - diff --git a/packages/svelte/src/lib/components/edges/BezierEdge/BezierEdgeInternal.svelte b/packages/svelte/src/lib/components/edges/BezierEdge/BezierEdgeInternal.svelte deleted file mode 100644 index 75d168f4..00000000 --- a/packages/svelte/src/lib/components/edges/BezierEdge/BezierEdgeInternal.svelte +++ /dev/null @@ -1,10 +0,0 @@ - - - diff --git a/packages/svelte/src/lib/components/edges/BezierEdgeInternal.svelte b/packages/svelte/src/lib/components/edges/BezierEdgeInternal.svelte new file mode 100644 index 00000000..9431a05d --- /dev/null +++ b/packages/svelte/src/lib/components/edges/BezierEdgeInternal.svelte @@ -0,0 +1,63 @@ + + + diff --git a/packages/svelte/src/lib/components/edges/SmoothStepEdge.svelte b/packages/svelte/src/lib/components/edges/SmoothStepEdge.svelte new file mode 100644 index 00000000..3e27368f --- /dev/null +++ b/packages/svelte/src/lib/components/edges/SmoothStepEdge.svelte @@ -0,0 +1,49 @@ + + + diff --git a/packages/svelte/src/lib/components/edges/SmoothStepEdge/BaseSmoothStepEdge.svelte b/packages/svelte/src/lib/components/edges/SmoothStepEdge/BaseSmoothStepEdge.svelte deleted file mode 100644 index 5ec4dd89..00000000 --- a/packages/svelte/src/lib/components/edges/SmoothStepEdge/BaseSmoothStepEdge.svelte +++ /dev/null @@ -1,34 +0,0 @@ - - - diff --git a/packages/svelte/src/lib/components/edges/SmoothStepEdge/SmoothStepEdge.svelte b/packages/svelte/src/lib/components/edges/SmoothStepEdge/SmoothStepEdge.svelte deleted file mode 100644 index 1cac5d1c..00000000 --- a/packages/svelte/src/lib/components/edges/SmoothStepEdge/SmoothStepEdge.svelte +++ /dev/null @@ -1,10 +0,0 @@ - - - diff --git a/packages/svelte/src/lib/components/edges/SmoothStepEdge/SmoothStepEdgeInternal.svelte b/packages/svelte/src/lib/components/edges/SmoothStepEdge/SmoothStepEdgeInternal.svelte deleted file mode 100644 index 803247c2..00000000 --- a/packages/svelte/src/lib/components/edges/SmoothStepEdge/SmoothStepEdgeInternal.svelte +++ /dev/null @@ -1,10 +0,0 @@ - - - diff --git a/packages/svelte/src/lib/components/edges/SmoothStepEdgeInternal.svelte b/packages/svelte/src/lib/components/edges/SmoothStepEdgeInternal.svelte new file mode 100644 index 00000000..28e87269 --- /dev/null +++ b/packages/svelte/src/lib/components/edges/SmoothStepEdgeInternal.svelte @@ -0,0 +1,63 @@ + + + diff --git a/packages/svelte/src/lib/components/edges/StepEdge.svelte b/packages/svelte/src/lib/components/edges/StepEdge.svelte new file mode 100644 index 00000000..5ca6dc00 --- /dev/null +++ b/packages/svelte/src/lib/components/edges/StepEdge.svelte @@ -0,0 +1,49 @@ + + + diff --git a/packages/svelte/src/lib/components/edges/StepEdge/BaseStepEdge.svelte b/packages/svelte/src/lib/components/edges/StepEdge/BaseStepEdge.svelte deleted file mode 100644 index 4099e7d5..00000000 --- a/packages/svelte/src/lib/components/edges/StepEdge/BaseStepEdge.svelte +++ /dev/null @@ -1,34 +0,0 @@ - - - diff --git a/packages/svelte/src/lib/components/edges/StepEdge/StepEdge.svelte b/packages/svelte/src/lib/components/edges/StepEdge/StepEdge.svelte deleted file mode 100644 index 49522e95..00000000 --- a/packages/svelte/src/lib/components/edges/StepEdge/StepEdge.svelte +++ /dev/null @@ -1,10 +0,0 @@ - - - diff --git a/packages/svelte/src/lib/components/edges/StepEdge/StepEdgeInternal.svelte b/packages/svelte/src/lib/components/edges/StepEdge/StepEdgeInternal.svelte deleted file mode 100644 index 21109992..00000000 --- a/packages/svelte/src/lib/components/edges/StepEdge/StepEdgeInternal.svelte +++ /dev/null @@ -1,10 +0,0 @@ - - - diff --git a/packages/svelte/src/lib/components/edges/StepEdgeInternal.svelte b/packages/svelte/src/lib/components/edges/StepEdgeInternal.svelte new file mode 100644 index 00000000..248e5912 --- /dev/null +++ b/packages/svelte/src/lib/components/edges/StepEdgeInternal.svelte @@ -0,0 +1,64 @@ + + + diff --git a/packages/svelte/src/lib/components/edges/StraightEdge.svelte b/packages/svelte/src/lib/components/edges/StraightEdge.svelte new file mode 100644 index 00000000..c868752f --- /dev/null +++ b/packages/svelte/src/lib/components/edges/StraightEdge.svelte @@ -0,0 +1,42 @@ + + + diff --git a/packages/svelte/src/lib/components/edges/StraightEdge/BaseStraightEdge.svelte b/packages/svelte/src/lib/components/edges/StraightEdge/BaseStraightEdge.svelte deleted file mode 100644 index 5db480ca..00000000 --- a/packages/svelte/src/lib/components/edges/StraightEdge/BaseStraightEdge.svelte +++ /dev/null @@ -1,30 +0,0 @@ - - - diff --git a/packages/svelte/src/lib/components/edges/StraightEdge/StraightEdge.svelte b/packages/svelte/src/lib/components/edges/StraightEdge/StraightEdge.svelte deleted file mode 100644 index d7153544..00000000 --- a/packages/svelte/src/lib/components/edges/StraightEdge/StraightEdge.svelte +++ /dev/null @@ -1,10 +0,0 @@ - - - diff --git a/packages/svelte/src/lib/components/edges/StraightEdge/StraightEdgeInternal.svelte b/packages/svelte/src/lib/components/edges/StraightEdge/StraightEdgeInternal.svelte deleted file mode 100644 index bad893b2..00000000 --- a/packages/svelte/src/lib/components/edges/StraightEdge/StraightEdgeInternal.svelte +++ /dev/null @@ -1,10 +0,0 @@ - - - diff --git a/packages/svelte/src/lib/components/edges/StraightEdgeInternal.svelte b/packages/svelte/src/lib/components/edges/StraightEdgeInternal.svelte new file mode 100644 index 00000000..0d436d52 --- /dev/null +++ b/packages/svelte/src/lib/components/edges/StraightEdgeInternal.svelte @@ -0,0 +1,63 @@ + + + diff --git a/packages/svelte/src/lib/components/edges/index.ts b/packages/svelte/src/lib/components/edges/index.ts index 19f1f129..4be51363 100644 --- a/packages/svelte/src/lib/components/edges/index.ts +++ b/packages/svelte/src/lib/components/edges/index.ts @@ -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'; diff --git a/packages/svelte/src/lib/index.ts b/packages/svelte/src/lib/index.ts index d9e0885f..a9107415 100644 --- a/packages/svelte/src/lib/index.ts +++ b/packages/svelte/src/lib/index.ts @@ -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'; diff --git a/packages/svelte/src/lib/types/edges.ts b/packages/svelte/src/lib/types/edges.ts index 0a666ce7..3f1f0e8d 100644 --- a/packages/svelte/src/lib/types/edges.ts +++ b/packages/svelte/src/lib/types/edges.ts @@ -40,7 +40,7 @@ export type Edge = | BezierEdgeType | StepEdgeType; -export type EdgeProps = Omit, 'sourceHandle' | 'targetHandle'> & +export type EdgeProps = Omit, 'sourceHandle' | 'targetHandle' | 'type'> & EdgePosition & { markerStart?: string; markerEnd?: string; @@ -48,7 +48,13 @@ export type EdgeProps = Omit, 'sourceHandle' | 'targetHandle'> targetHandleId?: string | null; }; -export type EdgeComponentProps = Optional, 'source' | 'target'>, 'id'>; +export type EdgeComponentProps = Optional< + Omit< + EdgeProps, + 'source' | 'target' | 'sourceHandleId' | 'targetHandleId' | 'animated' | 'selected' | 'data' + >, + 'id' +>; export type BezierEdgeProps = EdgeComponentProps & { pathOptions?: BezierPathOptions; @@ -62,7 +68,10 @@ export type StepEdgeProps = EdgeComponentProps & { pathOptions?: StepPathOptions; }; -export type StraightEdgeProps = EdgeComponentProps; +export type StraightEdgeProps = Omit< + EdgeComponentProps, + 'sourcePosition' | 'targetPosition' +>; export type EdgeTypes = Record>>; diff --git a/packages/svelte/tsconfig.json b/packages/svelte/tsconfig.json index 8fbe9e82..d9cfe5d6 100644 --- a/packages/svelte/tsconfig.json +++ b/packages/svelte/tsconfig.json @@ -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 diff --git a/tooling/tsconfig/react.json b/tooling/tsconfig/react.json index e3cb9853..33c4fc1f 100644 --- a/tooling/tsconfig/react.json +++ b/tooling/tsconfig/react.json @@ -6,6 +6,7 @@ "lib": ["dom", "esnext"], "module": "esnext", "target": "esnext", - "outDir": "dist" + "outDir": "dist", + "noErrorTruncation": true } }