Better styling for node groups.

lynxkite-app/web/src/index.css

@@ -88,6 +88,25 @@ body {
     }
   }
 
+  .in-group .lynxkite-node {
+    box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.3);
+    opacity: 0.3;
+    transition: opacity 0.3s;
+  }
+
+  .in-group .lynxkite-node:hover {
+    opacity: 1;
+  }
+
+  .react-flow__node-group,
+  .react-flow__node-group.selectable.selected,
+  .react-flow__node-group:hover {
+    box-shadow: 0px 3px 30px 0px rgba(0, 0, 0, 0.3);
+    border-radius: 20px;
+    border: none;
+    background-color: #fffb;
+  }
+
   .tooltip {
     padding: 8px;
     border-radius: 4px;
@@ -526,12 +545,17 @@ body {
   z-index: -10 !important;
 }
 
+.selected.selectable.react-flow__node-group,
 .selected .comment-view,
 .selected .lynxkite-node {
   outline: var(--xy-selection-border, var(--xy-selection-border-default));
   outline-offset: 7.5px;
 }
 
+.selected.selectable.react-flow__node-group {
+  outline-offset: 20px;
+}
+
 .graph-creation-view {
   display: flex;
   width: 100%;

lynxkite-app/web/src/workspace/Workspace.tsx

@@ -374,11 +374,13 @@ function LynxKiteFlow() {
     let left = Number.POSITIVE_INFINITY;
     let bottom = Number.NEGATIVE_INFINITY;
     let right = Number.NEGATIVE_INFINITY;
+    const PAD = 10;
     for (const node of selectedNodes) {
-      if (node.position.y < top) top = node.position.y;
-      if (node.position.x < left) left = node.position.x;
-      if (node.position.y + node.height! > bottom) bottom = node.position.y + node.height!;
-      if (node.position.x + node.width! > right) right = node.position.x + node.width!;
+      if (node.position.y - PAD < top) top = node.position.y - PAD;
+      if (node.position.x - PAD < left) left = node.position.x - PAD;
+      if (node.position.y + PAD + node.height! > bottom)
+        bottom = node.position.y + PAD + node.height!;
+      if (node.position.x + PAD + node.width! > right) right = node.position.x + PAD + node.width!;
     }
     groupNode.position = {
       x: left,
@@ -394,6 +396,7 @@ function LynxKiteFlow() {
               ...n,
               position: { x: n.position.x - left, y: n.position.y - top },
               parentId: groupNode.id,
+              extent: "parent",
               selected: false,
             }
           : n,
@@ -407,6 +410,7 @@ function LynxKiteFlow() {
           node.position.x -= left;
           node.position.y -= top;
           node.parentId = groupNode.id;
+          node.extent = "parent";
           node.selected = false;
         }
       }
@@ -426,6 +430,7 @@ function LynxKiteFlow() {
             ...n,
             position: { x: n.position.x + g.position.x, y: n.position.y + g.position.y },
             parentId: undefined,
+            extent: undefined,
           };
         }),
     );
@@ -441,6 +446,7 @@ function LynxKiteFlow() {
         node.position.x += g.position.x;
         node.position.y += g.position.y;
         node.parentId = undefined;
+        node.extent = undefined;
       }
     });
   }

lynxkite-app/web/src/workspace/nodes/LynxKiteNode.tsx

@@ -82,7 +82,7 @@ function LynxKiteNodeComponent(props: LynxKiteNodeProps) {
   }
   return (
     <div
-      className={`node-container ${expanded ? "expanded" : "collapsed"} `}
+      className={`node-container ${expanded ? "expanded" : "collapsed"} ${props.parentId ? "in-group" : ""}`}
       style={{
         width: props.width || 200,
         height: expanded ? props.height || 200 : undefined,