diff --git a/examples/react/src/examples/Overview/index.tsx b/examples/react/src/examples/Overview/index.tsx index 3f5c72d0..8dddbb0d 100644 --- a/examples/react/src/examples/Overview/index.tsx +++ b/examples/react/src/examples/Overview/index.tsx @@ -237,7 +237,7 @@ const OverviewFlow = () => { onPaneMouseMove={onPaneMouseMove} > - + ); diff --git a/examples/svelte/src/routes/examples/overview/+page.svelte b/examples/svelte/src/routes/examples/overview/+page.svelte index 2f21107d..301730f6 100644 --- a/examples/svelte/src/routes/examples/overview/+page.svelte +++ b/examples/svelte/src/routes/examples/overview/+page.svelte @@ -189,8 +189,9 @@ autoPanOnNodeDrag connectionMode={ConnectionMode.Strict} attributionPosition={'top-center'} + deleteKey={['Backspace', 'd']} > - + xy console.log('control button')} >log; diff --git a/packages/react/src/hooks/useKeyPress.ts b/packages/react/src/hooks/useKeyPress.ts index 9f738d06..beca4000 100644 --- a/packages/react/src/hooks/useKeyPress.ts +++ b/packages/react/src/hooks/useKeyPress.ts @@ -109,11 +109,13 @@ export function useKeyPress( target?.addEventListener('keydown', downHandler as EventListenerOrEventListenerObject); target?.addEventListener('keyup', upHandler as EventListenerOrEventListenerObject); window.addEventListener('blur', resetHandler); + window.addEventListener('contextmenu', resetHandler); return () => { target?.removeEventListener('keydown', downHandler as EventListenerOrEventListenerObject); target?.removeEventListener('keyup', upHandler as EventListenerOrEventListenerObject); window.removeEventListener('blur', resetHandler); + window.removeEventListener('contextmenu', resetHandler); }; } }, [keyCode, setKeyPressed]); diff --git a/packages/svelte/.eslintignore b/packages/svelte/.eslintignore index 38972655..c4563de9 100644 --- a/packages/svelte/.eslintignore +++ b/packages/svelte/.eslintignore @@ -2,6 +2,7 @@ node_modules /build /.svelte-kit +dist /package .env .env.* diff --git a/packages/svelte/.prettierrc b/packages/svelte/.prettierrc index 862e74f2..20bc78a9 100644 --- a/packages/svelte/.prettierrc +++ b/packages/svelte/.prettierrc @@ -3,6 +3,5 @@ "trailingComma": "none", "printWidth": 100, "plugins": ["prettier-plugin-svelte"], - "pluginSearchDirs": ["."], "overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }] } diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md index 5ea7f58e..109271be 100644 --- a/packages/svelte/CHANGELOG.md +++ b/packages/svelte/CHANGELOG.md @@ -1,5 +1,13 @@ # @xyflow/svelte +## 0.0.40 + +- add `orientation` ('horizontal' or 'vertical'), `style` and `class` prop for `Controls` component +- allow multiple keys for `deleteKey`, `selectionKey`, `multiSelectionKey`, `panActivationKey` and `zoomActivationKey` +- fix node observe / unobserve +- fix edge and node types +- active context menu releases pressed keys to reset selection + ## 0.0.39 ## ⚠️ Breaking changes @@ -16,7 +24,7 @@ ## ⚠️ Breaking changes -- `NodeProps` generic is a node and not only node data. `type $$Props = NodeProps` +- `NodeProps` generic is a node and not only node data. `type $$Props = NodeProps` ## Patch changes @@ -45,7 +53,7 @@ - fix `on:panecontextmenu` - add `role="button"` to `` to prevent a11y warnings - don't delete node when input is focused and user presses Backspace + Ctrl (or any other mod key) -- `useHandleConnections`: use context node id when no node id is passed +- `useHandleConnections`: use context node id when no node id is passed - don't trigger drag start / end when node is not draggable ## 0.0.35 @@ -87,7 +95,7 @@ ### ⚠️ Breaking -- `deleteElements` function now takes one object as an argument `{ nodes: [], edges: [] }` instead of two `(nodes, edges)` +- `deleteElements` function now takes one object as an argument `{ nodes: [], edges: [] }` instead of two `(nodes, edges)` ## 0.0.32 @@ -106,7 +114,7 @@ ### Features - add `onbeforedelete` handler to prevent/ manage deletions -- TSDocs for hooks and some types +- TSDocs for hooks and some types ### Patch changes @@ -302,4 +310,4 @@ This very first release comes with lots of features already: - draggable, selectable and deletable nodes - support for custom `nodeTypes` and `edgeTypes` - basic viewport settings like `fitView`, `minZoom` and `maxZoom` -- additional components: ``, `` & `` +- additional components: ``, `` & `` diff --git a/packages/svelte/README.md b/packages/svelte/README.md index 33e84761..d16da36c 100644 --- a/packages/svelte/README.md +++ b/packages/svelte/README.md @@ -10,7 +10,7 @@ Svelte Flow is a highly customizable component for building interactive graphs a ☣️ **Svelte Flow is still alpha and currently under heavy development. The API is relatively stable but some things might change.** ☣️ -[🚀 Getting Started](https://svelteflow.dev/learn) | [📖 Documentation](https://svelteflow.dev/api-reference/svelte-flow) | [📺 Examples](https://svelteflow.dev/examples/overview) | [☎️ Discord](https://discord.gg/RVmnytFmGW) +[🚀 Getting Started](https://svelteflow.dev/learn) | [📖 Documentation](https://svelteflow.dev/api-reference/svelte-flow) | [📺 Examples](https://svelteflow.dev/examples/overview) | [☎️ Discord](https://discord.gg/RVmnytFmGW) @@ -18,7 +18,7 @@ Svelte Flow is a highly customizable component for building interactive graphs a - **Easy to use:** Seamless zooming and panning, single- and multi selection of graph elements and keyboard shortcuts are supported out of the box - **Customizable:** Different [node](https://svelteflow.dev/examples) and [edge types](https://svelteflow.dev/examples/edges/edge-types) and support for custom nodes with multiple handles and custom edges -- **Fast rendering:** Only nodes that have changed are re-rendered +- **Fast rendering:** Only nodes that have changed are re-rendered - **Hooks and Utils:** [Hooks](https://svelteflow.dev/api-reference/hooks) for handling nodes, edges and the viewport and graph [helper functions](https://svelteflow.dev/api-reference/utils) - **Plugin Components:** [Background](https://svelteflow.dev/api-reference/components/background), [MiniMap](https://svelteflow.dev/api-reference/components/minimap) and [Controls](https://svelteflow.dev/api-reference/components/controls) - **Reliable**: Written in [Typescript](https://www.typescriptlang.org) and tested with [Playwright](https://www.playwright.dev) @@ -38,18 +38,12 @@ You only need a few lines to get a fully interactive (e.g. select and drag nodes ```svelte - console.log('on node click', event)} -> + console.log('on node click', event)}> @@ -102,7 +91,6 @@ You only need a few lines to get a fully interactive (e.g. select and drag nodes And of course, we love Github stars ⭐ - ## Development If you want to check out the current version you need to run the following command from the root directory: @@ -113,7 +101,6 @@ If you want to check out the current version you need to run the following comma You can now access the examples under http://127.0.0.1:5173 - ## Maintainers Svelte Flow is maintained by the team behind [xyflow](https://xyflow.com). If you need help or want to talk to us about a collaboration, reach out through our [contact form](https://xyflow.com/contact) or by joining our [Discord Server](https://discord.gg/Bqt6xrs). diff --git a/packages/svelte/src/lib/components/Attribution/Attribution.svelte b/packages/svelte/src/lib/components/Attribution/Attribution.svelte index 8edf0074..bb7041d7 100644 --- a/packages/svelte/src/lib/components/Attribution/Attribution.svelte +++ b/packages/svelte/src/lib/components/Attribution/Attribution.svelte @@ -4,8 +4,8 @@ type $$Props = AttributionProps; - export let proOptions: AttributionProps['proOptions'] = undefined; - export let position: AttributionProps['position'] = 'bottom-right'; + export let proOptions: $$Props['proOptions'] = undefined; + export let position: $$Props['position'] = 'bottom-right'; {#if !proOptions?.hideAttribution} diff --git a/packages/svelte/src/lib/components/EdgeLabelRenderer/EdgeLabelRenderer.svelte b/packages/svelte/src/lib/components/EdgeLabelRenderer/EdgeLabelRenderer.svelte index f3cfeca9..76bc8061 100644 --- a/packages/svelte/src/lib/components/EdgeLabelRenderer/EdgeLabelRenderer.svelte +++ b/packages/svelte/src/lib/components/EdgeLabelRenderer/EdgeLabelRenderer.svelte @@ -2,8 +2,6 @@ import portal from '$lib/actions/portal'; import { useStore } from '$lib/store'; - type $$Props = {}; - const { domNode } = useStore(); diff --git a/packages/svelte/src/lib/components/EdgeLabelRenderer/index.ts b/packages/svelte/src/lib/components/EdgeLabelRenderer/index.ts index 18592b1b..02f40786 100644 --- a/packages/svelte/src/lib/components/EdgeLabelRenderer/index.ts +++ b/packages/svelte/src/lib/components/EdgeLabelRenderer/index.ts @@ -1 +1 @@ -export { default as EdgeLabelRenderer } from './EdgeLabelRenderer.svelte'; \ No newline at end of file +export { default as EdgeLabelRenderer } from './EdgeLabelRenderer.svelte'; diff --git a/packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte b/packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte index 0a229099..f2166cee 100644 --- a/packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte +++ b/packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte @@ -51,7 +51,7 @@ edgecontextmenu: { edge: Edge; event: MouseEvent }; }>(); - const edgeType = type || 'default'; + $: edgeType = type || 'default'; $: edgeComponent = $edgeTypes[edgeType] || BezierEdgeInternal; $: markerStartUrl = markerStart ? `url(#${getMarkerId(markerStart, $flowId)})` : undefined; $: markerEndUrl = markerEnd ? `url(#${getMarkerId(markerEnd, $flowId)})` : undefined; @@ -80,7 +80,7 @@ {#if !hidden} - + - import { shortcut, type ShortcutModifierDefinition } from '@svelte-put/shortcut'; + import { + shortcut, + type ShortcutEventDetail, + type ShortcutModifierDefinition + } from '@svelte-put/shortcut'; import { isInputDOMNode, isMacOs } from '@xyflow/system'; import { useStore } from '$lib/store'; @@ -19,7 +23,8 @@ multiselectionKeyPressed, deleteKeyPressed, panActivationKeyPressed, - zoomActivationKeyPressed + zoomActivationKeyPressed, + selectionRect } = useStore(); function isKeyObject(key?: KeyDefinition | null): key is KeyDefinitionObject { @@ -40,140 +45,81 @@ return isKeyObject(key) ? key.key : key; } - $: selectionKeyDefinition = { - key: getKeyString(selectionKey), - modifier: getModifier(selectionKey) - }; + function getShortcutTrigger( + key: KeyDefinition | KeyDefinition[] | null | undefined, + callback: (detail: ShortcutEventDetail) => void + ) { + const keys = Array.isArray(key) ? key : [key]; + return keys.map((_key) => { + const keyString = getKeyString(_key); + return { + key: keyString, + modifier: getModifier(_key), + enabled: keyString !== null, + callback + }; + }); + } - $: multiSelectionKeyDefinition = { - key: getKeyString(multiSelectionKey), - modifier: getModifier(multiSelectionKey) - }; - - $: deleteKeyDefinition = { - key: getKeyString(deleteKey), - modifier: getModifier(deleteKey) - }; - - $: panActivationKeyDefinition = { - key: getKeyString(panActivationKey), - modifier: getModifier(panActivationKey) - }; - - $: zoomActivationKeyDefinition = { - key: getKeyString(zoomActivationKey), - modifier: getModifier(zoomActivationKey) - }; + function resetKeysAndSelection() { + selectionRect.set(null); + selectionKeyPressed.set(false); + multiselectionKeyPressed.set(false); + deleteKeyPressed.set(false); + panActivationKeyPressed.set(false); + zoomActivationKeyPressed.set(false); + } selectionKeyPressed.set(true) - } - ], - + trigger: getShortcutTrigger(selectionKey, () => selectionKeyPressed.set(true)), type: 'keydown' }} use:shortcut={{ - trigger: [ - { - ...selectionKeyDefinition, - enabled: selectionKeyDefinition.key !== null, - callback: () => selectionKeyPressed.set(false) - } - ], + trigger: getShortcutTrigger(selectionKey, () => selectionKeyPressed.set(false)), type: 'keyup' }} use:shortcut={{ - trigger: [ - { - ...multiSelectionKeyDefinition, - enabled: multiSelectionKeyDefinition.key !== null, - callback: () => multiselectionKeyPressed.set(true) - } - ], + trigger: getShortcutTrigger(multiSelectionKey, () => multiselectionKeyPressed.set(true)), type: 'keydown' }} use:shortcut={{ - trigger: [ - { - ...multiSelectionKeyDefinition, - enabled: multiSelectionKeyDefinition.key !== null, - callback: () => multiselectionKeyPressed.set(false) - } - ], + trigger: getShortcutTrigger(multiSelectionKey, () => multiselectionKeyPressed.set(false)), type: 'keyup' }} use:shortcut={{ - trigger: [ - { - ...deleteKeyDefinition, - enabled: deleteKeyDefinition.key !== null, - callback: (detail) => { - const isModifierKey = - detail.originalEvent.ctrlKey || - detail.originalEvent.metaKey || - detail.originalEvent.shiftKey; - if (!isModifierKey && !isInputDOMNode(detail.originalEvent)) { - deleteKeyPressed.set(true); - } - } + trigger: getShortcutTrigger(deleteKey, (detail) => { + const isModifierKey = + detail.originalEvent.ctrlKey || + detail.originalEvent.metaKey || + detail.originalEvent.shiftKey; + if (!isModifierKey && !isInputDOMNode(detail.originalEvent)) { + deleteKeyPressed.set(true); } - ], + }), type: 'keydown' }} use:shortcut={{ - trigger: [ - { - ...deleteKeyDefinition, - enabled: deleteKeyDefinition.key !== null, - callback: () => deleteKeyPressed.set(false) - } - ], + trigger: getShortcutTrigger(deleteKey, () => deleteKeyPressed.set(false)), type: 'keyup' }} use:shortcut={{ - trigger: [ - { - ...panActivationKeyDefinition, - enabled: panActivationKeyDefinition.key !== null, - callback: () => panActivationKeyPressed.set(true) - } - ], + trigger: getShortcutTrigger(panActivationKey, () => panActivationKeyPressed.set(true)), type: 'keydown' }} use:shortcut={{ - trigger: [ - { - ...panActivationKeyDefinition, - enabled: panActivationKeyDefinition.key !== null, - callback: () => panActivationKeyPressed.set(false) - } - ], + trigger: getShortcutTrigger(panActivationKey, () => panActivationKeyPressed.set(false)), type: 'keyup' }} use:shortcut={{ - trigger: [ - { - ...zoomActivationKeyDefinition, - enabled: zoomActivationKeyDefinition.key !== null, - callback: () => zoomActivationKeyPressed.set(true) - } - ], + trigger: getShortcutTrigger(zoomActivationKey, () => zoomActivationKeyPressed.set(true)), type: 'keydown' }} use:shortcut={{ - trigger: [ - { - ...zoomActivationKeyDefinition, - enabled: zoomActivationKeyDefinition.key !== null, - callback: () => zoomActivationKeyPressed.set(false) - } - ], + trigger: getShortcutTrigger(zoomActivationKey, () => zoomActivationKeyPressed.set(false)), type: 'keyup' }} /> diff --git a/packages/svelte/src/lib/components/KeyHandler/types.ts b/packages/svelte/src/lib/components/KeyHandler/types.ts index 9a6ebe86..0df03d76 100644 --- a/packages/svelte/src/lib/components/KeyHandler/types.ts +++ b/packages/svelte/src/lib/components/KeyHandler/types.ts @@ -1,9 +1,9 @@ import type { KeyDefinition } from '$lib/types'; export type KeyHandlerProps = { - selectionKey?: KeyDefinition | null; - multiSelectionKey?: KeyDefinition | null; - deleteKey?: KeyDefinition | null; - panActivationKey?: KeyDefinition | null; - zoomActivationKey?: KeyDefinition | null; + selectionKey?: KeyDefinition | KeyDefinition[] | null; + multiSelectionKey?: KeyDefinition | KeyDefinition[] | null; + deleteKey?: KeyDefinition | KeyDefinition[] | null; + panActivationKey?: KeyDefinition | KeyDefinition[] | null; + zoomActivationKey?: KeyDefinition | KeyDefinition[] | null; }; diff --git a/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte b/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte index eff6c733..e502cd50 100644 --- a/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte +++ b/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte @@ -1,7 +1,7 @@ diff --git a/packages/svelte/src/lib/container/Pane/Pane.svelte b/packages/svelte/src/lib/container/Pane/Pane.svelte index 48c8113f..6a8d4dd8 100644 --- a/packages/svelte/src/lib/container/Pane/Pane.svelte +++ b/packages/svelte/src/lib/container/Pane/Pane.svelte @@ -178,7 +178,7 @@ // onSelectionEnd?.(event); } - const onMouseLeave = (event: MouseEvent) => { + const onMouseLeave = () => { if ($selectionRectMode === 'user') { selectionRectMode.set(selectedNodes.length > 0 ? 'nodes' : null); // onSelectionEnd?.(event); diff --git a/packages/svelte/src/lib/container/SvelteFlow/types.ts b/packages/svelte/src/lib/container/SvelteFlow/types.ts index ecda2319..8295b27c 100644 --- a/packages/svelte/src/lib/container/SvelteFlow/types.ts +++ b/packages/svelte/src/lib/container/SvelteFlow/types.ts @@ -86,27 +86,27 @@ export type SvelteFlowProps = DOMAttributes & { /** Pressing down this key you can select multiple elements with a selection box. * @default 'Shift' */ - selectionKey?: KeyDefinition | null; + selectionKey?: KeyDefinition | KeyDefinition[] | null; /** If a key is set, you can pan the viewport while that key is held down even if panOnScroll is set to false. * * By setting this prop to null you can disable this functionality. * @default 'Space' */ - panActivationKey?: KeyDefinition | null; + panActivationKey?: KeyDefinition | KeyDefinition[] | null; /** Pressing down this key deletes all selected nodes & edges. * @default 'Backspace' */ - deleteKey?: KeyDefinition | null; + deleteKey?: KeyDefinition | KeyDefinition[] | null; /** Pressing down this key you can select multiple elements by clicking. * @default 'Meta' for macOS, "Ctrl" for other systems */ - multiSelectionKey?: KeyDefinition | null; + multiSelectionKey?: KeyDefinition | KeyDefinition[] | null; /** If a key is set, you can zoom the viewport while that key is held down even if panOnScroll is set to false. * * By setting this prop to null you can disable this functionality. * @default 'Meta' for macOS, "Ctrl" for other systems * */ - zoomActivationKey?: KeyDefinition | null; + zoomActivationKey?: KeyDefinition | KeyDefinition[] | null; /** If set, initial viewport will show all nodes & edges */ fitView?: boolean; /** Options to be used in combination with fitView diff --git a/packages/svelte/src/lib/container/SvelteFlow/utils.ts b/packages/svelte/src/lib/container/SvelteFlow/utils.ts index 2970f15c..29e65db4 100644 --- a/packages/svelte/src/lib/container/SvelteFlow/utils.ts +++ b/packages/svelte/src/lib/container/SvelteFlow/utils.ts @@ -76,8 +76,7 @@ export function updateStoreByKeys(store: SvelteFlowStore, keys: UpdatableStorePr getKeys(keys).forEach((prop) => { const update = keys[prop]; if (update !== undefined) { - // @todo: how to fix this TS error? - // @ts-ignore + // @ts-expect-error @todo: how to fix this TS error? store[prop].set(update); } }); diff --git a/packages/svelte/src/lib/hooks/useNodesData.ts b/packages/svelte/src/lib/hooks/useNodesData.ts index 254a70fd..83db2115 100644 --- a/packages/svelte/src/lib/hooks/useNodesData.ts +++ b/packages/svelte/src/lib/hooks/useNodesData.ts @@ -20,7 +20,8 @@ export function useNodesData( // eslint-disable-next-line @typescript-eslint/no-explicit-any export function useNodesData(nodeIds: any): any { const { nodes, nodeLookup } = useStore(); - let prevNodesData: any = []; + // eslint-disable-next-line @typescript-eslint/no-explicit-any + let prevNodesData: any[] = []; return derived([nodes, nodeLookup], ([, nodeLookup], set) => { const nextNodesData = []; diff --git a/packages/svelte/src/lib/index.ts b/packages/svelte/src/lib/index.ts index 04548aa9..771116c3 100644 --- a/packages/svelte/src/lib/index.ts +++ b/packages/svelte/src/lib/index.ts @@ -96,7 +96,8 @@ export { type OnResizeEnd, type ControlPosition, type ControlLinePosition, - type ResizeControlVariant + type ResizeControlVariant, + type IsValidConnection } from '@xyflow/system'; // system utils diff --git a/packages/svelte/src/lib/plugins/Controls/Controls.svelte b/packages/svelte/src/lib/plugins/Controls/Controls.svelte index 042b2be5..aedcc182 100644 --- a/packages/svelte/src/lib/plugins/Controls/Controls.svelte +++ b/packages/svelte/src/lib/plugins/Controls/Controls.svelte @@ -1,4 +1,6 @@ {#if showZoom} diff --git a/packages/svelte/src/lib/plugins/Controls/types.ts b/packages/svelte/src/lib/plugins/Controls/types.ts index fca86b00..1de8dee9 100644 --- a/packages/svelte/src/lib/plugins/Controls/types.ts +++ b/packages/svelte/src/lib/plugins/Controls/types.ts @@ -18,6 +18,9 @@ export type ControlsProps = { buttonColor?: string; buttonColorHover?: string; 'aria-label'?: string; + style?: string; + class?: string; + orientation?: 'horizontal' | 'vertical'; }; export type ControlButtonProps = HTMLButtonAttributes & { diff --git a/packages/svelte/src/lib/plugins/Minimap/Minimap.svelte b/packages/svelte/src/lib/plugins/Minimap/Minimap.svelte index a722ed9c..20b2317d 100644 --- a/packages/svelte/src/lib/plugins/Minimap/Minimap.svelte +++ b/packages/svelte/src/lib/plugins/Minimap/Minimap.svelte @@ -1,6 +1,6 @@ @@ -61,6 +61,7 @@ const nodeStrokeColorFunc = getAttrFunction(nodeStrokeColor); const nodeClassFunc = getAttrFunction(nodeClass); const shapeRendering = + // @ts-expect-error - TS doesn't know about chrome typeof window === 'undefined' || !!window.chrome ? 'crispEdges' : 'geometricPrecision'; const labelledBy = `svelte-flow__minimap-desc-${$flowId}`; diff --git a/packages/svelte/src/lib/plugins/NodeResizer/ResizeControl.svelte b/packages/svelte/src/lib/plugins/NodeResizer/ResizeControl.svelte index d3d1d793..c67f2e87 100644 --- a/packages/svelte/src/lib/plugins/NodeResizer/ResizeControl.svelte +++ b/packages/svelte/src/lib/plugins/NodeResizer/ResizeControl.svelte @@ -52,7 +52,7 @@ $: colorStyleProp = variant === ResizeControlVariant.Line ? 'border-color' : 'background-color'; $: _style = style ?? ''; - $: controlStyle = !!color ? `${_style} ${colorStyleProp}: ${color};` : _style; + $: controlStyle = color ? `${_style} ${colorStyleProp}: ${color};` : _style; onMount(() => { if (resizeControlRef) { diff --git a/packages/svelte/src/lib/store/derived-connection-props.ts b/packages/svelte/src/lib/store/derived-connection-props.ts index 2ee74538..0edf3c6c 100644 --- a/packages/svelte/src/lib/store/derived-connection-props.ts +++ b/packages/svelte/src/lib/store/derived-connection-props.ts @@ -6,7 +6,8 @@ import { ConnectionLineType, ConnectionMode, Position, - internalsSymbol + internalsSymbol, + type HandleElement } from '@xyflow/system'; import type { SvelteFlowStoreState } from './types'; @@ -68,16 +69,16 @@ export function getDerivedConnectionProps( const fromHandleBounds = fromNode?.[internalsSymbol]?.handleBounds; const handleBoundsStrict = fromHandleBounds?.[connection.connectionStartHandle.type || 'source'] || []; - const handleBoundsLoose = handleBoundsStrict + const handleBoundsLoose: HandleElement[] | undefined | null = handleBoundsStrict ? handleBoundsStrict : fromHandleBounds?.[ connection?.connectionStartHandle?.type === 'source' ? 'target' : 'source' - ]!; + ]; const handleBounds = connectionMode === ConnectionMode.Strict ? handleBoundsStrict : handleBoundsLoose; const fromHandle = connection.connectionStartHandle?.handleId - ? handleBounds.find((d) => d.id === connection.connectionStartHandle?.handleId) - : handleBounds[0]; + ? handleBounds?.find((d) => d.id === connection.connectionStartHandle?.handleId) + : handleBounds?.[0]; const fromHandleX = fromHandle ? fromHandle.x + fromHandle.width / 2 : (fromNode?.computed?.width ?? 0) / 2; diff --git a/packages/system/src/styles/init.css b/packages/system/src/styles/init.css index 48e82af8..4a519893 100644 --- a/packages/system/src/styles/init.css +++ b/packages/system/src/styles/init.css @@ -397,6 +397,13 @@ svg.xy-flow__connectionline { } .xy-flow__controls { + display: flex; + flex-direction: column; + + &.horizontal { + flex-direction: row; + } + &-button { display: flex; justify-content: center;