update: Remove wrapEdge and wrapNode files
* implement Edge.tsx and Node.vue to wrap the components accordingly refactor!: Removing callbacks from props in favor of events chore: upgrade vue and vite vue plugin
This commit is contained in:
Braks
@@ -1,17 +1,10 @@
|
||||
<template>
|
||||
<FlowRenderer
|
||||
:onPaneClick="onPaneClick"
|
||||
:onPaneContextMenu="onPaneContextMenu"
|
||||
:onPaneScroll="onPaneScroll"
|
||||
:onElementsRemove="onElementsRemove"
|
||||
:deleteKeyCode="deleteKeyCode"
|
||||
:selectionKeyCode="selectionKeyCode"
|
||||
:multiSelectionKeyCode="multiSelectionKeyCode"
|
||||
:zoomActivationKeyCode="zoomActivationKeyCode"
|
||||
:elementsSelectable="elementsSelectable"
|
||||
:onMove="onMove"
|
||||
:onMoveStart="onMoveStart"
|
||||
:onMoveEnd="onMoveEnd"
|
||||
:zoomOnScroll="zoomOnScroll"
|
||||
:zoomOnPinch="zoomOnPinch"
|
||||
:zoomOnDoubleClick="zoomOnDoubleClick"
|
||||
@@ -22,22 +15,9 @@
|
||||
:defaultPosition="defaultPosition"
|
||||
:defaultZoom="defaultZoom"
|
||||
:translateExtent="translateExtent"
|
||||
:onSelectionDragStart="onSelectionDragStart"
|
||||
:onSelectionDrag="onSelectionDrag"
|
||||
:onSelectionDragStop="onSelectionDragStop"
|
||||
:onSelectionContextMenu="onSelectionContextMenu"
|
||||
>
|
||||
<NodeRenderer
|
||||
:nodeTypes="nodeTypes"
|
||||
:onElementClick="onElementClick"
|
||||
:onNodeDoubleClick="onNodeDoubleClick"
|
||||
:onNodeMouseEnter="onNodeMouseEnter"
|
||||
:onNodeMouseMove="onNodeMouseMove"
|
||||
:onNodeMouseLeave="onNodeMouseLeave"
|
||||
:onNodeContextMenu="onNodeContextMenu"
|
||||
:onNodeDragStop="onNodeDragStop"
|
||||
:onNodeDrag="onNodeDrag"
|
||||
:onNodeDragStart="onNodeDragStart"
|
||||
:selectNodesOnDrag="selectNodesOnDrag"
|
||||
:snapToGrid="snapToGrid"
|
||||
:snapGrid="snapGrid"
|
||||
@@ -45,22 +25,13 @@
|
||||
/>
|
||||
<EdgeRenderer
|
||||
:edgeTypes="edgeTypes"
|
||||
:onElementClick="onElementClick"
|
||||
:onEdgeDoubleClick="onEdgeDoubleClick"
|
||||
:connectionLineType="connectionLineType"
|
||||
:connectionLineStyle="connectionLineStyle"
|
||||
:connectionLineComponent="connectionLineComponent"
|
||||
:connectionMode="connectionMode"
|
||||
:arrowHeadColor="arrowHeadColor"
|
||||
:markerEndId="markerEndId"
|
||||
:onEdgeUpdate="onEdgeUpdate"
|
||||
:onlyRenderVisibleElements="onlyRenderVisibleElements"
|
||||
:onEdgeContextMenu="onEdgeContextMenu"
|
||||
:onEdgeMouseEnter="onEdgeMouseEnter"
|
||||
:onEdgeMouseMove="onEdgeMouseMove"
|
||||
:onEdgeMouseLeave="onEdgeMouseLeave"
|
||||
:onEdgeUpdateStart="onEdgeUpdateStart"
|
||||
:onEdgeUpdateEnd="onEdgeUpdateEnd"
|
||||
:edgeUpdaterRadius="edgeUpdaterRadius"
|
||||
/>
|
||||
</FlowRenderer>
|
||||
@@ -68,8 +39,8 @@
|
||||
<script lang="ts">
|
||||
import { defineComponent, inject, PropType, CSSProperties, watchEffect } from 'vue';
|
||||
import FlowRenderer from '../FlowRenderer/FlowRenderer.vue';
|
||||
import NodeRenderer from '../NodeRenderer';
|
||||
import EdgeRenderer from '../EdgeRenderer';
|
||||
import NodeRenderer from '../NodeRenderer/NodeRenderer.vue';
|
||||
import EdgeRenderer from '../EdgeRenderer/EdgeRenderer.vue';
|
||||
import { onLoadProject, onLoadGetElements, onLoadToObject } from '../../utils/graph';
|
||||
import { GraphViewProps, RevueFlowStore } from '../../types';
|
||||
import useZoomPanHelper from '../../hooks/useZoomPanHelper';
|
||||
@@ -89,106 +60,6 @@ const GraphView = defineComponent({
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
onMove: {
|
||||
type: Function as unknown as PropType<GraphViewProps['onMove']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
onMoveStart: {
|
||||
type: Function as unknown as PropType<GraphViewProps['onMoveStart']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
onMoveEnd: {
|
||||
type: Function as unknown as PropType<GraphViewProps['onMoveEnd']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
onLoad: {
|
||||
type: Function as unknown as PropType<GraphViewProps['onLoad']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
onElementClick: {
|
||||
type: Function as unknown as PropType<GraphViewProps['onElementClick']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
onNodeDoubleClick: {
|
||||
type: Function as unknown as PropType<GraphViewProps['onNodeDoubleClick']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
onEdgeDoubleClick: {
|
||||
type: Function as unknown as PropType<GraphViewProps['onEdgeDoubleClick']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
onNodeMouseEnter: {
|
||||
type: Function as unknown as PropType<GraphViewProps['onNodeMouseEnter']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
onNodeMouseMove: {
|
||||
type: Function as unknown as PropType<GraphViewProps['onNodeMouseMove']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
onNodeMouseLeave: {
|
||||
type: Function as unknown as PropType<GraphViewProps['onNodeMouseLeave']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
onNodeContextMenu: {
|
||||
type: Function as unknown as PropType<GraphViewProps['onNodeContextMenu']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
onNodeDragStart: {
|
||||
type: Function as unknown as PropType<GraphViewProps['onNodeDragStart']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
onNodeDrag: {
|
||||
type: Function as unknown as PropType<GraphViewProps['onNodeDrag']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
onNodeDragStop: {
|
||||
type: Function as unknown as PropType<GraphViewProps['onNodeDragStop']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
onSelectionContextMenu: {
|
||||
type: Function as unknown as PropType<GraphViewProps['onSelectionContextMenu']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
onElementsRemove: {
|
||||
type: Function as unknown as PropType<GraphViewProps['onElementsRemove']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
onConnect: {
|
||||
type: Function as unknown as PropType<GraphViewProps['onConnect']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
onConnectStart: {
|
||||
type: Function as unknown as PropType<GraphViewProps['onConnectStart']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
onConnectStop: {
|
||||
type: Function as unknown as PropType<GraphViewProps['onConnectStop']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
onConnectEnd: {
|
||||
type: Function as unknown as PropType<GraphViewProps['onConnectEnd']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
connectionMode: {
|
||||
type: String as PropType<GraphViewProps['connectionMode']>,
|
||||
required: false,
|
||||
@@ -339,71 +210,6 @@ const GraphView = defineComponent({
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
onPaneClick: {
|
||||
type: Function as unknown as PropType<GraphViewProps['onPaneClick']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
onPaneScroll: {
|
||||
type: Function as unknown as PropType<GraphViewProps['onPaneScroll']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
onPaneContextMenu: {
|
||||
type: Function as unknown as PropType<GraphViewProps['onPaneContextMenu']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
onEdgeUpdate: {
|
||||
type: Function as unknown as PropType<GraphViewProps['onEdgeUpdate']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
onEdgeMouseEnter: {
|
||||
type: Function as unknown as PropType<GraphViewProps['onEdgeMouseEnter']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
onEdgeContextMenu: {
|
||||
type: Function as unknown as PropType<GraphViewProps['onEdgeContextMenu']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
onEdgeMouseMove: {
|
||||
type: Function as unknown as PropType<GraphViewProps['onEdgeMouseMove']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
onEdgeMouseLeave: {
|
||||
type: Function as unknown as PropType<GraphViewProps['onEdgeMouseLeave']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
onEdgeUpdateEnd: {
|
||||
type: Function as unknown as PropType<GraphViewProps['onEdgeUpdateEnd']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
onEdgeUpdateStart: {
|
||||
type: Function as unknown as PropType<GraphViewProps['onEdgeUpdateStart']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
onSelectionDragStart: {
|
||||
type: Function as unknown as PropType<GraphViewProps['onSelectionDragStart']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
onSelectionDrag: {
|
||||
type: Function as unknown as PropType<GraphViewProps['onSelectionDrag']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
onSelectionDragStop: {
|
||||
type: Function as unknown as PropType<GraphViewProps['onSelectionDragStop']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
edgeUpdaterRadius: {
|
||||
type: Number as PropType<GraphViewProps['edgeUpdaterRadius']>,
|
||||
required: false,
|
||||
|
||||
@@ -1,477 +0,0 @@
|
||||
import { defineComponent, inject, onBeforeMount, onMounted, PropType, CSSProperties } from 'vue';
|
||||
import FlowRenderer from '../FlowRenderer';
|
||||
import NodeRenderer from '../NodeRenderer';
|
||||
import EdgeRenderer from '../EdgeRenderer';
|
||||
import { onLoadProject, onLoadGetElements, onLoadToObject } from '../../utils/graph';
|
||||
import { GraphViewProps, RevueFlowStore } from '../../types';
|
||||
import useZoomPanHelper from '../../hooks/useZoomPanHelper';
|
||||
|
||||
const GraphView = defineComponent({
|
||||
name: 'GraphView',
|
||||
components: { NodeRenderer, EdgeRenderer },
|
||||
props: {
|
||||
nodeTypes: {
|
||||
type: Object as PropType<GraphViewProps['nodeTypes']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
edgeTypes: {
|
||||
type: Object as PropType<GraphViewProps['edgeTypes']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
onMove: {
|
||||
type: Function as unknown as PropType<GraphViewProps['onMove']>,
|
||||
required: false,
|
||||
default: undefined as any
|
||||
},
|
||||
onMoveStart: {
|
||||
type: Function as unknown as PropType<GraphViewProps['onMoveStart']>,
|
||||
required: false,
|
||||
default: undefined as any
|
||||
},
|
||||
onMoveEnd: {
|
||||
type: Function as unknown as PropType<GraphViewProps['onMoveEnd']>,
|
||||
required: false,
|
||||
default: undefined as any
|
||||
},
|
||||
onLoad: {
|
||||
type: Function as unknown as PropType<GraphViewProps['onLoad']>,
|
||||
required: false,
|
||||
default: undefined as any
|
||||
},
|
||||
onElementClick: {
|
||||
type: Function as unknown as PropType<GraphViewProps['onElementClick']>,
|
||||
required: false,
|
||||
default: undefined as any
|
||||
},
|
||||
onNodeDoubleClick: {
|
||||
type: Function as unknown as PropType<GraphViewProps['onNodeDoubleClick']>,
|
||||
required: false,
|
||||
default: undefined as any
|
||||
},
|
||||
onEdgeDoubleClick: {
|
||||
type: Function as unknown as PropType<GraphViewProps['onEdgeDoubleClick']>,
|
||||
required: false,
|
||||
default: undefined as any
|
||||
},
|
||||
onNodeMouseEnter: {
|
||||
type: Function as unknown as PropType<GraphViewProps['onNodeMouseEnter']>,
|
||||
required: false,
|
||||
default: undefined as any
|
||||
},
|
||||
onNodeMouseMove: {
|
||||
type: Function as unknown as PropType<GraphViewProps['onNodeMouseMove']>,
|
||||
required: false,
|
||||
default: undefined as any
|
||||
},
|
||||
onNodeMouseLeave: {
|
||||
type: Function as unknown as PropType<GraphViewProps['onNodeMouseLeave']>,
|
||||
required: false,
|
||||
default: undefined as any
|
||||
},
|
||||
onNodeContextMenu: {
|
||||
type: Function as unknown as PropType<GraphViewProps['onNodeContextMenu']>,
|
||||
required: false,
|
||||
default: undefined as any
|
||||
},
|
||||
onNodeDragStart: {
|
||||
type: Function as unknown as PropType<GraphViewProps['onNodeDragStart']>,
|
||||
required: false,
|
||||
default: undefined as any
|
||||
},
|
||||
onNodeDrag: {
|
||||
type: Function as unknown as PropType<GraphViewProps['onNodeDrag']>,
|
||||
required: false,
|
||||
default: undefined as any
|
||||
},
|
||||
onNodeDragStop: {
|
||||
type: Function as unknown as PropType<GraphViewProps['onNodeDragStop']>,
|
||||
required: false,
|
||||
default: undefined as any
|
||||
},
|
||||
onSelectionContextMenu: {
|
||||
type: Function as unknown as PropType<GraphViewProps['onSelectionContextMenu']>,
|
||||
required: false,
|
||||
default: undefined as any
|
||||
},
|
||||
onElementsRemove: {
|
||||
type: Function as unknown as PropType<GraphViewProps['onElementsRemove']>,
|
||||
required: false,
|
||||
default: undefined as any
|
||||
},
|
||||
onConnect: {
|
||||
type: Function as unknown as PropType<GraphViewProps['onConnect']>,
|
||||
required: false,
|
||||
default: undefined as any
|
||||
},
|
||||
onConnectStart: {
|
||||
type: Function as unknown as PropType<GraphViewProps['onConnectStart']>,
|
||||
required: false,
|
||||
default: undefined as any
|
||||
},
|
||||
onConnectStop: {
|
||||
type: Function as unknown as PropType<GraphViewProps['onConnectStop']>,
|
||||
required: false,
|
||||
default: undefined as any
|
||||
},
|
||||
onConnectEnd: {
|
||||
type: Function as unknown as PropType<GraphViewProps['onConnectEnd']>,
|
||||
required: false,
|
||||
default: undefined as any
|
||||
},
|
||||
connectionMode: {
|
||||
type: String as PropType<GraphViewProps['connectionMode']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
connectionLineType: {
|
||||
type: String as PropType<GraphViewProps['connectionLineType']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
connectionLineStyle: {
|
||||
type: Object as PropType<GraphViewProps['connectionLineStyle']>,
|
||||
required: false,
|
||||
default: () => ({} as CSSProperties)
|
||||
},
|
||||
connectionLineComponent: {
|
||||
type: Object as PropType<GraphViewProps['connectionLineComponent']>,
|
||||
required: false,
|
||||
default: undefined as any
|
||||
},
|
||||
selectionKeyCode: {
|
||||
type: [Number, String] as PropType<GraphViewProps['selectionKeyCode']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
multiSelectionKeyCode: {
|
||||
type: [Number, String] as PropType<GraphViewProps['multiSelectionKeyCode']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
zoomActivationKeyCode: {
|
||||
type: [Number, String] as PropType<GraphViewProps['zoomActivationKeyCode']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
deleteKeyCode: {
|
||||
type: [Number, String] as PropType<GraphViewProps['deleteKeyCode']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
snapToGrid: {
|
||||
type: Boolean as PropType<GraphViewProps['snapToGrid']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
snapGrid: {
|
||||
type: Array as unknown as PropType<GraphViewProps['snapGrid']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
onlyRenderVisibleElements: {
|
||||
type: Boolean as PropType<GraphViewProps['onlyRenderVisibleElements']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
nodesDraggable: {
|
||||
type: Boolean as PropType<GraphViewProps['nodesDraggable']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
nodesConnectable: {
|
||||
type: Boolean as PropType<GraphViewProps['nodesConnectable']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
elementsSelectable: {
|
||||
type: Boolean as PropType<GraphViewProps['elementsSelectable']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
selectNodesOnDrag: {
|
||||
type: Boolean as PropType<GraphViewProps['selectNodesOnDrag']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
minZoom: {
|
||||
type: Number as PropType<GraphViewProps['minZoom']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
maxZoom: {
|
||||
type: Number as PropType<GraphViewProps['maxZoom']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
defaultZoom: {
|
||||
type: Number as PropType<GraphViewProps['defaultZoom']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
defaultPosition: {
|
||||
type: Array as unknown as PropType<GraphViewProps['defaultPosition']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
translateExtent: {
|
||||
type: Array as unknown as PropType<GraphViewProps['translateExtent']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
nodeExtent: {
|
||||
type: Array as unknown as PropType<GraphViewProps['nodeExtent']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
arrowHeadColor: {
|
||||
type: String as PropType<GraphViewProps['arrowHeadColor']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
markerEndId: {
|
||||
type: String as PropType<GraphViewProps['markerEndId']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
zoomOnScroll: {
|
||||
type: Boolean as PropType<GraphViewProps['zoomOnScroll']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
zoomOnPinch: {
|
||||
type: Boolean as PropType<GraphViewProps['zoomOnPinch']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
panOnScroll: {
|
||||
type: Boolean as PropType<GraphViewProps['panOnScroll']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
panOnScrollSpeed: {
|
||||
type: Number as PropType<GraphViewProps['panOnScrollSpeed']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
panOnScrollMode: {
|
||||
type: String as PropType<GraphViewProps['panOnScrollMode']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
zoomOnDoubleClick: {
|
||||
type: Boolean as PropType<GraphViewProps['zoomOnDoubleClick']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
paneMoveable: {
|
||||
type: Boolean as PropType<GraphViewProps['paneMoveable']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
onPaneClick: {
|
||||
type: Function as unknown as PropType<GraphViewProps['onPaneClick']>,
|
||||
required: false,
|
||||
default: undefined as any
|
||||
},
|
||||
onPaneScroll: {
|
||||
type: Function as unknown as PropType<GraphViewProps['onPaneScroll']>,
|
||||
required: false,
|
||||
default: undefined as any
|
||||
},
|
||||
onPaneContextMenu: {
|
||||
type: Function as unknown as PropType<GraphViewProps['onPaneContextMenu']>,
|
||||
required: false,
|
||||
default: undefined as any
|
||||
},
|
||||
onEdgeUpdate: {
|
||||
type: Function as unknown as PropType<GraphViewProps['onEdgeUpdate']>,
|
||||
required: false,
|
||||
default: undefined as any
|
||||
},
|
||||
onEdgeMouseEnter: {
|
||||
type: Function as unknown as PropType<GraphViewProps['onEdgeMouseEnter']>,
|
||||
required: false,
|
||||
default: undefined as any
|
||||
},
|
||||
onEdgeContextMenu: {
|
||||
type: Function as unknown as PropType<GraphViewProps['onEdgeContextMenu']>,
|
||||
required: false,
|
||||
default: undefined as any
|
||||
},
|
||||
onEdgeMouseMove: {
|
||||
type: Function as unknown as PropType<GraphViewProps['onEdgeMouseMove']>,
|
||||
required: false,
|
||||
default: undefined as any
|
||||
},
|
||||
onEdgeMouseLeave: {
|
||||
type: Function as unknown as PropType<GraphViewProps['onEdgeMouseLeave']>,
|
||||
required: false,
|
||||
default: undefined as any
|
||||
},
|
||||
onEdgeUpdateEnd: {
|
||||
type: Function as unknown as PropType<GraphViewProps['onEdgeUpdateEnd']>,
|
||||
required: false,
|
||||
default: undefined as any
|
||||
},
|
||||
onEdgeUpdateStart: {
|
||||
type: Function as unknown as PropType<GraphViewProps['onEdgeUpdateStart']>,
|
||||
required: false,
|
||||
default: undefined as any
|
||||
},
|
||||
onSelectionDragStart: {
|
||||
type: Function as unknown as PropType<GraphViewProps['onSelectionDragStart']>,
|
||||
required: false,
|
||||
default: undefined as any
|
||||
},
|
||||
onSelectionDrag: {
|
||||
type: Function as unknown as PropType<GraphViewProps['onSelectionDrag']>,
|
||||
required: false,
|
||||
default: undefined as any
|
||||
},
|
||||
onSelectionDragStop: {
|
||||
type: Function as unknown as PropType<GraphViewProps['onSelectionDragStop']>,
|
||||
required: false,
|
||||
default: undefined as any
|
||||
},
|
||||
edgeUpdaterRadius: {
|
||||
type: Number as PropType<GraphViewProps['edgeUpdaterRadius']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
}
|
||||
},
|
||||
setup(props) {
|
||||
const store = inject<RevueFlowStore>('store')!;
|
||||
|
||||
const { onReady } = useZoomPanHelper(store);
|
||||
onReady(({ zoomIn, zoomOut, zoomTo, transform, fitView, initialized }) => {
|
||||
if (initialized) {
|
||||
if (props.onLoad && store) {
|
||||
props.onLoad({
|
||||
fitView: (params = { padding: 0.1 }) => fitView(params),
|
||||
zoomIn,
|
||||
zoomOut,
|
||||
zoomTo,
|
||||
setTransform: transform,
|
||||
project: onLoadProject(store),
|
||||
getElements: onLoadGetElements(store),
|
||||
toObject: onLoadToObject(store)
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
if (typeof props.nodesConnectable !== 'undefined') {
|
||||
store.nodesConnectable = !!props.nodesConnectable;
|
||||
}
|
||||
if (typeof props.elementsSelectable !== 'undefined') {
|
||||
store.elementsSelectable = !!props.elementsSelectable;
|
||||
}
|
||||
if (typeof props.nodesDraggable !== 'undefined') {
|
||||
store.nodesDraggable = !!props.nodesDraggable;
|
||||
}
|
||||
|
||||
if (typeof props.connectionMode !== 'undefined') {
|
||||
store.connectionMode = props.connectionMode;
|
||||
}
|
||||
});
|
||||
|
||||
onBeforeMount(() => {
|
||||
if (typeof props.snapToGrid !== 'undefined') {
|
||||
store.snapToGrid = props.snapToGrid;
|
||||
}
|
||||
|
||||
if (typeof props.snapGrid !== 'undefined') {
|
||||
store.snapGrid = props.snapGrid;
|
||||
}
|
||||
|
||||
if (typeof props.minZoom !== 'undefined') {
|
||||
store?.setMinZoom(props.minZoom);
|
||||
}
|
||||
|
||||
if (typeof props.maxZoom !== 'undefined') {
|
||||
store?.setMaxZoom(props.maxZoom);
|
||||
}
|
||||
|
||||
if (typeof props.translateExtent !== 'undefined') {
|
||||
store?.setTranslateExtent(props.translateExtent);
|
||||
}
|
||||
|
||||
if (typeof props.nodeExtent !== 'undefined') {
|
||||
store?.setNodeExtent(props.nodeExtent);
|
||||
}
|
||||
});
|
||||
|
||||
return () => (
|
||||
<FlowRenderer
|
||||
onPaneClick={props.onPaneClick}
|
||||
onPaneContextMenu={props.onPaneContextMenu}
|
||||
onPaneScroll={props.onPaneScroll}
|
||||
onElementsRemove={props.onElementsRemove}
|
||||
deleteKeyCode={props.deleteKeyCode}
|
||||
selectionKeyCode={props.selectionKeyCode}
|
||||
multiSelectionKeyCode={props.multiSelectionKeyCode}
|
||||
zoomActivationKeyCode={props.zoomActivationKeyCode}
|
||||
elementsSelectable={props.elementsSelectable}
|
||||
onMove={props.onMove}
|
||||
onMoveStart={props.onMoveStart}
|
||||
onMoveEnd={props.onMoveEnd}
|
||||
zoomOnScroll={props.zoomOnScroll}
|
||||
zoomOnPinch={props.zoomOnPinch}
|
||||
zoomOnDoubleClick={props.zoomOnDoubleClick}
|
||||
panOnScroll={props.panOnScroll}
|
||||
panOnScrollSpeed={props.panOnScrollSpeed}
|
||||
panOnScrollMode={props.panOnScrollMode}
|
||||
paneMoveable={props.paneMoveable}
|
||||
defaultPosition={props.defaultPosition}
|
||||
defaultZoom={props.defaultZoom}
|
||||
translateExtent={props.translateExtent}
|
||||
onSelectionDragStart={props.onSelectionDragStart}
|
||||
onSelectionDrag={props.onSelectionDrag}
|
||||
onSelectionDragStop={props.onSelectionDragStop}
|
||||
onSelectionContextMenu={props.onSelectionContextMenu}
|
||||
>
|
||||
<NodeRenderer
|
||||
nodeTypes={props.nodeTypes}
|
||||
onElementClick={props.onElementClick}
|
||||
onNodeDoubleClick={props.onNodeDoubleClick}
|
||||
onNodeMouseEnter={props.onNodeMouseEnter}
|
||||
onNodeMouseMove={props.onNodeMouseMove}
|
||||
onNodeMouseLeave={props.onNodeMouseLeave}
|
||||
onNodeContextMenu={props.onNodeContextMenu}
|
||||
onNodeDragStop={props.onNodeDragStop}
|
||||
onNodeDrag={props.onNodeDrag}
|
||||
onNodeDragStart={props.onNodeDragStart}
|
||||
selectNodesOnDrag={props.selectNodesOnDrag}
|
||||
snapToGrid={props.snapToGrid}
|
||||
snapGrid={props.snapGrid}
|
||||
onlyRenderVisibleElements={props.onlyRenderVisibleElements}
|
||||
/>
|
||||
<EdgeRenderer
|
||||
edgeTypes={props.edgeTypes}
|
||||
onElementClick={props.onElementClick}
|
||||
onEdgeDoubleClick={props.onEdgeDoubleClick}
|
||||
connectionLineType={props.connectionLineType}
|
||||
connectionLineStyle={props.connectionLineStyle}
|
||||
connectionLineComponent={props.connectionLineComponent}
|
||||
connectionMode={props.connectionMode}
|
||||
arrowHeadColor={props.arrowHeadColor}
|
||||
markerEndId={props.markerEndId}
|
||||
onEdgeUpdate={props.onEdgeUpdate}
|
||||
onlyRenderVisibleElements={props.onlyRenderVisibleElements}
|
||||
onEdgeContextMenu={props.onEdgeContextMenu}
|
||||
onEdgeMouseEnter={props.onEdgeMouseEnter}
|
||||
onEdgeMouseMove={props.onEdgeMouseMove}
|
||||
onEdgeMouseLeave={props.onEdgeMouseLeave}
|
||||
onEdgeUpdateStart={props.onEdgeUpdateStart}
|
||||
onEdgeUpdateEnd={props.onEdgeUpdateEnd}
|
||||
edgeUpdaterRadius={props.edgeUpdaterRadius}
|
||||
/>
|
||||
</FlowRenderer>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
export default GraphView;
|
||||
Reference in New Issue
Block a user