feat: Transform react-flow to vue-jsx
This commit is contained in:
Braks
@@ -0,0 +1,72 @@
|
||||
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="react-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="react-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="react-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,368 @@
|
||||
import ConnectionLine from '../../components/ConnectionLine/index';
|
||||
import { isEdge } from '../../utils/graph';
|
||||
import MarkerDefinitions from './MarkerDefinitions';
|
||||
import { getEdgePositions, getHandle, isEdgeVisible, getSourceTargetNodes } from './utils';
|
||||
import {
|
||||
Position,
|
||||
Edge,
|
||||
Node,
|
||||
Elements,
|
||||
Connection,
|
||||
ConnectionLineType,
|
||||
ConnectionLineComponent,
|
||||
ConnectionMode,
|
||||
Transform,
|
||||
OnEdgeUpdateFunc
|
||||
} from '../../types';
|
||||
import { computed, CSSProperties, defineComponent, PropType, ref } from 'vue';
|
||||
import store from '../../store';
|
||||
|
||||
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 sourceHandleId = props.edge.sourceHandle || null;
|
||||
const targetHandleId = props.edge.targetHandle || null;
|
||||
const nodes = computed(() => {
|
||||
console.log('foo');
|
||||
return getSourceTargetNodes(props.edge, props.nodes);
|
||||
});
|
||||
const { sourceNode, targetNode } = nodes.value;
|
||||
console.log(nodes.value);
|
||||
|
||||
const onConnectEdge = (connection: Connection) => {
|
||||
props.props.onEdgeUpdate?.(props.edge, connection);
|
||||
};
|
||||
|
||||
if (!sourceNode) {
|
||||
console.log(`couldn't create edge for source id: ${props.edge.source}; edge id: ${props.edge.id}`);
|
||||
return null;
|
||||
}
|
||||
|
||||
if (!targetNode) {
|
||||
console.log(`couldn't create edge for target id: ${props.edge.target}; edge id: ${props.edge.id}`);
|
||||
return null;
|
||||
}
|
||||
|
||||
// source and target node need to be initialized
|
||||
if (!sourceNode.__rf.width || !targetNode.__rf.width) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const edgeType = props.edge.type || 'default';
|
||||
const EdgeComponent: any = props.props.edgeTypes[edgeType] || props.props.edgeTypes.default;
|
||||
const targetNodeBounds = targetNode.__rf.handleBounds;
|
||||
// when connection type is loose we can define all handles as sources
|
||||
const targetNodeHandles =
|
||||
props.connectionMode === ConnectionMode.Strict
|
||||
? targetNodeBounds.target
|
||||
: targetNodeBounds.target || targetNodeBounds.source;
|
||||
const sourceHandle = getHandle(sourceNode.__rf.handleBounds.source, sourceHandleId);
|
||||
const targetHandle = getHandle(targetNodeHandles, targetHandleId);
|
||||
const sourcePosition = sourceHandle ? sourceHandle.position : Position.Bottom;
|
||||
const targetPosition = targetHandle ? targetHandle.position : Position.Top;
|
||||
|
||||
if (!sourceHandle) {
|
||||
console.log(`couldn't create edge for source handle id: ${sourceHandleId}; edge id: ${props.edge.id}`);
|
||||
return null;
|
||||
}
|
||||
|
||||
if (!targetHandle) {
|
||||
console.log(`couldn't create edge for target handle id: ${targetHandleId}; edge id: ${props.edge.id}`);
|
||||
return null;
|
||||
}
|
||||
|
||||
const { sourceX, sourceY, targetX, targetY } = getEdgePositions(
|
||||
sourceNode,
|
||||
sourceHandle,
|
||||
sourcePosition,
|
||||
targetNode,
|
||||
targetHandle,
|
||||
targetPosition
|
||||
);
|
||||
|
||||
const isVisible = computed(() => {
|
||||
return props.onlyRenderVisibleElements
|
||||
? isEdgeVisible({
|
||||
sourcePos: { x: sourceX, y: sourceY },
|
||||
targetPos: { x: targetX, y: 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={sourceHandleId}
|
||||
targetHandleId={targetHandleId}
|
||||
sourceX={sourceX}
|
||||
sourceY={sourceY}
|
||||
targetX={targetX}
|
||||
targetY={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 },
|
||||
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 PropType<EdgeRendererProps['onElementClick']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
onEdgeDoubleClick: {
|
||||
type: Function() 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 PropType<EdgeRendererProps['onEdgeUpdate']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
onEdgeContextMenu: {
|
||||
type: Function() as PropType<EdgeRendererProps['onEdgeContextMenu']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
onEdgeMouseEnter: {
|
||||
type: Function() as PropType<EdgeRendererProps['onEdgeMouseEnter']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
onEdgeMouseMove: {
|
||||
type: Function() as PropType<EdgeRendererProps['onEdgeMouseMove']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
onEdgeMouseLeave: {
|
||||
type: Function() as PropType<EdgeRendererProps['onEdgeMouseLeave']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
onEdgeUpdateStart: {
|
||||
type: Function() as PropType<EdgeRendererProps['onEdgeUpdateStart']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
onEdgeUpdateEnd: {
|
||||
type: Function() as PropType<EdgeRendererProps['onEdgeUpdateEnd']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
edgeUpdaterRadius: {
|
||||
type: Number as PropType<EdgeRendererProps['edgeUpdaterRadius']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
}
|
||||
},
|
||||
setup(props) {
|
||||
const pinia = store();
|
||||
|
||||
const transformStyle = `translate(${pinia.transform[0]},${pinia.transform[1]}) scale(${pinia.transform[2]})`;
|
||||
const renderConnectionLine = pinia.connectionNodeId && pinia.connectionHandleType;
|
||||
|
||||
return () => (
|
||||
<svg width={pinia.width} height={pinia.height} class="react-flow__edges">
|
||||
<g transform={transformStyle}>
|
||||
{pinia.edges.map((edge: Edge) => (
|
||||
<EdgeCmp
|
||||
key={edge.id}
|
||||
edge={edge}
|
||||
props={props as any}
|
||||
nodes={pinia.nodes}
|
||||
selectedElements={pinia.selectedElements}
|
||||
elementsSelectable={pinia.elementsSelectable}
|
||||
transform={pinia.transform}
|
||||
width={pinia.width}
|
||||
height={pinia.height}
|
||||
onlyRenderVisibleElements={props.onlyRenderVisibleElements}
|
||||
/>
|
||||
))}
|
||||
{renderConnectionLine && (
|
||||
<ConnectionLine
|
||||
nodes={pinia.nodes}
|
||||
connectionNodeId={pinia.connectionNodeId!}
|
||||
connectionHandleId={pinia.connectionHandleId}
|
||||
connectionHandleType={pinia.connectionHandleType!}
|
||||
connectionPositionX={pinia.connectionPosition.x}
|
||||
connectionPositionY={pinia.connectionPosition.y}
|
||||
transform={pinia.transform}
|
||||
connectionLineStyle={props.connectionLineStyle}
|
||||
connectionLineType={props.connectionLineType}
|
||||
isConnectable={pinia.nodesConnectable}
|
||||
CustomConnectionLineComponent={props.connectionLineComponent}
|
||||
/>
|
||||
)}
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
export default EdgeRenderer;
|
||||
@@ -0,0 +1,161 @@
|
||||
import { BezierEdge, StepEdge, SmoothStepEdge, StraightEdge } from '../../components/Edges';
|
||||
import wrapEdge from '../../components/Edges/wrapEdge';
|
||||
import { rectToBox } from '../../utils/graph';
|
||||
|
||||
import { EdgeTypesType, EdgeProps, Position, Node, XYPosition, ElementId, HandleElement, Transform, Edge } from '../../types';
|
||||
import { Component } from 'vue';
|
||||
|
||||
export function createEdgeTypes(edgeTypes: EdgeTypesType): EdgeTypesType {
|
||||
const standardTypes: EdgeTypesType = {
|
||||
default: wrapEdge(edgeTypes.default || BezierEdge),
|
||||
straight: wrapEdge(edgeTypes.bezier || StraightEdge),
|
||||
step: wrapEdge(edgeTypes.step || StepEdge),
|
||||
smoothstep: wrapEdge(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 Component<EdgeProps>);
|
||||
|
||||
return res;
|
||||
}, wrappedTypes);
|
||||
|
||||
return {
|
||||
...standardTypes,
|
||||
...specialTypes
|
||||
};
|
||||
}
|
||||
|
||||
export function getHandlePosition(position: Position, node: Node, handle: any | null = null): XYPosition {
|
||||
const x = (handle?.x || 0) + node.__rf.position.x;
|
||||
const y = (handle?.y || 0) + node.__rf.position.y;
|
||||
const width = handle?.width || node.__rf.width;
|
||||
const height = handle?.height || node.__rf.height;
|
||||
|
||||
switch (position) {
|
||||
case Position.Top:
|
||||
return {
|
||||
x: x + width / 2,
|
||||
y
|
||||
};
|
||||
case Position.Right:
|
||||
return {
|
||||
x: x + width,
|
||||
y: y + height / 2
|
||||
};
|
||||
case Position.Bottom:
|
||||
return {
|
||||
x: x + width / 2,
|
||||
y: y + height
|
||||
};
|
||||
case Position.Left:
|
||||
return {
|
||||
x,
|
||||
y: y + height / 2
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
export function getHandle(bounds: HandleElement[], handleId: ElementId | null): HandleElement | null {
|
||||
console.log('handle', bounds);
|
||||
if (!bounds) {
|
||||
return null;
|
||||
}
|
||||
|
||||
// there is no handleId when there are no multiple handles/ handles with ids
|
||||
// so we just pick the first one
|
||||
let handle = null;
|
||||
if (bounds.length === 1 || !handleId) {
|
||||
handle = bounds[0];
|
||||
} else if (handleId) {
|
||||
handle = bounds.find((d) => d.id === handleId);
|
||||
}
|
||||
|
||||
return typeof handle === 'undefined' ? null : handle;
|
||||
}
|
||||
|
||||
interface EdgePositions {
|
||||
sourceX: number;
|
||||
sourceY: number;
|
||||
targetX: number;
|
||||
targetY: number;
|
||||
}
|
||||
|
||||
export const getEdgePositions = (
|
||||
sourceNode: Node,
|
||||
sourceHandle: HandleElement | unknown,
|
||||
sourcePosition: Position,
|
||||
targetNode: Node,
|
||||
targetHandle: HandleElement | unknown,
|
||||
targetPosition: Position
|
||||
): EdgePositions => {
|
||||
const sourceHandlePos = getHandlePosition(sourcePosition, sourceNode, sourceHandle);
|
||||
const targetHandlePos = getHandlePosition(targetPosition, targetNode, targetHandle);
|
||||
|
||||
return {
|
||||
sourceX: sourceHandlePos.x,
|
||||
sourceY: sourceHandlePos.y,
|
||||
targetX: targetHandlePos.x,
|
||||
targetY: targetHandlePos.y
|
||||
};
|
||||
};
|
||||
|
||||
interface IsEdgeVisibleParams {
|
||||
sourcePos: XYPosition;
|
||||
targetPos: XYPosition;
|
||||
width: number;
|
||||
height: number;
|
||||
transform: Transform;
|
||||
}
|
||||
|
||||
export function isEdgeVisible({ sourcePos, targetPos, width, height, transform }: IsEdgeVisibleParams): boolean {
|
||||
const edgeBox = {
|
||||
x: Math.min(sourcePos.x, targetPos.x),
|
||||
y: Math.min(sourcePos.y, targetPos.y),
|
||||
x2: Math.max(sourcePos.x, targetPos.x),
|
||||
y2: Math.max(sourcePos.y, targetPos.y)
|
||||
};
|
||||
|
||||
if (edgeBox.x === edgeBox.x2) {
|
||||
edgeBox.x2 += 1;
|
||||
}
|
||||
|
||||
if (edgeBox.y === edgeBox.y2) {
|
||||
edgeBox.y2 += 1;
|
||||
}
|
||||
|
||||
const viewBox = rectToBox({
|
||||
x: (0 - transform[0]) / transform[2],
|
||||
y: (0 - transform[1]) / transform[2],
|
||||
width: width / transform[2],
|
||||
height: height / transform[2]
|
||||
});
|
||||
|
||||
const xOverlap = Math.max(0, Math.min(viewBox.x2, edgeBox.x2) - Math.max(viewBox.x, edgeBox.x));
|
||||
const yOverlap = Math.max(0, Math.min(viewBox.y2, edgeBox.y2) - Math.max(viewBox.y, edgeBox.y));
|
||||
const overlappingArea = Math.ceil(xOverlap * yOverlap);
|
||||
|
||||
return overlappingArea > 0;
|
||||
}
|
||||
|
||||
type SourceTargetNode = {
|
||||
sourceNode: Node | null;
|
||||
targetNode: Node | null;
|
||||
};
|
||||
|
||||
export const getSourceTargetNodes = (edge: Edge, nodes: Node[]): SourceTargetNode => {
|
||||
return nodes.reduce(
|
||||
(res, node) => {
|
||||
if (node.id === edge.source) {
|
||||
res.sourceNode = node;
|
||||
}
|
||||
if (node.id === edge.target) {
|
||||
res.targetNode = node;
|
||||
}
|
||||
return res;
|
||||
},
|
||||
{ sourceNode: null, targetNode: null } as SourceTargetNode
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,198 @@
|
||||
import { GraphViewProps } from '../GraphView';
|
||||
import ZoomPane from '../ZoomPane';
|
||||
import UserSelection from '../../components/UserSelection';
|
||||
import { defineComponent, PropType } from 'vue';
|
||||
import store from '../../store';
|
||||
|
||||
type FlowRendererProps = Omit<
|
||||
GraphViewProps,
|
||||
| 'elements'
|
||||
| 'snapToGrid'
|
||||
| 'nodeTypes'
|
||||
| 'edgeTypes'
|
||||
| 'snapGrid'
|
||||
| 'connectionLineType'
|
||||
| 'arrowHeadColor'
|
||||
| 'onlyRenderVisibleElements'
|
||||
| 'selectNodesOnDrag'
|
||||
>;
|
||||
|
||||
const FlowRenderer = defineComponent({
|
||||
name: 'FlowRenderer',
|
||||
components: { UserSelection, ZoomPane },
|
||||
props: {
|
||||
onPaneClick: {
|
||||
type: Function() as PropType<FlowRendererProps['onPaneClick']>,
|
||||
required: false,
|
||||
default: undefined as any
|
||||
},
|
||||
onPaneContextMenu: {
|
||||
type: Function() as PropType<FlowRendererProps['onPaneContextMenu']>,
|
||||
required: false,
|
||||
default: undefined as any
|
||||
},
|
||||
onPaneScroll: {
|
||||
type: Function() as PropType<FlowRendererProps['onPaneScroll']>,
|
||||
required: false,
|
||||
default: undefined as any
|
||||
},
|
||||
onElementsRemove: {
|
||||
type: Function() as PropType<FlowRendererProps['onElementsRemove']>,
|
||||
required: false,
|
||||
default: undefined as any
|
||||
},
|
||||
onMove: {
|
||||
type: Function() as PropType<FlowRendererProps['onMove']>,
|
||||
required: false,
|
||||
default: undefined as any
|
||||
},
|
||||
onMoveStart: {
|
||||
type: Function() as PropType<FlowRendererProps['onMoveStart']>,
|
||||
required: false,
|
||||
default: undefined as any
|
||||
},
|
||||
onMoveEnd: {
|
||||
type: Function() as PropType<FlowRendererProps['onMoveEnd']>,
|
||||
required: false,
|
||||
default: undefined as any
|
||||
},
|
||||
onSelectionDragStart: {
|
||||
type: Function() as PropType<FlowRendererProps['onSelectionDragStart']>,
|
||||
required: false,
|
||||
default: undefined as any
|
||||
},
|
||||
onSelectionDrag: {
|
||||
type: Function() as PropType<FlowRendererProps['onSelectionDrag']>,
|
||||
required: false,
|
||||
default: undefined as any
|
||||
},
|
||||
onSelectionDragStop: {
|
||||
type: Function() as PropType<FlowRendererProps['onSelectionDragStop']>,
|
||||
required: false,
|
||||
default: undefined as any
|
||||
},
|
||||
onSelectionContextMenu: {
|
||||
type: Function() as PropType<FlowRendererProps['onSelectionContextMenu']>,
|
||||
required: false,
|
||||
default: undefined as any
|
||||
},
|
||||
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 pinia = store();
|
||||
|
||||
const onClick = (event: MouseEvent) => {
|
||||
props.onPaneClick?.(event);
|
||||
pinia.unsetNodesSelection();
|
||||
pinia.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={false}
|
||||
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() : ''}
|
||||
<div class="react-flow__pane" onClick={onClick} onContextmenu={onContextMenu} onWheel={onWheel} />
|
||||
</ZoomPane>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
export default FlowRenderer;
|
||||
@@ -0,0 +1,530 @@
|
||||
import FlowRenderer from '../FlowRenderer';
|
||||
import NodeRenderer from '../NodeRenderer';
|
||||
import EdgeRenderer from '../EdgeRenderer';
|
||||
import { onLoadProject, onLoadGetElements, onLoadToObject } from '../../utils/graph';
|
||||
|
||||
import { ReactFlowProps } from '../RevueFlow';
|
||||
|
||||
import { NodeTypesType, EdgeTypesType, ConnectionLineType, KeyCode } from '../../types';
|
||||
import { CSSProperties, defineComponent, onMounted, PropType, ref } from 'vue';
|
||||
import store from '../../store';
|
||||
import useZoomPanHelper from '../../hooks/useZoomPanHelper';
|
||||
|
||||
export interface GraphViewProps extends Omit<ReactFlowProps, 'onSelectionChange' | 'elements'> {
|
||||
nodeTypes: NodeTypesType;
|
||||
edgeTypes: EdgeTypesType;
|
||||
selectionKeyCode: KeyCode;
|
||||
deleteKeyCode: KeyCode;
|
||||
multiSelectionKeyCode: KeyCode;
|
||||
connectionLineType: ConnectionLineType;
|
||||
snapToGrid: boolean;
|
||||
snapGrid: [number, number];
|
||||
onlyRenderVisibleElements: boolean;
|
||||
defaultZoom: number;
|
||||
defaultPosition: [number, number];
|
||||
arrowHeadColor: string;
|
||||
selectNodesOnDrag: boolean;
|
||||
}
|
||||
|
||||
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 PropType<GraphViewProps['onMove']>,
|
||||
required: false,
|
||||
default: undefined as any
|
||||
},
|
||||
onMoveStart: {
|
||||
type: Function() as PropType<GraphViewProps['onMoveStart']>,
|
||||
required: false,
|
||||
default: undefined as any
|
||||
},
|
||||
onMoveEnd: {
|
||||
type: Function() as PropType<GraphViewProps['onMoveEnd']>,
|
||||
required: false,
|
||||
default: undefined as any
|
||||
},
|
||||
onLoad: {
|
||||
type: Function() as PropType<GraphViewProps['onLoad']>,
|
||||
required: false,
|
||||
default: undefined as any
|
||||
},
|
||||
onElementClick: {
|
||||
type: Function() as PropType<GraphViewProps['onElementClick']>,
|
||||
required: false,
|
||||
default: undefined as any
|
||||
},
|
||||
onNodeDoubleClick: {
|
||||
type: Function() as PropType<GraphViewProps['onNodeDoubleClick']>,
|
||||
required: false,
|
||||
default: undefined as any
|
||||
},
|
||||
onEdgeDoubleClick: {
|
||||
type: Function() as PropType<GraphViewProps['onEdgeDoubleClick']>,
|
||||
required: false,
|
||||
default: undefined as any
|
||||
},
|
||||
onNodeMouseEnter: {
|
||||
type: Function() as PropType<GraphViewProps['onNodeMouseEnter']>,
|
||||
required: false,
|
||||
default: undefined as any
|
||||
},
|
||||
onNodeMouseMove: {
|
||||
type: Function() as PropType<GraphViewProps['onNodeMouseMove']>,
|
||||
required: false,
|
||||
default: undefined as any
|
||||
},
|
||||
onNodeMouseLeave: {
|
||||
type: Function() as PropType<GraphViewProps['onNodeMouseLeave']>,
|
||||
required: false,
|
||||
default: undefined as any
|
||||
},
|
||||
onNodeContextMenu: {
|
||||
type: Function() as PropType<GraphViewProps['onNodeContextMenu']>,
|
||||
required: false,
|
||||
default: undefined as any
|
||||
},
|
||||
onNodeDragStart: {
|
||||
type: Function() as PropType<GraphViewProps['onNodeDragStart']>,
|
||||
required: false,
|
||||
default: undefined as any
|
||||
},
|
||||
onNodeDrag: {
|
||||
type: Function() as PropType<GraphViewProps['onNodeDrag']>,
|
||||
required: false,
|
||||
default: undefined as any
|
||||
},
|
||||
onNodeDragStop: {
|
||||
type: Function() as PropType<GraphViewProps['onNodeDragStop']>,
|
||||
required: false,
|
||||
default: undefined as any
|
||||
},
|
||||
onSelectionContextMenu: {
|
||||
type: Function() as PropType<GraphViewProps['onSelectionContextMenu']>,
|
||||
required: false,
|
||||
default: undefined as any
|
||||
},
|
||||
onElementsRemove: {
|
||||
type: Function() as PropType<GraphViewProps['onElementsRemove']>,
|
||||
required: false,
|
||||
default: undefined as any
|
||||
},
|
||||
onConnect: {
|
||||
type: Function() as PropType<GraphViewProps['onConnect']>,
|
||||
required: false,
|
||||
default: undefined as any
|
||||
},
|
||||
onConnectStart: {
|
||||
type: Function() as PropType<GraphViewProps['onConnectStart']>,
|
||||
required: false,
|
||||
default: undefined as any
|
||||
},
|
||||
onConnectStop: {
|
||||
type: Function() as PropType<GraphViewProps['onConnectStop']>,
|
||||
required: false,
|
||||
default: undefined as any
|
||||
},
|
||||
onConnectEnd: {
|
||||
type: Function() 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 PropType<GraphViewProps['onPaneClick']>,
|
||||
required: false,
|
||||
default: undefined as any
|
||||
},
|
||||
onPaneScroll: {
|
||||
type: Function() as PropType<GraphViewProps['onPaneScroll']>,
|
||||
required: false,
|
||||
default: undefined as any
|
||||
},
|
||||
onPaneContextMenu: {
|
||||
type: Function() as PropType<GraphViewProps['onPaneContextMenu']>,
|
||||
required: false,
|
||||
default: undefined as any
|
||||
},
|
||||
onEdgeUpdate: {
|
||||
type: Function() as PropType<GraphViewProps['onEdgeUpdate']>,
|
||||
required: false,
|
||||
default: undefined as any
|
||||
},
|
||||
onEdgeMouseEnter: {
|
||||
type: Function() as PropType<GraphViewProps['onEdgeMouseEnter']>,
|
||||
required: false,
|
||||
default: undefined as any
|
||||
},
|
||||
onEdgeContextMenu: {
|
||||
type: Function() as PropType<GraphViewProps['onEdgeContextMenu']>,
|
||||
required: false,
|
||||
default: undefined as any
|
||||
},
|
||||
onEdgeMouseMove: {
|
||||
type: Function() as PropType<GraphViewProps['onEdgeMouseMove']>,
|
||||
required: false,
|
||||
default: undefined as any
|
||||
},
|
||||
onEdgeMouseLeave: {
|
||||
type: Function() as PropType<GraphViewProps['onEdgeMouseLeave']>,
|
||||
required: false,
|
||||
default: undefined as any
|
||||
},
|
||||
onEdgeUpdateEnd: {
|
||||
type: Function() as PropType<GraphViewProps['onEdgeUpdateEnd']>,
|
||||
required: false,
|
||||
default: undefined as any
|
||||
},
|
||||
onEdgeUpdateStart: {
|
||||
type: Function() as PropType<GraphViewProps['onEdgeUpdateStart']>,
|
||||
required: false,
|
||||
default: undefined as any
|
||||
},
|
||||
edgeUpdaterRadius: {
|
||||
type: Number as PropType<GraphViewProps['edgeUpdaterRadius']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
}
|
||||
},
|
||||
setup(props) {
|
||||
const pinia = store();
|
||||
const isInitialized = ref<boolean>(false);
|
||||
|
||||
const { zoomIn, zoomOut, zoomTo, transform, fitView, initialized } = useZoomPanHelper();
|
||||
|
||||
onMounted(() => {
|
||||
if (!isInitialized.value && initialized) {
|
||||
if (props.onLoad) {
|
||||
props.onLoad({
|
||||
fitView: (params = { padding: 0.1 }) => fitView(params),
|
||||
zoomIn,
|
||||
zoomOut,
|
||||
zoomTo,
|
||||
setTransform: transform,
|
||||
project: onLoadProject(pinia),
|
||||
getElements: onLoadGetElements(pinia),
|
||||
toObject: onLoadToObject(pinia)
|
||||
} as any);
|
||||
}
|
||||
|
||||
isInitialized.value = true;
|
||||
}
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
if (props.onConnect) {
|
||||
pinia.setOnConnect(props.onConnect);
|
||||
}
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
if (props.onConnectStart) {
|
||||
pinia.setOnConnectStart(props.onConnectStart);
|
||||
}
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
if (props.onConnectStop) {
|
||||
pinia.setOnConnectStop(props.onConnectStop);
|
||||
}
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
if (props.onConnectEnd) {
|
||||
pinia.setOnConnectEnd(props.onConnectEnd);
|
||||
}
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
if (typeof props.snapToGrid !== 'undefined') {
|
||||
pinia.setSnapToGrid(props.snapToGrid);
|
||||
}
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
if (typeof props.snapGrid !== 'undefined') {
|
||||
pinia.setSnapGrid(props.snapGrid);
|
||||
}
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
if (typeof props.nodesDraggable !== 'undefined') {
|
||||
pinia.setNodesDraggable(!!props.nodesDraggable);
|
||||
}
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
if (typeof props.nodesConnectable !== 'undefined') {
|
||||
pinia.setNodesConnectable(!!props.nodesConnectable);
|
||||
}
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
if (typeof props.elementsSelectable !== 'undefined') {
|
||||
pinia.setElementsSelectable(!!props.elementsSelectable);
|
||||
}
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
if (typeof props.minZoom !== 'undefined') {
|
||||
pinia.setMinZoom(props.minZoom as any);
|
||||
}
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
if (typeof props.maxZoom !== 'undefined') {
|
||||
pinia.setMaxZoom(props.maxZoom as any);
|
||||
}
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
if (typeof props.translateExtent !== 'undefined') {
|
||||
pinia.setTranslateExtent(props.translateExtent as any);
|
||||
}
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
if (typeof props.nodeExtent !== 'undefined') {
|
||||
pinia.setNodeExtent(props.nodeExtent as any);
|
||||
}
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
if (typeof props.connectionMode !== 'undefined') {
|
||||
pinia.setConnectionMode(props.connectionMode as any);
|
||||
}
|
||||
});
|
||||
|
||||
return () => (
|
||||
<FlowRenderer
|
||||
onPaneClick={props.onPaneClick}
|
||||
onPaneContextMenu={props.onPaneContextMenu}
|
||||
onPaneScroll={props.onPaneScroll}
|
||||
onElementsRemove={props.onElementsRemove}
|
||||
deleteKeyCode={props.deleteKeyCode as any}
|
||||
selectionKeyCode={props.selectionKeyCode as any}
|
||||
multiSelectionKeyCode={props.multiSelectionKeyCode as any}
|
||||
zoomActivationKeyCode={props.zoomActivationKeyCode as any}
|
||||
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 as any}
|
||||
defaultZoom={props.defaultZoom as any}
|
||||
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,191 @@
|
||||
import { getNodesInside } from '../../utils/graph';
|
||||
import { Node, NodeTypesType, Edge } from '../../types';
|
||||
import { computed, defineComponent, PropType } from 'vue';
|
||||
import store from '../../store';
|
||||
|
||||
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 PropType<NodeRendererProps['onElementClick']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
onNodeDoubleClick: {
|
||||
type: Function() as PropType<NodeRendererProps['onNodeDoubleClick']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
onNodeMouseEnter: {
|
||||
type: Function() as PropType<NodeRendererProps['onNodeMouseEnter']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
onNodeMouseMove: {
|
||||
type: Function() as PropType<NodeRendererProps['onNodeMouseMove']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
onNodeMouseLeave: {
|
||||
type: Function() as PropType<NodeRendererProps['onNodeMouseLeave']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
onNodeContextMenu: {
|
||||
type: Function() as PropType<NodeRendererProps['onNodeContextMenu']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
onNodeDrag: {
|
||||
type: Function() as PropType<NodeRendererProps['onNodeDrag']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
onNodeDragStart: {
|
||||
type: Function() as PropType<NodeRendererProps['onNodeDragStart']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
onNodeDragStop: {
|
||||
type: Function() as PropType<NodeRendererProps['onNodeDragStop']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
}
|
||||
},
|
||||
setup(props) {
|
||||
const pinia = store();
|
||||
|
||||
const visibleNodes = computed(() => {
|
||||
return props.onlyRenderVisibleElements
|
||||
? getNodesInside(
|
||||
pinia.nodes,
|
||||
{
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: pinia.width,
|
||||
height: pinia.height
|
||||
},
|
||||
pinia.transform,
|
||||
true
|
||||
)
|
||||
: pinia.nodes;
|
||||
});
|
||||
|
||||
const transformStyle = computed(() => ({
|
||||
transform: `translate(${pinia.transform[0]}px,${pinia.transform[1]}px) scale(${pinia.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
|
||||
}));
|
||||
|
||||
pinia.updateNodeDimensions(updates);
|
||||
});
|
||||
});
|
||||
|
||||
return () => (
|
||||
<div class="react-flow__nodes" style={transformStyle.value}>
|
||||
{visibleNodes.value.map((node) => {
|
||||
const nodeType = node.type || 'default';
|
||||
if (props.nodeTypes) {
|
||||
const NodeComponent: any = (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 || (pinia.nodesDraggable && typeof node.draggable === 'undefined'));
|
||||
const isSelectable = !!(node.selectable || (pinia.elementsSelectable && typeof node.selectable === 'undefined'));
|
||||
const isConnectable = !!(node.connectable || (pinia.nodesConnectable && typeof node.connectable === 'undefined'));
|
||||
|
||||
return (
|
||||
<NodeComponent
|
||||
key={node.id}
|
||||
id={node.id}
|
||||
className={node.className}
|
||||
style={node.style}
|
||||
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={pinia.transform[2]}
|
||||
selected={pinia.selectedElements?.some(({ id }) => id === node.id) || false}
|
||||
isDraggable={isDraggable}
|
||||
isSelectable={isSelectable}
|
||||
isConnectable={isConnectable}
|
||||
resizeObserver={resizeObserver.value}
|
||||
/>
|
||||
);
|
||||
}
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
export default NodeRenderer;
|
||||
@@ -0,0 +1,27 @@
|
||||
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 } from '../../types';
|
||||
|
||||
export function createNodeTypes(nodeTypes: NodeTypesType): NodeTypesType {
|
||||
const standardTypes: NodeTypesType = {
|
||||
input: wrapNode(nodeTypes.input || InputNode),
|
||||
default: wrapNode(nodeTypes.default || DefaultNode),
|
||||
output: wrapNode(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);
|
||||
|
||||
return res;
|
||||
}, wrappedTypes);
|
||||
|
||||
return {
|
||||
...standardTypes,
|
||||
...specialTypes
|
||||
};
|
||||
}
|
||||
@@ -1,28 +1,538 @@
|
||||
import { computed, CSSProperties, defineComponent, HTMLAttributes, onMounted, PropType, provide } from 'vue';
|
||||
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 {
|
||||
Elements,
|
||||
NodeTypesType,
|
||||
EdgeTypesType,
|
||||
OnLoadFunc,
|
||||
Node,
|
||||
Edge,
|
||||
Connection,
|
||||
ConnectionMode,
|
||||
ConnectionLineType,
|
||||
ConnectionLineComponent,
|
||||
FlowTransform,
|
||||
OnConnectStartFunc,
|
||||
OnConnectStopFunc,
|
||||
OnConnectEndFunc,
|
||||
TranslateExtent,
|
||||
KeyCode,
|
||||
PanOnScrollMode,
|
||||
OnEdgeUpdateFunc,
|
||||
NodeExtent
|
||||
} from '../../types';
|
||||
|
||||
import '../../style.css';
|
||||
import '../../theme-default.css';
|
||||
import { HTMLAttributes, defineComponent } from 'vue';
|
||||
import store from '../../store';
|
||||
|
||||
const defaultNodeTypes = {
|
||||
input: 'InputNode',
|
||||
default: 'DefaultNode',
|
||||
output: 'OutputNode'
|
||||
input: InputNode,
|
||||
default: DefaultNode,
|
||||
output: OutputNode
|
||||
};
|
||||
|
||||
const defaultEdgeTypes = {
|
||||
default: 'BezierEdge',
|
||||
straight: 'StraightEdge',
|
||||
step: 'StepEdge',
|
||||
smoothstep: 'SmoothStepEdge'
|
||||
default: BezierEdge,
|
||||
straight: StraightEdge,
|
||||
step: StepEdge,
|
||||
smoothstep: SmoothStepEdge
|
||||
};
|
||||
|
||||
export interface ReactFlowProps extends Omit<HTMLAttributes, 'onLoad'> {}
|
||||
|
||||
export type ReactFlowRefType = HTMLDivElement;
|
||||
export interface ReactFlowProps extends Omit<HTMLAttributes, 'onLoad'> {
|
||||
elements: Elements;
|
||||
onElementClick?: (event: MouseEvent, element: Node | Edge) => void;
|
||||
onElementsRemove?: (elements: Elements) => void;
|
||||
onNodeDoubleClick?: (event: MouseEvent, node: 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;
|
||||
onConnect?: (connection: Edge | Connection) => void;
|
||||
onConnectStart?: OnConnectStartFunc;
|
||||
onConnectStop?: OnConnectStopFunc;
|
||||
onConnectEnd?: OnConnectEndFunc;
|
||||
onLoad?: OnLoadFunc;
|
||||
onMove?: (flowTransform?: FlowTransform) => void;
|
||||
onMoveStart?: (flowTransform?: FlowTransform) => void;
|
||||
onMoveEnd?: (flowTransform?: FlowTransform) => void;
|
||||
onSelectionChange?: (elements: Elements | null) => void;
|
||||
onSelectionDragStart?: (event: MouseEvent, nodes: Node[]) => void;
|
||||
onSelectionDrag?: (event: MouseEvent, nodes: Node[]) => void;
|
||||
onSelectionDragStop?: (event: MouseEvent, nodes: Node[]) => void;
|
||||
onSelectionContextMenu?: (event: MouseEvent, nodes: Node[]) => void;
|
||||
onPaneScroll?: (event?: WheelEvent) => void;
|
||||
onPaneClick?: (event: MouseEvent) => void;
|
||||
onPaneContextMenu?: (event: MouseEvent) => void;
|
||||
nodeTypes?: NodeTypesType;
|
||||
edgeTypes?: EdgeTypesType;
|
||||
connectionMode?: ConnectionMode;
|
||||
connectionLineType?: ConnectionLineType;
|
||||
connectionLineStyle?: CSSProperties;
|
||||
connectionLineComponent?: ConnectionLineComponent;
|
||||
deleteKeyCode?: KeyCode;
|
||||
selectionKeyCode?: KeyCode;
|
||||
multiSelectionKeyCode?: KeyCode;
|
||||
zoomActivationKeyCode?: KeyCode;
|
||||
snapToGrid?: boolean;
|
||||
snapGrid?: [number, number];
|
||||
onlyRenderVisibleElements?: boolean;
|
||||
nodesDraggable?: boolean;
|
||||
nodesConnectable?: boolean;
|
||||
elementsSelectable?: boolean;
|
||||
selectNodesOnDrag?: boolean;
|
||||
paneMoveable?: boolean;
|
||||
minZoom?: number;
|
||||
maxZoom?: number;
|
||||
defaultZoom?: number;
|
||||
defaultPosition?: [number, number];
|
||||
translateExtent?: TranslateExtent;
|
||||
nodeExtent?: NodeExtent;
|
||||
arrowHeadColor?: string;
|
||||
markerEndId?: string;
|
||||
zoomOnScroll?: boolean;
|
||||
zoomOnPinch?: boolean;
|
||||
panOnScroll?: boolean;
|
||||
panOnScrollSpeed?: number;
|
||||
panOnScrollMode?: PanOnScrollMode;
|
||||
zoomOnDoubleClick?: boolean;
|
||||
onEdgeUpdate?: OnEdgeUpdateFunc;
|
||||
onEdgeContextMenu?: (event: MouseEvent, edge: Edge) => void;
|
||||
onEdgeMouseEnter?: (event: MouseEvent, edge: Edge) => void;
|
||||
onEdgeMouseMove?: (event: MouseEvent, edge: Edge) => void;
|
||||
onEdgeMouseLeave?: (event: MouseEvent, edge: Edge) => void;
|
||||
onEdgeDoubleClick?: (event: MouseEvent, edge: Edge) => void;
|
||||
onEdgeUpdateStart?: (event: MouseEvent, edge: Edge) => void;
|
||||
onEdgeUpdateEnd?: (event: MouseEvent, edge: Edge) => void;
|
||||
edgeUpdaterRadius?: number;
|
||||
nodeTypesId?: string;
|
||||
edgeTypesId?: string;
|
||||
}
|
||||
|
||||
const RevueFlow = defineComponent({
|
||||
name: 'RevueFlow',
|
||||
setup() {
|
||||
return () => <div>Revue Flow!</div>;
|
||||
components: { GraphView },
|
||||
props: {
|
||||
elements: {
|
||||
type: Object as PropType<ReactFlowProps['elements']>,
|
||||
required: true
|
||||
},
|
||||
nodeTypesId: {
|
||||
type: String as PropType<ReactFlowProps['nodeTypesId']>,
|
||||
required: false,
|
||||
default: '1'
|
||||
},
|
||||
edgeTypesId: {
|
||||
type: String as PropType<ReactFlowProps['edgeTypesId']>,
|
||||
required: false,
|
||||
default: '1'
|
||||
},
|
||||
nodeTypes: {
|
||||
type: Object as PropType<ReactFlowProps['nodeTypes']>,
|
||||
required: false,
|
||||
default: () => defaultNodeTypes
|
||||
},
|
||||
edgeTypes: {
|
||||
type: Object as PropType<ReactFlowProps['edgeTypes']>,
|
||||
required: false,
|
||||
default: () => defaultEdgeTypes
|
||||
},
|
||||
onMove: {
|
||||
type: Function() as PropType<ReactFlowProps['onMove']>,
|
||||
required: false,
|
||||
default: undefined as any
|
||||
},
|
||||
onMoveStart: {
|
||||
type: Function() as PropType<ReactFlowProps['onMoveStart']>,
|
||||
required: false,
|
||||
default: undefined as any
|
||||
},
|
||||
onMoveEnd: {
|
||||
type: Function() as PropType<ReactFlowProps['onMoveEnd']>,
|
||||
required: false,
|
||||
default: undefined as any
|
||||
},
|
||||
onLoad: {
|
||||
type: Function() as PropType<ReactFlowProps['onLoad']>,
|
||||
required: false,
|
||||
default: undefined as any
|
||||
},
|
||||
onElementClick: {
|
||||
type: Function() as PropType<ReactFlowProps['onElementClick']>,
|
||||
required: false,
|
||||
default: undefined as any
|
||||
},
|
||||
onNodeDoubleClick: {
|
||||
type: Function() as PropType<ReactFlowProps['onNodeDoubleClick']>,
|
||||
required: false,
|
||||
default: undefined as any
|
||||
},
|
||||
onEdgeDoubleClick: {
|
||||
type: Function() as PropType<ReactFlowProps['onEdgeDoubleClick']>,
|
||||
required: false,
|
||||
default: undefined as any
|
||||
},
|
||||
onNodeMouseEnter: {
|
||||
type: Function() as PropType<ReactFlowProps['onNodeMouseEnter']>,
|
||||
required: false,
|
||||
default: undefined as any
|
||||
},
|
||||
onNodeMouseMove: {
|
||||
type: Function() as PropType<ReactFlowProps['onNodeMouseMove']>,
|
||||
required: false,
|
||||
default: undefined as any
|
||||
},
|
||||
onNodeMouseLeave: {
|
||||
type: Function() as PropType<ReactFlowProps['onNodeMouseLeave']>,
|
||||
required: false,
|
||||
default: undefined as any
|
||||
},
|
||||
onNodeContextMenu: {
|
||||
type: Function() as PropType<ReactFlowProps['onNodeContextMenu']>,
|
||||
required: false,
|
||||
default: undefined as any
|
||||
},
|
||||
onNodeDragStart: {
|
||||
type: Function() as PropType<ReactFlowProps['onNodeDragStart']>,
|
||||
required: false,
|
||||
default: undefined as any
|
||||
},
|
||||
onNodeDrag: {
|
||||
type: Function() as PropType<ReactFlowProps['onNodeDrag']>,
|
||||
required: false,
|
||||
default: undefined as any
|
||||
},
|
||||
onNodeDragStop: {
|
||||
type: Function() as PropType<ReactFlowProps['onNodeDragStop']>,
|
||||
required: false,
|
||||
default: undefined as any
|
||||
},
|
||||
onSelectionContextMenu: {
|
||||
type: Function() as PropType<ReactFlowProps['onSelectionContextMenu']>,
|
||||
required: false,
|
||||
default: undefined as any
|
||||
},
|
||||
onElementsRemove: {
|
||||
type: Function() as PropType<ReactFlowProps['onElementsRemove']>,
|
||||
required: false,
|
||||
default: undefined as any
|
||||
},
|
||||
onConnect: {
|
||||
type: Function() as PropType<ReactFlowProps['onConnect']>,
|
||||
required: false,
|
||||
default: undefined as any
|
||||
},
|
||||
onConnectStart: {
|
||||
type: Function() as PropType<ReactFlowProps['onConnectStart']>,
|
||||
required: false,
|
||||
default: undefined as any
|
||||
},
|
||||
onConnectStop: {
|
||||
type: Function() as PropType<ReactFlowProps['onConnectStop']>,
|
||||
required: false,
|
||||
default: undefined as any
|
||||
},
|
||||
onConnectEnd: {
|
||||
type: Function() as PropType<ReactFlowProps['onConnectEnd']>,
|
||||
required: false,
|
||||
default: undefined as any
|
||||
},
|
||||
connectionMode: {
|
||||
type: String as PropType<ReactFlowProps['connectionMode']>,
|
||||
required: false,
|
||||
default: ConnectionMode.Strict
|
||||
},
|
||||
connectionLineType: {
|
||||
type: String as PropType<ReactFlowProps['connectionLineType']>,
|
||||
required: false,
|
||||
default: ConnectionLineType.Bezier
|
||||
},
|
||||
connectionLineStyle: {
|
||||
type: Object as PropType<ReactFlowProps['connectionLineStyle']>,
|
||||
required: false,
|
||||
default: () => ({} as CSSProperties)
|
||||
},
|
||||
connectionLineComponent: {
|
||||
type: Object as PropType<ReactFlowProps['connectionLineComponent']>,
|
||||
required: false,
|
||||
default: undefined as any
|
||||
},
|
||||
selectionKeyCode: {
|
||||
type: (Number || String) as PropType<ReactFlowProps['selectionKeyCode']>,
|
||||
required: false,
|
||||
default: 'Shift'
|
||||
},
|
||||
multiSelectionKeyCode: {
|
||||
type: (Number || String) as PropType<ReactFlowProps['multiSelectionKeyCode']>,
|
||||
required: false,
|
||||
default: 'Meta'
|
||||
},
|
||||
zoomActivationKeyCode: {
|
||||
type: (Number || String) as PropType<ReactFlowProps['zoomActivationKeyCode']>,
|
||||
required: false,
|
||||
default: 'Meta'
|
||||
},
|
||||
deleteKeyCode: {
|
||||
type: (Number || String) as PropType<ReactFlowProps['deleteKeyCode']>,
|
||||
required: false,
|
||||
default: 'Backspace'
|
||||
},
|
||||
snapToGrid: {
|
||||
type: Boolean as PropType<ReactFlowProps['snapToGrid']>,
|
||||
required: false,
|
||||
default: false
|
||||
},
|
||||
snapGrid: {
|
||||
type: Array as unknown as PropType<ReactFlowProps['snapGrid']>,
|
||||
required: false,
|
||||
default: () => [15, 15]
|
||||
},
|
||||
onlyRenderVisibleElements: {
|
||||
type: Boolean as PropType<ReactFlowProps['onlyRenderVisibleElements']>,
|
||||
required: false,
|
||||
default: false
|
||||
},
|
||||
nodesDraggable: {
|
||||
type: Boolean as PropType<ReactFlowProps['nodesDraggable']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
nodesConnectable: {
|
||||
type: Boolean as PropType<ReactFlowProps['nodesConnectable']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
elementsSelectable: {
|
||||
type: Boolean as PropType<ReactFlowProps['elementsSelectable']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
selectNodesOnDrag: {
|
||||
type: Boolean as PropType<ReactFlowProps['selectNodesOnDrag']>,
|
||||
required: false,
|
||||
default: true
|
||||
},
|
||||
minZoom: {
|
||||
type: Number as PropType<ReactFlowProps['minZoom']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
maxZoom: {
|
||||
type: Number as PropType<ReactFlowProps['maxZoom']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
defaultZoom: {
|
||||
type: Number as PropType<ReactFlowProps['defaultZoom']>,
|
||||
required: false,
|
||||
default: 1
|
||||
},
|
||||
defaultPosition: {
|
||||
type: Array as unknown as PropType<ReactFlowProps['defaultPosition']>,
|
||||
required: false,
|
||||
default: () => [0, 0]
|
||||
},
|
||||
translateExtent: {
|
||||
type: Array as unknown as PropType<ReactFlowProps['translateExtent']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
nodeExtent: {
|
||||
type: Array as unknown as PropType<ReactFlowProps['nodeExtent']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
arrowHeadColor: {
|
||||
type: String as PropType<ReactFlowProps['arrowHeadColor']>,
|
||||
required: false,
|
||||
default: '#b1b1b7'
|
||||
},
|
||||
markerEndId: {
|
||||
type: String as PropType<ReactFlowProps['markerEndId']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
zoomOnScroll: {
|
||||
type: Boolean as PropType<ReactFlowProps['zoomOnScroll']>,
|
||||
required: false,
|
||||
default: true
|
||||
},
|
||||
zoomOnPinch: {
|
||||
type: Boolean as PropType<ReactFlowProps['zoomOnPinch']>,
|
||||
required: false,
|
||||
default: true
|
||||
},
|
||||
panOnScroll: {
|
||||
type: Boolean as PropType<ReactFlowProps['panOnScroll']>,
|
||||
required: false,
|
||||
default: false
|
||||
},
|
||||
panOnScrollSpeed: {
|
||||
type: Number as PropType<ReactFlowProps['panOnScrollSpeed']>,
|
||||
required: false,
|
||||
default: 0.5
|
||||
},
|
||||
panOnScrollMode: {
|
||||
type: String as PropType<ReactFlowProps['panOnScrollMode']>,
|
||||
required: false,
|
||||
default: PanOnScrollMode.Free
|
||||
},
|
||||
zoomOnDoubleClick: {
|
||||
type: Boolean as PropType<ReactFlowProps['zoomOnDoubleClick']>,
|
||||
required: false,
|
||||
default: true
|
||||
},
|
||||
paneMoveable: {
|
||||
type: Boolean as PropType<ReactFlowProps['paneMoveable']>,
|
||||
required: false,
|
||||
default: true
|
||||
},
|
||||
onPaneClick: {
|
||||
type: Function() as PropType<ReactFlowProps['onPaneClick']>,
|
||||
required: false,
|
||||
default: undefined as any
|
||||
},
|
||||
onPaneScroll: {
|
||||
type: Function() as PropType<ReactFlowProps['onPaneScroll']>,
|
||||
required: false,
|
||||
default: undefined as any
|
||||
},
|
||||
onPaneContextMenu: {
|
||||
type: Function() as PropType<ReactFlowProps['onPaneContextMenu']>,
|
||||
required: false,
|
||||
default: undefined as any
|
||||
},
|
||||
onEdgeUpdate: {
|
||||
type: Function() as PropType<ReactFlowProps['onEdgeUpdate']>,
|
||||
required: false,
|
||||
default: undefined as any
|
||||
},
|
||||
onEdgeMouseEnter: {
|
||||
type: Function() as PropType<ReactFlowProps['onEdgeMouseEnter']>,
|
||||
required: false,
|
||||
default: undefined as any
|
||||
},
|
||||
onEdgeContextMenu: {
|
||||
type: Function() as PropType<ReactFlowProps['onEdgeContextMenu']>,
|
||||
required: false,
|
||||
default: undefined as any
|
||||
},
|
||||
onEdgeMouseMove: {
|
||||
type: Function() as PropType<ReactFlowProps['onEdgeMouseMove']>,
|
||||
required: false,
|
||||
default: undefined as any
|
||||
},
|
||||
onEdgeMouseLeave: {
|
||||
type: Function() as PropType<ReactFlowProps['onEdgeMouseLeave']>,
|
||||
required: false,
|
||||
default: undefined as any
|
||||
},
|
||||
onEdgeUpdateEnd: {
|
||||
type: Function() as PropType<ReactFlowProps['onEdgeUpdateEnd']>,
|
||||
required: false,
|
||||
default: undefined as any
|
||||
},
|
||||
onEdgeUpdateStart: {
|
||||
type: Function() as PropType<ReactFlowProps['onEdgeUpdateStart']>,
|
||||
required: false,
|
||||
default: undefined as any
|
||||
},
|
||||
edgeUpdaterRadius: {
|
||||
type: Number as PropType<ReactFlowProps['edgeUpdaterRadius']>,
|
||||
required: false,
|
||||
default: 10
|
||||
}
|
||||
},
|
||||
setup(props, { slots }) {
|
||||
const pinia = store();
|
||||
const nodeTypesParsed = computed(() => createNodeTypes(props.nodeTypes as any));
|
||||
const edgeTypesParsed = computed(() => createEdgeTypes(props.edgeTypes as any));
|
||||
provide('store', pinia);
|
||||
const reactFlowClasses = ['react-flow'];
|
||||
|
||||
onMounted(() => {
|
||||
pinia.setElements(props.elements);
|
||||
});
|
||||
|
||||
return () => (
|
||||
<div class={reactFlowClasses}>
|
||||
<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}
|
||||
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>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
@@ -0,0 +1,313 @@
|
||||
import { zoom, zoomIdentity } from 'd3-zoom';
|
||||
import { select, pointer } from 'd3-selection';
|
||||
|
||||
import { clamp } from '../../utils';
|
||||
import { FlowTransform, TranslateExtent, PanOnScrollMode, KeyCode } from '../../types';
|
||||
import { defineComponent, onMounted, PropType, ref, watch } from 'vue';
|
||||
import store from '../../store';
|
||||
import useKeyPress from '../../hooks/useKeyPress';
|
||||
import useResizeHandler from '../../hooks/useResizeHandler';
|
||||
|
||||
interface ZoomPaneProps {
|
||||
selectionKeyPressed: boolean;
|
||||
elementsSelectable?: boolean;
|
||||
zoomOnScroll?: boolean;
|
||||
zoomOnPinch?: boolean;
|
||||
panOnScroll?: boolean;
|
||||
panOnScrollSpeed?: number;
|
||||
panOnScrollMode?: PanOnScrollMode;
|
||||
zoomOnDoubleClick?: boolean;
|
||||
paneMoveable?: boolean;
|
||||
defaultPosition?: [number, number];
|
||||
defaultZoom?: number;
|
||||
translateExtent?: TranslateExtent;
|
||||
onMove?: (flowTransform?: FlowTransform) => void;
|
||||
onMoveStart?: (flowTransform?: FlowTransform) => void;
|
||||
onMoveEnd?: (flowTransform?: FlowTransform) => void;
|
||||
zoomActivationKeyCode?: KeyCode;
|
||||
}
|
||||
|
||||
const viewChanged = (prevTransform: FlowTransform, eventTransform: any): boolean =>
|
||||
prevTransform.x !== eventTransform.x || prevTransform.y !== eventTransform.y || prevTransform.zoom !== eventTransform.k;
|
||||
|
||||
const eventToFlowTransform = (eventTransform: any): FlowTransform => ({
|
||||
x: eventTransform.x,
|
||||
y: eventTransform.y,
|
||||
zoom: eventTransform.k
|
||||
});
|
||||
|
||||
const ZoomPane = defineComponent({
|
||||
props: {
|
||||
onMove: {
|
||||
type: Function() as PropType<ZoomPaneProps['onMove']>,
|
||||
required: false,
|
||||
default: undefined as any
|
||||
},
|
||||
onMoveStart: {
|
||||
type: Function() as PropType<ZoomPaneProps['onMoveStart']>,
|
||||
required: false,
|
||||
default: undefined as any
|
||||
},
|
||||
onMoveEnd: {
|
||||
type: Function() as PropType<ZoomPaneProps['onMoveEnd']>,
|
||||
required: false,
|
||||
default: undefined as any
|
||||
},
|
||||
zoomOnScroll: {
|
||||
type: Boolean as PropType<ZoomPaneProps['zoomOnScroll']>,
|
||||
required: false,
|
||||
default: true
|
||||
},
|
||||
zoomOnPinch: {
|
||||
type: Boolean as PropType<ZoomPaneProps['zoomOnPinch']>,
|
||||
required: false,
|
||||
default: true
|
||||
},
|
||||
panOnScroll: {
|
||||
type: Boolean as PropType<ZoomPaneProps['panOnScroll']>,
|
||||
required: false,
|
||||
default: false
|
||||
},
|
||||
panOnScrollSpeed: {
|
||||
type: Number as PropType<ZoomPaneProps['panOnScrollSpeed']>,
|
||||
required: false,
|
||||
default: 0.5
|
||||
},
|
||||
panOnScrollMode: {
|
||||
type: String as PropType<ZoomPaneProps['panOnScrollMode']>,
|
||||
required: false,
|
||||
default: PanOnScrollMode.Free
|
||||
},
|
||||
zoomOnDoubleClick: {
|
||||
type: Boolean as PropType<ZoomPaneProps['zoomOnDoubleClick']>,
|
||||
required: false,
|
||||
default: true
|
||||
},
|
||||
selectionKeyPressed: {
|
||||
type: Boolean as PropType<ZoomPaneProps['selectionKeyPressed']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
elementsSelectable: {
|
||||
type: Boolean as PropType<ZoomPaneProps['elementsSelectable']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
paneMoveable: {
|
||||
type: Boolean as PropType<ZoomPaneProps['paneMoveable']>,
|
||||
required: false,
|
||||
default: true
|
||||
},
|
||||
defaultPosition: {
|
||||
type: Array as unknown as PropType<ZoomPaneProps['defaultPosition']>,
|
||||
required: false,
|
||||
default: () => [0, 0]
|
||||
},
|
||||
defaultZoom: {
|
||||
type: Number as PropType<ZoomPaneProps['defaultZoom']>,
|
||||
required: false,
|
||||
default: 1
|
||||
},
|
||||
translateExtent: {
|
||||
type: Array as unknown as PropType<ZoomPaneProps['translateExtent']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
zoomActivationKeyCode: {
|
||||
type: (Number || String) as PropType<ZoomPaneProps['zoomActivationKeyCode']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
}
|
||||
},
|
||||
setup(props, { slots }) {
|
||||
const pinia = store();
|
||||
const zoomPane = ref<HTMLDivElement | null>(null);
|
||||
const prevTransform = ref<FlowTransform>({ x: 0, y: 0, zoom: 0 });
|
||||
const zoomActivationKeyPressed = useKeyPress(props.zoomActivationKeyCode);
|
||||
|
||||
watch(zoomPane, () => {
|
||||
if (zoomPane.value) useResizeHandler(zoomPane.value);
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
if (zoomPane.value && props.defaultPosition && props.defaultZoom) {
|
||||
const currentTranslateExtent =
|
||||
typeof props.translateExtent !== 'undefined' ? props.translateExtent : pinia.translateExtent;
|
||||
const d3ZoomInstance = zoom().scaleExtent([pinia.minZoom, pinia.maxZoom]).translateExtent(currentTranslateExtent);
|
||||
const selection = select(zoomPane.value as Element).call(d3ZoomInstance);
|
||||
|
||||
const clampedX = clamp(props.defaultPosition[0], currentTranslateExtent[0][0], currentTranslateExtent[1][0]);
|
||||
const clampedY = clamp(props.defaultPosition[1], currentTranslateExtent[0][1], currentTranslateExtent[1][1]);
|
||||
const clampedZoom = clamp(props.defaultZoom, pinia.minZoom, pinia.maxZoom);
|
||||
const updatedTransform = zoomIdentity.translate(clampedX, clampedY).scale(clampedZoom);
|
||||
|
||||
d3ZoomInstance.transform(selection, updatedTransform);
|
||||
|
||||
pinia.initD3Zoom({
|
||||
d3Zoom: d3ZoomInstance,
|
||||
d3Selection: selection,
|
||||
d3ZoomHandler: selection.on('wheel.zoom'),
|
||||
// we need to pass transform because zoom handler is not registered when we set the initial transform
|
||||
transform: [clampedX, clampedY, clampedZoom]
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
if (pinia.d3Selection && pinia.d3Zoom) {
|
||||
if (props.panOnScroll && zoomActivationKeyPressed) {
|
||||
pinia.d3Selection
|
||||
.on('wheel', (event: any) => {
|
||||
event.preventDefault();
|
||||
event.stopImmediatePropagation();
|
||||
|
||||
const currentZoom = pinia.d3Selection?.property('__zoom').k || 1;
|
||||
|
||||
if (event.ctrlKey && props.zoomOnPinch) {
|
||||
const point = pointer(event);
|
||||
// taken from https://github.com/d3/d3-zoom/blob/master/src/zoom.js
|
||||
const pinchDelta = -event.deltaY * (event.deltaMode === 1 ? 0.05 : event.deltaMode ? 1 : 0.002) * 10;
|
||||
const zoom = currentZoom * Math.pow(2, pinchDelta);
|
||||
if (pinia.d3Selection) pinia.d3Zoom?.scaleTo(pinia.d3Selection, zoom, point);
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
// increase scroll speed in firefox
|
||||
// firefox: deltaMode === 1; chrome: deltaMode === 0
|
||||
const deltaNormalize = event.deltaMode === 1 ? 20 : 1;
|
||||
const deltaX = props.panOnScrollMode === PanOnScrollMode.Vertical ? 0 : event.deltaX * deltaNormalize;
|
||||
const deltaY = props.panOnScrollMode === PanOnScrollMode.Horizontal ? 0 : event.deltaY * deltaNormalize;
|
||||
|
||||
if (pinia.d3Selection && props.panOnScrollSpeed)
|
||||
pinia.d3Zoom?.translateBy(
|
||||
pinia.d3Selection,
|
||||
-(deltaX / currentZoom) * props.panOnScrollSpeed,
|
||||
-(deltaY / currentZoom) * props.panOnScrollSpeed
|
||||
);
|
||||
})
|
||||
.on('wheel.zoom', null);
|
||||
} else if (typeof pinia.d3ZoomHandler !== 'undefined') {
|
||||
pinia.d3Selection.on('wheel', null).on('wheel.zoom', pinia.d3ZoomHandler);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
if (pinia.d3Zoom) {
|
||||
if (props.selectionKeyPressed) {
|
||||
pinia.d3Zoom.on('zoom', null);
|
||||
} else {
|
||||
pinia.d3Zoom.on('zoom', (event: any) => {
|
||||
pinia.updateTransform([event.transform.x, event.transform.y, event.transform.k]);
|
||||
|
||||
if (props.onMove) {
|
||||
const flowTransform = eventToFlowTransform(event.transform);
|
||||
props.onMove(flowTransform);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
if (pinia.d3Zoom) {
|
||||
if (props.onMoveStart) {
|
||||
pinia.d3Zoom.on('start', (event: any) => {
|
||||
if (viewChanged(prevTransform.value, event.transform)) {
|
||||
const flowTransform = eventToFlowTransform(event.transform);
|
||||
prevTransform.value = flowTransform;
|
||||
|
||||
if (props.onMoveStart) props.onMoveStart(flowTransform);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
pinia.d3Zoom.on('start', null);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
if (pinia.d3Zoom) {
|
||||
if (props.onMoveEnd) {
|
||||
pinia.d3Zoom.on('end', (event: any) => {
|
||||
if (viewChanged(prevTransform.value, event.transform)) {
|
||||
const flowTransform = eventToFlowTransform(event.transform);
|
||||
prevTransform.value = flowTransform;
|
||||
|
||||
if (props.onMoveEnd) props.onMoveEnd(flowTransform);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
pinia.d3Zoom.on('end', null);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
if (pinia.d3Zoom) {
|
||||
pinia.d3Zoom.filter((event: any) => {
|
||||
const zoomScroll = props.zoomOnScroll;
|
||||
const pinchZoom = props.zoomOnPinch && event.ctrlKey;
|
||||
|
||||
// if all interactions are disabled, we prevent all zoom events
|
||||
if (!props.paneMoveable && !zoomScroll && !props.panOnScroll && !props.zoomOnDoubleClick && !props.zoomOnPinch) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// during a selection we prevent all other interactions
|
||||
if (props.selectionKeyPressed) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// if zoom on double click is disabled, we prevent the double click event
|
||||
if (!props.zoomOnDoubleClick && event.type === 'dblclick') {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (event.target.closest('.nowheel') && event.type === 'wheel') {
|
||||
return false;
|
||||
}
|
||||
|
||||
// when the target element is a node, we still allow zooming
|
||||
if (
|
||||
(event.target.closest('.react-flow__node') || event.target.closest('.react-flow__edge')) &&
|
||||
event.type !== 'wheel'
|
||||
) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// when the target element is a node selection, we still allow zooming
|
||||
if (event.target.closest('.react-flow__nodesselection') && event.type !== 'wheel') {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (!props.zoomOnPinch && event.ctrlKey && event.type === 'wheel') {
|
||||
return false;
|
||||
}
|
||||
|
||||
// when there is no scroll handling enabled, we prevent all wheel events
|
||||
if (!zoomScroll && !props.panOnScroll && !pinchZoom && event.type === 'wheel') {
|
||||
return false;
|
||||
}
|
||||
|
||||
// if the pane is not movable, we prevent dragging it with mousestart or touchstart
|
||||
if (!props.paneMoveable && (event.type === 'mousedown' || event.type === 'touchstart')) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// default filter for d3-zoom
|
||||
return (!event.ctrlKey || event.type === 'wheel') && !event.button;
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
return () => (
|
||||
<div class="react-flow__renderer react-flow__zoompane" ref={zoomPane}>
|
||||
{slots.default ? slots.default() : ''}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
export default ZoomPane;
|
||||
Reference in New Issue
Block a user