diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts index 45f05f11..fc550dc5 100644 --- a/packages/react/src/index.ts +++ b/packages/react/src/index.ts @@ -23,16 +23,6 @@ export { default as useOnViewportChange, type UseOnViewportChangeOptions } from export { default as useOnSelectionChange, type UseOnSelectionChangeOptions } from './hooks/useOnSelectionChange'; export { default as useNodesInitialized, type UseNodesInitializedOptions } from './hooks/useNodesInitialized'; export { useNodeId } from './contexts/NodeIdContext'; -export * from '@xyflow/system'; -// export { -// getTransformForBounds, -// getRectOfNodes, -// getNodePositionWithOrigin, -// rectToBox, -// boxToRect, -// getBoundsOfRects, -// clamp, -// } from '@xyflow/system'; export { applyNodeChanges, applyEdgeChanges } from './utils/changes'; export { isNode, isEdge, getIncomers, getOutgoers, addEdge, updateEdge, getConnectedEdges } from './utils/general'; @@ -40,3 +30,60 @@ export { isNode, isEdge, getIncomers, getOutgoers, addEdge, updateEdge, getConne export * from './additional-components'; export * from './types'; + +// system types +export { + type SmoothStepPathOptions, + type BezierPathOptions, + ConnectionLineType, + type EdgeMarker, + type EdgeMarkerType, + MarkerType, + type OnMove, + type OnMoveStart, + type OnMoveEnd, + type Connection, + type ConnectionStatus, + ConnectionMode, + type OnConnectStartParams, + type OnConnectStart, + type OnConnect, + type OnConnectEnd, + type IsValidConnection, + type Viewport, + type SnapGrid, + PanOnScrollMode, + type ViewportHelperFunctionOptions, + type SetCenterOptions, + type FitBoundsOptions, + type PanelPosition, + type ProOptions, + SelectionMode, + type SelectionRect, + type OnError, + type NodeOrigin, + type OnNodeDrag, + type OnSelectionDrag, + Position, + type XYPosition, + type XYZPosition, + type Dimensions, + type Rect, + type Box, + type Transform, + type CoordinateExtent, +} from '@xyflow/system'; + +// system utils +export { + type GetBezierPathParams, + getBezierEdgeCenter, + getBezierPath, + getEdgeCenter, + type GetSmoothStepPathParams, + getSmoothStepPath, + type GetStraightPathParams, + getStraightPath, + getTransformForBounds, + getRectOfNodes, +} from '@xyflow/system'; diff --git a/packages/svelte/package.json b/packages/svelte/package.json index c7bb10b8..a0fd19b5 100644 --- a/packages/svelte/package.json +++ b/packages/svelte/package.json @@ -22,8 +22,10 @@ "type": "module", "module": "index.ts", "exports": { - "./package.json": "./package.json", - ".": "./dist/index.js" + ".": { + "types": "./dist/index.d.ts", + "svelte": "./dist/index.js" + } }, "publishConfig": { "access": "public" @@ -56,7 +58,6 @@ "files": [ "dist" ], - "svelte": "./dist/index.js", "typesVersions": { ">4.0": { "actions/drag": [ diff --git a/packages/svelte/src/example-components/Header/Header.svelte b/packages/svelte/src/example-components/Header/Header.svelte index f8a65431..9467c391 100644 --- a/packages/svelte/src/example-components/Header/Header.svelte +++ b/packages/svelte/src/example-components/Header/Header.svelte @@ -1,5 +1,6 @@
- {#each routes as route} - + {/each}
@@ -41,4 +42,4 @@ .logo { margin-right: 1rem; } - \ No newline at end of file + diff --git a/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte b/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte index 3ab14103..442178b6 100644 --- a/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte +++ b/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte @@ -27,6 +27,8 @@ export let positionOrigin: NodeWrapperProps['positionOrigin'] = undefined; export let sourcePosition: NodeWrapperProps['sourcePosition'] = undefined; export let targetPosition: NodeWrapperProps['targetPosition'] = undefined; + export let zIndex: NodeWrapperProps['zIndex']; + export let dragHandle: NodeWrapperProps['dragHandle'] = undefined; let className: string = ''; export { className as class }; @@ -41,8 +43,7 @@ type = 'default'; } - const nodeComponent: typeof SvelteComponentTyped> = - $nodeTypes[type!] || DefaultNode; + const nodeComponent: typeof SvelteComponentTyped = $nodeTypes[type!] || DefaultNode; const selectNodesOnDrag = false; const dispatch = createEventDispatcher(); @@ -105,6 +106,11 @@ {selected} {sourcePosition} {targetPosition} + {type} + {zIndex} + {dragging} + {dragHandle} + isConnectable={connectable} xPos={positionAbsolute?.x ?? 0} yPos={positionAbsolute?.y ?? 0} on:connect:start diff --git a/packages/svelte/src/lib/components/NodeWrapper/types.ts b/packages/svelte/src/lib/components/NodeWrapper/types.ts index 70281719..6bb3759e 100644 --- a/packages/svelte/src/lib/components/NodeWrapper/types.ts +++ b/packages/svelte/src/lib/components/NodeWrapper/types.ts @@ -18,9 +18,11 @@ export type NodeWrapperProps = Pick< | 'height' | 'sourcePosition' | 'targetPosition' + | 'dragHandle' > & { positionOrigin?: XYPosition; 'on:nodeclick'?: (event: MouseEvent) => void; resizeObserver?: ResizeObserver | null; isParent?: boolean; + zIndex: number; }; diff --git a/packages/svelte/src/lib/container/NodeRenderer/NodeRenderer.svelte b/packages/svelte/src/lib/container/NodeRenderer/NodeRenderer.svelte index 685e163f..21a7d7bf 100644 --- a/packages/svelte/src/lib/container/NodeRenderer/NodeRenderer.svelte +++ b/packages/svelte/src/lib/container/NodeRenderer/NodeRenderer.svelte @@ -63,6 +63,8 @@ sourcePosition={node.sourcePosition} targetPosition={node.targetPosition} dragging={node.dragging} + zIndex={node[internalsSymbol]?.z ?? 0} + dragHandle={node.dragHandle} {resizeObserver} on:node:click on:node:mouseenter diff --git a/packages/svelte/src/lib/container/SvelteFlow/types.ts b/packages/svelte/src/lib/container/SvelteFlow/types.ts index 9f5cc0f4..b6833b13 100644 --- a/packages/svelte/src/lib/container/SvelteFlow/types.ts +++ b/packages/svelte/src/lib/container/SvelteFlow/types.ts @@ -69,7 +69,3 @@ export type SvelteFlowProps = DOMAttributes & { 'on:pane:click'?: CustomEvent; 'on:pane:contextmenu'?: CustomEvent; }; - -export type SvelteFlowSlots = { - default: { slotValue: string }; -}; diff --git a/packages/svelte/src/lib/index.ts b/packages/svelte/src/lib/index.ts index df6a59e1..ff5f385f 100644 --- a/packages/svelte/src/lib/index.ts +++ b/packages/svelte/src/lib/index.ts @@ -1,22 +1,81 @@ -import { SvelteFlow } from '$lib/container/SvelteFlow'; +// main component +export { SvelteFlow } from '$lib/container/SvelteFlow'; +export * from '$lib/container/SvelteFlow/types'; -export * from '$lib/container/SvelteFlow'; +// components export * from '$lib/container/Panel'; - export * from '$lib/components/SvelteFlowProvider'; export * from '$lib/components/EdgeLabelRenderer'; export * from '$lib/components/BaseEdge'; export * from '$lib/components/Handle'; +// plugins export * from '$lib/plugins/Controls'; export * from '$lib/plugins/Background'; export * from '$lib/plugins/Minimap'; -export * from '$lib/types'; +// utils export * from '$lib/utils'; - export * from '$lib/hooks/useSvelteFlow'; -export * from '@xyflow/system'; +// types +export type { Edge, EdgeProps, EdgeTypes, DefaultEdgeOptions } from '$lib/types/edges'; +export type { HandleComponentProps, FitViewOptions } from '$lib/types/general'; +export type { Node, NodeTypes, DefaultNodeOptions } from '$lib/types/nodes'; -export default SvelteFlow; +// system types +export { + type SmoothStepPathOptions, + type BezierPathOptions, + ConnectionLineType, + type EdgeMarker, + type EdgeMarkerType, + MarkerType, + type OnMove, + type OnMoveStart, + type OnMoveEnd, + type Connection, + type ConnectionStatus, + ConnectionMode, + type OnConnectStartParams, + type OnConnectStart, + type OnConnect, + type OnConnectEnd, + type IsValidConnection, + type Viewport, + type SnapGrid, + PanOnScrollMode, + type ViewportHelperFunctionOptions, + type SetCenterOptions, + type FitBoundsOptions, + type PanelPosition, + type ProOptions, + SelectionMode, + type SelectionRect, + type OnError, + type NodeOrigin, + type OnNodeDrag, + type OnSelectionDrag, + Position, + type XYPosition, + type XYZPosition, + type Dimensions, + type Rect, + type Box, + type Transform, + type CoordinateExtent +} from '@xyflow/system'; + +// system utils +export { + type GetBezierPathParams, + getBezierEdgeCenter, + getBezierPath, + getEdgeCenter, + type GetSmoothStepPathParams, + getSmoothStepPath, + type GetStraightPathParams, + getStraightPath, + getTransformForBounds, + getRectOfNodes +} from '@xyflow/system'; diff --git a/packages/svelte/src/routes/customnode/+page.svelte b/packages/svelte/src/routes/customnode/+page.svelte index d5f468bc..384c0420 100644 --- a/packages/svelte/src/routes/customnode/+page.svelte +++ b/packages/svelte/src/routes/customnode/+page.svelte @@ -1,7 +1,8 @@ - + diff --git a/packages/system/src/types/general.ts b/packages/system/src/types/general.ts index 379ca7e9..ba1c6e3c 100644 --- a/packages/system/src/types/general.ts +++ b/packages/system/src/types/general.ts @@ -21,12 +21,12 @@ export type SetViewport = (viewport: Viewport, options?: ViewportHelperFunctionO export type SetCenter = (x: number, y: number, options?: SetCenterOptions) => void; export type FitBounds = (bounds: Rect, options?: FitBoundsOptions) => void; -export interface Connection { +export type Connection = { source: string | null; target: string | null; sourceHandle: string | null; targetHandle: string | null; -} +}; export type ConnectionStatus = 'valid' | 'invalid';