From 1ad66be474f8f4256401fa2947aeb300f7085698 Mon Sep 17 00:00:00 2001 From: Braks <78412429+bcakmakoglu@users.noreply.github.com> Date: Mon, 4 Apr 2022 21:36:37 +0200 Subject: [PATCH] docs: Add examples --- docs/src/.vuepress/config.ts | 18 ++++++++++++++++- docs/src/examples/connectionline.md | 25 ++++++++++++++++++++++++ docs/src/examples/custom-node.md | 28 +++++++++++++++++++++++++++ docs/src/examples/dnd.md | 29 ++++++++++++++++++++++++++++ docs/src/examples/edges.md | 24 +++++++++++++++++++++++ docs/src/examples/empty.md | 23 ++++++++++++++++++++++ docs/src/examples/hidden.md | 28 +++++++++++++++++++++++++++ docs/src/examples/index.md | 4 ++-- docs/src/examples/interaction.md | 22 +++++++++++++++++++++ docs/src/examples/multi.md | 25 ++++++++++++++++++++++++ docs/src/examples/nesting.md | 27 ++++++++++++++++++++++++++ docs/src/examples/save.md | 30 +++++++++++++++++++++++++++++ docs/src/examples/stress.md | 23 ++++++++++++++++++++++ docs/src/examples/updatable-edge.md | 26 +++++++++++++++++++++++++ docs/src/examples/update-node.md | 23 ++++++++++++++++++++++ docs/src/examples/validation.md | 24 +++++++++++++++++++++++ 16 files changed, 376 insertions(+), 3 deletions(-) create mode 100644 docs/src/examples/connectionline.md create mode 100644 docs/src/examples/custom-node.md create mode 100644 docs/src/examples/dnd.md create mode 100644 docs/src/examples/edges.md create mode 100644 docs/src/examples/empty.md create mode 100644 docs/src/examples/hidden.md create mode 100644 docs/src/examples/interaction.md create mode 100644 docs/src/examples/multi.md create mode 100644 docs/src/examples/nesting.md create mode 100644 docs/src/examples/save.md create mode 100644 docs/src/examples/stress.md create mode 100644 docs/src/examples/updatable-edge.md create mode 100644 docs/src/examples/update-node.md create mode 100644 docs/src/examples/validation.md diff --git a/docs/src/.vuepress/config.ts b/docs/src/.vuepress/config.ts index b0e0e57b..57e0fb3a 100644 --- a/docs/src/.vuepress/config.ts +++ b/docs/src/.vuepress/config.ts @@ -88,7 +88,23 @@ export default defineUserConfig({ '/examples/': [ { text: 'Examples', - children: ['/examples/'], + children: [ + '/examples/', + '/examples/custom-node', + '/examples/edges', + '/examples/nesting', + '/examples/connectionline', + '/examples/updatable-edge', + '/examples/update-node', + '/examples/validation', + '/examples/save', + '/examples/dnd', + '/examples/empty', + '/examples/hidden', + '/examples/interaction', + '/examples/multi', + '/examples/stress', + ], }, ], }, diff --git a/docs/src/examples/connectionline.md b/docs/src/examples/connectionline.md new file mode 100644 index 00000000..66adea80 --- /dev/null +++ b/docs/src/examples/connectionline.md @@ -0,0 +1,25 @@ +--- +pageClass: examples + +--- + +# Custom Connection Line + +This example shows how you can implement a custom connection line. + +Pass the connection line component into the template slot of the `VueFlow` component. + +
+ + +
diff --git a/docs/src/examples/custom-node.md b/docs/src/examples/custom-node.md new file mode 100644 index 00000000..653e4b40 --- /dev/null +++ b/docs/src/examples/custom-node.md @@ -0,0 +1,28 @@ +--- +pageClass: examples + +--- + +# Custom Node + +One of the key features is implementing custom elements (nodes / edges) that allow you to handle any logic you want inside your nodes. + +You can display any content and functionality inside a custom node. More documentation about how to set +up a custom node can be found on the [custom nodes page](/guide/node.html#custom-nodes/). + +This example shows a basic implementation of a custom node. + +
+ + +
diff --git a/docs/src/examples/dnd.md b/docs/src/examples/dnd.md new file mode 100644 index 00000000..3afd0e70 --- /dev/null +++ b/docs/src/examples/dnd.md @@ -0,0 +1,29 @@ +--- +pageClass: examples + +--- + +# Drag & Drop + +Drag and Drop Sidebar handling is not built in but can be implemented with the native HTML Drag and Drop API, as this +example shows. + +## State access + +This example shows another key feature of Vue Flow. You can initialize the Flow state at any point before the Vue Flow +is actually mounted. This can be achieved by using the [`useVueFlow`](/guide/composables.html#usevueflow) composable. + +
+ + +
diff --git a/docs/src/examples/edges.md b/docs/src/examples/edges.md new file mode 100644 index 00000000..3066d55a --- /dev/null +++ b/docs/src/examples/edges.md @@ -0,0 +1,24 @@ +--- +pageClass: examples + +--- + +# Edges + +Vue Flow comes with pre-defined edge types - bezier-, step-, smoothstep and straight-edges. In addition to the default +edge types you can create your own custom edges. You can find more information on edge types [here](/guide/edge.html#default-edge-types). + +
+ + +
diff --git a/docs/src/examples/empty.md b/docs/src/examples/empty.md new file mode 100644 index 00000000..6988c4ce --- /dev/null +++ b/docs/src/examples/empty.md @@ -0,0 +1,23 @@ +--- +pageClass: examples + +--- + +# Empty + +You can add elements to your modelValue or push them to the state using the [graph utilities](/guide/utilities/graph). + +
+ + +
diff --git a/docs/src/examples/hidden.md b/docs/src/examples/hidden.md new file mode 100644 index 00000000..67958561 --- /dev/null +++ b/docs/src/examples/hidden.md @@ -0,0 +1,28 @@ +--- +pageClass: examples + +--- + +# Hidden + +You can toggle the visibility of nodes by simply setting their `hidden` attribute to either `true` or `false`. + +Edges that are connected to a hidden node will also be hidden as to not show any edges that lead nowhere. + +If you set the `onlyRenderVisibleElements` prop to `true`, hidden elements will not be rendered at all instead of just hiding them with +css. This behavior is disabled by default, meaning all elements are rendered whether they are hidden or not. + +
+ + +
diff --git a/docs/src/examples/index.md b/docs/src/examples/index.md index daae1c30..c4908ee9 100644 --- a/docs/src/examples/index.md +++ b/docs/src/examples/index.md @@ -1,9 +1,9 @@ --- -title: Basic Example pageClass: examples + --- -# Basic Example +# Basic This is a basic example to help you quickly get started building your own graphs. On the bottom left you see the Controls and on the bottom right the MiniMap component. You can see different node types (input, default, output), edge diff --git a/docs/src/examples/interaction.md b/docs/src/examples/interaction.md new file mode 100644 index 00000000..9296a807 --- /dev/null +++ b/docs/src/examples/interaction.md @@ -0,0 +1,22 @@ +--- +pageClass: examples + +--- +# Interaction + +This is an example showing the different interaction options Vue Flow provides. + +
+ + +
diff --git a/docs/src/examples/multi.md b/docs/src/examples/multi.md new file mode 100644 index 00000000..86b9a831 --- /dev/null +++ b/docs/src/examples/multi.md @@ -0,0 +1,25 @@ +--- +pageClass: examples + +--- + +# Multi Flows + +Vue Flow is not limited to a single instance on a page. + +You can use as many component instances as you like. + +
+ + +
diff --git a/docs/src/examples/nesting.md b/docs/src/examples/nesting.md new file mode 100644 index 00000000..c1ef8775 --- /dev/null +++ b/docs/src/examples/nesting.md @@ -0,0 +1,27 @@ +--- +pageClass: examples + +--- + +# Nested Nodes + +One of the big new features in 0.4.0 is nested nodes. + +You can define parents of a node, which are then nested inside that node. +You can also define the boundaries of a node, i.e. if the node can be dragged outside it's parent or if it's contained to the parent +or even let Vue Flow extend the area of a node to fit all it's children. + +
+ + +
diff --git a/docs/src/examples/save.md b/docs/src/examples/save.md new file mode 100644 index 00000000..f1bc5f89 --- /dev/null +++ b/docs/src/examples/save.md @@ -0,0 +1,30 @@ +--- +pageClass: examples + +--- + +# Save & Restore + +::: warning BREAKING CHANGE +__Changes from 0.3.x to 0.4.x__ +The "built-in" storage feature has been fully removed. +::: + +Storing nodes and loading is easy to handle. +This example demonstrates a save & restore functionality using the `LocalStorage` of the browser. +You are of course free to implement your own logic (for example fetching the data from an API that's connected to a database). + +
+ + +
diff --git a/docs/src/examples/stress.md b/docs/src/examples/stress.md new file mode 100644 index 00000000..0a29e402 --- /dev/null +++ b/docs/src/examples/stress.md @@ -0,0 +1,23 @@ +--- +pageClass: examples + +--- + +# Stress + +Vue Flow is built to be fast and tries to minimize re-renders so that your application can stay smooth as possible. + +
+ + +
diff --git a/docs/src/examples/updatable-edge.md b/docs/src/examples/updatable-edge.md new file mode 100644 index 00000000..875d2ee5 --- /dev/null +++ b/docs/src/examples/updatable-edge.md @@ -0,0 +1,26 @@ +--- +pageClass: examples + +--- + +# Updatable Edge + +You can enable updating edges either globally by passing the `edgesUpdatable` prop or you can enable it +for specific edges by using the `updatable` attribute. + +Edges can be updated by simply dragging them from one node to another at the edge-anchor. + +
+ + +
diff --git a/docs/src/examples/update-node.md b/docs/src/examples/update-node.md new file mode 100644 index 00000000..925a5185 --- /dev/null +++ b/docs/src/examples/update-node.md @@ -0,0 +1,23 @@ +--- +pageClass: examples + +--- + +# Update Node + +Updating internal node data is easy. Just manipulate your node and the changes will be reflected in the graph. + +
+ + +
diff --git a/docs/src/examples/validation.md b/docs/src/examples/validation.md new file mode 100644 index 00000000..49156d65 --- /dev/null +++ b/docs/src/examples/validation.md @@ -0,0 +1,24 @@ +--- +pageClass: examples + +--- + +# Connection Validation + +Connections can be validated before edges are created and nodes get connected. This example shows how to use validators +for handles so only connections that have been validated are created. + +
+ + +