expo-gaode-map 1.0.2 → 1.0.3

package/ios/overlays/MarkerView.swift

@@ -3,13 +3,20 @@ import MAMapKit
 
 /**
  * 标记点视图
- * 
+ *
  * 负责:
  * - 在地图上显示标记点
  * - 管理标记点属性(位置、标题、描述)
  * - 支持拖拽功能
+ * - 支持自定义 children 视图
  */
 class MarkerView: ExpoView {
+    // MARK: - 事件派发器
+    let onPress = EventDispatcher()
+    let onDragStart = EventDispatcher()
+    let onDrag = EventDispatcher()
+    let onDragEnd = EventDispatcher()
+    
     /// 标记点位置
     var position: [String: Double] = [:]
     /// 标题
@@ -18,11 +25,27 @@ class MarkerView: ExpoView {
     var markerDescription: String = ""
     /// 是否可拖拽
     var draggable: Bool = false
+    /// 图标 URI
+    var iconUri: String?
+    /// 图标宽度
+    var iconWidth: Double = 40
+    /// 图标高度
+    var iconHeight: Double = 40
+    /// 中心偏移
+    var centerOffset: [String: Double]?
+    /// 是否显示动画
+    var animatesDrop: Bool = false
+    /// 大头针颜色
+    var pinColor: String = "red"
+    /// 是否显示气泡
+    var canShowCallout: Bool = true
     
     /// 地图视图弱引用
     private var mapView: MAMapView?
     /// 标记点对象
-    private var annotation: MAPointAnnotation?
+    var annotation: MAPointAnnotation?
+    /// 标记点视图
+    private var annotationView: MAAnnotationView?
     
     required init(appContext: AppContext? = nil) {
         super.init(appContext: appContext)
@@ -60,6 +83,9 @@ class MarkerView: ExpoView {
         
         mapView.addAnnotation(annotation)
         self.annotation = annotation
+        
+        // 获取 annotationView
+        annotationView = mapView.view(for: annotation)
     }
     
     /**
@@ -95,7 +121,33 @@ class MarkerView: ExpoView {
      */
     func setDraggable(_ draggable: Bool) {
         self.draggable = draggable
-        // iOS 高德地图标记默认不可拖拽，需要自定义实现
+        updateAnnotation()
+    }
+    
+    func setIcon(_ source: [String: Any]?) {
+        if let dict = source {
+            // 处理 require() 返回的对象
+            if let uri = dict["uri"] as? String {
+                self.iconUri = uri
+            }
+        }
+        updateAnnotation()
+    }
+    
+    func setCenterOffset(_ offset: [String: Double]) {
+        self.centerOffset = offset
+    }
+    
+    func setAnimatesDrop(_ animate: Bool) {
+        self.animatesDrop = animate
+    }
+    
+    func setPinColor(_ color: String) {
+        self.pinColor = color
+    }
+    
+    func setCanShowCallout(_ show: Bool) {
+        self.canShowCallout = show
     }
     
     /**

package/ios/overlays/PolygonView.swift

@@ -43,17 +43,29 @@ class PolygonView: ExpoView {
      * 更新多边形覆盖物
      */
     private func updatePolygon() {
-        guard let mapView = mapView else { return }
+        guard let mapView = mapView else {
+            print("❌ PolygonView.updatePolygon: mapView 为空")
+            return
+        }
         if let old = polygon { mapView.remove(old) }
         
         var coords = points.compactMap { point -> CLLocationCoordinate2D? in
             guard let lat = point["latitude"], let lng = point["longitude"] else { return nil }
             return CLLocationCoordinate2D(latitude: lat, longitude: lng)
         }
-        guard !coords.isEmpty else { return }
+        guard !coords.isEmpty else {
+            print("❌ PolygonView.updatePolygon: 点数组为空")
+            return
+        }
+        
+        print("🔶 PolygonView.updatePolygon: points=\(coords.count)个点")
+        print("🔶 PolygonView.updatePolygon: fillColor=\(String(describing: fillColor)), strokeColor=\(String(describing: strokeColor)), strokeWidth=\(strokeWidth)")
         
         polygon = MAPolygon(coordinates: &coords, count: UInt(coords.count))
         mapView.add(polygon!)
+        
+        renderer = nil
+        print("🔶 PolygonView.updatePolygon: renderer 已清空")
     }
     
     /**
@@ -63,9 +75,15 @@ class PolygonView: ExpoView {
     func getRenderer() -> MAOverlayRenderer {
         if renderer == nil, let polygon = polygon {
             renderer = MAPolygonRenderer(polygon: polygon)
-            renderer?.fillColor = ColorParser.parseColor(fillColor) ?? UIColor.clear
-            renderer?.strokeColor = ColorParser.parseColor(strokeColor) ?? UIColor.clear
+            let parsedFillColor = ColorParser.parseColor(fillColor)
+            let parsedStrokeColor = ColorParser.parseColor(strokeColor)
+            renderer?.fillColor = parsedFillColor ?? UIColor.clear
+            renderer?.strokeColor = parsedStrokeColor ?? UIColor.clear
             renderer?.lineWidth = CGFloat(strokeWidth)
+            print("🔶 PolygonView.getRenderer: 创建新 renderer")
+            print("🔶 PolygonView.getRenderer: fillColor=\(String(describing: parsedFillColor)), strokeColor=\(String(describing: parsedStrokeColor)), lineWidth=\(strokeWidth)")
+        } else {
+            print("🔶 PolygonView.getRenderer: 使用缓存的 renderer")
         }
         return renderer!
     }
@@ -76,7 +94,6 @@ class PolygonView: ExpoView {
      */
     func setPoints(_ points: [[String: Double]]) {
         self.points = points
-        renderer = nil
         updatePolygon()
     }
     
@@ -85,6 +102,7 @@ class PolygonView: ExpoView {
      * @param color 颜色值
      */
     func setFillColor(_ color: Any?) {
+        print("🔶 PolygonView.setFillColor: \(String(describing: color))")
         fillColor = color
         renderer = nil
         updatePolygon()
@@ -95,6 +113,7 @@ class PolygonView: ExpoView {
      * @param color 颜色值
      */
     func setStrokeColor(_ color: Any?) {
+        print("🔶 PolygonView.setStrokeColor: \(String(describing: color))")
         strokeColor = color
         renderer = nil
         updatePolygon()
@@ -105,6 +124,7 @@ class PolygonView: ExpoView {
      * @param width 宽度值
      */
     func setStrokeWidth(_ width: Float) {
+        print("🔶 PolygonView.setStrokeWidth: \(width)")
         strokeWidth = width
         renderer = nil
         updatePolygon()

package/ios/overlays/PolylineView.swift

@@ -43,17 +43,29 @@ class PolylineView: ExpoView {
      * 更新折线覆盖物
      */
     private func updatePolyline() {
-        guard let mapView = mapView else { return }
+        guard let mapView = mapView else {
+            print("❌ PolylineView.updatePolyline: mapView 为空")
+            return
+        }
         if let old = polyline { mapView.remove(old) }
         
         var coords = points.compactMap { point -> CLLocationCoordinate2D? in
             guard let lat = point["latitude"], let lng = point["longitude"] else { return nil }
             return CLLocationCoordinate2D(latitude: lat, longitude: lng)
         }
-        guard !coords.isEmpty else { return }
+        guard !coords.isEmpty else {
+            print("❌ PolylineView.updatePolyline: 点数组为空")
+            return
+        }
+        
+        print("🔷 PolylineView.updatePolyline: points=\(coords.count)个点")
+        print("🔷 PolylineView.updatePolyline: strokeColor=\(String(describing: strokeColor)), strokeWidth=\(strokeWidth), texture=\(String(describing: textureUrl))")
         
         polyline = MAPolyline(coordinates: &coords, count: UInt(coords.count))
         mapView.add(polyline!)
+        
+        renderer = nil
+        print("🔷 PolylineView.updatePolyline: renderer 已清空")
     }
     
     /**
@@ -66,10 +78,15 @@ class PolylineView: ExpoView {
             renderer?.lineWidth = CGFloat(strokeWidth)
             
             if let url = textureUrl {
+                print("🔷 PolylineView.getRenderer: 加载纹理 \(url)")
                 loadTexture(url: url, renderer: renderer!)
             } else {
-                renderer?.strokeColor = ColorParser.parseColor(strokeColor) ?? UIColor.clear
+                let parsedColor = ColorParser.parseColor(strokeColor)
+                renderer?.strokeColor = parsedColor ?? UIColor.clear
+                print("🔷 PolylineView.getRenderer: 创建新 renderer, strokeColor=\(String(describing: parsedColor)), lineWidth=\(strokeWidth)")
             }
+        } else {
+            print("🔷 PolylineView.getRenderer: 使用缓存的 renderer")
         }
         return renderer!
     }
@@ -126,7 +143,6 @@ class PolylineView: ExpoView {
      */
     func setPoints(_ points: [[String: Double]]) {
         self.points = points
-        renderer = nil
         updatePolyline()
     }
     
@@ -135,6 +151,7 @@ class PolylineView: ExpoView {
      * @param width 线宽值
      */
     func setStrokeWidth(_ width: Float) {
+        print("🔷 PolylineView.setStrokeWidth: \(width)")
         strokeWidth = width
         renderer = nil
         updatePolyline()
@@ -145,6 +162,7 @@ class PolylineView: ExpoView {
      * @param color 颜色值
      */
     func setStrokeColor(_ color: Any?) {
+        print("🔷 PolylineView.setStrokeColor: \(String(describing: color))")
         strokeColor = color
         renderer = nil
         updatePolyline()
@@ -155,6 +173,7 @@ class PolylineView: ExpoView {
      * @param url 图片 URL
      */
     func setTexture(_ url: String?) {
+        print("🔷 PolylineView.setTexture: \(String(describing: url))")
         textureUrl = url
         renderer = nil
         updatePolyline()

package/ios/utils/ColorParser.swift

@@ -12,12 +12,10 @@ class ColorParser {
     static func parseColor(_ colorValue: Any?) -> UIColor? {
         guard let colorValue = colorValue else { return nil }
         
-        // 如果是数字类型
         if let number = colorValue as? Int {
             return UIColor(hex: number)
         }
         
-        // 如果是字符串类型
         if let string = colorValue as? String {
             return parseColorString(string)
         }
@@ -79,12 +77,10 @@ class ColorParser {
             var hexNumber: UInt64 = 0
             
             if scanner.scanHexInt64(&hexNumber) {
-                // 尝试 ARGB 格式（Android 风格）
                 let alphaARGB = CGFloat((hexNumber & 0xff000000) >> 24) / 255
                 let redARGB = CGFloat((hexNumber & 0x00ff0000) >> 16) / 255
                 let greenARGB = CGFloat((hexNumber & 0x0000ff00) >> 8) / 255
                 let blueARGB = CGFloat(hexNumber & 0x000000ff) / 255
-                
                 return UIColor(red: redARGB, green: greenARGB, blue: blueARGB, alpha: alphaARGB)
             }
         }
@@ -98,7 +94,6 @@ class ColorParser {
                 let red = CGFloat((hexNumber & 0xff0000) >> 16) / 255
                 let green = CGFloat((hexNumber & 0x00ff00) >> 8) / 255
                 let blue = CGFloat(hexNumber & 0x0000ff) / 255
-                
                 return UIColor(red: red, green: green, blue: blue, alpha: alpha)
             }
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "expo-gaode-map",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "一个功能完整的高德地图 React Native 组件库，基于 Expo Modules 开发，提供地图显示、定位、覆盖物等功能。",
   "main": "build/index.js",
   "types": "build/index.d.ts",

package/src/ExpoGaodeMapView.tsx

@@ -22,6 +22,61 @@ const NativeView: React.ComponentType<MapViewProps & { ref?: React.Ref<NativeMap
 // 创建 Context 用于子组件访问 MapRef
 export const MapContext = React.createContext<React.RefObject<MapViewRef | null> | null>(null);
 
+// Marker 事件管理器
+type MarkerEventCallbacks = {
+  onPress?: () => void;
+  onDragStart?: () => void;
+  onDrag?: () => void;
+  onDragEnd?: (event: { nativeEvent: LatLng }) => void;
+};
+
+class MarkerEventManager {
+  private callbacks = new Map<string, MarkerEventCallbacks>();
+  
+  register(markerId: string, callbacks: MarkerEventCallbacks) {
+    this.callbacks.set(markerId, callbacks);
+  }
+  
+  unregister(markerId: string) {
+    this.callbacks.delete(markerId);
+  }
+  
+  trigger(markerId: string, eventType: keyof MarkerEventCallbacks, data?: any) {
+    const callbacks = this.callbacks.get(markerId);
+    if (callbacks && callbacks[eventType]) {
+      callbacks[eventType]!(data);
+    }
+  }
+}
+
+export const MarkerEventContext = React.createContext<MarkerEventManager | null>(null);
+
+// Circle 事件管理器
+type CircleEventCallbacks = {
+  onPress?: () => void;
+};
+
+class CircleEventManager {
+  private callbacks = new Map<string, CircleEventCallbacks>();
+  
+  register(circleId: string, callbacks: CircleEventCallbacks) {
+    this.callbacks.set(circleId, callbacks);
+  }
+  
+  unregister(circleId: string) {
+    this.callbacks.delete(circleId);
+  }
+  
+  trigger(circleId: string, eventType: keyof CircleEventCallbacks) {
+    const callbacks = this.callbacks.get(circleId);
+    if (callbacks && callbacks[eventType]) {
+      callbacks[eventType]!();
+    }
+  }
+}
+
+export const CircleEventContext = React.createContext<CircleEventManager | null>(null);
+
 /**
  * 高德地图视图组件，提供地图操作API和覆盖物管理功能
  * 
@@ -43,6 +98,54 @@ export const MapContext = React.createContext<React.RefObject<MapViewRef | null>
 const ExpoGaodeMapView = React.forwardRef<MapViewRef, MapViewProps>((props, ref) => {
   const nativeRef = React.useRef<NativeMapViewRef>(null);
   const internalRef = React.useRef<MapViewRef | null>(null);
+  const markerEventManager = React.useRef(new MarkerEventManager()).current;
+  const circleEventManager = React.useRef(new CircleEventManager()).current;
+  
+  // 处理 Marker 事件
+  const handleMarkerPress = React.useCallback((event: any) => {
+    const markerId = event.nativeEvent?.markerId;
+    if (markerId) {
+      markerEventManager.trigger(markerId, 'onPress');
+    }
+    props.onMarkerPress?.(event);
+  }, [props.onMarkerPress]);
+  
+  const handleMarkerDragStart = React.useCallback((event: any) => {
+    const markerId = event.nativeEvent?.markerId;
+    if (markerId) {
+      markerEventManager.trigger(markerId, 'onDragStart');
+    }
+    props.onMarkerDragStart?.(event);
+  }, [props.onMarkerDragStart]);
+  
+  const handleMarkerDrag = React.useCallback((event: any) => {
+    const markerId = event.nativeEvent?.markerId;
+    if (markerId) {
+      markerEventManager.trigger(markerId, 'onDrag');
+    }
+    props.onMarkerDrag?.(event);
+  }, [props.onMarkerDrag]);
+  
+  const handleMarkerDragEnd = React.useCallback((event: any) => {
+    const markerId = event.nativeEvent?.markerId;
+    if (markerId) {
+      markerEventManager.trigger(markerId, 'onDragEnd', {
+        nativeEvent: {
+          latitude: event.nativeEvent.latitude,
+          longitude: event.nativeEvent.longitude
+        }
+      });
+    }
+    props.onMarkerDragEnd?.(event);
+  }, [props.onMarkerDragEnd]);
+  
+  const handleCirclePress = React.useCallback((event: any) => {
+    const circleId = event.nativeEvent?.circleId;
+    if (circleId) {
+      circleEventManager.trigger(circleId, 'onPress');
+    }
+    props.onCirclePress?.(event);
+  }, [props.onCirclePress]);
 
   const apiRef: MapViewRef = React.useMemo(() => ({
     /**
@@ -243,7 +346,21 @@ const ExpoGaodeMapView = React.forwardRef<MapViewRef, MapViewProps>((props, ref)
 
   return (
     <MapContext.Provider value={internalRef}>
-      <NativeView ref={nativeRef} {...props} />
+      <MarkerEventContext.Provider value={markerEventManager}>
+        <CircleEventContext.Provider value={circleEventManager}>
+          <NativeView
+            ref={nativeRef}
+            {...props}
+            onMarkerPress={handleMarkerPress}
+            onMarkerDragStart={handleMarkerDragStart}
+            onMarkerDrag={handleMarkerDrag}
+            onMarkerDragEnd={handleMarkerDragEnd}
+            onCirclePress={handleCirclePress}
+          >
+            {props.children}
+          </NativeView>
+        </CircleEventContext.Provider>
+      </MarkerEventContext.Provider>
     </MapContext.Provider>
   );
 });

package/src/components/overlays/Circle.tsx

@@ -1,72 +1,55 @@
 import * as React from 'react';
 import type { CircleProps } from '../../types';
-import { MapContext } from '../../ExpoGaodeMapView';
+import { MapContext, CircleEventContext } from '../../ExpoGaodeMapView';
 
-/**
- * Circle 组件 - 高德地图圆形覆盖物
- * 
- * 该组件用于在高德地图上绘制圆形覆盖物，支持动态更新圆形属性。
- * 
- * @param {CircleProps} props - 圆形属性配置
- * @param {LatLng} props.center - 圆形中心点坐标
- * @param {number} props.radius - 圆形半径（米）
- * @param {string} props.fillColor - 填充颜色（十六进制或RGBA）
- * @param {string} props.strokeColor - 边框颜色（十六进制或RGBA）
- * @param {number} props.strokeWidth - 边框宽度（像素）
- * 
- * @returns {null} 该组件不渲染任何UI元素
- * 
- * @remarks
- * 1. 组件挂载时自动添加圆形到地图
- * 2. 组件卸载时自动移除圆形
- * 3. 当中心点、半径、颜色等属性变化时自动更新圆形
- * 4. 使用 React Context 获取地图实例引用
- */
 export default function Circle(props: CircleProps) {
   const mapRef = React.useContext(MapContext);
+  const eventManager = React.useContext(CircleEventContext);
   const circleIdRef = React.useRef<string | null>(null);
+  const propsRef = React.useRef(props);
   
-  console.log('Circle 组件渲染，props:', JSON.stringify(props));
+  React.useEffect(() => {
+    propsRef.current = props;
+  }, [props]);
   
   React.useEffect(() => {
-    console.log('Circle useEffect - 添加圆形到地图');
-    
-    if (!mapRef?.current) {
-      console.warn('MapRef 不可用');
-      return;
-    }
-    
-    // 添加圆形
-    const circleId = `circle_${Date.now()}_${Math.random()}`;
-    circleIdRef.current = circleId;
+    const checkAndAdd = () => {
+      if (!mapRef?.current) {
+        setTimeout(checkAndAdd, 50);
+        return;
+      }
+      
+      const circleId = `circle_${Date.now()}_${Math.random()}`;
+      circleIdRef.current = circleId;
+      
+      if (eventManager && props.onPress) {
+        eventManager.register(circleId, {
+          onPress: props.onPress,
+        });
+      }
+      
+      mapRef.current.addCircle(circleId, propsRef.current);
+    };
     
-    mapRef.current.addCircle(circleId, props);
-    console.log('✅ 圆形已添加:', circleId);
+    checkAndAdd();
     
-    // 清理函数 - 移除圆形
     return () => {
-      console.log('Circle useEffect cleanup - 移除圆形');
-      if (circleIdRef.current && mapRef?.current) {
-        mapRef.current.removeCircle(circleIdRef.current);
-        console.log('✅ 圆形已移除:', circleIdRef.current);
+      if (circleIdRef.current) {
+        if (eventManager) {
+          eventManager.unregister(circleIdRef.current);
+        }
+        if (mapRef?.current) {
+          mapRef.current.removeCircle(circleIdRef.current);
+        }
       }
     };
   }, []);
 
-
-  /**
-   * 当Circle组件的props发生变化时，更新地图上的圆形覆盖物
-   * 如果圆形ID和地图引用都存在，则调用地图实例的updateCircle方法更新圆形
-   * 更新成功后会打印日志确认
-   */
   React.useEffect(() => {
-    console.log('Circle props 变化，更新圆形');
     if (circleIdRef.current && mapRef?.current) {
       mapRef.current.updateCircle(circleIdRef.current, props);
-      console.log('✅ 圆形已更新:', circleIdRef.current);
     }
   }, [props.center, props.radius, props.fillColor, props.strokeColor, props.strokeWidth]);
   
-  // 不渲染任何 UI
   return null;
 }

package/src/components/overlays/Marker.tsx

@@ -1,56 +1,83 @@
 import * as React from 'react';
-import { MapContext } from '../../ExpoGaodeMapView';
+import { Image } from 'react-native';
+import { MapContext, MarkerEventContext } from '../../ExpoGaodeMapView';
 import type { MarkerProps } from '../../types';
 
-/**
- * Marker 组件 - 用于在地图上显示标记点
- * 
- * @param props - 标记点属性配置
- * @param props.position - 标记点坐标 [经度, 纬度]
- * @param props.title - 标记点标题
- * @param props.draggable - 标记点是否可拖动
- * 
- * @remarks
- * 组件内部会自动处理标记点的添加、更新和移除
- * 当组件卸载时会自动移除对应的地图标记
- * 
- * @note
- * 组件本身不渲染任何DOM元素，仅作为地图标记的逻辑容器
- */
 export default function Marker(props: MarkerProps) {
-  const mapRef = React.useContext(MapContext);
-  const markerIdRef = React.useRef<string>(`marker_${Date.now()}_${Math.random()}`);
-
-  console.log('Marker 组件渲染，props:', props);
+  return <MarkerImperative {...props} />;
+}
 
-  // 添加标记
+function MarkerImperative(props: MarkerProps) {
+  const mapRef = React.useContext(MapContext);
+  const eventManager = React.useContext(MarkerEventContext);
+  const markerIdRef = React.useRef<string | null>(null);
+  const propsRef = React.useRef(props);
+  
+  React.useEffect(() => {
+    propsRef.current = props;
+  }, [props]);
+  
   React.useEffect(() => {
-    const markerId = markerIdRef.current;
+    const checkAndAdd = () => {
+      if (!mapRef?.current) {
+        setTimeout(checkAndAdd, 50);
+        return;
+      }
+      
+      const markerId = `marker_${Date.now()}_${Math.random()}`;
+      markerIdRef.current = markerId;
+      
+      if (eventManager) {
+        eventManager.register(markerId, {
+          onPress: props.onPress,
+          onDragStart: props.onDragStart,
+          onDrag: props.onDrag,
+          onDragEnd: props.onDragEnd,
+        });
+      }
+      
+      const processedProps = { ...propsRef.current };
+      if (processedProps.icon && typeof processedProps.icon === 'number') {
+        const resolved = Image.resolveAssetSource(processedProps.icon);
+        processedProps.icon = resolved;
+      }
+      
+      mapRef.current.addMarker(markerId, processedProps);
+    };
+    
+    checkAndAdd();
     
-    console.log('Marker useEffect - 添加标记到地图');
-    mapRef?.current?.addMarker?.(markerId, props).then(() => {
-      console.log('✅ 标记已添加:', markerId);
-    }).catch((error: any) => {
-      console.error('❌ 添加标记失败:', error);
-    });
-
     return () => {
-      console.log('Marker useEffect cleanup - 移除标记');
-      mapRef?.current?.removeMarker?.(markerId).catch((error: any) => {
-        console.error('❌ 移除标记失败:', error);
-      });
+      if (markerIdRef.current) {
+        if (eventManager) {
+          eventManager.unregister(markerIdRef.current);
+        }
+        if (mapRef?.current) {
+          mapRef.current.removeMarker(markerIdRef.current);
+        }
+      }
     };
   }, []);
 
-  // 监听 Props 变化，更新标记
   React.useEffect(() => {
-    const markerId = markerIdRef.current;
-    
-    console.log('Marker props 变化，更新标记:', props);
-    mapRef?.current?.updateMarker?.(markerId, props).catch((error: any) => {
-      console.error('❌ 更新标记失败:', error);
-    });
-  }, [props.position, props.title, props.draggable]);
-
+    if (markerIdRef.current && mapRef?.current) {
+      const processedProps = { ...props };
+      if (processedProps.icon && typeof processedProps.icon === 'number') {
+        const resolved = Image.resolveAssetSource(processedProps.icon);
+        processedProps.icon = resolved;
+      }
+      mapRef.current.updateMarker(markerIdRef.current, processedProps);
+    }
+  }, [
+    props.position?.latitude,
+    props.position?.longitude,
+    props.title,
+    props.draggable,
+    props.icon,
+    props.iconWidth,
+    props.iconHeight,
+    props.pinColor
+  ]);
+  
   return null;
 }