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

Refactor(types): unify node and edge handling (#3978)

Browse Source 
* refactor(types): unify node and edge type behaviour

* chore(changelogs): update

* chore(examples): cleanup
This commit is contained in:
Moritz Klack
2024-03-05 13:15:28 +01:00
committed by GitHub
parent 3122a3ac21
commit 4a12a9f781
29 changed files with 174 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte
+3 -1
View File
@@ -51,7 +51,8 @@
edgecontextmenu: { edge: Edge; event: MouseEvent };
}>();
$: edgeComponent = $edgeTypes[type!] || BezierEdgeInternal;
const edgeType = type || 'default';
$: edgeComponent = $edgeTypes[edgeType] || BezierEdgeInternal;
$: markerStartUrl = markerStart ? `url(#${getMarkerId(markerStart, $flowId)})` : undefined;
$: markerEndUrl = markerEnd ? `url(#${getMarkerId(markerEnd, $flowId)})` : undefined;
$: isSelectable = selectable || ($elementsSelectable && typeof selectable === 'undefined');
@@ -113,6 +114,7 @@
{data}
{style}
{interactionWidth}
type={edgeType}
sourceHandleId={sourceHandle}
targetHandleId={targetHandle}
markerStart={markerStartUrl}
packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte
+5 -12
View File
@@ -1,16 +1,10 @@
<svelte:options immutable />
<script lang="ts">
import {
createEventDispatcher,
setContext,
SvelteComponent,
type ComponentType,
onDestroy
} from 'svelte';
import { createEventDispatcher, setContext, onDestroy } from 'svelte';
import { get, writable } from 'svelte/store';
import cc from 'classcat';
import { errorMessages, Position, type NodeProps } from '@xyflow/system';
import { errorMessages, Position } from '@xyflow/system';
import drag from '$lib/actions/drag';
import { useStore } from '$lib/store';
@@ -71,8 +65,7 @@
console.warn('003', errorMessages['error003'](type!));
}
const nodeComponent: ComponentType<SvelteComponent<NodeProps>> =
$nodeTypes[nodeType] || DefaultNode;
const nodeComponent = $nodeTypes[nodeType] || DefaultNode;
const dispatch = createEventDispatcher<{
nodeclick: { node: Node; event: MouseEvent | TouchEvent };
nodecontextmenu: { node: Node; event: MouseEvent | TouchEvent };
@@ -211,11 +204,11 @@
{selected}
{sourcePosition}
{targetPosition}
{type}
{zIndex}
{dragging}
{dragHandle}
isConnectable={connectable}
type={nodeType}
isConnectable={$connectableStore}
positionAbsoluteX={positionX}
positionAbsoluteY={positionY}
{width}
packages/svelte/src/lib/components/edges/StraightEdgeInternal.svelte
+1
View File
@@ -11,6 +11,7 @@
export let source: $$Props['source'] = '';
export let target: $$Props['target'] = '';
export let type: $$Props['type'] = 'straight';
export let animated: $$Props['animated'] = undefined;
export let selected: $$Props['selected'] = undefined;
export let label: $$Props['label'] = undefined;
packages/svelte/src/lib/components/nodes/DefaultNode.svelte
+5 -4
View File
@@ -1,9 +1,10 @@
<script lang="ts">
import { Position, type NodeProps } from '@xyflow/system';
import { Position } from '@xyflow/system';
import { Handle } from '$lib/components/Handle';
import type { NodeProps } from '$lib/types';
interface $$Props extends NodeProps<{ label: string }> {}
interface $$Props extends NodeProps {}
export let data: $$Props['data'] = { label: 'Node' };
export let targetPosition: $$Props['targetPosition'] = Position.Top;
@@ -15,12 +16,12 @@
export let height: $$Props['height'] = undefined;
export let selected: $$Props['selected'] = undefined;
export let type: $$Props['type'] = undefined;
export let zIndex: $$Props['zIndex'] = undefined;
export let dragging: $$Props['dragging'] = false;
export let dragHandle: $$Props['dragHandle'] = undefined;
export let positionAbsoluteX: $$Props['positionAbsoluteX'] = 0;
export let positionAbsoluteY: $$Props['positionAbsoluteY'] = 0;
export let isConnectable: $$Props['isConnectable'] = undefined;
export let isConnectable: $$Props['isConnectable'];
export let zIndex: $$Props['zIndex'];
// @todo: there must be a better way to do this
id;
packages/svelte/src/lib/components/nodes/GroupNode.svelte
+4 -4
View File
@@ -1,7 +1,7 @@
<script lang="ts">
import type { NodeProps } from '@xyflow/system';
import type { NodeProps } from '$lib/types';
interface $$Props extends NodeProps<{}> {}
interface $$Props extends NodeProps {}
// unused props - we need to list them here in order to prevent warnings
export let id: $$Props['id'] = '';
@@ -12,12 +12,12 @@
export let sourcePosition: $$Props['sourcePosition'] = undefined;
export let targetPosition: $$Props['targetPosition'] = undefined;
export let type: $$Props['type'] = undefined;
export let zIndex: $$Props['zIndex'] = undefined;
export let dragging: $$Props['dragging'] = false;
export let dragHandle: $$Props['dragHandle'] = undefined;
export let positionAbsoluteX: $$Props['positionAbsoluteX'] = 0;
export let positionAbsoluteY: $$Props['positionAbsoluteY'] = 0;
export let isConnectable: $$Props['isConnectable'] = undefined;
export let isConnectable: $$Props['isConnectable'];
export let zIndex: $$Props['zIndex'];
// @todo: there must be a better way to do this
id;
packages/svelte/src/lib/components/nodes/InputNode.svelte
+5 -4
View File
@@ -1,9 +1,10 @@
<script lang="ts">
import { Position, type NodeProps } from '@xyflow/system';
import { Position } from '@xyflow/system';
import type { NodeProps } from '$lib/types';
import { Handle } from '$lib/components/Handle';
interface $$Props extends NodeProps<{ label: string }> {}
interface $$Props extends NodeProps {}
export let data: $$Props['data'] = { label: 'Node' };
export let sourcePosition: $$Props['sourcePosition'] = Position.Bottom;
@@ -15,12 +16,12 @@
export let selected: $$Props['selected'] = undefined;
export let targetPosition: $$Props['targetPosition'] = undefined;
export let type: $$Props['type'] = undefined;
export let zIndex: $$Props['zIndex'] = undefined;
export let dragging: $$Props['dragging'] = false;
export let dragHandle: $$Props['dragHandle'] = undefined;
export let positionAbsoluteX: $$Props['positionAbsoluteX'] = 0;
export let positionAbsoluteY: $$Props['positionAbsoluteY'] = 0;
export let isConnectable: $$Props['isConnectable'] = undefined;
export let isConnectable: $$Props['isConnectable'];
export let zIndex: $$Props['zIndex'];
// @todo: there must be a better way to do this
id;
packages/svelte/src/lib/components/nodes/OutputNode.svelte
+5 -4
View File
@@ -1,9 +1,10 @@
<script lang="ts">
import { Position, type NodeProps } from '@xyflow/system';
import { Position } from '@xyflow/system';
import type { NodeProps } from '$lib/types';
import { Handle } from '$lib/components/Handle';
interface $$Props extends NodeProps<{ label: string }> {}
interface $$Props extends NodeProps {}
export let data: $$Props['data'] = { label: 'Node' };
export let targetPosition: $$Props['targetPosition'] = Position.Top;
@@ -15,12 +16,12 @@
export let selected: $$Props['selected'] = undefined;
export let sourcePosition: $$Props['sourcePosition'] = undefined;
export let type: $$Props['type'] = undefined;
export let zIndex: $$Props['zIndex'] = undefined;
export let dragging: $$Props['dragging'] = false;
export let dragHandle: $$Props['dragHandle'] = undefined;
export let positionAbsoluteX: $$Props['positionAbsoluteX'] = 0;
export let positionAbsoluteY: $$Props['positionAbsoluteY'] = 0;
export let isConnectable: $$Props['isConnectable'] = undefined;
export let isConnectable: $$Props['isConnectable'];
export let zIndex: $$Props['zIndex'];
// @todo: there must be a better way to do this
id;
packages/svelte/src/lib/index.ts
+1 -2
View File
@@ -45,7 +45,7 @@ export type {
DefaultEdgeOptions
} from '$lib/types/edges';
export type { HandleComponentProps, FitViewOptions } from '$lib/types/general';
export type { Node, NodeTypes, DefaultNodeOptions, BuiltInNode } from '$lib/types/nodes';
export type { Node, NodeTypes, DefaultNodeOptions, BuiltInNode, NodeProps } from '$lib/types/nodes';
export type { SvelteFlowStore } from '$lib/store/types';
// system types
@@ -77,7 +77,6 @@ export {
SelectionMode,
type SelectionRect,
type OnError,
type NodeProps,
type NodeOrigin,
type OnSelectionDrag,
Position,
packages/svelte/src/lib/types/edges.ts
+20 -5
View File
@@ -49,11 +49,14 @@ export type BuiltInEdge = SmoothStepEdge | BezierEdge | StepEdge;
/**
* Custom edge component props.
*/
export type EdgeProps<
EdgeData extends Record<string, unknown> = Record<string, unknown>,
EdgeType extends string | undefined = string | undefined
> = Omit<Edge<EdgeData, EdgeType>, 'sourceHandle' | 'targetHandle' | 'type'> &
export type EdgeProps<EdgeType extends Edge = Edge> = Omit<
EdgeType,
'sourceHandle' | 'targetHandle'
> &
EdgePosition & {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
data?: any;
type: string;
markerStart?: string;
markerEnd?: string;
sourceHandleId?: string | null;
@@ -103,7 +106,19 @@ export type StepEdgeProps = EdgeComponentWithPathOptions<StepPathOptions>;
*/
export type StraightEdgeProps = Omit<EdgeComponentProps, 'sourcePosition' | 'targetPosition'>;
export type EdgeTypes = Record<string, ComponentType<SvelteComponent<EdgeProps>>>;
export type EdgeTypes = Record<
string,
ComponentType<
SvelteComponent<
EdgeProps & {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
data?: any;
// eslint-disable-next-line @typescript-eslint/no-explicit-any
type: any;
}
>
>
>;
export type DefaultEdgeOptions = DefaultEdgeOptionsBase<Edge>;
packages/svelte/src/lib/types/nodes.ts
+22 -3
View File
@@ -1,5 +1,5 @@
import type { ComponentType, SvelteComponent } from 'svelte';
import type { NodeBase, NodeProps } from '@xyflow/system';
import type { NodeBase, NodeProps as NodePropsBase } from '@xyflow/system';
/**
* The node data structure that gets used for the nodes prop.
@@ -7,13 +7,32 @@ import type { NodeBase, NodeProps } from '@xyflow/system';
*/
export type Node<
NodeData extends Record<string, unknown> = Record<string, unknown>,
NodeType extends string | undefined = string | undefined
NodeType extends string = string
> = NodeBase<NodeData, NodeType> & {
class?: string;
style?: string;
};
export type NodeTypes = Record<string, ComponentType<SvelteComponent<NodeProps>>>;
// @todo: currently generics for nodes are not really supported
// let's fix `type: any` when we migrate to Svelte 5
export type NodeProps<NodeType extends Node = Node> = NodePropsBase<NodeType> & {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
type: any;
};
export type NodeTypes = Record<
string,
ComponentType<
SvelteComponent<
NodeProps & {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
data: any;
// eslint-disable-next-line @typescript-eslint/no-explicit-any
type: any;
}
>
>
>;
export type DefaultNodeOptions = Partial<Omit<Node, 'id'>>;