diff --git a/docs/src/guide/components/background.md b/docs/src/guide/components/background.md index 1f8b3236..0d5d4787 100644 --- a/docs/src/guide/components/background.md +++ b/docs/src/guide/components/background.md @@ -14,16 +14,16 @@ To use the background simply pass the `Background` component as a child to the ` ``` -## [Props](/typedocs/interfaces/BackgroundProps.html/) +## [Props](/typedocs/interfaces/BackgroundProps) -| Name | Definition | Type | Optional | Default | -|--------------|-------------------|--------------------------------------------------------------|----------|---------| -| variant | Pattern variant | [BackgroundVariant](/typedocs/enums/BackgroundVariant.html/) | true | dots | -| gap | Pattern gap | number | true | 10 | -| size | Pattern size | number | true | 0.4 | -| patternColor | Pattern color | string | true | #81818a | -| bgColor | Is node dragging | boolean | true | #fff | -| height | Background height | number | true | 100 | -| width | Background width | number | true | 100 | -| x | X-offset | number | true | 0 | -| y | Y-offset | number | true | 0 | +| Name | Definition | Type | Optional | Default | +|--------------|-------------------|--------------------------------------------------------|----------|---------| +| variant | Pattern variant | [BackgroundVariant](/typedocs/enums/BackgroundVariant) | true | dots | +| gap | Pattern gap | number | true | 10 | +| size | Pattern size | number | true | 0.4 | +| patternColor | Pattern color | string | true | #81818a | +| bgColor | Is node dragging | boolean | true | #fff | +| height | Background height | number | true | 100 | +| width | Background width | number | true | 100 | +| x | X-offset | number | true | 0 | +| y | Y-offset | number | true | 0 | diff --git a/docs/src/guide/components/control-button.md b/docs/src/guide/components/control-button.md index 78fd2bb3..76dda004 100644 --- a/docs/src/guide/components/control-button.md +++ b/docs/src/guide/components/control-button.md @@ -4,7 +4,7 @@ You can use the existing `ControlButton` component to create new control buttons ## Usage -To use the component pass the `ControlButton` component as a child to the [`Controls`](/guide/components/control-button.html/) component. +To use the component pass the `ControlButton` component as a child to the [`Controls`](/guide/components/control-button) component. ```vue ``` -## [Props](/typedocs/interfaces/ControlProps.html/) +## [Props](/typedocs/interfaces/ControlProps) | Name | Definition | Type | Optional | Default | |-----------------|---------------------------|------------------------------------------------------|----------|---------| @@ -22,7 +22,7 @@ To use the controls simply pass the `Controls` component as a child to the `VueF | showFitView | Show fit-view btn | boolean | true | true | | showInteractive | Show lock interactive btn | boolean | true | true | | showZoom | Show zoom button | boolean | true | true | -| fitViewParams | Params to use on fit-view | [FitViewParams](/typedocs/types/FitViewParams.html/) | true | - | +| fitViewParams | Params to use on fit-view | [FitViewParams](/typedocs/types/FitViewParams) | true | - | ## Emits diff --git a/docs/src/guide/components/minimap-node.md b/docs/src/guide/components/minimap-node.md index 1ec04bab..737ce96d 100644 --- a/docs/src/guide/components/minimap-node.md +++ b/docs/src/guide/components/minimap-node.md @@ -5,7 +5,7 @@ You can use it to add an icon to your node, or to add a custom tooltip etc. ## Usage -To use the component pass the `MiniMapNode` as a child to the [`MiniMap`](/guide/components/minimap.html/) component. +To use the component pass the `MiniMapNode` as a child to the [`MiniMap`](/guide/components/minimap) component. ```vue ``` -## [Props](/typedocs/interfaces/MiniMapNodeProps.html/) +## [Props](/typedocs/interfaces/MiniMapNodeProps) | Name | Definition | Type | Optional | Default | |----------------|---------------------------------|-----------------------------------------------------|----------|---------| @@ -27,8 +27,8 @@ To use the component pass the `MiniMapNode` as a child to the [`MiniMap`](/guide | parentNode | Parent node id | string | true | - | | selected | Is node selected | boolean | true | false | | dragging | Is node dragging | boolean | true | false | -| position | XY position of node | [XYPosition](/typedocs/interfaces/XYPosition.html/) | false | - | -| dimensions | Node dimensions | [Dimensions](/typedocs/interfaces/Dimensions.html/) | false | - | +| position | XY position of node | [XYPosition](/typedocs/interfaces/XYPosition) | false | - | +| dimensions | Node dimensions | [Dimensions](/typedocs/interfaces/Dimensions) | false | - | | borderRadius | MiniMap node css border-radius | number | true | - | | color | MiniMap node css color | string | true | - | | shapeRendering | MiniMap node css shapeRendering | ShapeRendering | true | - | diff --git a/docs/src/guide/components/minimap.md b/docs/src/guide/components/minimap.md index faec7358..d82cb776 100644 --- a/docs/src/guide/components/minimap.md +++ b/docs/src/guide/components/minimap.md @@ -12,13 +12,13 @@ To use the minimap simply pass the `MiniMap` component as a child to the `VueFlo ``` -## [Props](/typedocs/interfaces/MiniMapProps.html/) +## [Props](/typedocs/interfaces/MiniMapProps) | Name | Definition | Type | Optional | Default | |------------------|--------------------------|------------------------------------------------------------------|----------|-------------------------| -| nodeColor | Node(s) Background color | string, [MiniMapNodeFunc](/typedocs/types/MiniMapNodeFunc.html/) | true | #fff | -| nodeStrokeColor | Border color | string, [MiniMapNodeFunc](/typedocs/types/MiniMapNodeFunc.html/) | true | #555 | -| nodeClassName | Extra classes | string, [MiniMapNodeFunc](/typedocs/types/MiniMapNodeFunc.html/) | true | - | +| 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) | @@ -27,4 +27,4 @@ To use the minimap simply pass the `MiniMap` component as a child to the `VueFlo | Name | Definition | Props | Default | |---------------------|-------------------|-----------------------------------------------------------------|-----------------------------------------------------| -| `node-${node.type}` | MiniMap Node slot | [MiniMapNodeProps](/typedocs/interfaces/MiniMapNodeProps.html/) | [MiniMapNode](/guide/components/minimap-node.html/) | +| `node-${node.type}` | MiniMap Node slot | [MiniMapNodeProps](/typedocs/interfaces/MiniMapNodeProps) | [MiniMapNode](/guide/components/minimap-node) | diff --git a/docs/src/guide/composables.md b/docs/src/guide/composables.md index 094d78ef..b304969b 100644 --- a/docs/src/guide/composables.md +++ b/docs/src/guide/composables.md @@ -1,6 +1,6 @@ # Composables -## [useVueFlow](/typedocs/functions/useVueFlow.html/) +## [useVueFlow](/typedocs/functions/useVueFlow) If you're using the options API of Vue you will soon notice that your access to the state of Vue Flow is limited. @@ -37,7 +37,7 @@ onMounted(() => { `useVueFlow` exposes basically the whole internal state. The values are reactive, meaning changing the state values returned from `useVueFlow` will trigger changes in the graph. -## [useZoomPanHelper](/typedocs/functions/useZoomPanHelper.html/) +## [useZoomPanHelper](/typedocs/functions/useZoomPanHelper) ::: warning [deprecated] All functions of `useZoomPanHelper` are also available in `useVueFlow`. @@ -60,7 +60,7 @@ const { fitView } = useZoomPanHelper() ``` -## [useHandle](/typedocs/functions/useHandle.html/) +## [useHandle](/typedocs/functions/useHandle) Instead of using the Handle component you can use the useHandle composable to create your own custom nodes. `useHandle` provides you with a mouseDown- and click-handler functions that you can apply to the element you want to use as a diff --git a/docs/src/guide/edge.md b/docs/src/guide/edge.md index 3183bb60..cb908973 100644 --- a/docs/src/guide/edge.md +++ b/docs/src/guide/edge.md @@ -7,7 +7,7 @@ They cannot exist on their own and need nodes to which they are connected. Each edge requires a unique id, a source node and a target node id. Anything else is optional. -You can check the full options for an edge element in the TypeDocs [here](/typedocs/interfaces/Edge.html/). +You can check the full options for an edge element in the TypeDocs [here](/typedocs/interfaces/Edge). ## Usage @@ -55,8 +55,8 @@ export default defineComponent({ ``` For more advanced graphs that require more state access you will want to use the useVueFlow composable. -[useVueFlow](/typedocs/functions/useVueFlow.html/) will provide -you with an [`addEdges`](/typedocs/interfaces/Actions.html#addedges/) utility function, which you can use to add edges +[useVueFlow](/typedocs/functions/useVueFlow) will provide +you with an [`addEdges`](/typedocs/interfaces/Actions#addedges/) utility function, which you can use to add edges directly to the state. ```vue @@ -99,10 +99,10 @@ onMounted(() => { ``` You can also apply changes (like removing elements safely) using -the [`applyEdgeChanges`](/typedocs/interfaces/Actions.html#applyedgechanges/) utility function, which expects an array -of [changes](/typedocs/types/EdgeChange.html/) to be applied to the currently stored edges. +the [`applyEdgeChanges`](/typedocs/interfaces/Actions#applyedgechanges/) utility function, which expects an array +of [changes](/typedocs/types/EdgeChange) to be applied to the currently stored edges. -## [Default Edge-Types](/typedocs/types/DefaultEdgeTypes.html/) +## [Default Edge-Types](/typedocs/types/DefaultEdgeTypes) Vue Flow comes with built-in edges that you can use right out of the box. These edge types include `default` (bezier), `step`, `smoothstep` and `straight`. @@ -245,7 +245,7 @@ import { markRaw } from 'vue' import CustomEdge from './CustomEdge.vue' const edgeTypes = { - custom: markRaw(CustomNode), + custom: markRaw(CustomEdge), } const elements = ref([ @@ -318,45 +318,45 @@ const elements = ref([ ``` -### [Custom Edge Props](/typedocs/interfaces/EdgeProps.html/) +### [Custom Edge Props](/typedocs/interfaces/EdgeProps) Your custom edges are wrapped so that the basic functions like selecting work. But you might want to extend on that functionality or implement your own business logic inside of edges, therefore your edges receive the following props: -| Name | Definition | Type | Optional | -|---------------------|-------------------------------|----------------------------------------------------|----------| -| id | Edge id | string | false | -| source | The source node id | string | false | -| target | The target node id | string | false | -| sourceNode | The source node | GraphNode | false | -| targetNode | The target node | GraphNode | false | -| sourceX | X position of source handle | number | false | -| sourceY | Y position of source handle | number | false | -| targetX | X position of target handle | number | false | -| targetY | Y position of target handle | number | false | -| type | Edge type | string | true | -| sourceHandleId | Source handle id | string | true | -| targetHandleId | Target handle id | string | true | -| data | Custom data object | Any object | true | -| events | Edge events and custom events | [EdgeEventsOn](/typedocs/types/EdgeEventsOn.html/) | true | -| label | Edge label | string, Component | true | -| labelStyle | Additional label styles | CSSProperties | true | -| labelShowBg | Enable/Disable label bg | boolean | true | -| labelBgPadding | Edge label bg padding | number | true | -| labelBgBorderRadius | Edge label bg border radius | number | true | -| selected | Is edge selected | boolean | true | -| animated | Is edge animated | boolean | true | -| updatable | Is edge updatable | boolean | true | -| markerStart | Edge marker id | string | true | -| markerEnd | Edge marker id | string | true | -| curvature | Edge path curvature | number | true | +| Name | Definition | Type | Optional | +|---------------------|-------------------------------|----------------------------------------------|----------| +| id | Edge id | string | false | +| source | The source node id | string | false | +| target | The target node id | string | false | +| sourceNode | The source node | GraphNode | false | +| targetNode | The target node | GraphNode | false | +| sourceX | X position of source handle | number | false | +| sourceY | Y position of source handle | number | false | +| targetX | X position of target handle | number | false | +| targetY | Y position of target handle | number | false | +| type | Edge type | string | true | +| sourceHandleId | Source handle id | string | true | +| targetHandleId | Target handle id | string | true | +| data | Custom data object | Any object | true | +| events | Edge events and custom events | [EdgeEventsOn](/typedocs/types/EdgeEventsOn) | true | +| label | Edge label | string, Component | true | +| labelStyle | Additional label styles | CSSProperties | true | +| labelShowBg | Enable/Disable label bg | boolean | true | +| labelBgPadding | Edge label bg padding | number | true | +| labelBgBorderRadius | Edge label bg border radius | number | true | +| selected | Is edge selected | boolean | true | +| animated | Is edge animated | boolean | true | +| updatable | Is edge updatable | boolean | true | +| markerStart | Edge marker id | string | true | +| markerEnd | Edge marker id | string | true | +| curvature | Edge path curvature | number | true | -### [(Custom) Edge Events](/typedocs/interfaces/EdgeEvents.html/) +### (Custom) Edge Events In addition to the event handlers that you can access through [`useVueFlow`](/guide/composables#useVueFlow/) or the Vue Flow component, -you can also pass in event handlers in your initial node definition, or you can access the node events through the `events` prop passed -to your node components. +you can also pass in event handlers in your initial edge definition, or you can access the edge events through the `events` prop passed +to your edge components. ```vue{19-26}