alighasami/vue-flow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Make edges work

Browse Source
This commit is contained in:
Braks
2021-07-09 13:39:17 +02:00
parent 52e1188d04
commit b2c250ef38
10 changed files with 183 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/container/EdgeRenderer/index.tsx
+43 -53
View File
@@ -14,7 +14,7 @@ import {
Transform,
OnEdgeUpdateFunc
} from '../../types';
import { computed, CSSProperties, defineComponent, PropType, ref } from 'vue';
import { computed, CSSProperties, defineComponent, PropType } from 'vue';
import store from '../../store';
interface EdgeRendererProps {
@@ -102,71 +102,59 @@ const EdgeCmp = defineComponent({
}
},
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 sourceHandleId = computed(() => props.edge.sourceHandle ?? null);
const targetHandleId = computed(() => props.edge.targetHandle ?? null);
const nodes = computed(() => getSourceTargetNodes(props.edge, props.nodes));
const onConnectEdge = (connection: Connection) => {
props.props.onEdgeUpdate?.(props.edge, connection);
};
if (!sourceNode) {
if (!nodes.value.sourceNode) {
console.log(`couldn't create edge for source id: ${props.edge.source}; edge id: ${props.edge.id}`);
return null;
return () => null;
}
if (!targetNode) {
if (!nodes.value.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;
return () => null;
}
const edgeType = props.edge.type || 'default';
const EdgeComponent: any = props.props.edgeTypes[edgeType] || props.props.edgeTypes.default;
const targetNodeBounds = targetNode.__rf.handleBounds;
const targetNodeBounds = nodes.value.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 sourceHandle = computed(
() => nodes.value.sourceNode && getHandle(nodes.value.sourceNode.__rf.handleBounds.source, sourceHandleId.value)
);
const targetHandle = computed(() => getHandle(targetNodeHandles, targetHandleId.value));
const sourcePosition = sourceHandle.value ? sourceHandle.value.position : Position.Bottom;
const targetPosition = targetHandle.value ? targetHandle.value.position : Position.Top;
const edgePositions = computed(() => {
return (
nodes.value.sourceNode &&
nodes.value.targetNode &&
getEdgePositions(
nodes.value.sourceNode,
sourceHandle,
sourcePosition,
nodes.value.targetNode,
targetHandle,
targetPosition
)
);
});
const isVisible = computed(() => {
return props.onlyRenderVisibleElements
? isEdgeVisible({
sourcePos: { x: sourceX, y: sourceY },
targetPos: { x: targetX, y: targetY },
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
@@ -202,10 +190,10 @@ const EdgeCmp = defineComponent({
target={props.edge.target}
sourceHandleId={sourceHandleId}
targetHandleId={targetHandleId}
sourceX={sourceX}
sourceY={sourceY}
targetX={targetX}
targetY={targetY}
sourceX={edgePositions.value.sourceX}
sourceY={edgePositions.value.sourceY}
targetX={edgePositions.value.targetX}
targetY={edgePositions.value.targetY}
sourcePosition={sourcePosition}
targetPosition={targetPosition}
elementsSelectable={props.elementsSelectable}
@@ -228,7 +216,10 @@ const EdgeCmp = defineComponent({
const EdgeRenderer = defineComponent({
name: 'EdgeRenderer',
components: { EdgeCmp, ConnectionLine },
components: {
EdgeCmp,
ConnectionLine
},
props: {
edgeTypes: {
type: Object,
@@ -323,13 +314,12 @@ const EdgeRenderer = defineComponent({
},
setup(props) {
const pinia = store();
const transformStyle = `translate(${pinia.transform[0]},${pinia.transform[1]}) scale(${pinia.transform[2]})`;
const renderConnectionLine = pinia.connectionNodeId && pinia.connectionHandleType;
const transformStyle = computed(() => `translate(${pinia.transform[0]},${pinia.transform[1]}) scale(${pinia.transform[2]})`);
const renderConnectionLine = computed(() => pinia.connectionNodeId && pinia.connectionHandleType);
return () => (
<svg width={pinia.width} height={pinia.height} class="react-flow__edges">
<g transform={transformStyle}>
<g transform={transformStyle.value}>
{pinia.edges.map((edge: Edge) => (
<EdgeCmp
key={edge.id}
@@ -344,7 +334,7 @@ const EdgeRenderer = defineComponent({
onlyRenderVisibleElements={props.onlyRenderVisibleElements}
/>
))}
{renderConnectionLine && (
{renderConnectionLine.value && (
<ConnectionLine
nodes={pinia.nodes}
connectionNodeId={pinia.connectionNodeId!}
src/container/EdgeRenderer/utils.ts
+1 -1
View File
@@ -59,7 +59,6 @@ export function getHandlePosition(position: Position, node: Node, handle: any |
}
export function getHandle(bounds: HandleElement[], handleId: ElementId | null): HandleElement | null {
console.log('handle', bounds);
if (!bounds) {
return null;
}
@@ -94,6 +93,7 @@ export const getEdgePositions = (
const sourceHandlePos = getHandlePosition(sourcePosition, sourceNode, sourceHandle);
const targetHandlePos = getHandlePosition(targetPosition, targetNode, targetHandle);
console.log('getting edge positions');
return {
sourceX: sourceHandlePos.x,
sourceY: sourceHandlePos.y,
src/container/GraphView/index.tsx
+15 -5
View File
@@ -6,7 +6,18 @@ import { onLoadProject, onLoadGetElements, onLoadToObject } from '../../utils/gr
import { ReactFlowProps } from '../RevueFlow';
import { NodeTypesType, EdgeTypesType, ConnectionLineType, KeyCode } from '../../types';
import { CSSProperties, defineComponent, onMounted, PropType, ref } from 'vue';
import {
reactive,
computed,
CSSProperties,
defineComponent,
onBeforeMount,
onMounted,
onUpdated,
PropType,
ref,
watch
} from 'vue';
import store from '../../store';
import useZoomPanHelper from '../../hooks/useZoomPanHelper';
@@ -350,9 +361,9 @@ const GraphView = defineComponent({
const pinia = store();
const isInitialized = ref<boolean>(false);
const { zoomIn, zoomOut, zoomTo, transform, fitView, initialized } = useZoomPanHelper();
onMounted(() => {
const { zoomIn, zoomOut, zoomTo, transform, fitView, initialized } = useZoomPanHelper();
if (!isInitialized.value && initialized) {
if (props.onLoad) {
props.onLoad({
@@ -364,9 +375,8 @@ const GraphView = defineComponent({
project: onLoadProject(pinia),
getElements: onLoadGetElements(pinia),
toObject: onLoadToObject(pinia)
} as any);
});
}
isInitialized.value = true;
}
});
src/container/RevueFlow/index.tsx
+5 -8
View File
@@ -1,4 +1,4 @@
import { computed, CSSProperties, defineComponent, HTMLAttributes, onMounted, PropType, provide } from 'vue';
import { computed, CSSProperties, defineComponent, HTMLAttributes, onBeforeMount, PropType, provide } from 'vue';
import GraphView from '../GraphView';
import DefaultNode from '../../components/Nodes/DefaultNode';
import InputNode from '../../components/Nodes/InputNode';
@@ -454,14 +454,11 @@ const RevueFlow = defineComponent({
},
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'];
pinia.setElements(props.elements);
onMounted(() => {
pinia.setElements(props.elements);
});
const nodeTypesParsed = computed(() => props.nodeTypes && createNodeTypes(props.nodeTypes));
const edgeTypesParsed = computed(() => props.edgeTypes && createEdgeTypes(props.edgeTypes));
const reactFlowClasses = ['react-flow'];
return () => (
<div class={reactFlowClasses}>