mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2025-01-11 21:07:28 -08:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat(editor-ui): add node controls slot to canvas components

Browse source 
Add a new slot 'node-controls' to Canvas components hierarchy (Canvas, WorkflowCanvas, CanvasNode)
to allow custom node controls injection. The slot provides node data and class toggle functionality
to customize node appearance.
This commit is contained in:
Oleg Ivaniv 2024-12-06 14:15:42 +01:00
parent b247103e38
commit a2c2855a1f
No known key found for this signature in database
3 changed files with 35 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -663,7 +663,11 @@ provide(CanvasKey, {
@update="onUpdateNodeParameters" @update="onUpdateNodeParameters"
@move="onUpdateNodePosition" @move="onUpdateNodePosition"
@add="onClickNodeAdd" @add="onClickNodeAdd"
/> >
<template v-if="$slots['node-controls']" #node-controls="canvasNodeProps">
<slot name="node-controls" v-bind="canvasNodeProps" />
</template>
</Node>
</template> </template>
<template #edge-canvas-edge="edgeProps"> <template #edge-canvas-edge="edgeProps">

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

@ -74,7 +74,11 @@ onNodesInitialized(() => {
:event-bus="eventBus" :event-bus="eventBus"
:read-only="readOnly" :read-only="readOnly"
v-bind="$attrs" v-bind="$attrs"
/> >
<template v-if="$slots['node-controls']" #node-controls="canvasNodeProps">
<slot name="node-controls" v-bind="canvasNodeProps" />
</template>
</Canvas>
</div> </div>
<slot /> <slot />
</div> </div>

26
packages/editor-ui/src/components/canvas/elements/nodes/CanvasNode.vue
View file

@ -75,6 +75,7 @@ const isDisabled = computed(() => props.data.disabled);
const nodeTypeDescription = computed(() => { const nodeTypeDescription = computed(() => {
return nodeTypesStore.getNodeType(props.data.type, props.data.typeVersion); return nodeTypesStore.getNodeType(props.data.type, props.data.typeVersion);
}); });
const slotClasses = ref<Record<string, boolean>>({});
const classes = computed(() => ({ const classes = computed(() => ({
[style.canvasNode]: true, [style.canvasNode]: true,
@ -82,6 +83,7 @@ const classes = computed(() => ({
hovered: props.hovered, hovered: props.hovered,
selected: props.selected, selected: props.selected,
'bring-to-front': props.bringToFront, 'bring-to-front': props.bringToFront,
...slotClasses.value,
})); }));
/** /**
@ -232,6 +234,14 @@ function onMove(position: XYPosition) {
emit('move', props.id, position); emit('move', props.id, position);
} }
function toggleSlotClass(className: string) {
if (slotClasses.value[className]) {
delete slotClasses.value[className];
} else {
slotClasses.value[className] = true;
}
}
/** /**
* Provide * Provide
*/ */
@ -310,8 +320,12 @@ onBeforeUnmount(() => {
/> />
</template> </template>
<div v-if="$slots['node-controls']" :class="$style.nodeControls">
<slot name="node-controls" v-bind="{ data, toggleSlotClass }" />
</div>
<CanvasNodeToolbar <CanvasNodeToolbar
v-if="nodeTypeDescription" v-else-if="nodeTypeDescription"
data-test-id="canvas-node-toolbar" data-test-id="canvas-node-toolbar"
:read-only="readOnly" :read-only="readOnly"
:class="$style.canvasNodeToolbar" :class="$style.canvasNodeToolbar"
@ -364,4 +378,14 @@ onBeforeUnmount(() => {
opacity: 1; opacity: 1;
} }
} }
.nodeControls {
position: absolute;
bottom: 100%;
z-index: 1;
width: 100%;
margin: auto;
display: flex;
justify-content: center;
}
</style> </style>