mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2024-11-13 16:14:07 -08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

fix(editor): Fit view consistently after nodes are initialized on new canvas (#11457)
Some checks are pending
Test Master / install-and-build (push) Waiting to run
Details
Test Master / Unit tests (18.x) (push) Blocked by required conditions
Details
Test Master / Unit tests (20.x) (push) Blocked by required conditions
Details
Test Master / Unit tests (22.4) (push) Blocked by required conditions
Details
Test Master / Lint (push) Blocked by required conditions
Details
Test Master / Notify Slack on failure (push) Blocked by required conditions
Details

Browse source
This commit is contained in:
Alex Grozav 2024-10-30 14:02:54 +02:00 committed by GitHub
parent 3aa069222b
commit 497d637fc5
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 12 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
packages/editor-ui/src/components/canvas/Canvas.vue
View file

@ -41,7 +41,6 @@ import { GRID_SIZE } from '@/utils/nodeViewUtils';
import { CanvasKey } from '@/constants';
import { onKeyDown, onKeyUp, useDebounceFn } from '@vueuse/core';
import CanvasArrowHeadMarker from './elements/edges/CanvasArrowHeadMarker.vue';
import { CanvasNodeRenderType } from '@/types';
import CanvasBackgroundStripedPattern from './elements/CanvasBackgroundStripedPattern.vue';
import { isMiddleMouseButton } from '@/utils/eventUtils';
@ -123,7 +122,6 @@ const {
nodes: graphNodes,
onPaneReady,
findNode,
onNodesInitialized,
viewport,
} = useVueFlow({ id: props.id, deleteKeyCode: null });
@ -538,11 +536,6 @@ onPaneReady(async () => {
isPaneReady.value = true;
});
onNodesInitialized((nodes) => {
if (nodes.length !== 1 || nodes[0].data?.render.type !== CanvasNodeRenderType.AddNodes) return;
void onFitView();
});
watch(() => props.readOnly, setReadonly, {
immediate: true,
});

13
packages/editor-ui/src/components/canvas/WorkflowCanvas.vue
View file

@ -1,12 +1,13 @@
<script setup lang="ts">
import Canvas from '@/components/canvas/Canvas.vue';
import { computed, toRef, useCssModule } from 'vue';
import { computed, ref, toRef, useCssModule } from 'vue';
import type { Workflow } from 'n8n-workflow';
import type { IWorkflowDb } from '@/Interface';
import { useCanvasMapping } from '@/composables/useCanvasMapping';
import type { EventBus } from 'n8n-design-system';
import { createEventBus } from 'n8n-design-system';
import type { CanvasEventBusEvents } from '@/types';
import { useVueFlow } from '@vue-flow/core';
defineOptions({
inheritAttrs: false,
@ -34,6 +35,8 @@ const props = withDefaults(
const $style = useCssModule();
const { onNodesInitialized } = useVueFlow({ id: props.id });
const workflow = toRef(props, 'workflow');
const workflowObject = toRef(props, 'workflowObject');
@ -49,6 +52,14 @@ const { nodes: mappedNodes, connections: mappedConnections } = useCanvasMapping(
connections,
workflowObject,
});
const initialFitViewDone = ref(false); // Workaround for https://github.com/bcakmakoglu/vue-flow/issues/1636
onNodesInitialized(() => {
if (!initialFitViewDone.value || props.showFallbackNodes) {
props.eventBus.emit('fitView');
initialFitViewDone.value = true;
}
});
</script>
<template>