From 9a05e0f7b7598bb37149e4e1a32204f3cb7da70a Mon Sep 17 00:00:00 2001 From: psrednicki Date: Sun, 1 Nov 2020 13:03:54 +0100 Subject: [PATCH] feat: add drawing manager tools --- package.json | 2 + .../AzureMapDrawingManagerContext.tsx | 57 +++++++++++++++++++ src/react-azure-maps.ts | 5 ++ src/types.ts | 25 ++++++++ yarn.lock | 45 ++++----------- 5 files changed, 99 insertions(+), 35 deletions(-) create mode 100644 src/contexts/AzureMapDrawingManagerContext.tsx diff --git a/package.json b/package.json index 84f476f..2d44b0a 100644 --- a/package.json +++ b/package.json @@ -89,6 +89,7 @@ }, "peerDependencies": { "azure-maps-control": "2.0.31", + "azure-maps-drawing-tools": "^0.1.4", "react": "^16.10.2", "react-dom": "^16.10.2" }, @@ -96,6 +97,7 @@ "@testing-library/react-hooks": "^3.2.1", "@types/uuid": "^7.0.0", "azure-maps-control": "2.0.31", + "azure-maps-drawing-tools": "^0.1.4", "guid-typescript": "^1.0.9", "mapbox-gl": "^1.10.0", "react-test-renderer": "^16.13.0", diff --git a/src/contexts/AzureMapDrawingManagerContext.tsx b/src/contexts/AzureMapDrawingManagerContext.tsx new file mode 100644 index 0000000..58ed1a7 --- /dev/null +++ b/src/contexts/AzureMapDrawingManagerContext.tsx @@ -0,0 +1,57 @@ +import React, { createContext, useContext, useEffect, useState } from 'react' +import 'azure-maps-drawing-tools/dist/atlas-drawing.min.css' + +import { + IAzureDrawingManagerStatefulProviderProps, + IAzureMapDrawingManagerProps, + IAzureMapsContextProps, + MapType +} from '../types' +import { drawing } from 'azure-maps-drawing-tools' +import { AzureMapsContext } from './AzureMapContext' +import { useCheckRefMount } from '../hooks/useCheckRef' + +const AzureMapDrawingManagerContext = createContext({ + drawingManagerRef: null +}) + +const { + Provider: DrawingManagerProvider, + Consumer: AzureMapDrawingManagerConsumer +} = AzureMapDrawingManagerContext + +const AzureMapDrawingManagerStatefulProvider = ({ + options, + children +}: IAzureDrawingManagerStatefulProviderProps) => { + const { mapRef } = useContext(AzureMapsContext) + const [drawingManagerRef, setDrawingManagerRef] = useState(null) + + useCheckRefMount(mapRef, true, mref => { + const drawingManager = new drawing.DrawingManager(mref) + drawingManager.setOptions(options) + setDrawingManagerRef(drawingManager) + }) + + useEffect(() => { + if (drawingManagerRef && options) { + drawingManagerRef.setOptions(options) + } + }, [options]) + + return ( + + {mapRef && drawingManagerRef && children} + + ) +} + +export { + AzureMapDrawingManagerContext, + AzureMapDrawingManagerConsumer, + AzureMapDrawingManagerStatefulProvider as AzureMapDrawingManagerProvider +} diff --git a/src/react-azure-maps.ts b/src/react-azure-maps.ts index 4e90c51..568dea0 100644 --- a/src/react-azure-maps.ts +++ b/src/react-azure-maps.ts @@ -17,6 +17,11 @@ export { AzureMapLayerConsumer, AzureMapLayerProvider } from './contexts/AzureMapLayerContext' +export { + AzureMapDrawingManagerContext, + AzureMapDrawingManagerConsumer, + AzureMapDrawingManagerProvider +} from './contexts/AzureMapDrawingManagerContext' export { default as AzureMapPopup } from './components/AzureMapPopup/AzureMapPopup' export { default as useCreatePopup } from './components/AzureMapPopup/useCreateAzureMapPopup' diff --git a/src/types.ts b/src/types.ts index 2601bb8..6727ec7 100644 --- a/src/types.ts +++ b/src/types.ts @@ -34,6 +34,7 @@ import atlas, { BubbleLayerOptions, LayerOptions } from 'azure-maps-control' +import { drawing, DrawingManagerOptions } from 'azure-maps-drawing-tools' export type IAzureMapOptions = ServiceOptions & StyleOptions & @@ -300,6 +301,30 @@ export type IAzureMapFeature = { setProperties?: Options } +// DRAWING MODULE: +export type DrawingManagerType = drawing.DrawingManager +export type IAzureDrawingManagerEventType = + | 'drawingchanged' + | 'drawingchanging' + | 'drawingcomplete' + | 'drawingmodechanged' + | 'drawingstarted' + | string + +export type IAzureDrawingManagerEvent = { + [property in IAzureDrawingManagerEventType]?: (e: atlas.Shape | drawing.DrawingMode) => void +} + +export interface IAzureMapDrawingManagerProps { + drawingManagerRef: drawing.DrawingManager | null +} + +export interface IAzureDrawingManagerStatefulProviderProps { + options: DrawingManagerOptions + events?: IAzureDrawingManagerEvent + children?: Array | IAzureDataSourceChildren | null +} + export type IAzureMapLayerProps = IAzureMapLayerContextState export type IAzureMapMouseEventRef = HtmlMarker // && other possible iterfaces export type IAzureMapsContextProps = IAzureMapContextState diff --git a/yarn.lock b/yarn.lock index 7fb2614..38402f6 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1395,13 +1395,20 @@ aws4@^1.8.0: resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.10.0.tgz#a17b3a8ea811060e74d47d306122400ad4497ae2" integrity sha512-3YDiu347mtVtjpyV3u5kVqQLP242c06zwDOgpeRnybmXlYYsLbtTrUBUm8i8srONt+FWobl5aibnU1030PeeuA== -azure-maps-control@2.0.31: +azure-maps-control@2.0.31, azure-maps-control@^2.0.21: version "2.0.31" resolved "https://registry.yarnpkg.com/azure-maps-control/-/azure-maps-control-2.0.31.tgz#188a3bbd4e6086458c2094840f1920d34df4cafe" integrity sha512-iM6QNCVrX+QaFwvUvgWUy2nO6r3PUq9IFwwHLIyd8RDbMdVlujF0dZpfVyqouyLELhvw4YeGae44pi/x1vToFA== dependencies: "@types/adal-angular" "^1.0.1" +azure-maps-drawing-tools@^0.1.4: + version "0.1.4" + resolved "https://registry.yarnpkg.com/azure-maps-drawing-tools/-/azure-maps-drawing-tools-0.1.4.tgz#a0a8df45baccb860d665ffdbc1e097db34ce18f9" + integrity sha512-Eu9CbQk9v1OArFr464PyeuVb4K61gQzQ8MWAWH0Wz2ZBk8qM42ZTB8lDE2bKGbo7AaoB3uiXKXSE4wYq0N9XAg== + dependencies: + azure-maps-control "^2.0.21" + babel-jest@^25.2.3: version "25.2.3" resolved "https://registry.yarnpkg.com/babel-jest/-/babel-jest-25.2.3.tgz#8f1c088b1954963e8a5384be2e219dae00d053f4" @@ -2501,7 +2508,7 @@ debug@^3.1.0: dependencies: ms "^2.1.1" -debuglog@*, debuglog@^1.0.1: +debuglog@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/debuglog/-/debuglog-1.0.1.tgz#aa24ffb9ac3df9a2351837cfb2d279360cd78492" integrity sha1-qiT/uaw9+aI1GDfPstJ5NgzXhJI= @@ -3826,7 +3833,7 @@ import-local@^3.0.2: pkg-dir "^4.2.0" resolve-cwd "^3.0.0" -imurmurhash@*, imurmurhash@^0.1.4: +imurmurhash@^0.1.4: version "0.1.4" resolved "https://registry.yarnpkg.com/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea" integrity sha1-khi5srkoojixPcT7a21XbyMUU+o= @@ -5099,11 +5106,6 @@ lockfile@^1.0.4: dependencies: signal-exit "^3.0.2" -lodash._baseindexof@*: - version "3.1.0" - resolved "https://registry.yarnpkg.com/lodash._baseindexof/-/lodash._baseindexof-3.1.0.tgz#fe52b53a1c6761e42618d654e4a25789ed61822c" - integrity sha1-/lK1OhxnYeQmGNZU5KJXie1hgiw= - lodash._baseuniq@~4.6.0: version "4.6.0" resolved "https://registry.yarnpkg.com/lodash._baseuniq/-/lodash._baseuniq-4.6.0.tgz#0ebb44e456814af7905c6212fa2c9b2d51b841e8" @@ -5112,33 +5114,11 @@ lodash._baseuniq@~4.6.0: lodash._createset "~4.0.0" lodash._root "~3.0.0" -lodash._bindcallback@*: - version "3.0.1" - resolved "https://registry.yarnpkg.com/lodash._bindcallback/-/lodash._bindcallback-3.0.1.tgz#e531c27644cf8b57a99e17ed95b35c748789392e" - integrity sha1-5THCdkTPi1epnhftlbNcdIeJOS4= - -lodash._cacheindexof@*: - version "3.0.2" - resolved "https://registry.yarnpkg.com/lodash._cacheindexof/-/lodash._cacheindexof-3.0.2.tgz#3dc69ac82498d2ee5e3ce56091bafd2adc7bde92" - integrity sha1-PcaayCSY0u5ePOVgkbr9Ktx73pI= - -lodash._createcache@*: - version "3.1.2" - resolved "https://registry.yarnpkg.com/lodash._createcache/-/lodash._createcache-3.1.2.tgz#56d6a064017625e79ebca6b8018e17440bdcf093" - integrity sha1-VtagZAF2JeeevKa4AY4XRAvc8JM= - dependencies: - lodash._getnative "^3.0.0" - lodash._createset@~4.0.0: version "4.0.3" resolved "https://registry.yarnpkg.com/lodash._createset/-/lodash._createset-4.0.3.tgz#0f4659fbb09d75194fa9e2b88a6644d363c9fe26" integrity sha1-D0ZZ+7CddRlPqeK4imZE02PJ/iY= -lodash._getnative@*, lodash._getnative@^3.0.0: - version "3.9.1" - resolved "https://registry.yarnpkg.com/lodash._getnative/-/lodash._getnative-3.9.1.tgz#570bc7dede46d61cdcde687d65d3eecbaa3aaff5" - integrity sha1-VwvH3t5G1hzc3mh9ZdPuy6o6r/U= - lodash._reinterpolate@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz#0ccf2d89166af03b3663c796538b75ac6e114d9d" @@ -5189,11 +5169,6 @@ lodash.memoize@4.x, lodash.memoize@^4.1.2: resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe" integrity sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4= -lodash.restparam@*: - version "3.6.1" - resolved "https://registry.yarnpkg.com/lodash.restparam/-/lodash.restparam-3.6.1.tgz#936a4e309ef330a7645ed4145986c85ae5b20805" - integrity sha1-k2pOMJ7zMKdkXtQUWYbIWuWyCAU= - lodash.sortby@^4.7.0: version "4.7.0" resolved "https://registry.yarnpkg.com/lodash.sortby/-/lodash.sortby-4.7.0.tgz#edd14c824e2cc9c1e0b0a1b42bb5210516a42438"