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

feat(example): Add edge types example (stress tests)

Browse Source 
* Remove a lot of computed functions or merge them into existing ones
*
This commit is contained in:
Braks
2021-08-16 21:17:38 +02:00
parent 15f968c607
commit 384c05240f
13 changed files with 268 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/ConnectionLine/index.tsx
+14 -12
View File
@@ -31,7 +31,6 @@ export default defineComponent({
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
@@ -40,22 +39,25 @@ export default defineComponent({
)
: 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 sourceX = computed(() =>
sourceNode.value?.__rf.position.x + 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 sourceY = computed(() =>
sourceNode.value?.__rf.position.y + 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(() =>
sourceHandle.value?.position === Position.Left || sourceHandle.value?.position === Position.Right
? Position.Left
: Position.Top
);
const targetPosition = computed(() => (isRightOrLeft.value ? Position.Left : Position.Top));
let dAttr = computed(() => `M${sourceX.value},${sourceY.value} ${targetX.value},${targetY.value}`);
@@ -114,7 +116,7 @@ export default defineComponent({
}
return () =>
nodesConnectable.value && sourceNode.value ? (
store.nodesConnectable && sourceNode.value ? (
<g class="revue-flow__connection">
<path d={dAttr.value} class="revue-flow__connection-path" style={props.connectionLineStyle} />
</g>