@abdellatifui/react 3.1.89 → 3.1.90

package/dist/nextgen.js

@@ -12441,17 +12441,14 @@ const Sidebar = forwardRef((props, ref) => {
     }
   } = props;
   const content = useMemo(() => {
-    if (children) {
-      return children;
-    }
-    return null;
+    return children ? children : null;
   }, [children]);
   const handleOpen = useCallback(() => {
     var _a;
     (_a = modelRef.current) == null ? void 0 : _a.open();
-    window.setTimeout(() => {
+    setTimeout(() => {
       setIsOpen(true);
-    }, 200);
+    }, 50);
   }, []);
   const handleClose = useCallback(() => {
     var _a;
@@ -14428,7 +14425,8 @@ const PortText = (props) => {
     rotation,
     isVisible,
     data,
-    isFocused
+    isFocused,
+    fontSize
   } = props;
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     "div",
@@ -14445,21 +14443,24 @@ const PortText = (props) => {
         alignItems: "center",
         justifyContent: "center",
         backgroundColor: data == null ? void 0 : data.linkColorHex,
-        opacity: isVisible ? 1 : 0
+        opacity: isVisible ? 1 : 0,
+        fontSize: fontSize + "rem"
       },
       children: text
     }
   );
 };
 const SourcesPorts = (props) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p;
+  var _a, _b, _c, _d;
   const {
     data,
     mapApi,
     currentZoomLevel,
     hoveredConnection,
     mapDragging,
-    getEndpointText
+    getEndpointText,
+    mapRotating,
+    fontSize
   } = props;
   const [midpoint, setMidpoint] = useState(null);
   const [isVisible, setIsVisible] = useState(true);
@@ -14480,7 +14481,7 @@ const SourcesPorts = (props) => {
     } else if (currentZoomLevel > 6) {
       setIsVisible(true);
     }
