mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2024-12-25 04:34:06 -08:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat(editor): Render trigger node on canvas v2 (no-changelog) (#10001)

Browse source
This commit is contained in:
Elias Meire 2024-07-11 10:30:11 +02:00 committed by GitHub
parent de9590e10e
commit f9e9d274b9
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 106 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -107,6 +107,8 @@ provide(CanvasNodeKey, {
nodeType,
});
const nodeIconSize = computed(() => (data.value.render.options.configuration ? 30 : 40));
function onDelete() {
emit('delete', props.id);
}
@ -160,7 +162,7 @@ function onActivate() {
/>
<CanvasNodeRenderer v-if="nodeType" @dblclick="onActivate">
<NodeIcon :node-type="nodeType" :size="40" :shrink="false" :disabled="isDisabled" />
<NodeIcon :node-type="nodeType" :size="nodeIconSize" :shrink="false" :disabled="isDisabled" />
<!-- :color-default="iconColorDefault"-->
</CanvasNodeRenderer>
</div>

21
packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeDefault.spec.ts
View file

@ -222,4 +222,25 @@ describe('CanvasNodeDefault', () => {
expect(getByTestId('canvas-configurable-node')).toMatchSnapshot();
});
});
describe('trigger', () => {
it('should render trigger node correctly', () => {
const { getByTestId } = renderComponent({
global: {
provide: {
...createCanvasNodeProvide({
data: {
render: {
type: 'default',
options: { trigger: true },
},
},
}),
},
},
});
expect(getByTestId('canvas-trigger-node')).toMatchSnapshot();
});
});
});

42
packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeDefault.vue
View file

