feat(editor): Add experimental NDV pane in canvas (no-changelog) (#16419)

This commit is contained in:
Suguru Inoue
2025-06-19 09:18:05 +02:00
committed by GitHub
parent c0d1ff6e4c
commit d0eb7a45ad
8 changed files with 141 additions and 10 deletions

View File

@@ -9,6 +9,8 @@ import { createEventBus } from '@n8n/utils/event-bus';
import type { CanvasEventBusEvents } from '@/types';
import { useVueFlow } from '@vue-flow/core';
import { throttledRef } from '@vueuse/core';
import { useSettingsStore } from '@/stores/settings.store';
import ExperimentalNodeDetailsDrawer from './components/ExperimentalNodeDetailsDrawer.vue';
defineOptions({
inheritAttrs: false,
@@ -34,8 +36,9 @@ const props = withDefaults(
);
const $style = useCssModule();
const settingsStore = useSettingsStore();
const { onNodesInitialized } = useVueFlow({ id: props.id });
const { onNodesInitialized, getSelectedNodes } = useVueFlow({ id: props.id });
const workflow = toRef(props, 'workflow');
const workflowObject = toRef(props, 'workflowObject');
@@ -79,12 +82,16 @@ const mappedConnectionsThrottled = throttledRef(mappedConnections, 200);
/>
</div>
<slot />
<ExperimentalNodeDetailsDrawer
v-if="settingsStore.experimental__dockedNodeSettingsEnabled && !props.readOnly"
:selected-nodes="getSelectedNodes"
/>
</div>
</template>
<style lang="scss" module>
.wrapper {
display: block;
display: flex;
position: relative;
width: 100%;
height: 100%;
@@ -96,5 +103,7 @@ const mappedConnectionsThrottled = throttledRef(mappedConnections, 200);
height: 100%;
position: relative;
display: block;
align-items: stretch;
justify-content: stretch;
}
</style>