@abdellatifui/react 3.1.84 → 3.1.86

package/dist/nextgen.js

@@ -14155,6 +14155,7 @@ const SourcesPorts = (props) => {
   const [viewportRevision, setViewportRevision] = useState(0);
   const [isFocused, setIsFocused] = useState(false);
   useEffect(() => {
+    console.log("ENDPOINT TEXT");
     if (mapDragging) {
       setIsVisible(false);
       return;
@@ -14389,6 +14390,7 @@ const NetworkMapComponent = forwardRef((props, ref) => {
   } = props;
   const networkMapRef = useRef();
   const mapApi = useRef({});
+  useRef();
   const [currentCoordinates, setCurrentCoordinates] = useState([]);
   const [_conns, setConns] = useState([]);
   const [_nodes, setNodes] = useState(nodes);
@@ -14403,6 +14405,9 @@ const NetworkMapComponent = forwardRef((props, ref) => {
   const [mapZooming, setMapZooming] = useState(false);
   const [startLinkCounterRerender, setStartLinkCounterRerender] = useState(false);
   const [currentZoomLevel, setCurrentZoomLevel] = useState(6);
+  const [mapRotating, setMapRotating] = useState();
+  const [inViewNodes, setInViewNodes] = useState([]);
+  const [inViewConnections, setInViewConnections] = useState([]);
   useEffect(() => {
     if (debug) {
       console.log(props);
@@ -14632,7 +14637,7 @@ const NetworkMapComponent = forwardRef((props, ref) => {
     loadOptions,
     FlyToNodeApi,
     ...mapApi.current
-  }), [mapApi.current]);
+  }));
   const _menuItems = useMemo(() => {
     return (menuItems == null ? void 0 : menuItems.map((item) => ({
       ...item,
@@ -14646,7 +14651,7 @@ const NetworkMapComponent = forwardRef((props, ref) => {
         });
       }
     }))) || [];
-  }, [menuItems, contextMenuEvent, selectedConn]);
+  }, [menuItems == null ? void 0 : menuItems.length, contextMenuEvent, selectedConn]);
   const _nodeMenuItems = useMemo(() => {
     return (nodeMenuItems == null ? void 0 : nodeMenuItems.map((item) => ({
       ...item,
@@ -14660,9 +14665,20 @@ const NetworkMapComponent = forwardRef((props, ref) => {
         });
       }
     }))) || [];
-  }, [nodeMenuItems, NodeContextMenuEvent, selectedNode]);
-  const handleMoveEnd = () => {
+  }, [nodeMenuItems == null ? void 0 : nodeMenuItems.length, NodeContextMenuEvent, selectedNode]);
+  const handleMoveEnd = (e) => {
+    var _a;
     setStartLinkCounterRerender(true);
+    const bounds = (_a = mapApi.current) == null ? void 0 : _a.getBounds();
+    console.log("Bounds : ", bounds);
+    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()
+    );
+    console.log("In View Nodes : ", filtered);
+    const cs = [...new Set(filtered.flatMap((node2) => node2 == null ? void 0 : node2.connections))];
+    console.log("Connections : ", cs);
+    setInViewNodes(filtered);
+    setInViewConnections(cs);
   };
   const handleHover = (e) => {
     var _a, _b, _c;
@@ -14738,9 +14754,9 @@ const NetworkMapComponent = forwardRef((props, ref) => {
               position: "relative"
             },
             initialViewState: {
-              longitude: 26.8206,
-              latitude: 30.8025,
-              zoom: 6,
+              longitude: 31.233334,
+              latitude: 30.033333,
+              zoom: 9,
               bearing: 0,
               minZoom: 3,
               maxZoom: 10
@@ -14751,6 +14767,10 @@ const NetworkMapComponent = forwardRef((props, ref) => {
               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,
@@ -14777,7 +14797,7 @@ const NetworkMapComponent = forwardRef((props, ref) => {
                   style: { zIndex: 0 }
                 }
               ),
-              _nodes == null ? void 0 : _nodes.map((item) => {
+              inViewNodes == null ? void 0 : inViewNodes.map((item) => {
                 var _a, _b;
                 return /* @__PURE__ */ jsxRuntimeExports.jsx(
                   PinItem$1,
@@ -14813,7 +14833,7 @@ const NetworkMapComponent = forwardRef((props, ref) => {
                   getOverLinkElementDelay
                 }
               ),
-              showLinkCount && !mapDragging && (_conns == null ? void 0 : _conns.map((con, index) => {
+              showLinkCount && !mapDragging && (inViewConnections == null ? void 0 : inViewConnections.map((con, index) => {
                 return /* @__PURE__ */ jsxRuntimeExports.jsx(
                   LinkCountCircule$1,
                   {
@@ -14823,10 +14843,10 @@ const NetworkMapComponent = forwardRef((props, ref) => {
                     getCenterBox,
                     hoveredConnection
                   },
-                  "_lnk_count_circule_" + index
+                  "_lnk_count_circule_" + (con == null ? void 0 : con.u_id)
                 );
               })),
-              showEndpoints && (_conns == null ? void 0 : _conns.map((con, index) => {
+              showEndpoints && (inViewConnections == null ? void 0 : inViewConnections.map((con, index) => {
                 return /* @__PURE__ */ jsxRuntimeExports.jsx(
                   SourcesPorts$1,
                   {
@@ -14835,9 +14855,10 @@ const NetworkMapComponent = forwardRef((props, ref) => {
                     currentZoomLevel,
                     hoveredConnection,
                     mapDragging,
-                    getEndpointText
+                    getEndpointText,
+                    mapRotating
                   },
-                  "_source_port_" + index
+                  "_source_port_" + (con == null ? void 0 : con.u_id)
                 );
               })),
               /* @__PURE__ */ jsxRuntimeExports.jsx(NavigationControl, {}),