@ -6,6 +6,7 @@ import CanvasNodeDisabledStrikeThrough from './parts/CanvasNodeDisabledStrikeThr
import CanvasNodeStatusIcons from '@/components/canvas/elements/nodes/render-types/parts/CanvasNodeStatusIcons.vue';
import { useCanvasNode } from '@/composables/useCanvasNode';
import { NODE_INSERT_SPACER_BETWEEN_INPUT_GROUPS } from '@/constants';
import { N8nTooltip } from 'n8n-design-system';
const $style = useCssModule();
const i18n = useI18n();
@ -80,6 +81,14 @@ const dataTestId = computed(() => {
<template>
<div :class="classes" :style="styles" :data-test-id="dataTestId">
<slot />
<N8nTooltip v-if="renderOptions.trigger" placement="bottom">
<template #content>
<span v-html="$locale.baseText('node.thisIsATriggerNode')" />
</template>
<div :class="$style.triggerIcon">
<FontAwesomeIcon icon="bolt" size="lg" />
</div>
</N8nTooltip>
<CanvasNodeStatusIcons :class="$style.statusIcons" />
<CanvasNodeDisabledStrikeThrough v-if="isDisabled" />
<div v-if="label" :class="$style.label">
@ -91,12 +100,14 @@ const dataTestId = computed(() => {
<style lang="scss" module>
.node {
--canvas-node--height: calc(100px + max(0, var(--canvas-node--main-output-count, 1) - 4) * 50px);
--canvas-node--width: 100px;
--canvas-node--height: calc(96px + max(0, var(--canvas-node--main-output-count, 1) - 4) * 48px);
--canvas-node--width: 96px;
--canvas-node-border-width: 2px;
--configurable-node--min-input-count: 4;
--configurable-node--input-width: 65px;
--configurable-node--input-width: 64px;
--configurable-node--icon-offset: 40px;
--configurable-node--icon-size: 30px;
--trigger-node--border-radius: 36px;
height: var(--canvas-node--height);
width: var(--canvas-node--width);
@ -104,19 +115,26 @@ const dataTestId = computed(() => {
align-items: center;
justify-content: center;
background: var(--canvas-node--background, var(--color-node-background));
border: 2px solid var(--canvas-node--border-color, var(--color-foreground-xdark));
border: var(--canvas-node-border-width) solid
var(--canvas-node--border-color, var(--color-foreground-xdark));
border-radius: var(--border-radius-large);
&.trigger {
border-radius: var(--trigger-node--border-radius) var(--border-radius-large)
var(--border-radius-large) var(--trigger-node--border-radius);
}
/**
* Node types
*/
&.configuration {
--canvas-node--width: 75px;
--canvas-node--height: 75px;
--canvas-node--width: 76px;
--canvas-node--height: 76px;
background: var(--canvas-node--background, var(--node-type-supplemental-background));
border: 2px solid var(--canvas-node--border-color, var(--color-foreground-dark));
border: var(--canvas-node-border-width) solid
var(--canvas-node--border-color, var(--color-foreground-dark));
border-radius: 50px;
.statusIcons {
@ -125,7 +143,7 @@ const dataTestId = computed(() => {
}
&.configurable {
--canvas-node--height: 100px;
--canvas-node--height: 96px;
--canvas-node--width: calc(
max(var(--configurable-node--input-count, 5), var(--configurable-node--min-input-count)) *
var(--configurable-node--input-width)
@ -191,4 +209,12 @@ const dataTestId = computed(() => {
bottom: var(--spacing-2xs);
right: var(--spacing-2xs);
}
.triggerIcon {
position: absolute;
right: 100%;
margin: auto;
color: var(--color-primary);
padding: var(--spacing-2xs);
}
</style>

47
packages/editor-ui/src/components/canvas/elements/nodes/render-types/__snapshots__/CanvasNodeDefault.spec.ts.snap
View file

@ -8,6 +8,7 @@ exports[`CanvasNodeDefault > configurable > should render configurable node corr
>
<!--v-if-->
<!--v-if-->
<!--v-if-->
<div
@ -27,6 +28,7 @@ exports[`CanvasNodeDefault > configuration > should render configurable configur
>
<!--v-if-->
<!--v-if-->
<!--v-if-->
<div
@ -46,6 +48,7 @@ exports[`CanvasNodeDefault > configuration > should render configuration node co
>
<!--v-if-->
<!--v-if-->
<!--v-if-->
<div
@ -65,6 +68,50 @@ exports[`CanvasNodeDefault > should render node correctly 1`] = `
>
<!--v-if-->
<!--v-if-->
<!--v-if-->
<div
class="label"
>
Test Node
<!--v-if-->
</div>
</div>
`;
exports[`CanvasNodeDefault > trigger > should render trigger node correctly 1`] = `
<div
class="node trigger"
data-test-id="canvas-trigger-node"
style="--canvas-node--main-output-count: 0;"
>
<div
class="triggerIcon el-tooltip__trigger el-tooltip__trigger"
>
<svg
aria-hidden="true"
class="svg-inline--fa fa-bolt fa-w-10 fa-lg"
data-icon="bolt"
data-prefix="fas"
focusable="false"
role="img"
viewBox="0 0 320 512"
xmlns="http://www.w3.org/2000/svg"
>
<path
class=""
d="M296 160H180.6l42.6-129.8C227.2 15 215.7 0 200 0H56C44 0 33.8 8.9 32.2 20.8l-32 240C-1.7 275.2 9.5 288 24 288h118.7L96.6 482.5c-3.6 15.2 8 29.5 23.3 29.5 8.4 0 16.4-4.4 20.8-12l176-304c9.3-15.9-2.2-36-20.7-36z"
fill="currentColor"
/>
</svg>
</div>
<!--teleport start-->
<!--teleport end-->
<!--v-if-->
<!--v-if-->
<div

2
packages/editor-ui/src/types/canvas.ts
View file

@ -66,7 +66,7 @@ export interface CanvasElementData {
};
render: {
type: 'default';
options: Record<string, unknown>;
options: Partial<{ configurable: boolean; configuration: boolean; trigger: boolean }>;
};
}