improved importing ocif groups in code flow canvas

Author: devhelpr

libs/app-canvas/src/app/importers/ocif-importer.ts

@@ -271,6 +271,16 @@ export const importOCIF = (ocif: any) => {
               groupedNodeIds: group.members,
             } as any,
           });
+
+          group.members.forEach((memberId: string) => {
+            const nodeInFlow = flow.flows['flow'].nodes.find(
+              (node) => node.id === memberId
+            );
+            if (nodeInFlow && nodeInFlow.nodeInfo) {
+              nodeInFlow.nodeInfo.isInGroup = true;
+              nodeInFlow.nodeInfo.groupId = relation.id;
+            }
+          });
         }
       }
     });

libs/visual-programming-system/src/components/node-selector.ts

@@ -498,6 +498,24 @@ export class NodeSelector<T extends BaseNodeInfo> {
         this.createCompositionButtons.domElement as HTMLElement
       ).style.borderWidth = `${reversScale}px`;
     }
+
+    if (this.createGroupButton) {
+      (this.createGroupButton.domElement as HTMLElement).style.fontSize = `${
+        12 * reversScale
+      }px`;
+      (this.createGroupButton.domElement as HTMLElement).style.padding = `${
+        0.5 * reversScale
+      }rem`;
+      (this.createGroupButton.domElement as HTMLElement).style.margin = `${
+        0.5 * reversScale
+      }rem`;
+      (
+        this.createGroupButton.domElement as HTMLElement
+      ).style.borderRadius = `${0.15 * reversScale}rem`;
+      (
+        this.createGroupButton.domElement as HTMLElement
+      ).style.borderWidth = `${reversScale}px`;
+    }
     if (this.toolsNodesPanel) {
       (this.toolsNodesPanel.domElement as HTMLElement).style.bottom = `-${
         48 * reversScale