feat: added mapReady,zoomLevelChanged,centerPositionChange events for echarts map

Author: raheeliftikhar5

client/packages/lowcoder-comps/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lowcoder-comps",
-  "version": "0.0.17",
+  "version": "0.0.18",
   "type": "module",
   "license": "MIT",
   "dependencies": {

client/packages/lowcoder-comps/src/comps/chartComp/chartComp.tsx

@@ -27,7 +27,6 @@ import {
   withViewFn,
   ThemeContext,
   chartColorPalette,
-  loadScript,
 } from "lowcoder-sdk";
 import { getEchartsLocale, trans } from "i18n/comps";
 import { ItemColorComp } from "comps/chartComp/chartConfigs/lineChartConfig";
@@ -49,7 +48,13 @@ let ChartTmpComp = (function () {
 ChartTmpComp = withViewFn(ChartTmpComp, (comp) => {
   const apiKey = comp.children.mapApiKey.getView();
   const mode = comp.children.mode.getView();
-  const onEvent = comp.children.onEvent.getView();
+  const mapCenterPosition = {
+    lng: comp.children.mapCenterLng.getView(),
+    lat: comp.children.mapCenterLat.getView(),
+  }
+  const mapZoomlevel = comp.children.mapZoomLevel.getView();
+  const onUIEvent = comp.children.onUIEvent.getView();
+  const onMapEvent = comp.children.onMapEvent.getView();
 
   const echartsCompRef = useRef<ReactECharts | null>();
   const [chartSize, setChartSize] = useState<ChartSize>();
@@ -81,15 +86,15 @@ ChartTmpComp = withViewFn(ChartTmpComp, (comp) => {
       //log.log("chart select change", param);
       if (param.fromAction === "select") {
         comp.dispatch(changeChildAction("selectedPoints", getSelectedPoints(param, option)));
-        onEvent("select");
+        onUIEvent("select");
       } else if (param.fromAction === "unselect") {
         comp.dispatch(changeChildAction("selectedPoints", getSelectedPoints(param, option)));
-        onEvent("unselect");
+        onUIEvent("unselect");
       }
     });
     // unbind
     return () => echartsCompInstance?.off("selectchanged");
-  }, [mode, onEvent]);
+  }, [mode, onUIEvent]);
 
   const echartsConfigChildren = _.omit(comp.children, echartsConfigOmitChildren);
   const option = useMemo(() => {
@@ -103,36 +108,50 @@ ChartTmpComp = withViewFn(ChartTmpComp, (comp) => {
     return mapScriptLoaded || window?.google;
   }, [mapScriptLoaded])
 
-  const loadGoogleMapsData = () => {
-    setTimeout(() => {
-      const echartsCompInstance = echartsCompRef?.current?.getEchartsInstance();
-      if (!echartsCompInstance) {
-        return _.noop;
-      }
+  const loadGoogleMapData = () => {
+    const echartsCompInstance = echartsCompRef?.current?.getEchartsInstance();
+    if (!echartsCompInstance) {
+      return _.noop;
+    }
 
-      let mapInstance = undefined;
-      mapInstance = echartsCompInstance?.getModel()?.getComponent("gmap")?.getGoogleMap();
-      comp.dispatch(changeChildAction("mapInstance", mapInstance));
-    }, 500)
+    comp.children.mapInstance.dispatch(changeValueAction(echartsCompInstance))
+    onMapEvent('mapReady')
   }
 
+  const handleOnMapScriptLoad = () => {
+    setMapScriptLoaded(true);
+    loadGoogleMapData();
+  }
+
   useEffect(() => {
     if( mode !== 'map') {
-      comp.dispatch(changeChildAction("mapInstance", undefined));
+      comp.children.mapInstance.dispatch(changeValueAction(undefined))
       return;
     }
 
     const gMapScript = loadGoogleMapsScript(apiKey);
     if(isMapScriptLoaded) {
-      loadGoogleMapsData();
+      handleOnMapScriptLoad();
       return;
     }
-    gMapScript.addEventListener('load', function () {
-      setMapScriptLoaded(true);
-      loadGoogleMapsData();
-    });
+    gMapScript.addEventListener('load', handleOnMapScriptLoad);
+    return () => {
+      gMapScript.removeEventListener('load', handleOnMapScriptLoad);
+    }
   }, [mode, apiKey, option])
 
+  useEffect(() => {
+    if(mode === 'map') {
+      onMapEvent('centerPositionChange')
+    }
+  }, [mode, mapCenterPosition.lat, mapCenterPosition.lng])
+
+  useEffect(() => {
+    if(mode === 'map') {
+      onMapEvent('zoomLevelChange')
+    }
+  }, [mode, mapZoomlevel])
+
   return (
     <ReactResizeDetector
       onResize={(w, h) => {
@@ -287,8 +306,38 @@ ChartComp = withMethodExposing(ChartComp, [
       name: "getMapInstance",
     },
     execute: (comp) => {
-      return comp.children.mapInstance.getView()
+      return new Promise(resolve => {
+        let intervalCount = 0;
+        const mapInstanceInterval = setInterval(() => {
+          const instance = comp.children.mapInstance.getView();
+          const mapInstance = instance?.getModel()?.getComponent("gmap")?.getGoogleMap()
+          if(mapInstance || intervalCount === 10) {
+            clearInterval(mapInstanceInterval)
+            resolve(mapInstance)
+          }
+          intervalCount++;
+        }, 1000);
+      })
+    }
+  },
+  {
+    method: {
+      name: "getMapZoomLevel",
+    },
+    execute: (comp) => {
+      return comp.children.mapZoomLevel.getView();
+    }
+  },
+  {
+    method: {
+      name: "getMapCenterPosition",
     },
+    execute: (comp) => {
+      return {
+        lng: comp.children.mapCenterLng.getView(),
+        lat: comp.children.mapCenterLat.getView(),
+      };
+    }
   },
 ])
 

client/packages/lowcoder-comps/src/comps/chartComp/chartConstants.tsx

@@ -50,7 +50,7 @@ const chartModeOptions = [
   },
 ] as const;
 
-export const EventOptions = [
+export const UIEventOptions = [
   {
     label: trans("chart.select"),
     value: "select",
@@ -64,6 +64,24 @@ export const EventOptions = [
   },
 ] as const;
 
+export const MapEventOptions = [
+  {
+    label: trans("chart.mapReady"),
+    value: "mapReady",
+    description: trans("chart.mapReadyDesc"),
+  },
+  {
+    label: trans("chart.zoomLevelChange"),
+    value: "zoomLevelChange",
+    description: trans("chart.zoomLevelChangeDesc"),
+  },
+  {
+    label: trans("chart.centerPositionChange"),
+    value: "centerPositionChange",
+    description: trans("chart.centerPositionChangeDesc"),
+  },
+] as const;
+
 export const XAxisDirectionOptions = [
   {
     label: trans("chart.horizontal"),
@@ -220,8 +238,8 @@ export const chartUiModeChildren = {
   xConfig: XAxisConfig,
   yConfig: YAxisConfig,
   legendConfig: LegendConfig,
-  onEvent: eventHandlerControl(EventOptions),
   chartConfig: ChartOptionComp,
+  onUIEvent: eventHandlerControl(UIEventOptions),
 };
 
 const chartMapModeChildren = {
@@ -232,6 +250,7 @@ const chartMapModeChildren = {
   mapCenterLng: withDefault(NumberControl, 15.932644),
   mapCenterLat: withDefault(NumberControl, 50.942063),
   mapOptions: jsonControl(toObject, i18nObjs.defaultMapJsonOption),
+  onMapEvent: eventHandlerControl(MapEventOptions),
 }
 
 export const chartChildrenMap = {

client/packages/lowcoder-comps/src/comps/chartComp/chartPropertyView.tsx

@@ -105,7 +105,7 @@ export function chartPropertyView(
           dataIndex={(s) => s.getView().dataIndex}
         />
       </Section>
-      <Section name={sectionNames.interaction}>{children.onEvent.getPropertyView()}</Section>
+      <Section name={sectionNames.interaction}>{children.onUIEvent.getPropertyView()}</Section>
       <Section name={sectionNames.layout}>
         {children.title.propertyView({ label: trans("chart.title") })}
         {children.chartConfig.children.compType.getView() !== "pie" && (
@@ -186,6 +186,7 @@ export function chartPropertyView(
           ),
         })}
       </Section>
+      <Section name={sectionNames.interaction}>{children.onMapEvent.getPropertyView()}</Section>
       <Section name={sectionNames.layout}>{hiddenPropertyView(children)}</Section>
     </>
   );

client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts

@@ -73,6 +73,12 @@ export const en = {
     arrow: "Arrow",
     pointColorLabel: "Point color",
     pointColorTooltip: `Set the point color according to the series name and current point value, optional variables: seriesName, value. Example: '{{value < 25000 ? "red" : "green"}}'`,
+    mapReady: "Map Ready",
+    mapReadyDesc: "Triggers when map is ready",
+    zoomLevelChange: "Zoom Level Change",
+    zoomLevelChangeDesc: "Triggers when map zoom level changed",
+    centerPositionChange: "Center Position Change",
+    centerPositionChangeDesc: "Triggers when map center position changed"
   },
   imageEditor: {
     defaultSrc: "",

client/packages/lowcoder-comps/src/i18n/comps/locales/zh.ts

@@ -72,6 +72,12 @@ export const zh = {
         arrow: "箭头",
         pointColorLabel: "数据点颜色",
         pointColorTooltip: `根据系列名称和当前数据点值设置数据点颜色,可选变量:seriesName、value.示例:'{{value < 25000 ? "red" : "green"}}'`,
+        mapReady: "地图就绪",
+        mapReadyDesc: "地图准备好时触发",
+        zoomLevelChange: "缩放级别更改",
+        zoomLevelChangeDesc: "地图缩放级别更改时触发",
+        centerPositionChange: "中心位置变化",
+        centerPositionChangeDesc: "地图中心位置改变时触发"
     },
     imageEditor: {
         defaultSrc: "",