admin/n8n-enterprise-unlocked
1
0
Fork 0
mirror of https://github.com/Abdulazizzn/n8n-enterprise-unlocked.git synced 2025-12-18 02:21:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: Support rendering NodeIcon without a full node type object (no-changelog) (#14097)

Browse Source
This commit is contained in:
Elias Meire
2025-03-24 14:42:43 +01:00
committed by GitHub
parent 22ddf1b644
commit 380d032d9a
16 changed files with 431 additions and 202 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
packages/frontend/editor-ui/src/components/canvas/elements/nodes/CanvasNode.vue
View File

@@ -17,8 +17,6 @@ import type {
CanvasEventBusEvents,
} from '@/types';
import { CanvasConnectionMode, CanvasNodeRenderType } from '@/types';
import NodeIcon from '@/components/NodeIcon.vue';
import { useNodeTypesStore } from '@/stores/nodeTypes.store';
import CanvasNodeToolbar from '@/components/canvas/elements/nodes/CanvasNodeToolbar.vue';
import CanvasNodeRenderer from '@/components/canvas/elements/nodes/CanvasNodeRenderer.vue';
import CanvasHandleRenderer from '@/components/canvas/elements/handles/CanvasHandleRenderer.vue';
@@ -71,7 +69,6 @@ const style = useCssModule();
const props = defineProps<Props>();
const nodeTypesStore = useNodeTypesStore();
const contextMenu = useContextMenu();
const { connectingHandle } = useCanvas();
@@ -98,10 +95,6 @@ const {
const isDisabled = computed(() => props.data.disabled);
const nodeTypeDescription = computed(() => {
return nodeTypesStore.getNodeType(props.data.type, props.data.typeVersion);
});
const classes = computed(() => ({
[style.canvasNode]: true,
[style.showToolbar]: showToolbar.value,
@@ -156,14 +149,6 @@ const mappedOutputs = computed(() => {
].filter((endpoint) => !!endpoint);
});
/**
* Node icon
*/
const nodeIconSize = computed(() =>
'configuration' in data.value.render.options && data.value.render.options.configuration ? 30 : 40,
);
/**
* Endpoints
*/
@@ -388,7 +373,7 @@ onBeforeUnmount(() => {
</template>
<CanvasNodeToolbar
v-else-if="nodeTypeDescription"
v-else
data-test-id="canvas-node-toolbar"
:read-only="readOnly"
:class="$style.canvasNodeToolbar"
@@ -405,15 +390,7 @@ onBeforeUnmount(() => {
@move="onMove"
@update="onUpdate"
@open:contextmenu="onOpenContextMenuFromNode"
>
<NodeIcon
:node-type="nodeTypeDescription"
:size="nodeIconSize"
:shrink="false"
:disabled="isDisabled"
/>
<!-- @TODO :color-default="iconColorDefault"-->
</CanvasNodeRenderer>
/>
<CanvasNodeTrigger
v-if="

14
packages/frontend/editor-ui/src/components/canvas/elements/nodes/CanvasNodeRenderer.vue
View File

@@ -8,10 +8,6 @@ import { CanvasNodeRenderType } from '@/types';
const node = inject(CanvasNodeKey);
const slots = defineSlots<{
default?: () => unknown;
}>();
const Render = () => {
const renderType = node?.data.value.render.type ?? CanvasNodeRenderType.Default;
let Component;
@@ -27,13 +23,9 @@ const Render = () => {
Component = CanvasNodeDefault;
}
return h(
Component,
{
'data-canvas-node-render-type': renderType,
},
slots.default,
);
return h(Component, {
'data-canvas-node-render-type': renderType,
});
};
</script>

7
packages/frontend/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeDefault.vue
View File

@@ -107,6 +107,10 @@ const isStrikethroughVisible = computed(() => {
return isDisabled.value && isSingleMainInputNode && isSingleMainOutputNode;
});
const iconSize = computed(() => (renderOptions.value.configuration ? 30 : 40));
const iconSource = computed(() => renderOptions.value.icon);
const showTooltip = ref(false);
watch(initialized, () => {
@@ -140,7 +144,7 @@ function onActivate() {
@dblclick.stop="onActivate"
>
<CanvasNodeTooltip v-if="renderOptions.tooltip" :visible="showTooltip" />
<slot />
<NodeIcon :icon-source="iconSource" :size="iconSize" :shrink="false" :disabled="isDisabled" />
<CanvasNodeStatusIcons v-if="!isDisabled" :class="$style.statusIcons" />
<CanvasNodeDisabledStrikeThrough v-if="isStrikethroughVisible" />
<div :class="$style.description">
@@ -171,6 +175,7 @@ function onActivate() {
--configurable-node--icon-size: 30px;
--trigger-node--border-radius: 36px;
--canvas-node--status-icons-offset: var(--spacing-3xs);
--node-icon-color: var(--color-foreground-dark);
position: relative;
height: var(--canvas-node--height);

100
packages/frontend/editor-ui/src/components/canvas/elements/nodes/render-types/__snapshots__/CanvasNodeDefault.test.ts.snap
View File

@@ -7,8 +7,24 @@ exports[`CanvasNodeDefault > configurable > should render configurable node corr
style="--configurable-node--input-count: 0; --canvas-node--main-input-count: 0; --canvas-node--main-output-count: 0;"
>
<!--v-if-->
<div
class="n8n-node-icon"
shrink="false"
>
<div
class="nodeIconWrapper"
style="width: 40px; height: 40px; font-size: 40px; line-height: 40px;"
>
<!-- ElementUI tooltip is prone to memory-leaking so we only render it if we really need it -->
<div
class="nodeIconPlaceholder"
>
?
</div>
</div>
</div>
<!--v-if-->
<!--v-if-->
<div
@@ -36,8 +52,24 @@ exports[`CanvasNodeDefault > configuration > should render configurable configur
style="--configurable-node--input-count: 0; --canvas-node--main-input-count: 0; --canvas-node--main-output-count: 0;"
>
<!--v-if-->
<div
class="n8n-node-icon"
shrink="false"
>
<div
class="nodeIconWrapper"
style="width: 30px; height: 30px; font-size: 30px; line-height: 30px;"
>
<!-- ElementUI tooltip is prone to memory-leaking so we only render it if we really need it -->
<div
class="nodeIconPlaceholder"
>
?
</div>
</div>
</div>
<!--v-if-->
<!--v-if-->
<div
@@ -65,8 +97,24 @@ exports[`CanvasNodeDefault > configuration > should render configuration node co
style="--canvas-node--main-input-count: 0; --canvas-node--main-output-count: 0;"
>
<!--v-if-->
<div
class="n8n-node-icon"
shrink="false"
>
<div
class="nodeIconWrapper"
style="width: 30px; height: 30px; font-size: 30px; line-height: 30px;"
>
<!-- ElementUI tooltip is prone to memory-leaking so we only render it if we really need it -->
<div
class="nodeIconPlaceholder"
>
?
</div>
</div>
</div>
<!--v-if-->
<!--v-if-->
<div
@@ -94,8 +142,24 @@ exports[`CanvasNodeDefault > should render node correctly 1`] = `
style="--canvas-node--main-input-count: 0; --canvas-node--main-output-count: 0;"
>
<!--v-if-->
<div
class="n8n-node-icon"
shrink="false"
>
<div
class="nodeIconWrapper"
style="width: 40px; height: 40px; font-size: 40px; line-height: 40px;"
>
<!-- ElementUI tooltip is prone to memory-leaking so we only render it if we really need it -->
<div
class="nodeIconPlaceholder"
>
?
</div>
</div>
</div>
<!--v-if-->
<!--v-if-->
<div
@@ -123,8 +187,24 @@ exports[`CanvasNodeDefault > trigger > should render trigger node correctly 1`]
style="--canvas-node--main-input-count: 0; --canvas-node--main-output-count: 0;"
>
<!--v-if-->
<div
class="n8n-node-icon"
shrink="false"
>
<div
class="nodeIconWrapper"
style="width: 40px; height: 40px; font-size: 40px; line-height: 40px;"
>
<!-- ElementUI tooltip is prone to memory-leaking so we only render it if we really need it -->
<div
class="nodeIconPlaceholder"
>
?
</div>
</div>
</div>
<!--v-if-->
<!--v-if-->
<div