-  }, [currentZoomLevel]);
+  }, [currentZoomLevel, mapDragging]);
   useEffect(() => {
     if (!hoveredConnection) {
       setIsVisible(true);
@@ -14495,24 +14496,8 @@ const SourcesPorts = (props) => {
       setIsFocused(false);
     }
   }, [hoveredConnection == null ? void 0 : hoveredConnection.u_id, 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;
+    var _a2, _b2, _c2, _d2, _e, _f;
     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;
@@ -14525,7 +14510,7 @@ const SourcesPorts = (props) => {
       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 markerHalfSize = ((_e = data == null ? void 0 : data.source) == null ? void 0 : _e.markerSize) ? ((_f = data == null ? void 0 : data.source) == null ? void 0 : _f.markerSize) / 2 : 12;
       const totalLength = length2;
       const defaultOffset = { along: 100, perpendicular: 0 };
       const customOffset = (data == null ? void 0 : data.sourcePortOffset) || {};
@@ -14547,9 +14532,9 @@ const SourcesPorts = (props) => {
     } 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]);
+  }, [mapApi == null ? void 0 : mapApi.current, mapRotating, currentZoomLevel]);
   const destinationLabel = useMemo(() => {
-    var _a2, _b2, _c2, _d2, _e2, _f2;
+    var _a2, _b2, _c2, _d2, _e, _f;
     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;
@@ -14562,7 +14547,7 @@ const SourcesPorts = (props) => {
       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 markerHalfSize = ((_e = data == null ? void 0 : data.destination) == null ? void 0 : _e.markerSize) ? ((_f = data == null ? void 0 : data.destination) == null ? void 0 : _f.markerSize) / 2 : 12;
       const totalLength = length2;
       const defaultOffset = { along: 100, perpendicular: 0 };
       const customOffset = (data == null ? void 0 : data.destinationPortOffset) || {};
@@ -14584,20 +14569,21 @@ const SourcesPorts = (props) => {
     } 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]);
+  }, [mapApi == null ? void 0 : mapApi.current, mapRotating, 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,
+        longitude: (_a = sourceLabel == null ? void 0 : sourceLabel.position) == null ? void 0 : _a.lng,
+        latitude: (_b = sourceLabel == null ? void 0 : sourceLabel.position) == null ? void 0 : _b.lat,
         offset: [0, 0],
         children: getEndpointText ? getEndpointText({
           ...data,
           rotation: sourceLabel == null ? void 0 : sourceLabel.rotation,
           isVisible,
           text: data == null ? void 0 : data.sourcePort,
-          isFocused
+          isFocused,
+          fontSize
         }) : /* @__PURE__ */ jsxRuntimeExports.jsx(
           PortText,
           {
@@ -14605,7 +14591,8 @@ const SourcesPorts = (props) => {
             rotation: sourceLabel == null ? void 0 : sourceLabel.rotation,
             isVisible,
             data,
-            isFocused
+            isFocused,
+            fontSize
           }
         )
       }
@@ -14613,15 +14600,16 @@ const SourcesPorts = (props) => {
     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,
+        longitude: (_c = destinationLabel == null ? void 0 : destinationLabel.position) == null ? void 0 : _c.lng,
+        latitude: (_d = destinationLabel == null ? void 0 : destinationLabel.position) == null ? void 0 : _d.lat,
         offset: [0, 0],
         children: getEndpointText ? getEndpointText({
           ...data,
           rotation: destinationLabel == null ? void 0 : destinationLabel.rotation,
           isVisible,
           text: data == null ? void 0 : data.destinationPort,
-          isFocused
+          isFocused,
+          fontSize
         }) : /* @__PURE__ */ jsxRuntimeExports.jsx(
           PortText,
           {
@@ -14630,7 +14618,8 @@ const SourcesPorts = (props) => {
             isVisible,
             data,
             getEndpointText,
-            isFocused
+            isFocused,
+            fontSize
           }
         )
       }
@@ -14638,6 +14627,7 @@ const SourcesPorts = (props) => {
   ] });
 };
 const SourcesPorts$1 = memo(SourcesPorts);
+const baseFont = 0.75;
 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" },
