@abdellatifui/react 3.1.79 → 3.1.80

package/dist/nextgen.d.ts

@@ -618,12 +618,16 @@ declare type NetworkMapProps_2 = {
     staticMapColor: string;
     isolateNonSelectedLinksOnNodeClick: boolean;
     showLinkCount: boolean;
+    showEndpoints: boolean;
+    getOverLinkElementDelay: number;
     tid: string | number;
     onConnClick: (conn: object) => void;
     onNodeClick: (node: object) => void;
     getCenterBox: (conn: object) => void;
     onNodeMouseOver: (node: object) => void;
     getMenuTitle: (connection: object) => void;
+    getOverLinkElement: (connection: object) => void;
+    getEndpointText: (connection: object) => void;
     onLinkContextMenu: (info: {
         data: object;
         event: default_2.MouseEvent;

package/dist/nextgen.js

@@ -13471,6 +13471,7 @@ const PinItem = (props) => {
     setNodeContextMenuEvent,
     nodes,
     connections,
+    hoveredConnection,
     onNodeSelected = () => {
     },
     onNodeMouseOver = () => {
@@ -13485,6 +13486,19 @@ const PinItem = (props) => {
   const defaultIcon = useMemo(() => {
     return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref, className: "w-[50px] h-[50px] hover:scale-[1.5] transition-all ease-in-out duration-300 bg-black/70 p-2 rounded-2xl outline-blue-600 outline z-[300]", children: /* @__PURE__ */ jsxRuntimeExports.jsx("img", { className: "w-full h-full", src: NetworkCloudIcon, alt: "s" }) });
   }, [name2]);
+  useEffect(() => {
+    var _a;
+    if (!hoveredConnection) {
+      setOpacity(1);
+      return;
+    }
+    const f = (_a = hoveredConnection == null ? void 0 : hoveredConnection.nodes) == null ? void 0 : _a.find((n) => (n == null ? void 0 : n.elementId) == (item == null ? void 0 : item.elementId));
+    if (f) {
+      setOpacity(1);
+    } else {
+      setOpacity(0.7);
+    }
+  }, [hoveredConnection]);
   const changeMarkerOutline = useCallback((state) => {
     setOutlined(state);
   }, [item]);
@@ -14051,6 +14065,266 @@ const LinkCountCircule = (props) => {
   );
 };
 const LinkCountCircule$1 = memo(LinkCountCircule);
+const LinkOverContainer = (props) => {
+  const ref = useRef();
+  const [position2, setPosition] = useState([0, 0]);
+  const [Element2, setElement] = useState(null);
+  const {
+    conn,
+    coordinates,
+    getOverLinkElement,
+    getOverLinkElementDelay,
+    mapApi
+  } = props;
+  useEffect(() => {
+    if (!coordinates) return;
+    if (!(coordinates == null ? void 0 : coordinates[0])) return;
+    if (!conn) return;
+    const timeout2 = setTimeout(() => {
+      const screenPos = mapApi.current.project([coordinates[0], coordinates[1]]);
+      setElement(getOverLinkElement({ ...conn, containerRef: ref, currentCoordinates: coordinates, currentPosition: position2 }));
+      setPosition([screenPos.x, screenPos.y]);
+    }, getOverLinkElementDelay);
+    return () => {
+      clearTimeout(timeout2);
+      setElement(null);
+      setPosition([0, 0]);
+    };
+  }, [coordinates == null ? void 0 : coordinates[0]]);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "div",
+    {
+      ref,
+      onMouseLeave: () => {
+        setElement(null);
+      },
+      className: "absolute z-30 pointer-events-auto",
+      style: {
+        transform: "translate(-50%, -50%)",
+        left: position2[0],
+        top: position2[1]
+      },
+      children: Element2
+    }
+  );
+};
+const PortText = (props) => {
+  const ref = useRef(null);
+  const {
+    text,
+    rotation,
+    isVisible,
+    data,
+    isFocused
+  } = 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",
+        isFocused && "!scale-[1.5]"
+      ),
+      style: {
+        transform: `rotate(${rotation}deg)`,
+        transformOrigin: "50% 50%",
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        backgroundColor: data == null ? void 0 : data.linkColorHex,
+        opacity: isVisible ? 1 : 0
+      },
+      children: text
+    }
+  );
+};
+const SourcesPorts = (props) => {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p;
+  const {
+    data,
+    mapApi,
+    currentZoomLevel,
+    hoveredConnection,
+    mapDragging,
+    getEndpointText
+  } = props;
+  const [midpoint, setMidpoint] = useState(null);
+  const [isVisible, setIsVisible] = useState(true);
+  useRef(null);
+  useRef(null);
+  const [viewportRevision, setViewportRevision] = useState(0);
+  const [isFocused, setIsFocused] = useState(false);
+  useEffect(() => {
+    if (mapDragging) {
+      setIsVisible(false);
+      return;
+    } else {
+      setIsVisible(true);
+    }
+    if (currentZoomLevel < 5) {
+      setIsVisible(false);
+      return;
+    } else if (currentZoomLevel > 6) {
+      setIsVisible(true);
+    }
+  }, [currentZoomLevel, mapDragging]);
+  useEffect(() => {
+    if (!hoveredConnection) {
+      setIsVisible(true);
+      setIsFocused(false);
+      return;
+    }
+    if ((hoveredConnection == null ? void 0 : hoveredConnection.u_id) == (data == null ? void 0 : data.u_id)) {
+      setIsVisible(true);
+      setIsFocused(true);
+    } else {
+      setIsVisible(false);
+      setIsFocused(false);
+    }
+  }, [hoveredConnection, data == null ? void 0 : data.u_id, currentZoomLevel]);
+  useEffect(() => {
+    const map = mapApi == null ? void 0 : mapApi.current;
+    if (!map) return;
+    const onMove = () => setViewportRevision((v) => v + 1);
+    map.on("move", onMove);
+    map.on("zoom", onMove);
+    map.on("rotate", onMove);
+    return () => {
+      try {
+        map.off("move", onMove);
+        map.off("zoom", onMove);
+        map.off("rotate", onMove);
+      } catch (e) {
+      }
+    };
+  }, [mapApi == null ? void 0 : mapApi.current]);
+  const sourceLabel = useMemo(() => {
+    var _a2, _b2, _c2, _d2, _e2, _f2;
+    try {
+      const map = mapApi == null ? void 0 : mapApi.current;
+      if (!map || !(data == null ? void 0 : data.source) || !(data == null ? void 0 : data.destination)) return null;
+      const p1 = map.project([(_a2 = data == null ? void 0 : data.source) == null ? void 0 : _a2.lng, (_b2 = data == null ? void 0 : data.source) == null ? void 0 : _b2.lat]);
+      const p2 = map.project([(_c2 = data == null ? void 0 : data.destination) == null ? void 0 : _c2.lng, (_d2 = data == null ? void 0 : data.destination) == null ? void 0 : _d2.lat]);
+      const dx = (p2 == null ? void 0 : p2.x) - (p1 == null ? void 0 : p1.x);
+      const dy = (p2 == null ? void 0 : p2.y) - (p1 == null ? void 0 : p1.y);
+      const length2 = Math.hypot(dx, dy) || 1;
+      const ux = dx / length2;
+      const uy = dy / length2;
+      const nx = -uy;
+      const ny = ux;
+      const markerHalfSize = ((_e2 = data == null ? void 0 : data.source) == null ? void 0 : _e2.markerSize) ? ((_f2 = data == null ? void 0 : data.source) == null ? void 0 : _f2.markerSize) / 2 : 12;
+      const totalLength = length2;
+      const defaultOffset = { along: 100, perpendicular: 0 };
+      const customOffset = (data == null ? void 0 : data.sourcePortOffset) || {};
+      const alongOffset = typeof (customOffset == null ? void 0 : customOffset.along) === "number" ? customOffset.along : defaultOffset.along;
+      const perpendicularOffset = typeof (customOffset == null ? void 0 : customOffset.perpendicular) === "number" ? customOffset.perpendicular : defaultOffset.perpendicular;
+      const distanceFromNode = markerHalfSize + alongOffset;
+      const alongDistance = Math.min(Math.max(distanceFromNode, markerHalfSize + 4), totalLength * 0.6);
+      const perpendicularDistance = perpendicularOffset;
+      const offX = nx * perpendicularDistance + ux * alongDistance;
+      const offY = ny * perpendicularDistance + uy * alongDistance;
+      const px = (p1 == null ? void 0 : p1.x) + offX;
+      const py = (p1 == null ? void 0 : p1.y) + offY;
+      const ll = map.unproject([px, py]);
+      const rotation = Math.atan2(uy, ux) * 180 / Math.PI;
+      const normalizedRotation = (rotation + 360) % 360;
+      const isUpsideDown = normalizedRotation > 90 && normalizedRotation < 270;
+      const displayRotation = isUpsideDown ? rotation + 180 : rotation;
+      return { position: { lng: ll == null ? void 0 : ll.lng, lat: ll == null ? void 0 : ll.lat }, rotation: displayRotation };
+    } catch (e) {
+      return null;
+    }
+  }, [mapApi == null ? void 0 : mapApi.current, (_a = data == null ? void 0 : data.source) == null ? void 0 : _a.lat, (_b = data == null ? void 0 : data.source) == null ? void 0 : _b.lng, (_c = data == null ? void 0 : data.destination) == null ? void 0 : _c.lat, (_d = data == null ? void 0 : data.destination) == null ? void 0 : _d.lng, (_e = data == null ? void 0 : data.sourcePortOffset) == null ? void 0 : _e.along, (_f = data == null ? void 0 : data.sourcePortOffset) == null ? void 0 : _f.perpendicular, viewportRevision, currentZoomLevel]);
+  const destinationLabel = useMemo(() => {
+    var _a2, _b2, _c2, _d2, _e2, _f2;
+    try {
+      const map = mapApi == null ? void 0 : mapApi.current;
+      if (!map || !(data == null ? void 0 : data.source) || !(data == null ? void 0 : data.destination)) return null;
+      const pSource = map.project([(_a2 = data == null ? void 0 : data.source) == null ? void 0 : _a2.lng, (_b2 = data == null ? void 0 : data.source) == null ? void 0 : _b2.lat]);
+      const pDestination = map.project([(_c2 = data == null ? void 0 : data.destination) == null ? void 0 : _c2.lng, (_d2 = data == null ? void 0 : data.destination) == null ? void 0 : _d2.lat]);
+      const dx = (pSource == null ? void 0 : pSource.x) - (pDestination == null ? void 0 : pDestination.x);
+      const dy = (pSource == null ? void 0 : pSource.y) - (pDestination == null ? void 0 : pDestination.y);
+      const length2 = Math.hypot(dx, dy) || 1;
+      const ux = dx / length2;
+      const uy = dy / length2;
+      const nx = -uy;
+      const ny = ux;
+      const markerHalfSize = ((_e2 = data == null ? void 0 : data.destination) == null ? void 0 : _e2.markerSize) ? ((_f2 = data == null ? void 0 : data.destination) == null ? void 0 : _f2.markerSize) / 2 : 12;
+      const totalLength = length2;
+      const defaultOffset = { along: 100, perpendicular: 0 };
+      const customOffset = (data == null ? void 0 : data.destinationPortOffset) || {};
+      const alongOffset = typeof (customOffset == null ? void 0 : customOffset.along) === "number" ? customOffset.along : defaultOffset.along;
+      const perpendicularOffset = typeof (customOffset == null ? void 0 : customOffset.perpendicular) === "number" ? customOffset.perpendicular : defaultOffset.perpendicular;
+      const distanceFromNode = markerHalfSize + alongOffset;
+      const alongDistance = Math.min(Math.max(distanceFromNode, markerHalfSize + 4), totalLength * 0.6);
+      const perpendicularDistance = perpendicularOffset;
+      const offX = nx * perpendicularDistance + ux * alongDistance;
+      const offY = ny * perpendicularDistance + uy * alongDistance;
+      const px = (pDestination == null ? void 0 : pDestination.x) + offX;
+      const py = (pDestination == null ? void 0 : pDestination.y) + offY;
+      const ll = map.unproject([px, py]);
+      const rotation = Math.atan2(uy, ux) * 180 / Math.PI;
+      const normalizedRotation = (rotation + 360) % 360;
+      const isUpsideDown = normalizedRotation > 90 && normalizedRotation < 270;
+      const displayRotation = isUpsideDown ? rotation + 180 : rotation;
+      return { position: { lng: ll == null ? void 0 : ll.lng, lat: ll == null ? void 0 : ll.lat }, rotation: displayRotation };
+    } catch (e) {
+      return null;
+    }
+  }, [mapApi == null ? void 0 : mapApi.current, (_g = data == null ? void 0 : data.source) == null ? void 0 : _g.lat, (_h = data == null ? void 0 : data.source) == null ? void 0 : _h.lng, (_i = data == null ? void 0 : data.destination) == null ? void 0 : _i.lat, (_j = data == null ? void 0 : data.destination) == null ? void 0 : _j.lng, (_k = data == null ? void 0 : data.destinationPortOffset) == null ? void 0 : _k.along, (_l = data == null ? void 0 : data.destinationPortOffset) == null ? void 0 : _l.perpendicular, viewportRevision, currentZoomLevel]);
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+    sourceLabel && /* @__PURE__ */ jsxRuntimeExports.jsx(
+      CustomMarker$1,
+      {
+        longitude: (_m = sourceLabel == null ? void 0 : sourceLabel.position) == null ? void 0 : _m.lng,
+        latitude: (_n = sourceLabel == null ? void 0 : sourceLabel.position) == null ? void 0 : _n.lat,
+        offset: [0, 0],
+        children: getEndpointText ? getEndpointText({
+          ...data,
+          rotation: sourceLabel == null ? void 0 : sourceLabel.rotation,
+          isVisible,
+          text: data == null ? void 0 : data.sourcePort,
+          isFocused
+        }) : /* @__PURE__ */ jsxRuntimeExports.jsx(
+          PortText,
+          {
+            text: data == null ? void 0 : data.sourcePort,
+            rotation: sourceLabel == null ? void 0 : sourceLabel.rotation,
+            isVisible,
+            data,
+            isFocused
+          }
+        )
+      }
+    ),
+    destinationLabel && (data == null ? void 0 : data.destinationPort) && /* @__PURE__ */ jsxRuntimeExports.jsx(
+      CustomMarker$1,
+      {
+        longitude: (_o = destinationLabel == null ? void 0 : destinationLabel.position) == null ? void 0 : _o.lng,
+        latitude: (_p = destinationLabel == null ? void 0 : destinationLabel.position) == null ? void 0 : _p.lat,
+        offset: [0, 0],
+        children: getEndpointText ? getEndpointText({
+          ...data,
+          rotation: destinationLabel == null ? void 0 : destinationLabel.rotation,
+          isVisible,
+          text: data == null ? void 0 : data.destinationPort,
+          isFocused
+        }) : /* @__PURE__ */ jsxRuntimeExports.jsx(
+          PortText,
+          {
+            text: data == null ? void 0 : data.destinationPort,
+            rotation: destinationLabel == null ? void 0 : destinationLabel.rotation,
+            isVisible,
+            data,
+            getEndpointText,
+            isFocused
+          }
+        )
+      }
+    )
+  ] });
+};
+const SourcesPorts$1 = memo(SourcesPorts);
 const mapStyles = [
   { "name": "street1", url: "https://api.maptiler.com/maps/streets/style.json?key=4s1cX8zNpChcrWFsQqbP" },
   { "name": "street2", url: "https://api.maptiler.com/maps/streets-v2/style.json?key=4s1cX8zNpChcrWFsQqbP" },
@@ -14081,6 +14355,7 @@ const NetworkMapComponent = forwardRef((props, ref) => {
     },
     onNodeClick = () => {
     },
+    getEndpointText,
     staticMapColor,
     maxZoomOutForLinkCount = 4,
     nodeSizeScaler = 1,
@@ -14089,10 +14364,13 @@ const NetworkMapComponent = forwardRef((props, ref) => {
     },
     onLinkMouseOver = () => {
     },
+    getOverLinkElementDelay = 500,
     onLinkContextMenu = () => {
     },
     getMenuTitle = () => {
     },
+    getOverLinkElement,
+    showEndpoints = true,
     enableNativeContextMenu = true,
     hideLinks = false,
     getCenterBox,
@@ -14125,121 +14403,12 @@ const NetworkMapComponent = forwardRef((props, ref) => {
   const [hoveredNode, setHoveredNode] = useState({});
   const [mapZooming, setMapZooming] = useState(false);
   const [startLinkCounterRerender, setStartLinkCounterRerender] = useState(false);
+  const [currentZoomLevel, setCurrentZoomLevel] = useState(6);
   useEffect(() => {
     if (debug) {
       console.log(props);
     }
   }, [debug]);
-  function getBearing(source, destination) {
-    const φ1 = source.lat * Math.PI / 180;
-    const φ2 = destination.lat * Math.PI / 180;
-    const Δλ = (destination.lng - source.lng) * Math.PI / 180;
-    const y = Math.sin(Δλ) * Math.cos(φ2);
-    const x = Math.cos(φ1) * Math.sin(φ2) - Math.sin(φ1) * Math.cos(φ2) * Math.cos(Δλ);
-    const θ = Math.atan2(y, x);
-    const bearing = (θ * 180 / Math.PI + 360) % 360;
-    return bearing;
-  }
-  function getFixedOffsetPosition(source, dest, offsetFromEdge = 0.5) {
-    var _a;
-    try {
-      if (debug) {
-        console.log("source", source);
-        console.log("dest", dest);
-      }
-      const dx = dest.lng - source.lng;
-      const dy = dest.lat - source.lat;
-      const dist2 = Math.sqrt(dx * dx + dy * dy);
-      const dirX = dx / dist2;
-      const dirY = dy / dist2;
-      const offsetLng = source.lng + dirX * offsetFromEdge;
-      const offsetLat = source.lat + dirY * offsetFromEdge;
-      const screenPos = mapApi.current.project([offsetLng, offsetLat]);
-      const mapBearing = (_a = mapApi == null ? void 0 : mapApi.current) == null ? void 0 : _a.getBearing();
-      const mapRotation = getBearing(source, dest) - mapBearing;
-      const adjustedAngle = mapRotation + 90;
-      return [screenPos.x, screenPos.y, adjustedAngle];
-    } catch (e) {
-      return [null, null, null];
-    }
-  }
-  useMemo(() => {
-    var _a, _b, _c;
-    if (!((_a = mapApi == null ? void 0 : mapApi.current) == null ? void 0 : _a.getZoom) || !showLinkCount) return [];
-    if (draggingMode) return [];
-    if (((_b = mapApi.current) == null ? void 0 : _b.getZoom()) < 6) return [];
-    return (_c = _conns == null ? void 0 : _conns.filter((item) => (item == null ? void 0 : item.layer) == 0)) == null ? void 0 : _c.map((conn) => {
-      var _a2, _b2, _c2;
-      const [offsetX, offsetY, _rotationAngle] = getFixedOffsetPosition(conn == null ? void 0 : conn.source, conn == null ? void 0 : conn.destination, 0.4);
-      const [offsetX2, offsetY2, _rotationAngle2] = getFixedOffsetPosition(conn == null ? void 0 : conn.destination, conn == null ? void 0 : conn.source, 0.4);
-      if (!offsetX || !offsetY || !_rotationAngle || !offsetX2 || !offsetY2 || !_rotationAngle2) {
-        return null;
-      }
-      const rotationAngle = _rotationAngle + 180;
-      const rotationAngle2 = _rotationAngle2 + 180;
-      conn._rotationAngle = _rotationAngle;
-      conn._rotationAngle2 = _rotationAngle2;
-      conn.rotationAngle = rotationAngle;
-      conn.rotationAngle2 = rotationAngle2;
-      if (((_a2 = onScreenLinksGroup == null ? void 0 : onScreenLinksGroup.countBoxes) == null ? void 0 : _a2.length) > 0) {
-        if (!((_b2 = onScreenLinksGroup == null ? void 0 : onScreenLinksGroup.countBoxes) == null ? void 0 : _b2.includes(conn == null ? void 0 : conn.connCountBoxId))) {
-          conn.visible = false;
-        } else {
-          conn.visible = true;
-        }
-      }
-      if (hoveredConnection && (hoveredConnection == null ? void 0 : hoveredConnection.connCountBoxId) == (conn == null ? void 0 : conn.connCountBoxId)) {
-        conn.visible = true;
-      } else {
-        conn.visible = false;
-      }
-      if (((_c2 = onScreenLinksGroup == null ? void 0 : onScreenLinksGroup.countBoxes) == null ? void 0 : _c2.length) == 0 && !hoveredConnection) {
-        conn.visible = true;
-      }
-      return /* @__PURE__ */ jsxRuntimeExports.jsxs(StyledTooltip, { title: "Number of connections", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(
-          "div",
-          {
-            id: "#" + (conn == null ? void 0 : conn.connCountBoxId),
-            style: {
-              top: offsetY,
-              left: offsetX,
-              "textShadow": "-1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black",
-              transform: `translate(-50%, -50%) rotate(${rotationAngle}deg)`,
-              display: !startLinkCounterRerender ? "none" : ""
-            },
-            className: cn(
-              "z-[30] drop-shadow-2xl select-none pointer-events-none absolute font-geist text-white text-[12px] font-bold flex items-center justify-center",
-              "w-fit",
-              (conn == null ? void 0 : conn.visible) == false ? "hidden" : ""
-            ),
-            children: conn == null ? void 0 : conn.name
-          },
-          "_s-" + (conn == null ? void 0 : conn.u_id)
-        ),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(
-          "div",
-          {
-            id: "#s-" + (conn == null ? void 0 : conn.connCountBoxId),
-            style: {
-              top: offsetY2,
-              left: offsetX2,
-              "textShadow": "-1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black",
-              transform: `translate(-50%, -50%) rotate(${rotationAngle2}deg)`,
-              display: !startLinkCounterRerender ? "none" : ""
-            },
-            className: cn(
-              "z-[30] drop-shadow-2xl select-none pointer-events-none absolute font-geist text-white text-[12px] font-bold flex items-center justify-center",
-              "w-fit",
-              (conn == null ? void 0 : conn.visible) == false ? "hidden" : ""
-            ),
-            children: conn == null ? void 0 : conn.name
-          },
-          "_s-s" + (conn == null ? void 0 : conn.u_id)
-        )
-      ] });
-    });
-  }, [_conns, maxZoomOutForLinkCount, draggingMode, hoveredConnection, onScreenLinksGroup == null ? void 0 : onScreenLinksGroup.countBoxes, startLinkCounterRerender, showLinkCount, mapApi == null ? void 0 : mapApi.current]);
   const _menuTitle = useMemo(() => {
     var _a;
     const t = getMenuTitle(selectedConn);
@@ -14334,6 +14503,8 @@ const NetworkMapComponent = forwardRef((props, ref) => {
         nodes: [],
         source: null,
         destination: null,
+        sourcePort: conn == null ? void 0 : conn.sourcePort,
+        destinationPort: conn == null ? void 0 : conn.destinationPort,
         data: conn,
         connCountBoxId: useRandomId(),
         timestamp: [0, 5, 10, 15],
@@ -14576,7 +14747,9 @@ const NetworkMapComponent = forwardRef((props, ref) => {
               maxZoom: 10
             },
             mapStyle: MapStyleUrl,
-            onZoom: () => {
+            onZoom: (e) => {
+              var _a;
+              setCurrentZoomLevel((_a = e == null ? void 0 : e.target) == null ? void 0 : _a.getZoom());
               setMapZooming((prev2) => !prev2);
             },
             onDragStart: () => setMapDragging(true),
@@ -14619,6 +14792,7 @@ const NetworkMapComponent = forwardRef((props, ref) => {
                     CreateMapObjectsScheme,
                     latitude: (_b = item == null ? void 0 : item.location) == null ? void 0 : _b.lat,
                     nodeIconMapper,
+                    hoveredConnection,
                     onScreenLinksGroup,
                     selectedNode,
                     onNodeSelected: _onNodeSelected,
@@ -14631,6 +14805,16 @@ const NetworkMapComponent = forwardRef((props, ref) => {
                   "_node_" + (item == null ? void 0 : item.elementId)
                 );
               }),
+              getOverLinkElement && /* @__PURE__ */ jsxRuntimeExports.jsx(
+                LinkOverContainer,
+                {
+                  conn: hoveredConnection,
+                  coordinates: currentCoordinates,
+                  mapApi,
+                  getOverLinkElement,
+                  getOverLinkElementDelay
+                }
+              ),
               showLinkCount && !mapDragging && (_conns == null ? void 0 : _conns.map((con, index) => {
                 return /* @__PURE__ */ jsxRuntimeExports.jsx(
                   LinkCountCircule$1,
@@ -14644,6 +14828,20 @@ const NetworkMapComponent = forwardRef((props, ref) => {
                   "_lnk_count_circule_" + index
                 );
               })),
+              showEndpoints && (_conns == null ? void 0 : _conns.map((con, index) => {
+                return /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  SourcesPorts$1,
+                  {
+                    data: con,
+                    mapApi,
+                    currentZoomLevel,
+                    hoveredConnection,
+                    mapDragging,
+                    getEndpointText
+                  },
+                  "_source_port_" + index
+                );
+              })),
               /* @__PURE__ */ jsxRuntimeExports.jsx(NavigationControl, {}),
               enableLngLatBox && /* @__PURE__ */ jsxRuntimeExports.jsx(LngLatBox, { coordinates: currentCoordinates })
             ]

package/dist/style.css

@@ -991,6 +991,9 @@ video {
 .h-9 {
   height: 2.25rem;
 }
+.h-\[100px\] {
+  height: 100px;
+}
 .h-\[14px\] {
   height: 14px;
 }
@@ -1157,6 +1160,9 @@ video {
 .w-9 {
   width: 2.25rem;
 }
+.w-\[100px\] {
+  width: 100px;
+}
 .w-\[14px\] {
   width: 14px;
 }
@@ -1353,6 +1359,11 @@ video {
   --tw-rotate: 90deg;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
+.\!scale-\[1\.5\] {
+  --tw-scale-x: 1.5 !important;
+  --tw-scale-y: 1.5 !important;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important;
+}
 .scale-75 {
   --tw-scale-x: .75;
   --tw-scale-y: .75;
@@ -2482,10 +2493,6 @@ video {
   --tw-blur: blur(8px);
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
-.drop-shadow-2xl {
-  --tw-drop-shadow: drop-shadow(0 25px 25px rgb(0 0 0 / 0.15));
-  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
-}
 .filter {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
@@ -2761,6 +2768,12 @@ body {
   z-index: auto;
 }
 
+.hover\:\!scale-\[1\.5\]:hover {
+  --tw-scale-x: 1.5 !important;
+  --tw-scale-y: 1.5 !important;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important;
+}
+
 .hover\:scale-105:hover {
   --tw-scale-x: 1.05;
   --tw-scale-y: 1.05;

package/dist/types/components/NetworkMap/LinkOverContainer.d.ts

@@ -0,0 +1,2 @@
+export declare const LinkOverContainer: (props: any) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=LinkOverContainer.d.ts.map

package/dist/types/components/NetworkMap/LinkOverContainer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LinkOverContainer.d.ts","sourceRoot":"","sources":["../../../../src/components/NetworkMap/LinkOverContainer.tsx"],"names":[],"mappings":"AAIA,eAAO,MAAM,iBAAiB,GAAI,UAAK,4CA8CtC,CAAA"}

package/dist/types/components/NetworkMap/Map.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Map.d.ts","sourceRoot":"","sources":["../../../../src/components/NetworkMap/Map.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAwG,MAAM,OAAO,CAAC;AAG7H,OAAO,kCAAkC,CAAC;AAY1C,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAK1C,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;IAWrB,CAAA;AAqoBD,QAAA,MAAM,UAAU,4GAA4B,CAAC;AAC7C,eAAe,UAAU,CAAC"}
+{"version":3,"file":"Map.d.ts","sourceRoot":"","sources":["../../../../src/components/NetworkMap/Map.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAwG,MAAM,OAAO,CAAC;AAG7H,OAAO,kCAAkC,CAAC;AAY1C,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAO1C,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;IAWrB,CAAA;AA4iBD,QAAA,MAAM,UAAU,4GAA4B,CAAC;AAC7C,eAAe,UAAU,CAAC"}

package/dist/types/components/NetworkMap/PinItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PinItem.d.ts","sourceRoot":"","sources":["../../../../src/components/NetworkMap/PinItem.tsx"],"names":[],"mappings":"AACA,OAAO,KAA4F,MAAM,OAAO,CAAA;;AA6IhH,wBAA4B"}
+{"version":3,"file":"PinItem.d.ts","sourceRoot":"","sources":["../../../../src/components/NetworkMap/PinItem.tsx"],"names":[],"mappings":"AACA,OAAO,KAA4F,MAAM,OAAO,CAAA;;AA6JhH,wBAA4B"}

package/dist/types/components/NetworkMap/SourcePort.d.ts

@@ -0,0 +1,3 @@
+declare const _default: import("react").MemoExoticComponent<(props: any) => import("react/jsx-runtime").JSX.Element>;
+export default _default;
+//# sourceMappingURL=SourcePort.d.ts.map

package/dist/types/components/NetworkMap/SourcePort.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SourcePort.d.ts","sourceRoot":"","sources":["../../../../src/components/NetworkMap/SourcePort.tsx"],"names":[],"mappings":";AAiQA,wBAAiC"}

package/dist/types/components/NetworkMap/types.d.ts

@@ -17,12 +17,16 @@ export type NetworkMapProps = {
     staticMapColor: string;
     isolateNonSelectedLinksOnNodeClick: boolean;
     showLinkCount: boolean;
+    showEndpoints: boolean;
+    getOverLinkElementDelay: number;
     tid: string | number;
     onConnClick: (conn: object) => void;
     onNodeClick: (node: object) => void;
     getCenterBox: (conn: object) => void;
     onNodeMouseOver: (node: object) => void;
     getMenuTitle: (connection: object) => void;
+    getOverLinkElement: (connection: object) => void;
+    getEndpointText: (connection: object) => void;
     onLinkContextMenu: (info: {
         data: object;
         event: React.MouseEvent;

package/dist/types/components/NetworkMap/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/NetworkMap/types.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAEjD,MAAM,MAAM,eAAe,GAAG;IAC1B,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,WAAW,EAAE,MAAM,EAAE,CAAC;IACtB,uBAAuB,EAAE,MAAM,CAAC;IAChC,mBAAmB,EAAE,MAAM,CAAC;IAC5B,SAAS,EAAE,MAAM,CAAC;IAClB,eAAe,EAAE,OAAO,CAAC;IACzB,oBAAoB,EAAE,OAAO,CAAC;IAC9B,YAAY,EAAG,OAAO,CAAC;IACvB,sBAAsB,EAAG,MAAM,CAAC;IAChC,cAAc,EAAG,MAAM,CAAC;IACxB,yBAAyB,EAAE,MAAM,CAAC;IAClC,aAAa,EAAE,OAAO,CAAC;IACvB,KAAK,EAAE,OAAO,CAAC;IACf,cAAc,EAAG,MAAM,CAAC;IACxB,kCAAkC,EAAE,OAAO,CAAC;IAC5C,aAAa,EAAE,OAAO,CAAC;IACvB,GAAG,EAAG,MAAM,GAAG,MAAM,CAAG;IACxB,WAAW,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,WAAW,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,eAAe,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,YAAY,EAAE,CAAE,UAAU,EAAG,MAAM,KAAM,IAAI,CAAE;IAC/C,iBAAiB,EAAE,CAAC,IAAI,EAAE;QACtB,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC;QACxB,MAAM,EAAE,QAAQ,CAAE;QAClB,IAAI,EAAE,MAAM,CAAC;KAChB,KAAK,IAAI,CAAC;IACX,uBAAuB,EAAE,OAAO,CAAC;IACjC,eAAe,EAAE,OAAO,CAAC;IACzB,QAAQ,EAAG;QACP,GAAG,EAAG,MAAM,CAAC;QACb,KAAK,EAAG,MAAM,CAAC;QACf,IAAI,EAAG,MAAM,CAAA;KAChB,CAAC;IACF,SAAS,EAAG,OAAO,CAAC;IACpB,QAAQ,EAAE,QAAQ,CAAC;IACnB,SAAS,EAAE;QACP,KAAK,EAAE,MAAM,CAAC;QACd,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE;YACZ,IAAI,EAAE,MAAM,CAAC;YACb,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC;YACxB,MAAM,EAAE,QAAQ,CAAE;YAClB,IAAI,EAAE,MAAM,CAAC;SAChB,KAAK,IAAI,CAAC;KACd,EAAE,CAAC;IACJ,aAAa,EAAE;QACX,KAAK,EAAE,MAAM,CAAC;QACd,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE;YACZ,IAAI,EAAE,MAAM,CAAC;YACb,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC;YACxB,MAAM,EAAE,QAAQ,CAAE;YAClB,IAAI,EAAE,MAAM,CAAC;SAChB,KAAK,IAAI,CAAC;KACd,EAAE,CAAC;IACJ,cAAc,CAAC,EAAG,CAAC,MAAM,KAAA,KAAM,KAAK,CAAC,SAAS,GAAG,IAAI,CAAE;CAC1D,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/NetworkMap/types.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAEjD,MAAM,MAAM,eAAe,GAAG;IAC1B,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,WAAW,EAAE,MAAM,EAAE,CAAC;IACtB,uBAAuB,EAAE,MAAM,CAAC;IAChC,mBAAmB,EAAE,MAAM,CAAC;IAC5B,SAAS,EAAE,MAAM,CAAC;IAClB,eAAe,EAAE,OAAO,CAAC;IACzB,oBAAoB,EAAE,OAAO,CAAC;IAC9B,YAAY,EAAG,OAAO,CAAC;IACvB,sBAAsB,EAAG,MAAM,CAAC;IAChC,cAAc,EAAG,MAAM,CAAC;IACxB,yBAAyB,EAAE,MAAM,CAAC;IAClC,aAAa,EAAE,OAAO,CAAC;IACvB,KAAK,EAAE,OAAO,CAAC;IACf,cAAc,EAAG,MAAM,CAAC;IACxB,kCAAkC,EAAE,OAAO,CAAC;IAC5C,aAAa,EAAE,OAAO,CAAC;IACvB,aAAa,EAAG,OAAO,CAAC;IACxB,uBAAuB,EAAE,MAAM,CAAC;IAChC,GAAG,EAAG,MAAM,GAAG,MAAM,CAAG;IACxB,WAAW,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,WAAW,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,eAAe,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,YAAY,EAAE,CAAE,UAAU,EAAG,MAAM,KAAM,IAAI,CAAE;IAC/C,kBAAkB,EAAE,CAAE,UAAU,EAAG,MAAM,KAAM,IAAI,CAAE;IACrD,eAAe,EAAE,CAAE,UAAU,EAAG,MAAM,KAAM,IAAI,CAAE;IAClD,iBAAiB,EAAE,CAAC,IAAI,EAAE;QACtB,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC;QACxB,MAAM,EAAE,QAAQ,CAAE;QAClB,IAAI,EAAE,MAAM,CAAC;KAChB,KAAK,IAAI,CAAC;IACX,uBAAuB,EAAE,OAAO,CAAC;IACjC,eAAe,EAAE,OAAO,CAAC;IACzB,QAAQ,EAAG;QACP,GAAG,EAAG,MAAM,CAAC;QACb,KAAK,EAAG,MAAM,CAAC;QACf,IAAI,EAAG,MAAM,CAAA;KAChB,CAAC;IACF,SAAS,EAAG,OAAO,CAAC;IACpB,QAAQ,EAAE,QAAQ,CAAC;IACnB,SAAS,EAAE;QACP,KAAK,EAAE,MAAM,CAAC;QACd,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE;YACZ,IAAI,EAAE,MAAM,CAAC;YACb,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC;YACxB,MAAM,EAAE,QAAQ,CAAE;YAClB,IAAI,EAAE,MAAM,CAAC;SAChB,KAAK,IAAI,CAAC;KACd,EAAE,CAAC;IACJ,aAAa,EAAE;QACX,KAAK,EAAE,MAAM,CAAC;QACd,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE;YACZ,IAAI,EAAE,MAAM,CAAC;YACb,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC;YACxB,MAAM,EAAE,QAAQ,CAAE;YAClB,IAAI,EAAE,MAAM,CAAC;SAChB,KAAK,IAAI,CAAC;KACd,EAAE,CAAC;IACJ,cAAc,CAAC,EAAG,CAAC,MAAM,KAAA,KAAM,KAAK,CAAC,SAAS,GAAG,IAAI,CAAE;CAC1D,CAAC"}

package/dist/types/stories/Map/map.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"map.stories.d.ts","sourceRoot":"","sources":["../../../../src/stories/Map/map.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAqC,MAAM,OAAO,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAW1D,wBAsCC;AA0ID,eAAO,MAAM,OAAO,KAAoB,CAAC;AAgEzC,eAAO,MAAM,cAAc,KAAoB,CAAC;AAYhD,eAAO,MAAM,mBAAmB,KAAoB,CAAC;AAOrD,eAAO,MAAM,eAAe,KAAoB,CAAC;AAIjD,eAAO,MAAM,WAAW,KAAoB,CAAC;AAK7C,eAAO,MAAM,UAAU,KAAoB,CAAC"}
+{"version":3,"file":"map.stories.d.ts","sourceRoot":"","sources":["../../../../src/stories/Map/map.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAqC,MAAM,OAAO,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAY1D,wBAsCC;AA0ID,eAAO,MAAM,OAAO,KAAoB,CAAC;AA4EzC,eAAO,MAAM,cAAc,KAAoB,CAAC;AAYhD,eAAO,MAAM,mBAAmB,KAAoB,CAAC;AAOrD,eAAO,MAAM,eAAe,KAAoB,CAAC;AAIjD,eAAO,MAAM,WAAW,KAAoB,CAAC;AAK7C,eAAO,MAAM,UAAU,KAAoB,CAAC"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@abdellatifui/react",
   "private": false,
-  "version": "3.1.79",
+  "version": "3.1.80",
   "type": "module",
   "types": "dist/nextgen.d.ts",
   "files": [