refactor: Refactor some jsx files to vue files
feat: add global hooks to emulate sort of an event bus between components * global hooks are not exposed to user but emit events upward from Revue-flow component, just more convenient
This commit is contained in:
Braks
@@ -1,6 +1,6 @@
|
||||
import { defineComponent, HTMLAttributes, inject, onMounted, PropType, ref } from 'vue';
|
||||
import useZoomPanHelper from '../../hooks/useZoomPanHelper';
|
||||
import { FitViewParams, RevueFlowStore } from '../../types';
|
||||
import { FitViewParams, RevueFlowStore, ZoomPanHelperFunctions } from '../../types';
|
||||
import PlusIcon from '../../../assets/icons/plus.svg';
|
||||
import MinusIcon from '../../../assets/icons/minus.svg';
|
||||
import Fitview from '../../../assets/icons/fitview.svg';
|
||||
@@ -89,27 +89,28 @@ const Controls = defineComponent({
|
||||
setup(props, { slots }) {
|
||||
const store = inject<RevueFlowStore>('store')!;
|
||||
const isVisible = ref<boolean>(false);
|
||||
const zoomHelper = ref(useZoomPanHelper());
|
||||
const zoomHelper = ref<ZoomPanHelperFunctions>();
|
||||
const { onReady } = useZoomPanHelper(store);
|
||||
|
||||
onMounted(() => {
|
||||
zoomHelper.value = useZoomPanHelper();
|
||||
onReady((helper) => {
|
||||
zoomHelper.value = helper;
|
||||
});
|
||||
|
||||
const isInteractive = store.nodesDraggable && store.nodesConnectable && store.elementsSelectable;
|
||||
const mapClasses = ['revue-flow__controls'];
|
||||
|
||||
const onZoomInHandler = () => {
|
||||
zoomHelper.value.zoomIn?.();
|
||||
zoomHelper.value?.zoomIn?.();
|
||||
props.onZoomIn?.();
|
||||
};
|
||||
|
||||
const onZoomOutHandler = () => {
|
||||
zoomHelper.value.zoomOut?.();
|
||||
zoomHelper.value?.zoomOut?.();
|
||||
props.onZoomOut?.();
|
||||
};
|
||||
|
||||
const onFitViewHandler = () => {
|
||||
zoomHelper.value.fitView?.(props.fitViewParams);
|
||||
zoomHelper.value?.fitView?.(props.fitViewParams);
|
||||
props.onFitView?.();
|
||||
};
|
||||
|
||||
|
||||
@@ -4,14 +4,13 @@ import {
|
||||
ElementId,
|
||||
XYPosition,
|
||||
OnConnectFunc,
|
||||
OnConnectStartFunc,
|
||||
OnConnectStopFunc,
|
||||
OnConnectEndFunc,
|
||||
ConnectionMode,
|
||||
SetConnectionId,
|
||||
Connection,
|
||||
HandleType
|
||||
HandleType,
|
||||
RevueFlowStore
|
||||
} from '../../types';
|
||||
import { RevueFlowHooks } from '../../hooks/RevueFlowHooks';
|
||||
|
||||
export type ValidConnectionFunc = (connection: Connection) => boolean;
|
||||
export type SetSourceIdFunc = (params: SetConnectionId) => void;
|
||||
@@ -85,19 +84,19 @@ function resetRecentHandle(hoveredHandle: Element): void {
|
||||
|
||||
export function onMouseDown(
|
||||
event: MouseEvent,
|
||||
store: RevueFlowStore,
|
||||
hooks: {
|
||||
connectStart: RevueFlowHooks['connectStart'];
|
||||
connectStop: RevueFlowHooks['connectStop'];
|
||||
connectEnd: RevueFlowHooks['connectEnd'];
|
||||
},
|
||||
handleId: ElementId | null,
|
||||
nodeId: ElementId,
|
||||
setConnectionNodeId: SetSourceIdFunc,
|
||||
setPosition: SetPosition,
|
||||
onConnect: OnConnectFunc,
|
||||
isTarget: boolean,
|
||||
isValidConnection: ValidConnectionFunc,
|
||||
connectionMode: ConnectionMode,
|
||||
elementEdgeUpdaterType?: HandleType,
|
||||
onEdgeUpdateEnd?: (evt: MouseEvent) => void,
|
||||
onConnectStart?: OnConnectStartFunc,
|
||||
onConnectStop?: OnConnectStopFunc,
|
||||
onConnectEnd?: OnConnectEndFunc
|
||||
onEdgeUpdateEnd?: (evt: MouseEvent) => void
|
||||
): void {
|
||||
const revueFlowNode = (event.target as Element).closest('.revue-flow');
|
||||
// when revue-flow is used inside a shadow root we can't use document
|
||||
@@ -119,23 +118,23 @@ export function onMouseDown(
|
||||
const containerBounds = revueFlowNode.getBoundingClientRect();
|
||||
let recentHoveredHandle: Element;
|
||||
|
||||
setPosition({
|
||||
x: event.clientX - containerBounds.left,
|
||||
y: event.clientY - containerBounds.top
|
||||
});
|
||||
store.connectionPosition.x = event.clientX - containerBounds.left;
|
||||
store.connectionPosition.y = event.clientY - containerBounds.top;
|
||||
|
||||
setConnectionNodeId({ connectionNodeId: nodeId, connectionHandleId: handleId, connectionHandleType: handleType });
|
||||
onConnectStart?.(event, { nodeId, handleId, handleType });
|
||||
store.setConnectionNodeId({
|
||||
connectionNodeId: nodeId,
|
||||
connectionHandleId: handleId,
|
||||
connectionHandleType: handleType
|
||||
});
|
||||
hooks.connectStart.trigger({ event, params: { nodeId, handleId, handleType } });
|
||||
|
||||
function onMouseMove(event: MouseEvent) {
|
||||
setPosition({
|
||||
x: event.clientX - containerBounds.left,
|
||||
y: event.clientY - containerBounds.top
|
||||
});
|
||||
store.connectionPosition.x = event.clientX - containerBounds.left;
|
||||
store.connectionPosition.y = event.clientY - containerBounds.top;
|
||||
|
||||
const { connection, elementBelow, isValid, isHoveringHandle } = checkElementBelowIsValid(
|
||||
event,
|
||||
connectionMode,
|
||||
store.connectionMode,
|
||||
isTarget,
|
||||
nodeId,
|
||||
handleId,
|
||||
@@ -159,7 +158,7 @@ export function onMouseDown(
|
||||
function onMouseUp(event: MouseEvent) {
|
||||
const { connection, isValid } = checkElementBelowIsValid(
|
||||
event,
|
||||
connectionMode,
|
||||
store.connectionMode,
|
||||
isTarget,
|
||||
nodeId,
|
||||
handleId,
|
||||
@@ -167,20 +166,20 @@ export function onMouseDown(
|
||||
doc
|
||||
);
|
||||
|
||||
onConnectStop?.(event);
|
||||
hooks.connectStop.trigger(event);
|
||||
|
||||
if (isValid) {
|
||||
onConnect?.(connection);
|
||||
}
|
||||
|
||||
onConnectEnd?.(event);
|
||||
hooks.connectEnd.trigger(event);
|
||||
|
||||
if (elementEdgeUpdaterType && onEdgeUpdateEnd) {
|
||||
onEdgeUpdateEnd(event);
|
||||
}
|
||||
|
||||
resetRecentHandle(recentHoveredHandle);
|
||||
setConnectionNodeId({ connectionNodeId: null, connectionHandleId: null, connectionHandleType: null });
|
||||
store.setConnectionNodeId({ connectionNodeId: null, connectionHandleId: null, connectionHandleType: null });
|
||||
|
||||
doc.removeEventListener('mousemove', onMouseMove as EventListenerOrEventListenerObject);
|
||||
doc.removeEventListener('mouseup', onMouseUp as EventListenerOrEventListenerObject);
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import { Connection, ElementId, Position, RevueFlowStore } from '../../types';
|
||||
import { onMouseDown, ValidConnectionFunc } from './handler';
|
||||
import { computed, defineComponent, inject, PropType } from 'vue';
|
||||
import { RevueFlowHooks } from '../../hooks/RevueFlowHooks';
|
||||
|
||||
const alwaysValid = () => true;
|
||||
|
||||
@@ -39,6 +40,7 @@ const Handle = defineComponent({
|
||||
},
|
||||
setup(props, { slots }) {
|
||||
const store = inject<RevueFlowStore>('store')!;
|
||||
const hooks = inject<RevueFlowHooks>('hooks')!;
|
||||
const nodeId = inject<ElementId>('NodeIdContext') as ElementId;
|
||||
const isTarget = computed(() => props.type === 'target');
|
||||
const onConnect = computed(() => store.onConnect);
|
||||
@@ -51,19 +53,15 @@ const Handle = defineComponent({
|
||||
const onMouseDownHandler = (event: MouseEvent) => {
|
||||
onMouseDown(
|
||||
event,
|
||||
store,
|
||||
hooks,
|
||||
props.id as string,
|
||||
nodeId,
|
||||
store.setConnectionNodeId,
|
||||
store.setConnectionPosition,
|
||||
onConnectExtended,
|
||||
isTarget.value,
|
||||
props.isValidConnection,
|
||||
store.connectionMode,
|
||||
undefined,
|
||||
undefined,
|
||||
store.onConnectStart,
|
||||
store.onConnectStop,
|
||||
store.onConnectEnd
|
||||
undefined
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -0,0 +1,225 @@
|
||||
<template>
|
||||
<ZoomPane
|
||||
:onMove="onMove"
|
||||
:onMoveStart="onMoveStart"
|
||||
:onMoveEnd="onMoveEnd"
|
||||
:selectionKeyPressed="keyPressed"
|
||||
:elementsSelectable="elementsSelectable"
|
||||
:zoomOnScroll="zoomOnScroll"
|
||||
:zoomOnPinch="zoomOnPinch"
|
||||
:panOnScroll="panOnScroll"
|
||||
:panOnScrollSpeed="panOnScrollSpeed"
|
||||
:panOnScrollMode="panOnScrollMode"
|
||||
:zoomOnDoubleClick="zoomOnDoubleClick"
|
||||
:paneMoveable="paneMoveable"
|
||||
:defaultPosition="defaultPosition"
|
||||
:defaultZoom="defaultZoom"
|
||||
:translateExtent="translateExtent"
|
||||
:zoomActivationKeyCode="zoomActivationKeyCode"
|
||||
>
|
||||
<slot></slot>
|
||||
<UserSelection v-if="keyPressed" />
|
||||
<NodesSelection
|
||||
v-if="selectionActive"
|
||||
:onSelectionDragStart="onSelectionDragStart"
|
||||
:onSelectionDrag="onSelectionDrag"
|
||||
:onSelectionDragStop="onSelectionDragStop"
|
||||
:onSelectionContextMenu="onSelectionContextMenu"
|
||||
/>
|
||||
<div class="revue-flow__pane" @click="onClick" @onContextmenu="onContextMenu" @wheel="onWheel" />
|
||||
</ZoomPane>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent, inject, PropType } from 'vue';
|
||||
import ZoomPane from '../ZoomPane';
|
||||
import UserSelection from '../../components/UserSelection';
|
||||
import NodesSelection from '../../components/NodesSelection';
|
||||
import { RevueFlowStore, GraphViewProps } from '../../types';
|
||||
import useGlobalKeyHandler from '../../hooks/useGlobalKeyHandler';
|
||||
import useKeyPress from '../../hooks/useKeyPress';
|
||||
import { RevueFlowHooks } from '../../hooks/RevueFlowHooks';
|
||||
|
||||
type FlowRendererProps = Omit<
|
||||
GraphViewProps,
|
||||
| 'elements'
|
||||
| 'snapToGrid'
|
||||
| 'nodeTypes'
|
||||
| 'edgeTypes'
|
||||
| 'snapGrid'
|
||||
| 'connectionLineType'
|
||||
| 'arrowHeadColor'
|
||||
| 'onlyRenderVisibleElements'
|
||||
| 'selectNodesOnDrag'
|
||||
>;
|
||||
|
||||
const FlowRenderer = defineComponent({
|
||||
name: 'FlowRenderer',
|
||||
components: { UserSelection, ZoomPane, NodesSelection },
|
||||
props: {
|
||||
onPaneClick: {
|
||||
type: Function as unknown as PropType<FlowRendererProps['onPaneClick']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
onPaneContextMenu: {
|
||||
type: Function as unknown as PropType<FlowRendererProps['onPaneContextMenu']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
onPaneScroll: {
|
||||
type: Function as unknown as PropType<FlowRendererProps['onPaneScroll']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
onElementsRemove: {
|
||||
type: Function as unknown as PropType<FlowRendererProps['onElementsRemove']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
onMove: {
|
||||
type: Function as unknown as PropType<FlowRendererProps['onMove']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
onMoveStart: {
|
||||
type: Function as unknown as PropType<FlowRendererProps['onMoveStart']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
onMoveEnd: {
|
||||
type: Function as unknown as PropType<FlowRendererProps['onMoveEnd']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
onSelectionDragStart: {
|
||||
type: Function as unknown as PropType<FlowRendererProps['onSelectionDragStart']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
onSelectionDrag: {
|
||||
type: Function as unknown as PropType<FlowRendererProps['onSelectionDrag']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
onSelectionDragStop: {
|
||||
type: Function as unknown as PropType<FlowRendererProps['onSelectionDragStop']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
onSelectionContextMenu: {
|
||||
type: Function as unknown as PropType<FlowRendererProps['onSelectionContextMenu']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
deleteKeyCode: {
|
||||
type: [Number, String] as PropType<FlowRendererProps['deleteKeyCode']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
selectionKeyCode: {
|
||||
type: [Number, String] as PropType<FlowRendererProps['selectionKeyCode']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
multiSelectionKeyCode: {
|
||||
type: [Number, String] as PropType<FlowRendererProps['multiSelectionKeyCode']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
zoomActivationKeyCode: {
|
||||
type: [Number, String] as PropType<FlowRendererProps['zoomActivationKeyCode']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
elementsSelectable: {
|
||||
type: Boolean as PropType<FlowRendererProps['elementsSelectable']>,
|
||||
required: false,
|
||||
default: false
|
||||
},
|
||||
zoomOnScroll: {
|
||||
type: Boolean as PropType<FlowRendererProps['zoomOnScroll']>,
|
||||
required: false,
|
||||
default: false
|
||||
},
|
||||
zoomOnPinch: {
|
||||
type: Boolean as PropType<FlowRendererProps['zoomOnPinch']>,
|
||||
required: false,
|
||||
default: false
|
||||
},
|
||||
panOnScroll: {
|
||||
type: Boolean as PropType<FlowRendererProps['panOnScroll']>,
|
||||
required: false,
|
||||
default: false
|
||||
},
|
||||
panOnScrollSpeed: {
|
||||
type: Number as PropType<FlowRendererProps['panOnScrollSpeed']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
panOnScrollMode: {
|
||||
type: String as PropType<FlowRendererProps['panOnScrollMode']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
zoomOnDoubleClick: {
|
||||
type: Boolean as PropType<FlowRendererProps['zoomOnDoubleClick']>,
|
||||
required: false,
|
||||
default: false
|
||||
},
|
||||
paneMoveable: {
|
||||
type: Boolean as PropType<FlowRendererProps['paneMoveable']>,
|
||||
required: false,
|
||||
default: false
|
||||
},
|
||||
defaultPosition: {
|
||||
type: Array as unknown as PropType<FlowRendererProps['defaultPosition']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
defaultZoom: {
|
||||
type: Number as PropType<FlowRendererProps['defaultZoom']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
translateExtent: {
|
||||
type: Array as unknown as PropType<FlowRendererProps['translateExtent']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
}
|
||||
},
|
||||
setup(props) {
|
||||
const store = inject<RevueFlowStore>('store')!;
|
||||
const hooks = inject<RevueFlowHooks>('hooks')!;
|
||||
const keyPressed = useKeyPress(props.selectionKeyCode);
|
||||
|
||||
useGlobalKeyHandler({
|
||||
store,
|
||||
onElementsRemove: props.onElementsRemove,
|
||||
deleteKeyCode: props.deleteKeyCode,
|
||||
multiSelectionKeyCode: props.multiSelectionKeyCode
|
||||
});
|
||||
|
||||
const onClick = (event: MouseEvent) => {
|
||||
hooks.paneClick.trigger(event);
|
||||
store.unsetNodesSelection();
|
||||
store.resetSelectedElements();
|
||||
};
|
||||
|
||||
const onContextMenu = (event: MouseEvent) => hooks.paneContextMenu.trigger(event);
|
||||
|
||||
const onWheel = (event: WheelEvent) => hooks.paneScroll.trigger(event);
|
||||
|
||||
const selectionActive = computed(() => store.nodesSelectionActive);
|
||||
|
||||
return {
|
||||
onClick,
|
||||
onContextMenu,
|
||||
onWheel,
|
||||
keyPressed,
|
||||
selectionActive
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
export default FlowRenderer;
|
||||
</script>
|
||||
@@ -155,10 +155,11 @@ const FlowRenderer = defineComponent({
|
||||
}
|
||||
},
|
||||
setup(props, { slots }) {
|
||||
const store = inject<RevueFlowStore>('store');
|
||||
const store = inject<RevueFlowStore>('store')!;
|
||||
const keyPressed = useKeyPress(props.selectionKeyCode);
|
||||
|
||||
useGlobalKeyHandler({
|
||||
store,
|
||||
onElementsRemove: props.onElementsRemove,
|
||||
deleteKeyCode: props.deleteKeyCode as string,
|
||||
multiSelectionKeyCode: props.multiSelectionKeyCode as string
|
||||
|
||||
@@ -0,0 +1,480 @@
|
||||
<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"
|
||||
:panOnScroll="panOnScroll"
|
||||
:panOnScrollSpeed="panOnScrollSpeed"
|
||||
:panOnScrollMode="panOnScrollMode"
|
||||
:paneMoveable="paneMoveable"
|
||||
: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"
|
||||
:onlyRenderVisibleElements="onlyRenderVisibleElements"
|
||||
/>
|
||||
<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>
|
||||
</template>
|
||||
<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 { onLoadProject, onLoadGetElements, onLoadToObject } from '../../utils/graph';
|
||||
import { GraphViewProps, RevueFlowStore } from '../../types';
|
||||
import useZoomPanHelper from '../../hooks/useZoomPanHelper';
|
||||
import { RevueFlowHooks } from '../../hooks/RevueFlowHooks';
|
||||
|
||||
const GraphView = defineComponent({
|
||||
name: 'GraphView',
|
||||
components: { NodeRenderer, EdgeRenderer, FlowRenderer },
|
||||
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
|
||||
},
|
||||
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,
|
||||
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
|
||||
},
|
||||
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
|
||||
},
|
||||
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,
|
||||
default: undefined
|
||||
}
|
||||
},
|
||||
setup(props) {
|
||||
const store = inject<RevueFlowStore>('store')!;
|
||||
const hooks = inject<RevueFlowHooks>('hooks')!;
|
||||
|
||||
const { onReady } = useZoomPanHelper(store);
|
||||
onReady(({ zoomIn, zoomOut, zoomTo, transform, fitView, initialized }) => {
|
||||
if (initialized) {
|
||||
hooks.load.trigger({
|
||||
fitView: (params = { padding: 0.1 }) => fitView(params),
|
||||
zoomIn,
|
||||
zoomOut,
|
||||
zoomTo,
|
||||
setTransform: transform,
|
||||
project: onLoadProject(store),
|
||||
getElements: onLoadGetElements(store),
|
||||
toObject: onLoadToObject(store)
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
const init = () => {
|
||||
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);
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
};
|
||||
|
||||
watchEffect(() => {
|
||||
init();
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
export default GraphView;
|
||||
</script>
|
||||
@@ -1,4 +1,4 @@
|
||||
import { defineComponent, inject, onBeforeMount, onMounted, ref, PropType, CSSProperties } from 'vue';
|
||||
import { defineComponent, inject, onBeforeMount, onMounted, PropType, CSSProperties } from 'vue';
|
||||
import FlowRenderer from '../FlowRenderer';
|
||||
import NodeRenderer from '../NodeRenderer';
|
||||
import EdgeRenderer from '../EdgeRenderer';
|
||||
@@ -342,13 +342,11 @@ const GraphView = defineComponent({
|
||||
}
|
||||
},
|
||||
setup(props) {
|
||||
const store = inject<RevueFlowStore>('store');
|
||||
const isInitialized = ref<boolean>(false);
|
||||
const store = inject<RevueFlowStore>('store')!;
|
||||
|
||||
onMounted(() => {
|
||||
const { zoomIn, zoomOut, zoomTo, transform, fitView, initialized } = useZoomPanHelper();
|
||||
|
||||
if (!isInitialized.value && initialized) {
|
||||
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),
|
||||
@@ -361,58 +359,32 @@ const GraphView = defineComponent({
|
||||
toObject: onLoadToObject(store)
|
||||
});
|
||||
}
|
||||
isInitialized.value = true;
|
||||
}
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
if (typeof props.nodesConnectable !== 'undefined') {
|
||||
store?.setNodesConnectable(!!props.nodesConnectable);
|
||||
store.nodesConnectable = !!props.nodesConnectable;
|
||||
}
|
||||
if (typeof props.elementsSelectable !== 'undefined') {
|
||||
store?.setElementsSelectable(!!props.elementsSelectable);
|
||||
store.elementsSelectable = !!props.elementsSelectable;
|
||||
}
|
||||
if (typeof props.nodesDraggable !== 'undefined') {
|
||||
store.nodesDraggable = !!props.nodesDraggable;
|
||||
}
|
||||
|
||||
if (typeof props.connectionMode !== 'undefined') {
|
||||
store?.setConnectionMode(props.connectionMode);
|
||||
store.connectionMode = props.connectionMode;
|
||||
}
|
||||
});
|
||||
|
||||
onBeforeMount(() => {
|
||||
if (props.onConnect) {
|
||||
store?.setOnConnect(props.onConnect);
|
||||
}
|
||||
|
||||
if (props.onConnectStart) {
|
||||
store?.setOnConnectStart(props.onConnectStart);
|
||||
}
|
||||
|
||||
if (props.onConnectStop) {
|
||||
store?.setOnConnectStop(props.onConnectStop);
|
||||
}
|
||||
|
||||
if (props.onConnectEnd) {
|
||||
store?.setOnConnectEnd(props.onConnectEnd);
|
||||
}
|
||||
|
||||
if (typeof props.snapToGrid !== 'undefined') {
|
||||
store?.setSnapToGrid(props.snapToGrid);
|
||||
store.snapToGrid = props.snapToGrid;
|
||||
}
|
||||
|
||||
if (typeof props.snapGrid !== 'undefined') {
|
||||
store?.setSnapGrid(props.snapGrid);
|
||||
}
|
||||
|
||||
if (typeof props.nodesDraggable !== 'undefined') {
|
||||
store?.setNodesDraggable(!!props.nodesDraggable);
|
||||
}
|
||||
|
||||
if (typeof props.nodesConnectable !== 'undefined') {
|
||||
store?.setNodesConnectable(!!props.nodesConnectable);
|
||||
}
|
||||
|
||||
if (typeof props.elementsSelectable !== 'undefined') {
|
||||
store?.setElementsSelectable(!!props.elementsSelectable);
|
||||
store.snapGrid = props.snapGrid;
|
||||
}
|
||||
|
||||
if (typeof props.minZoom !== 'undefined') {
|
||||
|
||||
@@ -0,0 +1,491 @@
|
||||
<template>
|
||||
<div class="revue-flow">
|
||||
<GraphView
|
||||
:onLoad="onLoad"
|
||||
:onMove="onMove"
|
||||
:onMoveStart="onMoveStart"
|
||||
:onMoveEnd="onMoveEnd"
|
||||
:onElementClick="onElementClick"
|
||||
:onNodeMouseEnter="onNodeMouseEnter"
|
||||
:onNodeMouseMove="onNodeMouseMove"
|
||||
:onNodeMouseLeave="onNodeMouseLeave"
|
||||
:onNodeContextMenu="onNodeContextMenu"
|
||||
:onNodeDoubleClick="onNodeDoubleClick"
|
||||
:onNodeDragStart="onNodeDragStart"
|
||||
:onNodeDrag="onNodeDrag"
|
||||
:onNodeDragStop="onNodeDragStop"
|
||||
:nodeTypes="nodeTypesParsed"
|
||||
:edgeTypes="edgeTypesParsed"
|
||||
:connectionMode="connectionMode"
|
||||
:connectionLineType="connectionLineType"
|
||||
:connectionLineStyle="connectionLineStyle"
|
||||
:connectionLineComponent="connectionLineComponent"
|
||||
:selectionKeyCode="selectionKeyCode"
|
||||
:onElementsRemove="onElementsRemove"
|
||||
:deleteKeyCode="deleteKeyCode"
|
||||
:multiSelectionKeyCode="multiSelectionKeyCode"
|
||||
:zoomActivationKeyCode="zoomActivationKeyCode"
|
||||
:onConnect="onConnect"
|
||||
:onConnectStart="onConnectStart"
|
||||
:onConnectStop="onConnectStop"
|
||||
:onConnectEnd="onConnectEnd"
|
||||
:snapToGrid="snapToGrid"
|
||||
:snapGrid="snapGrid"
|
||||
:onlyRenderVisibleElements="onlyRenderVisibleElements"
|
||||
:nodesDraggable="nodesDraggable"
|
||||
:nodesConnectable="nodesConnectable"
|
||||
:elementsSelectable="elementsSelectable"
|
||||
:selectNodesOnDrag="selectNodesOnDrag"
|
||||
:minZoom="minZoom"
|
||||
:maxZoom="maxZoom"
|
||||
:defaultZoom="defaultZoom"
|
||||
:defaultPosition="defaultPosition"
|
||||
:translateExtent="translateExtent"
|
||||
:nodeExtent="nodeExtent"
|
||||
:arrowHeadColor="arrowHeadColor"
|
||||
:markerEndId="markerEndId"
|
||||
:zoomOnScroll="zoomOnScroll"
|
||||
:zoomOnPinch="zoomOnPinch"
|
||||
:zoomOnDoubleClick="zoomOnDoubleClick"
|
||||
:panOnScroll="panOnScroll"
|
||||
:panOnScrollSpeed="panOnScrollSpeed"
|
||||
:panOnScrollMode="panOnScrollMode"
|
||||
:paneMoveable="paneMoveable"
|
||||
:onPaneClick="onPaneClick"
|
||||
:onPaneScroll="onPaneScroll"
|
||||
:onPaneContextMenu="onPaneContextMenu"
|
||||
:onSelectionDragStart="onSelectionDragStart"
|
||||
:onSelectionDrag="onSelectionDrag"
|
||||
:onSelectionDragStop="onSelectionDragStop"
|
||||
:onSelectionContextMenu="onSelectionContextMenu"
|
||||
:onEdgeUpdate="onEdgeUpdate"
|
||||
:onEdgeContextMenu="onEdgeContextMenu"
|
||||
:onEdgeDoubleClick="onEdgeDoubleClick"
|
||||
:onEdgeMouseEnter="onEdgeMouseEnter"
|
||||
:onEdgeMouseMove="onEdgeMouseMove"
|
||||
:onEdgeMouseLeave="onEdgeMouseLeave"
|
||||
:onEdgeUpdateStart="onEdgeUpdateStart"
|
||||
:onEdgeUpdateEnd="onEdgeUpdateEnd"
|
||||
:edgeUpdaterRadius="edgeUpdaterRadius"
|
||||
/>
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent, onBeforeUnmount, onUpdated, PropType, provide, watch } from 'vue';
|
||||
import { useVModel } from '@vueuse/core';
|
||||
import '../../style.css';
|
||||
import '../../theme-default.css';
|
||||
import GraphView from '../GraphView/GraphView.vue';
|
||||
import DefaultNode from '../../components/Nodes/DefaultNode';
|
||||
import InputNode from '../../components/Nodes/InputNode';
|
||||
import OutputNode from '../../components/Nodes/OutputNode';
|
||||
import { createNodeTypes } from '../NodeRenderer/utils';
|
||||
import { BezierEdge, StepEdge, SmoothStepEdge, StraightEdge } from '../../components/Edges';
|
||||
import { createEdgeTypes } from '../EdgeRenderer/utils';
|
||||
import { ConnectionMode, ConnectionLineType, PanOnScrollMode, RevueFlowStore, RevueFlowProps } from '../../types';
|
||||
import { initialState } from '../../store';
|
||||
import configureStore from '../../store/configure-store';
|
||||
import { RevueFlowHooks, useRevueFlow } from '../../hooks/RevueFlowHooks';
|
||||
|
||||
const defaultNodeTypes = {
|
||||
input: InputNode,
|
||||
default: DefaultNode,
|
||||
output: OutputNode
|
||||
};
|
||||
|
||||
const defaultEdgeTypes = {
|
||||
default: BezierEdge,
|
||||
straight: StraightEdge,
|
||||
step: StepEdge,
|
||||
smoothstep: SmoothStepEdge
|
||||
};
|
||||
|
||||
const RevueFlow = defineComponent({
|
||||
name: 'RevueFlow',
|
||||
components: { GraphView },
|
||||
props: {
|
||||
modelValue: {
|
||||
type: Array as PropType<RevueFlowProps['elements']>,
|
||||
required: false,
|
||||
default: () => []
|
||||
},
|
||||
nodeTypesId: {
|
||||
type: String as PropType<RevueFlowProps['nodeTypesId']>,
|
||||
required: false,
|
||||
default: '1'
|
||||
},
|
||||
edgeTypesId: {
|
||||
type: String as PropType<RevueFlowProps['edgeTypesId']>,
|
||||
required: false,
|
||||
default: '1'
|
||||
},
|
||||
nodeTypes: {
|
||||
type: Object as PropType<RevueFlowProps['nodeTypes']>,
|
||||
required: false,
|
||||
default: () => defaultNodeTypes
|
||||
},
|
||||
edgeTypes: {
|
||||
type: Object as PropType<RevueFlowProps['edgeTypes']>,
|
||||
required: false,
|
||||
default: () => defaultEdgeTypes
|
||||
},
|
||||
onMove: {
|
||||
type: Function as unknown as PropType<RevueFlowProps['onMove']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
onMoveStart: {
|
||||
type: Function as unknown as PropType<RevueFlowProps['onMoveStart']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
onMoveEnd: {
|
||||
type: Function as unknown as PropType<RevueFlowProps['onMoveEnd']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
onLoad: {
|
||||
type: Function as unknown as PropType<RevueFlowProps['onLoad']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
onElementClick: {
|
||||
type: Function as unknown as PropType<RevueFlowProps['onElementClick']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
onNodeDoubleClick: {
|
||||
type: Function as unknown as PropType<RevueFlowProps['onNodeDoubleClick']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
onEdgeDoubleClick: {
|
||||
type: Function as unknown as PropType<RevueFlowProps['onEdgeDoubleClick']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
onNodeMouseEnter: {
|
||||
type: Function as unknown as PropType<RevueFlowProps['onNodeMouseEnter']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
onNodeMouseMove: {
|
||||
type: Function as unknown as PropType<RevueFlowProps['onNodeMouseMove']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
onNodeMouseLeave: {
|
||||
type: Function as unknown as PropType<RevueFlowProps['onNodeMouseLeave']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
onNodeContextMenu: {
|
||||
type: Function as unknown as PropType<RevueFlowProps['onNodeContextMenu']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
onNodeDragStart: {
|
||||
type: Function as unknown as PropType<RevueFlowProps['onNodeDragStart']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
onNodeDrag: {
|
||||
type: Function as unknown as PropType<RevueFlowProps['onNodeDrag']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
onNodeDragStop: {
|
||||
type: Function as unknown as PropType<RevueFlowProps['onNodeDragStop']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
onSelectionContextMenu: {
|
||||
type: Function as unknown as PropType<RevueFlowProps['onSelectionContextMenu']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
onElementsRemove: {
|
||||
type: Function as unknown as PropType<RevueFlowProps['onElementsRemove']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
onConnect: {
|
||||
type: Function as unknown as PropType<RevueFlowProps['onConnect']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
onConnectStart: {
|
||||
type: Function as unknown as PropType<RevueFlowProps['onConnectStart']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
onConnectStop: {
|
||||
type: Function as unknown as PropType<RevueFlowProps['onConnectStop']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
onConnectEnd: {
|
||||
type: Function as unknown as PropType<RevueFlowProps['onConnectEnd']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
connectionMode: {
|
||||
type: String as PropType<RevueFlowProps['connectionMode']>,
|
||||
required: false,
|
||||
default: ConnectionMode.Strict
|
||||
},
|
||||
connectionLineType: {
|
||||
type: String as PropType<RevueFlowProps['connectionLineType']>,
|
||||
required: false,
|
||||
default: ConnectionLineType.Bezier
|
||||
},
|
||||
connectionLineStyle: {
|
||||
type: Object as PropType<RevueFlowProps['connectionLineStyle']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
connectionLineComponent: {
|
||||
type: Object as PropType<RevueFlowProps['connectionLineComponent']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
selectionKeyCode: {
|
||||
type: [Number, String] as PropType<RevueFlowProps['selectionKeyCode']>,
|
||||
required: false,
|
||||
default: 'Shift'
|
||||
},
|
||||
multiSelectionKeyCode: {
|
||||
type: [Number, String] as PropType<RevueFlowProps['multiSelectionKeyCode']>,
|
||||
required: false,
|
||||
default: 'Meta'
|
||||
},
|
||||
zoomActivationKeyCode: {
|
||||
type: [Number, String] as PropType<RevueFlowProps['zoomActivationKeyCode']>,
|
||||
required: false,
|
||||
default: 'Meta'
|
||||
},
|
||||
deleteKeyCode: {
|
||||
type: [Number, String] as PropType<RevueFlowProps['deleteKeyCode']>,
|
||||
required: false,
|
||||
default: 'Backspace'
|
||||
},
|
||||
snapToGrid: {
|
||||
type: Boolean as PropType<RevueFlowProps['snapToGrid']>,
|
||||
required: false,
|
||||
default: false
|
||||
},
|
||||
snapGrid: {
|
||||
type: Array as unknown as PropType<RevueFlowProps['snapGrid']>,
|
||||
required: false,
|
||||
default: () => [15, 15]
|
||||
},
|
||||
onlyRenderVisibleElements: {
|
||||
type: Boolean as PropType<RevueFlowProps['onlyRenderVisibleElements']>,
|
||||
required: false,
|
||||
default: false
|
||||
},
|
||||
nodesDraggable: {
|
||||
type: Boolean as PropType<RevueFlowProps['nodesDraggable']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
nodesConnectable: {
|
||||
type: Boolean as PropType<RevueFlowProps['nodesConnectable']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
elementsSelectable: {
|
||||
type: Boolean as PropType<RevueFlowProps['elementsSelectable']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
selectNodesOnDrag: {
|
||||
type: Boolean as PropType<RevueFlowProps['selectNodesOnDrag']>,
|
||||
required: false,
|
||||
default: true
|
||||
},
|
||||
minZoom: {
|
||||
type: Number as PropType<RevueFlowProps['minZoom']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
maxZoom: {
|
||||
type: Number as PropType<RevueFlowProps['maxZoom']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
defaultZoom: {
|
||||
type: Number as PropType<RevueFlowProps['defaultZoom']>,
|
||||
required: false,
|
||||
default: 1
|
||||
},
|
||||
defaultPosition: {
|
||||
type: Array as unknown as PropType<RevueFlowProps['defaultPosition']>,
|
||||
required: false,
|
||||
default: () => [0, 0]
|
||||
},
|
||||
translateExtent: {
|
||||
type: Array as unknown as PropType<RevueFlowProps['translateExtent']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
nodeExtent: {
|
||||
type: Array as unknown as PropType<RevueFlowProps['nodeExtent']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
arrowHeadColor: {
|
||||
type: String as PropType<RevueFlowProps['arrowHeadColor']>,
|
||||
required: false,
|
||||
default: '#b1b1b7'
|
||||
},
|
||||
markerEndId: {
|
||||
type: String as PropType<RevueFlowProps['markerEndId']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
zoomOnScroll: {
|
||||
type: Boolean as PropType<RevueFlowProps['zoomOnScroll']>,
|
||||
required: false,
|
||||
default: true
|
||||
},
|
||||
zoomOnPinch: {
|
||||
type: Boolean as PropType<RevueFlowProps['zoomOnPinch']>,
|
||||
required: false,
|
||||
default: true
|
||||
},
|
||||
panOnScroll: {
|
||||
type: Boolean as PropType<RevueFlowProps['panOnScroll']>,
|
||||
required: false,
|
||||
default: false
|
||||
},
|
||||
panOnScrollSpeed: {
|
||||
type: Number as PropType<RevueFlowProps['panOnScrollSpeed']>,
|
||||
required: false,
|
||||
default: 0.5
|
||||
},
|
||||
panOnScrollMode: {
|
||||
type: String as PropType<RevueFlowProps['panOnScrollMode']>,
|
||||
required: false,
|
||||
default: PanOnScrollMode.Free
|
||||
},
|
||||
zoomOnDoubleClick: {
|
||||
type: Boolean as PropType<RevueFlowProps['zoomOnDoubleClick']>,
|
||||
required: false,
|
||||
default: true
|
||||
},
|
||||
paneMoveable: {
|
||||
type: Boolean as PropType<RevueFlowProps['paneMoveable']>,
|
||||
required: false,
|
||||
default: true
|
||||
},
|
||||
onPaneClick: {
|
||||
type: Function as unknown as PropType<RevueFlowProps['onPaneClick']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
onPaneScroll: {
|
||||
type: Function as unknown as PropType<RevueFlowProps['onPaneScroll']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
onPaneContextMenu: {
|
||||
type: Function as unknown as PropType<RevueFlowProps['onPaneContextMenu']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
onEdgeUpdate: {
|
||||
type: Function as unknown as PropType<RevueFlowProps['onEdgeUpdate']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
onEdgeMouseEnter: {
|
||||
type: Function as unknown as PropType<RevueFlowProps['onEdgeMouseEnter']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
onEdgeContextMenu: {
|
||||
type: Function as unknown as PropType<RevueFlowProps['onEdgeContextMenu']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
onEdgeMouseMove: {
|
||||
type: Function as unknown as PropType<RevueFlowProps['onEdgeMouseMove']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
onEdgeMouseLeave: {
|
||||
type: Function as unknown as PropType<RevueFlowProps['onEdgeMouseLeave']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
onEdgeUpdateEnd: {
|
||||
type: Function as unknown as PropType<RevueFlowProps['onEdgeUpdateEnd']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
onEdgeUpdateStart: {
|
||||
type: Function as unknown as PropType<RevueFlowProps['onEdgeUpdateStart']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
onSelectionDragStart: {
|
||||
type: Function as unknown as PropType<RevueFlowProps['onSelectionDragStart']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
onSelectionDrag: {
|
||||
type: Function as unknown as PropType<RevueFlowProps['onSelectionDrag']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
onSelectionDragStop: {
|
||||
type: Function as unknown as PropType<RevueFlowProps['onSelectionDragStop']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
onSelectionChange: {
|
||||
type: Function as unknown as PropType<RevueFlowProps['onSelectionChange']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
edgeUpdaterRadius: {
|
||||
type: Number as PropType<RevueFlowProps['edgeUpdaterRadius']>,
|
||||
required: false,
|
||||
default: 10
|
||||
}
|
||||
},
|
||||
emits: ['', 'load'],
|
||||
setup(props, { emit }) {
|
||||
const store = configureStore(initialState)();
|
||||
provide<RevueFlowStore>('store', store);
|
||||
provide<RevueFlowHooks>('hooks', useRevueFlow(emit));
|
||||
const elements = useVModel(props, 'modelValue', emit);
|
||||
|
||||
store.setElements(elements.value);
|
||||
watch(elements.value, () => {
|
||||
store.setElements(elements.value);
|
||||
});
|
||||
|
||||
onUpdated(() => {
|
||||
console.log('updated');
|
||||
store.setElements(elements.value);
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
store.$reset();
|
||||
store.setElements([]);
|
||||
});
|
||||
|
||||
const nodeTypesParsed = computed(() => props.nodeTypes && createNodeTypes({ ...defaultNodeTypes, ...props.nodeTypes }));
|
||||
const edgeTypesParsed = computed(() => props.edgeTypes && createEdgeTypes({ ...defaultEdgeTypes, ...props.edgeTypes }));
|
||||
|
||||
return {
|
||||
nodeTypesParsed: nodeTypesParsed.value,
|
||||
edgeTypesParsed: edgeTypesParsed.value
|
||||
};
|
||||
}
|
||||
});
|
||||
export default RevueFlow;
|
||||
</script>
|
||||
@@ -198,7 +198,7 @@ const ZoomPane = defineComponent({
|
||||
store.d3Zoom.on('zoom', null);
|
||||
} else {
|
||||
store.d3Zoom.on('zoom', (event: any) => {
|
||||
store.updateTransform([event.transform.x, event.transform.y, event.transform.k]);
|
||||
store.transform = [event.transform.x, event.transform.y, event.transform.k];
|
||||
|
||||
if (props.onMove) {
|
||||
const flowTransform = eventToFlowTransform(event.transform);
|
||||
|
||||
@@ -0,0 +1,96 @@
|
||||
// global hooks
|
||||
import { Connection, Edge, Elements, FlowTransform, Node, OnConnectStartParams, OnLoadParams } from '../types';
|
||||
import { createEventHook, EventHook } from '@vueuse/core';
|
||||
import { SetupContext } from 'vue';
|
||||
|
||||
export interface RevueFlowHooks {
|
||||
elementClick: EventHook<{ event: MouseEvent; element: Node | Edge }>;
|
||||
elementsRemove: EventHook<Elements>;
|
||||
nodeDoubleClick: EventHook<{ event: MouseEvent; node: Node }>;
|
||||
nodeMouseEnter: EventHook<{ event: MouseEvent; node: Node }>;
|
||||
nodeMouseMove: EventHook<{ event: MouseEvent; node: Node }>;
|
||||
nodeMouseLeave: EventHook<{ event: MouseEvent; node: Node }>;
|
||||
nodeContextMenu: EventHook<{ event: MouseEvent; node: Node }>;
|
||||
nodeDragStart: EventHook<{ event: MouseEvent; node: Node }>;
|
||||
nodeDrag: EventHook<{ event: MouseEvent; node: Node }>;
|
||||
nodeDragStop: EventHook<{ event: MouseEvent; node: Node }>;
|
||||
connect: EventHook<Edge | Connection>;
|
||||
connectStart: EventHook<{
|
||||
event: MouseEvent;
|
||||
params: OnConnectStartParams;
|
||||
}>;
|
||||
connectStop: EventHook<MouseEvent>;
|
||||
connectEnd: EventHook<MouseEvent>;
|
||||
load: EventHook<OnLoadParams>;
|
||||
move: EventHook<FlowTransform | undefined>;
|
||||
moveStart: EventHook<FlowTransform | undefined>;
|
||||
moveEnd: EventHook<FlowTransform | undefined>;
|
||||
selectionChange: EventHook<Elements | null>;
|
||||
selectionDragStart: EventHook<{ event: MouseEvent; nodes: Node[] }>;
|
||||
selectionDrag: EventHook<{ event: MouseEvent; nodes: Node[] }>;
|
||||
selectionDragStop: EventHook<{ event: MouseEvent; nodes: Node[] }>;
|
||||
selectionContextMenu: EventHook<{ event: MouseEvent; nodes: Node[] }>;
|
||||
paneScroll: EventHook<WheelEvent | undefined>;
|
||||
paneClick: EventHook<MouseEvent>;
|
||||
paneContextMenu: EventHook<MouseEvent>;
|
||||
edgeUpdate: EventHook<{ oldEdge: Edge; newConnection: Connection }>;
|
||||
edgeContextMenu: EventHook<{ event: MouseEvent; edge: Edge }>;
|
||||
edgeMouseEnter: EventHook<{ event: MouseEvent; edge: Edge }>;
|
||||
edgeMouseMove: EventHook<{ event: MouseEvent; edge: Edge }>;
|
||||
edgeMouseLeave: EventHook<{ event: MouseEvent; edge: Edge }>;
|
||||
edgeDoubleClick: EventHook<{ event: MouseEvent; edge: Edge }>;
|
||||
edgeUpdateStart: EventHook<{ event: MouseEvent; edge: Edge }>;
|
||||
edgeUpdateEnd: EventHook<{ event: MouseEvent; edge: Edge }>;
|
||||
}
|
||||
|
||||
export const useRevueFlow = (emit: SetupContext['emit']): RevueFlowHooks => {
|
||||
const eventHooks: RevueFlowHooks = {
|
||||
elementClick: createEventHook<{ event: MouseEvent; element: Node | Edge }>(),
|
||||
elementsRemove: createEventHook<Elements>(),
|
||||
nodeDoubleClick: createEventHook<{ event: MouseEvent; node: Node }>(),
|
||||
nodeMouseEnter: createEventHook<{ event: MouseEvent; node: Node }>(),
|
||||
nodeMouseMove: createEventHook<{ event: MouseEvent; node: Node }>(),
|
||||
nodeMouseLeave: createEventHook<{ event: MouseEvent; node: Node }>(),
|
||||
nodeContextMenu: createEventHook<{ event: MouseEvent; node: Node }>(),
|
||||
nodeDragStart: createEventHook<{ event: MouseEvent; node: Node }>(),
|
||||
nodeDrag: createEventHook<{ event: MouseEvent; node: Node }>(),
|
||||
nodeDragStop: createEventHook<{ event: MouseEvent; node: Node }>(),
|
||||
connect: createEventHook<Edge | Connection>(),
|
||||
connectStart: createEventHook<{
|
||||
event: MouseEvent;
|
||||
params: OnConnectStartParams;
|
||||
}>(),
|
||||
connectStop: createEventHook<MouseEvent>(),
|
||||
connectEnd: createEventHook<MouseEvent>(),
|
||||
load: createEventHook<OnLoadParams>(),
|
||||
move: createEventHook<FlowTransform | undefined>(),
|
||||
moveStart: createEventHook<FlowTransform | undefined>(),
|
||||
moveEnd: createEventHook<FlowTransform | undefined>(),
|
||||
selectionChange: createEventHook<Elements | null>(),
|
||||
selectionDragStart: createEventHook<{ event: MouseEvent; nodes: Node[] }>(),
|
||||
selectionDrag: createEventHook<{ event: MouseEvent; nodes: Node[] }>(),
|
||||
selectionDragStop: createEventHook<{ event: MouseEvent; nodes: Node[] }>(),
|
||||
selectionContextMenu: createEventHook<{ event: MouseEvent; nodes: Node[] }>(),
|
||||
paneScroll: createEventHook<WheelEvent | undefined>(),
|
||||
paneClick: createEventHook<MouseEvent>(),
|
||||
paneContextMenu: createEventHook<MouseEvent>(),
|
||||
edgeUpdate: createEventHook<{ oldEdge: Edge; newConnection: Connection }>(),
|
||||
edgeContextMenu: createEventHook<{ event: MouseEvent; edge: Edge }>(),
|
||||
edgeMouseEnter: createEventHook<{ event: MouseEvent; edge: Edge }>(),
|
||||
edgeMouseMove: createEventHook<{ event: MouseEvent; edge: Edge }>(),
|
||||
edgeMouseLeave: createEventHook<{ event: MouseEvent; edge: Edge }>(),
|
||||
edgeDoubleClick: createEventHook<{ event: MouseEvent; edge: Edge }>(),
|
||||
edgeUpdateStart: createEventHook<{ event: MouseEvent; edge: Edge }>(),
|
||||
edgeUpdateEnd: createEventHook<{ event: MouseEvent; edge: Edge }>()
|
||||
};
|
||||
|
||||
for (const [key, value] of Object.entries(eventHooks)) {
|
||||
value.on((data: any) => {
|
||||
emit(key, data);
|
||||
});
|
||||
}
|
||||
|
||||
return {
|
||||
...eventHooks
|
||||
};
|
||||
};
|
||||
@@ -1,21 +1,20 @@
|
||||
import useKeyPress from './useKeyPress';
|
||||
import { isNode, getConnectedEdges } from '../utils/graph';
|
||||
import { Elements, KeyCode, ElementId, FlowElement, RevueFlowStore, Edge } from '../types';
|
||||
import { computed, inject, watch } from 'vue';
|
||||
import { computed, watch } from 'vue';
|
||||
|
||||
interface HookParams {
|
||||
store: RevueFlowStore;
|
||||
deleteKeyCode: KeyCode;
|
||||
multiSelectionKeyCode: KeyCode;
|
||||
onElementsRemove?: (elements: Elements) => void;
|
||||
}
|
||||
|
||||
export default ({ deleteKeyCode, multiSelectionKeyCode, onElementsRemove }: HookParams): void => {
|
||||
const store = inject<RevueFlowStore>('store');
|
||||
|
||||
export default ({ store, deleteKeyCode, multiSelectionKeyCode, onElementsRemove }: HookParams): void => {
|
||||
const deleteKeyPressed = useKeyPress(deleteKeyCode);
|
||||
const multiSelectionKeyPressed = useKeyPress(multiSelectionKeyCode);
|
||||
const selectedElements = computed(() => store?.selectedElements || []);
|
||||
const edges = computed(() => store?.edges);
|
||||
const selectedElements = computed(() => store.selectedElements || []);
|
||||
const edges = computed(() => store.edges);
|
||||
|
||||
watch(selectedElements, () => {
|
||||
if (onElementsRemove && deleteKeyPressed.value && selectedElements.value.length > 0) {
|
||||
@@ -27,12 +26,12 @@ export default ({ deleteKeyCode, multiSelectionKeyCode, onElementsRemove }: Hook
|
||||
);
|
||||
|
||||
onElementsRemove(Array.from(elementsToRemove.values()));
|
||||
store?.unsetNodesSelection();
|
||||
store?.resetSelectedElements();
|
||||
store.unsetNodesSelection();
|
||||
store.resetSelectedElements();
|
||||
}
|
||||
});
|
||||
|
||||
watch(multiSelectionKeyPressed, () => {
|
||||
store?.setMultiSelectionActive(multiSelectionKeyPressed.value);
|
||||
store.multiSelectionActive = multiSelectionKeyPressed.value;
|
||||
});
|
||||
};
|
||||
|
||||
@@ -1,68 +1,85 @@
|
||||
import { zoomIdentity } from 'd3-zoom';
|
||||
import { computed } from 'vue';
|
||||
import { createEventHook, until } from '@vueuse/core';
|
||||
import { Selection, ZoomBehavior } from 'd3';
|
||||
import { getRectOfNodes, pointToRendererPoint, getTransformForBounds } from '../utils/graph';
|
||||
import { FitViewParams, FlowTransform, ZoomPanHelperFunctions, Rect, XYPosition, RevueFlowStore } from '../types';
|
||||
import { inject } from 'vue';
|
||||
|
||||
const DEFAULT_PADDING = 0.1;
|
||||
|
||||
const useZoomPanHelper = (): ZoomPanHelperFunctions => {
|
||||
const store = inject<RevueFlowStore>('store')!;
|
||||
const zoomPanHelperFunctions = () => {
|
||||
return {
|
||||
zoomIn: () => store.d3Zoom?.scaleBy(store.d3Selection as any, 1.2),
|
||||
zoomOut: () => store.d3Zoom?.scaleBy(store.d3Selection as any, 1 / 1.2),
|
||||
zoomTo: (zoomLevel: number) => store.d3Zoom?.scaleTo(store.d3Selection as any, zoomLevel),
|
||||
transform: (transform: FlowTransform) => {
|
||||
const nextTransform = zoomIdentity.translate(transform.x, transform.y).scale(transform.zoom);
|
||||
const useZoomPanHelper = (store: RevueFlowStore) => {
|
||||
const zoomPanHelperEvent = createEventHook<ZoomPanHelperFunctions>();
|
||||
const d3Zoom = computed(() => store.d3Zoom);
|
||||
const d3Selection = computed(() => store.d3Selection);
|
||||
|
||||
store.d3Zoom?.transform(store.d3Selection as any, nextTransform);
|
||||
},
|
||||
fitView: (options: FitViewParams = { padding: DEFAULT_PADDING, includeHiddenNodes: false }) => {
|
||||
const { nodes, width, height, minZoom, maxZoom } = store;
|
||||
const createZoomPanHelper = (
|
||||
d3Zoom: ZoomBehavior<Element, unknown>,
|
||||
d3Selection: Selection<Element, any, any, any>
|
||||
): ZoomPanHelperFunctions => ({
|
||||
zoomIn: () => d3Zoom?.scaleBy(d3Selection, 1.2),
|
||||
zoomOut: () => d3Zoom?.scaleBy(d3Selection, 1 / 1.2),
|
||||
zoomTo: (zoomLevel: number) => d3Zoom.scaleTo(d3Selection, zoomLevel),
|
||||
transform: (transform: FlowTransform) => {
|
||||
const nextTransform = zoomIdentity.translate(transform.x, transform.y).scale(transform.zoom);
|
||||
|
||||
if (!nodes.length) {
|
||||
return;
|
||||
}
|
||||
d3Zoom.transform(d3Selection, nextTransform);
|
||||
},
|
||||
fitView: (options: FitViewParams = { padding: DEFAULT_PADDING, includeHiddenNodes: false }) => {
|
||||
const { nodes, width, height, minZoom, maxZoom } = store;
|
||||
|
||||
const bounds = getRectOfNodes(options.includeHiddenNodes ? nodes : nodes.filter((node) => !node.isHidden));
|
||||
const [x, y, zoom] = getTransformForBounds(
|
||||
bounds,
|
||||
width,
|
||||
height,
|
||||
options.minZoom || minZoom,
|
||||
options.maxZoom || maxZoom,
|
||||
options.padding || DEFAULT_PADDING
|
||||
);
|
||||
const transform = zoomIdentity.translate(x, y).scale(zoom);
|
||||
if (!nodes.length) {
|
||||
return;
|
||||
}
|
||||
|
||||
store.d3Zoom?.transform(store.d3Selection as any, transform);
|
||||
},
|
||||
setCenter: (x: number, y: number, zoom?: number) => {
|
||||
const { width, height, maxZoom } = store;
|
||||
const bounds = getRectOfNodes(options.includeHiddenNodes ? nodes : nodes.filter((node) => !node.isHidden));
|
||||
const [x, y, zoom] = getTransformForBounds(
|
||||
bounds,
|
||||
width,
|
||||
height,
|
||||
options.minZoom || minZoom,
|
||||
options.maxZoom || maxZoom,
|
||||
options.padding || DEFAULT_PADDING
|
||||
);
|
||||
const transform = zoomIdentity.translate(x, y).scale(zoom);
|
||||
|
||||
const nextZoom = typeof zoom !== 'undefined' ? zoom : maxZoom;
|
||||
const centerX = width / 2 - x * nextZoom;
|
||||
const centerY = height / 2 - y * nextZoom;
|
||||
const transform = zoomIdentity.translate(centerX, centerY).scale(nextZoom);
|
||||
d3Zoom?.transform(d3Selection, transform);
|
||||
},
|
||||
setCenter: (x: number, y: number, zoom?: number) => {
|
||||
const { width, height, maxZoom } = store;
|
||||
|
||||
store.d3Zoom?.transform(store.d3Selection as any, transform);
|
||||
},
|
||||
fitBounds: (bounds: Rect, padding = DEFAULT_PADDING) => {
|
||||
const { width, height, minZoom, maxZoom } = store;
|
||||
const [x, y, zoom] = getTransformForBounds(bounds, width, height, minZoom, maxZoom, padding);
|
||||
const transform = zoomIdentity.translate(x, y).scale(zoom);
|
||||
const nextZoom = typeof zoom !== 'undefined' ? zoom : maxZoom;
|
||||
const centerX = width / 2 - x * nextZoom;
|
||||
const centerY = height / 2 - y * nextZoom;
|
||||
const transform = zoomIdentity.translate(centerX, centerY).scale(nextZoom);
|
||||
|
||||
store.d3Zoom?.transform(store.d3Selection as any, transform);
|
||||
},
|
||||
project: (position: XYPosition) => {
|
||||
const { transform, snapToGrid, snapGrid } = store;
|
||||
return pointToRendererPoint(position, transform, snapToGrid, snapGrid);
|
||||
},
|
||||
initialized: true
|
||||
};
|
||||
d3Zoom.transform(d3Selection, transform);
|
||||
},
|
||||
fitBounds: (bounds: Rect, padding = DEFAULT_PADDING) => {
|
||||
const { width, height, minZoom, maxZoom } = store;
|
||||
const [x, y, zoom] = getTransformForBounds(bounds, width, height, minZoom, maxZoom, padding);
|
||||
const transform = zoomIdentity.translate(x, y).scale(zoom);
|
||||
|
||||
d3Zoom.transform(d3Selection, transform);
|
||||
},
|
||||
project: (position: XYPosition) => {
|
||||
const { transform, snapToGrid, snapGrid } = store;
|
||||
return pointToRendererPoint(position, transform, snapToGrid, snapGrid);
|
||||
},
|
||||
initialized: true
|
||||
});
|
||||
|
||||
until(d3Zoom)
|
||||
.toBeTruthy()
|
||||
.then(() => {
|
||||
if (d3Zoom.value && d3Selection.value) {
|
||||
zoomPanHelperEvent.trigger(createZoomPanHelper(d3Zoom.value, d3Selection.value));
|
||||
} else {
|
||||
throw Error('D3 could not be initialized.');
|
||||
}
|
||||
});
|
||||
return {
|
||||
onReady: zoomPanHelperEvent.on
|
||||
};
|
||||
|
||||
return zoomPanHelperFunctions();
|
||||
};
|
||||
|
||||
export default useZoomPanHelper;
|
||||
|
||||
+1
-1
@@ -1,4 +1,4 @@
|
||||
export { default as default } from './container/RevueFlow';
|
||||
export { default as default } from './container/RevueFlow/RevueFlow.vue';
|
||||
export { default as Handle } from './components/Handle';
|
||||
export { default as EdgeText } from './components/Edges/EdgeText';
|
||||
export { getBezierPath } from './components/Edges/BezierEdge';
|
||||
|
||||
@@ -21,18 +21,6 @@ export default function configureStore(
|
||||
state: () => preloadedState,
|
||||
getters: {},
|
||||
actions: {
|
||||
setOnConnect(onConnect) {
|
||||
this.onConnect = onConnect;
|
||||
},
|
||||
setOnConnectStart(onConnectStart) {
|
||||
this.onConnectStart = onConnectStart;
|
||||
},
|
||||
setOnConnectEnd(onConnectEnd) {
|
||||
this.onConnectEnd = onConnectEnd;
|
||||
},
|
||||
setOnConnectStop(onConnectStop) {
|
||||
this.onConnectStop = onConnectStop;
|
||||
},
|
||||
setElements(elements) {
|
||||
const propElements = elements;
|
||||
const nextElements: NextElements = {
|
||||
@@ -252,46 +240,19 @@ export default function configureStore(
|
||||
unsetNodesSelection() {
|
||||
this.nodesSelectionActive = false;
|
||||
},
|
||||
updateTransform(transform) {
|
||||
this.transform = transform;
|
||||
},
|
||||
updateSize(size) {
|
||||
this.height = size.height;
|
||||
this.width = size.width;
|
||||
},
|
||||
setConnectionPosition(connectionPosition) {
|
||||
this.connectionPosition = connectionPosition;
|
||||
},
|
||||
setConnectionNodeId(payload) {
|
||||
this.connectionNodeId = payload.connectionNodeId;
|
||||
this.connectionHandleId = payload.connectionHandleId;
|
||||
this.connectionHandleType = payload.connectionHandleType;
|
||||
},
|
||||
setSnapToGrid(snapToGrid) {
|
||||
this.snapToGrid = snapToGrid;
|
||||
},
|
||||
setSnapGrid(snapGrid) {
|
||||
this.snapGrid = snapGrid;
|
||||
},
|
||||
setInteractive(isInteractive) {
|
||||
this.nodesDraggable = isInteractive;
|
||||
this.nodesConnectable = isInteractive;
|
||||
this.elementsSelectable = isInteractive;
|
||||
},
|
||||
setNodesDraggable(nodesDraggable) {
|
||||
this.nodesDraggable = nodesDraggable;
|
||||
},
|
||||
setNodesConnectable(nodesConnectable) {
|
||||
this.nodesConnectable = nodesConnectable;
|
||||
},
|
||||
setElementsSelectable(elementsSelectable) {
|
||||
this.elementsSelectable = elementsSelectable;
|
||||
},
|
||||
setMultiSelectionActive(multiSelectionActive) {
|
||||
this.multiSelectionActive = multiSelectionActive;
|
||||
},
|
||||
setConnectionMode(connectionMode) {
|
||||
this.connectionMode = connectionMode;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
+8
-21
@@ -870,10 +870,6 @@ export interface RevueFlowState {
|
||||
}
|
||||
|
||||
export type RevueFlowActions = {
|
||||
setOnConnect: (onConnect: OnConnectFunc) => void;
|
||||
setOnConnectStart: (onConnectStart: OnConnectStartFunc) => void;
|
||||
setOnConnectStop: (onConnectStop: OnConnectStopFunc) => void;
|
||||
setOnConnectEnd: (onConnectEnd: OnConnectEndFunc) => void;
|
||||
setElements: (elements: Elements) => void;
|
||||
updateNodeDimensions: (updates: NodeDimensionUpdate[]) => void;
|
||||
updateNodePos: (payload: NodePosUpdate) => void;
|
||||
@@ -889,18 +885,9 @@ export type RevueFlowActions = {
|
||||
setNodeExtent: (nodeExtent: NodeExtent) => void;
|
||||
resetSelectedElements: () => void;
|
||||
unsetNodesSelection: () => void;
|
||||
updateTransform: (transform: Transform) => void;
|
||||
updateSize: (size: Dimensions) => void;
|
||||
setConnectionPosition: (connectionPosition: XYPosition) => void;
|
||||
setConnectionNodeId: (payload: SetConnectionId) => void;
|
||||
setSnapToGrid: (snapToGrid: boolean) => void;
|
||||
setSnapGrid: (snapGrid: SnapGrid) => void;
|
||||
setInteractive: (isInteractive: boolean) => void;
|
||||
setNodesDraggable: (nodesDraggable: boolean) => void;
|
||||
setNodesConnectable: (nodesConnectable: boolean) => void;
|
||||
setElementsSelectable: (elementsSelectable: boolean) => void;
|
||||
setMultiSelectionActive: (multiSelectionActive: boolean) => void;
|
||||
setConnectionMode: (connectionMode: ConnectionMode) => void;
|
||||
};
|
||||
|
||||
export type RevueFlowStore = Store<string, RevueFlowState, any, RevueFlowActions>;
|
||||
@@ -935,6 +922,14 @@ export interface RevueFlowProps extends Omit<HTMLAttributes, 'onLoad'> {
|
||||
onPaneScroll?: (event?: WheelEvent) => void;
|
||||
onPaneClick?: (event: MouseEvent) => void;
|
||||
onPaneContextMenu?: (event: MouseEvent) => void;
|
||||
onEdgeUpdate?: OnEdgeUpdateFunc;
|
||||
onEdgeContextMenu?: (event: MouseEvent, edge: Edge) => void;
|
||||
onEdgeMouseEnter?: (event: MouseEvent, edge: Edge) => void;
|
||||
onEdgeMouseMove?: (event: MouseEvent, edge: Edge) => void;
|
||||
onEdgeMouseLeave?: (event: MouseEvent, edge: Edge) => void;
|
||||
onEdgeDoubleClick?: (event: MouseEvent, edge: Edge) => void;
|
||||
onEdgeUpdateStart?: (event: MouseEvent, edge: Edge) => void;
|
||||
onEdgeUpdateEnd?: (event: MouseEvent, edge: Edge) => void;
|
||||
nodeTypes?: NodeTypesType;
|
||||
edgeTypes?: EdgeTypesType;
|
||||
connectionMode?: ConnectionMode;
|
||||
@@ -967,14 +962,6 @@ export interface RevueFlowProps extends Omit<HTMLAttributes, 'onLoad'> {
|
||||
panOnScrollSpeed?: number;
|
||||
panOnScrollMode?: PanOnScrollMode;
|
||||
zoomOnDoubleClick?: boolean;
|
||||
onEdgeUpdate?: OnEdgeUpdateFunc;
|
||||
onEdgeContextMenu?: (event: MouseEvent, edge: Edge) => void;
|
||||
onEdgeMouseEnter?: (event: MouseEvent, edge: Edge) => void;
|
||||
onEdgeMouseMove?: (event: MouseEvent, edge: Edge) => void;
|
||||
onEdgeMouseLeave?: (event: MouseEvent, edge: Edge) => void;
|
||||
onEdgeDoubleClick?: (event: MouseEvent, edge: Edge) => void;
|
||||
onEdgeUpdateStart?: (event: MouseEvent, edge: Edge) => void;
|
||||
onEdgeUpdateEnd?: (event: MouseEvent, edge: Edge) => void;
|
||||
edgeUpdaterRadius?: number;
|
||||
nodeTypesId?: string;
|
||||
edgeTypesId?: string;
|
||||
|
||||
Reference in New Issue
Block a user