Merge pull request #163 from asadarafat/topoeditor-layout-manager

Topoeditor layout manager

Author: FloSch62

package-lock.json

@@ -179,21 +179,21 @@
         "category": "Containerlab",
         "icon": "$(info)"
       },
-        {
-          "command": "containerlab.lab.graph.drawio.horizontal",
-          "title": "Graph (draw.io, Horizontal)",
-          "category": "Containerlab"
-        },
-        {
-          "command": "containerlab.lab.graph.drawio.vertical",
-          "title": "Graph (draw.io, Vertical)",
-          "category": "Containerlab"
-        },
-        {
-          "command": "containerlab.lab.graph.drawio.interactive",
-          "title": "Graph (draw.io, Interactive)",
-          "category": "Containerlab"
-        },
+      {
+        "command": "containerlab.lab.graph.drawio.horizontal",
+        "title": "Graph (draw.io, Horizontal)",
+        "category": "Containerlab"
+      },
+      {
+        "command": "containerlab.lab.graph.drawio.vertical",
+        "title": "Graph (draw.io, Vertical)",
+        "category": "Containerlab"
+      },
+      {
+        "command": "containerlab.lab.graph.drawio.interactive",
+        "title": "Graph (draw.io, Interactive)",
+        "category": "Containerlab"
+      },
       {
         "command": "containerlab.lab.graph.topoViewer",
         "title": "Graph (TopoViewer)",
@@ -1044,6 +1044,7 @@
     "@types/vscode": "^1.100.0",
     "@typescript-eslint/eslint-plugin": "^8.32.1",
     "@typescript-eslint/parser": "^8.32.1",
+    "@vscode/vsce": "^3.5.0",
     "chai": "^5.2.0",
     "chai-as-promised": "^8.0.1",
     "chai-http": "^5.1.2",
@@ -1066,14 +1067,14 @@
     "@types/cytoscape": "^3.21.9",
     "@types/sinon": "^17.0.4",
     "@types/sinon-chai": "^4.0.0",
-    "@vscode/vsce": "^3.5.0",
     "ajv": "^8.17.1",
     "ajv-formats": "^3.0.1",
     "cytoscape": "^3.32.0",
     "cytoscape-cola": "^2.5.1",
     "cytoscape-cxtmenu": "^3.5.0",
     "cytoscape-edgehandles": "^4.0.1",
     "cytoscape-grid-guide": "^2.3.3",
+    "cytoscape-leaf": "^1.2.4",
     "js-yaml": "^4.1.0",
     "socket.io": "^4.8.1",
     "ts-loader": "^9.5.2",

package.json

@@ -0,0 +1 @@
+declare module 'cytoscape-leaf';

src/topoViewer/backend/types/cytoscape-leaf.d.ts

@@ -64,7 +64,8 @@ body {
 #cy {
   width: 100%;
   height: 100%;
-  padding-bottom: 50px;
+  padding-top: 10px;
+  padding-bottom: 0px;
   position: absolute;
   z-index: 1;
   /* Background */
@@ -73,7 +74,8 @@ body {
 #cy-leaflet {
   width: 100%;
   height: 100%;
-  padding-bottom: 50px;
+  padding-top: 10px;
+  padding-bottom: 0px;
   position: absolute;
   z-index: 0;
   /* Background */
@@ -537,6 +539,15 @@ body {
   /* Initially hidden */
 }
 
+.select.is-small select {
+  font-size: 0.75rem;
+  padding-top: 0.4em;
+  padding-bottom: 0.4em;
+  line-height: 1.2;
+}
+
+
+
 /* Editor Container
 -------------------------------------------------- */
 #editor-container {
@@ -593,12 +604,12 @@ body {
     background-color: rgba(24, 24, 24, 1);
   }
 
-  .panel-block {
+  .panel {
+    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.4);
     background-color: rgba(40, 40, 40, 1);
   }
 
-  .panel {
-    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.4);
+  .panel-block {
     background-color: rgba(40, 40, 40, 1);
   }
 
@@ -670,13 +681,12 @@ body {
     background-color: rgba(70, 86, 246, 1);
   }
 
-  .panel-block {
-    background-color: white;
+  .panel {
     box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1);
+    background-color: white;
   }
 
-  .panel {
-    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1);
+  .panel-block {
     background-color: white;
   }
 

src/topoViewer/webview-ui/html-static/css/style.css

@@ -5,7 +5,7 @@ import cytoscape from 'cytoscape';
 /**
  * Cytoscape styles for VS Code deployment.
  */
-export const cytoscapeStylesForVscode = [
+const cytoscapeStylesBase = [
   {
     selector: "core",
     style: {
@@ -435,22 +435,55 @@ export const cytoscapeStylesForVscode = [
   }
 ];
 
+/**
+ * Returns a cloned Cytoscape style array adjusted for the given theme.
+ * When `theme` is "light" group nodes appear darker with higher opacity.
+ */
+export function getCytoscapeStyles(theme: 'light' | 'dark') {
+  return cytoscapeStylesBase.map((def: any) => {
+    const clone: any = { selector: def.selector, style: { ...(def.style || {}) } };
+    if (def.selector === 'node[topoViewerRole="group"]') {
+      if (theme === 'light') {
+        clone.style['background-color'] = '#a6a6a6';
+        clone.style['background-opacity'] = '0.4';
+        clone.style['border-width'] = '0.5px';
+        clone.style['border-color'] = '#aaaaaa';
+      } else {
+        clone.style['background-color'] = '#d9d9d9';
+        clone.style['background-opacity'] = '0.2';
+      }
+    }
+    return clone;
+  });
+}
+
 /**
  * Loads and applies Cytoscape styles to the provided Cytoscape instance.
  *
  * This method removes existing inline styles and applies the predefined VS Code styles.
  *
  * @param cy - The Cytoscape instance to style.
  */
-export default async function loadCytoStyle(cy: cytoscape.Core): Promise<void> {
+export default async function loadCytoStyle(
+  cy: cytoscape.Core,
+  theme?: 'light' | 'dark'
+): Promise<void> {
   try {
     // Remove any existing inline styles.
     cy.nodes().removeStyle();
     cy.edges().removeStyle();
 
-    // Apply the predefined VS Code styles.
-    cy.style().fromJson(cytoscapeStylesForVscode).update();
+    const engine = (window as any).topoViewerEditorEngine;
+    const forced = engine?.layoutAlgoManager?.geoTheme;
+    const selectedTheme = theme || forced || (engine?.detectColorScheme?.() || 'light');
+    const styles = getCytoscapeStyles(selectedTheme === 'light' ? 'light' : 'dark');
+    cy.style().fromJson(styles).update();
     console.info("Cytoscape styles applied successfully.");
+
+    const layoutMgr = (window as any).topoViewerEditorEngine?.layoutAlgoManager;
+    if (layoutMgr?.isGeoMapInitialized) {
+      layoutMgr.applyGeoScale(true);
+    }
   } catch (error) {
     console.error("Error applying Cytoscape styles:", error);
   }
@@ -469,7 +502,7 @@ export function extractNodeIcons(): string[] {
   const nodeTypes: string[] = [];
   const regex = /node\[topoViewerRole="([^"]+)"\]/;
 
-  for (const styleDef of cytoscapeStylesForVscode) {
+  for (const styleDef of cytoscapeStylesBase) {
     if (typeof styleDef.selector === 'string') {
       const match = styleDef.selector.match(regex);
       if (match && match[1]) {