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..5d8c5aeb 100644 --- a/packages/svelte/CHANGELOG.md +++ b/packages/svelte/CHANGELOG.md @@ -16,7 +16,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 +45,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 +87,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 +106,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 +302,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..35d2b126 100644 --- a/packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte +++ b/packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte @@ -80,7 +80,7 @@ {#if !hidden} - + 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/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/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;