feat: Avoid overlap between group nodes

nr-cytoscape-expand-collapse.js.LICENSE.txt

@@ -0,0 +1,9 @@
+/*!
+Embeddable Minimum Strictly-Compliant Promises/A+ 1.1.1 Thenable
+Copyright (c) 2013-2014 Ralf S. Engelschall (http://engelschall.com)
+Licensed under The MIT License (http://opensource.org/licenses/MIT)
+*/
+
+/*! Bezier curve function generator. Copyright Gaetan Renaudeau. MIT License: http://en.wikipedia.org/wiki/MIT_License */
+
+/*! Runge-Kutta spring physics function generator. Adapted from Framer.js, copyright Koen Bok. MIT License: http://en.wikipedia.org/wiki/MIT_License */

package.json

@@ -1,6 +1,6 @@
 {
   "name": "nr-cytoscape-expand-collapse",
-  "version": "1.0.0",
+  "version": "1.0.3",
   "description": "This extension provides an interface to expand-collapse nodes",
   "main": "./src/index.js",
   "spm": {
@@ -40,6 +40,7 @@
   },
   "peerDependencies": {
     "cytoscape": "^3.3.0",
-    "cytoscape-fcose": "^2.2.0"
+    "cytoscape-fcose": "^2.2.0",
+    "cytoscape-dagre": "^2.5.0"
   }
 }

src/elementUtilities.js

@@ -1,5 +1,4 @@
-const relayout = require("./reLayout");
-const { reLayout } = require("./reLayout");
+const { runLayoutAsync } = require("./layoutUtilities");
 
 function elementUtilities(cy) {
   return {
@@ -48,11 +47,35 @@ function elementUtilities(cy) {
       if (typeof layoutBy === "function") {
         layoutBy();
       } else if (layoutBy != null) {
-        var layout = cy.layout(layoutBy);
-        if (layout && layout.run) {
-          await reLayout(layout);
-          relayout(cy, layoutBy);
+        var hasGroups = !!cy
+          .nodes()
+          .filter((node) => node.data().type === "group").length;
+
+        if (hasGroups) {
+          // get positions of nodes before preset layout
+          const positions = {};
+          (cy?.scratch("_cyExpandCollapse")?.positions ?? []).forEach(
+            ({ nodeId, position }) => {
+              positions[nodeId] = position;
+            }
+          );
+
+          // run preset layout with the positions
+          await runLayoutAsync(
+            cy.layout({
+              name: "preset",
+              fit: false,
+              positions: positions,
+              zoom: cy.zoom(),
+              pan: cy.pan(),
+              padding: layoutBy?.padding ?? 50,
+              animate: layoutBy?.animate ?? true,
+              animationDuration: layoutBy?.animationDuration ?? 500,
+              animationEasing: layoutBy?.animationEasing,
+            })
+          );
         }
+        cy.scratch("_cyExpandCollapse").positions = null;
       }
     },
     convertToRenderedPosition: function (modelPosition) {

src/getSupportCy.js

@@ -0,0 +1,31 @@
+const cytoscape = require("cytoscape");
+const fcose = require("cytoscape-fcose");
+const dagre = require("cytoscape-dagre");
+
+/**
+ * Creates a new support cytoscape instance with the same elements and style as the provided instance,
+ * and attaches it to a container with the ID "support-map".
+ *
+ * @param {Object} cy - The original Cytoscape instance.
+ * @returns {Object} The new Cytoscape instance.
+ */
+function getSupportCy(cy) {
+  const cyJson = cy.json();
+
+  let cont = document.getElementById("support-map");
+  cont.style.width = cy.container().clientWidth + "px";
+  cont.style.height = cy.container().clientHeight + "px";
+
+  cytoscape.use(fcose);
+  cytoscape.use(dagre);
+  const supportCy = cytoscape({
+    container: cont,
+    elements: cyJson.elements,
+    styleEnabled: true,
+    style: cyJson.style,
+  });
+
+  return supportCy;
+}
+
+module.exports = getSupportCy;