@@ -14658,14 +14648,20 @@ function DeckGLOverlay(props) {
 const NetworkMapComponent = forwardRef((props, ref) => {
   const {
     nodes = [],
+    initialZoomLevel = 6,
     connections = [],
     linkHighlightedColorHex = "#ffffff",
     defaultLinkColorHex = "#1d6591",
     defaultAnimationLinkColor = "#f0f3f5",
     hideLinksOnDrag = false,
+    MapLogo,
+    boundMargin = 0.5,
+    MapLogoClassName,
+    MapLogoStyle,
     linkAnimation = true,
     onConnClick = () => {
     },
+    onConnection,
     onNodeClick = () => {
     },
     getEndpointText,
@@ -14701,6 +14697,7 @@ const NetworkMapComponent = forwardRef((props, ref) => {
     className = ""
   } = props;
   const networkMapRef = useRef();
+  const mapId = useGeneratedId(4, true, false);
   const mapApi = useRef({});
   useRef();
   const [currentCoordinates, setCurrentCoordinates] = useState([]);
@@ -14716,10 +14713,11 @@ const NetworkMapComponent = forwardRef((props, ref) => {
   const [hoveredNode, setHoveredNode] = useState({});
   const [mapZooming, setMapZooming] = useState(false);
   const [startLinkCounterRerender, setStartLinkCounterRerender] = useState(false);
-  const [currentZoomLevel, setCurrentZoomLevel] = useState(6);
+  const [currentZoomLevel, setCurrentZoomLevel] = useState(initialZoomLevel);
   const [mapRotating, setMapRotating] = useState();
   const [inViewNodes, setInViewNodes] = useState([]);
   const [inViewConnections, setInViewConnections] = useState([]);
+  const [hasInternet, setHasInternet] = useState(true);
   useEffect(() => {
     if (debug) {
       console.log(props);
@@ -14788,6 +14786,11 @@ const NetworkMapComponent = forwardRef((props, ref) => {
       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]);
+  const sourcePortsFontSizePercentage = useMemo(() => {
+    const scale = currentZoomLevel / initialZoomLevel;
+    const fontSize = baseFont * scale - 0.3;
+    return fontSize;
+  }, [currentZoomLevel]);
   function _onLinkSelected(obj) {
     setSelectedConn(obj);
     onConnClick(obj);
@@ -14933,6 +14936,7 @@ const NetworkMapComponent = forwardRef((props, ref) => {
     }));
   }
   useImperativeHandle(ref, () => ({
+    id: mapId,
     getCanvas: () => {
       var _a, _b;
       return (_b = (_a = mapApi.current) == null ? void 0 : _a.getCanvas) == null ? void 0 : _b.call(_a);
@@ -14948,6 +14952,22 @@ const NetworkMapComponent = forwardRef((props, ref) => {
     saveOptions,
     loadOptions,
     FlyToNodeApi,
+    setCurrentZoomLevel,
+    setOptions,
+    setMapDragging,
+    hasInternet,
+    setMapZooming,
+    setMapRotating,
+    setStartLinkCounterRerender,
+    setInViewNodes,
+    setInViewConnections,
+    setHoveredNode,
+    setHoveredConnection,
+    setContextMenuEvent,
+    setNodeContextMenuEvent,
+    setSelectedConn,
+    setSelectedNode,
+    setOnScreenLinksGroup,
     ...mapApi.current
   }));
   const _menuItems = useMemo(() => {
@@ -14983,8 +15003,9 @@ const NetworkMapComponent = forwardRef((props, ref) => {
     setStartLinkCounterRerender(true);
     const bounds = (_a = mapApi.current) == null ? void 0 : _a.getBounds();
     console.log("Bounds : ", bounds);
+    const MARGIN = boundMargin;
     const filtered = _nodes.filter(
-      (n) => n.location.lng >= bounds.getWest() && n.location.lng <= bounds.getEast() && n.location.lat >= bounds.getSouth() && n.location.lat <= bounds.getNorth()
+      (n) => n.location.lng >= bounds.getWest() - MARGIN && n.location.lng <= bounds.getEast() + MARGIN && n.location.lat >= bounds.getSouth() - MARGIN && n.location.lat <= bounds.getNorth() + MARGIN
     );
     console.log("In View Nodes : ", filtered);
     const cs = [...new Set(filtered.flatMap((node2) => node2 == null ? void 0 : node2.connections))];
@@ -15012,175 +15033,209 @@ const NetworkMapComponent = forwardRef((props, ref) => {
       onLinkMouseOver({ event: e, data: e == null ? void 0 : e.object, type: "connection", id: (_c = e == null ? void 0 : e.object) == null ? void 0 : _c.id, mapApi });
     }
   };
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: cn(
-    "w-full h-full relative rounded overflow-hidden",
-    className
-  ), children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
     "div",
     {
-      onContextMenu: (e) => {
-        if (!(selectedConn == null ? void 0 : selectedConn.x)) {
-          return;
-        }
-        setContextMenuEvent(e);
-        onLinkContextMenu({
-          data: selectedConn,
-          event: e,
-          mapApi,
-          type: "connection"
-        });
-      },
-      className: "network-map-canvas w-full h-full",
-      ref: networkMapRef,
-      children: [
-        enableNativeContextMenu && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(
-            ContextMenu,
-            {
-              event: contextMenuEvent,
-              items: {
-                title: _menuTitle,
-                items: _menuItems
-              }
-            }
-          ),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(
-            ContextMenu,
-            {
-              event: NodeContextMenuEvent,
-              items: {
-                title: _nodeMenuTitle,
-                items: _nodeMenuItems
-              }
+      id: "#" + mapId,
+      className: cn(
+        "w-full h-full relative rounded overflow-hidden abdellatifuimap",
+        className
+      ),
+      children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+        "div",
+        {
+          onContextMenu: (e) => {
+            if (!(selectedConn == null ? void 0 : selectedConn.x)) {
+              return;
             }
-          )
-        ] }),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs(
-          Map$1,
-          {
-            ref: mapApi,
-            onMoveStart: () => setStartLinkCounterRerender(false),
-            style: {
-              width: "100%",
-              height: "100%",
-              position: "relative"
-            },
-            initialViewState: {
-              longitude: 31.233334,
-              latitude: 30.033333,
-              zoom: 9,
-              bearing: 0,
-              minZoom: 3,
-              maxZoom: 10
-            },
-            mapStyle: MapStyleUrl,
-            onZoom: (e) => {
-              var _a;
-              setCurrentZoomLevel((_a = e == null ? void 0 : e.target) == null ? void 0 : _a.getZoom());
-              setMapZooming((prev2) => !prev2);
-            },
-            onRotate: (e) => {
-              var _a;
-              setMapRotating((_a = e == null ? void 0 : e.viewState) == null ? void 0 : _a.bearing);
-            },
-            onDragStart: () => setMapDragging(true),
-            onDragEnd: () => setMapDragging(false),
-            onMoveEnd: handleMoveEnd,
-            ...mapProps,
-            children: [
+            setContextMenuEvent(e);
+            onLinkContextMenu({
+              data: selectedConn,
+              event: e,
+              mapApi,
+              type: "connection"
+            });
+          },
+          className: "network-map-canvas w-full h-full",
+          ref: networkMapRef,
+          children: [
+            enableNativeContextMenu && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
               /* @__PURE__ */ jsxRuntimeExports.jsx(
-                DeckGLOverlay,
+                ContextMenu,
                 {
-                  layers: [...paths],
-                  onHover: handleHover,
-                  onClick: (e) => {
-                    if (!(e == null ? void 0 : e.layer)) {
-                      setSelectedConn((prev2) => {
-                        var _a, _b;
-                        (_b = (_a = prev2 == null ? void 0 : prev2.object) == null ? void 0 : _a.nodes) == null ? void 0 : _b.map((item) => {
-                          var _a2, _b2;
-                          (_b2 = (_a2 = item == null ? void 0 : item.ref) == null ? void 0 : _a2.current) == null ? void 0 : _b2.changeMarkerOutline(false);
-                        });
-                        return {};
-                      });
-                      setOnScreenLinksGroup({ connections: [], nodes: [], countBoxes: [] });
-                    }
-                  },
-                  style: { zIndex: 0 }
+                  event: contextMenuEvent,
+                  items: {
+                    title: _menuTitle,
+                    items: _menuItems
+                  }
                 }
               ),
-              inViewNodes == null ? void 0 : inViewNodes.map((item) => {
-                var _a, _b;
-                return /* @__PURE__ */ jsxRuntimeExports.jsx(
-                  PinItem$1,
-                  {
-                    name: item == null ? void 0 : item.name,
-                    item,
-                    nodeSizeScaler,
-                    longitude: (_a = item == null ? void 0 : item.location) == null ? void 0 : _a.lng,
-                    options: options2,
-                    CreateMapObjectsScheme,
-                    latitude: (_b = item == null ? void 0 : item.location) == null ? void 0 : _b.lat,
-                    nodeIconMapper,
-                    hoveredConnection,
-                    onScreenLinksGroup,
-                    selectedNode,
-                    onNodeSelected: _onNodeSelected,
-                    onNodeMouseOver: _onNodeMouseOver,
-                    mapApi,
-                    nodes: _nodes,
-                    connections: _conns,
-                    setNodeContextMenuEvent
-                  },
-                  "_node_" + (item == null ? void 0 : item.elementId)
-                );
-              }),
-              getOverLinkElement && /* @__PURE__ */ jsxRuntimeExports.jsx(
-                LinkOverContainer,
+              /* @__PURE__ */ jsxRuntimeExports.jsx(
+                ContextMenu,
                 {
-                  conn: hoveredConnection,
-                  coordinates: currentCoordinates,
-                  mapApi,
-                  getOverLinkElement,
-                  getOverLinkElementDelay
+                  event: NodeContextMenuEvent,
+                  items: {
+                    title: _nodeMenuTitle,
+                    items: _nodeMenuItems
+                  }
                 }
-              ),
-              showLinkCount && !mapDragging && (inViewConnections == null ? void 0 : inViewConnections.map((con, index) => {
-                return /* @__PURE__ */ jsxRuntimeExports.jsx(
-                  LinkCountCircule$1,
-                  {
-                    data: con,
-                    mapApi,
-                    mapDragging,
-                    getCenterBox,
-                    hoveredConnection
-                  },
-                  "_lnk_count_circule_" + (con == null ? void 0 : con.u_id)
-                );
-              })),
-              showEndpoints && (inViewConnections == null ? void 0 : inViewConnections.map((con, index) => {
-                return /* @__PURE__ */ jsxRuntimeExports.jsx(
-                  SourcesPorts$1,
-                  {
-                    data: con,
-                    mapApi,
-                    currentZoomLevel,
-                    hoveredConnection,
-                    mapDragging,
-                    getEndpointText,
-                    mapRotating
-                  },
-                  "_source_port_" + (con == null ? void 0 : con.u_id)
-                );
-              })),
-              /* @__PURE__ */ jsxRuntimeExports.jsx(NavigationControl, {}),
-              enableLngLatBox && /* @__PURE__ */ jsxRuntimeExports.jsx(LngLatBox, { coordinates: currentCoordinates })
-            ]
-          }
-        )
-      ]
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs(
+              Map$1,
+              {
+                ref: mapApi,
+                onMoveStart: () => setStartLinkCounterRerender(false),
+                style: {
+                  width: "100%",
+                  height: "100%",
+                  position: "relative"
+                },
+                initialViewState: {
+                  longitude: 31.233334,
+                  latitude: 30.033333,
+                  zoom: initialZoomLevel,
+                  bearing: 0,
+                  minZoom: 3,
+                  maxZoom: 10
+                },
+                mapStyle: MapStyleUrl,
+                onZoom: (e) => {
+                  var _a;
+                  setCurrentZoomLevel((_a = e == null ? void 0 : e.target) == null ? void 0 : _a.getZoom());
+                  setMapZooming((prev2) => !prev2);
+                },
+                onRotate: (e) => {
+                  var _a;
+                  setMapRotating((_a = e == null ? void 0 : e.viewState) == null ? void 0 : _a.bearing);
+                },
+                onDragStart: () => setMapDragging(true),
+                onDragEnd: () => setMapDragging(false),
+                onMoveEnd: handleMoveEnd,
+                onSourceData: (e) => {
+                  if (onConnection) {
+                    onConnection({ mapApi: mapApi.current, event: e, hasInternet: true });
+                  }
+                },
+                onError: (e) => {
+                  var _a;
+                  const x = ((_a = e.error) == null ? void 0 : _a.status) == 0;
+                  if (onConnection) {
+                    onConnection({ mapApi: mapApi.current, event: e, hasInternet: x == 0 ? false : true });
+                  }
+                },
+                ...mapProps,
+                children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(
+                    DeckGLOverlay,
+                    {
+                      layers: [...paths],
+                      onHover: handleHover,
+                      onClick: (e) => {
+                        if (!(e == null ? void 0 : e.layer)) {
+                          setSelectedConn((prev2) => {
+                            var _a, _b;
+                            (_b = (_a = prev2 == null ? void 0 : prev2.object) == null ? void 0 : _a.nodes) == null ? void 0 : _b.map((item) => {
+                              var _a2, _b2;
+                              (_b2 = (_a2 = item == null ? void 0 : item.ref) == null ? void 0 : _a2.current) == null ? void 0 : _b2.changeMarkerOutline(false);
+                            });
+                            return {};
+                          });
+                          setOnScreenLinksGroup({ connections: [], nodes: [], countBoxes: [] });
+                        }
+                      },
+                      style: { zIndex: 0 }
+                    }
+                  ),
+                  inViewNodes == null ? void 0 : inViewNodes.map((item) => {
+                    var _a, _b;
+                    return /* @__PURE__ */ jsxRuntimeExports.jsx(
+                      PinItem$1,
+                      {
+                        name: item == null ? void 0 : item.name,
+                        item,
+                        nodeSizeScaler,
+                        longitude: (_a = item == null ? void 0 : item.location) == null ? void 0 : _a.lng,
+                        options: options2,
+                        CreateMapObjectsScheme,
+                        latitude: (_b = item == null ? void 0 : item.location) == null ? void 0 : _b.lat,
+                        nodeIconMapper,
+                        hoveredConnection,
+                        onScreenLinksGroup,
+                        selectedNode,
+                        onNodeSelected: _onNodeSelected,
+                        onNodeMouseOver: _onNodeMouseOver,
+                        mapApi,
+                        nodes: _nodes,
+                        connections: _conns,
+                        setNodeContextMenuEvent
+                      },
+                      "_node_" + (item == null ? void 0 : item.elementId)
+                    );
+                  }),
+                  getOverLinkElement && /* @__PURE__ */ jsxRuntimeExports.jsx(
+                    LinkOverContainer,
+                    {
+                      conn: hoveredConnection,
+                      coordinates: currentCoordinates,
+                      mapApi,
+                      getOverLinkElement,
+                      getOverLinkElementDelay
+                    }
+                  ),
+                  showLinkCount && !mapDragging && (inViewConnections == null ? void 0 : inViewConnections.map((con, index) => {
+                    return /* @__PURE__ */ jsxRuntimeExports.jsx(
+                      LinkCountCircule$1,
+                      {
+                        data: con,
+                        mapApi,
+                        mapDragging,
+                        getCenterBox,
+                        hoveredConnection
+                      },
+                      "_lnk_count_circule_" + (con == null ? void 0 : con.u_id)
+                    );
+                  })),
+                  showEndpoints && (inViewConnections == null ? void 0 : inViewConnections.map((con, index) => {
+                    return /* @__PURE__ */ jsxRuntimeExports.jsx(
+                      SourcesPorts$1,
+                      {
+                        fontSize: sourcePortsFontSizePercentage,
+                        data: con,
+                        mapApi,
+                        currentZoomLevel,
+                        hoveredConnection,
+                        mapDragging,
+                        getEndpointText,
+                        mapRotating
+                      },
+                      "_source_port_" + (con == null ? void 0 : con.u_id)
+                    );
+                  })),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(
+                    NavigationControl,
+                    {}
+                  ),
+                  MapLogo && /* @__PURE__ */ jsxRuntimeExports.jsx(
+                    "div",
+                    {
+                      className: cn(
+                        "absolute border bg-white p-2 w-fit h-fit z-50 bottom-2 left-2 cursor-default hover:scale-105 transition-all duration-300 select-none",
+                        MapLogoClassName
+                      ),
+                      style: MapLogoStyle || {},
+                      children: MapLogo
+                    }
+                  ),
+                  enableLngLatBox && /* @__PURE__ */ jsxRuntimeExports.jsx(LngLatBox, { coordinates: currentCoordinates })
+                ]
+              }
+            )
+          ]
+        }
+      )
     }
-  ) });
+  );
 });
 const NetworkMap = memo(NetworkMapComponent);
 const Accordion = AccordionPrimitive.Root;