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
@@ -5,6 +5,7 @@
|
||||
:onElementsRemove="onElementsRemove"
|
||||
:onConnect="onConnect"
|
||||
:onNodeDragStop="onNodeDragStop"
|
||||
:onNodeClick="onElementClick"
|
||||
:defaultZoom="1.5"
|
||||
:minZoom="0.2"
|
||||
:maxZoom="4"
|
||||
@@ -15,10 +16,10 @@
|
||||
<Controls />
|
||||
<Background color="#aaa" :gap="8" />
|
||||
<div style="position: absolute; right: 10px; top: 10px; z-index: 4">
|
||||
<button :onClick="resetTransform" style="margin-right: 5px">reset transform</button>
|
||||
<button :onClick="updatePos" style="margin-right: 5px">change pos</button>
|
||||
<button :onClick="toggleClassnames" style="margin-right: 5px">toggle classnames</button>
|
||||
<button :onClick="logToObject">toObject</button>
|
||||
<button @click="resetTransform" style="margin-right: 5px">reset transform</button>
|
||||
<button @click="updatePos" style="margin-right: 5px">change pos</button>
|
||||
<button @click="toggleClassnames" style="margin-right: 5px">toggle classnames</button>
|
||||
<button @click="logToObject">toObject</button>
|
||||
</div>
|
||||
</RevueFlow>
|
||||
</template>
|
||||
@@ -31,7 +32,6 @@ import RevueFlow, {
|
||||
Edge,
|
||||
Elements,
|
||||
FlowElement,
|
||||
Node,
|
||||
OnLoadParams,
|
||||
addEdge,
|
||||
isNode,
|
||||
@@ -42,8 +42,8 @@ import { defineComponent, ref } from 'vue';
|
||||
const BasicFlow = defineComponent({
|
||||
components: { RevueFlow, MiniMap, Controls, Background },
|
||||
setup() {
|
||||
const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node);
|
||||
const onElementClick = (_: MouseEvent, element: FlowElement) => console.log('click', element);
|
||||
const onNodeDragStop = ({ node }) => console.log('drag stop', node);
|
||||
const onElementClick = ({ node }) => console.log('click', node);
|
||||
const elements = ref<Elements>([
|
||||
{ id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 } },
|
||||
{ id: '2', data: { label: 'Node 2' }, position: { x: 100, y: 100 } },
|
||||
@@ -51,7 +51,7 @@ const BasicFlow = defineComponent({
|
||||
{ id: '4', data: { label: 'Node 4' }, position: { x: 400, y: 200 } },
|
||||
{ id: 'e1-2', source: '1', target: '2', animated: true },
|
||||
{ id: 'e1-3', source: '1', target: '3' }
|
||||
]);
|
||||
] as Elements);
|
||||
const rfInstance = ref<OnLoadParams | null>(null);
|
||||
const onElementsRemove = (elementsToRemove: Elements) =>
|
||||
(elements.value = removeElements(elementsToRemove, elements.value as Elements));
|
||||
|
||||
+3
-3
@@ -45,10 +45,10 @@
|
||||
"@rollup/plugin-replace": "^2.4.2",
|
||||
"@typescript-eslint/eslint-plugin": "^4.28.1",
|
||||
"@typescript-eslint/parser": "^4.28.1",
|
||||
"@vitejs/plugin-vue": "^1.2.3",
|
||||
"@vitejs/plugin-vue": "^1.2.5",
|
||||
"@vitejs/plugin-vue-jsx": "^1.1.6",
|
||||
"@vue/babel-plugin-jsx": "^1.0.6",
|
||||
"@vue/compiler-sfc": "^3.0.5",
|
||||
"@vue/compiler-sfc": "^3.2.0-beta.5",
|
||||
"@vue/eslint-config-typescript": "^7.0.0",
|
||||
"autoprefixer": "^10.2.6",
|
||||
"babel-eslint": "latest",
|
||||
@@ -72,7 +72,7 @@
|
||||
"typescript": "^4.3.5",
|
||||
"vite": "^2.3.8",
|
||||
"vite-svg-loader": "^2.1.0",
|
||||
"vue": "^3.0.5",
|
||||
"vue": "^3.2.0-beta.5",
|
||||
"vue-router": "4",
|
||||
"vue-tsc": "^0.0.24"
|
||||
},
|
||||
|
||||
@@ -100,8 +100,8 @@ const MiniMap = defineComponent({
|
||||
key={node.id}
|
||||
x={node.__rf.position.x}
|
||||
y={node.__rf.position.y}
|
||||
width={node.__rf.width}
|
||||
height={node.__rf.height}
|
||||
width={node.__rf.width || 0}
|
||||
height={node.__rf.height || 0}
|
||||
style={node.style}
|
||||
class={nodeClassNameFunc.value(node)}
|
||||
color={nodeColorFunc.value(node)}
|
||||
|
||||
@@ -0,0 +1,133 @@
|
||||
<template>
|
||||
<g v-show="sourceNode && nodesConnectable" class="revue-flow__connection">
|
||||
<g v-if="CustomConnectionLineComponent" class="revue-flow__connection">
|
||||
<component
|
||||
:is="CustomConnectionLineComponent"
|
||||
:sourceX="sourceX"
|
||||
:sourceY="sourceY"
|
||||
:sourcePosition="sourceHandle.position"
|
||||
:targetX="targetX"
|
||||
:targetY="targetY"
|
||||
:targetPosition="targetPosition"
|
||||
:connectionLineType="connectionLineType"
|
||||
:connectionLineStyle="connectionLineStyle"
|
||||
/>
|
||||
</g>
|
||||
<path v-else class="revue-flow__connection-path" :d="dAttr" :style="connectionLineStyle" />
|
||||
</g>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { ref, defineComponent, CSSProperties, PropType, computed, inject } from 'vue';
|
||||
|
||||
import { getBezierPath } from '../Edges/BezierEdge';
|
||||
import { getSmoothStepPath } from '../Edges/SmoothStepEdge';
|
||||
import { Node, HandleElement, Position, ConnectionLineType, ConnectionLineComponent, RevueFlowStore } from '../../types';
|
||||
|
||||
interface ConnectionLineProps {
|
||||
connectionLineType: ConnectionLineType;
|
||||
connectionLineStyle?: CSSProperties;
|
||||
CustomConnectionLineComponent?: ConnectionLineComponent;
|
||||
}
|
||||
|
||||
const ConnectionLine = defineComponent({
|
||||
props: {
|
||||
connectionLineType: {
|
||||
type: String as PropType<ConnectionLineProps['connectionLineType']>,
|
||||
required: false,
|
||||
default: ConnectionLineType.Bezier
|
||||
},
|
||||
connectionLineStyle: {
|
||||
type: Object as PropType<ConnectionLineProps['connectionLineStyle']>,
|
||||
required: false,
|
||||
default: () => {}
|
||||
},
|
||||
CustomConnectionLineComponent: {
|
||||
type: Object as PropType<ConnectionLineProps['CustomConnectionLineComponent']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
}
|
||||
},
|
||||
setup(props) {
|
||||
const store = inject<RevueFlowStore>('store')!;
|
||||
const sourceNode = ref<Node | null>(store.nodes.find((n) => n.id === store.connectionNodeId) || null);
|
||||
const nodesConnectable = computed(() => store.nodesConnectable);
|
||||
|
||||
const sourceHandle = computed(() =>
|
||||
store.connectionHandleId && store.connectionHandleType
|
||||
? sourceNode.value?.__rf.handleBounds[store.connectionHandleType].find(
|
||||
(d: HandleElement) => d.id === store.connectionHandleId
|
||||
)
|
||||
: store.connectionHandleType && sourceNode.value?.__rf.handleBounds[store.connectionHandleType][0]
|
||||
);
|
||||
const sourceHandleX = computed(() =>
|
||||
sourceHandle.value ? sourceHandle.value.x + sourceHandle.value.width / 2 : (sourceNode.value?.__rf.width as number) / 2
|
||||
);
|
||||
const sourceHandleY = computed(() =>
|
||||
sourceHandle.value ? sourceHandle.value.y + sourceHandle.value.height / 2 : sourceNode.value?.__rf.height
|
||||
);
|
||||
const sourceX = computed(() => sourceNode.value?.__rf.position.x + sourceHandleX.value);
|
||||
const sourceY = computed(() => sourceNode.value?.__rf.position.y + sourceHandleY.value);
|
||||
|
||||
const targetX = computed(() => (store.connectionPosition.x - store.transform[0]) / store.transform[2]);
|
||||
const targetY = computed(() => (store.connectionPosition.y - store.transform[1]) / store.transform[2]);
|
||||
|
||||
const isRightOrLeft = computed(
|
||||
() => sourceHandle.value?.position === Position.Left || sourceHandle.value?.position === Position.Right
|
||||
);
|
||||
const targetPosition = computed(() => (isRightOrLeft.value ? Position.Left : Position.Top));
|
||||
|
||||
let dAttr = computed(() => `M${sourceX.value},${sourceY.value} ${targetX.value},${targetY.value}`);
|
||||
|
||||
if (props.connectionLineType === ConnectionLineType.Bezier) {
|
||||
dAttr = computed(() =>
|
||||
getBezierPath({
|
||||
sourceX: sourceX.value,
|
||||
sourceY: sourceY.value,
|
||||
sourcePosition: sourceHandle.value?.position,
|
||||
targetX: targetX.value,
|
||||
targetY: targetY.value,
|
||||
targetPosition: targetPosition.value
|
||||
})
|
||||
);
|
||||
} else if (props.connectionLineType === ConnectionLineType.Step) {
|
||||
dAttr = computed(() =>
|
||||
getSmoothStepPath({
|
||||
sourceX: sourceX.value,
|
||||
sourceY: sourceY.value,
|
||||
sourcePosition: sourceHandle.value?.position,
|
||||
targetX: targetX.value,
|
||||
targetY: targetY.value,
|
||||
targetPosition: targetPosition.value,
|
||||
borderRadius: 0
|
||||
})
|
||||
);
|
||||
} else if (props.connectionLineType === ConnectionLineType.SmoothStep) {
|
||||
dAttr = computed(() =>
|
||||
getSmoothStepPath({
|
||||
sourceX: sourceX.value,
|
||||
sourceY: sourceY.value,
|
||||
sourcePosition: sourceHandle.value?.position,
|
||||
targetX: targetX.value,
|
||||
targetY: targetY.value,
|
||||
targetPosition: targetPosition.value
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
return {
|
||||
dAttr,
|
||||
targetX,
|
||||
targetY,
|
||||
sourceX,
|
||||
sourceY,
|
||||
sourceHandle,
|
||||
sourceNode,
|
||||
sourceHandleX,
|
||||
sourceHandleY,
|
||||
nodesConnectable
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
export default ConnectionLine;
|
||||
</script>
|
||||
@@ -1,181 +0,0 @@
|
||||
import { ref, defineComponent, CSSProperties, PropType, computed } from 'vue';
|
||||
|
||||
import { getBezierPath } from '../Edges/BezierEdge';
|
||||
import { getSmoothStepPath } from '../Edges/SmoothStepEdge';
|
||||
import {
|
||||
ElementId,
|
||||
Node,
|
||||
Transform,
|
||||
HandleElement,
|
||||
Position,
|
||||
ConnectionLineType,
|
||||
ConnectionLineComponent,
|
||||
HandleType
|
||||
} from '../../types';
|
||||
|
||||
interface ConnectionLineProps {
|
||||
connectionNodeId: ElementId;
|
||||
connectionHandleId: ElementId | null;
|
||||
connectionHandleType: HandleType;
|
||||
connectionPositionX: number;
|
||||
connectionPositionY: number;
|
||||
connectionLineType: ConnectionLineType;
|
||||
nodes: Node[];
|
||||
transform: Transform;
|
||||
isConnectable: boolean;
|
||||
connectionLineStyle?: CSSProperties;
|
||||
CustomConnectionLineComponent?: ConnectionLineComponent;
|
||||
}
|
||||
|
||||
const ConnectionLine = defineComponent({
|
||||
props: {
|
||||
connectionNodeId: {
|
||||
type: String as PropType<ConnectionLineProps['connectionNodeId']>,
|
||||
required: true
|
||||
},
|
||||
connectionHandleId: {
|
||||
type: String as PropType<ConnectionLineProps['connectionHandleId']>,
|
||||
required: true
|
||||
},
|
||||
connectionHandleType: {
|
||||
type: String as PropType<ConnectionLineProps['connectionHandleType']>,
|
||||
required: true
|
||||
},
|
||||
connectionLineStyle: {
|
||||
type: Object as PropType<ConnectionLineProps['connectionLineStyle']>,
|
||||
required: false,
|
||||
default: () => ({})
|
||||
},
|
||||
connectionPositionX: {
|
||||
type: Number as PropType<ConnectionLineProps['connectionPositionX']>,
|
||||
required: false,
|
||||
default: 0
|
||||
},
|
||||
connectionPositionY: {
|
||||
type: Number as PropType<ConnectionLineProps['connectionPositionY']>,
|
||||
required: false,
|
||||
default: 0
|
||||
},
|
||||
connectionLineType: {
|
||||
type: String as PropType<ConnectionLineProps['connectionLineType']>,
|
||||
required: false,
|
||||
default: ConnectionLineType.Bezier
|
||||
},
|
||||
nodes: {
|
||||
type: Array as PropType<ConnectionLineProps['nodes']>,
|
||||
required: true,
|
||||
default: () => []
|
||||
},
|
||||
transform: {
|
||||
type: Object as PropType<ConnectionLineProps['transform']>,
|
||||
required: false,
|
||||
default: () => ({})
|
||||
},
|
||||
isConnectable: {
|
||||
type: Boolean as PropType<ConnectionLineProps['isConnectable']>,
|
||||
required: false,
|
||||
default: false
|
||||
},
|
||||
CustomConnectionLineComponent: {
|
||||
type: Object as PropType<ConnectionLineProps['CustomConnectionLineComponent']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
}
|
||||
},
|
||||
setup(props) {
|
||||
const sourceNode = ref<Node | null>(props.nodes.find((n) => n.id === props.connectionNodeId) || null);
|
||||
|
||||
if (!sourceNode.value || !props.isConnectable) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const sourceHandle = computed(() =>
|
||||
props.connectionHandleId
|
||||
? sourceNode.value?.__rf.handleBounds[props.connectionHandleType].find(
|
||||
(d: HandleElement) => d.id === props.connectionHandleId
|
||||
)
|
||||
: sourceNode.value?.__rf.handleBounds[props.connectionHandleType][0]
|
||||
);
|
||||
const sourceHandleX = computed(() =>
|
||||
sourceHandle.value ? sourceHandle.value.x + sourceHandle.value.width / 2 : sourceNode.value?.__rf.width / 2
|
||||
);
|
||||
const sourceHandleY = computed(() =>
|
||||
sourceHandle.value ? sourceHandle.value.y + sourceHandle.value.height / 2 : sourceNode.value?.__rf.height
|
||||
);
|
||||
const sourceX = computed(() => sourceNode.value?.__rf.position.x + sourceHandleX.value);
|
||||
const sourceY = computed(() => sourceNode.value?.__rf.position.y + sourceHandleY.value);
|
||||
|
||||
const targetX = computed(() => (props.connectionPositionX - props.transform[0]) / props.transform[2]);
|
||||
const targetY = computed(() => (props.connectionPositionY - props.transform[1]) / props.transform[2]);
|
||||
|
||||
const isRightOrLeft = computed(
|
||||
() => sourceHandle.value?.position === Position.Left || sourceHandle.value?.position === Position.Right
|
||||
);
|
||||
const targetPosition = computed(() => (isRightOrLeft.value ? Position.Left : Position.Top));
|
||||
|
||||
if (props.CustomConnectionLineComponent) {
|
||||
// eslint-disable-next-line vue/no-setup-props-destructure
|
||||
const ConnectionLineComponent: any = props.CustomConnectionLineComponent;
|
||||
return () => (
|
||||
<g class="revue-flow__connection">
|
||||
<ConnectionLineComponent
|
||||
sourceX={sourceX.value}
|
||||
sourceY={sourceY.value}
|
||||
sourcePosition={sourceHandle.value?.position}
|
||||
targetX={targetX.value}
|
||||
targetY={targetY.value}
|
||||
targetPosition={targetPosition.value}
|
||||
connectionLineType={props.connectionLineType}
|
||||
connectionLineStyle={props.connectionLineStyle}
|
||||
/>
|
||||
</g>
|
||||
);
|
||||
}
|
||||
|
||||
let dAttr = computed(() => `M${sourceX.value},${sourceY.value} ${targetX.value},${targetY.value}`);
|
||||
|
||||
if (props.connectionLineType === ConnectionLineType.Bezier) {
|
||||
dAttr = computed(() =>
|
||||
getBezierPath({
|
||||
sourceX: sourceX.value,
|
||||
sourceY: sourceY.value,
|
||||
sourcePosition: sourceHandle.value?.position,
|
||||
targetX: targetX.value,
|
||||
targetY: targetY.value,
|
||||
targetPosition: targetPosition.value
|
||||
})
|
||||
);
|
||||
} else if (props.connectionLineType === ConnectionLineType.Step) {
|
||||
dAttr = computed(() =>
|
||||
getSmoothStepPath({
|
||||
sourceX: sourceX.value,
|
||||
sourceY: sourceY.value,
|
||||
sourcePosition: sourceHandle.value?.position,
|
||||
targetX: targetX.value,
|
||||
targetY: targetY.value,
|
||||
targetPosition: targetPosition.value,
|
||||
borderRadius: 0
|
||||
})
|
||||
);
|
||||
} else if (props.connectionLineType === ConnectionLineType.SmoothStep) {
|
||||
dAttr = computed(() =>
|
||||
getSmoothStepPath({
|
||||
sourceX: sourceX.value,
|
||||
sourceY: sourceY.value,
|
||||
sourcePosition: sourceHandle.value?.position,
|
||||
targetX: targetX.value,
|
||||
targetY: targetY.value,
|
||||
targetPosition: targetPosition.value
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
return () => (
|
||||
<g class="revue-flow__connection">
|
||||
<path d={dAttr.value} class="revue-flow__connection-path" style={props.connectionLineStyle} />
|
||||
</g>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
export default ConnectionLine;
|
||||
@@ -46,44 +46,46 @@ export function getBezierPath({
|
||||
}
|
||||
|
||||
const BezierEdge = defineComponent({
|
||||
inheritAttrs: false,
|
||||
props: {
|
||||
sourceX: {
|
||||
type: Number,
|
||||
required: true,
|
||||
required: false,
|
||||
default: 0
|
||||
},
|
||||
sourceY: {
|
||||
type: Number,
|
||||
required: true,
|
||||
required: false,
|
||||
default: 0
|
||||
},
|
||||
targetX: {
|
||||
type: Number,
|
||||
required: true,
|
||||
required: false,
|
||||
default: 0
|
||||
},
|
||||
targetY: {
|
||||
type: Number,
|
||||
required: true,
|
||||
required: false,
|
||||
default: 0
|
||||
},
|
||||
sourcePosition: {
|
||||
type: String as PropType<Position>,
|
||||
required: true,
|
||||
required: false,
|
||||
default: Position.Bottom
|
||||
},
|
||||
targetPosition: {
|
||||
type: String as PropType<Position>,
|
||||
required: true,
|
||||
required: false,
|
||||
default: Position.Top
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
required: true
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
labelStyle: {
|
||||
type: Object,
|
||||
required: true,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
labelShowBg: {
|
||||
@@ -93,7 +95,8 @@ const BezierEdge = defineComponent({
|
||||
},
|
||||
labelBgStyle: {
|
||||
type: String,
|
||||
required: true
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
labelBgPadding: {
|
||||
type: Array as unknown as PropType<[number, number]>,
|
||||
@@ -106,12 +109,14 @@ const BezierEdge = defineComponent({
|
||||
default: 0
|
||||
},
|
||||
arrowHeadType: {
|
||||
type: Object as PropType<ArrowHeadType>,
|
||||
required: true
|
||||
type: String as PropType<ArrowHeadType>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
markerEndId: {
|
||||
type: String,
|
||||
required: true
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
style: {
|
||||
type: Object as PropType<CSSProperties>,
|
||||
|
||||
@@ -0,0 +1,278 @@
|
||||
<template>
|
||||
<g
|
||||
:class="edgeClasses"
|
||||
@click="onEdgeClick"
|
||||
@contextmenu="onEdgeContextMenu"
|
||||
@mouseenter="onEdgeMouseEnter"
|
||||
@mousemove="onEdgeMouseMove"
|
||||
@mouseleave="onEdgeMouseLeave"
|
||||
>
|
||||
<component
|
||||
:is="type"
|
||||
:id="edge.id"
|
||||
:source="edge.source"
|
||||
:target="edge.target"
|
||||
:selected="isSelected"
|
||||
:animated="edge.animated"
|
||||
:label="edge.label"
|
||||
:label-style="edge.labelStyle"
|
||||
:label-show-bg="edge.labelShowBg"
|
||||
:label-bg-style="edge.labelBgStyle"
|
||||
:label-bg-padding="edge.labelBgPadding"
|
||||
:label-bg-borderRadius="edge.labelBgBorderRadius"
|
||||
:data="edge.data"
|
||||
:style="edge.style"
|
||||
:arrow-head-type="edge.arrowHeadType"
|
||||
:source-x="edgePositions.sourceX"
|
||||
:source-y="edgePositions.sourceY"
|
||||
:target-x="edgePositions.targetX"
|
||||
:target-y="edgePositions.targetY"
|
||||
:source-position="sourcePosition"
|
||||
:target-position="targetPosition"
|
||||
:marker-end-id="markerEndId"
|
||||
:source-handle-id="edge.sourceHandle"
|
||||
:target-handle-id="edge.targetHandle"
|
||||
/>
|
||||
<g @mousedown="onEdgeUpdaterSourceMouseDown" @mouseenter="onEdgeUpdaterMouseEnter" @mouseout="onEdgeUpdaterMouseOut">
|
||||
<EdgeAnchor
|
||||
:position="sourcePosition"
|
||||
:center-x="edgePositions.sourceX"
|
||||
:center-y="edgePositions.sourceY"
|
||||
:radius="edgeUpdaterRadius"
|
||||
/>
|
||||
</g>
|
||||
<g @mousedown="onEdgeUpdaterTargetMouseDown" @mouseenter="onEdgeUpdaterMouseEnter" @mouseout="onEdgeUpdaterMouseOut">
|
||||
<EdgeAnchor
|
||||
:position="sourcePosition"
|
||||
:center-x="edgePositions.sourceX"
|
||||
:center-y="edgePositions.sourceY"
|
||||
:radius="edgeUpdaterRadius"
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { EdgeAnchor } from './EdgeAnchor';
|
||||
import { ConnectionMode, Edge, Elements, Node, Position, RevueFlowStore, Transform } from '../../types';
|
||||
import { computed, defineComponent, inject, PropType, ref } from 'vue';
|
||||
import { RevueFlowHooks } from '../../hooks/RevueFlowHooks';
|
||||
import { getEdgePositions, getHandle, getSourceTargetNodes, isEdgeVisible } from '../../container/EdgeRenderer/utils';
|
||||
import { isEdge } from '../../utils/graph';
|
||||
import { onMouseDown } from '../Handle/handler';
|
||||
|
||||
interface EdgeProps {
|
||||
edge: Edge;
|
||||
nodes: Node[];
|
||||
selectedElements: Elements | null;
|
||||
elementsSelectable: boolean;
|
||||
transform: Transform;
|
||||
width: number;
|
||||
height: number;
|
||||
onlyRenderVisibleElements: boolean;
|
||||
connectionMode?: ConnectionMode;
|
||||
markerEndId?: string;
|
||||
edgeUpdaterRadius?: number;
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
components: { EdgeAnchor },
|
||||
props: {
|
||||
edge: {
|
||||
type: Object as PropType<EdgeProps['edge']>,
|
||||
required: true
|
||||
},
|
||||
markerEndId: {
|
||||
type: Object as PropType<EdgeProps['markerEndId']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
edgeUpdaterRadius: {
|
||||
type: Number as PropType<EdgeProps['edgeUpdaterRadius']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
type: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
onlyRenderVisibleElements: {
|
||||
type: Boolean as PropType<EdgeProps['onlyRenderVisibleElements']>,
|
||||
required: false,
|
||||
default: false
|
||||
},
|
||||
connectionMode: {
|
||||
type: String as PropType<EdgeProps['connectionMode']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
}
|
||||
},
|
||||
setup(props) {
|
||||
const store = inject<RevueFlowStore>('store')!;
|
||||
const hooks = inject<RevueFlowHooks>('hooks')!;
|
||||
const nodes = computed(() => getSourceTargetNodes(props.edge, store.nodes));
|
||||
|
||||
hooks.connect.on((connection) => {
|
||||
hooks.edgeUpdate.trigger({ edge: props.edge, connection });
|
||||
});
|
||||
|
||||
if (!nodes.value.sourceNode) {
|
||||
console.warn(`couldn't create edge for source id: ${props.edge.source}; edge id: ${props.edge.id}`);
|
||||
}
|
||||
|
||||
if (!nodes.value.targetNode) {
|
||||
console.warn(`couldn't create edge for target id: ${props.edge.target}; edge id: ${props.edge.id}`);
|
||||
}
|
||||
|
||||
const targetNodeBounds = computed(() => nodes.value.targetNode?.__rf.handleBounds);
|
||||
// when connection type is loose we can define all handles as sources
|
||||
const targetNodeHandles = computed(() =>
|
||||
props.connectionMode === ConnectionMode.Strict
|
||||
? targetNodeBounds.value?.target
|
||||
: targetNodeBounds.value?.target || targetNodeBounds.value?.source
|
||||
);
|
||||
const sourceHandle = computed(
|
||||
() => nodes.value.sourceNode && getHandle(nodes.value.sourceNode.__rf.handleBounds.source, props.edge.sourceHandle || null)
|
||||
);
|
||||
const targetHandle = computed(() => getHandle(targetNodeHandles.value, props.edge.targetHandle || null));
|
||||
const sourcePosition = computed(() => (sourceHandle.value ? sourceHandle.value.position : Position.Bottom));
|
||||
const targetPosition = computed(() => (targetHandle.value ? targetHandle.value.position : Position.Top));
|
||||
|
||||
const edgePositions = computed<{
|
||||
sourceX: number;
|
||||
sourceY: number;
|
||||
targetX: number;
|
||||
targetY: number;
|
||||
}>(() => {
|
||||
return (
|
||||
nodes.value.sourceNode &&
|
||||
nodes.value.targetNode &&
|
||||
getEdgePositions(
|
||||
nodes.value.sourceNode,
|
||||
sourceHandle.value,
|
||||
sourcePosition.value,
|
||||
nodes.value.targetNode,
|
||||
targetHandle.value,
|
||||
targetPosition.value
|
||||
) || {}
|
||||
);
|
||||
});
|
||||
|
||||
const isVisible = computed(() => {
|
||||
return props.onlyRenderVisibleElements
|
||||
? edgePositions.value &&
|
||||
isEdgeVisible({
|
||||
sourcePos: { x: edgePositions.value?.sourceX, y: edgePositions.value?.sourceY },
|
||||
targetPos: { x: edgePositions.value?.targetX, y: edgePositions.value?.targetY },
|
||||
width: store.width || 0,
|
||||
height: store.height || 0,
|
||||
transform: store.transform
|
||||
})
|
||||
: true;
|
||||
});
|
||||
|
||||
const isSelected = computed(() => store.selectedElements?.some((elm) => isEdge(elm) && elm.id === props.edge.id) || false);
|
||||
|
||||
const updating = ref<boolean>(false);
|
||||
const inactive = computed(() => !store.elementsSelectable);
|
||||
const edgeClasses = computed(() => [
|
||||
'revue-flow__edge',
|
||||
`revue-flow__edge-${props.type}`,
|
||||
{ selected: isSelected.value, animated: props.edge.animated, inactive: inactive.value, updating: updating.value }
|
||||
]);
|
||||
|
||||
const edgeElement = computed<Edge>(() => {
|
||||
const el: Edge = {
|
||||
id: props.edge.id || '',
|
||||
source: props.edge.source,
|
||||
target: props.edge.target,
|
||||
type: props.edge.type
|
||||
};
|
||||
|
||||
if (props.edge.sourceHandle) {
|
||||
el.sourceHandle = props.edge.sourceHandle;
|
||||
}
|
||||
|
||||
if (props.edge.targetHandle) {
|
||||
el.targetHandle = props.edge.targetHandle;
|
||||
}
|
||||
|
||||
if (typeof props.edge.data !== 'undefined') {
|
||||
el.data = props.edge.data;
|
||||
}
|
||||
|
||||
return el;
|
||||
});
|
||||
|
||||
const onEdgeClick = (event: MouseEvent) => {
|
||||
if (store.elementsSelectable) {
|
||||
store.unsetNodesSelection();
|
||||
store.addSelectedElements(edgeElement.value as any);
|
||||
}
|
||||
|
||||
hooks.edgeClick.trigger({ event, edge: edgeElement.value });
|
||||
};
|
||||
|
||||
const onEdgeContextMenu = (event: MouseEvent) =>
|
||||
hooks.edgeContextMenu.trigger({
|
||||
event,
|
||||
edge: edgeElement.value
|
||||
});
|
||||
|
||||
const onEdgeMouseEnter = (event: MouseEvent) => hooks.edgeMouseEnter.trigger({ event, edge: edgeElement.value });
|
||||
|
||||
const onEdgeMouseMove = (event: MouseEvent) => hooks.edgeMouseMove.trigger({ event, edge: edgeElement.value });
|
||||
|
||||
const onEdgeMouseLeave = (event: MouseEvent) => hooks.edgeMouseLeave.trigger({ event, edge: edgeElement.value });
|
||||
|
||||
const handleEdgeUpdater = (event: MouseEvent, isSourceHandle: boolean) => {
|
||||
const nodeId = isSourceHandle ? props.edge.target : props.edge.source;
|
||||
const handleId = isSourceHandle ? props.edge.targetHandle : props.edge.sourceHandle;
|
||||
const isValidConnection = () => true;
|
||||
const isTarget = isSourceHandle;
|
||||
|
||||
hooks.edgeUpdateStart.trigger({ event, edge: edgeElement.value });
|
||||
onMouseDown(
|
||||
event,
|
||||
store,
|
||||
hooks,
|
||||
handleId as string,
|
||||
nodeId,
|
||||
isTarget,
|
||||
isValidConnection,
|
||||
isSourceHandle ? 'target' : 'source'
|
||||
);
|
||||
};
|
||||
|
||||
const onEdgeUpdaterSourceMouseDown = (event: MouseEvent) => {
|
||||
handleEdgeUpdater(event, true);
|
||||
};
|
||||
|
||||
const onEdgeUpdaterTargetMouseDown = (event: MouseEvent) => {
|
||||
handleEdgeUpdater(event, false);
|
||||
};
|
||||
|
||||
const onEdgeUpdaterMouseEnter = () => (updating.value = true);
|
||||
const onEdgeUpdaterMouseOut = () => (updating.value = false);
|
||||
|
||||
return {
|
||||
isSelected,
|
||||
isVisible,
|
||||
edgePositions,
|
||||
sourceHandle,
|
||||
targetHandle,
|
||||
sourcePosition,
|
||||
targetPosition,
|
||||
edgeClasses,
|
||||
onEdgeClick,
|
||||
onEdgeMouseEnter,
|
||||
onEdgeMouseMove,
|
||||
onEdgeMouseLeave,
|
||||
onEdgeUpdaterSourceMouseDown,
|
||||
onEdgeUpdaterTargetMouseDown,
|
||||
onEdgeUpdaterMouseEnter,
|
||||
onEdgeUpdaterMouseOut,
|
||||
onEdgeContextMenu
|
||||
};
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@@ -93,6 +93,7 @@ export function getSmoothStepPath({
|
||||
}
|
||||
|
||||
const SmoothStepEdge = defineComponent({
|
||||
inheritAttrs: false,
|
||||
props: EdgeSmoothStepProps,
|
||||
setup(props) {
|
||||
const [centerX, centerY] = getCenter({
|
||||
|
||||
@@ -4,6 +4,7 @@ import { EdgeSmoothStepProps } from '../../types';
|
||||
import SmoothStepEdge from './SmoothStepEdge';
|
||||
|
||||
const StepEdge = defineComponent({
|
||||
inheritAttrs: false,
|
||||
components: { SmoothStepEdge },
|
||||
props: EdgeSmoothStepProps,
|
||||
setup(props) {
|
||||
|
||||
@@ -5,6 +5,7 @@ import { getMarkerEnd } from './utils';
|
||||
import { EdgeProps } from '../../types';
|
||||
|
||||
const StraightEdge = defineComponent({
|
||||
inheritAttrs: false,
|
||||
props: EdgeProps,
|
||||
setup(props) {
|
||||
const yOffset = Math.abs(props.targetY - props.sourceY) / 2;
|
||||
|
||||
@@ -1,355 +0,0 @@
|
||||
import { computed, DefineComponent, defineComponent, inject, PropType, ref } from 'vue';
|
||||
import { Edge, Position, RevueFlowStore, WrapEdgeProps } from '../../types';
|
||||
import { onMouseDown } from '../Handle/handler';
|
||||
import { EdgeAnchor } from './EdgeAnchor';
|
||||
|
||||
export default (EdgeComponent: DefineComponent<WrapEdgeProps>) => {
|
||||
return defineComponent({
|
||||
components: { EdgeComponent },
|
||||
props: {
|
||||
id: {
|
||||
type: String as PropType<WrapEdgeProps['id']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
type: {
|
||||
type: String as PropType<WrapEdgeProps['type']>,
|
||||
required: true
|
||||
},
|
||||
data: {
|
||||
type: String as PropType<WrapEdgeProps['data']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
onClick: {
|
||||
type: Function as unknown as PropType<WrapEdgeProps['onClick']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
onEdgeDoubleClick: {
|
||||
type: Function as unknown as PropType<WrapEdgeProps['onEdgeDoubleClick']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
selected: {
|
||||
type: Boolean as PropType<WrapEdgeProps['selected']>,
|
||||
required: true,
|
||||
default: false
|
||||
},
|
||||
animated: {
|
||||
type: Boolean as PropType<WrapEdgeProps['animated']>,
|
||||
required: false,
|
||||
default: false
|
||||
},
|
||||
label: {
|
||||
type: Object as PropType<WrapEdgeProps['label']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
labelStyle: {
|
||||
type: Object as PropType<WrapEdgeProps['labelStyle']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
labelShowBg: {
|
||||
type: Boolean as PropType<WrapEdgeProps['labelShowBg']>,
|
||||
required: false,
|
||||
default: false
|
||||
},
|
||||
labelBgStyle: {
|
||||
type: Object as PropType<WrapEdgeProps['labelBgStyle']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
labelBgPadding: {
|
||||
type: Array as unknown as PropType<WrapEdgeProps['labelBgPadding']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
labelBgBorderRadius: {
|
||||
type: Number as PropType<WrapEdgeProps['labelBgBorderRadius']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
style: {
|
||||
type: Object as PropType<WrapEdgeProps['style']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
arrowHeadType: {
|
||||
type: String as PropType<WrapEdgeProps['arrowHeadType']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
source: {
|
||||
type: String as PropType<WrapEdgeProps['source']>,
|
||||
required: true
|
||||
},
|
||||
target: {
|
||||
type: String as PropType<WrapEdgeProps['target']>,
|
||||
required: true
|
||||
},
|
||||
sourceHandleId: {
|
||||
type: String as PropType<WrapEdgeProps['sourceHandleId']>,
|
||||
required: true,
|
||||
default: null
|
||||
},
|
||||
targetHandleId: {
|
||||
type: String as PropType<WrapEdgeProps['targetHandleId']>,
|
||||
required: true,
|
||||
default: null
|
||||
},
|
||||
sourceX: {
|
||||
type: Number as PropType<WrapEdgeProps['sourceX']>,
|
||||
required: true
|
||||
},
|
||||
sourceY: {
|
||||
type: Number as PropType<WrapEdgeProps['sourceY']>,
|
||||
required: true
|
||||
},
|
||||
targetX: {
|
||||
type: Number as PropType<WrapEdgeProps['targetX']>,
|
||||
required: true
|
||||
},
|
||||
targetY: {
|
||||
type: Number as PropType<WrapEdgeProps['targetY']>,
|
||||
required: true
|
||||
},
|
||||
sourcePosition: {
|
||||
type: String as PropType<WrapEdgeProps['sourcePosition']>,
|
||||
required: true
|
||||
},
|
||||
targetPosition: {
|
||||
type: String as PropType<WrapEdgeProps['targetPosition']>,
|
||||
required: true
|
||||
},
|
||||
elementsSelectable: {
|
||||
type: Boolean as PropType<WrapEdgeProps['elementsSelectable']>,
|
||||
required: false,
|
||||
default: false
|
||||
},
|
||||
markerEndId: {
|
||||
type: String as PropType<WrapEdgeProps['markerEndId']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
isHidden: {
|
||||
type: Boolean as PropType<WrapEdgeProps['isHidden']>,
|
||||
required: false,
|
||||
default: false
|
||||
},
|
||||
handleEdgeUpdate: {
|
||||
type: Boolean as PropType<WrapEdgeProps['handleEdgeUpdate']>,
|
||||
required: false,
|
||||
default: false
|
||||
},
|
||||
onConnectEdge: {
|
||||
type: Function as PropType<WrapEdgeProps['onConnectEdge']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
onContextMenu: {
|
||||
type: Function as unknown as PropType<WrapEdgeProps['onContextMenu']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
onMouseEnter: {
|
||||
type: Function as unknown as PropType<WrapEdgeProps['onMouseEnter']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
onMouseMove: {
|
||||
type: Function as unknown as PropType<WrapEdgeProps['onMouseMove']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
onMouseLeave: {
|
||||
type: Function as unknown as PropType<WrapEdgeProps['onMouseLeave']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
edgeUpdaterRadius: {
|
||||
type: Number as PropType<WrapEdgeProps['edgeUpdaterRadius']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
onEdgeUpdateStart: {
|
||||
type: Function as unknown as PropType<WrapEdgeProps['onEdgeUpdateStart']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
onEdgeUpdateEnd: {
|
||||
type: Function as unknown as PropType<WrapEdgeProps['onEdgeUpdateEnd']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
}
|
||||
},
|
||||
setup(props) {
|
||||
const store = inject<RevueFlowStore>('store')!;
|
||||
const updating = ref<boolean>(false);
|
||||
const inactive = computed(() => !props.elementsSelectable && !props.onClick);
|
||||
const edgeClasses = computed(() => [
|
||||
'revue-flow__edge',
|
||||
`revue-flow__edge-${props.type}`,
|
||||
{ selected: props.selected, animated: props.animated, inactive, updating: updating.value }
|
||||
]);
|
||||
|
||||
const edgeElement = computed<Edge>(() => {
|
||||
const el: Edge = {
|
||||
id: props.id as string,
|
||||
source: props.source,
|
||||
target: props.target,
|
||||
type: props.type
|
||||
};
|
||||
|
||||
if (props.sourceHandleId) {
|
||||
el.sourceHandle = props.sourceHandleId;
|
||||
}
|
||||
|
||||
if (props.targetHandleId) {
|
||||
el.targetHandle = props.targetHandleId;
|
||||
}
|
||||
|
||||
if (typeof props.data !== 'undefined') {
|
||||
el.data = props.data;
|
||||
}
|
||||
|
||||
return el;
|
||||
});
|
||||
|
||||
const onEdgeClick = (event: MouseEvent) => {
|
||||
if (props.elementsSelectable) {
|
||||
store.unsetNodesSelection();
|
||||
store.addSelectedElements(edgeElement.value as any);
|
||||
}
|
||||
|
||||
if (typeof props.onClick === 'function') props.onClick(event, edgeElement.value);
|
||||
};
|
||||
|
||||
const onEdgeContextMenu = (event: MouseEvent) => {
|
||||
if (typeof props.onContextMenu === 'function') props.onContextMenu(event, edgeElement.value);
|
||||
};
|
||||
|
||||
const onEdgeMouseEnter = (event: MouseEvent) => {
|
||||
if (typeof props.onMouseEnter === 'function') props.onMouseEnter(event, edgeElement.value);
|
||||
};
|
||||
|
||||
const onEdgeMouseMove = (event: MouseEvent) => {
|
||||
if (typeof props.onMouseMove === 'function') props.onMouseMove(event, edgeElement.value);
|
||||
};
|
||||
|
||||
const onEdgeMouseLeave = (event: MouseEvent) => {
|
||||
if (typeof props.onMouseLeave === 'function') props.onMouseLeave(event, edgeElement.value);
|
||||
};
|
||||
|
||||
const handleEdgeUpdater = (event: MouseEvent, isSourceHandle: boolean) => {
|
||||
const nodeId = isSourceHandle ? props.target : props.source;
|
||||
const handleId = isSourceHandle ? props.targetHandleId : props.sourceHandleId;
|
||||
const isValidConnection = () => true;
|
||||
const isTarget = isSourceHandle;
|
||||
|
||||
props.onEdgeUpdateStart?.(event, edgeElement.value);
|
||||
|
||||
const _onEdgeUpdate = props.onEdgeUpdateEnd
|
||||
? (evt: MouseEvent) => {
|
||||
if (props.onEdgeUpdateEnd) props.onEdgeUpdateEnd(evt, edgeElement.value);
|
||||
}
|
||||
: undefined;
|
||||
|
||||
onMouseDown(
|
||||
event,
|
||||
handleId,
|
||||
nodeId,
|
||||
store.setConnectionNodeId,
|
||||
store.setConnectionPosition,
|
||||
props.onConnectEdge as any,
|
||||
isTarget,
|
||||
isValidConnection,
|
||||
store.connectionMode,
|
||||
isSourceHandle ? 'target' : 'source',
|
||||
_onEdgeUpdate
|
||||
);
|
||||
};
|
||||
|
||||
const onEdgeUpdaterSourceMouseDown = (event: MouseEvent) => {
|
||||
handleEdgeUpdater(event, true);
|
||||
};
|
||||
|
||||
const onEdgeUpdaterTargetMouseDown = (event: MouseEvent) => {
|
||||
handleEdgeUpdater(event, false);
|
||||
};
|
||||
|
||||
const onEdgeUpdaterMouseEnter = () => (updating.value = true);
|
||||
const onEdgeUpdaterMouseOut = () => (updating.value = false);
|
||||
|
||||
if (props.isHidden) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return () => (
|
||||
<g
|
||||
class={edgeClasses.value}
|
||||
onClick={onEdgeClick}
|
||||
onContextmenu={onEdgeContextMenu}
|
||||
onMouseenter={onEdgeMouseEnter}
|
||||
onMousemove={onEdgeMouseMove}
|
||||
onMouseleave={onEdgeMouseLeave}
|
||||
>
|
||||
<EdgeComponent
|
||||
id={props.id}
|
||||
source={props.source}
|
||||
target={props.target}
|
||||
selected={props.selected}
|
||||
animated={props.animated}
|
||||
label={props.label}
|
||||
labelStyle={props.labelStyle}
|
||||
labelShowBg={props.labelShowBg}
|
||||
labelBgStyle={props.labelBgStyle}
|
||||
labelBgPadding={props.labelBgPadding}
|
||||
labelBgBorderRadius={props.labelBgBorderRadius}
|
||||
data={props.data}
|
||||
style={props.style}
|
||||
arrowHeadType={props.arrowHeadType}
|
||||
sourceX={props.sourceX}
|
||||
sourceY={props.sourceY}
|
||||
targetX={props.targetX}
|
||||
targetY={props.targetY}
|
||||
sourcePosition={props.sourcePosition}
|
||||
targetPosition={props.targetPosition}
|
||||
markerEndId={props.markerEndId}
|
||||
sourceHandleId={props.sourceHandleId}
|
||||
targetHandleId={props.targetHandleId}
|
||||
/>
|
||||
{props.handleEdgeUpdate && (
|
||||
<g
|
||||
onMousedown={onEdgeUpdaterSourceMouseDown}
|
||||
onMouseenter={onEdgeUpdaterMouseEnter}
|
||||
onMouseout={onEdgeUpdaterMouseOut}
|
||||
>
|
||||
<EdgeAnchor
|
||||
position={props.sourcePosition as Position}
|
||||
centerX={props.sourceX as number}
|
||||
centerY={props.sourceY as number}
|
||||
radius={props.edgeUpdaterRadius}
|
||||
/>
|
||||
</g>
|
||||
)}
|
||||
{props.handleEdgeUpdate && (
|
||||
<g
|
||||
onMousedown={onEdgeUpdaterTargetMouseDown}
|
||||
onMouseenter={onEdgeUpdaterMouseEnter}
|
||||
onMouseout={onEdgeUpdaterMouseOut}
|
||||
>
|
||||
<EdgeAnchor
|
||||
position={props.sourcePosition as Position}
|
||||
centerX={props.sourceX as number}
|
||||
centerY={props.sourceY as number}
|
||||
radius={props.edgeUpdaterRadius}
|
||||
/>
|
||||
</g>
|
||||
)}
|
||||
</g>
|
||||
);
|
||||
}
|
||||
});
|
||||
};
|
||||
@@ -0,0 +1,70 @@
|
||||
import { ElementId, Position, RevueFlowStore } from '../../types';
|
||||
import { onMouseDown, ValidConnectionFunc } from './handler';
|
||||
import { computed, defineComponent, h, inject, PropType } from 'vue';
|
||||
import { RevueFlowHooks } from '../../hooks/RevueFlowHooks';
|
||||
|
||||
const alwaysValid = () => true;
|
||||
|
||||
export default defineComponent({
|
||||
props: {
|
||||
type: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: 'source'
|
||||
},
|
||||
position: {
|
||||
type: String as PropType<Position>,
|
||||
required: false,
|
||||
default: Position.Top
|
||||
},
|
||||
isValidConnection: {
|
||||
type: Function as PropType<ValidConnectionFunc>,
|
||||
required: false,
|
||||
default: alwaysValid
|
||||
},
|
||||
isConnectable: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: true
|
||||
},
|
||||
id: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: undefined
|
||||
}
|
||||
},
|
||||
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 onMouseDownHandler = (event: MouseEvent) => {
|
||||
onMouseDown(event, store, hooks, props.id || '', nodeId, isTarget.value, props.isValidConnection);
|
||||
};
|
||||
|
||||
const handleClasses = computed(() => [
|
||||
'revue-flow__handle',
|
||||
`revue-flow__handle-${props.position}`,
|
||||
'nodrag',
|
||||
{
|
||||
source: !isTarget.value,
|
||||
target: isTarget.value,
|
||||
connectable: props.isConnectable
|
||||
}
|
||||
]);
|
||||
|
||||
return () =>
|
||||
h(
|
||||
'div',
|
||||
{
|
||||
dataHandleid: props.id,
|
||||
dataNodeid: nodeId,
|
||||
dataHandlepos: props.position,
|
||||
class: handleClasses.value,
|
||||
onMouseDown: onMouseDownHandler
|
||||
},
|
||||
slots.default?.()
|
||||
);
|
||||
}
|
||||
});
|
||||
@@ -1,15 +1,5 @@
|
||||
import { getHostForElement } from '../../utils';
|
||||
|
||||
import {
|
||||
ElementId,
|
||||
XYPosition,
|
||||
OnConnectFunc,
|
||||
ConnectionMode,
|
||||
SetConnectionId,
|
||||
Connection,
|
||||
HandleType,
|
||||
RevueFlowStore
|
||||
} from '../../types';
|
||||
import { ElementId, XYPosition, ConnectionMode, SetConnectionId, Connection, HandleType, RevueFlowStore } from '../../types';
|
||||
import { RevueFlowHooks } from '../../hooks/RevueFlowHooks';
|
||||
|
||||
export type ValidConnectionFunc = (connection: Connection) => boolean;
|
||||
@@ -89,14 +79,14 @@ export function onMouseDown(
|
||||
connectStart: RevueFlowHooks['connectStart'];
|
||||
connectStop: RevueFlowHooks['connectStop'];
|
||||
connectEnd: RevueFlowHooks['connectEnd'];
|
||||
connect: RevueFlowHooks['connect'];
|
||||
edgeUpdateEnd: RevueFlowHooks['edgeUpdateEnd'];
|
||||
},
|
||||
handleId: ElementId | null,
|
||||
nodeId: ElementId,
|
||||
onConnect: OnConnectFunc,
|
||||
isTarget: boolean,
|
||||
isValidConnection: ValidConnectionFunc,
|
||||
elementEdgeUpdaterType?: HandleType,
|
||||
onEdgeUpdateEnd?: (evt: MouseEvent) => void
|
||||
elementEdgeUpdaterType?: HandleType
|
||||
): void {
|
||||
const revueFlowNode = (event.target as Element).closest('.revue-flow');
|
||||
// when revue-flow is used inside a shadow root we can't use document
|
||||
@@ -169,13 +159,13 @@ export function onMouseDown(
|
||||
hooks.connectStop.trigger(event);
|
||||
|
||||
if (isValid) {
|
||||
onConnect?.(connection);
|
||||
hooks.connect.trigger(connection);
|
||||
}
|
||||
|
||||
hooks.connectEnd.trigger(event);
|
||||
|
||||
if (elementEdgeUpdaterType && onEdgeUpdateEnd) {
|
||||
onEdgeUpdateEnd(event);
|
||||
if (elementEdgeUpdaterType) {
|
||||
hooks.edgeUpdateEnd.trigger({ event } as any);
|
||||
}
|
||||
|
||||
resetRecentHandle(recentHoveredHandle);
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { Connection, ElementId, Position, RevueFlowStore } from '../../types';
|
||||
import { ElementId, Position, RevueFlowStore } from '../../types';
|
||||
import { onMouseDown, ValidConnectionFunc } from './handler';
|
||||
import { computed, defineComponent, inject, PropType } from 'vue';
|
||||
import { RevueFlowHooks } from '../../hooks/RevueFlowHooks';
|
||||
@@ -43,26 +43,10 @@ const Handle = defineComponent({
|
||||
const hooks = inject<RevueFlowHooks>('hooks')!;
|
||||
const nodeId = inject<ElementId>('NodeIdContext') as ElementId;
|
||||
const isTarget = computed(() => props.type === 'target');
|
||||
const onConnect = computed(() => store.onConnect);
|
||||
|
||||
const onConnectExtended = (params: Connection) => {
|
||||
onConnect.value?.(params);
|
||||
props.onConnect?.(params);
|
||||
};
|
||||
|
||||
const onMouseDownHandler = (event: MouseEvent) => {
|
||||
onMouseDown(
|
||||
event,
|
||||
store,
|
||||
hooks,
|
||||
props.id as string,
|
||||
nodeId,
|
||||
onConnectExtended,
|
||||
isTarget.value,
|
||||
props.isValidConnection,
|
||||
undefined,
|
||||
undefined
|
||||
);
|
||||
console.log('mousedown');
|
||||
onMouseDown(event, store, hooks, props.id as string, nodeId, isTarget.value, props.isValidConnection);
|
||||
};
|
||||
|
||||
const handleClasses = computed(() => [
|
||||
|
||||
@@ -5,6 +5,7 @@ import { defineComponent, PropType } from 'vue';
|
||||
const DefaultNode = defineComponent({
|
||||
name: 'DefaultNode',
|
||||
components: { Handle },
|
||||
inheritAttrs: false,
|
||||
props: {
|
||||
data: {
|
||||
type: Object as PropType<NodeProps['data']>,
|
||||
@@ -29,11 +30,11 @@ const DefaultNode = defineComponent({
|
||||
},
|
||||
setup(props) {
|
||||
return () => (
|
||||
<div>
|
||||
<>
|
||||
<Handle type="target" position={props.targetPosition} isConnectable={props.isConnectable} />
|
||||
{props.data?.label}
|
||||
<Handle type="source" position={props.sourcePosition} isConnectable={props.isConnectable} />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
@@ -5,6 +5,7 @@ import { defineComponent, PropType } from 'vue';
|
||||
const InputNode = defineComponent({
|
||||
name: 'InputNode',
|
||||
components: { Handle },
|
||||
inheritAttrs: false,
|
||||
props: {
|
||||
data: {
|
||||
type: Object as PropType<NodeProps['data']>,
|
||||
@@ -24,10 +25,10 @@ const InputNode = defineComponent({
|
||||
},
|
||||
setup(props) {
|
||||
return () => (
|
||||
<div>
|
||||
<>
|
||||
{props.data?.label}
|
||||
<Handle type="source" position={props.sourcePosition} isConnectable={props.isConnectable} />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
@@ -0,0 +1,258 @@
|
||||
<template>
|
||||
<DraggableCore
|
||||
cancel=".nodrag"
|
||||
:scale="transform[2]"
|
||||
:disabled="!isDraggable"
|
||||
:grid="grid"
|
||||
:enableUserSelectHack="false"
|
||||
@start="onDragStart"
|
||||
@move="onDrag"
|
||||
@stop="onDragStop"
|
||||
>
|
||||
<div
|
||||
ref="nodeElement"
|
||||
:class="nodeClasses"
|
||||
:style="nodeStyle"
|
||||
:data-id="node.id"
|
||||
@mouseenter="onMouseEnterHandler"
|
||||
@mousemove="onMouseMoveHandler"
|
||||
@mouseleave="onMouseLeaveHandler"
|
||||
@contextmenu="onContextMenuHandler"
|
||||
@click="onSelectNodeHandler"
|
||||
>
|
||||
<component
|
||||
:is="type"
|
||||
:data="node.data"
|
||||
:type="node.type"
|
||||
:x-pos="node.__rf.position.x"
|
||||
:y-pos="node.__rf.position.y"
|
||||
:selected="selected"
|
||||
:is-connectable="isConnectable"
|
||||
:source-position="node.sourcePosition"
|
||||
:target-position="node.targetPosition"
|
||||
:is-dragging="node.__rf.isDragging"
|
||||
/>
|
||||
</div>
|
||||
</DraggableCore>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { computed, CSSProperties, defineComponent, inject, PropType, provide } from 'vue';
|
||||
import { templateRef, tryOnMounted, useResizeObserver } from '@vueuse/core';
|
||||
import { DraggableCore, DraggableEventListener } from '@braks/revue-draggable';
|
||||
import { Node, NodeDimensionUpdate, NodeTypesType, RevueFlowStore } from '../../types';
|
||||
import { RevueFlowHooks } from '../../hooks/RevueFlowHooks';
|
||||
|
||||
interface NodeProps {
|
||||
nodeTypes: NodeTypesType;
|
||||
snapToGrid: boolean;
|
||||
snapGrid: [number, number];
|
||||
selectNodesOnDrag: boolean;
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
components: { DraggableCore },
|
||||
props: {
|
||||
node: {
|
||||
type: Object as PropType<Node>,
|
||||
required: true
|
||||
},
|
||||
type: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
snapToGrid: {
|
||||
type: Boolean as PropType<NodeProps['snapToGrid']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
snapGrid: {
|
||||
type: Array as unknown as PropType<NodeProps['snapGrid']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
selectNodesOnDrag: {
|
||||
type: Boolean as PropType<NodeProps['selectNodesOnDrag']>,
|
||||
required: false,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
setup(props) {
|
||||
const store = inject<RevueFlowStore>('store')!;
|
||||
const hooks = inject<RevueFlowHooks>('hooks')!;
|
||||
provide('NodeIdContext', props.node.id);
|
||||
|
||||
const nodeElement = templateRef<HTMLDivElement>('nodeElement', null);
|
||||
|
||||
const selected = computed(() => store.selectedElements?.some(({ id }) => id === props.node.id) || false);
|
||||
const transform = computed(() => store.transform);
|
||||
const isDraggable = computed(
|
||||
() => props.node.draggable || (store.nodesDraggable && typeof props.node.draggable === 'undefined')
|
||||
);
|
||||
const isSelectable = computed(
|
||||
() => props.node.selectable || (store.elementsSelectable && typeof props.node.selectable === 'undefined')
|
||||
);
|
||||
const isConnectable = computed(
|
||||
() => props.node.connectable || (store.nodesConnectable && typeof props.node.connectable === 'undefined')
|
||||
);
|
||||
|
||||
const node = computed(
|
||||
() =>
|
||||
({
|
||||
id: props.node.id,
|
||||
type: props.node.type,
|
||||
position: { x: props.node.__rf.position.x, y: props.node.__rf.position.y },
|
||||
data: props.node.data
|
||||
} as Node)
|
||||
);
|
||||
const grid = computed(() => (props.snapToGrid ? props.snapGrid : [1, 1])! as [number, number]);
|
||||
const initialized = computed(() => props.node.__rf.width !== null && props.node.__rf.height !== null);
|
||||
|
||||
const nodeStyle = computed<CSSProperties>(() => ({
|
||||
zIndex: selected.value ? 10 : 3,
|
||||
transform: `translate(${props.node.__rf.position.x}px,${props.node.__rf.position.y}px)`,
|
||||
pointerEvents: isSelectable.value || isDraggable.value ? 'all' : 'none',
|
||||
opacity: initialized.value ? 1 : 0,
|
||||
...props.node.style
|
||||
}));
|
||||
const onMouseEnterHandler = () => {
|
||||
if (props.node.__rf.isDragging) {
|
||||
return;
|
||||
}
|
||||
|
||||
return (event: MouseEvent) => hooks.nodeMouseEnter.trigger({ event, node: node.value });
|
||||
};
|
||||
|
||||
const onMouseMoveHandler = () => {
|
||||
if (props.node.__rf.isDragging) {
|
||||
return;
|
||||
}
|
||||
|
||||
return (event: MouseEvent) => hooks.nodeMouseMove.trigger({ event, node: node.value });
|
||||
};
|
||||
|
||||
const onMouseLeaveHandler = () => {
|
||||
if (props.node.__rf.isDragging) {
|
||||
return;
|
||||
}
|
||||
|
||||
return (event: MouseEvent) => hooks.nodeMouseLeave.trigger({ event, node: node.value });
|
||||
};
|
||||
|
||||
const onContextMenuHandler = () => {
|
||||
return (event: MouseEvent) => hooks.nodeContextMenu.trigger({ event, node: node.value });
|
||||
};
|
||||
|
||||
const onSelectNodeHandler = (event: MouseEvent) => {
|
||||
if (!isDraggable.value) {
|
||||
if (isSelectable.value) {
|
||||
store.unsetNodesSelection();
|
||||
|
||||
if (!selected.value) {
|
||||
store.addSelectedElements([node.value]);
|
||||
}
|
||||
}
|
||||
|
||||
hooks.nodeClick.trigger({ event, node: node.value });
|
||||
}
|
||||
};
|
||||
|
||||
const onDragStart: DraggableEventListener = ({ event }) => {
|
||||
hooks.nodeDragStart.trigger({ event, node: node.value });
|
||||
|
||||
if (props.selectNodesOnDrag && isSelectable.value) {
|
||||
store.unsetNodesSelection();
|
||||
|
||||
if (!selected.value) {
|
||||
store.addSelectedElements([node.value]);
|
||||
}
|
||||
} else if (!props.selectNodesOnDrag && !selected.value && isSelectable.value) {
|
||||
store.unsetNodesSelection();
|
||||
store.addSelectedElements([]);
|
||||
}
|
||||
};
|
||||
|
||||
const onDrag: DraggableEventListener = ({ event, data }) => {
|
||||
node.value.position.x += data.deltaX;
|
||||
node.value.position.y += data.deltaY;
|
||||
hooks.nodeDrag.trigger({ event, node: node.value });
|
||||
|
||||
store?.updateNodePosDiff({
|
||||
id: props.node.id as string,
|
||||
diff: {
|
||||
x: data.deltaX,
|
||||
y: data.deltaY
|
||||
},
|
||||
isDragging: true
|
||||
});
|
||||
};
|
||||
|
||||
const onDragStop: DraggableEventListener = ({ event }) => {
|
||||
// onDragStop also gets called when user just clicks on a node.
|
||||
// Because of that we set dragging to true inside the onDrag handler and handle the click here
|
||||
if (!props.node.__rf.isDragging) {
|
||||
if (isSelectable.value && !props.selectNodesOnDrag && !selected.value) {
|
||||
store.addSelectedElements([node.value]);
|
||||
}
|
||||
|
||||
hooks.nodeClick.trigger({ event, node: node.value });
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
store.updateNodePosDiff({
|
||||
id: node.value.id || '',
|
||||
isDragging: false
|
||||
});
|
||||
|
||||
hooks.nodeDragStop.trigger({ event, node: node.value });
|
||||
};
|
||||
|
||||
useResizeObserver(nodeElement, (entries) => {
|
||||
const updates: NodeDimensionUpdate[] = entries.map((entry) => ({
|
||||
id: entry.target.getAttribute('data-id') || '',
|
||||
nodeElement: entry.target as HTMLDivElement
|
||||
}));
|
||||
|
||||
store.updateNodeDimensions(updates);
|
||||
});
|
||||
|
||||
tryOnMounted(() => {
|
||||
store.updateNodeDimensions([
|
||||
{
|
||||
id: props.node.id || '',
|
||||
nodeElement: nodeElement.value,
|
||||
forceUpdate: true
|
||||
}
|
||||
]);
|
||||
});
|
||||
|
||||
const nodeClasses = computed(() => [
|
||||
'revue-flow__node',
|
||||
`revue-flow__node-${props.node.type}`,
|
||||
{
|
||||
selected: selected.value,
|
||||
selectable: isSelectable.value
|
||||
}
|
||||
]);
|
||||
|
||||
return {
|
||||
nodeClasses,
|
||||
grid,
|
||||
nodeStyle,
|
||||
nodeElement,
|
||||
onDragStart,
|
||||
onDrag,
|
||||
onDragStop,
|
||||
onContextMenuHandler,
|
||||
onMouseEnterHandler,
|
||||
onMouseLeaveHandler,
|
||||
onMouseMoveHandler,
|
||||
onSelectNodeHandler,
|
||||
transform,
|
||||
isConnectable,
|
||||
isDraggable,
|
||||
selected
|
||||
};
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@@ -5,6 +5,7 @@ import { defineComponent, PropType } from 'vue';
|
||||
const OutputNode = defineComponent({
|
||||
name: 'OutputNode',
|
||||
components: { Handle },
|
||||
inheritAttrs: false,
|
||||
props: {
|
||||
data: {
|
||||
type: Object as PropType<NodeProps['data']>,
|
||||
@@ -24,10 +25,10 @@ const OutputNode = defineComponent({
|
||||
},
|
||||
setup(props) {
|
||||
return () => (
|
||||
<div>
|
||||
<>
|
||||
{props.data?.label}
|
||||
<Handle type="source" position={props.targetPosition} isConnectable={props.isConnectable} />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
@@ -1,204 +0,0 @@
|
||||
import { Node, RevueFlowStore, WrapNodeProps } from '../../types';
|
||||
import { computed, CSSProperties, DefineComponent, defineComponent, inject, onMounted, onUpdated, provide, ref } from 'vue';
|
||||
import { DraggableEventHandler, DraggableCore } from '@braks/revue-draggable';
|
||||
|
||||
export default (NodeComponent: DefineComponent<WrapNodeProps>) => {
|
||||
return defineComponent({
|
||||
props: WrapNodeProps,
|
||||
setup(props) {
|
||||
const store = inject<RevueFlowStore>('store')!;
|
||||
provide('NodeIdContext', props.id);
|
||||
|
||||
const nodeElement = ref<HTMLDivElement | undefined>();
|
||||
|
||||
const node = computed(() => ({
|
||||
id: props.id,
|
||||
type: props.type,
|
||||
position: { x: props.xPos, y: props.yPos },
|
||||
data: props.data
|
||||
}));
|
||||
const grid = computed(() => (props.snapToGrid ? props.snapGrid : [1, 1])! as [number, number]);
|
||||
|
||||
const nodeStyle = computed<CSSProperties>(() => ({
|
||||
zIndex: props.selected ? 10 : 3,
|
||||
transform: `translate(${props.xPos}px,${props.yPos}px)`,
|
||||
pointerEvents:
|
||||
props.isSelectable ||
|
||||
props.isDraggable ||
|
||||
props.onClick ||
|
||||
props.onMouseEnter ||
|
||||
props.onMouseMove ||
|
||||
props.onMouseLeave
|
||||
? 'all'
|
||||
: 'none',
|
||||
// prevents jumping of nodes on start
|
||||
opacity: props.isInitialized ? 1 : 0,
|
||||
...props.style
|
||||
}));
|
||||
const onMouseEnterHandler = () => {
|
||||
if (!props.onMouseEnter || props.isDragging) {
|
||||
return;
|
||||
}
|
||||
|
||||
return (event: MouseEvent) => props.onMouseEnter && props.onMouseEnter(event, node.value as Node);
|
||||
};
|
||||
|
||||
const onMouseMoveHandler = () => {
|
||||
if (!props.onMouseMove || props.isDragging) {
|
||||
return;
|
||||
}
|
||||
|
||||
return (event: MouseEvent) => props.onMouseMove && props.onMouseMove(event, node.value as Node);
|
||||
};
|
||||
|
||||
const onMouseLeaveHandler = () => {
|
||||
if (!props.onMouseLeave || props.isDragging) {
|
||||
return;
|
||||
}
|
||||
|
||||
return (event: MouseEvent) => props.onMouseLeave && props.onMouseLeave(event, node.value as Node);
|
||||
};
|
||||
|
||||
const onContextMenuHandler = () => {
|
||||
if (!props.onContextMenu) {
|
||||
return;
|
||||
}
|
||||
|
||||
return (event: MouseEvent) => props.onContextMenu && props.onContextMenu(event, node.value as Node);
|
||||
};
|
||||
|
||||
const onSelectNodeHandler = (event: MouseEvent) => {
|
||||
if (!props.isDraggable) {
|
||||
if (props.isSelectable) {
|
||||
store?.unsetNodesSelection();
|
||||
|
||||
if (!props.selected) {
|
||||
store?.addSelectedElements([node.value as Node]);
|
||||
}
|
||||
}
|
||||
|
||||
props.onClick?.(event, node.value as Node);
|
||||
}
|
||||
};
|
||||
|
||||
const onDragStart: DraggableEventHandler = (event) => {
|
||||
props.onNodeDragStart?.(event as MouseEvent, node.value as Node);
|
||||
|
||||
if (props.selectNodesOnDrag && props.isSelectable) {
|
||||
store?.unsetNodesSelection();
|
||||
|
||||
if (!props.selected) {
|
||||
store?.addSelectedElements([node.value as Node]);
|
||||
}
|
||||
} else if (!props.selectNodesOnDrag && !props.selected && props.isSelectable) {
|
||||
store?.unsetNodesSelection();
|
||||
store?.addSelectedElements([]);
|
||||
}
|
||||
};
|
||||
|
||||
const onDrag: DraggableEventHandler = (event, draggableData) => {
|
||||
if (props.onNodeDrag) {
|
||||
node.value.position.x += draggableData.deltaX;
|
||||
node.value.position.y += draggableData.deltaY;
|
||||
props.onNodeDrag(event as MouseEvent, node.value as Node);
|
||||
}
|
||||
|
||||
store?.updateNodePosDiff({
|
||||
id: props.id as string,
|
||||
diff: {
|
||||
x: draggableData.deltaX,
|
||||
y: draggableData.deltaY
|
||||
},
|
||||
isDragging: true
|
||||
});
|
||||
};
|
||||
|
||||
const onDragStop: DraggableEventHandler = (event) => {
|
||||
// onDragStop also gets called when user just clicks on a node.
|
||||
// Because of that we set dragging to true inside the onDrag handler and handle the click here
|
||||
if (!props.isDragging) {
|
||||
if (props.isSelectable && !props.selectNodesOnDrag && !props.selected) {
|
||||
store?.addSelectedElements([node.value as Node]);
|
||||
}
|
||||
|
||||
props.onClick?.(event, node.value as Node);
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
store?.updateNodePosDiff({
|
||||
id: node.value.id as string,
|
||||
isDragging: false
|
||||
});
|
||||
|
||||
props.onNodeDragStop?.(event as MouseEvent, node.value as Node);
|
||||
};
|
||||
|
||||
onUpdated(() => {
|
||||
if (nodeElement.value && !props.isHidden) {
|
||||
store?.updateNodeDimensions([{ id: props.id || '', nodeElement: nodeElement.value, forceUpdate: true }]);
|
||||
}
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
if (nodeElement.value && typeof props.resizeObserver?.observe === 'function') {
|
||||
const currNode = nodeElement.value;
|
||||
props.resizeObserver?.observe(currNode);
|
||||
|
||||
return () => props.resizeObserver?.unobserve(currNode);
|
||||
}
|
||||
});
|
||||
|
||||
if (props.isHidden) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const nodeClasses = computed(() => [
|
||||
'revue-flow__node',
|
||||
`revue-flow__node-${props.type}`,
|
||||
{
|
||||
selected: props.selected,
|
||||
selectable: props.isSelectable
|
||||
}
|
||||
]);
|
||||
|
||||
return () => (
|
||||
<DraggableCore
|
||||
start={onDragStart}
|
||||
move={onDrag}
|
||||
stop={onDragStop}
|
||||
scale={store.transform[2]}
|
||||
disabled={!props.isDraggable}
|
||||
cancel=".nodrag"
|
||||
grid={grid.value}
|
||||
enableUserSelectHack={false}
|
||||
>
|
||||
<div
|
||||
class={nodeClasses.value}
|
||||
ref={nodeElement}
|
||||
style={nodeStyle.value}
|
||||
onMouseenter={onMouseEnterHandler}
|
||||
onMousemove={onMouseMoveHandler}
|
||||
onMouseleave={onMouseLeaveHandler}
|
||||
onContextmenu={onContextMenuHandler}
|
||||
onClick={onSelectNodeHandler}
|
||||
data-id={props.id}
|
||||
>
|
||||
<NodeComponent
|
||||
id={props.id}
|
||||
data={props.data}
|
||||
type={props.type}
|
||||
xPos={props.xPos}
|
||||
yPos={props.yPos}
|
||||
selected={props.selected}
|
||||
isConnectable={props.isConnectable}
|
||||
sourcePosition={props.sourcePosition}
|
||||
targetPosition={props.targetPosition}
|
||||
isDragging={props.isDragging}
|
||||
/>
|
||||
</div>
|
||||
</DraggableCore>
|
||||
);
|
||||
}
|
||||
});
|
||||
};
|
||||
@@ -0,0 +1,118 @@
|
||||
<template>
|
||||
<svg :width="width" :height="height" class="revue-flow__edges">
|
||||
<MarkerDefinitions :color="arrowHeadColor" />
|
||||
<g :transform="transformStyle">
|
||||
<template v-for="edge of edges" :key="edge.id">
|
||||
<Edge
|
||||
:edge="edge"
|
||||
:marker-end-id="markerEndId"
|
||||
:onlyRenderVisibleElements="onlyRenderVisibleElements"
|
||||
:type="edgeTypes[edge.type]"
|
||||
/>
|
||||
<ConnectionLine
|
||||
v-if="renderConnectionLine"
|
||||
:connectionLineStyle="connectionLineStyle"
|
||||
:connectionLineType="connectionLineType"
|
||||
:CustomConnectionLineComponent="connectionLineComponent"
|
||||
/>
|
||||
</template>
|
||||
</g>
|
||||
</svg>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { computed, CSSProperties, defineComponent, inject, PropType } from 'vue';
|
||||
import Edge from '../../components/Edges/Edge.vue';
|
||||
import ConnectionLine from '../../components/ConnectionLine/ConnectionLine.vue';
|
||||
import { ConnectionLineType, ConnectionLineComponent, ConnectionMode, RevueFlowStore } from '../../types';
|
||||
import MarkerDefinitions from './MarkerDefinitions.vue';
|
||||
|
||||
interface EdgeRendererProps {
|
||||
edgeTypes: any;
|
||||
connectionLineType: ConnectionLineType;
|
||||
connectionLineStyle?: CSSProperties;
|
||||
connectionLineComponent?: ConnectionLineComponent;
|
||||
connectionMode?: ConnectionMode;
|
||||
arrowHeadColor: string;
|
||||
markerEndId?: string;
|
||||
onlyRenderVisibleElements: boolean;
|
||||
edgeUpdaterRadius?: number;
|
||||
}
|
||||
|
||||
const EdgeRenderer = defineComponent({
|
||||
name: 'EdgeRenderer',
|
||||
components: {
|
||||
Edge,
|
||||
ConnectionLine,
|
||||
MarkerDefinitions
|
||||
},
|
||||
props: {
|
||||
edgeTypes: {
|
||||
type: Object,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
connectionLineType: {
|
||||
type: String as PropType<EdgeRendererProps['connectionLineType']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
connectionLineStyle: {
|
||||
type: Object as PropType<EdgeRendererProps['connectionLineStyle']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
connectionLineComponent: {
|
||||
type: Object as PropType<EdgeRendererProps['connectionLineComponent']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
connectionMode: {
|
||||
type: String as PropType<EdgeRendererProps['connectionMode']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
arrowHeadColor: {
|
||||
type: String as PropType<EdgeRendererProps['arrowHeadColor']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
markerEndId: {
|
||||
type: String as PropType<EdgeRendererProps['markerEndId']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
onlyRenderVisibleElements: {
|
||||
type: Boolean as PropType<EdgeRendererProps['onlyRenderVisibleElements']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
edgeUpdaterRadius: {
|
||||
type: Number as PropType<EdgeRendererProps['edgeUpdaterRadius']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
}
|
||||
},
|
||||
setup() {
|
||||
const store = inject<RevueFlowStore>('store')!;
|
||||
const edges = computed(() => store.edges);
|
||||
const transform = computed(() => store.transform);
|
||||
const transformStyle = computed(() => {
|
||||
return `translate(${transform.value?.[0]},${transform.value?.[1]}) scale(${transform.value?.[2]})`;
|
||||
});
|
||||
const renderConnectionLine = computed(() => store.connectionNodeId && store.connectionHandleType);
|
||||
const width = computed(() => store.width);
|
||||
const height = computed(() => store.height);
|
||||
|
||||
return {
|
||||
transform,
|
||||
transformStyle,
|
||||
renderConnectionLine,
|
||||
edges,
|
||||
width,
|
||||
height
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
export default EdgeRenderer;
|
||||
</script>
|
||||
@@ -0,0 +1,30 @@
|
||||
<template>
|
||||
<marker
|
||||
:id="id"
|
||||
class="revue-flow__arrowhead"
|
||||
markerWidth="12.5"
|
||||
markerHeight="12.5"
|
||||
viewBox="-10 -10 20 20"
|
||||
orient="auto"
|
||||
refX="0"
|
||||
refY="0"
|
||||
>
|
||||
<slot></slot>
|
||||
</marker>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent, PropType } from 'vue';
|
||||
|
||||
interface MarkerProps {
|
||||
id: string;
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
props: {
|
||||
id: {
|
||||
type: String as PropType<MarkerProps['id']>,
|
||||
required: true
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@@ -1,72 +0,0 @@
|
||||
import { defineComponent, PropType } from 'vue';
|
||||
|
||||
interface MarkerProps {
|
||||
id: string;
|
||||
}
|
||||
|
||||
const Marker = defineComponent({
|
||||
props: {
|
||||
id: {
|
||||
type: String as PropType<MarkerProps['id']>,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
setup(props, { slots }) {
|
||||
return () => (
|
||||
<marker
|
||||
class="revue-flow__arrowhead"
|
||||
id={props.id}
|
||||
markerWidth="12.5"
|
||||
markerHeight="12.5"
|
||||
viewBox="-10 -10 20 20"
|
||||
orient="auto"
|
||||
refX="0"
|
||||
refY="0"
|
||||
>
|
||||
{slots.default ? slots.default() : ''}
|
||||
</marker>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
interface MarkerDefinitionsProps {
|
||||
color: string;
|
||||
}
|
||||
|
||||
const MarkerDefinitions = defineComponent({
|
||||
name: 'MarkerDefinitions',
|
||||
props: {
|
||||
color: {
|
||||
type: String as PropType<MarkerDefinitionsProps['color']>,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
setup(props) {
|
||||
return () => (
|
||||
<defs>
|
||||
<Marker id="revue-flow__arrowclosed">
|
||||
<polyline
|
||||
stroke={props.color}
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="1"
|
||||
fill={props.color}
|
||||
points="-5,-4 0,0 -5,4 -5,-4"
|
||||
/>
|
||||
</Marker>
|
||||
<Marker id="revue-flow__arrow">
|
||||
<polyline
|
||||
stroke={props.color}
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="1.5"
|
||||
fill="none"
|
||||
points="-5,-4 0,0 -5,4"
|
||||
/>
|
||||
</Marker>
|
||||
</defs>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
export default MarkerDefinitions;
|
||||
@@ -0,0 +1,45 @@
|
||||
<template>
|
||||
<defs>
|
||||
<Marker id="revue-flow__arrowclosed">
|
||||
<polyline
|
||||
:stroke="color"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="1"
|
||||
:fill="color"
|
||||
points="-5,-4 0,0 -5,4 -5,-4"
|
||||
/>
|
||||
</Marker>
|
||||
<Marker id="revue-flow__arrow">
|
||||
<polyline
|
||||
:stroke="color"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="1.5"
|
||||
fill="none"
|
||||
points="-5,-4 0,0 -5,4"
|
||||
/>
|
||||
</Marker>
|
||||
</defs>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent, PropType } from 'vue';
|
||||
import Marker from './Marker.vue';
|
||||
|
||||
interface MarkerDefinitionsProps {
|
||||
color: string;
|
||||
}
|
||||
|
||||
const MarkerDefinitions = defineComponent({
|
||||
name: 'MarkerDefinitions',
|
||||
components: { Marker },
|
||||
props: {
|
||||
color: {
|
||||
type: String as PropType<MarkerDefinitionsProps['color']>,
|
||||
required: true
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
export default MarkerDefinitions;
|
||||
</script>
|
||||
@@ -1,363 +0,0 @@
|
||||
import ConnectionLine from '../../components/ConnectionLine/index';
|
||||
import { isEdge } from '../../utils/graph';
|
||||
import { getEdgePositions, getHandle, isEdgeVisible, getSourceTargetNodes } from './utils';
|
||||
import {
|
||||
Position,
|
||||
Edge,
|
||||
Node,
|
||||
Elements,
|
||||
Connection,
|
||||
ConnectionLineType,
|
||||
ConnectionLineComponent,
|
||||
ConnectionMode,
|
||||
Transform,
|
||||
OnEdgeUpdateFunc,
|
||||
RevueFlowStore,
|
||||
HandleType
|
||||
} from '../../types';
|
||||
import { computed, CSSProperties, defineComponent, inject, PropType } from 'vue';
|
||||
import MarkerDefinitions from './MarkerDefinitions';
|
||||
|
||||
interface EdgeRendererProps {
|
||||
edgeTypes: any;
|
||||
connectionLineType: ConnectionLineType;
|
||||
connectionLineStyle?: CSSProperties;
|
||||
connectionLineComponent?: ConnectionLineComponent;
|
||||
connectionMode?: ConnectionMode;
|
||||
onElementClick?: (event: MouseEvent, element: Node | Edge) => void;
|
||||
onEdgeDoubleClick?: (event: MouseEvent, edge: Edge) => void;
|
||||
arrowHeadColor: string;
|
||||
markerEndId?: string;
|
||||
onlyRenderVisibleElements: 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;
|
||||
onEdgeUpdateStart?: (event: MouseEvent, edge: Edge) => void;
|
||||
onEdgeUpdateEnd?: (event: MouseEvent, edge: Edge) => void;
|
||||
edgeUpdaterRadius?: number;
|
||||
}
|
||||
|
||||
interface EdgeWrapperProps {
|
||||
edge: Edge;
|
||||
props: EdgeRendererProps;
|
||||
nodes: Node[];
|
||||
selectedElements: Elements | null;
|
||||
elementsSelectable: boolean;
|
||||
transform: Transform;
|
||||
width: number;
|
||||
height: number;
|
||||
onlyRenderVisibleElements: boolean;
|
||||
connectionMode?: ConnectionMode;
|
||||
}
|
||||
|
||||
const EdgeCmp = defineComponent({
|
||||
props: {
|
||||
edge: {
|
||||
type: Object as PropType<EdgeWrapperProps['edge']>,
|
||||
required: true
|
||||
},
|
||||
props: {
|
||||
type: Object as PropType<EdgeWrapperProps['props']>,
|
||||
required: true
|
||||
},
|
||||
nodes: {
|
||||
type: Array as unknown as PropType<EdgeWrapperProps['nodes']>,
|
||||
required: true
|
||||
},
|
||||
selectedElements: {
|
||||
type: Array as unknown as PropType<EdgeWrapperProps['selectedElements']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
elementsSelectable: {
|
||||
type: Boolean as PropType<EdgeWrapperProps['elementsSelectable']>,
|
||||
required: false,
|
||||
default: false
|
||||
},
|
||||
transform: {
|
||||
type: Array as unknown as PropType<EdgeWrapperProps['transform']>,
|
||||
required: false,
|
||||
default: () => []
|
||||
},
|
||||
width: {
|
||||
type: Number as PropType<EdgeWrapperProps['width']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
height: {
|
||||
type: Number as PropType<EdgeWrapperProps['height']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
onlyRenderVisibleElements: {
|
||||
type: Boolean as PropType<EdgeWrapperProps['onlyRenderVisibleElements']>,
|
||||
required: false,
|
||||
default: false
|
||||
},
|
||||
connectionMode: {
|
||||
type: String as PropType<EdgeWrapperProps['connectionMode']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
}
|
||||
},
|
||||
setup(props) {
|
||||
const nodes = computed(() => getSourceTargetNodes(props.edge, props.nodes));
|
||||
|
||||
const onConnectEdge = (connection: Connection) => {
|
||||
props.props.onEdgeUpdate?.(props.edge, connection);
|
||||
};
|
||||
|
||||
if (!nodes.value.sourceNode) {
|
||||
console.log(`couldn't create edge for source id: ${props.edge.source}; edge id: ${props.edge.id}`);
|
||||
return () => null;
|
||||
}
|
||||
|
||||
if (!nodes.value.targetNode) {
|
||||
console.log(`couldn't create edge for target id: ${props.edge.target}; edge id: ${props.edge.id}`);
|
||||
return () => null;
|
||||
}
|
||||
|
||||
const EdgeComponent: any = props.props.edgeTypes[props.edge.type as string] || props.props.edgeTypes.default;
|
||||
const targetNodeBounds = computed(() => nodes.value.targetNode?.__rf.handleBounds);
|
||||
// when connection type is loose we can define all handles as sources
|
||||
const targetNodeHandles = computed(() =>
|
||||
props.connectionMode === ConnectionMode.Strict
|
||||
? targetNodeBounds.value?.target
|
||||
: targetNodeBounds.value?.target || targetNodeBounds.value?.source
|
||||
);
|
||||
const sourceHandle = computed(
|
||||
() => nodes.value.sourceNode && getHandle(nodes.value.sourceNode.__rf.handleBounds.source, props.edge.sourceHandle || null)
|
||||
);
|
||||
const targetHandle = computed(() => getHandle(targetNodeHandles.value, props.edge.targetHandle || null));
|
||||
const sourcePosition = computed(() => (sourceHandle.value ? sourceHandle.value.position : Position.Bottom));
|
||||
const targetPosition = computed(() => (targetHandle.value ? targetHandle.value.position : Position.Top));
|
||||
|
||||
const edgePositions = computed(() => {
|
||||
return (
|
||||
nodes.value.sourceNode &&
|
||||
nodes.value.targetNode &&
|
||||
getEdgePositions(
|
||||
nodes.value.sourceNode,
|
||||
sourceHandle.value,
|
||||
sourcePosition.value,
|
||||
nodes.value.targetNode,
|
||||
targetHandle.value,
|
||||
targetPosition.value
|
||||
)
|
||||
);
|
||||
});
|
||||
|
||||
const isVisible = computed(() => {
|
||||
return props.onlyRenderVisibleElements
|
||||
? edgePositions.value &&
|
||||
isEdgeVisible({
|
||||
sourcePos: { x: edgePositions.value?.sourceX, y: edgePositions.value?.sourceY },
|
||||
targetPos: { x: edgePositions.value?.targetX, y: edgePositions.value?.targetY },
|
||||
width: props.width || 0,
|
||||
height: props.height || 0,
|
||||
transform: props.transform
|
||||
})
|
||||
: true;
|
||||
});
|
||||
|
||||
if (!isVisible.value) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const isSelected = computed(() => props.selectedElements?.some((elm) => isEdge(elm) && elm.id === props.edge.id) || false);
|
||||
|
||||
return () => (
|
||||
<EdgeComponent
|
||||
key={props.edge.id}
|
||||
id={props.edge.id}
|
||||
class={props.edge.className}
|
||||
type={props.edge.type}
|
||||
data={props.edge.data}
|
||||
onClick={props.props.onElementClick}
|
||||
selected={isSelected}
|
||||
animated={props.edge.animated}
|
||||
label={props.edge.label}
|
||||
labelStyle={props.edge.labelStyle}
|
||||
labelShowBg={props.edge.labelShowBg}
|
||||
labelBgStyle={props.edge.labelBgStyle}
|
||||
labelBgPadding={props.edge.labelBgPadding}
|
||||
labelBgBorderRadius={props.edge.labelBgBorderRadius}
|
||||
style={props.edge.style}
|
||||
arrowHeadType={props.edge.arrowHeadType}
|
||||
source={props.edge.source}
|
||||
target={props.edge.target}
|
||||
sourceHandleId={props.edge.sourceHandle}
|
||||
targetHandleId={props.edge.targetHandle}
|
||||
sourceX={edgePositions.value?.sourceX}
|
||||
sourceY={edgePositions.value?.sourceY}
|
||||
targetX={edgePositions.value?.targetX}
|
||||
targetY={edgePositions.value?.targetY}
|
||||
sourcePosition={sourcePosition}
|
||||
targetPosition={targetPosition}
|
||||
elementsSelectable={props.elementsSelectable}
|
||||
markerEndId={props.props.markerEndId}
|
||||
isHidden={props.edge.isHidden}
|
||||
onConnectEdge={onConnectEdge}
|
||||
handleEdgeUpdate={typeof props.props.onEdgeUpdate !== 'undefined'}
|
||||
onContextMenu={props.props.onEdgeContextMenu}
|
||||
onMouseEnter={props.props.onEdgeMouseEnter}
|
||||
onMouseMove={props.props.onEdgeMouseMove}
|
||||
onMouseLeave={props.props.onEdgeMouseLeave}
|
||||
edgeUpdaterRadius={props.props.edgeUpdaterRadius}
|
||||
onEdgeDoubleClick={props.props.onEdgeDoubleClick}
|
||||
onEdgeUpdateStart={props.props.onEdgeUpdateStart}
|
||||
onEdgeUpdateEnd={props.props.onEdgeUpdateEnd}
|
||||
/>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
const EdgeRenderer = defineComponent({
|
||||
name: 'EdgeRenderer',
|
||||
components: {
|
||||
EdgeCmp,
|
||||
ConnectionLine,
|
||||
MarkerDefinitions
|
||||
},
|
||||
props: {
|
||||
edgeTypes: {
|
||||
type: Object,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
connectionLineType: {
|
||||
type: String as PropType<EdgeRendererProps['connectionLineType']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
connectionLineStyle: {
|
||||
type: Object as PropType<EdgeRendererProps['connectionLineStyle']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
connectionLineComponent: {
|
||||
type: Object as PropType<EdgeRendererProps['connectionLineComponent']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
connectionMode: {
|
||||
type: String as PropType<EdgeRendererProps['connectionMode']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
onElementClick: {
|
||||
type: Function as unknown as PropType<EdgeRendererProps['onElementClick']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
onEdgeDoubleClick: {
|
||||
type: Function as unknown as PropType<EdgeRendererProps['onEdgeDoubleClick']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
arrowHeadColor: {
|
||||
type: String as PropType<EdgeRendererProps['arrowHeadColor']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
markerEndId: {
|
||||
type: String as PropType<EdgeRendererProps['markerEndId']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
onlyRenderVisibleElements: {
|
||||
type: Boolean as PropType<EdgeRendererProps['onlyRenderVisibleElements']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
onEdgeUpdate: {
|
||||
type: Function as unknown as PropType<EdgeRendererProps['onEdgeUpdate']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
onEdgeContextMenu: {
|
||||
type: Function as unknown as PropType<EdgeRendererProps['onEdgeContextMenu']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
onEdgeMouseEnter: {
|
||||
type: Function as unknown as PropType<EdgeRendererProps['onEdgeMouseEnter']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
onEdgeMouseMove: {
|
||||
type: Function as unknown as PropType<EdgeRendererProps['onEdgeMouseMove']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
onEdgeMouseLeave: {
|
||||
type: Function as unknown as PropType<EdgeRendererProps['onEdgeMouseLeave']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
onEdgeUpdateStart: {
|
||||
type: Function as unknown as PropType<EdgeRendererProps['onEdgeUpdateStart']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
onEdgeUpdateEnd: {
|
||||
type: Function as unknown as PropType<EdgeRendererProps['onEdgeUpdateEnd']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
edgeUpdaterRadius: {
|
||||
type: Number as PropType<EdgeRendererProps['edgeUpdaterRadius']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
}
|
||||
},
|
||||
setup(props) {
|
||||
const store = inject<RevueFlowStore>('store');
|
||||
const transform = computed(() => store?.transform);
|
||||
const transformStyle = computed(() => {
|
||||
return `translate(${transform.value?.[0]},${transform.value?.[1]}) scale(${transform.value?.[2]})`;
|
||||
});
|
||||
const renderConnectionLine = computed(() => store?.connectionNodeId && store?.connectionHandleType);
|
||||
|
||||
return () => (
|
||||
<svg width={store?.width} height={store?.height} class="revue-flow__edges">
|
||||
<MarkerDefinitions color={props.arrowHeadColor as string} />
|
||||
<g transform={transformStyle.value}>
|
||||
{store?.edges.map((edge: Edge) => (
|
||||
<EdgeCmp
|
||||
key={edge.id}
|
||||
edge={edge}
|
||||
props={props as any}
|
||||
nodes={store?.nodes}
|
||||
selectedElements={store?.selectedElements}
|
||||
elementsSelectable={store?.elementsSelectable}
|
||||
transform={store?.transform}
|
||||
width={store?.width}
|
||||
height={store?.height}
|
||||
onlyRenderVisibleElements={props.onlyRenderVisibleElements}
|
||||
/>
|
||||
))}
|
||||
{renderConnectionLine.value && (
|
||||
<ConnectionLine
|
||||
nodes={store?.nodes}
|
||||
connectionNodeId={store?.connectionNodeId as string}
|
||||
connectionHandleId={store?.connectionHandleId as string}
|
||||
connectionHandleType={store?.connectionHandleType as HandleType}
|
||||
connectionPositionX={store?.connectionPosition.x}
|
||||
connectionPositionY={store?.connectionPosition.y}
|
||||
transform={store?.transform}
|
||||
connectionLineStyle={props.connectionLineStyle}
|
||||
connectionLineType={props.connectionLineType}
|
||||
isConnectable={store?.nodesConnectable}
|
||||
CustomConnectionLineComponent={props.connectionLineComponent}
|
||||
/>
|
||||
)}
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
export default EdgeRenderer;
|
||||
@@ -1,22 +1,20 @@
|
||||
import { DefineComponent } from 'vue';
|
||||
import { BezierEdge, StepEdge, SmoothStepEdge, StraightEdge } from '../../components/Edges';
|
||||
import wrapEdge from '../../components/Edges/wrapEdge';
|
||||
import { rectToBox } from '../../utils/graph';
|
||||
import { EdgeTypesType, Position, Node, XYPosition, ElementId, HandleElement, Transform, Edge, WrapEdgeProps } from '../../types';
|
||||
import { EdgeTypesType, Position, Node, XYPosition, ElementId, HandleElement, Transform, Edge } from '../../types';
|
||||
|
||||
export function createEdgeTypes(edgeTypes: EdgeTypesType): EdgeTypesType {
|
||||
const standardTypes: EdgeTypesType = {
|
||||
default: wrapEdge(edgeTypes.default || BezierEdge) as DefineComponent<WrapEdgeProps>,
|
||||
straight: wrapEdge(edgeTypes.bezier || StraightEdge) as DefineComponent<WrapEdgeProps>,
|
||||
step: wrapEdge(edgeTypes.step || StepEdge) as DefineComponent<WrapEdgeProps>,
|
||||
smoothstep: wrapEdge(edgeTypes.step || SmoothStepEdge) as DefineComponent<WrapEdgeProps>
|
||||
default: edgeTypes.default || BezierEdge,
|
||||
straight: edgeTypes.bezier || StraightEdge,
|
||||
step: edgeTypes.step || StepEdge,
|
||||
smoothstep: edgeTypes.step || SmoothStepEdge
|
||||
};
|
||||
|
||||
const wrappedTypes = {} as EdgeTypesType;
|
||||
const specialTypes: EdgeTypesType = Object.keys(edgeTypes)
|
||||
.filter((k) => !['default', 'bezier'].includes(k))
|
||||
.reduce((res, key) => {
|
||||
res[key] = wrapEdge(edgeTypes[key] || BezierEdge) as DefineComponent<WrapEdgeProps>;
|
||||
res[key] = edgeTypes[key] || BezierEdge;
|
||||
|
||||
return res;
|
||||
}, wrappedTypes);
|
||||
|
||||
@@ -1,8 +1,5 @@
|
||||
<template>
|
||||
<ZoomPane
|
||||
:onMove="onMove"
|
||||
:onMoveStart="onMoveStart"
|
||||
:onMoveEnd="onMoveEnd"
|
||||
:selectionKeyPressed="keyPressed"
|
||||
:elementsSelectable="elementsSelectable"
|
||||
:zoomOnScroll="zoomOnScroll"
|
||||
@@ -19,13 +16,7 @@
|
||||
>
|
||||
<slot></slot>
|
||||
<UserSelection v-if="keyPressed" />
|
||||
<NodesSelection
|
||||
v-if="selectionActive"
|
||||
:onSelectionDragStart="onSelectionDragStart"
|
||||
:onSelectionDrag="onSelectionDrag"
|
||||
:onSelectionDragStop="onSelectionDragStop"
|
||||
:onSelectionContextMenu="onSelectionContextMenu"
|
||||
/>
|
||||
<NodesSelection v-if="selectionActive" />
|
||||
<div class="revue-flow__pane" @click="onClick" @onContextmenu="onContextMenu" @wheel="onWheel" />
|
||||
</ZoomPane>
|
||||
</template>
|
||||
@@ -56,61 +47,6 @@ 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,
|
||||
@@ -194,9 +130,9 @@ const FlowRenderer = defineComponent({
|
||||
|
||||
useGlobalKeyHandler({
|
||||
store,
|
||||
onElementsRemove: props.onElementsRemove,
|
||||
deleteKeyCode: props.deleteKeyCode,
|
||||
multiSelectionKeyCode: props.multiSelectionKeyCode
|
||||
onElementsRemove: hooks.elementsRemove.trigger,
|
||||
deleteKeyCode: props.deleteKeyCode || '',
|
||||
multiSelectionKeyCode: props.multiSelectionKeyCode || ''
|
||||
});
|
||||
|
||||
const onClick = (event: MouseEvent) => {
|
||||
|
||||
@@ -1,217 +0,0 @@
|
||||
import { 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';
|
||||
|
||||
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, { slots }) {
|
||||
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
|
||||
});
|
||||
|
||||
const onClick = (event: MouseEvent) => {
|
||||
props.onPaneClick?.(event);
|
||||
store?.unsetNodesSelection();
|
||||
store?.resetSelectedElements();
|
||||
};
|
||||
|
||||
const onContextMenu = (event: MouseEvent) => {
|
||||
props.onPaneContextMenu?.(event);
|
||||
};
|
||||
|
||||
const onWheel = (event: WheelEvent) => {
|
||||
props.onPaneScroll?.(event);
|
||||
};
|
||||
|
||||
return () => (
|
||||
<ZoomPane
|
||||
onMove={props.onMove}
|
||||
onMoveStart={props.onMoveStart}
|
||||
onMoveEnd={props.onMoveEnd}
|
||||
selectionKeyPressed={keyPressed.value}
|
||||
elementsSelectable={props.elementsSelectable}
|
||||
zoomOnScroll={props.zoomOnScroll}
|
||||
zoomOnPinch={props.zoomOnPinch}
|
||||
panOnScroll={props.panOnScroll}
|
||||
panOnScrollSpeed={props.panOnScrollSpeed}
|
||||
panOnScrollMode={props.panOnScrollMode}
|
||||
zoomOnDoubleClick={props.zoomOnDoubleClick}
|
||||
paneMoveable={props.paneMoveable}
|
||||
defaultPosition={props.defaultPosition}
|
||||
defaultZoom={props.defaultZoom}
|
||||
translateExtent={props.translateExtent}
|
||||
zoomActivationKeyCode={props.zoomActivationKeyCode}
|
||||
>
|
||||
{slots.default ? slots.default() : ''}
|
||||
{keyPressed.value ? <UserSelection /> : ''}
|
||||
{store?.nodesSelectionActive && (
|
||||
<NodesSelection
|
||||
onSelectionDragStart={props.onSelectionDragStart}
|
||||
onSelectionDrag={props.onSelectionDrag}
|
||||
onSelectionDragStop={props.onSelectionDragStop}
|
||||
onSelectionContextMenu={props.onSelectionContextMenu}
|
||||
/>
|
||||
)}
|
||||
<div class="revue-flow__pane" onClick={onClick} onContextmenu={onContextMenu} onWheel={onWheel} />
|
||||
</ZoomPane>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
export default FlowRenderer;
|
||||
@@ -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;
|
||||
@@ -0,0 +1,90 @@
|
||||
<template>
|
||||
<div class="revue-flow__nodes" :style="transformStyle">
|
||||
<template v-for="(node, i) of visibleNodes" :key="`node-${i}`">
|
||||
<Node
|
||||
:node="node"
|
||||
:snap-grid="snapGrid"
|
||||
:snap-to-grid="snapToGrid"
|
||||
:select-nodes-on-drag="selectNodesOnDrag"
|
||||
:type="nodeTypes[node.type]"
|
||||
/>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { getNodesInside } from '../../utils/graph';
|
||||
import { NodeTypesType, RevueFlowStore } from '../../types';
|
||||
import { computed, defineComponent, inject, PropType } from 'vue';
|
||||
import Node from '../../components/Nodes/Node.vue';
|
||||
|
||||
interface NodeRendererProps {
|
||||
nodeTypes: NodeTypesType;
|
||||
selectNodesOnDrag: boolean;
|
||||
snapToGrid: boolean;
|
||||
snapGrid: [number, number];
|
||||
onlyRenderVisibleElements: boolean;
|
||||
}
|
||||
|
||||
const NodeRenderer = defineComponent({
|
||||
name: 'NodeRenderer',
|
||||
components: { Node },
|
||||
props: {
|
||||
nodeTypes: {
|
||||
type: Object as PropType<NodeRendererProps['nodeTypes']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
selectNodesOnDrag: {
|
||||
type: Boolean as PropType<NodeRendererProps['selectNodesOnDrag']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
snapToGrid: {
|
||||
type: Boolean as PropType<NodeRendererProps['snapToGrid']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
snapGrid: {
|
||||
type: Array as unknown as PropType<NodeRendererProps['snapGrid']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
onlyRenderVisibleElements: {
|
||||
type: Boolean as PropType<NodeRendererProps['onlyRenderVisibleElements']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
}
|
||||
},
|
||||
setup(props) {
|
||||
const store = inject<RevueFlowStore>('store')!;
|
||||
|
||||
const visibleNodes = computed(() => {
|
||||
return props.onlyRenderVisibleElements
|
||||
? store.nodes &&
|
||||
getNodesInside(
|
||||
store.nodes,
|
||||
{
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: store?.width,
|
||||
height: store?.height
|
||||
},
|
||||
store.transform,
|
||||
true
|
||||
)
|
||||
: store.nodes;
|
||||
});
|
||||
|
||||
const transformStyle = computed(() => ({
|
||||
transform: `translate(${store.transform[0]}px,${store.transform[1]}px) scale(${store.transform[2]})`
|
||||
}));
|
||||
|
||||
return {
|
||||
transformStyle,
|
||||
visibleNodes
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
export default NodeRenderer;
|
||||
</script>
|
||||
@@ -1,189 +0,0 @@
|
||||
import { getNodesInside } from '../../utils/graph';
|
||||
import { Node, NodeTypesType, Edge, RevueFlowStore } from '../../types';
|
||||
import { computed, defineComponent, inject, PropType } from 'vue';
|
||||
|
||||
interface NodeRendererProps {
|
||||
nodeTypes: NodeTypesType;
|
||||
selectNodesOnDrag: boolean;
|
||||
onElementClick?: (event: MouseEvent, element: Node | Edge) => void;
|
||||
onNodeDoubleClick?: (event: MouseEvent, element: Node) => void;
|
||||
onNodeMouseEnter?: (event: MouseEvent, node: Node) => void;
|
||||
onNodeMouseMove?: (event: MouseEvent, node: Node) => void;
|
||||
onNodeMouseLeave?: (event: MouseEvent, node: Node) => void;
|
||||
onNodeContextMenu?: (event: MouseEvent, node: Node) => void;
|
||||
onNodeDragStart?: (event: MouseEvent, node: Node) => void;
|
||||
onNodeDrag?: (event: MouseEvent, node: Node) => void;
|
||||
onNodeDragStop?: (event: MouseEvent, node: Node) => void;
|
||||
snapToGrid: boolean;
|
||||
snapGrid: [number, number];
|
||||
onlyRenderVisibleElements: boolean;
|
||||
}
|
||||
|
||||
const NodeRenderer = defineComponent({
|
||||
name: 'NodeRenderer',
|
||||
props: {
|
||||
nodeTypes: {
|
||||
type: Object as PropType<NodeRendererProps['nodeTypes']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
selectNodesOnDrag: {
|
||||
type: Boolean as PropType<NodeRendererProps['selectNodesOnDrag']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
snapToGrid: {
|
||||
type: Boolean as PropType<NodeRendererProps['snapToGrid']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
snapGrid: {
|
||||
type: Array as unknown as PropType<NodeRendererProps['snapGrid']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
onlyRenderVisibleElements: {
|
||||
type: Boolean as PropType<NodeRendererProps['onlyRenderVisibleElements']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
onElementClick: {
|
||||
type: Function as unknown as PropType<NodeRendererProps['onElementClick']>,
|
||||
required: false,
|
||||
default: () => {}
|
||||
},
|
||||
onNodeDoubleClick: {
|
||||
type: Function as unknown as PropType<NodeRendererProps['onNodeDoubleClick']>,
|
||||
required: false,
|
||||
default: () => {}
|
||||
},
|
||||
onNodeMouseEnter: {
|
||||
type: Function as unknown as PropType<NodeRendererProps['onNodeMouseEnter']>,
|
||||
required: false,
|
||||
default: () => {}
|
||||
},
|
||||
onNodeMouseMove: {
|
||||
type: Function as unknown as PropType<NodeRendererProps['onNodeMouseMove']>,
|
||||
required: false,
|
||||
default: () => {}
|
||||
},
|
||||
onNodeMouseLeave: {
|
||||
type: Function as unknown as PropType<NodeRendererProps['onNodeMouseLeave']>,
|
||||
required: false,
|
||||
default: () => {}
|
||||
},
|
||||
onNodeContextMenu: {
|
||||
type: Function as unknown as PropType<NodeRendererProps['onNodeContextMenu']>,
|
||||
required: false,
|
||||
default: () => {}
|
||||
},
|
||||
onNodeDrag: {
|
||||
type: Function as unknown as PropType<NodeRendererProps['onNodeDrag']>,
|
||||
required: false,
|
||||
default: () => {}
|
||||
},
|
||||
onNodeDragStart: {
|
||||
type: Function as unknown as PropType<NodeRendererProps['onNodeDragStart']>,
|
||||
required: false,
|
||||
default: () => {}
|
||||
},
|
||||
onNodeDragStop: {
|
||||
type: Function as unknown as PropType<NodeRendererProps['onNodeDragStop']>,
|
||||
required: false,
|
||||
default: () => {}
|
||||
}
|
||||
},
|
||||
setup(props) {
|
||||
const store = inject<RevueFlowStore>('store')!;
|
||||
|
||||
const visibleNodes = computed(() => {
|
||||
return props.onlyRenderVisibleElements
|
||||
? store.nodes &&
|
||||
getNodesInside(
|
||||
store.nodes,
|
||||
{
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: store?.width,
|
||||
height: store?.height
|
||||
},
|
||||
store.transform,
|
||||
true
|
||||
)
|
||||
: store.nodes;
|
||||
});
|
||||
|
||||
const transformStyle = computed(() => ({
|
||||
transform: `translate(${store.transform[0]}px,${store.transform[1]}px) scale(${store.transform[2]})`
|
||||
}));
|
||||
|
||||
const resizeObserver = computed(() => {
|
||||
if (typeof ResizeObserver === 'undefined') {
|
||||
return null;
|
||||
}
|
||||
|
||||
return new ResizeObserver((entries: ResizeObserverEntry[]) => {
|
||||
const updates = entries.map((entry: ResizeObserverEntry) => ({
|
||||
id: entry.target.getAttribute('data-id') as string,
|
||||
nodeElement: entry.target as HTMLDivElement
|
||||
}));
|
||||
|
||||
store.updateNodeDimensions(updates);
|
||||
});
|
||||
});
|
||||
|
||||
return () => (
|
||||
<div class="revue-flow__nodes" style={transformStyle.value}>
|
||||
{visibleNodes.value?.map((node) => {
|
||||
const nodeType = node.type || 'default';
|
||||
if (props.nodeTypes) {
|
||||
const NodeComponent = (props.nodeTypes[nodeType] || props.nodeTypes.default);
|
||||
if (!props.nodeTypes[nodeType]) {
|
||||
console.warn(`Node type "${nodeType}" not found. Using fallback type "default".`);
|
||||
}
|
||||
|
||||
const isDraggable = !!(node.draggable || (store?.nodesDraggable && typeof node.draggable === 'undefined'));
|
||||
const isSelectable = !!(node.selectable || (store?.elementsSelectable && typeof node.selectable === 'undefined'));
|
||||
const isConnectable = !!(node.connectable || (store?.nodesConnectable && typeof node.connectable === 'undefined'));
|
||||
|
||||
return (
|
||||
<NodeComponent
|
||||
key={node.id}
|
||||
id={node.id}
|
||||
type={nodeType}
|
||||
data={node.data}
|
||||
sourcePosition={node.sourcePosition}
|
||||
targetPosition={node.targetPosition}
|
||||
isHidden={node.isHidden}
|
||||
xPos={node.__rf.position.x}
|
||||
yPos={node.__rf.position.y}
|
||||
isDragging={node.__rf.isDragging}
|
||||
isInitialized={node.__rf.width !== null && node.__rf.height !== null}
|
||||
snapGrid={props.snapGrid}
|
||||
snapToGrid={props.snapToGrid}
|
||||
selectNodesOnDrag={props.selectNodesOnDrag}
|
||||
onClick={props.onElementClick}
|
||||
onMouseEnter={props.onNodeMouseEnter}
|
||||
onMouseMove={props.onNodeMouseMove}
|
||||
onMouseLeave={props.onNodeMouseLeave}
|
||||
onContextMenu={props.onNodeContextMenu}
|
||||
onNodeDoubleClick={props.onNodeDoubleClick}
|
||||
onNodeDragStart={props.onNodeDragStart}
|
||||
onNodeDrag={props.onNodeDrag}
|
||||
onNodeDragStop={props.onNodeDragStop}
|
||||
scale={store?.transform[2]}
|
||||
selected={store?.selectedElements?.some(({ id }) => id === node.id) || false}
|
||||
isDraggable={isDraggable}
|
||||
isSelectable={isSelectable}
|
||||
isConnectable={isConnectable}
|
||||
resizeObserver={resizeObserver.value}
|
||||
/>
|
||||
);
|
||||
}
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
export default NodeRenderer;
|
||||
@@ -1,22 +1,21 @@
|
||||
import DefaultNode from '../../components/Nodes/DefaultNode';
|
||||
import InputNode from '../../components/Nodes/InputNode';
|
||||
import OutputNode from '../../components/Nodes/OutputNode';
|
||||
import wrapNode from '../../components/Nodes/wrapNode';
|
||||
import { NodeTypesType, WrapNodeProps } from '../../types';
|
||||
import { DefineComponent } from 'vue';
|
||||
import { NodeTypesType } from '../../types';
|
||||
|
||||
export function createNodeTypes(nodeTypes: NodeTypesType): NodeTypesType {
|
||||
const standardTypes: NodeTypesType = {
|
||||
input: wrapNode(nodeTypes.input || InputNode) as DefineComponent<WrapNodeProps>,
|
||||
default: wrapNode(nodeTypes.default || DefaultNode) as DefineComponent<WrapNodeProps>,
|
||||
output: wrapNode(nodeTypes.output || OutputNode) as DefineComponent<WrapNodeProps>
|
||||
input: nodeTypes.input || InputNode,
|
||||
default: nodeTypes.default || DefaultNode,
|
||||
output: nodeTypes.output || OutputNode
|
||||
};
|
||||
|
||||
const wrappedTypes = {} as NodeTypesType;
|
||||
const specialTypes: NodeTypesType = Object.keys(nodeTypes)
|
||||
.filter((k) => !['input', 'default', 'output'].includes(k))
|
||||
.reduce((res, key) => {
|
||||
res[key] = wrapNode(nodeTypes[key] || DefaultNode) as DefineComponent<WrapNodeProps>;
|
||||
// @ts-ignore
|
||||
res[key] = nodeTypes[key] || DefaultNode;
|
||||
|
||||
return res;
|
||||
}, wrappedTypes);
|
||||
|
||||
@@ -1,19 +1,6 @@
|
||||
<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"
|
||||
@@ -21,14 +8,9 @@
|
||||
: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"
|
||||
@@ -51,21 +33,6 @@
|
||||
: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>
|
||||
@@ -101,12 +68,13 @@ const defaultEdgeTypes = {
|
||||
smoothstep: SmoothStepEdge
|
||||
};
|
||||
|
||||
const eventHooks = useRevueFlow();
|
||||
const RevueFlow = defineComponent({
|
||||
name: 'RevueFlow',
|
||||
components: { GraphView },
|
||||
props: {
|
||||
modelValue: {
|
||||
type: Array as PropType<RevueFlowProps['elements']>,
|
||||
type: Array as PropType<RevueFlowProps['modelValue']>,
|
||||
required: false,
|
||||
default: () => []
|
||||
},
|
||||
@@ -130,106 +98,6 @@ const RevueFlow = defineComponent({
|
||||
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,
|
||||
@@ -380,87 +248,18 @@ const RevueFlow = defineComponent({
|
||||
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'],
|
||||
emits: Object.keys(eventHooks),
|
||||
setup(props, { emit }) {
|
||||
const store = configureStore(initialState)();
|
||||
provide<RevueFlowStore>('store', store);
|
||||
provide<RevueFlowHooks>('hooks', useRevueFlow(emit));
|
||||
eventHooks.bind(emit);
|
||||
provide<RevueFlowHooks>('hooks', eventHooks);
|
||||
const elements = useVModel(props, 'modelValue', emit);
|
||||
|
||||
store.setElements(elements.value);
|
||||
@@ -469,7 +268,6 @@ const RevueFlow = defineComponent({
|
||||
});
|
||||
|
||||
onUpdated(() => {
|
||||
console.log('updated');
|
||||
store.setElements(elements.value);
|
||||
});
|
||||
|
||||
@@ -478,12 +276,16 @@ const RevueFlow = defineComponent({
|
||||
store.setElements([]);
|
||||
});
|
||||
|
||||
const nodeTypesParsed = computed(() => props.nodeTypes && createNodeTypes({ ...defaultNodeTypes, ...props.nodeTypes }));
|
||||
const edgeTypesParsed = computed(() => props.edgeTypes && createEdgeTypes({ ...defaultEdgeTypes, ...props.edgeTypes }));
|
||||
const nodeTypesParsed = computed(
|
||||
() => props.nodeTypes && createNodeTypes({ ...defaultNodeTypes, ...props.nodeTypes } as any)
|
||||
);
|
||||
const edgeTypesParsed = computed(
|
||||
() => props.edgeTypes && createEdgeTypes({ ...defaultEdgeTypes, ...props.edgeTypes } as any)
|
||||
);
|
||||
|
||||
return {
|
||||
nodeTypesParsed: nodeTypesParsed.value,
|
||||
edgeTypesParsed: edgeTypesParsed.value
|
||||
nodeTypesParsed,
|
||||
edgeTypesParsed
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
@@ -1,538 +0,0 @@
|
||||
import { computed, defineComponent, onBeforeUnmount, PropType, provide, watch } from 'vue';
|
||||
import '../../style.css';
|
||||
import '../../theme-default.css';
|
||||
import GraphView from '../GraphView';
|
||||
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';
|
||||
|
||||
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: {
|
||||
elements: {
|
||||
type: Array as PropType<RevueFlowProps['elements']>,
|
||||
required: true
|
||||
},
|
||||
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
|
||||
},
|
||||
onDrop: {
|
||||
type: Function as unknown as PropType<(e: DragEvent) => any>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
onDragover: {
|
||||
type: Function as unknown as PropType<(e: DragEvent) => any>,
|
||||
required: false,
|
||||
default: undefined
|
||||
}
|
||||
|
||||
/* // focus events
|
||||
onFocus: FocusEvent,
|
||||
onFocusin: FocusEvent,
|
||||
onFocusout: FocusEvent,
|
||||
onBlur: FocusEvent,
|
||||
|
||||
// keyboard events
|
||||
onKeydown: KeyboardEvent,
|
||||
onKeypress: KeyboardEvent,
|
||||
onKeyup: KeyboardEvent,
|
||||
|
||||
// mouse events
|
||||
onAuxclick: MouseEvent,
|
||||
onClick: MouseEvent,
|
||||
onContextmenu: MouseEvent,
|
||||
onDblclick: MouseEvent,
|
||||
onMousedown: MouseEvent,
|
||||
onMouseenter: MouseEvent,
|
||||
onMouseleave: MouseEvent,
|
||||
onMousemove: MouseEvent,
|
||||
onMouseout: MouseEvent,
|
||||
onMouseover: MouseEvent,
|
||||
onMouseup: MouseEvent,
|
||||
|
||||
// selection events
|
||||
onSelect: Event,
|
||||
|
||||
// UI events
|
||||
onScroll: UIEvent,
|
||||
|
||||
// touch events
|
||||
onTouchcancel: TouchEvent,
|
||||
onTouchend: TouchEvent,
|
||||
onTouchmove: TouchEvent,
|
||||
onTouchstart: TouchEvent,
|
||||
|
||||
// pointer events
|
||||
onPointerdown: PointerEvent,
|
||||
onPointermove: PointerEvent,
|
||||
onPointerup: PointerEvent,
|
||||
onPointercancel: PointerEvent,
|
||||
onPointerenter: PointerEvent,
|
||||
onPointerleave: PointerEvent,
|
||||
onPointerover: PointerEvent,
|
||||
onPointerout: PointerEvent,
|
||||
|
||||
// wheel events
|
||||
onWheel: WheelEvent,
|
||||
|
||||
// transition events
|
||||
onTransitionend: TransitionEvent,
|
||||
onTransitionstart: TransitionEvent,
|
||||
*/
|
||||
},
|
||||
setup(props, { slots }) {
|
||||
const store = configureStore(initialState)();
|
||||
provide<RevueFlowStore>('store', store);
|
||||
store.setElements(props.elements);
|
||||
|
||||
watch(props, () => {
|
||||
store.setElements(props.elements);
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
store.$reset();
|
||||
store.setElements([]);
|
||||
});
|
||||
|
||||
const nodeTypesParsed = computed(() => props.nodeTypes && createNodeTypes(props.nodeTypes));
|
||||
const edgeTypesParsed = computed(() => props.edgeTypes && createEdgeTypes(props.edgeTypes));
|
||||
|
||||
return () => (
|
||||
<div onDrop={props.onDrop} onDragover={props.onDragover} class="revue-flow">
|
||||
<GraphView
|
||||
onLoad={props.onLoad}
|
||||
onMove={props.onMove}
|
||||
onMoveStart={props.onMoveStart}
|
||||
onMoveEnd={props.onMoveEnd}
|
||||
onElementClick={props.onElementClick}
|
||||
onNodeMouseEnter={props.onNodeMouseEnter}
|
||||
onNodeMouseMove={props.onNodeMouseMove}
|
||||
onNodeMouseLeave={props.onNodeMouseLeave}
|
||||
onNodeContextMenu={props.onNodeContextMenu}
|
||||
onNodeDoubleClick={props.onNodeDoubleClick}
|
||||
onNodeDragStart={props.onNodeDragStart}
|
||||
onNodeDrag={props.onNodeDrag}
|
||||
onNodeDragStop={props.onNodeDragStop}
|
||||
nodeTypes={nodeTypesParsed.value}
|
||||
edgeTypes={edgeTypesParsed.value}
|
||||
connectionMode={props.connectionMode}
|
||||
connectionLineType={props.connectionLineType}
|
||||
connectionLineStyle={props.connectionLineStyle}
|
||||
connectionLineComponent={props.connectionLineComponent}
|
||||
selectionKeyCode={props.selectionKeyCode}
|
||||
onElementsRemove={props.onElementsRemove}
|
||||
deleteKeyCode={props.deleteKeyCode}
|
||||
multiSelectionKeyCode={props.multiSelectionKeyCode}
|
||||
zoomActivationKeyCode={props.zoomActivationKeyCode}
|
||||
onConnect={props.onConnect}
|
||||
onConnectStart={props.onConnectStart}
|
||||
onConnectStop={props.onConnectStop}
|
||||
onConnectEnd={props.onConnectEnd}
|
||||
snapToGrid={props.snapToGrid}
|
||||
snapGrid={props.snapGrid}
|
||||
onlyRenderVisibleElements={props.onlyRenderVisibleElements}
|
||||
nodesDraggable={props.nodesDraggable}
|
||||
nodesConnectable={props.nodesConnectable}
|
||||
elementsSelectable={props.elementsSelectable}
|
||||
selectNodesOnDrag={props.selectNodesOnDrag}
|
||||
minZoom={props.minZoom}
|
||||
maxZoom={props.maxZoom}
|
||||
defaultZoom={props.defaultZoom}
|
||||
defaultPosition={props.defaultPosition}
|
||||
translateExtent={props.translateExtent}
|
||||
nodeExtent={props.nodeExtent}
|
||||
arrowHeadColor={props.arrowHeadColor}
|
||||
markerEndId={props.markerEndId}
|
||||
zoomOnScroll={props.zoomOnScroll}
|
||||
zoomOnPinch={props.zoomOnPinch}
|
||||
zoomOnDoubleClick={props.zoomOnDoubleClick}
|
||||
panOnScroll={props.panOnScroll}
|
||||
panOnScrollSpeed={props.panOnScrollSpeed}
|
||||
panOnScrollMode={props.panOnScrollMode}
|
||||
paneMoveable={props.paneMoveable}
|
||||
onPaneClick={props.onPaneClick}
|
||||
onPaneScroll={props.onPaneScroll}
|
||||
onPaneContextMenu={props.onPaneContextMenu}
|
||||
onSelectionDragStart={props.onSelectionDragStart}
|
||||
onSelectionDrag={props.onSelectionDrag}
|
||||
onSelectionDragStop={props.onSelectionDragStop}
|
||||
onSelectionContextMenu={props.onSelectionContextMenu}
|
||||
onEdgeUpdate={props.onEdgeUpdate}
|
||||
onEdgeContextMenu={props.onEdgeContextMenu}
|
||||
onEdgeDoubleClick={props.onEdgeDoubleClick}
|
||||
onEdgeMouseEnter={props.onEdgeMouseEnter}
|
||||
onEdgeMouseMove={props.onEdgeMouseMove}
|
||||
onEdgeMouseLeave={props.onEdgeMouseLeave}
|
||||
onEdgeUpdateStart={props.onEdgeUpdateStart}
|
||||
onEdgeUpdateEnd={props.onEdgeUpdateEnd}
|
||||
edgeUpdaterRadius={props.edgeUpdaterRadius}
|
||||
/>
|
||||
{slots.default ? slots.default() : ''}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
export default RevueFlow;
|
||||
+18
-12
@@ -1,12 +1,12 @@
|
||||
// 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 }>;
|
||||
nodeClick: EventHook<{ event: MouseEvent; node: Node }>;
|
||||
nodeMouseEnter: EventHook<{ event: MouseEvent; node: Node }>;
|
||||
nodeMouseMove: EventHook<{ event: MouseEvent; node: Node }>;
|
||||
nodeMouseLeave: EventHook<{ event: MouseEvent; node: Node }>;
|
||||
@@ -14,7 +14,7 @@ export interface RevueFlowHooks {
|
||||
nodeDragStart: EventHook<{ event: MouseEvent; node: Node }>;
|
||||
nodeDrag: EventHook<{ event: MouseEvent; node: Node }>;
|
||||
nodeDragStop: EventHook<{ event: MouseEvent; node: Node }>;
|
||||
connect: EventHook<Edge | Connection>;
|
||||
connect: EventHook<Connection>;
|
||||
connectStart: EventHook<{
|
||||
event: MouseEvent;
|
||||
params: OnConnectStartParams;
|
||||
@@ -33,21 +33,23 @@ export interface RevueFlowHooks {
|
||||
paneScroll: EventHook<WheelEvent | undefined>;
|
||||
paneClick: EventHook<MouseEvent>;
|
||||
paneContextMenu: EventHook<MouseEvent>;
|
||||
edgeUpdate: EventHook<{ oldEdge: Edge; newConnection: Connection }>;
|
||||
edgeUpdate: EventHook<{ edge: Edge; connection: 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 }>;
|
||||
edgeClick: EventHook<{ event: MouseEvent; edge: Edge }>;
|
||||
edgeUpdateStart: EventHook<{ event: MouseEvent; edge: Edge }>;
|
||||
edgeUpdateEnd: EventHook<{ event: MouseEvent; edge: Edge }>;
|
||||
}
|
||||
|
||||
export const useRevueFlow = (emit: SetupContext['emit']): RevueFlowHooks => {
|
||||
export const useRevueFlow = (): RevueFlowHooks & { bind: (emit: (event: string, ...args: any[]) => void) => void } => {
|
||||
const eventHooks: RevueFlowHooks = {
|
||||
elementClick: createEventHook<{ event: MouseEvent; element: Node | Edge }>(),
|
||||
elementsRemove: createEventHook<Elements>(),
|
||||
nodeDoubleClick: createEventHook<{ event: MouseEvent; node: Node }>(),
|
||||
nodeClick: createEventHook<{ event: MouseEvent; node: Node }>(),
|
||||
nodeMouseEnter: createEventHook<{ event: MouseEvent; node: Node }>(),
|
||||
nodeMouseMove: createEventHook<{ event: MouseEvent; node: Node }>(),
|
||||
nodeMouseLeave: createEventHook<{ event: MouseEvent; node: Node }>(),
|
||||
@@ -55,7 +57,7 @@ export const useRevueFlow = (emit: SetupContext['emit']): RevueFlowHooks => {
|
||||
nodeDragStart: createEventHook<{ event: MouseEvent; node: Node }>(),
|
||||
nodeDrag: createEventHook<{ event: MouseEvent; node: Node }>(),
|
||||
nodeDragStop: createEventHook<{ event: MouseEvent; node: Node }>(),
|
||||
connect: createEventHook<Edge | Connection>(),
|
||||
connect: createEventHook<Connection>(),
|
||||
connectStart: createEventHook<{
|
||||
event: MouseEvent;
|
||||
params: OnConnectStartParams;
|
||||
@@ -74,23 +76,27 @@ export const useRevueFlow = (emit: SetupContext['emit']): RevueFlowHooks => {
|
||||
paneScroll: createEventHook<WheelEvent | undefined>(),
|
||||
paneClick: createEventHook<MouseEvent>(),
|
||||
paneContextMenu: createEventHook<MouseEvent>(),
|
||||
edgeUpdate: createEventHook<{ oldEdge: Edge; newConnection: Connection }>(),
|
||||
edgeUpdate: createEventHook<{ edge: Edge; connection: 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 }>(),
|
||||
edgeClick: 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);
|
||||
});
|
||||
}
|
||||
const bind = (emit: (event: string, args: any) => void) => {
|
||||
for (const [key, value] of Object.entries(eventHooks)) {
|
||||
value.on((data: any) => {
|
||||
emit(key, data);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
return {
|
||||
...eventHooks
|
||||
...eventHooks,
|
||||
bind
|
||||
};
|
||||
};
|
||||
|
||||
+12
-149
@@ -40,7 +40,13 @@ export interface Node<T = any> {
|
||||
id: ElementId;
|
||||
position: XYPosition;
|
||||
type?: string;
|
||||
__rf?: any;
|
||||
__rf: {
|
||||
position: XYPosition;
|
||||
isDragging?: boolean;
|
||||
width: number | null;
|
||||
height: number | null;
|
||||
handleBounds?: any;
|
||||
};
|
||||
data?: T;
|
||||
style?: any;
|
||||
className?: string;
|
||||
@@ -499,152 +505,6 @@ export interface NodeComponentProps<T = any> {
|
||||
isDragging?: boolean;
|
||||
}
|
||||
|
||||
export const WrapNodeProps = {
|
||||
id: {
|
||||
type: String as PropType<WrapNodeProps['id']>,
|
||||
required: true
|
||||
},
|
||||
type: {
|
||||
type: String as PropType<WrapNodeProps['type']>,
|
||||
required: true
|
||||
},
|
||||
data: {
|
||||
type: Object as PropType<WrapNodeProps['data']>,
|
||||
required: false,
|
||||
default: undefined as any
|
||||
},
|
||||
selected: {
|
||||
type: Boolean as PropType<WrapNodeProps['selected']>,
|
||||
required: false,
|
||||
default: false
|
||||
},
|
||||
scale: {
|
||||
type: Number as PropType<WrapNodeProps['scale']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
xPos: {
|
||||
type: Number as PropType<WrapNodeProps['xPos']>,
|
||||
required: false,
|
||||
default: 0
|
||||
},
|
||||
yPos: {
|
||||
type: Number as PropType<WrapNodeProps['yPos']>,
|
||||
required: false,
|
||||
default: 0
|
||||
},
|
||||
isSelectable: {
|
||||
type: Boolean as PropType<WrapNodeProps['isSelectable']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
isDraggable: {
|
||||
type: Boolean as PropType<WrapNodeProps['isDraggable']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
isConnectable: {
|
||||
type: Boolean as PropType<WrapNodeProps['isConnectable']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
selectNodesOnDrag: {
|
||||
type: Boolean as PropType<WrapNodeProps['selectNodesOnDrag']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
onClick: {
|
||||
type: Function() as PropType<WrapNodeProps['onClick']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
onNodeDoubleClick: {
|
||||
type: Function() as PropType<WrapNodeProps['onNodeDoubleClick']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
onMouseEnter: {
|
||||
type: Function() as PropType<WrapNodeProps['onMouseEnter']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
onMouseMove: {
|
||||
type: Function() as PropType<WrapNodeProps['onMouseMove']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
onMouseLeave: {
|
||||
type: Function() as PropType<WrapNodeProps['onMouseLeave']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
onContextMenu: {
|
||||
type: Function() as PropType<WrapNodeProps['onContextMenu']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
onNodeDragStart: {
|
||||
type: Function() as PropType<WrapNodeProps['onNodeDragStart']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
onNodeDrag: {
|
||||
type: Function() as PropType<WrapNodeProps['onNodeDrag']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
onNodeDragStop: {
|
||||
type: Function() as PropType<WrapNodeProps['onNodeDragStop']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
style: {
|
||||
type: Object as PropType<WrapNodeProps['style']>,
|
||||
required: false,
|
||||
default: undefined as any
|
||||
},
|
||||
sourcePosition: {
|
||||
type: String as PropType<WrapNodeProps['sourcePosition']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
targetPosition: {
|
||||
type: String as PropType<WrapNodeProps['targetPosition']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
isHidden: {
|
||||
type: Boolean as PropType<WrapNodeProps['isHidden']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
isInitialized: {
|
||||
type: Boolean as PropType<WrapNodeProps['isInitialized']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
snapToGrid: {
|
||||
type: Boolean as PropType<WrapNodeProps['snapToGrid']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
snapGrid: {
|
||||
type: Object as PropType<WrapNodeProps['snapGrid']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
isDragging: {
|
||||
type: Boolean as PropType<WrapNodeProps['isDragging']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
resizeObserver: {
|
||||
type: Object as PropType<WrapNodeProps['resizeObserver']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
}
|
||||
};
|
||||
|
||||
export interface WrapNodeProps<T = any> {
|
||||
id: ElementId;
|
||||
type: string;
|
||||
@@ -894,8 +754,7 @@ export type RevueFlowStore = Store<string, RevueFlowState, any, RevueFlowActions
|
||||
|
||||
export type UpdateNodeInternals = (nodeId: ElementId) => void;
|
||||
|
||||
export interface RevueFlowProps extends Omit<HTMLAttributes, 'onLoad'> {
|
||||
elements: Elements;
|
||||
export interface RevueFlowEvents {
|
||||
onElementClick?: (event: MouseEvent, element: Node | Edge) => void;
|
||||
onElementsRemove?: (elements: Elements) => void;
|
||||
onNodeDoubleClick?: (event: MouseEvent, node: Node) => void;
|
||||
@@ -930,6 +789,10 @@ export interface RevueFlowProps extends Omit<HTMLAttributes, 'onLoad'> {
|
||||
onEdgeDoubleClick?: (event: MouseEvent, edge: Edge) => void;
|
||||
onEdgeUpdateStart?: (event: MouseEvent, edge: Edge) => void;
|
||||
onEdgeUpdateEnd?: (event: MouseEvent, edge: Edge) => void;
|
||||
}
|
||||
|
||||
export interface RevueFlowProps extends Omit<HTMLAttributes, 'onLoad'> {
|
||||
modelValue: Elements;
|
||||
nodeTypes?: NodeTypesType;
|
||||
edgeTypes?: EdgeTypesType;
|
||||
connectionMode?: ConnectionMode;
|
||||
|
||||
+3
-3
@@ -202,7 +202,7 @@ export const getRectOfNodes = (nodes: Node[]): Rect => {
|
||||
...position,
|
||||
width,
|
||||
height
|
||||
})
|
||||
} as any)
|
||||
),
|
||||
{ x: Infinity, y: Infinity, x2: -Infinity, y2: -Infinity }
|
||||
);
|
||||
@@ -224,7 +224,7 @@ export const getNodesInside = (nodes: Node[], rect: Rect, [tx, ty, tScale]: Tran
|
||||
});
|
||||
|
||||
return nodes.filter(({ __rf: { position, width, height, isDragging } }) => {
|
||||
const nBox = rectToBox({ ...position, width, height });
|
||||
const nBox = rectToBox({ ...position, width, height } as any);
|
||||
const xOverlap = Math.max(0, Math.min(rBox.x2, nBox.x2) - Math.max(rBox.x, nBox.x));
|
||||
const yOverlap = Math.max(0, Math.min(rBox.y2, nBox.y2) - Math.max(rBox.y, nBox.y));
|
||||
const overlappingArea = Math.ceil(xOverlap * yOverlap);
|
||||
@@ -257,7 +257,7 @@ const parseElements = (nodes: Node[], edges: Edge[]): Elements => {
|
||||
|
||||
n.position = n.__rf.position;
|
||||
|
||||
delete n.__rf;
|
||||
n.__rf = {} as any;
|
||||
return n;
|
||||
}),
|
||||
...edges.map((e) => ({ ...e }))
|
||||
|
||||
@@ -21,6 +21,7 @@
|
||||
"noImplicitReturns": false,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"types": ["node"]
|
||||
},
|
||||
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
|
||||
"exclude": ["node_modules", "build", "dist", "example"]
|
||||
|
||||
+1
-3
@@ -10,9 +10,7 @@ export default defineConfig({
|
||||
},
|
||||
plugins: [
|
||||
vue(),
|
||||
vueJsx({
|
||||
// options are passed on to @vue/babel-plugin-jsx
|
||||
}),
|
||||
vueJsx(),
|
||||
svgLoader()
|
||||
]
|
||||
});
|
||||
|
||||
@@ -796,10 +796,10 @@
|
||||
"@vue/babel-plugin-jsx" "^1.0.6"
|
||||
hash-sum "^2.0.0"
|
||||
|
||||
"@vitejs/plugin-vue@^1.2.3":
|
||||
version "1.2.4"
|
||||
resolved "https://registry.yarnpkg.com/@vitejs/plugin-vue/-/plugin-vue-1.2.4.tgz#a7aa6e6a31c556a8b781de730316deeecf7f56f2"
|
||||
integrity sha512-D/3H9plevPQGgQGwmV6eecvOnooLTecPR63HPffVVWPEhbfvmtYLWgznzs456NBb2DItiRTCIa1yWxvGqC+I8A==
|
||||
"@vitejs/plugin-vue@^1.2.5":
|
||||
version "1.2.5"
|
||||
resolved "https://registry.yarnpkg.com/@vitejs/plugin-vue/-/plugin-vue-1.2.5.tgz#ef7dc4a92e53fe866b54bcc1266788513262ac09"
|
||||
integrity sha512-GIR31mdXTEfvElmBUaRhDc5v7lfdkEdawWQqJRiaRL/5qKsH+xusukglkvJz5y7+c6dEpxgmvcATv2BbB7+fzQ==
|
||||
|
||||
"@vue/babel-helper-vue-transform-on@^1.0.2":
|
||||
version "1.0.2"
|
||||
@@ -832,6 +832,17 @@
|
||||
estree-walker "^2.0.1"
|
||||
source-map "^0.6.1"
|
||||
|
||||
"@vue/compiler-core@3.2.0-beta.5":
|
||||
version "3.2.0-beta.5"
|
||||
resolved "https://registry.yarnpkg.com/@vue/compiler-core/-/compiler-core-3.2.0-beta.5.tgz#6f331c5c1befd7a102f861de19ee08d1da43d41e"
|
||||
integrity sha512-EjOvdpTcPEWgsNufn0qI9lbEiX3kztuKwxUR3YSGUKyB8gmyowP9/Z4uBziawR/Rd3AdDF9RarURd/bpmsQg7w==
|
||||
dependencies:
|
||||
"@babel/parser" "^7.12.0"
|
||||
"@babel/types" "^7.12.0"
|
||||
"@vue/shared" "3.2.0-beta.5"
|
||||
estree-walker "^2.0.1"
|
||||
source-map "^0.6.1"
|
||||
|
||||
"@vue/compiler-dom@3.1.4":
|
||||
version "3.1.4"
|
||||
resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.1.4.tgz#bf3795e1449f32c965d38c4ea6d808ca05fdfc97"
|
||||
@@ -840,7 +851,15 @@
|
||||
"@vue/compiler-core" "3.1.4"
|
||||
"@vue/shared" "3.1.4"
|
||||
|
||||
"@vue/compiler-sfc@^3.0.11", "@vue/compiler-sfc@^3.0.5":
|
||||
"@vue/compiler-dom@3.2.0-beta.5":
|
||||
version "3.2.0-beta.5"
|
||||
resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.2.0-beta.5.tgz#e43c25166c2cd94745d06da2786d95e03a4a6180"
|
||||
integrity sha512-1jdWiXyPAvNh2FXkh2nm/uYFQnmGewldVAeMaw2l9FUbRtFc9itwZTAh/7Dp1xTIRqXoJ1by9xYaAsawJugJ/Q==
|
||||
dependencies:
|
||||
"@vue/compiler-core" "3.2.0-beta.5"
|
||||
"@vue/shared" "3.2.0-beta.5"
|
||||
|
||||
"@vue/compiler-sfc@^3.0.11":
|
||||
version "3.1.4"
|
||||
resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.1.4.tgz#93e87db950e0711339c18baa7bb7d28d3522d7bc"
|
||||
integrity sha512-4KDQg60Khy3SgnF+V/TB2NZqzmM4TyGRmzsxqG1SebGdMSecCweFDSlI/F1vDYk6dKiCHgmpoT9A1sLxswkJ0A==
|
||||
@@ -863,6 +882,29 @@
|
||||
postcss-selector-parser "^6.0.4"
|
||||
source-map "^0.6.1"
|
||||
|
||||
"@vue/compiler-sfc@^3.2.0-beta.5":
|
||||
version "3.2.0-beta.5"
|
||||
resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.2.0-beta.5.tgz#9de430dbb3307f56759404151f51c6bf20291f69"
|
||||
integrity sha512-9JJ22GsQJKsBP7925t5q1ZPyFUjH5zKXrnuy3HA7gXxtz47LHJwK7WjsLb1mY106pVyCkm0KDbvNZWymoIOX6g==
|
||||
dependencies:
|
||||
"@babel/parser" "^7.13.9"
|
||||
"@babel/types" "^7.13.0"
|
||||
"@types/estree" "^0.0.48"
|
||||
"@vue/compiler-core" "3.2.0-beta.5"
|
||||
"@vue/compiler-dom" "3.2.0-beta.5"
|
||||
"@vue/compiler-ssr" "3.2.0-beta.5"
|
||||
"@vue/shared" "3.2.0-beta.5"
|
||||
consolidate "^0.16.0"
|
||||
estree-walker "^2.0.1"
|
||||
hash-sum "^2.0.0"
|
||||
lru-cache "^5.1.1"
|
||||
magic-string "^0.25.7"
|
||||
merge-source-map "^1.1.0"
|
||||
postcss "^8.1.10"
|
||||
postcss-modules "^4.0.0"
|
||||
postcss-selector-parser "^6.0.4"
|
||||
source-map "^0.6.1"
|
||||
|
||||
"@vue/compiler-ssr@3.1.4":
|
||||
version "3.1.4"
|
||||
resolved "https://registry.yarnpkg.com/@vue/compiler-ssr/-/compiler-ssr-3.1.4.tgz#7f6eaac5b1851fc15c82c083e8179eb1216b303c"
|
||||
@@ -871,6 +913,14 @@
|
||||
"@vue/compiler-dom" "3.1.4"
|
||||
"@vue/shared" "3.1.4"
|
||||
|
||||
"@vue/compiler-ssr@3.2.0-beta.5":
|
||||
version "3.2.0-beta.5"
|
||||
resolved "https://registry.yarnpkg.com/@vue/compiler-ssr/-/compiler-ssr-3.2.0-beta.5.tgz#84035f5c9a11e1a8c90d6704a33c324133a943d3"
|
||||
integrity sha512-8TaR908AEWyCwzYzox1MF+1rD1ycoXYKJXVDk+hLK7NGCVkm9Z3HWDuajYhz/kB0w2CeYW2MBno850kmwsTNjg==
|
||||
dependencies:
|
||||
"@vue/compiler-dom" "3.2.0-beta.5"
|
||||
"@vue/shared" "3.2.0-beta.5"
|
||||
|
||||
"@vue/devtools-api@^6.0.0-beta.14":
|
||||
version "6.0.0-beta.15"
|
||||
resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.0.0-beta.15.tgz#ad7cb384e062f165bcf9c83732125bffbc2ad83d"
|
||||
@@ -883,28 +933,28 @@
|
||||
dependencies:
|
||||
vue-eslint-parser "^7.0.0"
|
||||
|
||||
"@vue/reactivity@3.1.4":
|
||||
version "3.1.4"
|
||||
resolved "https://registry.yarnpkg.com/@vue/reactivity/-/reactivity-3.1.4.tgz#d926ed46fb0d48582ccf8665b062d37b5d35ba99"
|
||||
integrity sha512-YDlgii2Cr9yAoKVZFzgY4j0mYlVT73986X3e5SPp6ifqckSEoFSUWXZK2Tb53TB/9qO29BEEbspnKD3m3wAwkA==
|
||||
"@vue/reactivity@3.2.0-beta.5":
|
||||
version "3.2.0-beta.5"
|
||||
resolved "https://registry.yarnpkg.com/@vue/reactivity/-/reactivity-3.2.0-beta.5.tgz#feb93dff247700213fec4c52569b901186850e16"
|
||||
integrity sha512-MI+C+96B+GML1vWprH8N02blLpVWtkmcyg7ptP5dB6TDFooRA2MRfR4SMTi4rY6kKVR7qc5nc0CxpQ1XoPqFpA==
|
||||
dependencies:
|
||||
"@vue/shared" "3.1.4"
|
||||
"@vue/shared" "3.2.0-beta.5"
|
||||
|
||||
"@vue/runtime-core@3.1.4":
|
||||
version "3.1.4"
|
||||
resolved "https://registry.yarnpkg.com/@vue/runtime-core/-/runtime-core-3.1.4.tgz#3e30ae6ecbfff06df5adc9414491143191a375ba"
|
||||
integrity sha512-qmVJgJuFxfT7M4qHQ4M6KqhKC66fjuswK+aBivE8dWiZ2rtIGl9gtJGpwqwjQEcKEBTOfvvrtrwBncYArJUO8Q==
|
||||
"@vue/runtime-core@3.2.0-beta.5":
|
||||
version "3.2.0-beta.5"
|
||||
resolved "https://registry.yarnpkg.com/@vue/runtime-core/-/runtime-core-3.2.0-beta.5.tgz#33046b0fe257e804c86c93e54291304aa3fa4e58"
|
||||
integrity sha512-LcSrZu5bXBhzQuXAih5HqLpoYNrjYgYjTVp9wJyR6AUCxz65qAVRjilxYJ5oTsZce578oVg+wfMRJ22rt/rC5A==
|
||||
dependencies:
|
||||
"@vue/reactivity" "3.1.4"
|
||||
"@vue/shared" "3.1.4"
|
||||
"@vue/reactivity" "3.2.0-beta.5"
|
||||
"@vue/shared" "3.2.0-beta.5"
|
||||
|
||||
"@vue/runtime-dom@3.1.4":
|
||||
version "3.1.4"
|
||||
resolved "https://registry.yarnpkg.com/@vue/runtime-dom/-/runtime-dom-3.1.4.tgz#acfeee200d5c45fc2cbdf7058cda1498f9b45849"
|
||||
integrity sha512-vbmwgTxku1BU87Kw7r29adv0OIrDXCW0PslOPQT0O/9R5SqcXgS94Yj6zsztDjvghegenwIAPNLlDR1Auh5s+w==
|
||||
"@vue/runtime-dom@3.2.0-beta.5":
|
||||
version "3.2.0-beta.5"
|
||||
resolved "https://registry.yarnpkg.com/@vue/runtime-dom/-/runtime-dom-3.2.0-beta.5.tgz#f8afa19ea8d9c435c5437b4517c0fc23336933ec"
|
||||
integrity sha512-m/0u7avR7r7mcGqlNnRUPWECeSNXkc2tcc5URnBKn7BN8pcAoJp3M0kZ5/dZQANjek4/8EXiEPazDY9+4EJhJA==
|
||||
dependencies:
|
||||
"@vue/runtime-core" "3.1.4"
|
||||
"@vue/shared" "3.1.4"
|
||||
"@vue/runtime-core" "3.2.0-beta.5"
|
||||
"@vue/shared" "3.2.0-beta.5"
|
||||
csstype "^2.6.8"
|
||||
|
||||
"@vue/shared@3.1.4":
|
||||
@@ -912,6 +962,11 @@
|
||||
resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.1.4.tgz#c14c461ec42ea2c1556e86f60b0354341d91adc3"
|
||||
integrity sha512-6O45kZAmkLvzGLToBxEz4lR2W6kXohCtebV2UxjH9GXjd8X9AhEn68FN9eNanFtWNzvgw1hqd6HkPRVQalqf7Q==
|
||||
|
||||
"@vue/shared@3.2.0-beta.5":
|
||||
version "3.2.0-beta.5"
|
||||
resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.2.0-beta.5.tgz#c2752bac51476bfd9c6050f4a5e97c28eb66f27a"
|
||||
integrity sha512-DprP8v3vg/nnfl4b93hJ+ujojiFAMwXbng8N9NpNDSuFMZG0zFO3Tqh3X1JQgaE7jUgYoQzR2TTGCKNb/4+QGA==
|
||||
|
||||
"@vueuse/core@^5.1.3", "@vueuse/core@^5.1.4":
|
||||
version "5.1.4"
|
||||
resolved "https://registry.yarnpkg.com/@vueuse/core/-/core-5.1.4.tgz#c590bd1ff5cdd3d2caa033b65ed8cb42fc12a534"
|
||||
@@ -5691,14 +5746,14 @@ vue-tsc@^0.0.24:
|
||||
dependencies:
|
||||
unzipper "0.10.11"
|
||||
|
||||
vue@^3.0.5:
|
||||
version "3.1.4"
|
||||
resolved "https://registry.yarnpkg.com/vue/-/vue-3.1.4.tgz#120d6818c51eaa35d0879e5bc1cff60135bc69fd"
|
||||
integrity sha512-p8dcdyeCgmaAiZsbLyDkmOLcFGZb/jEVdCLW65V68LRCXTNX8jKsgah2F7OZ/v/Ai2V0Fb1MNO0vz/GFqsPVMA==
|
||||
vue@^3.2.0-beta.5:
|
||||
version "3.2.0-beta.5"
|
||||
resolved "https://registry.yarnpkg.com/vue/-/vue-3.2.0-beta.5.tgz#113b6ac8db10eb7f5880851fcbd38d8eecca9fc4"
|
||||
integrity sha512-WeXugURsTr0TaFKMkh+bTebw/gIYacyKnuF7sJAthhLd6dsf02qQ5tBJKSV22aieOnGBGMj2yJgreVwacVwrrQ==
|
||||
dependencies:
|
||||
"@vue/compiler-dom" "3.1.4"
|
||||
"@vue/runtime-dom" "3.1.4"
|
||||
"@vue/shared" "3.1.4"
|
||||
"@vue/compiler-dom" "3.2.0-beta.5"
|
||||
"@vue/runtime-dom" "3.2.0-beta.5"
|
||||
"@vue/shared" "3.2.0-beta.5"
|
||||
|
||||
which-boxed-primitive@^1.0.2:
|
||||
version "1.0.2"
|
||||
|
||||
Reference in New Issue
Block a user