mohiit1502/Automata
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(editor): Nodes connectors improvements (#8945)

Browse Source 
Co-authored-by: Elias Meire <elias@meire.dev>
This commit is contained in:
Giulio Andreini
2024-03-26 09:54:04 +01:00
committed by GitHub
parent ef45da95f1
commit 264f918d97
5 changed files with 31 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
packages/editor-ui/src/components/Node.vue
View File

@@ -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>