mirror of
https://github.com/n8n-io/n8n.git
synced 2024-09-11 13:15:28 +03:00
fix(editor): Nodes connectors improvements (#8945)
Co-authored-by: Elias Meire <elias@meire.dev>
This commit is contained in:
parent
ef45da95f1
commit
264f918d97
@ -40,6 +40,9 @@
|
||||
|
||||
// Canvas
|
||||
--color-canvas-background: var(--prim-gray-820);
|
||||
--color-canvas-background-h: var(--prim-gray-h); // Used for connectors labels background
|
||||
--color-canvas-background-s: 1%;
|
||||
--color-canvas-background-l: 18%;
|
||||
--color-canvas-dot: var(--prim-gray-670);
|
||||
--color-canvas-read-only-line: var(--prim-gray-800);
|
||||
--color-canvas-node-background: var(--prim-gray-40);
|
||||
|
@ -73,6 +73,9 @@
|
||||
|
||||
// Canvas
|
||||
--color-canvas-background: var(--prim-gray-10);
|
||||
--color-canvas-background-h: var(--prim-gray-h); // Used for connectors labels background
|
||||
--color-canvas-background-s: 47%;
|
||||
--color-canvas-background-l: 99%;
|
||||
--color-canvas-dot: var(--prim-gray-120);
|
||||
--color-canvas-read-only-line: var(--prim-gray-30);
|
||||
--color-canvas-node-background: var(--prim-gray-0);
|
||||
|
@ -1182,7 +1182,8 @@ export default defineComponent({
|
||||
--endpoint-size-small: 14px;
|
||||
--endpoint-size-medium: 18px;
|
||||
--stalk-size: 40px;
|
||||
--stalk-switch-size: 60px;
|
||||
--stalk-medium-size: 60px;
|
||||
--stalk-large-size: 90px;
|
||||
--stalk-success-size: 87px;
|
||||
--stalk-success-size-without-label: 40px;
|
||||
--stalk-long-size: 127px;
|
||||
@ -1235,13 +1236,13 @@ export default defineComponent({
|
||||
// mouse over event.
|
||||
pointer-events: none;
|
||||
span {
|
||||
border-radius: 7px;
|
||||
background-color: hsla(
|
||||
var(--color-canvas-background-h),
|
||||
var(--color-canvas-background-s),
|
||||
var(--color-canvas-background-l),
|
||||
0.85
|
||||
);
|
||||
border-radius: var(--border-radius-base);
|
||||
line-height: 1.3em;
|
||||
padding: 0px 3px;
|
||||
white-space: nowrap;
|
||||
@ -1421,9 +1422,9 @@ export default defineComponent({
|
||||
var(--color-canvas-background-l),
|
||||
0.85
|
||||
);
|
||||
border-radius: 7px;
|
||||
font-size: 0.7em;
|
||||
padding: 2px;
|
||||
border-radius: var(--border-radius-large);
|
||||
font-size: var(--font-size-3xs);
|
||||
padding: var(--spacing-5xs) var(--spacing-4xs);
|
||||
white-space: nowrap;
|
||||
transition: color var(--node-endpoint-label--transition-duration) ease;
|
||||
|
||||
@ -1449,11 +1450,12 @@ export default defineComponent({
|
||||
|
||||
// Some nodes allow for dynamic connection labels
|
||||
// so we need to make sure the label does not overflow
|
||||
&.node-connection-type-main[data-endpoint-label-length='medium'] {
|
||||
max-width: calc(var(--stalk-size) - (var(--endpoint-size-small)));
|
||||
&.node-connection-type-main[data-endpoint-label-length] {
|
||||
max-width: calc(var(--stalk-size) - var(--endpoint-size-small) - var(--spacing-4xs));
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
margin-left: calc(var(--endpoint-size-small) + var(--spacing-2xs) + 10px);
|
||||
transform: translateY(-50%) !important;
|
||||
margin-left: var(--endpoint-size-small);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1508,6 +1510,10 @@ export default defineComponent({
|
||||
}
|
||||
|
||||
[data-endpoint-label-length='medium'] {
|
||||
--stalk-size: var(--stalk-switch-size);
|
||||
--stalk-size: var(--stalk-medium-size);
|
||||
}
|
||||
|
||||
[data-endpoint-label-length='large'] {
|
||||
--stalk-size: var(--stalk-large-size);
|
||||
}
|
||||
</style>
|
||||
|
@ -28,6 +28,7 @@ import { useHistoryStore } from '@/stores/history.store';
|
||||
import { useCanvasStore } from '@/stores/canvas.store';
|
||||
import type { EndpointSpec } from '@jsplumb/common';
|
||||
import { useDeviceSupport } from 'n8n-design-system';
|
||||
import type { N8nEndpointLabelLength } from '@/plugins/jsplumb/N8nPlusEndpointType';
|
||||
|
||||
const createAddInputEndpointSpec = (
|
||||
connectionName: NodeConnectionType,
|
||||
@ -55,6 +56,12 @@ const createDiamondOutputEndpointSpec = (): EndpointSpec => ({
|
||||
},
|
||||
});
|
||||
|
||||
const getEndpointLabelLength = (length: number): N8nEndpointLabelLength => {
|
||||
if (length <= 2) return 'small';
|
||||
else if (length <= 6) return 'medium';
|
||||
return 'large';
|
||||
};
|
||||
|
||||
export const nodeBase = defineComponent({
|
||||
data() {
|
||||
return {
|
||||
@ -371,7 +378,7 @@ export const nodeBase = defineComponent({
|
||||
outputConfigurations.push(outputConfiguration);
|
||||
});
|
||||
|
||||
const endpointLabelLength = maxLabelLength < 4 ? 'short' : 'medium';
|
||||
const endpointLabelLength = getEndpointLabelLength(maxLabelLength);
|
||||
|
||||
this.outputs.forEach((value, i) => {
|
||||
const outputConfiguration = outputConfigurations[i];
|
||||
|
@ -10,11 +10,12 @@ import {
|
||||
} from '@jsplumb/browser-ui';
|
||||
|
||||
export type ComputedN8nPlusEndpoint = [number, number, number, number, number];
|
||||
export type N8nEndpointLabelLength = 'small' | 'medium' | 'large';
|
||||
interface N8nPlusEndpointParams extends EndpointRepresentationParams {
|
||||
dimensions: number;
|
||||
connectedEndpoint: Endpoint;
|
||||
hoverMessage: string;
|
||||
endpointLabelLength: 'small' | 'medium';
|
||||
endpointLabelLength: N8nEndpointLabelLength;
|
||||
size: 'small' | 'medium';
|
||||
showOutputLabel: boolean;
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user