44 lines
1.1 KiB
TypeScript
44 lines
1.1 KiB
TypeScript
/**
|
|
* Example for checking the different edge types and source and target positions
|
|
*/
|
|
import RevueFlow, {
|
|
removeElements,
|
|
addEdge,
|
|
MiniMap,
|
|
Controls,
|
|
Background,
|
|
OnLoadParams,
|
|
Connection,
|
|
Edge,
|
|
Elements
|
|
} from '../../src'
|
|
import { getElements } from './utils'
|
|
import { defineComponent, ref } from 'vue'
|
|
|
|
const onLoad = (reactFlowInstance: OnLoadParams) => {
|
|
reactFlowInstance.fitView()
|
|
console.log(reactFlowInstance.getElements())
|
|
}
|
|
|
|
const initialElements = getElements()
|
|
|
|
const EdgeTypesFlow = defineComponent({
|
|
setup() {
|
|
const elements = ref<Elements>(initialElements)
|
|
const onElementsRemove = (elementsToRemove: Elements) => (elements.value = removeElements(elementsToRemove, elements.value))
|
|
const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value))
|
|
|
|
return () => (
|
|
<RevueFlow
|
|
v-model={elements.value}
|
|
onLoad={onLoad}
|
|
onElementsRemove={onElementsRemove}
|
|
onConnect={onConnect}
|
|
minZoom={0.2}
|
|
></RevueFlow>
|
|
)
|
|
}
|
|
})
|
|
|
|
export default EdgeTypesFlow
|