From 13a4ae6c4f212c7db98b7d27188f727e45431329 Mon Sep 17 00:00:00 2001 From: RyanBirtch-aot Date: Tue, 16 Jul 2024 16:43:43 +0000 Subject: [PATCH] reorganized map settings, set new default center --- .../src/components/Map/Component.form.ts | 33 +++-------- components/src/components/Map/Component.ts | 2 +- .../Map/editForm/Component.edit.data.ts | 3 +- .../src/components/Map/services/MapService.ts | 56 ++++++------------- 4 files changed, 26 insertions(+), 68 deletions(-) diff --git a/components/src/components/Map/Component.form.ts b/components/src/components/Map/Component.form.ts index 9b8ac2603..20c3c4533 100644 --- a/components/src/components/Map/Component.form.ts +++ b/components/src/components/Map/Component.form.ts @@ -1,32 +1,17 @@ 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, }, { @@ -34,16 +19,12 @@ export default function (...extend) { 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 index c69c858ab..ba079b97f 100644 --- 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 index 4bf640ee0..6dbf7d242 100644 --- 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 index 46585a644..3ad22e8ba 100644 --- a/components/src/components/Map/services/MapService.ts +++ b/components/src/components/Map/services/MapService.ts @@ -2,7 +2,6 @@ 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 = @@ -10,33 +9,20 @@ const DEFAULT_LAYER_ATTRIBUTION = 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; - 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;