admin/n8n-enterprise-unlocked
1
0
Fork 0
mirror of https://github.com/Abdulazizzn/n8n-enterprise-unlocked.git synced 2025-12-16 17:46:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(editor): Don't hide FocusPanel when NodeCreator is opened to avoid canvas shift (no-changelog) (#17454)

Browse Source
This commit is contained in:
Charlie Kolb
2025-07-22 10:44:57 +02:00
committed by GitHub
parent 8fb3d8d587
commit c1aae67a04
5 changed files with 7 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
packages/frontend/editor-ui/src/components/FocusPanel.vue
View File

@@ -67,7 +67,6 @@ const resolvedParameter = computed(() =>
);
const focusPanelActive = computed(() => focusPanelStore.focusPanelActive);
const focusPanelHidden = computed(() => focusPanelStore.focusPanelHidden);
const focusPanelWidth = computed(() => focusPanelStore.focusPanelWidth);
const isDisabled = computed(() => {
@@ -314,7 +313,7 @@ const onResizeThrottle = useThrottleFn(onResize, 10);
</script>
<template>
<div v-if="focusPanelActive" v-show="!focusPanelHidden" :class="$style.wrapper" @keydown.stop>
<div v-if="focusPanelActive" :class="$style.wrapper" @keydown.stop>
<N8nResizeWrapper
:width="focusPanelWidth"
:supported-directions="['left']"

3
packages/frontend/editor-ui/src/components/Node/NodeCreator/NodeCreator.vue
View File

@@ -16,6 +16,7 @@ import { useAssistantStore } from '@/stores/assistant.store';
import N8nIconButton from '@n8n/design-system/components/N8nIconButton/IconButton.vue';
import { useBuilderStore } from '@/stores/builder.store';
import type { NodeTypeSelectedPayload } from '@/Interface';
import { onClickOutside } from '@vueuse/core';
export interface Props {
active?: boolean;
@@ -151,6 +152,8 @@ const { nodeCreator } = toRefs(state);
onBeforeUnmount(() => {
unBindOnMouseUpOutside();
});
onClickOutside(nodeCreator, () => emit('closeNodeCreator'));
</script>
<template>

2
packages/frontend/editor-ui/src/composables/useStyles.ts
View File

@@ -3,12 +3,12 @@ const APP_Z_INDEXES = {
APP_HEADER: 99,
SELECT_BOX: 100,
CANVAS_ADD_BUTTON: 101,
NODE_CREATOR: 200,
ASK_ASSISTANT_CHAT: 300,
APP_SIDEBAR: 999,
CANVAS_SELECT_BOX: 100,
TOP_BANNERS: 999,
FOCUS_PANEL: 1600,
NODE_CREATOR: 1700,
NDV: 1800,
MODALS: 2000,
TOASTS: 2100,

19
packages/frontend/editor-ui/src/stores/focusPanel.store.ts
View File

@@ -14,7 +14,8 @@ import { LOCAL_STORAGE_FOCUS_PANEL, PLACEHOLDER_EMPTY_WORKFLOW_ID } from '@/cons
import { useStorage } from '@/composables/useStorage';
import { watchOnce } from '@vueuse/core';
const DEFAULT_PANEL_WIDTH = 528;
// matches NodeCreator to ensure they fully overlap by default when both are open
const DEFAULT_PANEL_WIDTH = 385;
type FocusedNodeParameter = {
nodeId: string;
@@ -59,7 +60,6 @@ export const useFocusPanelStore = defineStore(STORES.FOCUS_PANEL, () => {
const lastFocusTimestamp = ref(0);
const focusPanelActive = computed(() => currentFocusPanelData.value.isActive);
const focusPanelHidden = ref(false);
const focusPanelWidth = computed(() => currentFocusPanelData.value.width ?? DEFAULT_PANEL_WIDTH);
const _focusedNodeParameters = computed(() => currentFocusPanelData.value.parameters);
@@ -109,11 +109,6 @@ export const useFocusPanelStore = defineStore(STORES.FOCUS_PANEL, () => {
if (isActive) {
lastFocusTimestamp.value = Date.now();
}
// Unhide the focus panel if it was hidden
if (focusPanelHidden.value && focusPanelActive.value) {
focusPanelHidden.value = false;
}
}
// When a new workflow is saved, we should update the focus panel data with the new workflow ID
@@ -143,14 +138,6 @@ export const useFocusPanelStore = defineStore(STORES.FOCUS_PANEL, () => {
_setOptions({ isActive: false });
}
function hideFocusPanel(hide: boolean = true) {
if (focusPanelHidden.value === hide) {
return;
}
focusPanelHidden.value = hide;
}
function toggleFocusPanel() {
_setOptions({ isActive: !focusPanelActive.value });
}
@@ -179,11 +166,9 @@ export const useFocusPanelStore = defineStore(STORES.FOCUS_PANEL, () => {
focusPanelActive,
focusedNodeParameters,
lastFocusTimestamp,
focusPanelHidden,
focusPanelWidth,
openWithFocusedNodeParameter,
isRichParameter,
hideFocusPanel,
closeFocusPanel,
toggleFocusPanel,
onNewWorkflowSave,

12
packages/frontend/editor-ui/src/views/NodeView.vue
View File

@@ -981,10 +981,6 @@ function onUpdateNodeOutputs(id: string) {
}
function onClickNodeAdd(source: string, sourceHandle: string) {
if (isFocusPanelFeatureEnabled.value && focusPanelStore.focusPanelActive) {
focusPanelStore.hideFocusPanel();
}
nodeCreatorStore.openNodeCreatorForConnectingNode({
connection: {
source,
@@ -1218,10 +1214,6 @@ function onOpenSelectiveNodeCreator(
function onToggleNodeCreator(options: ToggleNodeCreatorOptions) {
nodeCreatorStore.setNodeCreatorState(options);
if (isFocusPanelFeatureEnabled.value && focusPanelStore.focusPanelActive) {
focusPanelStore.hideFocusPanel(options.createNodeActive);
}
if (!options.createNodeActive && !options.hasAddedNodes) {
uiStore.resetLastInteractedWith();
}
@@ -1246,10 +1238,6 @@ function onToggleFocusPanel() {
function closeNodeCreator() {
if (nodeCreatorStore.isCreateNodeActive) {
nodeCreatorStore.isCreateNodeActive = false;
if (isFocusPanelFeatureEnabled.value && focusPanelStore.focusPanelActive) {
focusPanelStore.hideFocusPanel(false);
}
}
}