@react-native-ohos/react-native-map-clustering 3.4.1-rc.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Tony Arrived
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/OAT.xml

@@ -0,0 +1,57 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<configuration>
+    <oatconfig>
+        <licensefile>LICENSE</licensefile>
+         <policylist>
+        <policy name="projectPolicy" desc="">
+            <policyitem type="license" name="MIT" path=".*" desc="license under the MIT"/>
+        </policy>
+        <policy name="projectPolicy" desc="">
+            <policyitem type="compatibility" name="GPL-2.0+" path=".*" desc="Process that runs independently, invoked by the X process."/>
+            <policyitem type="compatibility" name="Apache-2.0" path=".*" desc="不影响兼容性"/>
+            <policyitem type="compatibility" name="BSDStyleLicense" path=".*" desc="不影响兼容性" />
+            <policyitem type="compatibility" name="MIT" path=".*" desc="不影响兼容性" />
+            <policyitem type="compatibility" name="GPLStyleLicense" path=".*" desc="不影响兼容性" />
+        </policy>
+    </policylist>
+        <filefilterlist>
+            <filefilter name="defaultPolicyFilter" desc="Filters for compatibility，license header policies">
+             <filteritem type="filename" name="*.json5" desc="hvigor配置文件，DevEco Studio自动生成，不手动修改"/>
+                <filteritem type="filename" name="*/*.json5" desc="hvigor配置文件，DevEco Studio自动生成，不手动修改"/>
+   	            <filteritem type="filename" name="LICENSE" desc="版权文件，不添加许可证头"/>
+                <filteritem type="filepath" name="hvigorw" desc="工程模板，不添加许可证头"/>
+                <filteritem type="filepath" name="hvigorw.bat" desc="工程模板，不添加许可证头"/>
+                <filteritem type="filepath" name="js/*.js" desc="第三方开源软件源码，不修改版权头，以防有修改版权风险"/>
+                <filteritem type="filepath" name="js/*.ts" desc="第三方开源软件源码，不修改版权头，以防有修改版权风险"/>
+                <filteritem type="filepath" name="src/*.js" desc="第三方开源软件源码，不修改版权头，以防有修改版权风险"/>
+                <filteritem type="filepath" name="src/*.ts" desc="第三方开源软件源码，不修改版权头，以防有修改版权风险"/>
+                <filteritem type="filepath" name="*.js" desc="第三方开源软件源码，不修改版权头，以防有修改版权风险"/>
+                <filteritem type="filepath" name="*.ts" desc="第三方开源软件源码，不修改版权头，以防有修改版权风险"/>
+                <filteritem type="filepath" name="index.*" desc="第三方开源软件源码，不修改版权头，以防有修改版权风险"/>
+                <filteritem type="filepath" name="hvigor/hvigor-wrapper.js" desc="工程模板，不修改版权头，以防有修改版权风险"/>
+                <filteritem type="filepath" name="hvigor/hvigor-config.json5" desc="工程模板，不修改版权头，以防有修改版权风险"/>
+                <filteritem type="filepath" name="lib/ClusteredMapView.js" desc="第三方开源软件源码，不修改版权头，以防有修改版权风险"/>
+            </filefilter>
+            <filefilter name="copyrightPolicyFilter" desc="Filters for copyright header policies">
+                 <filteritem type="filename" name="*.json5" desc="hvigor配置文件，DevEco Studio自动生成，不手动修改"/>
+                <filteritem type="filename" name="*/*.json5" desc="hvigor配置文件，DevEco Studio自动生成，不手动修改"/>
+         	    <filteritem type="filename" name="LICENSE" desc="版权文件，不添加版权头"/>
+                <filteritem type="filepath" name="hvigorw" desc="工程模板，不修改版权头，以防有修改版权风险"/>
+                <filteritem type="filepath" name="hvigorw.bat" desc="工程模板，不修改版权头，以防有修改版权风险"/>
+                <filteritem type="filepath" name="js/*.js" desc="第三方开源软件源码，不修改版权头，以防有修改版权风险"/>
+                <filteritem type="filepath" name="js/*.ts" desc="第三方开源软件源码，不修改版权头，以防有修改版权风险"/>
+                <filteritem type="filepath" name="src/*.js" desc="第三方开源软件源码，不修改版权头，以防有修改版权风险"/>
+                <filteritem type="filepath" name="src/*.ts" desc="第三方开源软件源码，不修改版权头，以防有修改版权风险"/>
+                <filteritem type="filepath" name="*.js" desc="第三方开源软件源码，不修改版权头，以防有修改版权风险"/>
+                <filteritem type="filepath" name="*.ts" desc="第三方开源软件源码，不修改版权头，以防有修改版权风险"/>
+                <filteritem type="filepath" name="index.*" desc="第三方开源软件源码，不修改版权头，以防有修改版权风险"/>
+                <filteritem type="filepath" name="hvigor/hvigor-wrapper.js" desc="工程模板，不修改版权头，以防有修改版权风险"/>
+                <filteritem type="filepath" name="hvigor/hvigor-config.json5" desc="工程模板，不修改版权头，以防有修改版权风险"/>
+                <filteritem type="filepath" name="lib/ClusteredMapView.js" desc="第三方开源软件源码，不修改版权头，以防有修改版权风险"/>
+            </filefilter>
+            <filefilter name="binaryFileTypePolicyFilter" desc="Filters for binary file policies">
+            </filefilter>
+
+        </filefilterlist>
+    </oatconfig>
+</configuration>

