diff --git a/.changeset/hip-files-hunt.md b/.changeset/hip-files-hunt.md new file mode 100644 index 00000000..aaef60ff --- /dev/null +++ b/.changeset/hip-files-hunt.md @@ -0,0 +1,5 @@ +--- +"@xyflow/svelte": minor +--- + +Pass a custom `nodeComponent` to Svelteflow's Minimap diff --git a/examples/svelte/src/components/Header/Header.svelte b/examples/svelte/src/components/Header/Header.svelte index 1db10784..0ebe84e9 100644 --- a/examples/svelte/src/components/Header/Header.svelte +++ b/examples/svelte/src/components/Header/Header.svelte @@ -7,6 +7,7 @@ 'add-node-on-drop', 'color-mode', 'custom-connection-line', + 'custom-minimap', 'customnode', 'dagre', 'detached-handle', diff --git a/examples/svelte/src/routes/examples/custom-minimap/+page.svelte b/examples/svelte/src/routes/examples/custom-minimap/+page.svelte new file mode 100644 index 00000000..1e9c96ca --- /dev/null +++ b/examples/svelte/src/routes/examples/custom-minimap/+page.svelte @@ -0,0 +1,48 @@ + + + + + + + + + diff --git a/examples/svelte/src/routes/examples/custom-minimap/CustomMiniMapNode.svelte b/examples/svelte/src/routes/examples/custom-minimap/CustomMiniMapNode.svelte new file mode 100644 index 00000000..082b13bc --- /dev/null +++ b/examples/svelte/src/routes/examples/custom-minimap/CustomMiniMapNode.svelte @@ -0,0 +1,22 @@ + + + \ No newline at end of file diff --git a/packages/svelte/src/lib/plugins/Minimap/Minimap.svelte b/packages/svelte/src/lib/plugins/Minimap/Minimap.svelte index ac346066..d2fb8263 100644 --- a/packages/svelte/src/lib/plugins/Minimap/Minimap.svelte +++ b/packages/svelte/src/lib/plugins/Minimap/Minimap.svelte @@ -27,6 +27,7 @@ nodeClass = '', nodeBorderRadius = 5, nodeStrokeWidth = 2, + nodeComponent, bgColor, maskColor, maskStrokeColor, @@ -127,6 +128,7 @@ y={node.internals.positionAbsolute.y} {...nodeDimesions} selected={node.selected} + nodeComponent={nodeComponent} color={nodeColorFunc?.(node)} borderRadius={nodeBorderRadius} strokeColor={nodeStrokeColorFunc(node)} diff --git a/packages/svelte/src/lib/plugins/Minimap/MinimapNode.svelte b/packages/svelte/src/lib/plugins/Minimap/MinimapNode.svelte index a2700b82..1eb4cdeb 100644 --- a/packages/svelte/src/lib/plugins/Minimap/MinimapNode.svelte +++ b/packages/svelte/src/lib/plugins/Minimap/MinimapNode.svelte @@ -1,5 +1,7 @@ - +{#if nodeComponent} + {@const CustomComponent = nodeComponent} + + +{:else} + +{/if} diff --git a/packages/svelte/src/lib/plugins/Minimap/types.ts b/packages/svelte/src/lib/plugins/Minimap/types.ts index dd6903de..550191ed 100644 --- a/packages/svelte/src/lib/plugins/Minimap/types.ts +++ b/packages/svelte/src/lib/plugins/Minimap/types.ts @@ -1,9 +1,29 @@ import type { PanelPosition } from '@xyflow/system'; import type { ClassValue, HTMLAttributes } from 'svelte/elements'; +import type { Component } from 'svelte'; import type { Node } from '$lib/types'; export type GetMiniMapNodeAttribute = (node: Node) => string; +/** + * The props that are passed to the MiniMapNode component + * + * @public + */ +export type MiniMapNodeProps = { + x: number; + y: number; + width: number; + height: number; + borderRadius?: number; + class?: ClassValue; + color?: string; + shapeRendering?: string; + strokeColor?: string; + strokeWidth?: number; + selected?: boolean; +}; + export type MiniMapProps = { /** Background color of minimap */ bgColor?: string; @@ -17,6 +37,8 @@ export type MiniMapProps = { nodeBorderRadius?: number; /** Stroke width of nodes on the minimap */ nodeStrokeWidth?: number; + /** A custom component to render the nodes in the minimap. This component must render an SVG element! */ + nodeComponent?: Component; /** Color of the mask representing viewport */ maskColor?: string; /** Stroke color of the mask representing viewport */