feat: drawing manager support

__mocks__/azure-maps-control.js

@@ -9,12 +9,14 @@ class DataSource {
 module.exports = {
   Map: jest.fn(() => ({
     controls: {
-      add: jest.fn()
+      add: jest.fn(),
+      remove: jest.fn()
     },
     events: {
       add: jest.fn((eventName, callback = () => {}) => {
         callback()
-      })
+      }),
+      remove: jest.fn()
     },
     imageSprite: {
       add: jest.fn(),

__mocks__/azure-maps-drawing-tools.js

@@ -0,0 +1,48 @@
+const atlas = require('azure-maps-control')
+
+module.exports = {
+  control: {
+    DrawingToolbar: jest.fn(options => ({
+      setOptions: jest.fn()
+    }))
+  },
+  drawing: {
+    DrawingManager: jest.fn((map, options) => {
+      let toolbar;
+      const dataSource = new atlas.source.DataSource()
+      map.sources.add(dataSource)
+      return {
+        setOptions: jest.fn(options => {
+          if(!toolbar){
+            map.controls.add(options.toolbar)
+          } else if (toolbar !== options.toolbar){
+            map.control.remove(toolbar)
+            map.control.add(options.toolbar)
+          }
+          toolbar = options.toolbar
+        }),
+        getOptions: jest.fn(() => ({})),
+        dispose: jest.fn(),
+        getLayers: jest.fn(() => ({
+          lineLayer: {
+            layer: 'LineLayer',
+            setOptions: jest.fn()
+          },
+          polygonLayer: {
+            layer: 'PolygonLayer',
+            setOptions: jest.fn()
+          },
+          polygonOutlineLayer: {
+            layer: 'LineLayer',
+            setOptions: jest.fn()
+          },
+          pointLayer: {
+            layer: 'SymbolLayer',
+            setOptions: jest.fn()
+          }
+        })),
+        getSource: jest.fn(() => dataSource)
+      }
+    })
+  }
+}

package.json

@@ -83,6 +83,7 @@
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "^10.0.0",
     "@rollup/plugin-replace": "^2.3.4",
+    "@testing-library/dom": "^7.30.3",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/react-hooks": "^5.1.0",
@@ -91,10 +92,12 @@
     "@types/react": "^16.9.53",
     "@types/react-dom": "^16.9.8",
     "babel-preset-env": "^1.7.0",
+    "builtin-modules": "^3.2.0",
     "concurrently": "^5.3.0",
     "cross-env": "^7.0.2",
     "eslint": "^7.14.0",
     "husky": "^4.3.0",
+    "jest": "^26.6.3",
     "lint-staged": "^10.5.2",
     "parcel-bundler": "1.12.3",
     "prettier": "^2.2.0",
@@ -114,14 +117,18 @@
     "typescript": "^4.1.2"
   },
   "peerDependencies": {
-    "azure-maps-control": "2.0.32",
+    "azure-maps-control": "^2.0.32",
+    "azure-maps-drawing-tools": "^0.1.6",
     "guid-typescript": "^1.0.9",
     "mapbox-gl": "^1.10.0",
     "react": "^16.10.2",
     "react-dom": "^16.10.2"
   },
   "dependencies": {
-    "azure-maps-control": "2.0.32",
+    "azure-maps-control": "^2.0.32",
+    "azure-maps-drawing-tools": "^0.1.6",
+    "@testing-library/react-hooks": "^5.1.0",
+    "@types/uuid": "^7.0.0",
     "guid-typescript": "^1.0.9",
     "mapbox-gl": "^1.10.0"
   }

rollup.config.js

@@ -35,7 +35,7 @@ export default {
     include: "src/**",
   },
   plugins: [
-    externals({ peerDeps: true, deps: true, exclude: "azure-maps-control" }),
+    externals({ peerDeps: true, deps: true, exclude: ["azure-maps-control", "azure-maps-drawing-tools"] }),
     replace({
       "process.env.NODE_ENV": JSON.stringify(env),
       preventAssignment: true,

src/contexts/AzureMapDrawingLayerContext.test.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+import { AzureMapDrawingLayerProvider } from './AzureMapDrawingLayerContext'
+
+describe('AzureMapDrawingLayerProvider', () => {
+  it('should create and render AzureMapDrawingLayerProvider', () => {
+    const { container } = render(<AzureMapDrawingLayerProvider type="polygonLayer" options={{fillColor: 'green'}}/>)
+    expect(container).toMatchSnapshot()
+  })
+})

src/contexts/AzureMapDrawingLayerContext.tsx

@@ -0,0 +1,36 @@
+import React, { createContext } from 'react'
+import { useAzureMapDrawingLayer } from '../hooks/useAzureMapDrawingLayer'
+import { IAzureDrawingLayerStatefulProviderProps, IAzureMapLayerProps } from '../types'
+
+const AzureMapDrawingLayerContext = createContext<IAzureMapLayerProps>({
+  layerRef: null
+})
+const { Provider, Consumer: AzureMapDrawingLayerConsumer } = AzureMapDrawingLayerContext
+
+const AzureMapDrawingLayerStatefulProvider = ({
+  options,
+  type,
+  events,
+  lifecycleEvents
+}: IAzureDrawingLayerStatefulProviderProps) => {
+  const { layerRef } = useAzureMapDrawingLayer({
+    options,
+    type,
+    events,
+    lifecycleEvents
+  })
+
+  return (
+    <Provider
+      value={{
+        layerRef
+      }}
+    ></Provider>
+  )
+}
+
+export {
+  AzureMapDrawingLayerContext,
+  AzureMapDrawingLayerConsumer,
+  AzureMapDrawingLayerStatefulProvider as AzureMapDrawingLayerProvider
+}

src/contexts/AzureMapDrawingManagerContext.test.tsx

@@ -0,0 +1,98 @@
+import { renderHook } from '@testing-library/react-hooks'
+import { Map, Shape } from 'azure-maps-control'
+import { drawing } from 'azure-maps-drawing-tools'
+import React, { useContext } from 'react'
+import { IAzureDrawingManagerStatefulProviderProps } from '../types'
+import { AzureMapsContext, AzureMapsProvider } from './AzureMapContext'
+import { AzureMapDrawingManagerProvider, AzureMapDrawingManagerContext } from './AzureMapDrawingManagerContext'
+
+const mapContextProps = {
+  mapRef: null,
+  isMapReady: false,
+  setMapReady: jest.fn(),
+  removeMapRef: jest.fn(),
+  setMapRef: jest.fn()
+}
+
+const mapRef = new Map('fake', {})
+
+const useContextConsumer = () => {
+  const drawingManagerContext = useContext(AzureMapDrawingManagerContext)
+  return drawingManagerContext
+}
+
+const wrapWithDrawingManagerContext = (props: IAzureDrawingManagerStatefulProviderProps) => ({
+  children
+}: {
+  children?: any
+}) => {
+  return (
+    <AzureMapsContext.Provider
+      value={{
+        ...mapContextProps,
+        mapRef
+      }}
+    >
+      <AzureMapDrawingManagerProvider {...{ ...props }}>{children}</AzureMapDrawingManagerProvider>
+    </AzureMapsContext.Provider>
+  )
+}
+
+describe('AzureMapDataSourceProvider tests', () => {
+  it('should add drawing manager datasource to map ref on map ready', () => {  
+    mapRef.sources.add = jest.fn()
+    const { result } = renderHook(() => useContextConsumer(), {
+      wrapper: wrapWithDrawingManagerContext({ options: {} })
+    })
+
+    expect(mapRef.sources.add).toHaveBeenCalledWith(result.current.drawingManagerRef?.getSource())
+  })
+
+  it('should add passed events to the map with DrawingManager target', () => {  
+    (mapRef.events.add as any) = jest.fn((eventType, targetOrCallback, callback) => {
+      if(callback){
+        callback()
+      } else {
+        // for ready event 
+        targetOrCallback()
+      }
+    })
+
+    const drawingmodechanged = (mode: drawing.DrawingMode) => {}
+    const drawingstarted = (shape: Shape) => {}
+    const { result } = renderHook(() => useContextConsumer(), {
+      wrapper: wrapWithDrawingManagerContext({ options: {}, events: { drawingstarted, drawingmodechanged }})
+    })
+
+    expect(mapRef.events.add).toHaveBeenCalledWith(
+      'drawingmodechanged',
+      result.current.drawingManagerRef,
+      drawingmodechanged
+    )
+
+    expect(mapRef.events.add).toHaveBeenCalledWith(
+      'drawingstarted',
+      result.current.drawingManagerRef,
+      drawingstarted
+    )
+  })
+
+  it('should discard drawing event when it is undefined', () => {  
+    mapRef.events.add = jest.fn((eventName: any, callback: any) => callback())
+    const { result } = renderHook(() => useContextConsumer(), {
+      wrapper: wrapWithDrawingManagerContext({ options: {}, events: { drawingstarted: undefined }})
+    })
+
+    // only ready event handler should have been added
+    expect(mapRef.events.add).toHaveBeenCalledWith('ready', expect.any(Function))
+  })
+
+  it('should add toolbar control to map ref on map ready', () => { 
+    mapRef.controls.add = jest.fn() 
+    const { result } = renderHook(() => useContextConsumer(), {
+      wrapper: wrapWithDrawingManagerContext({ options: { toolbar: { position: 'top-right' }}})
+    })
+
+    expect(mapRef.controls.add).toBeCalledTimes(1)
+  })
+})

src/contexts/AzureMapDrawingManagerContext.tsx

@@ -0,0 +1,116 @@
+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, control } from 'azure-maps-drawing-tools'
+import {
+  DrawingManagerType,
+  IAzureDrawingManagerStatefulProviderProps,
+  IAzureDrawingManagerEventType,
+  IAzureDrawingManagerDrawingEventType,
+  IAzureMapDrawingManagerProps,
+  IAzureMapsContextProps,
+  MapType
+} from '../types'
+import { AzureMapsContext } from './AzureMapContext'
+import { useCheckRef } from '../hooks/useCheckRef'
+import { Shape } from 'azure-maps-control'
+import { AzureMapDataSourceContext } from './AzureMapDataSourceContext'
+
+const AzureMapDrawingManagerContext = createContext<IAzureMapDrawingManagerProps>({
+  drawingManagerRef: null
+})
+
+const { Provider: DrawingManagerProvider, Consumer: AzureMapDrawingManagerConsumer } = AzureMapDrawingManagerContext
+const { Provider: DataSourceProvider } = AzureMapDataSourceContext
+
+// FIXME: this is used until ts understanding azure-maps-control.EventManager extension in azure-maps-drawing-tools is resolved
+// copies EventManager definitions from azure-maps-drawing-tools
+interface _EventManager {
+  add(eventType: "drawingmodechanged", target: drawing.DrawingManager, callback: (e: drawing.DrawingMode) => void): void;
+  add(eventType: "drawingchanged" | "drawingchanging" | "drawingcomplete" | "drawingstarted", target: drawing.DrawingManager, callback: (e: Shape) => void): void;
+  remove(eventType: string, target: drawing.DrawingManager, callback: (e?: any) => void): void
+} 
+
+const AzureMapDrawingManagerStatefulProvider = ({
+  options,
+  children,
+  events = {}
+}: IAzureDrawingManagerStatefulProviderProps) => {
+  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, MapType>(mapRef, mapRef, mref => {
+    mref.events.add('ready', () => {
+      // 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())
+      setToolbarOnceReadyRef(toolbar)
+
+      // register drawing events
+      for (const eventType in events) {
+        const handler = events[eventType as IAzureDrawingManagerEventType]
+        if(!handler){ 
+          continue 
+        }
+
+        // NOTE: duplication to have the explicit types instead of any
+        if(eventType == 'drawingmodechanged'){
+          (mref.events as _EventManager).add(eventType, drawingManager, handler as (a: drawing.DrawingMode) => void)
+        } else {
+          (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, drawingManager, handler)
+          }
+        }
+      }
+    })
+  })
+
+  useEffect(() => {
+    if(drawingManagerRef && options){
+      drawingManagerRef.setOptions({ ...options, toolbar: toolbarOnceReadyRef })
+    }
+    if(toolbarOnceReadyRef && options && options.toolbar){
+      toolbarOnceReadyRef.setOptions(options.toolbar)
+    }
+  }, [drawingManagerRef, options, toolbarOnceReadyRef])
+
+  return (
+    <DrawingManagerProvider
+      value={{
+        drawingManagerRef
+      }}
+    >
+      <DataSourceProvider value={{ dataSourceRef }}>
+        {mapRef && drawingManagerRef && children}
+      </DataSourceProvider>
+    </DrawingManagerProvider>
+  )
+}
+
+export {
+  AzureMapDrawingManagerContext,
+  AzureMapDrawingManagerConsumer,
+  AzureMapDrawingManagerStatefulProvider as AzureMapDrawingManagerProvider
+}

src/contexts/__snapshots__/AzureMapDrawingLayerContext.test.tsx.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AzureMapDrawingLayerProvider should create and render AzureMapDrawingLayerProvider 1`] = `<div />`;