reorganized map settings, set new default center

RyanBirtch-aot · Jul 16, 2024 · 13a4ae6 · 13a4ae6
1 parent a1c2da1
commit 13a4ae6
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 68 deletions.
diff --git a/components/src/components/Map/Component.form.ts b/components/src/components/Map/Component.form.ts
@@ -1,49 +1,30 @@
 import baseEditForm from 'formiojs/components/_classes/component/Component.form';
 import EditData from './editForm/Component.edit.data';
 import EditDisplay from './editForm/Component.edit.display';
-import EditValidation from './editForm/Component.edit.validation';
 import SimpleApi from '../Common/Simple.edit.api';
 import SimpleConditional from '../Common/Simple.edit.conditional';
+import AdvancedEditLogic from '../Common/Advanced.edit.logic';
+import AdvancedEditLayout from '../Common/Advanced.edit.layout';
 export default function (...extend) {
   return baseEditForm(
     [
       EditDisplay,
-      {
-        key: 'data',
-        ignore: true,
-      },
       EditData,
       {
-        key: 'api',
-        ignore: true,
-      },
-      {
-        key: 'layout',
-        ignore: true,
-      },
-      {
-        key: 'conditional',
-        ignore: true,
-      },
-      {
-        key: 'logic',
+        key: 'data',
         ignore: true,
       },
       {
         key: 'validation',
         ignore: true,
       },
       {
-        label: 'API',
-        key: 'customAPI',
-        weight: 30,
-        components: SimpleApi,
+        key: 'logic',
+        components: AdvancedEditLogic,
       },
       {
-        label: 'Conditional',
-        key: 'customConditional',
-        weight: 40,
-        components: SimpleConditional,
+        key: 'layout',
+        components: AdvancedEditLayout,
       },
     ],
     ...extend

diff --git a/components/src/components/Map/Component.ts b/components/src/components/Map/Component.ts
@@ -5,7 +5,7 @@ import baseEditForm from './Component.form';
 import * as L from 'leaflet';
 
 const DEFAULT_CENTER: [number, number] = [
-  48.41939025932759, -123.37029576301576,
+  53.96717190097409, -123.98320425388914,
 ]; // Ensure CENTER is a tuple with exactly two elements
 
 export default class Component extends (FieldComponent as any) {

diff --git a/components/src/components/Map/editForm/Component.edit.data.ts b/components/src/components/Map/editForm/Component.edit.data.ts
@@ -1,4 +1,3 @@
-import common from '../../Common/Simple.edit.data';
 export default {
   key: 'customData',
   label: 'Data',
@@ -44,7 +43,7 @@ export default {
       label: 'Default Zoom Level',
       description:
         'Zoom Levels are from 0 (Most zoomed out) to 18 (most zoomed in).',
-      defaultValue: 13,
+      defaultValue: 5,
       delimiter: false,
       requireDecimal: false,
       validate: {

diff --git a/components/src/components/Map/services/MapService.ts b/components/src/components/Map/services/MapService.ts
@@ -2,41 +2,27 @@ import * as L from 'leaflet';
 import 'leaflet-draw';
 import 'leaflet/dist/leaflet.css';
 import 'leaflet-draw/dist/leaflet.draw-src.css';
-
 const DEFAULT_MAP_LAYER_URL =
   'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
 const DEFAULT_LAYER_ATTRIBUTION =
   '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors';
 const DEFAULT_MAP_ZOOM = 13;
 const DECIMALS_LATLNG = 5; // the number of decimals of latitude and longitude to be displayed in the marker popup
 const COMPONENT_EDIT_CLASS = 'component-edit-tabs';
-
-interface MapServiceOptions {
-  mapContainer: HTMLElement;
-  center: [number, number]; // Ensure center is a tuple with exactly two elements
-  drawOptions: any;
-  form: HTMLCollectionOf<Element>;
-  numPoints: number;
-  defaultZoom?: number;
-  readOnlyMap?: boolean;
-  onDrawnItemsChange: (items: any) => void; // Support both single and multiple items
-}
-
+const FORM_REVIEW_CLASS = 'review-form';
 class MapService {
-  options: MapServiceOptions;
-  map: L.Map;
-  drawnItems: L.FeatureGroup;
-
-  constructor(options: MapServiceOptions) {
+  options;
+  map;
+  drawnItems;
+  constructor(options) {
     this.options = options;
     if (options.mapContainer) {
       const { map, drawnItems } = this.initializeMap(options);
       this.map = map;
       this.drawnItems = drawnItems;
       map.invalidateSize();
-
       // Event listener for drawn objects
-      map.on('draw:created', (e: any) => {
+      map.on('draw:created', (e) => {
         let layer = e.layer;
         if (drawnItems.getLayers().length === options.numPoints) {
           L.popup()
@@ -51,8 +37,7 @@ class MapService {
       });
     }
   }
-
-  initializeMap(options: MapServiceOptions) {
+  initializeMap(options) {
     let { mapContainer, center, drawOptions, form, defaultZoom, readOnlyMap } =
       options;
     if (drawOptions.rectangle) {
@@ -65,13 +50,15 @@ class MapService {
     L.tileLayer(DEFAULT_MAP_LAYER_URL, {
       attribution: DEFAULT_LAYER_ATTRIBUTION,
     }).addTo(map);
-
     // Initialize Draw Layer
     let drawnItems = new L.FeatureGroup();
     map.addLayer(drawnItems);
-
     // Add Drawing Controllers
-    if (!readOnlyMap) {
+    const formReviewNode = document.getElementsByClassName(FORM_REVIEW_CLASS);
+    if (
+      !readOnlyMap ||
+      !(formReviewNode && this.hasChildNode(formReviewNode[0], mapContainer))
+    ) {
       let drawControl = new L.Control.Draw({
         draw: drawOptions,
         edit: {
@@ -80,7 +67,6 @@ class MapService {
       });
       map.addControl(drawControl);
     }
-
     // Checking to see if the map should be interactable
     const componentEditNode =
       document.getElementsByClassName(COMPONENT_EDIT_CLASS);
@@ -91,14 +77,14 @@ class MapService {
         if (this.hasChildNode(componentEditNode[0], mapContainer)) {
           map.dragging.enable();
           map.scrollWheelZoom.enable();
+          console.log(map);
+          map.invalidateSize(true);
         }
       }
     }
-
     return { map, drawnItems };
   }
-
-  bindPopupToLayer(layer: L.Layer) {
+  bindPopupToLayer(layer) {
     if (layer instanceof L.Marker) {
       layer
         .bindPopup(
@@ -127,21 +113,16 @@ class MapService {
         .openPopup();
     }
   }
-
-  loadDrawnItems(items: any) {
+  loadDrawnItems(items) {
     const { drawnItems } = this;
-
     if (!drawnItems) {
       console.error('drawnItems is undefined');
       return;
     }
-
     drawnItems.clearLayers();
-
     if (!Array.isArray(items)) {
       items = [items];
     }
-
     items.forEach((item) => {
       let layer;
       if (item.type === 'marker') {
@@ -155,15 +136,13 @@ class MapService {
       } else if (item.type === 'polyline') {
         layer = L.polyline(item.latlngs);
       }
-
       if (layer) {
         drawnItems.addLayer(layer);
         this.bindPopupToLayer(layer);
       }
     });
   }
-
-  hasChildNode(parent: any, targetNode: any) {
+  hasChildNode(parent, targetNode) {
     if (parent === targetNode) {
       return true;
     }
@@ -175,5 +154,4 @@ class MapService {
     return false;
   }
 }
-
 export default MapService;