fix: logic fixes, create toolbar in map ready to avoid runtime issues

Author: ambientlight

__mocks__/azure-maps-drawing-tools.js

@@ -0,0 +1,4 @@
+module.exports = {
+  control: {},
+  drawing: {}
+}

rollup.config.js

@@ -55,6 +55,6 @@ export default {
       babelHelpers: "runtime",
       include: ["./src/**/*"],
     }),
-    // terser(),
+    terser(),
   ],
 };

src/contexts/AzureMapDrawingManagerContext.tsx

@@ -2,7 +2,7 @@ import React, { createContext, useContext, useEffect, useState } from 'react'
 import 'azure-maps-drawing-tools/dist/atlas-drawing.min.css'
 
 import atlas from 'azure-maps-control'
-import { drawing } from 'azure-maps-drawing-tools'
+import { drawing, control } from 'azure-maps-drawing-tools'
 import {
   DrawingManagerType,
   IAzureDrawingManagerStatefulProviderProps,
@@ -40,13 +40,22 @@ const AzureMapDrawingManagerStatefulProvider = ({
   const { mapRef } = useContext<IAzureMapsContextProps>(AzureMapsContext)
   const [drawingManagerRef, setDrawingManagerRef] = useState<drawing.DrawingManager | null>(null)
   const [dataSourceRef, setDataSourceRef] = useState<atlas.source.DataSource | null>(null)
+  const [toolbarOnceReadyRef, setToolbarOnceReadyRef] = useState<control.DrawingToolbar | undefined>(undefined)
 
-  useCheckRef<MapType, DrawingManagerType>(mapRef, drawingManagerRef, (mref, dmref) => {
+  useCheckRef<MapType, MapType>(mapRef, mapRef, mref => {
     mref.events.add('ready', () => {
-      const drawingManager = new drawing.DrawingManager(mref, options)
+      // NOTE: if DrawingToolbar gets instantiated before map is 'ready', weird runtime errors follow. 
+      // create toolbar here instead
+      const drawingManager = new drawing.DrawingManager(mref)
+      const toolbar = options.toolbar ? new control.DrawingToolbar(options.toolbar) : undefined
+      drawingManager.setOptions({ 
+        ...options, 
+        toolbar
+      })
+
       setDrawingManagerRef(drawingManager)
       setDataSourceRef(drawingManager.getSource())
-      drawingManager.getLayers()
+      setToolbarOnceReadyRef(toolbar)
 
       // register drawing events
       for (const eventType in events) {
@@ -57,31 +66,33 @@ const AzureMapDrawingManagerStatefulProvider = ({
 
         // NOTE: duplication to have the explicit types instead of any
         if(eventType == 'drawingmodechanged'){
-          (mref.events as _EventManager).add(eventType, dmref, handler as (a: drawing.DrawingMode) => void)
+          (mref.events as _EventManager).add(eventType, drawingManager, handler as (a: drawing.DrawingMode) => void)
         } else {
-          (mref.events as _EventManager).add(eventType as IAzureDrawingManagerDrawingEventType, dmref, handler as (e: Shape) => void)
+          (mref.events as _EventManager).add(eventType as IAzureDrawingManagerDrawingEventType, drawingManager, handler as (e: Shape) => void)
         }
       }
 
       return () => {
         setDrawingManagerRef(null)
         setDataSourceRef(null)
+        setToolbarOnceReadyRef(undefined)
 
         for (const eventType in events) {
           const handler = events[eventType as IAzureDrawingManagerEventType];
           if(handler){
-            (mref.events as _EventManager).remove(eventType, dmref, handler)
+            (mref.events as _EventManager).remove(eventType, drawingManager, handler)
           }
         }
       }
     })
   })
-  
+
   useEffect(() => {
-    if(drawingManagerRef && options){ 
-      drawingManagerRef.setOptions(options)
+    if(drawingManagerRef && options){
+      drawingManagerRef.setOptions({ ...options, toolbar: toolbarOnceReadyRef })
+      toolbarOnceReadyRef?.setOptions(options.toolbar)
     }
-  }, [drawingManagerRef, options])  
+  }, [drawingManagerRef, options, toolbarOnceReadyRef])
 
   return (
     <DrawingManagerProvider

src/hooks/useAzureMapDrawingLayer.tsx

@@ -1,14 +1,9 @@
-import React, { createContext, useContext, useEffect, useState } from 'react'
+import { useContext, useEffect, useState } from 'react'
 import { useCheckRef } from '../hooks/useCheckRef'
-import { DrawingManagerType, IAzureLayerStatefulProviderProps, IAzureDrawingLayerStatefulProviderProps, IAzureMapDrawingManagerProps, IAzureMapLayerProps, IAzureMapsContextProps, LayerType, MapType } from '../types'
+import { DrawingManagerType, IAzureDrawingLayerStatefulProviderProps, IAzureMapDrawingManagerProps, IAzureMapsContextProps, LayerType, MapType } from '../types'
 import { AzureMapsContext } from '../contexts/AzureMapContext'
 import { AzureMapDrawingManagerContext } from '../contexts/AzureMapDrawingManagerContext'
 
-const AzureMapLayerContext = createContext<IAzureMapLayerProps>({
-  layerRef: null
-})
-const { Provider, Consumer: AzureMapLayerConsumer } = AzureMapLayerContext
-
 export const useAzureMapDrawingLayer = ({
   options,
   type,

src/react-azure-maps.ts

@@ -22,6 +22,11 @@ export {
   AzureMapDrawingManagerConsumer,
   AzureMapDrawingManagerProvider
 } from './contexts/AzureMapDrawingManagerContext'
+export {
+  AzureMapDrawingLayerContext,
+  AzureMapDrawingLayerConsumer,
+  AzureMapDrawingLayerProvider
+} from './contexts/AzureMapDrawingLayerContext'
 export { default as AzureMapPopup } from './components/AzureMapPopup/AzureMapPopup'
 export { default as useCreatePopup } from './components/AzureMapPopup/useCreateAzureMapPopup'
 

src/types.ts

@@ -34,7 +34,7 @@ import atlas, {
   BubbleLayerOptions,
   LayerOptions
 } from 'azure-maps-control'
-import { drawing, DrawingManagerOptions } from 'azure-maps-drawing-tools'
+import { drawing, DrawingManagerOptions, DrawingToolbarOptions } from 'azure-maps-drawing-tools'
 
 export type IAzureMapOptions = ServiceOptions &
   StyleOptions &
@@ -339,7 +339,7 @@ export interface IAzureMapDrawingManagerProps {
 }
 
 export interface IAzureDrawingManagerStatefulProviderProps {
-  options: DrawingManagerOptions
+  options: Omit<DrawingManagerOptions, 'toolbar'> & { 'toolbar': DrawingToolbarOptions }
   events?: IAzureDrawingManagerEvent
   children?: 
     | Array<IAzureDataSourceChildren | null>