mirror of
https://github.com/Abdulazizzn/n8n-enterprise-unlocked.git
synced 2025-12-17 18:12:04 +00:00
110 lines
2.9 KiB
Vue
110 lines
2.9 KiB
Vue
<script setup lang="ts">
|
|
import Canvas from '@/components/canvas/Canvas.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/utils/event-bus';
|
|
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,
|
|
});
|
|
|
|
const props = withDefaults(
|
|
defineProps<{
|
|
id?: string;
|
|
workflow: IWorkflowDb;
|
|
workflowObject: Workflow;
|
|
fallbackNodes?: IWorkflowDb['nodes'];
|
|
showFallbackNodes?: boolean;
|
|
eventBus?: EventBus<CanvasEventBusEvents>;
|
|
readOnly?: boolean;
|
|
executing?: boolean;
|
|
}>(),
|
|
{
|
|
id: 'canvas',
|
|
eventBus: () => createEventBus<CanvasEventBusEvents>(),
|
|
fallbackNodes: () => [],
|
|
showFallbackNodes: true,
|
|
},
|
|
);
|
|
|
|
const $style = useCssModule();
|
|
const settingsStore = useSettingsStore();
|
|
|
|
const { onNodesInitialized, getSelectedNodes } = useVueFlow({ id: props.id });
|
|
|
|
const workflow = toRef(props, 'workflow');
|
|
const workflowObject = toRef(props, 'workflowObject');
|
|
|
|
const nodes = computed(() => {
|
|
return props.showFallbackNodes
|
|
? [...props.workflow.nodes, ...props.fallbackNodes]
|
|
: props.workflow.nodes;
|
|
});
|
|
const connections = computed(() => props.workflow.connections);
|
|
|
|
const { nodes: mappedNodes, connections: mappedConnections } = useCanvasMapping({
|
|
nodes,
|
|
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;
|
|
}
|
|
});
|
|
|
|
const mappedNodesThrottled = throttledRef(mappedNodes, 200);
|
|
const mappedConnectionsThrottled = throttledRef(mappedConnections, 200);
|
|
</script>
|
|
|
|
<template>
|
|
<div :class="$style.wrapper" data-test-id="canvas-wrapper">
|
|
<div :class="$style.canvas">
|
|
<Canvas
|
|
v-if="workflow"
|
|
:id="id"
|
|
:nodes="executing ? mappedNodesThrottled : mappedNodes"
|
|
:connections="executing ? mappedConnectionsThrottled : mappedConnections"
|
|
:event-bus="eventBus"
|
|
:read-only="readOnly"
|
|
v-bind="$attrs"
|
|
/>
|
|
</div>
|
|
<slot />
|
|
<ExperimentalNodeDetailsDrawer
|
|
v-if="settingsStore.experimental__dockedNodeSettingsEnabled && !props.readOnly"
|
|
:selected-nodes="getSelectedNodes"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss" module>
|
|
.wrapper {
|
|
display: flex;
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.canvas {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: relative;
|
|
display: block;
|
|
align-items: stretch;
|
|
justify-content: stretch;
|
|
}
|
|
</style>
|