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,133 @@
|
||||
<template>
|
||||
<g v-show="sourceNode && nodesConnectable" class="revue-flow__connection">
|
||||
<g v-if="CustomConnectionLineComponent" class="revue-flow__connection">
|
||||
<component
|
||||
:is="CustomConnectionLineComponent"
|
||||
:sourceX="sourceX"
|
||||
:sourceY="sourceY"
|
||||
:sourcePosition="sourceHandle.position"
|
||||
:targetX="targetX"
|
||||
:targetY="targetY"
|
||||
:targetPosition="targetPosition"
|
||||
:connectionLineType="connectionLineType"
|
||||
:connectionLineStyle="connectionLineStyle"
|
||||
/>
|
||||
</g>
|
||||
<path v-else class="revue-flow__connection-path" :d="dAttr" :style="connectionLineStyle" />
|
||||
</g>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { ref, defineComponent, CSSProperties, PropType, computed, inject } from 'vue';
|
||||
|
||||
import { getBezierPath } from '../Edges/BezierEdge';
|
||||
import { getSmoothStepPath } from '../Edges/SmoothStepEdge';
|
||||
import { Node, HandleElement, Position, ConnectionLineType, ConnectionLineComponent, RevueFlowStore } from '../../types';
|
||||
|
||||
interface ConnectionLineProps {
|
||||
connectionLineType: ConnectionLineType;
|
||||
connectionLineStyle?: CSSProperties;
|
||||
CustomConnectionLineComponent?: ConnectionLineComponent;
|
||||
}
|
||||
|
||||
const ConnectionLine = defineComponent({
|
||||
props: {
|
||||
connectionLineType: {
|
||||
type: String as PropType<ConnectionLineProps['connectionLineType']>,
|
||||
required: false,
|
||||
default: ConnectionLineType.Bezier
|
||||
},
|
||||
connectionLineStyle: {
|
||||
type: Object as PropType<ConnectionLineProps['connectionLineStyle']>,
|
||||
required: false,
|
||||
default: () => {}
|
||||
},
|
||||
CustomConnectionLineComponent: {
|
||||
type: Object as PropType<ConnectionLineProps['CustomConnectionLineComponent']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
}
|
||||
},
|
||||
setup(props) {
|
||||
const store = inject<RevueFlowStore>('store')!;
|
||||
const sourceNode = ref<Node | null>(store.nodes.find((n) => n.id === store.connectionNodeId) || null);
|
||||
const nodesConnectable = computed(() => store.nodesConnectable);
|
||||
|
||||
const sourceHandle = computed(() =>
|
||||
store.connectionHandleId && store.connectionHandleType
|
||||
? sourceNode.value?.__rf.handleBounds[store.connectionHandleType].find(
|
||||
(d: HandleElement) => d.id === store.connectionHandleId
|
||||
)
|
||||
: store.connectionHandleType && sourceNode.value?.__rf.handleBounds[store.connectionHandleType][0]
|
||||
);
|
||||
const sourceHandleX = computed(() =>
|
||||
sourceHandle.value ? sourceHandle.value.x + sourceHandle.value.width / 2 : (sourceNode.value?.__rf.width as number) / 2
|
||||
);
|
||||
const sourceHandleY = computed(() =>
|
||||
sourceHandle.value ? sourceHandle.value.y + sourceHandle.value.height / 2 : sourceNode.value?.__rf.height
|
||||
);
|
||||
const sourceX = computed(() => sourceNode.value?.__rf.position.x + sourceHandleX.value);
|
||||
const sourceY = computed(() => sourceNode.value?.__rf.position.y + sourceHandleY.value);
|
||||
|
||||
const targetX = computed(() => (store.connectionPosition.x - store.transform[0]) / store.transform[2]);
|
||||
const targetY = computed(() => (store.connectionPosition.y - store.transform[1]) / store.transform[2]);
|
||||
|
||||
const isRightOrLeft = computed(
|
||||
() => sourceHandle.value?.position === Position.Left || sourceHandle.value?.position === Position.Right
|
||||
);
|
||||
const targetPosition = computed(() => (isRightOrLeft.value ? Position.Left : Position.Top));
|
||||
|
||||
let dAttr = computed(() => `M${sourceX.value},${sourceY.value} ${targetX.value},${targetY.value}`);
|
||||
|
||||
if (props.connectionLineType === ConnectionLineType.Bezier) {
|
||||
dAttr = computed(() =>
|
||||
getBezierPath({
|
||||
sourceX: sourceX.value,
|
||||
sourceY: sourceY.value,
|
||||
sourcePosition: sourceHandle.value?.position,
|
||||
targetX: targetX.value,
|
||||
targetY: targetY.value,
|
||||
targetPosition: targetPosition.value
|
||||
})
|
||||
);
|
||||
} else if (props.connectionLineType === ConnectionLineType.Step) {
|
||||
dAttr = computed(() =>
|
||||
getSmoothStepPath({
|
||||
sourceX: sourceX.value,
|
||||
sourceY: sourceY.value,
|
||||
sourcePosition: sourceHandle.value?.position,
|
||||
targetX: targetX.value,
|
||||
targetY: targetY.value,
|
||||
targetPosition: targetPosition.value,
|
||||
borderRadius: 0
|
||||
})
|
||||
);
|
||||
} else if (props.connectionLineType === ConnectionLineType.SmoothStep) {
|
||||
dAttr = computed(() =>
|
||||
getSmoothStepPath({
|
||||
sourceX: sourceX.value,
|
||||
sourceY: sourceY.value,
|
||||
sourcePosition: sourceHandle.value?.position,
|
||||
targetX: targetX.value,
|
||||
targetY: targetY.value,
|
||||
targetPosition: targetPosition.value
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
return {
|
||||
dAttr,
|
||||
targetX,
|
||||
targetY,
|
||||
sourceX,
|
||||
sourceY,
|
||||
sourceHandle,
|
||||
sourceNode,
|
||||
sourceHandleX,
|
||||
sourceHandleY,
|
||||
nodesConnectable
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
export default ConnectionLine;
|
||||
</script>
|
||||
@@ -1,181 +0,0 @@
|
||||
import { ref, defineComponent, CSSProperties, PropType, computed } from 'vue';
|
||||
|
||||
import { getBezierPath } from '../Edges/BezierEdge';
|
||||
import { getSmoothStepPath } from '../Edges/SmoothStepEdge';
|
||||
import {
|
||||
ElementId,
|
||||
Node,
|
||||
Transform,
|
||||
HandleElement,
|
||||
Position,
|
||||
ConnectionLineType,
|
||||
ConnectionLineComponent,
|
||||
HandleType
|
||||
} from '../../types';
|
||||
|
||||
interface ConnectionLineProps {
|
||||
connectionNodeId: ElementId;
|
||||
connectionHandleId: ElementId | null;
|
||||
connectionHandleType: HandleType;
|
||||
connectionPositionX: number;
|
||||
connectionPositionY: number;
|
||||
connectionLineType: ConnectionLineType;
|
||||
nodes: Node[];
|
||||
transform: Transform;
|
||||
isConnectable: boolean;
|
||||
connectionLineStyle?: CSSProperties;
|
||||
CustomConnectionLineComponent?: ConnectionLineComponent;
|
||||
}
|
||||
|
||||
const ConnectionLine = defineComponent({
|
||||
props: {
|
||||
connectionNodeId: {
|
||||
type: String as PropType<ConnectionLineProps['connectionNodeId']>,
|
||||
required: true
|
||||
},
|
||||
connectionHandleId: {
|
||||
type: String as PropType<ConnectionLineProps['connectionHandleId']>,
|
||||
required: true
|
||||
},
|
||||
connectionHandleType: {
|
||||
type: String as PropType<ConnectionLineProps['connectionHandleType']>,
|
||||
required: true
|
||||
},
|
||||
connectionLineStyle: {
|
||||
type: Object as PropType<ConnectionLineProps['connectionLineStyle']>,
|
||||
required: false,
|
||||
default: () => ({})
|
||||
},
|
||||
connectionPositionX: {
|
||||
type: Number as PropType<ConnectionLineProps['connectionPositionX']>,
|
||||
required: false,
|
||||
default: 0
|
||||
},
|
||||
connectionPositionY: {
|
||||
type: Number as PropType<ConnectionLineProps['connectionPositionY']>,
|
||||
required: false,
|
||||
default: 0
|
||||
},
|
||||
connectionLineType: {
|
||||
type: String as PropType<ConnectionLineProps['connectionLineType']>,
|
||||
required: false,
|
||||
default: ConnectionLineType.Bezier
|
||||
},
|
||||
nodes: {
|
||||
type: Array as PropType<ConnectionLineProps['nodes']>,
|
||||
required: true,
|
||||
default: () => []
|
||||
},
|
||||
transform: {
|
||||
type: Object as PropType<ConnectionLineProps['transform']>,
|
||||
required: false,
|
||||
default: () => ({})
|
||||
},
|
||||
isConnectable: {
|
||||
type: Boolean as PropType<ConnectionLineProps['isConnectable']>,
|
||||
required: false,
|
||||
default: false
|
||||
},
|
||||
CustomConnectionLineComponent: {
|
||||
type: Object as PropType<ConnectionLineProps['CustomConnectionLineComponent']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
}
|
||||
},
|
||||
setup(props) {
|
||||
const sourceNode = ref<Node | null>(props.nodes.find((n) => n.id === props.connectionNodeId) || null);
|
||||
|
||||
if (!sourceNode.value || !props.isConnectable) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const sourceHandle = computed(() =>
|
||||
props.connectionHandleId
|
||||
? sourceNode.value?.__rf.handleBounds[props.connectionHandleType].find(
|
||||
(d: HandleElement) => d.id === props.connectionHandleId
|
||||
)
|
||||
: sourceNode.value?.__rf.handleBounds[props.connectionHandleType][0]
|
||||
);
|
||||
const sourceHandleX = computed(() =>
|
||||
sourceHandle.value ? sourceHandle.value.x + sourceHandle.value.width / 2 : sourceNode.value?.__rf.width / 2
|
||||
);
|
||||
const sourceHandleY = computed(() =>
|
||||
sourceHandle.value ? sourceHandle.value.y + sourceHandle.value.height / 2 : sourceNode.value?.__rf.height
|
||||
);
|
||||
const sourceX = computed(() => sourceNode.value?.__rf.position.x + sourceHandleX.value);
|
||||
const sourceY = computed(() => sourceNode.value?.__rf.position.y + sourceHandleY.value);
|
||||
|
||||
const targetX = computed(() => (props.connectionPositionX - props.transform[0]) / props.transform[2]);
|
||||
const targetY = computed(() => (props.connectionPositionY - props.transform[1]) / props.transform[2]);
|
||||
|
||||
const isRightOrLeft = computed(
|
||||
() => sourceHandle.value?.position === Position.Left || sourceHandle.value?.position === Position.Right
|
||||
);
|
||||
const targetPosition = computed(() => (isRightOrLeft.value ? Position.Left : Position.Top));
|
||||
|
||||
if (props.CustomConnectionLineComponent) {
|
||||
// eslint-disable-next-line vue/no-setup-props-destructure
|
||||
const ConnectionLineComponent: any = props.CustomConnectionLineComponent;
|
||||
return () => (
|
||||
<g class="revue-flow__connection">
|
||||
<ConnectionLineComponent
|
||||
sourceX={sourceX.value}
|
||||
sourceY={sourceY.value}
|
||||
sourcePosition={sourceHandle.value?.position}
|
||||
targetX={targetX.value}
|
||||
targetY={targetY.value}
|
||||
targetPosition={targetPosition.value}
|
||||
connectionLineType={props.connectionLineType}
|
||||
connectionLineStyle={props.connectionLineStyle}
|
||||
/>
|
||||
</g>
|
||||
);
|
||||
}
|
||||
|
||||
let dAttr = computed(() => `M${sourceX.value},${sourceY.value} ${targetX.value},${targetY.value}`);
|
||||
|
||||
if (props.connectionLineType === ConnectionLineType.Bezier) {
|
||||
dAttr = computed(() =>
|
||||
getBezierPath({
|
||||
sourceX: sourceX.value,
|
||||
sourceY: sourceY.value,
|
||||
sourcePosition: sourceHandle.value?.position,
|
||||
targetX: targetX.value,
|
||||
targetY: targetY.value,
|
||||
targetPosition: targetPosition.value
|
||||
})
|
||||
);
|
||||
} else if (props.connectionLineType === ConnectionLineType.Step) {
|
||||
dAttr = computed(() =>
|
||||
getSmoothStepPath({
|
||||
sourceX: sourceX.value,
|
||||
sourceY: sourceY.value,
|
||||
sourcePosition: sourceHandle.value?.position,
|
||||
targetX: targetX.value,
|
||||
targetY: targetY.value,
|
||||
targetPosition: targetPosition.value,
|
||||
borderRadius: 0
|
||||
})
|
||||
);
|
||||
} else if (props.connectionLineType === ConnectionLineType.SmoothStep) {
|
||||
dAttr = computed(() =>
|
||||
getSmoothStepPath({
|
||||
sourceX: sourceX.value,
|
||||
sourceY: sourceY.value,
|
||||
sourcePosition: sourceHandle.value?.position,
|
||||
targetX: targetX.value,
|
||||
targetY: targetY.value,
|
||||
targetPosition: targetPosition.value
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
return () => (
|
||||
<g class="revue-flow__connection">
|
||||
<path d={dAttr.value} class="revue-flow__connection-path" style={props.connectionLineStyle} />
|
||||
</g>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
export default ConnectionLine;
|
||||
Reference in New Issue
Block a user