mirror of
https://github.com/n8n-io/n8n.git
synced 2024-12-24 20:24:05 -08:00
feat(editor): Render trigger node on canvas v2 (no-changelog) (#10001)
This commit is contained in:
Elias Meire
GitHub
parent
de9590e10e
commit
f9e9d274b9
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -66,7 +66,7 @@ export interface CanvasElementData {
|
|||
};
|
||||
render: {
|
||||
type: 'default';
|
||||
options: Record<string, unknown>;
|
||||
options: Partial<{ configurable: boolean; configuration: boolean; trigger: boolean }>;
|
||||
};
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue