[fix] Fixed config conflicts when multiple instances are in use

Deep clone the config object to avoid conflicts when
multiple netjsongraph.js instances are in use.

Author: pandafy

src/js/netjsongraph.core.js

@@ -10,7 +10,12 @@ class NetJSONGraph {
    */
   constructor(JSONParam) {
     this.utils = new NetJSONGraphUpdate();
-    this.config = {...NetJSONGraphDefaultConfig};
+    // This ensures the of the config is deep-copied, so changes in another instance won't affect it.
+    this.config = this.utils.deepCopy(NetJSONGraphDefaultConfig);
+    // Preserve the default CRS after merging because it's a Leaflet instance, not a plain object.
+    // In setConfig, deepMergeObj would override it, causing it to fall back to the default CRS even
+    // if explicitly set it to somthing like L.CRS.Simple.
+    this.config.crs = NetJSONGraphDefaultConfig.crs;
     this.JSONParam = this.utils.isArray(JSONParam) ? JSONParam : [JSONParam];
   }
 

src/js/netjsongraph.util.js

@@ -260,6 +260,21 @@ class NetJSONGraphUtil {
     return convertGeojson(geojson);
   }
 
+  deepCopy(obj) {
+    if (obj === null || typeof obj !== "object") {
+      return obj;
+    }
+    if (Array.isArray(obj)) {
+      return obj.map((item) => this.deepCopy(item));
+    }
+    const result = {};
+    const keys = Object.keys(obj);
+    keys.forEach((key) => {
+      result[key] = this.deepCopy(obj[key]);
+    });
+    return result;
+  }
+
   /**
    * merge two object deeply
    *

test/netjsongraph.util.test.js

@@ -137,3 +137,54 @@ describe("makeCluster cluster separation logic", () => {
     expect(dist).toBeGreaterThan(4); // clusterRadius/2 = 5, allow some tolerance
   });
 });
+
+describe("Test utils deepCopy function", () => {
+  test("creates a deep clone that is independent from the original object", () => {
+    const util = new NetJSONGraphUtil();
+
+    const config = {
+      render: "map",
+      mapOptions: {
+        center: [50, 50],
+        zoom: 5,
+        nodeConfig: {label: {offset: [0, -10]}},
+      },
+      linkCategories: [
+        {
+          name: "down",
+          linkStyle: {color: "#c92517", width: 5},
+        },
+      ],
+    };
+
+    const original = config;
+    const clone = util.deepCopy(original);
+
+    expect(clone).not.toBe(original);
+    expect(clone.mapOptions).not.toBe(original.mapOptions);
+    expect(clone.linkCategories).not.toBe(original.linkCategories);
+
+    clone.render = "graph";
+    clone.mapOptions.center = [0, 0];
+    clone.mapOptions.zoom = 10;
+    clone.linkCategories[0].linkStyle.color = "#000000";
+    clone.linkCategories.push({
+      name: "up",
+      linkStyle: {color: "#00ff00", width: 2},
+    });
+
+    expect(original.render).toBe("map");
+    expect(clone.render).toBe("graph");
+    expect(original.mapOptions.center).toEqual([50, 50]);
+    expect(clone.mapOptions.center).toEqual([0, 0]);
+    expect(original.mapOptions.zoom).toBe(5);
+    expect(clone.mapOptions.zoom).toBe(10);
+    expect(original.linkCategories.length).toBe(1);
+    expect(clone.linkCategories.length).toBe(2);
+    expect(original.linkCategories[0].linkStyle.color).toBe("#c92517");
+    expect(clone.linkCategories[0].linkStyle.color).toBe("#000000");
+    expect(original.linkCategories[0].name).toBe("down");
+    expect(clone.linkCategories[0].name).toBe("down");
+    expect(clone.linkCategories[1].name).toBe("up");
+  });
+});