alighasami/vue-flow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(flow!): Change transform to viewport

Browse Source 
* Change array type to object type and rename transform type to viewport
* Update examples & docs
This commit is contained in:
Braks
2022-04-11 11:30:10 +02:00
parent 47f5a761a1
commit fcdbc21d34
29 changed files with 255 additions and 633 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/src/guide/config.md
+4 -4
View File
@@ -331,9 +331,9 @@ const edges = ref([
- Details:
Trigger fit view when transformation-pane is mounted.
Trigger fit view when viewport is mounted.
## Zoom & Pan Options
## Viewport Options
### zoom-activation-key-code <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
@@ -475,7 +475,7 @@ const edges = ref([
- Details:
Default zoom pane position on initial load.
Default viewport position on initial load.
### translate-extent <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
@@ -492,7 +492,7 @@ const edges = ref([
- Details:
The area in which the zoom pane can be moved around.
The area in which the viewport can be moved around.
## Selection Pane Options
docs/src/guide/index.md
+1 -1
View File
@@ -5,7 +5,7 @@ title: Introduction
# Introduction
Vue Flow is a library for building node-based applications. These can be simple static diagrams or complex node-based
editors. You can implement custom nodes and edges. It also comes with components like a mini-map, zoom pane controls and
editors. You can implement custom nodes and edges. It also comes with components like a mini-map, viewport controls and
a background.
Check out the [examples](/examples/) if you want to dive directly into the code.
docs/src/guide/utilities.md
-349
View File
@@ -1,349 +0,0 @@
# Utilities
Vue Flow comes with built-in utilities to control the zoom-pane, state and more.
## Graph Utilities
### isEdge
- Details:
Confirms if an element is an edge.
- Example:
```vue:no-line-numbers{13}
<script setup>
import { VueFlow, isEdge } from '@braks/vue-flow'
const elements = ref([
{ id: '1', label: 'Node 1', position: { x: 250, y: 5 }, },
{ id: '2', label: 'Node 2', position: { x: 100, y: 100 }, },
{ id: 'e1-2', source: '1', target: '2', class: 'light' },
])
const toggleClass = () => {
elements.value.forEach((el) => {
if (isEdge(el)) {
el.class = el.class === 'light' ? 'dark' : 'light'
}
})
}
</script>
<template>
<VueFlow v-model="elements">
<button style="position: absolute; top: 10px; right: 10px;" @click="toggleClass">Toggle classes</button>
</VueFlow>
</template>
```
### isNode
- Details:
Confirms if an element is a node.
- Example:
```vue:no-line-numbers{13}
<script setup>
import { VueFlow, isNode } from '@braks/vue-flow'
const elements = ref([
{ id: '1', label: 'Node 1', position: { x: 250, y: 5 }, class: 'light' },
{ id: '2', label: 'Node 2', position: { x: 100, y: 100 }, class: 'light' },
{ id: 'e1-2', source: '1', target: '2' },
])
const toggleClass = () => {
elements.value.forEach((el) => {
if (isNode(el)) {
el.class = el.class === 'light' ? 'dark' : 'light'
}
})
}
</script>
<template>
<VueFlow v-model="elements">
<button style="position: absolute; top: 10px; right: 10px;" @click="toggleClass">Toggle classes</button>
</VueFlow>
</template>
```
### addEdge
::: warning
When using composition you should access `addEdges` from `useVueFlow`
:::
- Details:
Confirms if an element is a node.
- Example:
```vue:no-line-numbers{12}
<script setup>
import { VueFlow, addEdge } from '@braks/vue-flow'
const elements = ref([
{ id: '1', label: 'Node 1', position: { x: 250, y: 5 }, class: 'light' },
{ id: '2', label: 'Node 2', position: { x: 100, y: 100 }, class: 'light' },
{ id: 'e1-2', source: '1', target: '2' },
])
const onConnect = (params) => {
addEdge(params, elements.value)
}
</script>
<template>
<VueFlow v-model="elements" @connect="onConnect" />
</template>
```
### updateEdge
::: warning
When using composition you should access `updateEdge` from `useVueFlow`
:::
- Details:
Updates an edge and applies new source/target.
- Example:
```vue:no-line-numbers{12}
<script setup>
import { VueFlow, updateEdge } from '@braks/vue-flow'
const elements = ref([
{ id: '1', label: 'Node 1', position: { x: 250, y: 5 }, class: 'light' },
{ id: '2', label: 'Node 2', position: { x: 100, y: 100 }, class: 'light' },
{ id: 'e1-2', source: '1', target: '2' },
])
const onEdgeUpdate = ({ edge, connection }) => {
elements.value = updateEdge(edge, connection, elements.value)
}
</script>
<template>
<VueFlow v-model="elements" @edge-update="onEdgeUpdate" />
</template>
```
### [getOutgoers](https://types.vueflow.dev/modules.html#getOutgoers)
- Details:
Returns all target elements of a node.
### [getIncomers](https://types.vueflow.dev/modules.html#getIncomers)
- Details:
Returns all source elements of a node.
### [getConnectedEdges](https://types.vueflow.dev/modules.html#getConnectedEdges)
- Details:
Returns all connected edges of a node.
### [getTransformForBounds](https://types.vueflow.dev/modules.html#getTransformForBounds)
- Details:
Returns a transformation for the zoom pane according to input bounds.
### [getRectOfNodes](https://types.vueflow.dev/modules.html#getRectOfNodes)
- Details:
Returns a rect of node elements.
Useful when you need to know the boundaries of a set of nodes.
### [getNodesInside](https://types.vueflow.dev/modules.html#getNodesInside)
- Details:
Returns node elements that are inside a specified rect.
### [getMarkerId](https://types.vueflow.dev/modules.html#getMarkerId)
- Details:
Returns a marker id for a marker definition.
## Instance
The Vue Flow instance provides easy access to zoom-pan-helper functions.
It can be accessed either directly from the state using `useVueFlow` or
you can receive the instance with a `onPaneReady` event handler.
<CodeGroup>
<CodeGroupItem title="Composition API" active>
```vue:no-line-numbers
<script setup>
import { VueFlow, useVueFlow } from '@braks/vue-flow'
const { onPaneReady, instance } = useVueFlow()
// event handler
onPaneReady((instance) => instance.fitView())
onMounted(() => {
// or directly try to access the instance
instance.value?.fitView()
})
</script>
```
</CodeGroupItem>
<CodeGroupItem title="Options API">
```vue:no-line-numbers
<script>
import { VueFlow } from '@braks/vue-flow'
export default defineComponent({
components: { VueFlow },
data() {
return {
instance: null,
}
},
methods: {
onPaneReady(vueFlowInstance) {
vueFlowInstance.fitView()
this.instance = vueFlowInstance
}
}
})
</script>
<template>
<VueFlow @pane-ready="onPaneReady" />
</template>
```
</CodeGroupItem>
</CodeGroup>
### [project](https://types.vueflow.dev/modules.html#Project)
- Details:
Transforms pixel coordinates to the internal VueFlow coordinate system.
This can be used when you drag nodes (from a sidebar for example) and need the internal position on the pane.
- Example:
```ts:no-line-numbers
vueFlowInstance.project({ x: 100, y: 100 })
```
### [fitView](https://types.vueflow.dev/modules.html#FitView)
- Details:
Fits the view port so that all nodes are visible.
Padding is 0.1 and includeHiddenNodes is false by default.
- Example:
```ts:no-line-numbers
vueFlowInstance.fitView({ padding: 0.25, includeHiddenNodes: true })
```
### [fitBounds](https://types.vueflow.dev/modules.html#FitBounds)
- Details:
Fits the view port according to the bounds' rect input.
- Example:
```ts:no-line-numbers
vueFlowInstance.fitBounds(getRectOfNodes(nodes.value))
```
### [setTransform](https://types.vueflow.dev/modules.html#SetTransform)
- Details:
Sets position and zoom of the pane.
- Example:
```ts:no-line-numbers
vueFlowInstance.setTransform({ x: 100, y: 100, zoom: 1.5 })
```
### [getTransform](https://types.vueflow.dev/modules.html#GetTransform)
- Details:
Gets position and zoom of the pane.
### [zoomIn](https://types.vueflow.dev/modules.html#ZoomInOut)
- Details:
Zooms in.
### [zoomOut](https://types.vueflow.dev/modules.html#ZoomInOut)
- Details:
Zooms out.
### [zoomTo](https://types.vueflow.dev/modules.html#ZoomTo)
- Details:
Zooms to specific level.
### getElements
- Details:
Returns currently stored elements (nodes + edges).
### getNodes
- Details:
Returns currently stored nodes.
### getEdges
- Details:
Returns currently stored edges.
### toObject
- Details:
Returns elements, position and zoom of the current flow state.
- Example:
```ts:no-line-numbers
toObject = (): {
elements: FlowElements,
position: [x, y],
zoom: scale,
}
```
docs/src/guide/utils/graph.md
+1 -1
View File
@@ -154,7 +154,7 @@ const onEdgeUpdate = ({ edge, connection }) => {
- Details:
Returns a transformation for the zoom pane according to input bounds.
Returns a transformation for the viewport according to input bounds.
### getRectOfNodes