-
-
Notifications
You must be signed in to change notification settings - Fork 209
/
Transform.vue
63 lines (50 loc) 路 1.57 KB
/
Transform.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
<script lang="ts" setup>
import NodeRenderer from '../NodeRenderer/NodeRenderer.vue'
import EdgeRenderer from '../EdgeRenderer/EdgeRenderer.vue'
import type { Dimensions } from '../../types'
const { id, viewport, dimensions, fitViewOnInit, emits, fitView, ...rest } = useVueFlow()
const untilDimensions = async (dim: Dimensions) => {
// if ssr we can't wait for dimensions, they'll never really exist
const window = useWindow()
if ('screen' in window) {
// wait until viewport dimensions has been established
await until(dim).toMatch(({ height, width }) => !isNaN(width) && width > 0 && !isNaN(height) && height > 0)
}
return true
}
let ready = $ref(false)
onMounted(async () => {
// wait until proper dimensions have been established, otherwise fitView will have wrong bounds when called at paneReady
await untilDimensions(dimensions.value)
// hide graph until dimensions are ready, so we don't have jumping graphs (ssr for example)
ready = true
emits.paneReady({
id,
viewport,
dimensions,
fitViewOnInit,
fitView,
emits,
...rest,
})
fitViewOnInit?.value && fitView()
})
</script>
<script lang="ts">
export default {
name: 'Transform',
compatConfig: { MODE: 3 },
}
</script>
<template>
<div
:key="`transform-${id}`"
class="vue-flow__transformationpane vue-flow__container"
:style="{ transform: `translate(${viewport.x}px,${viewport.y}px) scale(${viewport.zoom})`, opacity: ready ? undefined : 0 }"
>
<EdgeRenderer />
<div class="vue-flow__edge-labels" />
<NodeRenderer />
<slot />
</div>
</template>