diff --git a/src/app/shared/nodes/container-node/container-node.css b/src/app/shared/nodes/container-node/container-node.css
index 542d443..36db373 100644
--- a/src/app/shared/nodes/container-node/container-node.css
+++ b/src/app/shared/nodes/container-node/container-node.css
@@ -219,7 +219,8 @@
}
.container-node__delete,
-.container-node__focus {
+.container-node__focus,
+.container-node__settings {
border: 0;
width: 30px;
height: 30px;
@@ -228,6 +229,11 @@
color: #f8fafc;
}
+.container-node__settings--active {
+ background: rgba(255, 255, 255, 0.34);
+ color: #ffffff;
+}
+
.container-node__clone {
border: 0;
width: 30px;
diff --git a/src/app/shared/nodes/container-node/container-node.html b/src/app/shared/nodes/container-node/container-node.html
index 1862dc9..125adbc 100644
--- a/src/app/shared/nodes/container-node/container-node.html
+++ b/src/app/shared/nodes/container-node/container-node.html
@@ -72,6 +72,18 @@
}
@if (!isReadonly) {
+ @if (!focusOpen && (hasParameterFields() || hasMainContent())) {
+
+ }
@@ -219,7 +231,7 @@
}
- @if (hasParameterFields() || hasMainContent()) {
+ @if ((hasParameterFields() || hasMainContent()) && (nodeSettingsOpen || focusOpen)) {
@if (!schemaReady) {
diff --git a/src/app/shared/nodes/container-node/container-node.ts b/src/app/shared/nodes/container-node/container-node.ts
index cac9a14..baa3d3c 100644
--- a/src/app/shared/nodes/container-node/container-node.ts
+++ b/src/app/shared/nodes/container-node/container-node.ts
@@ -137,6 +137,8 @@ export class ContainerNodeComponent implements OnDestroy {
optionalGroupFieldDefinitions: SchemaOptionalGroupFieldDefinition[] = [];
parameterDisplaySections: ContainerDisplaySection[] = [];
schemaReady = false;
+ /** Settings stay out of the way on the canvas until the gear button opens them. */
+ nodeSettingsOpen = false;
focusOpen = false;
private schemaLoading = false;
nameEditorOpen = false;
@@ -219,6 +221,13 @@ export class ContainerNodeComponent implements OnDestroy {
return this.data?.data?.['__readonly'] === true;
}
+ toggleNodeSettings(event?: Event) {
+ event?.preventDefault();
+ event?.stopPropagation();
+ this.nodeSettingsOpen = !this.nodeSettingsOpen;
+ this.cdr.markForCheck();
+ }
+
toggleFocus(event?: Event) {
event?.preventDefault();
event?.stopPropagation();
diff --git a/src/app/shared/nodes/generic-node/generic-node.css b/src/app/shared/nodes/generic-node/generic-node.css
index 9add75f..267feb7 100644
--- a/src/app/shared/nodes/generic-node/generic-node.css
+++ b/src/app/shared/nodes/generic-node/generic-node.css
@@ -443,6 +443,11 @@
color: #1d4ed8;
}
+.llm-clone-btn--active {
+ background: #dbeafe;
+ color: #1d4ed8;
+}
+
.llm-node--human .llm-clone-btn:hover {
background: #fff7ed;
color: #c2410c;
diff --git a/src/app/shared/nodes/generic-node/generic-node.html b/src/app/shared/nodes/generic-node/generic-node.html
index 5ec73b6..5225744 100644
--- a/src/app/shared/nodes/generic-node/generic-node.html
+++ b/src/app/shared/nodes/generic-node/generic-node.html
@@ -108,6 +108,18 @@
}
@if (!isReadonly) {
+ @if (!focusOpen && hasOrderedParameterItems()) {
+
+ }