-
-
Notifications
You must be signed in to change notification settings - Fork 107
/
ConnectionWrapper.vue
86 lines (75 loc) · 2.93 KB
/
ConnectionWrapper.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<template>
<connection-view :x1="d.x1" :y1="d.y1" :x2="d.x2" :y2="d.y2" :state="state" />
</template>
<script lang="ts">
import { computed, defineComponent, ref, onBeforeUnmount, onMounted, nextTick, watch } from "vue";
import { Connection } from "@baklavajs/core";
import ConnectionView from "./ConnectionView.vue";
import resolveDom, { IResolvedDomElements } from "./domResolver";
import { TemporaryConnectionState } from "./connection";
import { useGraph } from "../utility";
export default defineComponent({
components: {
"connection-view": ConnectionView,
},
props: {
connection: {
type: Object as () => Connection,
required: true,
},
},
setup(props) {
const { graph } = useGraph();
let resizeObserver: ResizeObserver;
const d = ref({ x1: 0, y1: 0, x2: 0, y2: 0 });
const state = computed(() =>
props.connection.isInDanger ? TemporaryConnectionState.FORBIDDEN : TemporaryConnectionState.NONE,
);
const fromNodePosition = computed(() => graph.value.findNodeById(props.connection.from.nodeId)?.position);
const toNodePosition = computed(() => graph.value.findNodeById(props.connection.to.nodeId)?.position);
const getPortCoordinates = (resolved: IResolvedDomElements): [number, number] => {
if (resolved.node && resolved.interface && resolved.port) {
return [
resolved.node.offsetLeft +
resolved.interface.offsetLeft +
resolved.port.offsetLeft +
resolved.port.clientWidth / 2,
resolved.node.offsetTop +
resolved.interface.offsetTop +
resolved.port.offsetTop +
resolved.port.clientHeight / 2,
];
} else {
return [0, 0];
}
};
const updateCoords = () => {
const from = resolveDom(props.connection.from);
const to = resolveDom(props.connection.to);
if (from.node && to.node) {
if (!resizeObserver) {
resizeObserver = new ResizeObserver(() => {
updateCoords();
});
resizeObserver.observe(from.node);
resizeObserver.observe(to.node);
}
}
const [x1, y1] = getPortCoordinates(from);
const [x2, y2] = getPortCoordinates(to);
d.value = { x1, y1, x2, y2 };
};
onMounted(async () => {
await nextTick();
updateCoords();
});
onBeforeUnmount(() => {
if (resizeObserver) {
resizeObserver.disconnect();
}
});
watch([fromNodePosition, toNodePosition], () => updateCoords(), { deep: true });
return { d, state };
},
});
</script>