From 2cc1d5ac4edd902a9ba066a78d9114ecad2c4dc8 Mon Sep 17 00:00:00 2001
From: Duy Dung <dungvd@iotlink.com.vn>
Date: Mon, 8 Jun 2026 15:01:01 +0700
Subject: [PATCH] Support focus KCN

---
 example/src/App.js                    |  35 ++-
 src/components/MFMapView.js           |  42 ++--
 src/components/MFPolygonFocus.js      |  23 ++
 src/components/extends/AreaFocuser.js | 333 ++++++++++++++++++++++----
 src/components/extends/BoundHelper.js |  43 ++++
 5 files changed, 408 insertions(+), 68 deletions(-)
 create mode 100644 src/components/MFPolygonFocus.js
 create mode 100644 src/components/extends/BoundHelper.js

diff --git a/example/src/App.js b/example/src/App.js
index 1ff8fa0..4a53d8b 100644
--- a/example/src/App.js
+++ b/example/src/App.js
@@ -22,7 +22,7 @@ function App() {
     console.log('Press Building:', e.nativeEvent)
   }
 
-  const onFocusWithHighlight = async () => {
+  const onFocusProvince = async (highlight) => {
     const areaFocuser = mapRef.current?.areaFocuser
     if (!areaFocuser) {
       return
@@ -30,7 +30,7 @@ function App() {
 
     await areaFocuser.focusProvince({
       name: 'Ha Noi',
-      highlight: true,
+      highlight: highlight,
     })
   }
 
@@ -43,10 +43,39 @@ function App() {
     await areaFocuser.focusProvince(null)
   }
 
+  const onFocusIndustrialZone = async () => {
+    const areaFocuser = mapRef.current?.areaFocuser
+    if (!areaFocuser) {
+      return
+    }
+
+    await areaFocuser.focus({
+      id: 2,
+      type: 'industrial',
+      display: 'normal',
+    })
+  }
+
+  const onFocusIndustrialZoneHighlight = async () => {
+    const areaFocuser = mapRef.current?.areaFocuser
+    if (!areaFocuser) {
+      return
+    }
+
+    await areaFocuser.focus({
+      id: 2,
+      type: 'industrial',
+      display: 'highlight',
+    })
+  }
+
   return (
     <SafeAreaView style={styles.safeView}>
-      <Button title="Focus with highlight" onPress={onFocusWithHighlight} />
+      <Button title="Focus with highlight" onPress={() => onFocusProvince(true)} />
+      <Button title="Focus no highlight" onPress={() => onFocusProvince(false)} />
       <Button title="Remove highlight" onPress={onRemoveHighlight} />
+      <Button title="Focus industrial zone" onPress={onFocusIndustrialZone} />
+      <Button title="Focus industrial zone highlight" onPress={onFocusIndustrialZoneHighlight} />
       <MFMapView
         style={styles.container}
         camera={{
diff --git a/src/components/MFMapView.js b/src/components/MFMapView.js
index 0e12b87..da8bd9f 100644
--- a/src/components/MFMapView.js
+++ b/src/components/MFMapView.js
@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import {ViewPropTypes, ColorPropType} from 'deprecated-react-native-prop-types';
 import {AreaFocuser} from './extends/AreaFocuser';
-import {MFPolygon} from './MFPolygon';
+import {MFPolygonFocus} from './MFPolygonFocus';
 import {
   requireNativeComponent,
   Platform,
@@ -144,6 +144,7 @@ const propTypes = {
    * Callback that is called when user taps on location Button
    */
   onMyLocationButtonPress: PropTypes.func,
+
 };
 
 
@@ -153,7 +154,7 @@ class MFMapView extends React.Component {
     this.areaFocuser = new AreaFocuser(this);
     this.state = {
       isReady: Platform.OS === 'ios',
-      managedPolygons: {},
+      managedPolygons: [],
     };
 
     this._onMapReady = this._onMapReady.bind(this);
@@ -161,54 +162,53 @@ class MFMapView extends React.Component {
   }
 
   _addPolygon(polygon) {
-    if (polygon == null || typeof polygon !== 'object') {
+    if (polygon == null || typeof polygon !== 'object' || Array.isArray(polygon)) {
       return null;
     }
 
     const id =
-      typeof polygon.id === 'string' && polygon.id.trim().length > 0
+      (typeof polygon.id === 'string' && polygon.id.trim().length > 0) || typeof polygon.id === 'number'
         ? polygon.id
         : 'polygon-highlight-id-default';
 
     const _polygon = {
       ...polygon,
       id,
+      _internalKey: `${String(id)}-${Date.now()}-${Math.random().toString(36).slice(2)}`,
     };
 
     this.setState((prevState) => ({
-      managedPolygons: {
-        ...prevState.managedPolygons,
-        [id]: _polygon,
-      },
+      managedPolygons: [...prevState.managedPolygons, _polygon],
     }));
 
     return id;
   }
 
   _removePolygon(id) {
-    if (typeof id !== 'string' || id.trim().length === 0) {
+    const isValidStringId = typeof id === 'string' && id.trim().length > 0;
+    const isValidNumberId = typeof id === 'number';
+    if (!isValidStringId && !isValidNumberId) {
       return;
     }
 
     this.setState((prevState) => {
-      if (!prevState.managedPolygons[id]) {
+      const remainingPolygons = prevState.managedPolygons.filter(
+        (polygon) => String(polygon.id) !== String(id)
+      );
+
+      if (remainingPolygons.length === prevState.managedPolygons.length) {
         return null;
       }
 
-      const managedPolygons = {
-        ...prevState.managedPolygons,
-      };
-      delete managedPolygons[id];
-
       return {
-        managedPolygons,
+        managedPolygons: remainingPolygons,
       };
     });
   }
 
   _clearManagedPolygons() {
     this.setState({
-      managedPolygons: {},
+      managedPolygons: [],
     });
   }
 
@@ -399,11 +399,10 @@ class MFMapView extends React.Component {
     return NativeModules[`RMFMapView`][name];
   }
 
-
   render() {
     let props;
     const { children, ...restProps } = this.props;
-    const managedPolygons = Object.values(this.state.managedPolygons);
+    const managedPolygons = this.state.managedPolygons;
 
     if (this.state.isReady) {
       props = {
@@ -414,8 +413,9 @@ class MFMapView extends React.Component {
           <React.Fragment>
             {children}
             {managedPolygons.map((polygon) => (
-              <MFPolygon
-                key={polygon.id}
+              <MFPolygonFocus
+                key={polygon._internalKey || `${String(polygon.id)}-${polygon.coordinates?.length || 0}`}
+                id={polygon.id}
                 coordinates={polygon.coordinates}
                 holes={polygon.holes}
                 fillColor={polygon.fillColor}
diff --git a/src/components/MFPolygonFocus.js b/src/components/MFPolygonFocus.js
new file mode 100644
index 0000000..c7a408e
--- /dev/null
+++ b/src/components/MFPolygonFocus.js
@@ -0,0 +1,23 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {MFPolygon} from './MFPolygon';
+
+class MFPolygonFocus extends MFPolygon {
+  render() {
+    const {id, ...restProps} = this.props;
+    return (
+      <MFPolygon
+        {...restProps}
+        ref={this._ref}
+        onPress={this._onPress}
+      />
+    );
+  }
+}
+
+MFPolygonFocus.propTypes = {
+  ...MFPolygon.propTypes,
+  id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+};
+
+export {MFPolygonFocus};
\ No newline at end of file
diff --git a/src/components/extends/AreaFocuser.js b/src/components/extends/AreaFocuser.js
index 7906af7..6504f13 100644
--- a/src/components/extends/AreaFocuser.js
+++ b/src/components/extends/AreaFocuser.js
@@ -1,21 +1,35 @@
+import {
+  BoundHelper,
+} from './BoundHelper'
+
 export class AreaFocuser {
 
   constructor(mapView) {
     this.mapView = mapView
     this.highlightPaths = []
     this.highlightPolygonId = 'area-focuser-highlight-polygon'
+    this.currentIndustrialZoneFocusId = null
   }
 
   /**
-   * @param {{name?: string, highlight?: boolean}=} options
+   * @typedef {{type: 'Point', coordinates: [number, number]}} PointGeometry
+   * @typedef {Array<Array<[number, number]>>} PolygonCoordinates
+   * @typedef {{type: 'Polygon', coordinates: PolygonCoordinates}} PolygonGeometry
+   * @typedef {{type: 'MultiPolygon', coordinates: Array<PolygonCoordinates>}} MultiPolygonGeometry
+   * @typedef {PointGeometry | PolygonGeometry | MultiPolygonGeometry} Geometry
+   * @typedef {{id?: number, type: 'province' | 'industrial' | 'economic', display?: 'normal' | 'highlight'}} FocusOptions
+   * @typedef {{name?: string, highlight?: boolean}} FocusProvinceOptions
+   */
+
+  /**
+   * @param {FocusProvinceOptions} options
    */
   async focusProvince(options) {
-    const provinceName = this.getProvinceName(options)
-    const shouldHighlight = this.shouldHighlight(options)
+    const provinceName = this._getProvinceName(options)
+    const shouldHighlight = this._shouldHighlight(options)
 
     if (!provinceName) {
-      this.clearHighlightPaths()
-      this.clearHighlightPolygon()
+      this._clearHighlight()
       return
     }
 
@@ -53,11 +67,11 @@ export class AreaFocuser {
         feature.properties && feature.properties.viewbox ? feature.properties.viewbox : null
 
       if (viewbox != null && viewbox.trim() != '') {
-        bounds = this.parseViewbox(viewbox)
+        bounds = this._parseViewbox(viewbox)
       }
 
       if (!bounds) {
-        bounds = this.getViewboxFromGeometry(geometry)
+        bounds = this._getViewboxFromGeometry(geometry)
       }
 
       if (!bounds) {
@@ -77,10 +91,10 @@ export class AreaFocuser {
         }
       })
 
-      this.createHighlightPaths(geometry)
-
+      this._createHighlightPaths(geometry)
+      this._clearHighlightPolygons()
       if (shouldHighlight) {
-        const polygon = this.getHighlightPolygonProps()
+        const polygon = this._getHighlightPolygonProps()
 
         if (polygon) {
           this.mapView._addPolygon({
@@ -90,16 +104,114 @@ export class AreaFocuser {
           })
         }
       }
+    }
+    catch (error) {
+      console.error('Cannot focus province:', error)
+    }
+  }
+
+  async _focusIndustrialZone(options) {
+    this._clearHighlight()
+
+    if (this.currentIndustrialZoneFocusId != null) {
+      this.currentIndustrialZoneFocusId = null
+    }
+
+    if (!options || typeof options !== 'object' || typeof options.id !== 'number') {
+      return
+    }
+
+    const focusId = options.id
+
+    this.currentIndustrialZoneFocusId = focusId
+
+    const url = `https://bdsapi.omyto.com/api/BDS/KhuCongNghiep/${focusId}`
+
+    try {
+      const response = await fetch(url)
+
+      if (!response.ok) {
+        console.error('Failed to fetch industrial zone data:', response.status, response.statusText)
+        return
+      }
+
+      const data = await response.json()
+
+      if (!data.success) {
+        console.error('API returned error:', data.message)
+        return
+      }
+
+      const geometry = data?.data?.geometry
+      if (!geometry) {
+        return
+      }
+
+      const camera = await this._getCameraForGeometry(geometry)
+      if (camera) {
+        this.mapView.animateCamera(camera)
+      }
+
+      if (options.display === 'highlight') {
+        this._createHighlightPaths(geometry)
+        const polygon = this._getHighlightPolygonProps()
+
+        if (polygon) {
+          this.mapView._addPolygon({
+            ...polygon,
+            id: focusId,
+            zIndex: 999,
+          })
+        }
+      }
       else {
-        this.clearHighlightPolygon()
+        const polygons = this._getPolygonPathsFromGeometry(geometry)
+        polygons.forEach((coordinates) => {
+          this.mapView._addPolygon({
+            id: focusId,
+            coordinates,
+            fillColor: '#2196F3BF',
+            strokeColor: '#0D47A1FF',
+            strokeWidth: 1.5,
+            visible: true,
+          })
+        })
       }
     }
     catch (error) {
-      console.error('Cannot focus province:', error)
+      console.error('Cannot focus industrial zone:', error)
+    }
+  }
+
+  _clearHighlight() {
+    this._clearHighlightPaths()
+    this._clearHighlightPolygons()
+  }
+
+  /**
+   * @param {FocusOptions} options
+   */
+  async focus(options) {
+    if (options == null || options.id == null) {
+      this._clearHighlight()
+      return
+    }
+
+    switch (options.type) {
+      case 'province':
+        break
+      case 'industrial':
+        await this._focusIndustrialZone(options)
+        break
+      case 'economic':
+        break
+      default:
+        console.warn('Unsupported focus type:', options.type)
+        return
     }
   }
 
-  getProvinceName(options) {
+  _getProvinceName(options) {
     if (options == null || typeof options !== 'object') {
       return null
     }
@@ -120,7 +232,7 @@ export class AreaFocuser {
     return null
   }
 
-  shouldHighlight(options) {
+  _shouldHighlight(options) {
     if (options == null || typeof options !== 'object') {
       return false
     }
@@ -128,7 +240,7 @@ export class AreaFocuser {
     return options.highlight === true
   }
 
-  parseViewbox(viewbox) {
+  _parseViewbox(viewbox) {
     const bounds = viewbox.split(',').map(Number)
 
     if (bounds.length != 4) {
@@ -154,15 +266,155 @@ export class AreaFocuser {
     ]
   }
 
-  getViewboxFromGeometry(geometry) {
-    const bounds = {
-      minLat: Infinity,
-      minLng: Infinity,
-      maxLat: -Infinity,
-      maxLng: -Infinity,
+  /**
+   * @param {Geometry} geometry
+   */
+  async _getCameraForGeometry(geometry) {
+    if (!geometry || typeof geometry !== 'object') {
+      return null
     }
 
-    const updateBounds = function (coordinate) {
+    switch (geometry.type) {
+      case 'Point': {
+        const point = geometry.coordinates
+        if (!Array.isArray(point) || point.length < 2) {
+          return null
+        }
+
+        return {
+          center: {
+            latitude: point[1],
+            longitude: point[0],
+          },
+          zoom: 16,
+          bearing: 0,
+          tilt: 0,
+        }
+      }
+
+      case 'Polygon': {
+        const bounds = this._polygonToLatLngBounds(geometry.coordinates)
+        return this._getCameraForBounds(bounds)
+      }
+
+      case 'MultiPolygon': {
+        const bounds = BoundHelper.createEmptyBounds()
+
+        geometry.coordinates.forEach((polygonCoordinates) => {
+          const polygonBounds = this._polygonToLatLngBounds(polygonCoordinates)
+          BoundHelper.extendBounds(bounds, polygonBounds)
+        })
+
+        if (!BoundHelper.isValidBounds(bounds)) {
+          return null
+        }
+
+        return this._getCameraForBounds(bounds)
+      }
+
+      default:
+        console.warn('Unsupported geometry:', geometry)
+        return null
+    }
+  }
+
+  async _getCameraForBounds(bounds) {
+    if (!bounds || !this.mapView || typeof this.mapView.cameraForBounds !== 'function') {
+      return null
+    }
+
+    try {
+      return await this.mapView.cameraForBounds({
+        bounds: {
+          southWest: {
+            latitude: bounds.minLat,
+            longitude: bounds.minLng,
+          },
+          northEast: {
+            latitude: bounds.maxLat,
+            longitude: bounds.maxLng,
+          },
+        },
+      })
+    }
+    catch (error) {
+      return null
+    }
+  }
+
+  /**
+   * @param {PolygonCoordinates} coordinates
+   */
+  _polygonToLatLngBounds(coordinates) {
+    if (!Array.isArray(coordinates) || coordinates.length === 0) {
+      return null
+    }
+
+    const ring = coordinates[0]
+    if (!Array.isArray(ring) || ring.length === 0) {
+      return null
+    }
+
+    const bounds = BoundHelper.createEmptyBounds()
+
+    ring.forEach((coordinate) => {
+      if (!Array.isArray(coordinate) || coordinate.length < 2) {
+        return
+      }
+
+      const lng = coordinate[0]
+      const lat = coordinate[1]
+      if (Number.isNaN(lat) || Number.isNaN(lng)) {
+        return
+      }
+
+      BoundHelper.updateBounds(bounds, lat, lng)
+    })
+
+    if (!BoundHelper.isValidBounds(bounds)) {
+      return null
+    }
+
+    return bounds
+  }
+
+  _getPolygonPathsFromGeometry(geometry) {
+    const paths = []
+
+    if (!geometry || typeof geometry !== 'object') {
+      return paths
+    }
+
+    if (geometry.type === 'Polygon') {
+      if (Array.isArray(geometry.coordinates) && geometry.coordinates.length > 0) {
+        const path = this._convertAndClosePath(geometry.coordinates[0])
+        if (path.length > 0) {
+          paths.push(path)
+        }
+      }
+      return paths
+    }
+
+    if (geometry.type === 'MultiPolygon') {
+      geometry.coordinates.forEach((polygonCoordinates) => {
+        if (!Array.isArray(polygonCoordinates) || polygonCoordinates.length === 0) {
+          return
+        }
+
+        const path = this._convertAndClosePath(polygonCoordinates[0])
+        if (path.length > 0) {
+          paths.push(path)
+        }
+      })
+    }
+
+    return paths
+  }
+
+  _getViewboxFromGeometry(geometry) {
+    const bounds = BoundHelper.createEmptyBounds()
+
+    const updateBounds = (coordinate) => {
       if (coordinate.length < 2) {
         return
       }
@@ -174,10 +426,7 @@ export class AreaFocuser {
         return
       }
 
-      bounds.minLat = Math.min(bounds.minLat, lat)
-      bounds.minLng = Math.min(bounds.minLng, lng)
-      bounds.maxLat = Math.max(bounds.maxLat, lat)
-      bounds.maxLng = Math.max(bounds.maxLng, lng)
+      BoundHelper.updateBounds(bounds, lat, lng)
     }
 
     if (geometry.type === 'Polygon') {
@@ -202,12 +451,7 @@ export class AreaFocuser {
       })
     }
 
-    if (
-      bounds.minLat === Infinity ||
-      bounds.minLng === Infinity ||
-      bounds.maxLat === -Infinity ||
-      bounds.maxLng === -Infinity
-    ) {
+    if (!BoundHelper.isValidBounds(bounds)) {
       return null
     }
 
@@ -219,10 +463,10 @@ export class AreaFocuser {
     ]
   }
 
-  createHighlightPaths(geometry) {
-    this.clearHighlightPaths()
+  _createHighlightPaths(geometry) {
+    this._clearHighlightPaths()
 
-    const paths = this.createWorldMaskPaths(geometry)
+    const paths = this._createWorldMaskPaths(geometry)
 
     if (paths.length <= 1) {
       return
@@ -231,19 +475,20 @@ export class AreaFocuser {
     this.highlightPaths = paths
   }
 
-  clearHighlightPaths() {
+  _clearHighlightPaths() {
     this.highlightPaths = []
   }
 
-  clearHighlightPolygon() {
+  _clearHighlightPolygons() {
     if (!this.mapView) {
       return
     }
 
     this.mapView._removePolygon(this.highlightPolygonId)
+    this.mapView._removePolygon(this.currentIndustrialZoneFocusId)
   }
 
-  getHighlightPolygonProps() {
+  _getHighlightPolygonProps() {
     if (!this.highlightPaths || this.highlightPaths.length <= 1) {
       return null
     }
@@ -259,7 +504,7 @@ export class AreaFocuser {
     }
   }
 
-  createWorldMaskPaths(geometry) {
+  _createWorldMaskPaths(geometry) {
     const worldPath = [
       { longitude: -180, latitude: -90 },
       { longitude: 180, latitude: -90 },
@@ -272,7 +517,7 @@ export class AreaFocuser {
       worldPath,
     ]
 
-    const holes = this.getHolePathsFromGeometry(geometry)
+    const holes = this._getHolePathsFromGeometry(geometry)
 
     holes.forEach((hole) => {
       paths.push(hole)
@@ -281,14 +526,14 @@ export class AreaFocuser {
     return paths
   }
 
-  getHolePathsFromGeometry(geometry) {
+  _getHolePathsFromGeometry(geometry) {
     const paths = []
 
     if (geometry.type == 'Polygon') {
       const polygon = geometry.coordinates
 
       if (polygon.length > 0) {
-        paths.push(this.convertAndClosePath(polygon[0]))
+        paths.push(this._convertAndClosePath(polygon[0]))
       }
     }
 
@@ -297,7 +542,7 @@ export class AreaFocuser {
 
       multiPolygon.forEach((polygon) => {
         if (polygon.length > 0) {
-          paths.push(this.convertAndClosePath(polygon[0]))
+          paths.push(this._convertAndClosePath(polygon[0]))
         }
       })
     }
@@ -305,7 +550,7 @@ export class AreaFocuser {
     return paths
   }
 
-  convertAndClosePath(path) {
+  _convertAndClosePath(path) {
     if (path.length == 0) {
       return []
     }
diff --git a/src/components/extends/BoundHelper.js b/src/components/extends/BoundHelper.js
new file mode 100644
index 0000000..321f9b7
--- /dev/null
+++ b/src/components/extends/BoundHelper.js
@@ -0,0 +1,43 @@
+class BoundHelper {
+  static createEmptyBounds() {
+    return {
+      minLat: Infinity,
+      minLng: Infinity,
+      maxLat: -Infinity,
+      maxLng: -Infinity,
+    }
+  }
+
+  static updateBounds(bounds, lat, lng) {
+    bounds.minLat = Math.min(bounds.minLat, lat)
+    bounds.minLng = Math.min(bounds.minLng, lng)
+    bounds.maxLat = Math.max(bounds.maxLat, lat)
+    bounds.maxLng = Math.max(bounds.maxLng, lng)
+  }
+
+  static isValidBounds(bounds) {
+    if (!bounds) {
+      return false
+    }
+
+    return !(
+      bounds.minLat === Infinity ||
+      bounds.minLng === Infinity ||
+      bounds.maxLat === -Infinity ||
+      bounds.maxLng === -Infinity
+    )
+  }
+
+  static extendBounds(targetBounds, sourceBounds) {
+    if (!BoundHelper.isValidBounds(sourceBounds)) {
+      return
+    }
+
+    targetBounds.minLat = Math.min(targetBounds.minLat, sourceBounds.minLat)
+    targetBounds.minLng = Math.min(targetBounds.minLng, sourceBounds.minLng)
+    targetBounds.maxLat = Math.max(targetBounds.maxLat, sourceBounds.maxLat)
+    targetBounds.maxLng = Math.max(targetBounds.maxLng, sourceBounds.maxLng)
+  }
+}
+
+export {BoundHelper}
\ No newline at end of file