@@ -27,7 +27,6 @@ import {
27
27
withViewFn ,
28
28
ThemeContext ,
29
29
chartColorPalette ,
30
- loadScript ,
31
30
} from "lowcoder-sdk" ;
32
31
import { getEchartsLocale , trans } from "i18n/comps" ;
33
32
import { ItemColorComp } from "comps/chartComp/chartConfigs/lineChartConfig" ;
@@ -49,7 +48,13 @@ let ChartTmpComp = (function () {
49
48
ChartTmpComp = withViewFn ( ChartTmpComp , ( comp ) => {
50
49
const apiKey = comp . children . mapApiKey . getView ( ) ;
51
50
const mode = comp . children . mode . getView ( ) ;
52
- const onEvent = comp . children . onEvent . getView ( ) ;
51
+ const mapCenterPosition = {
52
+ lng : comp . children . mapCenterLng . getView ( ) ,
53
+ lat : comp . children . mapCenterLat . getView ( ) ,
54
+ }
55
+ const mapZoomlevel = comp . children . mapZoomLevel . getView ( ) ;
56
+ const onUIEvent = comp . children . onUIEvent . getView ( ) ;
57
+ const onMapEvent = comp . children . onMapEvent . getView ( ) ;
53
58
54
59
const echartsCompRef = useRef < ReactECharts | null > ( ) ;
55
60
const [ chartSize , setChartSize ] = useState < ChartSize > ( ) ;
@@ -81,15 +86,15 @@ ChartTmpComp = withViewFn(ChartTmpComp, (comp) => {
81
86
//log.log("chart select change", param);
82
87
if ( param . fromAction === "select" ) {
83
88
comp . dispatch ( changeChildAction ( "selectedPoints" , getSelectedPoints ( param , option ) ) ) ;
84
- onEvent ( "select" ) ;
89
+ onUIEvent ( "select" ) ;
85
90
} else if ( param . fromAction === "unselect" ) {
86
91
comp . dispatch ( changeChildAction ( "selectedPoints" , getSelectedPoints ( param , option ) ) ) ;
87
- onEvent ( "unselect" ) ;
92
+ onUIEvent ( "unselect" ) ;
88
93
}
89
94
} ) ;
90
95
// unbind
91
96
return ( ) => echartsCompInstance ?. off ( "selectchanged" ) ;
92
- } , [ mode , onEvent ] ) ;
97
+ } , [ mode , onUIEvent ] ) ;
93
98
94
99
const echartsConfigChildren = _ . omit ( comp . children , echartsConfigOmitChildren ) ;
95
100
const option = useMemo ( ( ) => {
@@ -103,36 +108,48 @@ ChartTmpComp = withViewFn(ChartTmpComp, (comp) => {
103
108
return mapScriptLoaded || window ?. google ;
104
109
} , [ mapScriptLoaded ] )
105
110
106
- const loadGoogleMapsData = ( ) => {
107
- setTimeout ( ( ) => {
108
- const echartsCompInstance = echartsCompRef ?. current ?. getEchartsInstance ( ) ;
109
- if ( ! echartsCompInstance ) {
110
- return _ . noop ;
111
- }
111
+ const loadGoogleMapData = ( ) => {
112
+ const echartsCompInstance = echartsCompRef ?. current ?. getEchartsInstance ( ) ;
113
+ if ( ! echartsCompInstance ) {
114
+ return _ . noop ;
115
+ }
112
116
113
- let mapInstance = undefined ;
114
- mapInstance = echartsCompInstance ?. getModel ( ) ?. getComponent ( "gmap" ) ?. getGoogleMap ( ) ;
115
- comp . dispatch ( changeChildAction ( "mapInstance" , mapInstance ) ) ;
116
- } , 500 )
117
+ comp . children . mapInstance . dispatch ( changeValueAction ( echartsCompInstance ) )
118
+ onMapEvent ( 'mapReady' )
117
119
}
118
120
121
+ const handleOnMapScriptLoad = ( ) => {
122
+ setMapScriptLoaded ( true ) ;
123
+ loadGoogleMapData ( ) ;
124
+ }
125
+
119
126
useEffect ( ( ) => {
120
127
if ( mode !== 'map' ) {
121
- comp . dispatch ( changeChildAction ( "mapInstance" , undefined ) ) ;
128
+ comp . children . mapInstance . dispatch ( changeValueAction ( undefined ) )
122
129
return ;
123
130
}
124
131
125
132
const gMapScript = loadGoogleMapsScript ( apiKey ) ;
126
133
if ( isMapScriptLoaded ) {
127
- loadGoogleMapsData ( ) ;
134
+ handleOnMapScriptLoad ( ) ;
128
135
return ;
129
136
}
130
- gMapScript . addEventListener ( 'load' , function ( ) {
131
- setMapScriptLoaded ( true ) ;
132
- loadGoogleMapsData ( ) ;
133
- } ) ;
137
+ gMapScript . addEventListener ( 'load' , handleOnMapScriptLoad ) ;
138
+ return ( ) => {
139
+ gMapScript . removeEventListener ( 'load' , handleOnMapScriptLoad ) ;
140
+ }
134
141
} , [ mode , apiKey , option ] )
135
142
143
+ useEffect ( ( ) => {
144
+ if ( mode !== 'map' ) return ;
145
+ onMapEvent ( 'centerPositionChange' ) ;
146
+ } , [ mode , mapCenterPosition . lat , mapCenterPosition . lng ] )
147
+
148
+ useEffect ( ( ) => {
149
+ if ( mode !== 'map' ) return ;
150
+ onMapEvent ( 'zoomLevelChange' ) ;
151
+ } , [ mode , mapZoomlevel ] )
152
+
136
153
return (
137
154
< ReactResizeDetector
138
155
onResize = { ( w , h ) => {
@@ -287,8 +304,38 @@ ChartComp = withMethodExposing(ChartComp, [
287
304
name : "getMapInstance" ,
288
305
} ,
289
306
execute : ( comp ) => {
290
- return comp . children . mapInstance . getView ( )
307
+ return new Promise ( resolve => {
308
+ let intervalCount = 0 ;
309
+ const mapInstanceInterval = setInterval ( ( ) => {
310
+ const instance = comp . children . mapInstance . getView ( ) ;
311
+ const mapInstance = instance ?. getModel ( ) ?. getComponent ( "gmap" ) ?. getGoogleMap ( )
312
+ if ( mapInstance || intervalCount === 10 ) {
313
+ clearInterval ( mapInstanceInterval )
314
+ resolve ( mapInstance )
315
+ }
316
+ intervalCount ++ ;
317
+ } , 1000 ) ;
318
+ } )
319
+ }
320
+ } ,
321
+ {
322
+ method : {
323
+ name : "getMapZoomLevel" ,
291
324
} ,
325
+ execute : ( comp ) => {
326
+ return comp . children . mapZoomLevel . getView ( ) ;
327
+ }
328
+ } ,
329
+ {
330
+ method : {
331
+ name : "getMapCenterPosition" ,
332
+ } ,
333
+ execute : ( comp ) => {
334
+ return Promise . resolve ( {
335
+ lng : comp . children . mapCenterLng . getView ( ) ,
336
+ lat : comp . children . mapCenterLat . getView ( ) ,
337
+ } ) ;
338
+ }
292
339
} ,
293
340
] )
294
341
0 commit comments