package/README.OpenSource

@@ -0,0 +1,11 @@
+[
+    {
+        "Name": "react-native-map-clustering",
+        "License": "MIT License",
+        "License File": "https://github.com/react-native-oh-library/react-native-map-clustering/blob/sig/LICENSE",
+        "Version Number": "3.4.2-0.0.1",
+        "Owner" : "xiafeng@huawei.com",
+        "Upstream URL": "https://github.com/react-native-oh-library/react-native-map-clustering",
+        "Description": "React Native Map Clustering both for Android and iOS"
+    }
+]

package/README.md

@@ -0,0 +1,13 @@
+# @react-native-oh-tpl/react-native-map-clustering
+
+This project is based on [react-native-map-clustering](https://github.com/venits/react-native-map-clustering)
+
+## Documentation
+
+- [中文](https://gitee.com/react-native-oh-library/usage-docs/blob/master/zh-cn/react-native-map-clustering.md)
+
+- [English](https://gitee.com/react-native-oh-library/usage-docs/blob/master/en/react-native-map-clustering.md)
+
+## License
+
+This library is licensed under [The MIT License (MIT)](https://github.com/react-native-oh-library/react-native-map-clustering/blob/sig/LICENSE)

package/index.d.ts

@@ -0,0 +1,40 @@
+declare module "react-native-map-clustering" {
+  import * as React from "react";
+  import { LayoutAnimationConfig } from "react-native";
+  import Map, { MapViewProps, Marker } from "react-native-maps";
+
+  export type Cluster = {};
+
+  interface MapClusteringProps {
+    clusteringEnabled?: boolean;
+    spiralEnabled?: boolean;
+    animationEnabled?: boolean;
+    preserveClusterPressBehavior?: boolean;
+    tracksViewChanges?: boolean;
+    layoutAnimationConf?: LayoutAnimationConfig;
+    radius?: number;
+    maxZoom?: number;
+    minZoom?: number;
+    extent?: number;
+    nodeSize?: number;
+    minPoints?: number;
+    edgePadding?: { top: number; left: number; right: number; bottom: number };
+    clusterColor?: string;
+    clusterTextColor?: string;
+    clusterFontFamily?: string;
+    selectedClusterId?: string;
+    selectedClusterColor?: string;
+    spiderLineColor?: string;
+    superClusterRef?: React.MutableRefObject<any>;
+    mapRef?: (ref: React.Ref<Map>) => void;
+    onClusterPress?: (cluster: Marker, markers?: Marker[]) => void;
+    getClusterEngine?: (ref: any) => void;
+    onMarkersChange?: (markers?: Marker[]) => void;
+    renderCluster?: (cluster: any) => React.ReactNode;
+  }
+
+  export default class MapView extends React.Component<
+    MapViewProps & MapClusteringProps,
+    any
+  > {}
+}

package/index.js

@@ -0,0 +1,2 @@
+import * as MapView from "./lib/ClusteredMapView";
+module.exports = MapView;

package/lib/ClusterHarmony.js

@@ -0,0 +1,21 @@
+/*
+ * Copyright (c) 2024 Huawei Device Co., Ltd. All rights reserved
+ * Use of this source code is governed by a MIT license that can be
+ * found in the LICENSE file.
+ */
+
+import React, { memo } from "react";
+import { Cluster } from "react-native-maps";
+
+const ClusterHarmony = ({ marker, distance, onPress }) => {
+  return (
+    <Cluster
+      clusterItems={marker.clusterChildItem}
+      distance={distance ? distance : 40}
+      onPress={onPress}
+      style={{ zIndex: marker.properties.point_count + 1 }}
+    ></Cluster>
+  );
+};
+
+export default memo(ClusterHarmony);

package/lib/ClusteredMapView.js

@@ -0,0 +1,310 @@
+import React, {
+  memo,
+  useState,
+  useEffect,
+  useMemo,
+  useRef,
+  forwardRef,
+} from "react";
+import { Dimensions, LayoutAnimation, Platform } from "react-native";
+import MapView, { Marker, Polyline } from "react-native-maps";
+import SuperCluster from "supercluster";
+import ClusterMarker from "react-native-map-clustering/lib/ClusteredMarker";
+import {
+  isMarker,
+  markerToGeoJSONFeature,
+  calculateBBox,
+  returnMapZoom,
+  generateSpiral,
+} from "react-native-map-clustering/lib/helpers";
+import ClusterHarmony from "./ClusterHarmony";
+
+const ClusteredMapView = forwardRef(
+  (
+    {
+      radius,
+      maxZoom,
+      minZoom,
+      minPoints,
+      extent,
+      nodeSize,
+      children,
+      onClusterPress,
+      onRegionChangeComplete,
+      onMarkersChange,
+      preserveClusterPressBehavior,
+      clusteringEnabled,
+      clusterColor,
+      clusterTextColor,
+      clusterFontFamily,
+      spiderLineColor,
+      layoutAnimationConf,
+      animationEnabled,
+      renderCluster,
+      tracksViewChanges,
+      spiralEnabled,
+      superClusterRef,
+      ...restProps
+    },
+    ref
+  ) => {
+    const [markers, updateMarkers] = useState([]);
+    const [spiderMarkers, updateSpiderMarker] = useState([]);
+    const [otherChildren, updateChildren] = useState([]);
+    const [superCluster, setSuperCluster] = useState(null);
+    const [currentRegion, updateRegion] = useState(
+      restProps.region || restProps.initialRegion
+    );
+
+    const [isSpiderfier, updateSpiderfier] = useState(false);
+    const [clusterChildren, updateClusterChildren] = useState(null);
+    const mapRef = useRef();
+
+    const propsChildren = useMemo(
+      () => React.Children.toArray(children),
+      [children]
+    );
+
+    useEffect(() => {
+      const rawData = [];
+      const otherChildren = [];
+
+      if (!clusteringEnabled) {
+        updateSpiderMarker([]);
+        updateMarkers([]);
+        updateChildren(propsChildren);
+        setSuperCluster(null);
+        return;
+      }
+
+      propsChildren.forEach((child, index) => {
+        if (isMarker(child)) {
+          rawData.push(markerToGeoJSONFeature(child, index));
+        } else {
+          otherChildren.push(child);
+        }
+      });
+
+      const superCluster = new SuperCluster({
+        radius,
+        maxZoom,
+        minZoom,
+        minPoints,
+        extent,
+        nodeSize,
+      });
+
+      superCluster.load(rawData);
+
+      const bBox = calculateBBox(currentRegion);
+      const zoom = returnMapZoom(currentRegion, bBox, minZoom);
+      const markers = superCluster.getClusters(bBox, zoom);
+
+      updateMarkers(markers);
+      updateChildren(otherChildren);
+      setSuperCluster(superCluster);
+
+      superClusterRef.current = superCluster;
+    }, [propsChildren, clusteringEnabled]);
+
+    useEffect(() => {
+      if (!spiralEnabled) return;
+
+      if (isSpiderfier && markers.length > 0) {
+        let allSpiderMarkers = [];
+        let spiralChildren = [];
+        markers.map((marker, i) => {
+          if (marker.properties.cluster) {
+            spiralChildren = superCluster.getLeaves(
+              marker.properties.cluster_id,
+              Infinity
+            );
+          }
+          let positions = generateSpiral(marker, spiralChildren, markers, i);
+          allSpiderMarkers.push(...positions);
+        });
+
+        updateSpiderMarker(allSpiderMarkers);
+      } else {
+        updateSpiderMarker([]);
+      }
+    }, [isSpiderfier, markers]);
+
+    const _onRegionChangeComplete = (region, harmonyIn) => {
+      if (Platform.OS === "harmony" && !harmonyIn) {
+        region = region.nativeEvent.region;
+        setTimeout(() => {
+          _onRegionChangeComplete(region, true);
+        }, 100);
+        return;
+      }
+
+      if (superCluster && region) {
+        const bBox = calculateBBox(region);
+        const zoom = returnMapZoom(region, bBox, minZoom);
+        const markers = superCluster.getClusters(bBox, zoom);
+        if (animationEnabled && Platform.OS === "ios") {
+          LayoutAnimation.configureNext(layoutAnimationConf);
+        }
+        if (zoom >= 18 && markers.length > 0 && clusterChildren) {
+          if (spiralEnabled) updateSpiderfier(true);
+        } else {
+          if (spiralEnabled) updateSpiderfier(false);
+        }
+
+        if (Platform.OS === "harmony") {
+          for (let index = 0; index < markers.length; index++) {
+            const marker = markers[index];
+            if (marker.properties.point_count > 0) {
+              const children = superCluster.getLeaves(
+                marker.properties.cluster_id,
+                Infinity
+              );
+              const itemList = [];
+              for (let index = 0; index < children.length; index++) {
+                const clusterItem = children[index];
+                itemList.push({
+                  position: {
+                    longitude: clusterItem.geometry.coordinates[0],
+                    latitude: clusterItem.geometry.coordinates[1],
+                  },
+                });
+              }
+              marker["clusterChildItem"] = itemList;
+            }
+          }
+          if (markers.length != 0) {
+            updateMarkers(markers);
+            onMarkersChange(markers);
+            onRegionChangeComplete(region, markers);
+            updateRegion(region);
+          }
+        } else {
+          updateMarkers(markers);
+          onMarkersChange(markers);
+          onRegionChangeComplete(region, markers);
+          updateRegion(region);
+        }
+      } else {
+        onRegionChangeComplete(region);
+      }
+    };
+
+    const _onClusterPress = (cluster) => () => {
+      const children = superCluster.getLeaves(cluster.id, Infinity);
+
+      updateClusterChildren(children);
+
+      if (preserveClusterPressBehavior) {
+        onClusterPress(cluster, children);
+        return;
+      }
+
+      const coordinates = children.map(({ geometry }) => ({
+        latitude: geometry.coordinates[1],
+        longitude: geometry.coordinates[0],
+      }));
+
+      mapRef.current.fitToCoordinates(coordinates, {
+        edgePadding: restProps.edgePadding,
+      });
+
+      onClusterPress(cluster, children);
+    };
+
+    return (
+      <MapView
+        {...restProps}
+        ref={(map) => {
+          mapRef.current = map;
+          if (ref) ref.current = map;
+          restProps.mapRef(map);
+        }}
+        onRegionChangeComplete={_onRegionChangeComplete}
+      >
+        {markers.map((marker) =>
+          marker.properties.point_count === 0 ? (
+            propsChildren[marker.properties.index]
+          ) : !isSpiderfier ? (
+            renderCluster ? (
+              renderCluster({
+                onPress: _onClusterPress(marker),
+                clusterColor,
+                clusterTextColor,
+                clusterFontFamily,
+                ...marker,
+              })
+            ) : Platform.OS === "harmony" ? (
+              <ClusterHarmony
+                key={`cluster-${marker.id}`}
+                marker={marker}
+                distance={40}
+                onPress={_onClusterPress(marker)}
+              />
+            ) : (
+              <ClusterMarker
+                key={`cluster-${marker.id}`}
+                {...marker}
+                onPress={_onClusterPress(marker)}
+                clusterColor={
+                  restProps.selectedClusterId === marker.id
+                    ? restProps.selectedClusterColor
+                    : clusterColor
+                }
+                clusterTextColor={clusterTextColor}
+                clusterFontFamily={clusterFontFamily}
+                tracksViewChanges={tracksViewChanges}
+              />
+            )
+          ) : null
+        )}
+        {otherChildren}
+        {spiderMarkers.map((marker) => {
+          return propsChildren[marker.index]
+            ? React.cloneElement(propsChildren[marker.index], {
+                coordinate: { ...marker },
+              })
+            : null;
+        })}
+        {spiderMarkers.map((marker, index) => (
+          <Polyline
+            key={index}
+            coordinates={[marker.centerPoint, marker, marker.centerPoint]}
+            strokeColor={spiderLineColor}
+            strokeWidth={1}
+          />
+        ))}
+      </MapView>
+    );
+  }
+);
+
+ClusteredMapView.defaultProps = {
+  clusteringEnabled: true,
+  spiralEnabled: true,
+  animationEnabled: true,
+  preserveClusterPressBehavior: false,
+  layoutAnimationConf: LayoutAnimation.Presets.spring,
+  tracksViewChanges: false,
+  // SuperCluster parameters
+  radius: Dimensions.get("window").width * 0.06,
+  maxZoom: 20,
+  minZoom: 1,
+  minPoints: 2,
+  extent: 512,
+  nodeSize: 64,
+  // Map parameters
+  edgePadding: { top: 50, left: 50, right: 50, bottom: 50 },
+  // Cluster styles
+  clusterColor: "#00B386",
+  clusterTextColor: "#FFFFFF",
+  spiderLineColor: "#FF0000",
+  // Callbacks
+  onRegionChangeComplete: () => {},
+  onClusterPress: () => {},
+  onMarkersChange: () => {},
+  superClusterRef: {},
+  mapRef: () => {},
+};
+
+export default memo(ClusteredMapView);

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@react-native-ohos/react-native-map-clustering",
+  "harmony": {
+    "alias": "react-native-map-clustering",
+    "redirectInternalImports": true
+  },
+  "version": "3.4.1-rc.1",
+  "description": "React Native Map Clustering both for Android and iOS",
+  "types": "index.d.ts",
+  "main": "index.js",
+  "scripts": {
+    "test": "jest"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/venits/react-native-map-clustering.git"
+  },
+  "keywords": [
+    "react-native",
+    "react",
+    "cluster",
+    "android",
+    "iOS",
+    "map",
+    "clustering"
+  ],
+  "author": "Venits",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/venits/react-native-map-clustering/issues"
+  },
+  "homepage": "https://github.com/venits/react-native-map-clustering#readme",
+  "dependencies": {
+    "supercluster": "^7.1.0",
+    "@mapbox/geo-viewport": "^0.4.1"
+  },
+  "peerDependencies": {
+    "react-native-maps": "*",
+    "react-native-map-clustering": "3.4.0",
+    "react-native": "*"
+  }
+}