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

refactor: use injected store so we can use a distinct instance not a global one

Browse Source
This commit is contained in:
Braks
2021-07-13 16:13:15 +02:00
parent 8f727a4d93
commit 6c9d88b09d
13 changed files with 327 additions and 217 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/container/EdgeRenderer/index.tsx
+25 -24
View File
@@ -11,10 +11,11 @@ import {
ConnectionLineComponent,
ConnectionMode,
Transform,
OnEdgeUpdateFunc
OnEdgeUpdateFunc,
RevueFlowStore,
HandleType
} from '../../types';
import { computed, CSSProperties, defineComponent, PropType } from 'vue';
import store from '../../store';
import { computed, CSSProperties, defineComponent, inject, PropType } from 'vue';
import MarkerDefinitions from './MarkerDefinitions';
interface EdgeRendererProps {
@@ -313,43 +314,43 @@ const EdgeRenderer = defineComponent({
}
},
setup(props) {
const pinia = store();
const transform = computed(() => pinia.transform);
const store = inject<RevueFlowStore>('store');
const transform = computed(() => store?.transform);
const transformStyle = computed(() => {
return `translate(${transform.value[0]},${transform.value[1]}) scale(${transform.value[2]})`;
return `translate(${transform.value?.[0]},${transform.value?.[1]}) scale(${transform.value?.[2]})`;
});
const renderConnectionLine = computed(() => pinia.connectionNodeId && pinia.connectionHandleType);
const renderConnectionLine = computed(() => store?.connectionNodeId && store?.connectionHandleType);
return () => (
<svg width={pinia.width} height={pinia.height} class="revue-flow__edges">
<MarkerDefinitions color={props.arrowHeadColor || ''} />
<svg width={store?.width} height={store?.height} class="revue-flow__edges">
<MarkerDefinitions color={props.arrowHeadColor as string} />
<g transform={transformStyle.value}>
{pinia.edges.map((edge: Edge) => (
{store?.edges.map((edge: Edge) => (
<EdgeCmp
key={edge.id}
edge={edge}
props={props as any}
nodes={pinia.nodes}
selectedElements={pinia.selectedElements}
elementsSelectable={pinia.elementsSelectable}
transform={pinia.transform}
width={pinia.width}
height={pinia.height}
nodes={store?.nodes}
selectedElements={store?.selectedElements}
elementsSelectable={store?.elementsSelectable}
transform={store?.transform}
width={store?.width}
height={store?.height}
onlyRenderVisibleElements={props.onlyRenderVisibleElements}
/>
))}
{renderConnectionLine.value && (
<ConnectionLine
nodes={pinia.nodes}
connectionNodeId={pinia.connectionNodeId!}
connectionHandleId={pinia.connectionHandleId}
connectionHandleType={pinia.connectionHandleType!}
connectionPositionX={pinia.connectionPosition.x}
connectionPositionY={pinia.connectionPosition.y}
transform={pinia.transform}
nodes={store?.nodes}
connectionNodeId={store?.connectionNodeId as string}
connectionHandleId={store?.connectionHandleId as string}
connectionHandleType={store?.connectionHandleType as HandleType}
connectionPositionX={store?.connectionPosition.x}
connectionPositionY={store?.connectionPosition.y}
transform={store?.transform}
connectionLineStyle={props.connectionLineStyle}
connectionLineType={props.connectionLineType}
isConnectable={pinia.nodesConnectable}
isConnectable={store?.nodesConnectable}
CustomConnectionLineComponent={props.connectionLineComponent}
/>
)}
src/container/FlowRenderer/index.tsx
+26 -6
View File
@@ -1,8 +1,11 @@
import { GraphViewProps } from '../GraphView';
import ZoomPane from '../ZoomPane';
import UserSelection from '../../components/UserSelection';
import { defineComponent, PropType } from 'vue';
import store from '../../store';
import NodesSelection from '../../components/NodesSelection';
import { defineComponent, inject, PropType } from 'vue';
import { RevueFlowStore } from '../../types';
import useGlobalKeyHandler from '../../hooks/useGlobalKeyHandler';
import useKeyPress from '../../hooks/useKeyPress';
type FlowRendererProps = Omit<
GraphViewProps,
@@ -19,7 +22,7 @@ type FlowRendererProps = Omit<
const FlowRenderer = defineComponent({
name: 'FlowRenderer',
components: { UserSelection, ZoomPane },
components: { UserSelection, ZoomPane, NodesSelection },
props: {
onPaneClick: {
type: Function() as PropType<FlowRendererProps['onPaneClick']>,
@@ -153,12 +156,20 @@ const FlowRenderer = defineComponent({
}
},
setup(props, { slots }) {
const pinia = store();
const store = inject<RevueFlowStore>('store');
const selectionKeyPressed = useKeyPress(props.selectionKeyCode);
useGlobalKeyHandler({
onElementsRemove: props.onElementsRemove,
deleteKeyCode: props.deleteKeyCode as string,
multiSelectionKeyCode: props.multiSelectionKeyCode as string
});
const onClick = (event: MouseEvent) => {
props.onPaneClick?.(event);
pinia.unsetNodesSelection();
pinia.resetSelectedElements();
store?.unsetNodesSelection();
store?.resetSelectedElements();
};
const onContextMenu = (event: MouseEvent) => {
@@ -189,6 +200,15 @@ const FlowRenderer = defineComponent({
zoomActivationKeyCode={props.zoomActivationKeyCode}
>
{slots.default ? slots.default() : ''}
<UserSelection selectionKeyPressed={selectionKeyPressed} />
{store?.nodesSelectionActive && (
<NodesSelection
onSelectionDragStart={props.onSelectionDragStart}
onSelectionDrag={props.onSelectionDrag}
onSelectionDragStop={props.onSelectionDragStop}
onSelectionContextMenu={props.onSelectionContextMenu}
/>
)}
<div class="revue-flow__pane" onClick={onClick} onContextmenu={onContextMenu} onWheel={onWheel} />
</ZoomPane>
);
src/container/GraphView/index.tsx
+56 -59
View File
@@ -3,9 +3,8 @@ import NodeRenderer from '../NodeRenderer';
import EdgeRenderer from '../EdgeRenderer';
import { onLoadProject, onLoadGetElements, onLoadToObject } from '../../utils/graph';
import { RevueFlowProps } from '../RevueFlow';
import { NodeTypesType, EdgeTypesType, ConnectionLineType, KeyCode } from '../../types';
import { CSSProperties, defineComponent, onBeforeMount, onMounted, PropType, ref } from 'vue';
import store from '../../store';
import { NodeTypesType, EdgeTypesType, ConnectionLineType, KeyCode, RevueFlowStore } from '../../types';
import { CSSProperties, defineComponent, inject, onBeforeMount, onMounted, PropType, ref } from 'vue';
import useZoomPanHelper from '../../hooks/useZoomPanHelper';
export interface GraphViewProps extends Omit<RevueFlowProps, 'onSelectionChange' | 'elements'> {
@@ -39,102 +38,102 @@ const GraphView = defineComponent({
default: undefined
},
onMove: {
type: Function() as PropType<GraphViewProps['onMove']>,
type: Function as unknown as PropType<GraphViewProps['onMove']>,
required: false,
default: undefined as any
},
onMoveStart: {
type: Function() as PropType<GraphViewProps['onMoveStart']>,
type: Function as unknown as PropType<GraphViewProps['onMoveStart']>,
required: false,
default: undefined as any
},
onMoveEnd: {
type: Function() as PropType<GraphViewProps['onMoveEnd']>,
type: Function as unknown as PropType<GraphViewProps['onMoveEnd']>,
required: false,
default: undefined as any
},
onLoad: {
type: Function() as PropType<GraphViewProps['onLoad']>,
type: Function as unknown as PropType<GraphViewProps['onLoad']>,
required: false,
default: undefined as any
},
onElementClick: {
type: Function() as PropType<GraphViewProps['onElementClick']>,
type: Function as unknown as PropType<GraphViewProps['onElementClick']>,
required: false,
default: undefined as any
},
onNodeDoubleClick: {
type: Function() as PropType<GraphViewProps['onNodeDoubleClick']>,
type: Function as unknown as PropType<GraphViewProps['onNodeDoubleClick']>,
required: false,
default: undefined as any
},
onEdgeDoubleClick: {
type: Function() as PropType<GraphViewProps['onEdgeDoubleClick']>,
type: Function as unknown as PropType<GraphViewProps['onEdgeDoubleClick']>,
required: false,
default: undefined as any
},
onNodeMouseEnter: {
type: Function() as PropType<GraphViewProps['onNodeMouseEnter']>,
type: Function as unknown as PropType<GraphViewProps['onNodeMouseEnter']>,
required: false,
default: undefined as any
},
onNodeMouseMove: {
type: Function() as PropType<GraphViewProps['onNodeMouseMove']>,
type: Function as unknown as PropType<GraphViewProps['onNodeMouseMove']>,
required: false,
default: undefined as any
},
onNodeMouseLeave: {
type: Function() as PropType<GraphViewProps['onNodeMouseLeave']>,
type: Function as unknown as PropType<GraphViewProps['onNodeMouseLeave']>,
required: false,
default: undefined as any
},
onNodeContextMenu: {
type: Function() as PropType<GraphViewProps['onNodeContextMenu']>,
type: Function as unknown as PropType<GraphViewProps['onNodeContextMenu']>,
required: false,
default: undefined as any
},
onNodeDragStart: {
type: Function() as PropType<GraphViewProps['onNodeDragStart']>,
type: Function as unknown as PropType<GraphViewProps['onNodeDragStart']>,
required: false,
default: undefined as any
},
onNodeDrag: {
type: Function() as PropType<GraphViewProps['onNodeDrag']>,
type: Function as unknown as PropType<GraphViewProps['onNodeDrag']>,
required: false,
default: undefined as any
},
onNodeDragStop: {
type: Function() as PropType<GraphViewProps['onNodeDragStop']>,
type: Function as unknown as PropType<GraphViewProps['onNodeDragStop']>,
required: false,
default: undefined as any
},
onSelectionContextMenu: {
type: Function() as PropType<GraphViewProps['onSelectionContextMenu']>,
type: Function as unknown as PropType<GraphViewProps['onSelectionContextMenu']>,
required: false,
default: undefined as any
},
onElementsRemove: {
type: Function() as PropType<GraphViewProps['onElementsRemove']>,
type: Function as unknown as PropType<GraphViewProps['onElementsRemove']>,
required: false,
default: undefined as any
},
onConnect: {
type: Function() as PropType<GraphViewProps['onConnect']>,
type: Function as unknown as PropType<GraphViewProps['onConnect']>,
required: false,
default: undefined as any
},
onConnectStart: {
type: Function() as PropType<GraphViewProps['onConnectStart']>,
type: Function as unknown as PropType<GraphViewProps['onConnectStart']>,
required: false,
default: undefined as any
},
onConnectStop: {
type: Function() as PropType<GraphViewProps['onConnectStop']>,
type: Function as unknown as PropType<GraphViewProps['onConnectStop']>,
required: false,
default: undefined as any
},
onConnectEnd: {
type: Function() as PropType<GraphViewProps['onConnectEnd']>,
type: Function as unknown as PropType<GraphViewProps['onConnectEnd']>,
required: false,
default: undefined as any
},
@@ -289,52 +288,52 @@ const GraphView = defineComponent({
default: undefined
},
onPaneClick: {
type: Function() as PropType<GraphViewProps['onPaneClick']>,
type: Function as unknown as PropType<GraphViewProps['onPaneClick']>,
required: false,
default: undefined as any
},
onPaneScroll: {
type: Function() as PropType<GraphViewProps['onPaneScroll']>,
type: Function as unknown as PropType<GraphViewProps['onPaneScroll']>,
required: false,
default: undefined as any
},
onPaneContextMenu: {
type: Function() as PropType<GraphViewProps['onPaneContextMenu']>,
type: Function as unknown as PropType<GraphViewProps['onPaneContextMenu']>,
required: false,
default: undefined as any
},
onEdgeUpdate: {
type: Function() as PropType<GraphViewProps['onEdgeUpdate']>,
type: Function as unknown as PropType<GraphViewProps['onEdgeUpdate']>,
required: false,
default: undefined as any
},
onEdgeMouseEnter: {
type: Function() as PropType<GraphViewProps['onEdgeMouseEnter']>,
type: Function as unknown as PropType<GraphViewProps['onEdgeMouseEnter']>,
required: false,
default: undefined as any
},
onEdgeContextMenu: {
type: Function() as PropType<GraphViewProps['onEdgeContextMenu']>,
type: Function as unknown as PropType<GraphViewProps['onEdgeContextMenu']>,
required: false,
default: undefined as any
},
onEdgeMouseMove: {
type: Function() as PropType<GraphViewProps['onEdgeMouseMove']>,
type: Function as unknown as PropType<GraphViewProps['onEdgeMouseMove']>,
required: false,
default: undefined as any
},
onEdgeMouseLeave: {
type: Function() as PropType<GraphViewProps['onEdgeMouseLeave']>,
type: Function as unknown as PropType<GraphViewProps['onEdgeMouseLeave']>,
required: false,
default: undefined as any
},
onEdgeUpdateEnd: {
type: Function() as PropType<GraphViewProps['onEdgeUpdateEnd']>,
type: Function as unknown as PropType<GraphViewProps['onEdgeUpdateEnd']>,
required: false,
default: undefined as any
},
onEdgeUpdateStart: {
type: Function() as PropType<GraphViewProps['onEdgeUpdateStart']>,
type: Function as unknown as PropType<GraphViewProps['onEdgeUpdateStart']>,
required: false,
default: undefined as any
},
@@ -345,23 +344,23 @@ const GraphView = defineComponent({
}
},
setup(props) {
const pinia = store();
const store = inject<RevueFlowStore>('store');
const isInitialized = ref<boolean>(false);
onMounted(() => {
const { zoomIn, zoomOut, zoomTo, transform, fitView, initialized } = useZoomPanHelper();
if (!isInitialized.value && initialized) {
if (props.onLoad) {
if (props.onLoad && store) {
props.onLoad({
fitView: (params = { padding: 0.1 }) => fitView(params),
zoomIn,
zoomOut,
zoomTo,
setTransform: transform,
project: onLoadProject(pinia),
getElements: onLoadGetElements(pinia),
toObject: onLoadToObject(pinia)
project: onLoadProject(store),
getElements: onLoadGetElements(store),
toObject: onLoadToObject(store)
});
}
isInitialized.value = true;
@@ -370,71 +369,71 @@ const GraphView = defineComponent({
onBeforeMount(() => {
if (props.onConnect) {
pinia.setOnConnect(props.onConnect);
store?.setOnConnect(props.onConnect);
}
if (props.onConnectStart) {
pinia.setOnConnectStart(props.onConnectStart);
store?.setOnConnectStart(props.onConnectStart);
}
if (props.onConnectStop) {
pinia.setOnConnectStop(props.onConnectStop);
store?.setOnConnectStop(props.onConnectStop);
}
if (props.onConnectEnd) {
pinia.setOnConnectEnd(props.onConnectEnd);
store?.setOnConnectEnd(props.onConnectEnd);
}
if (typeof props.snapToGrid !== 'undefined') {
pinia.setSnapToGrid(props.snapToGrid);
store?.setSnapToGrid(props.snapToGrid);
}
if (typeof props.snapGrid !== 'undefined') {
pinia.setSnapGrid(props.snapGrid);
store?.setSnapGrid(props.snapGrid);
}
if (typeof props.nodesDraggable !== 'undefined') {
pinia.setNodesDraggable(!!props.nodesDraggable);
store?.setNodesDraggable(!!props.nodesDraggable);
}
if (typeof props.nodesConnectable !== 'undefined') {
pinia.setNodesConnectable(!!props.nodesConnectable);
store?.setNodesConnectable(!!props.nodesConnectable);
}
if (typeof props.elementsSelectable !== 'undefined') {
pinia.setElementsSelectable(!!props.elementsSelectable);
store?.setElementsSelectable(!!props.elementsSelectable);
}
if (typeof props.minZoom !== 'undefined') {
pinia.setMinZoom(props.minZoom as any);
store?.setMinZoom(props.minZoom as any);
}
if (typeof props.maxZoom !== 'undefined') {
pinia.setMaxZoom(props.maxZoom as any);
store?.setMaxZoom(props.maxZoom as any);
}
if (typeof props.translateExtent !== 'undefined') {
pinia.setTranslateExtent(props.translateExtent as any);
store?.setTranslateExtent(props.translateExtent as any);
}
if (typeof props.nodeExtent !== 'undefined') {
pinia.setNodeExtent(props.nodeExtent as any);
store?.setNodeExtent(props.nodeExtent as any);
}
});
onMounted(() => {
if (typeof props.nodesConnectable !== 'undefined') {
pinia.setNodesConnectable(!!props.nodesConnectable);
store?.setNodesConnectable(!!props.nodesConnectable);
}
});
onMounted(() => {
if (typeof props.elementsSelectable !== 'undefined') {
pinia.setElementsSelectable(!!props.elementsSelectable);
store?.setElementsSelectable(!!props.elementsSelectable);
}
if (typeof props.connectionMode !== 'undefined') {
pinia.setConnectionMode(props.connectionMode as any);
store?.setConnectionMode(props.connectionMode as any);
}
});
@@ -462,11 +461,9 @@ const GraphView = defineComponent({
defaultPosition={props.defaultPosition as any}
defaultZoom={props.defaultZoom as any}
translateExtent={props.translateExtent}
/*
onSelectionDragStart={props.onSelectionDragStart}
onSelectionDrag={props.onSelectionDrag}
onSelectionDragStop={props.onSelectionDragStop}
*/
//onSelectionDragStart={props.onSelectionDragStart}
//onSelectionDrag={props.onSelectionDrag}
//onSelectionDragStop={props.onSelectionDragStop}
onSelectionContextMenu={props.onSelectionContextMenu}
>
<NodeRenderer
src/container/NodeRenderer/index.tsx
+33 -33
View File
@@ -1,7 +1,6 @@
import { getNodesInside } from '../../utils/graph';
import { Node, NodeTypesType, Edge } from '../../types';
import { computed, defineComponent, PropType } from 'vue';
import store from '../../store';
import { Node, NodeTypesType, Edge, RevueFlowStore } from '../../types';
import { computed, defineComponent, inject, PropType } from 'vue';
interface NodeRendererProps {
nodeTypes: NodeTypesType;
@@ -49,72 +48,73 @@ const NodeRenderer = defineComponent({
default: undefined
},
onElementClick: {
type: Function() as PropType<NodeRendererProps['onElementClick']>,
type: Function as unknown as PropType<NodeRendererProps['onElementClick']>,
required: false,
default: undefined
},
onNodeDoubleClick: {
type: Function() as PropType<NodeRendererProps['onNodeDoubleClick']>,
type: Function as unknown as PropType<NodeRendererProps['onNodeDoubleClick']>,
required: false,
default: undefined
},
onNodeMouseEnter: {
type: Function() as PropType<NodeRendererProps['onNodeMouseEnter']>,
type: Function as unknown as PropType<NodeRendererProps['onNodeMouseEnter']>,
required: false,
default: undefined
},
onNodeMouseMove: {
type: Function() as PropType<NodeRendererProps['onNodeMouseMove']>,
type: Function as unknown as PropType<NodeRendererProps['onNodeMouseMove']>,
required: false,
default: undefined
},
onNodeMouseLeave: {
type: Function() as PropType<NodeRendererProps['onNodeMouseLeave']>,
type: Function as unknown as PropType<NodeRendererProps['onNodeMouseLeave']>,
required: false,
default: undefined
},
onNodeContextMenu: {
type: Function() as PropType<NodeRendererProps['onNodeContextMenu']>,
type: Function as unknown as PropType<NodeRendererProps['onNodeContextMenu']>,
required: false,
default: undefined
},
onNodeDrag: {
type: Function() as PropType<NodeRendererProps['onNodeDrag']>,
type: Function as unknown as PropType<NodeRendererProps['onNodeDrag']>,
required: false,
default: undefined
},
onNodeDragStart: {
type: Function() as PropType<NodeRendererProps['onNodeDragStart']>,
type: Function as unknown as PropType<NodeRendererProps['onNodeDragStart']>,
required: false,
default: undefined
},
onNodeDragStop: {
type: Function() as PropType<NodeRendererProps['onNodeDragStop']>,
type: Function as unknown as PropType<NodeRendererProps['onNodeDragStop']>,
required: false,
default: undefined
}
},
setup(props) {
const pinia = store();
const store = inject<RevueFlowStore>('store');
const visibleNodes = computed(() => {
return props.onlyRenderVisibleElements
? getNodesInside(
pinia.nodes,
{
x: 0,
y: 0,
width: pinia.width,
height: pinia.height
},
pinia.transform,
true
)
: pinia.nodes;
? store?.nodes &&
getNodesInside(
store?.nodes,
{
x: 0,
y: 0,
width: store?.width,
height: store?.height
},
store?.transform,
true
)
: store?.nodes;
});
const transformStyle = computed(() => ({
transform: `translate(${pinia.transform[0]}px,${pinia.transform[1]}px) scale(${pinia.transform[2]})`
transform: `translate(${store?.transform[0]}px,${store?.transform[1]}px) scale(${store?.transform[2]})`
}));
const resizeObserver = computed(() => {
@@ -128,13 +128,13 @@ const NodeRenderer = defineComponent({
nodeElement: entry.target as HTMLDivElement
}));
pinia.updateNodeDimensions(updates);
store?.updateNodeDimensions(updates);
});
});
return () => (
<div class="revue-flow__nodes" style={transformStyle.value}>
{visibleNodes.value.map((node) => {
{visibleNodes.value?.map((node) => {
const nodeType = node.type || 'default';
if (props.nodeTypes) {
const NodeComponent: any = props.nodeTypes[nodeType] || props.nodeTypes.default;
@@ -142,9 +142,9 @@ const NodeRenderer = defineComponent({
console.warn(`Node type "${nodeType}" not found. Using fallback type "default".`);
}
const isDraggable = !!(node.draggable || (pinia.nodesDraggable && typeof node.draggable === 'undefined'));
const isSelectable = !!(node.selectable || (pinia.elementsSelectable && typeof node.selectable === 'undefined'));
const isConnectable = !!(node.connectable || (pinia.nodesConnectable && typeof node.connectable === 'undefined'));
const isDraggable = !!(node.draggable || (store?.nodesDraggable && typeof node.draggable === 'undefined'));
const isSelectable = !!(node.selectable || (store?.elementsSelectable && typeof node.selectable === 'undefined'));
const isConnectable = !!(node.connectable || (store?.nodesConnectable && typeof node.connectable === 'undefined'));
return (
<NodeComponent
@@ -173,8 +173,8 @@ const NodeRenderer = defineComponent({
onNodeDragStart={props.onNodeDragStart}
onNodeDrag={props.onNodeDrag}
onNodeDragStop={props.onNodeDragStop}
scale={pinia.transform[2]}
selected={pinia.selectedElements?.some(({ id }) => id === node.id) || false}
scale={store?.transform[2]}
selected={store?.selectedElements?.some(({ id }) => id === node.id) || false}
isDraggable={isDraggable}
isSelectable={isSelectable}
isConnectable={isConnectable}
src/container/RevueFlow/index.tsx
+9 -21
View File
@@ -1,14 +1,4 @@
import {
computed,
CSSProperties,
defineComponent,
HTMLAttributes,
onBeforeUnmount,
onMounted,
onUpdated,
PropType,
watch
} from 'vue';
import { computed, CSSProperties, defineComponent, HTMLAttributes, onBeforeUnmount, onUpdated, PropType, provide } from 'vue';
import GraphView from '../GraphView';
import DefaultNode from '../../components/Nodes/DefaultNode';
import InputNode from '../../components/Nodes/InputNode';
@@ -427,32 +417,32 @@ const RevueFlow = defineComponent({
default: undefined as any
},
onEdgeMouseEnter: {
type: Function() as PropType<RevueFlowProps['onEdgeMouseEnter']>,
type: Function as unknown as PropType<RevueFlowProps['onEdgeMouseEnter']>,
required: false,
default: undefined as any
},
onEdgeContextMenu: {
type: Function() as PropType<RevueFlowProps['onEdgeContextMenu']>,
type: Function as unknown as PropType<RevueFlowProps['onEdgeContextMenu']>,
required: false,
default: undefined as any
},
onEdgeMouseMove: {
type: Function() as PropType<RevueFlowProps['onEdgeMouseMove']>,
type: Function as unknown as PropType<RevueFlowProps['onEdgeMouseMove']>,
required: false,
default: undefined as any
},
onEdgeMouseLeave: {
type: Function() as PropType<RevueFlowProps['onEdgeMouseLeave']>,
type: Function as unknown as PropType<RevueFlowProps['onEdgeMouseLeave']>,
required: false,
default: undefined as any
},
onEdgeUpdateEnd: {
type: Function() as PropType<RevueFlowProps['onEdgeUpdateEnd']>,
type: Function as unknown as PropType<RevueFlowProps['onEdgeUpdateEnd']>,
required: false,
default: undefined as any
},
onEdgeUpdateStart: {
type: Function() as PropType<RevueFlowProps['onEdgeUpdateStart']>,
type: Function as unknown as PropType<RevueFlowProps['onEdgeUpdateStart']>,
required: false,
default: undefined as any
},
@@ -464,13 +454,11 @@ const RevueFlow = defineComponent({
},
setup(props, { slots }) {
const store = configureStore(initialState)();
watch(props.elements, () => store.setElements(props.elements));
provide('store', store);
store.setElements(props.elements);
onUpdated(() => {
store.setElements(props.elements);
});
onMounted(() => {
store.setElements(props.elements);
});
onBeforeUnmount(() => {
store.$reset();
store.setElements([]);