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;
|