update: invoke until func in zoom pane
* instead of using .then cb we use the invoke func to call the async await and wait for the zoomPaneEl Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>
This commit is contained in:
@@ -56,5 +56,5 @@ onMounted(() => {
|
|||||||
<slot></slot>
|
<slot></slot>
|
||||||
<UserSelection v-if="selectionKeyPresed && (store.selectionActive || store.elementsSelectable)" id="user-selection" />
|
<UserSelection v-if="selectionKeyPresed && (store.selectionActive || store.elementsSelectable)" id="user-selection" />
|
||||||
<NodesSelection v-if="store.nodesSelectionActive" id="nodes-selection" />
|
<NodesSelection v-if="store.nodesSelectionActive" id="nodes-selection" />
|
||||||
<div class="vue-flow__pane" @click="onClick" @contextmenu="onContextMenu" @wheel="onWheel" />
|
<div class="vue-flow__pane" @click.self="onClick" @contextmenu="onContextMenu" @wheel="onWheel" />
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { D3ZoomEvent, zoom, zoomIdentity, ZoomTransform } from 'd3-zoom'
|
import { D3ZoomEvent, zoom, zoomIdentity, ZoomTransform } from 'd3-zoom'
|
||||||
import { get } from '@vueuse/core'
|
import { get, invoke } from '@vueuse/core'
|
||||||
import { pointer, select } from 'd3-selection'
|
import { pointer, select } from 'd3-selection'
|
||||||
import { FlowTransform, KeyCode, PanOnScrollMode } from '../../types'
|
import { FlowTransform, KeyCode, PanOnScrollMode } from '../../types'
|
||||||
import { useHooks, useKeyPress, useStore, useZoomPanHelper } from '../../composables'
|
import { useHooks, useKeyPress, useStore, useZoomPanHelper } from '../../composables'
|
||||||
@@ -57,9 +57,8 @@ const d3Zoom = ref(zoom<HTMLDivElement, any>().scaleExtent([store.minZoom, store
|
|||||||
const d3Selection = ref()
|
const d3Selection = ref()
|
||||||
store.transform = [transform.value.x, transform.value.y, transform.value.zoom]
|
store.transform = [transform.value.x, transform.value.y, transform.value.zoom]
|
||||||
|
|
||||||
until(zoomPaneEl)
|
invoke(async () => {
|
||||||
.toBeTruthy()
|
await until(zoomPaneEl).toBeTruthy()
|
||||||
.then(() => {
|
|
||||||
const d3z = get(d3Zoom)!
|
const d3z = get(d3Zoom)!
|
||||||
d3Selection.value = select(zoomPaneEl.value).call(d3z)
|
d3Selection.value = select(zoomPaneEl.value).call(d3z)
|
||||||
const d3s = get(d3Selection)!
|
const d3s = get(d3Selection)!
|
||||||
@@ -194,7 +193,7 @@ watch(transform, (val) => (store.transform = [val.x, val.y, val.zoom]))
|
|||||||
|
|
||||||
const { zoomIn, zoomOut, zoomTo, transform: setTransform, fitView } = useZoomPanHelper()
|
const { zoomIn, zoomOut, zoomTo, transform: setTransform, fitView } = useZoomPanHelper()
|
||||||
watchOnce(
|
watchOnce(
|
||||||
() => width.value && height.value,
|
() => !isNaN(width.value) && width.value > 0 && !isNaN(height.value) && height.value > 0,
|
||||||
() => {
|
() => {
|
||||||
hooks.load.trigger({
|
hooks.load.trigger({
|
||||||
fitView: (params = { padding: 0.1 }) => fitView(params),
|
fitView: (params = { padding: 0.1 }) => fitView(params),
|
||||||
|
|||||||
Reference in New Issue
Block a user