From fd095d1c1d468cf7bc23032007d45387350dc344 Mon Sep 17 00:00:00 2001 From: braks <78412429+bcakmakoglu@users.noreply.github.com> Date: Mon, 14 Nov 2022 20:33:21 +0100 Subject: [PATCH] docs: add info on interactive minimap props --- docs/src/guide/components/minimap.md | 36 ++++++++++++++++++++-------- 1 file changed, 26 insertions(+), 10 deletions(-) diff --git a/docs/src/guide/components/minimap.md b/docs/src/guide/components/minimap.md index d82cb776..4178e53b 100644 --- a/docs/src/guide/components/minimap.md +++ b/docs/src/guide/components/minimap.md @@ -12,19 +12,35 @@ To use the minimap simply pass the `MiniMap` component as a child to the `VueFlo ``` +### Interactive MiniMap + +The minimap can be made interactive by using the `pannable` and `zoomable` props. + +```vue + +``` + +When enabled, these props allow you to pan on drag and zoom on scroll using the MiniMap. + ## [Props](/typedocs/interfaces/MiniMapProps) -| Name | Definition | Type | Optional | Default | -|------------------|--------------------------|------------------------------------------------------------------|----------|-------------------------| -| nodeColor | Node(s) Background color | string, [MiniMapNodeFunc](/typedocs/types/MiniMapNodeFunc) | true | #fff | -| nodeStrokeColor | Border color | string, [MiniMapNodeFunc](/typedocs/types/MiniMapNodeFunc) | true | #555 | -| nodeClassName | Extra classes | string, [MiniMapNodeFunc](/typedocs/types/MiniMapNodeFunc) | true | - | -| nodeBorderRadius | Border radius | number | true | 5 | -| nodeStrokeWidth | Stroke width | number | true | 2 | -| maskColor | Minimap Background color | string | true | rgb(240, 242, 243, 0.7) | +| Name | Definition | Type | Optional | Default | +|------------------|------------------------------|------------------------------------------------------------|----------|-------------------------| +| nodeColor | Node(s) Background color | string, [MiniMapNodeFunc](/typedocs/types/MiniMapNodeFunc) | true | #fff | +| nodeStrokeColor | Border color | string, [MiniMapNodeFunc](/typedocs/types/MiniMapNodeFunc) | true | #555 | +| nodeClassName | Extra classes | string, [MiniMapNodeFunc](/typedocs/types/MiniMapNodeFunc) | true | - | +| nodeBorderRadius | Border radius | number | true | 5 | +| nodeStrokeWidth | Stroke width | number | true | 2 | +| maskColor | Minimap Background color | string | true | rgb(240, 242, 243, 0.7) | +| pannable | Use Minimap to pan on drag | boolean | true | false | +| zoomable | Use Minimap to zoom on wheel | boolean | true | false | ## Slots -| Name | Definition | Props | Default | -|---------------------|-------------------|-----------------------------------------------------------------|-----------------------------------------------------| +| Name | Definition | Props | Default | +|---------------------|-------------------|-----------------------------------------------------------|-----------------------------------------------| | `node-${node.type}` | MiniMap Node slot | [MiniMapNodeProps](/typedocs/interfaces/MiniMapNodeProps) | [MiniMapNode](/guide/components/minimap-node) |