@abdellatifui/react 3.1.90 → 3.1.91

package/dist/nextgen.js

@@ -12722,13 +12722,13 @@ const LazyContainer = (props) => {
   ) });
 };
 const hex2rgb = (hex) => {
-  let hexValue = hex.startsWith("#") ? hex.slice(1) : hex;
-  if (hexValue.length === 3) {
+  let hexValue = (hex == null ? void 0 : hex.startsWith("#")) ? hex == null ? void 0 : hex.slice(1) : hex;
+  if ((hexValue == null ? void 0 : hexValue.length) === 3) {
     hexValue = hexValue.split("").map((char2) => char2 + char2).join("");
   }
-  const r2 = parseInt(hexValue.substring(0, 2), 16);
-  const g = parseInt(hexValue.substring(2, 4), 16);
-  const b = parseInt(hexValue.substring(4, 6), 16);
+  const r2 = parseInt(hexValue == null ? void 0 : hexValue.substring(0, 2), 16);
+  const g = parseInt(hexValue == null ? void 0 : hexValue.substring(2, 4), 16);
+  const b = parseInt(hexValue == null ? void 0 : hexValue.substring(4, 6), 16);
   return [r2, g, b];
 };
 const createDefaultNodeTempate = (params) => {
@@ -14144,11 +14144,19 @@ const useCreatePath = ({ connections = [], mapApi, options: options2, selectedCo
   const [currentTime, setTime] = useState(0);
   const loopLength = 20;
   const animationSpeed = 5;
-  const layer0conns = useMemo(() => {
-    return connections == null ? void 0 : connections.filter((item) => (item == null ? void 0 : item.layer) == 0);
-  }, [
-    connections
-  ]);
+  const layer0conns = useMemo(
+    () => {
+      var _a;
+      const seen = /* @__PURE__ */ new Set();
+      const f0 = (_a = connections == null ? void 0 : connections.filter((item) => (item == null ? void 0 : item.layer) === 0)) == null ? void 0 : _a.filter((item) => {
+        if (seen.has(item.sourcesId)) return false;
+        seen.add(item.sourcesId);
+        return true;
+      });
+      return f0;
+    },
+    [connections]
+  );
   const layer1conns = useMemo(() => {
     console.log("layer1conns", connections);
     const a = connections == null ? void 0 : connections.filter((item) => (item == null ? void 0 : item.layer) == 1);
@@ -14282,7 +14290,8 @@ const CustomMarker = (props) => {
     latitude,
     children,
     offset = [0, 0],
-    markerProps = {}
+    markerProps = {},
+    style: style2 = {}
   } = props;
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     Marker,
@@ -14291,7 +14300,8 @@ const CustomMarker = (props) => {
       latitude,
       anchor: "center",
       style: {
-        zIndex: 30
+        zIndex: 30,
+        ...style2
       },
       offset,
       children
@@ -14334,7 +14344,8 @@ const LinkCountCircule = (props) => {
     mapApi,
     mapZooming,
     getCenterBox,
-    hoveredConnection
+    hoveredConnection,
+    draggingMode: draggingMode2
   } = props;
   const [midpoint, setMidpoint] = useState(null);
   const [isVisible, setIsVisible] = useState(true);
@@ -14361,6 +14372,9 @@ const LinkCountCircule = (props) => {
     {
       longitude: midpoint == null ? void 0 : midpoint.lng,
       latitude: midpoint == null ? void 0 : midpoint.lat,
+      style: {
+        opacity: draggingMode2 ? 0 : 1
+      },
       children: /* @__PURE__ */ jsxRuntimeExports.jsx(
         ConnectionBadge,
         {
@@ -14408,7 +14422,10 @@ const LinkOverContainer = (props) => {
       onMouseLeave: () => {
         setElement(null);
       },
-      className: "absolute z-30 pointer-events-auto",
+      className: cn(
+        "absolute z-30 pointer-events-auto",
+        draggingMode && "hidden"
+      ),
       style: {
         transform: "translate(-50%, -50%)",
         left: position2[0],
@@ -14419,6 +14436,7 @@ const LinkOverContainer = (props) => {
   );
 };
 const PortText = (props) => {
+  var _a;
   const ref = useRef(null);
   const {
     text,
@@ -14426,14 +14444,15 @@ const PortText = (props) => {
     isVisible,
     data,
     isFocused,
-    fontSize
+    fontSize,
+    isSource
   } = props;
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     "div",
     {
       ref,
       className: cn(
-        "w-fit h-fit font-geist text-xs z-[300] rounded-full text-accent px-1 cursor-default pointer-events-all hover:!scale-[1.5] transition-all duration-300",
+        "w-fit h-fit font-geist space-y-1 text-xs z-[300] rounded-full text-accent px-1 cursor-default pointer-events-all hover:!scale-[1.5] transition-all duration-300",
         isFocused && "!scale-[1.5]"
       ),
       style: {
@@ -14446,7 +14465,11 @@ const PortText = (props) => {
         opacity: isVisible ? 1 : 0,
         fontSize: fontSize + "rem"
       },
-      children: text
+      children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: (_a = data == null ? void 0 : data.linksGroup) == null ? void 0 : _a.map((item) => {
+        return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: cn(
+          "px-2 bg-black/20 rounded-full "
+        ), children: (item == null ? void 0 : item.isSource) ? item == null ? void 0 : item.sourcePort : item == null ? void 0 : item.destinationPort }, "txtport-" + (item == null ? void 0 : item.u_id));
+      }) })
     }
   );
 };
@@ -14460,7 +14483,8 @@ const SourcesPorts = (props) => {
     mapDragging,
     getEndpointText,
     mapRotating,
-    fontSize
+    fontSize,
+    draggingMode: draggingMode2
   } = props;
   const [midpoint, setMidpoint] = useState(null);
   const [isVisible, setIsVisible] = useState(true);
@@ -14473,6 +14497,10 @@ const SourcesPorts = (props) => {
       setIsVisible(false);
       return;
     } else {
+      if (mapDragging) {
+        setIsVisible(false);
+        return;
+      }
       setIsVisible(true);
     }
     if (currentZoomLevel < 5) {
@@ -14483,6 +14511,12 @@ const SourcesPorts = (props) => {
     }
   }, [currentZoomLevel, mapDragging]);
   useEffect(() => {
+    if (draggingMode2) {
+      setIsVisible(false);
+      return;
+    } else {
+      setIsVisible(true);
+    }
     if (!hoveredConnection) {
       setIsVisible(true);
       setIsFocused(false);
@@ -14495,7 +14529,7 @@ const SourcesPorts = (props) => {
       setIsVisible(false);
       setIsFocused(false);
     }
-  }, [hoveredConnection == null ? void 0 : hoveredConnection.u_id, data == null ? void 0 : data.u_id, currentZoomLevel]);
+  }, [hoveredConnection == null ? void 0 : hoveredConnection.u_id, data == null ? void 0 : data.u_id, currentZoomLevel, draggingMode2]);
   const sourceLabel = useMemo(() => {
     var _a2, _b2, _c2, _d2, _e, _f;
     try {
@@ -14532,7 +14566,7 @@ const SourcesPorts = (props) => {
     } catch (e) {
       return null;
     }
-  }, [mapApi == null ? void 0 : mapApi.current, mapRotating, currentZoomLevel]);
+  }, [mapApi == null ? void 0 : mapApi.current, mapRotating, currentZoomLevel, draggingMode2]);
   const destinationLabel = useMemo(() => {
     var _a2, _b2, _c2, _d2, _e, _f;
     try {
@@ -14569,7 +14603,7 @@ const SourcesPorts = (props) => {
     } catch (e) {
       return null;
     }
-  }, [mapApi == null ? void 0 : mapApi.current, mapRotating, currentZoomLevel]);
+  }, [mapApi == null ? void 0 : mapApi.current, mapRotating, currentZoomLevel, draggingMode2]);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
     sourceLabel && /* @__PURE__ */ jsxRuntimeExports.jsx(
       CustomMarker$1,
@@ -14583,7 +14617,9 @@ const SourcesPorts = (props) => {
           isVisible,
           text: data == null ? void 0 : data.sourcePort,
           isFocused,
-          fontSize
+          fontSize,
+          isSource: true,
+          draggingMode: draggingMode2
         }) : /* @__PURE__ */ jsxRuntimeExports.jsx(
           PortText,
           {
@@ -14592,7 +14628,8 @@ const SourcesPorts = (props) => {
             isVisible,
             data,
             isFocused,
-            fontSize
+            fontSize,
+            isSource: true
           }
         )
       }
@@ -14609,7 +14646,9 @@ const SourcesPorts = (props) => {
           isVisible,
           text: data == null ? void 0 : data.destinationPort,
           isFocused,
-          fontSize
+          fontSize,
+          isSource: false,
+          draggingMode: draggingMode2
         }) : /* @__PURE__ */ jsxRuntimeExports.jsx(
           PortText,
           {
@@ -14619,7 +14658,8 @@ const SourcesPorts = (props) => {
             data,
             getEndpointText,
             isFocused,
-            fontSize
+            fontSize,
+            isSource: false
           }
         )
       }
@@ -14684,7 +14724,7 @@ const NetworkMapComponent = forwardRef((props, ref) => {
     hideLinks = false,
     getCenterBox,
     enableLngLatBox = true,
-    draggingMode = false,
+    draggingMode: draggingMode2 = false,
     mapProps = {},
     menuItems = [],
     nodeMenuItems = [],
@@ -14739,7 +14779,7 @@ const NetworkMapComponent = forwardRef((props, ref) => {
     hideLinksOnDrag,
     hideLinks,
     showHoveredLinksOnly,
-    draggingMode,
+    draggingMode: draggingMode2,
     isolateNonSelectedLinksOnNodeClick,
     staticMapColor,
     mapStyle
@@ -14779,13 +14819,13 @@ const NetworkMapComponent = forwardRef((props, ref) => {
       showHoveredLinksOnly,
       hideLinks,
       mapStyle,
-      draggingMode,
+      draggingMode: draggingMode2,
       isolateNonSelectedLinksOnNodeClick,
       showLinkCount,
       maxZoomOutForLinkCount,
       nodeSizeScaler
     }));
-  }, [linkAnimation, nodeSizeScaler, maxZoomOutForLinkCount, showLinkCount, mapApi == null ? void 0 : mapApi.current, isolateNonSelectedLinksOnNodeClick, draggingMode, showHoveredLinksOnly, mapStyle == null ? void 0 : mapStyle.name, hideLinks, defaultLinkColorHex, linkHighlightedColorHex, defaultAnimationLinkColor, enableNativeContextMenu, enableLngLatBox, hideLinksOnDrag, maxZoomOutForLinkCount, nodeSizeScaler]);
+  }, [linkAnimation, nodeSizeScaler, maxZoomOutForLinkCount, showLinkCount, mapApi == null ? void 0 : mapApi.current, isolateNonSelectedLinksOnNodeClick, draggingMode2, showHoveredLinksOnly, mapStyle == null ? void 0 : mapStyle.name, hideLinks, defaultLinkColorHex, linkHighlightedColorHex, defaultAnimationLinkColor, enableNativeContextMenu, enableLngLatBox, hideLinksOnDrag, maxZoomOutForLinkCount, nodeSizeScaler]);
   const sourcePortsFontSizePercentage = useMemo(() => {
     const scale = currentZoomLevel / initialZoomLevel;
     const fontSize = baseFont * scale - 0.3;
@@ -14801,17 +14841,7 @@ const NetworkMapComponent = forwardRef((props, ref) => {
       ...node2,
       connections: []
     }));
-    const countHowManyDuplicateConnections = (conn) => {
-      const s = _connections.filter((item) => {
-        if (((item == null ? void 0 : item.sourceId) == (conn == null ? void 0 : conn.sourceId) && (item == null ? void 0 : item.destinationId) == (conn == null ? void 0 : conn.destinationId) || (item == null ? void 0 : item.destinationId) == (conn == null ? void 0 : conn.sourceId) && (item == null ? void 0 : item.sourceId) == (conn == null ? void 0 : conn.destinationId)) && (item == null ? void 0 : item.layer) == 0) {
-          return item;
-        }
-        return null;
-      });
-      return s == null ? void 0 : s.filter((item) => item != null);
-    };
     const processedConnections = updateOnly ? _connections : _connections == null ? void 0 : _connections.map((conn) => {
-      const linksGroup = countHowManyDuplicateConnections(conn);
       return {
         ...conn,
         u_id: conn.u_id || useRandomId(),
@@ -14827,8 +14857,10 @@ const NetworkMapComponent = forwardRef((props, ref) => {
         data: conn,
         connCountBoxId: useRandomId(),
         timestamp: [0, 5, 10, 15],
-        linkCount: linksGroup == null ? void 0 : linksGroup.length,
-        linksGroup
+        // linkCount : linksGroup?.length,
+        // linksGroup : linksGroup ,
+        sourcesId: (conn.sourceId + conn.destinationId).toString().split("").sort().join(""),
+        fullSourcesId: (conn.sourceId + (conn == null ? void 0 : conn.sourcePort) + conn.destinationId + (conn == null ? void 0 : conn.destinationPort)).toString().split("").sort().join("")
       };
     });
     processedNodes.forEach((node2, nodeIndex) => {
@@ -14847,6 +14879,12 @@ const NetworkMapComponent = forwardRef((props, ref) => {
         }
       });
     });
+    processedConnections == null ? void 0 : processedConnections.map((con) => {
+      const sourcesId = con == null ? void 0 : con.sourcesId;
+      const s = processedConnections == null ? void 0 : processedConnections.filter((item) => (item == null ? void 0 : item.sourcesId) == sourcesId);
+      con.linkCount = s == null ? void 0 : s.length;
+      con.linksGroup = s;
+    });
     if (debug) {
       console.log("Processed Nodes", processedNodes);
       console.log("Processed Connections", processedConnections);
@@ -15180,7 +15218,8 @@ const NetworkMapComponent = forwardRef((props, ref) => {
                       coordinates: currentCoordinates,
                       mapApi,
                       getOverLinkElement,
-                      getOverLinkElementDelay
+                      getOverLinkElementDelay,
+                      draggingMode: draggingMode2
                     }
                   ),
                   showLinkCount && !mapDragging && (inViewConnections == null ? void 0 : inViewConnections.map((con, index) => {
@@ -15191,7 +15230,8 @@ const NetworkMapComponent = forwardRef((props, ref) => {
                         mapApi,
                         mapDragging,
                         getCenterBox,
-                        hoveredConnection
+                        hoveredConnection,
+                        draggingMode: draggingMode2
                       },
                       "_lnk_count_circule_" + (con == null ? void 0 : con.u_id)
                     );
@@ -15207,7 +15247,8 @@ const NetworkMapComponent = forwardRef((props, ref) => {
                         hoveredConnection,
                         mapDragging,
                         getEndpointText,
-                        mapRotating
+                        mapRotating,
+                        draggingMode: draggingMode2
                       },
                       "_source_port_" + (con == null ? void 0 : con.u_id)
                     );