From d077d41d71c961713d97a3f9fafeac38698780a6 Mon Sep 17 00:00:00 2001 From: braks <78412429+bcakmakoglu@users.noreply.github.com> Date: Mon, 1 Aug 2022 17:16:29 +0200 Subject: [PATCH] docs: update links and headlines --- docs/src/.vitepress/config.ts | 2 +- docs/src/guide/components/controls.md | 12 ++++++------ docs/src/guide/getting-started.md | 5 +++++ docs/src/guide/theming.md | 1 + docs/src/guide/utils/graph.md | 22 +++++++++++----------- docs/src/guide/utils/instance.md | 24 ++++++++++++------------ docs/src/guide/vue-flow/config.md | 4 +++- docs/src/guide/vue-flow/slots.md | 2 ++ docs/src/guide/vue-flow/state.md | 2 ++ 9 files changed, 43 insertions(+), 31 deletions(-) diff --git a/docs/src/.vitepress/config.ts b/docs/src/.vitepress/config.ts index 84e9e9fd..b03fc706 100644 --- a/docs/src/.vitepress/config.ts +++ b/docs/src/.vitepress/config.ts @@ -122,7 +122,7 @@ export default defineConfigWithTheme({ text: 'Vue Flow', collapsible: true, items: [ - { text: 'Config / Props', link: '/guide/vue-flow/config' }, + { text: 'Configuration', link: '/guide/vue-flow/config' }, { text: 'State', link: '/guide/vue-flow/state' }, { text: 'Actions', diff --git a/docs/src/guide/components/controls.md b/docs/src/guide/components/controls.md index e993e08b..6fea2be2 100644 --- a/docs/src/guide/components/controls.md +++ b/docs/src/guide/components/controls.md @@ -16,12 +16,12 @@ To use the controls simply pass the `Controls` component as a child to the `VueF ## [Props](/typedocs/interfaces/ControlProps) -| Name | Definition | Type | Optional | Default | -|-----------------|---------------------------|------------------------------------------------------|----------|---------| -| showZoom | Show zoom btn | boolean | true | true | -| showFitView | Show fit-view btn | boolean | true | true | -| showInteractive | Show lock interactive btn | boolean | true | true | -| showZoom | Show zoom button | boolean | true | true | +| Name | Definition | Type | Optional | Default | +|-----------------|---------------------------|------------------------------------------------|----------|---------| +| showZoom | Show zoom btn | boolean | true | true | +| 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) | true | - | ## Emits diff --git a/docs/src/guide/getting-started.md b/docs/src/guide/getting-started.md index 6ae4182c..1418ccdf 100644 --- a/docs/src/guide/getting-started.md +++ b/docs/src/guide/getting-started.md @@ -55,6 +55,11 @@ const elements = ref([ ``` +::: warning Necessary styles +Make sure you include the necessary styles. +See the [Theming](/guide/theming) section for more info. +::: + ## TypeScript Vue Flow is fully written in [TypeScript](https://www.typescriptlang.org/), so it is highly recommended to use TypeScript to have the best possible DX and diff --git a/docs/src/guide/theming.md b/docs/src/guide/theming.md index 71715560..5078ec35 100644 --- a/docs/src/guide/theming.md +++ b/docs/src/guide/theming.md @@ -1,5 +1,6 @@ # Theming +## Library styles VueFlow comes without any pre-injected stylings. Some necessary stylings have to be imported, though optional styles (i.e. the default theme) can be skipped. diff --git a/docs/src/guide/utils/graph.md b/docs/src/guide/utils/graph.md index 6d7b502c..38bce279 100644 --- a/docs/src/guide/utils/graph.md +++ b/docs/src/guide/utils/graph.md @@ -1,6 +1,6 @@ # Graph -### [isEdge](/typedocs/functions/isEdge) +## [isEdge](/typedocs/functions/isEdge) - Details: @@ -34,7 +34,7 @@ const toggleClass = () => { ``` -### [isNode](/typedocs/functions/isNode) +## [isNode](/typedocs/functions/isNode) - Details: @@ -68,7 +68,7 @@ const toggleClass = () => { ``` -### [addEdge](/typedocs/functions/isEdge) +## [addEdge](/typedocs/functions/isEdge) ::: warning In the composition API you should use [`addEdges`](/typedocs/types/AddEdges) @@ -101,7 +101,7 @@ const onConnect = (params) => { ``` -### [updateEdge](/typedocs/functions/updateEdge) +## [updateEdge](/typedocs/functions/updateEdge) ::: warning In the composition API you use access [`updateEdge`](/typedocs/types/UpdateEdge) @@ -134,31 +134,31 @@ const onEdgeUpdate = ({ edge, connection }) => { ``` -### [getOutgoers](/typedocs/functions/getOutgoers) +## [getOutgoers](/typedocs/functions/getOutgoers) - Details: Returns all target elements of a node. -### [getIncomers](/typedocs/functions/getIncomers) +## [getIncomers](/typedocs/functions/getIncomers) - Details: Returns all source elements of a node. -### [getConnectedEdges](/typedocs/functions/getConnectedEdges) +## [getConnectedEdges](/typedocs/functions/getConnectedEdges) - Details: Returns all connected edges of a node. -### [getTransformForBounds](/typedocs/functions/getTransformForBounds) +## [getTransformForBounds](/typedocs/functions/getTransformForBounds) - Details: Returns a transformation for the viewport according to input bounds. -### [getRectOfNodes](/typedocs/functions/getRectOfNodes) +## [getRectOfNodes](/typedocs/functions/getRectOfNodes) - Details: @@ -166,13 +166,13 @@ const onEdgeUpdate = ({ edge, connection }) => { Useful when you need to know the boundaries of a set of nodes. -### [getNodesInside](/typedocs/functions/getNodesInside) +## [getNodesInside](/typedocs/functions/getNodesInside) - Details: Returns node elements that are inside a specified rect. -### [getMarkerId](/typedocs/functions/getMarkerId) +## [getMarkerId](/typedocs/functions/getMarkerId) - Details: diff --git a/docs/src/guide/utils/instance.md b/docs/src/guide/utils/instance.md index 84be0ca2..ad63b773 100644 --- a/docs/src/guide/utils/instance.md +++ b/docs/src/guide/utils/instance.md @@ -47,7 +47,7 @@ export default defineComponent({ ``` -### [project](/typedocs/types/Project) +## [project](/typedocs/types/Project) - Details: @@ -61,7 +61,7 @@ export default defineComponent({ vueFlowInstance.project({ x: 100, y: 100 }) ``` -### [fitView](/typedocs/types/FitView) +## [fitView](/typedocs/types/FitView) - Details: @@ -75,7 +75,7 @@ vueFlowInstance.project({ x: 100, y: 100 }) vueFlowInstance.fitView({ padding: 0.25, includeHiddenNodes: true }) ``` -### [fitBounds](/typedocs/types/FitBounds) +## [fitBounds](/typedocs/types/FitBounds) - Details: @@ -87,7 +87,7 @@ vueFlowInstance.fitView({ padding: 0.25, includeHiddenNodes: true }) vueFlowInstance.fitBounds(getRectOfNodes(nodes.value)) ``` -### [setTransform](/typedocs/types/SetTransform) +## [setTransform](/typedocs/types/SetTransform) - Details: @@ -99,49 +99,49 @@ vueFlowInstance.fitBounds(getRectOfNodes(nodes.value)) vueFlowInstance.setTransform({ x: 100, y: 100, zoom: 1.5 }) ``` -### [getTransform](/typedocs/types/GetTransform) +## [getTransform](/typedocs/types/GetTransform) - Details: Gets position and zoom of the pane. -### [zoomIn](/typedocs/types/ZoomInOut) +## [zoomIn](/typedocs/types/ZoomInOut) - Details: Zooms in. -### [zoomOut](/typedocs/types/ZoomInOut) +## [zoomOut](/typedocs/types/ZoomInOut) - Details: Zooms out. -### [zoomTo](/typedocs/types/ZoomTo) +## [zoomTo](/typedocs/types/ZoomTo) - Details: Zooms to specific level. -### [getElements](/typedocs/interfaces/Getters#getelements) +## [getElements](/typedocs/interfaces/Getters#getelements) - Details: Returns currently stored elements (nodes + edges). -### [getNodes](/typedocs/interfaces/Getters#getnodes) +## [getNodes](/typedocs/interfaces/Getters#getnodes) - Details: Returns currently stored nodes. -### [getEdges](/typedocs/interfaces/Getters#getedges) +## [getEdges](/typedocs/interfaces/Getters#getedges) - Details: Returns currently stored edges. -### [toObject](/typedocs/interfaces/Actions#toobject) +## [toObject](/typedocs/interfaces/Actions#toobject) - Details: diff --git a/docs/src/guide/vue-flow/config.md b/docs/src/guide/vue-flow/config.md index bbedf06e..00c38998 100644 --- a/docs/src/guide/vue-flow/config.md +++ b/docs/src/guide/vue-flow/config.md @@ -1,4 +1,6 @@ -# Config (Props) +# Configuration + +## Options / Props Vue Flow allows you to configure zoom, graph and flow behavior. Configuration can be passed either as props to the `VueFlow` component or diff --git a/docs/src/guide/vue-flow/slots.md b/docs/src/guide/vue-flow/slots.md index 9a9894c7..40b83f60 100644 --- a/docs/src/guide/vue-flow/slots.md +++ b/docs/src/guide/vue-flow/slots.md @@ -1,5 +1,7 @@ # Slots +## + Vue Flow provides several slots for customization. In addition to the node and edge slots (see the guide on [nodes](/guide/node) and [edges](/guide/edge)), there are a number of other slots you can use to customize the visualization. diff --git a/docs/src/guide/vue-flow/state.md b/docs/src/guide/vue-flow/state.md index 7aa1c80c..a9607fce 100644 --- a/docs/src/guide/vue-flow/state.md +++ b/docs/src/guide/vue-flow/state.md @@ -1,5 +1,7 @@ # State +## + Under the hood Vue Flow uses [Provide/Inject](https://v3.vuejs.org/guide/component-provide-inject) to pass around it's state between components. You can access the internal state through the [`useVueFlow`](/guide/composables#usevueflow/) composable.