Merge pull request #2708 from serge-web/2694-mil-symbol

Add new drawn entities to our FeatureCollection

client/src/Components/local/atoms/core-mapping/__snapshots__/index.spec.tsx.snap

@@ -1,3 +1,32 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Core Mapping component: renders correctly 1`] = `null`;
+exports[`Core Mapping component: renders correctly 1`] = `
+<div
+  className="MuiBox-root MuiBox-root-1 container"
+>
+  <button
+    className="MuiButtonBase-root MuiButton-root MuiButton-contained"
+    disabled={false}
+    onBlur={[Function]}
+    onClick={[Function]}
+    onDragLeave={[Function]}
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onKeyUp={[Function]}
+    onMouseDown={[Function]}
+    onMouseLeave={[Function]}
+    onMouseUp={[Function]}
+    onTouchEnd={[Function]}
+    onTouchMove={[Function]}
+    onTouchStart={[Function]}
+    tabIndex={0}
+    type="button"
+  >
+    <span
+      className="MuiButton-label"
+    >
+      &gt;
+    </span>
+  </button>
+</div>
+`;

client/src/Components/local/atoms/core-mapping/helper/core-renderer-helper.tsx

@@ -1,11 +1,11 @@
 import React from 'react'
 import { RENDERER_CORE, RENDERER_MILSYM } from 'src/custom-types'
-import { CoreRenderer } from '../renderers/core-renderer'
-import { MilSymbolRenderer } from '../renderers/milsymbol-renderer'
+import CoreRenderer from '../renderers/core-renderer'
+import MilSymbolRenderer from '../renderers/milsymbol-renderer'
 import { CoreRendererProps } from '../types/props'
 
 export class CoreRendererHelper {  
-  static from (type: string): React.ComponentClass<CoreRendererProps> {
+  static from (type: string): React.FunctionComponent<CoreRendererProps> {
     switch (type) {
       case RENDERER_CORE:
         return CoreRenderer

client/src/Components/local/atoms/core-mapping/helper/map-controls.tsx

@@ -1,5 +1,5 @@
 import '@geoman-io/leaflet-geoman-free/dist/leaflet-geoman.css'
-import L, { PM } from 'leaflet'
+import L, { LeafletEvent, PM } from 'leaflet'
 import React, { useEffect } from 'react'
 import * as ReactDOMServer from 'react-dom/server'
 import { GeomanControls } from 'react-leaflet-geoman-v2'
@@ -8,9 +8,72 @@ import AssetIcon from 'src/Components/local/asset-icon'
 import styles from '../styles.module.scss'
 import { GeomanControlProps } from '../types/props'
 
-const MapControls: React.FC<GeomanControlProps> = ({ onCreate, onChange }) => {
+const MapControls: React.FC<GeomanControlProps> = ({ onCreate }) => {
   const map = useMap()
 
+  const initMapListener = () => {
+    // handle remove listener for geoman items
+    // map.on('pm:remove', (e: LeafletEvent) => {
+    //   console.log('removing', e.layer.feature.properties.id)
+    //   switch (e['shape']) {
+    //     case 'Marker':
+    //       onRemoved(get(e, 'layer.feature.properties.id', ''))
+    //       break
+    //     case 'Polygon':
+    //       onRemoved(get(e, 'layer.feature.properties.id', ''))
+    //       break
+    //     case 'Line':
+    //       onRemoved(get(e, 'layer.feature.properties.id', ''))
+    //       break
+    //     default:
+    //       console.log('OnRemove Unimplemented for ' + e['shape'] + ' !!!')
+    //   }
+    // })
+
+    // handle edit listener for geoman items
+    map.on('pm:edit', (e: LeafletEvent) => {
+      // handle edit/dragend listener for geoman items
+      console.log('edit event', e)
+    })
+
+    // handle drag end listener for geoman items
+    map.on('pm:dragend', (e: LeafletEvent) => {
+      // handle edit/dragend listener for geoman items
+      console.log('dragend event', e)
+    })
+
+    map.on('pm:change', (e: LeafletEvent) => {
+      // handle edit/dragend listener for geoman items
+      console.log('change event', e)
+    })
+
+    // handle onCreate listener for geoman items
+    map.on('pm:create', (e: LeafletEvent) => {
+      // handle edit/dragend listener for geoman items
+      // e.layer.on('pm:edit', (e: any) => {
+      //   console.log('Geoman edit action: edit: ', e)
+      //   onChange(e.layer._leaflet_id, (e as any).latlngs)
+      // })
+
+      switch (e['shape']) {
+        case 'Marker':
+          onCreate(e as unknown as PM.ChangeEventHandler)
+          break
+        case 'Polygon':
+          onCreate(e as unknown as PM.ChangeEventHandler)
+          break
+        case 'Line':
+          onCreate(e as unknown as PM.ChangeEventHandler)
+          break
+        case 'Rectangle':
+          onCreate(e as unknown as PM.ChangeEventHandler)
+          break
+        default:
+          console.log('OnCreate Unimplemented !!!', e['shape'])
+      }
+    })
+  }
+
   useEffect(() => {
     if (map) {
       const icon = L.divIcon({
@@ -19,6 +82,7 @@ const MapControls: React.FC<GeomanControlProps> = ({ onCreate, onChange }) => {
         className: styles['asset-icon']
       })
       map.pm.setGlobalOptions({ markerStyle: { icon } })
+      initMapListener()
     }
   }, [map])
 
@@ -30,9 +94,7 @@ const MapControls: React.FC<GeomanControlProps> = ({ onCreate, onChange }) => {
       snappingOption: true
     }}
     globalOptions={{}}
-    onCreate={e => onCreate(e as unknown as PM.ChangeEventHandler)}
-    onChange={e => onChange(e as unknown as PM.ChangeEventHandler)}
-
+    onCreate={e => map.removeLayer(e.layer)}
   />
 }
 

client/src/Components/local/atoms/core-mapping/index.spec.tsx

@@ -15,6 +15,11 @@ jest.mock('react-leaflet-geoman-v2', () => ({
   GeomanControls: (): React.ReactElement => <></>
 }))
 
+jest.mock('react-resizable-panels', () => ({
+  Panel: (): React.ReactElement => <></>,
+  PanelGroup: (): React.ReactElement => <></>
+}))
+
 const channel: CoreMappingChannel = {
   uniqid: 'core',
   name: 'core-mapping',

client/src/Components/local/atoms/core-mapping/index.stories-inc.tsx

@@ -107,7 +107,7 @@ const milSymProps: MilSymProperties = {
 
 const coreFeature: Feature = {
   type: 'Feature',
-  properties: coreProps,
+  properties: { ...coreProps, id: 'bb' },
   geometry: {
     coordinates: [
       [
@@ -139,7 +139,7 @@ const coreFeature: Feature = {
 
 const anotherCoreFeature: Feature = {
   type: 'Feature',
-  properties: coreProps,
+  properties: { ...coreProps, id: 'ba' },
   geometry: {
     coordinates: [
       [
@@ -163,7 +163,7 @@ const anotherCoreFeature: Feature = {
 
 const milFeature: Feature = {
   type: 'Feature',
-  properties: milSymProps,
+  properties: { ...milSymProps, id: 'aa' },
   geometry: {
     coordinates: [-0.07929841834678086,
       51.497669733260125],
@@ -173,7 +173,7 @@ const milFeature: Feature = {
 
 const anotherMilFeature: Feature = {
   type: 'Feature',
-  properties: milSymProps,
+  properties: { ...milSymProps, id: 'ab' },
   geometry: {
     coordinates: [-0.07929841834678096, 51.50966973326012],
     type: 'Point'