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
@@ -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;
|
||||
Reference in New Issue
Block a user