diff --git a/docs/src/guide/composables.md b/docs/src/guide/composables.md index d03fbb3c..1628b848 100644 --- a/docs/src/guide/composables.md +++ b/docs/src/guide/composables.md @@ -1,6 +1,6 @@ # Composables -## [useVueFlow](https://types.vueflow.dev/modules.html#useVueFlow) +## [useVueFlow](/typedocs/functions/useVueFlow.html/) 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](https://types.vueflow.dev/modules.html#useZoomPanHelper) +## [useZoomPanHelper](/typedocs/functions/useZoomPanHelper.html/) The `useZoomPanHelper` utility can be used to access core store functions like getting Elements or using viewpane transforms. @@ -55,7 +55,7 @@ const { fitView } = useZoomPanHelper() ``` -## [useHandle](https://types.vueflow.dev/modules.html#useHandle) +## [useHandle](/typedocs/functions/useHandle.html/) 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/config.md b/docs/src/guide/config.md index 94883d5c..3c35cc52 100644 --- a/docs/src/guide/config.md +++ b/docs/src/guide/config.md @@ -90,7 +90,7 @@ onMounted(() => { ### modelValue -- Type: [`Elements`](https://types.vueflow.dev/modules.html#Elements) +- Type: [`Elements`](/typedocs/types/Elements.html/) - Details: @@ -122,7 +122,7 @@ const elements = ref([ ### nodes -- Type: [`Node[]`](https://types.vueflow.dev/interfaces/Node.html) +- Type: [`Node[]`](/typedocs/interfaces/Node.html/) - Details: @@ -152,7 +152,7 @@ const nodes = ref([ ### edges -- Type: [`Edge[]`](https://types.vueflow.dev/interfaces/Edge.html) +- Type: [`Edge[]`](/typedocs/interfaces/Edge.html/) - Details: @@ -187,9 +187,9 @@ const edges = ref([ ### node-types -- Type: [`Record`](https://types.vueflow.dev/modules.html#NodeComponent) +- Type: [`Record`](/typedocs/types/NodeComponent.html/) -- Default: [`DefaultNodeTypes`](https://types.vueflow.dev/modules.html#DefaultNodeTypes) +- Default: [`DefaultNodeTypes`](/typedocs/types/DefaultNodeTypes.html/) - Details: @@ -224,9 +224,9 @@ const edges = ref([ ### edge-types -- Type: [`Record`](https://types.vueflow.dev/modules.html#EdgeComponent) +- Type: [`Record`](/typedocs/types/EdgeComponent.html) -- Default: [`DefaultEdgeTypes`](https://types.vueflow.dev/modules.html#DefaultEdgeTypes) +- Default: [`DefaultEdgeTypes`](/typedocs/types/DefaultEdgeTypes.html) - Details: @@ -295,7 +295,7 @@ const edges = ref([ ### connection-mode -- Type: [`ConnectionMode`](https://types.vueflow.dev/enums/ConnectionMode.html) +- Type: [`ConnectionMode`](/typedocs/enums/ConnectionMode.html/) - Default: `ConnectionMode.Loose` @@ -305,7 +305,7 @@ const edges = ref([ ### connection-line-type -- Type: [`ConnectionLineType`](https://types.vueflow.dev/enums/ConnectionLineType.html) +- Type: [`ConnectionLineType`](/typedocs/enums/ConnectionLineType.html/) - Default: `ConnectionLineType.Bezier` @@ -397,7 +397,7 @@ const edges = ref([ ### pan-on-scroll-mode -- Type: [`PanOnScrollMode`](https://types.vueflow.dev/enums/PanOnScrollMode.html) +- Type: [`PanOnScrollMode`](/typedocs/enums/PanOnScrollMode.html/) - Default: `PanOnScrollMode.Free` @@ -479,7 +479,7 @@ const edges = ref([ ### translate-extent -- Type: [`CoordinateExtent`](https://types.vueflow.dev/modules.html#CoordinateExtent) +- Type: [`CoordinateExtent`](/typedocs/types/CoordinateExtent.html/) - Default: @@ -589,7 +589,7 @@ const elements = ref([ ### nodes-extent -- Type: [`CoordinateExtent`](https://types.vueflow.dev/modules.html#CoordinateExtent) +- Type: [`CoordinateExtent`](/typedocs/types/CoordinateExtent.html/) - Default: @@ -640,7 +640,7 @@ const elements = ref([ ### snap-grid -- Type: [`SnapGrid`](https://types.vueflow.dev/modules.html#SnapGrid) +- Type: [`SnapGrid`](/typedocs/types/SnapGrid.html) - Default: `[15, 15]` diff --git a/docs/src/guide/edge.md b/docs/src/guide/edge.md index 82f2808f..00b04f11 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](https://types.vueflow.dev/interfaces/Edge.html). +You can check the full options for an edge element in the TypeDocs [here](/typedocs/interfaces/Edge.html/). ## Usage @@ -352,4 +352,4 @@ your edges receive the following props: | markerEnd | Edge marker | string | true | | curvature | Edge path curvature | number | true | -You can find the TypeDocs [here](https://types.vueflow.dev/interfaces/EdgeProps.html). +You can find the full description [here](/typedocs/interfaces/EdgeProps.html/). diff --git a/docs/src/guide/getting-started.md b/docs/src/guide/getting-started.md index b8e0a3a7..b3df3a48 100644 --- a/docs/src/guide/getting-started.md +++ b/docs/src/guide/getting-started.md @@ -28,13 +28,13 @@ npm i --save @braks/vue-flow ## Usage -A flow consists of [nodes](https://types.vueflow.dev/interfaces/Node.html) -and (optionally) [edges](https://types.vueflow.dev/interfaces/Edge.html). +A flow consists of [nodes](/typedocs/interfaces/Node.html/) +and (optionally) [edges](/typedocs/interfaces/Edge.html). Together we call them -[elements](https://types.vueflow.dev/modules.html#Elements). +[elements](/typedocs/types/Elements.html/). Each element needs a unique id. -A node also needs a [xy-position](https://types.vueflow.dev/interfaces/XYPosition.html). An edge needs at least a +A node also needs a [xy-position](typedocs/interfaces/XYPosition.html). An edge needs at least a source (node id) and a target (node id). ```vue:no-line-numbers @@ -97,4 +97,4 @@ Vue Flow is fully written in [TypeScript](https://www.typescriptlang.org/), so i avoid common mistakes. The types are included in the library. -[You can find the TypeDocs here](https://types.vueflow.dev/). +[You can find the TypeDocs here](/typedocs/). diff --git a/docs/src/guide/node.md b/docs/src/guide/node.md index 2ecf40f4..a358b3d3 100644 --- a/docs/src/guide/node.md +++ b/docs/src/guide/node.md @@ -5,10 +5,10 @@ Nodes are the building blocks of your graph. They represent any sort of data you They can exist on their own but can be connected to each other with edges to create a map. Each node requires a unique id and -a [xy-position](https://types.vueflow.dev/interfaces/XYPosition.html). +a [xy-position](/typedocs/interfaces/XYPosition.html/). Anything else is optional. -You can check the full options for a node element in the TypeDocs [here](https://types.vueflow.dev/interfaces/Node.html). +You can check the full options for a node element [here](/typedocs/interfaces/Node.html/). ## Usage @@ -332,7 +332,7 @@ your nodes receive the following props: | dragHandle | Node drag handle class | string | true | -You can find the TypeDocs [here](https://types.vueflow.dev/interfaces/NodeProps.html). +You can find the full description [here](/typedocs/interfaces/NodeProps.html/). ## Styling diff --git a/docs/src/guide/utils/edge.md b/docs/src/guide/utils/edge.md index 2fd8844d..be491763 100644 --- a/docs/src/guide/utils/edge.md +++ b/docs/src/guide/utils/edge.md @@ -25,37 +25,37 @@ create a bezier path. This can be helpful if you don't want to actually change the way the path is calculated but just want to implement some custom logic on top of the regular edge behavior. -### [getBezierPath](https://types.vueflow.dev/modules.html#getBezierPath) +### [getBezierPath](/typedocs/functions/getBezierPath.html/) - Details: Returns a bezier path. -### [getBezierCenter](https://types.vueflow.dev/modules.html#getBezierPath) +### [getBezierCenter](/typedocs/functions/getBezierCenter.html/) - Details: Returns a bezier path's center x and y values. -### [getSimpleBezierPath](https://types.vueflow.dev/modules.html#getBezierPath) +### [getSimpleBezierPath](/typedocs/functions/getSimpleBezierPath.html/) - Details: Returns a simple bezier path (no curvature at handles). -### [getSimpleBezierCenter](https://types.vueflow.dev/modules.html#getBezierPath) +### [getSimpleBezierCenter](/typedocs/functions/getSimpleBezierCenter.html/) - Details: Returns a simple bezier path's center x and y values. -### [getSmoothStepPath](https://types.vueflow.dev/modules.html#getSmoothStepPath) +### [getSmoothStepPath](/typedocs/functions/getSmoothStepPath.html/) - Details: Returns a smoothstep path (use border-radius 0 for a step path). -### [getEdgeCenter](https://types.vueflow.dev/modules.html#getEdgeCenter) +### [getEdgeCenter](/typedocs/functions/getEdgeCenter.html/) - Details: diff --git a/docs/src/guide/utils/instance.md b/docs/src/guide/utils/instance.md index cdebc7c3..269596e2 100644 --- a/docs/src/guide/utils/instance.md +++ b/docs/src/guide/utils/instance.md @@ -48,7 +48,7 @@ export default defineComponent({ -### [project](https://types.vueflow.dev/modules.html#Project) +### [project](/typedocs/types/Project.html/) - Details: @@ -62,7 +62,7 @@ export default defineComponent({ vueFlowInstance.project({ x: 100, y: 100 }) ``` -### [fitView](https://types.vueflow.dev/modules.html#FitView) +### [fitView](/typedocs/types/FitView.html/) - Details: @@ -76,7 +76,7 @@ vueFlowInstance.project({ x: 100, y: 100 }) vueFlowInstance.fitView({ padding: 0.25, includeHiddenNodes: true }) ``` -### [fitBounds](https://types.vueflow.dev/modules.html#FitBounds) +### [fitBounds](/typedocs/types/FitBounds.html/) - Details: @@ -88,7 +88,7 @@ vueFlowInstance.fitView({ padding: 0.25, includeHiddenNodes: true }) vueFlowInstance.fitBounds(getRectOfNodes(nodes.value)) ``` -### [setTransform](https://types.vueflow.dev/modules.html#SetTransform) +### [setTransform](/typedocs/types/SetTransform.html/) - Details: @@ -100,26 +100,26 @@ vueFlowInstance.fitBounds(getRectOfNodes(nodes.value)) vueFlowInstance.setTransform({ x: 100, y: 100, zoom: 1.5 }) ``` -### [getTransform](https://types.vueflow.dev/modules.html#GetTransform) +### [getTransform](/typedocs/types/GetTransform.html/) - Details: Gets position and zoom of the pane. -### [zoomIn](https://types.vueflow.dev/modules.html#ZoomInOut) +### [zoomIn](/typedocs/types/ZoomInOut.html/) - Details: Zooms in. -### [zoomOut](https://types.vueflow.dev/modules.html#ZoomInOut) +### [zoomOut](/typedocs/types/ZoomInOut.html/) - Details: Zooms out. -### [zoomTo](https://types.vueflow.dev/modules.html#ZoomTo) +### [zoomTo](/typedocs/types/ZoomTo.html/) - Details: