chore: remove Leaflet dependency from form modules

umap-project · Jan 6, 2025 · 34f7d8e · 34f7d8e
1 parent b599c48
commit 34f7d8e
Show file tree

Hide file tree

Showing 10 changed files with 291 additions and 287 deletions.
diff --git a/umap/static/umap/js/modules/data/features.js b/umap/static/umap/js/modules/data/features.js
@@ -16,6 +16,7 @@ import {
   MaskPolygon,
 } from '../rendering/ui.js'
 import loadPopup from '../rendering/popup.js'
+import { MutatingForm } from '../form/builder.js'
 
 class Feature {
   constructor(umap, datalayer, geojson = {}, id = null) {
@@ -225,7 +226,7 @@ class Feature {
       `icon-${this.getClassName()}`
     )
 
-    let builder = new U.FormBuilder(
+    let builder = new MutatingForm(
       this,
       [['datalayer', { handler: 'DataLayerSwitcher' }]],
       {
@@ -254,7 +255,7 @@ class Feature {
       labelKeyFound = U.DEFAULT_LABEL_KEY
     }
     properties.unshift([`properties.${labelKeyFound}`, { label: labelKeyFound }])
-    builder = new U.FormBuilder(this, properties, {
+    builder = new MutatingForm(this, properties, {
       id: 'umap-feature-properties',
     })
     container.appendChild(builder.build())
@@ -285,7 +286,7 @@ class Feature {
 
   appendEditFieldsets(container) {
     const optionsFields = this.getShapeOptions()
-    let builder = new U.FormBuilder(this, optionsFields, {
+    let builder = new MutatingForm(this, optionsFields, {
       id: 'umap-feature-shape-properties',
     })
     const shapeProperties = DomUtil.createFieldset(
@@ -295,7 +296,7 @@ class Feature {
     shapeProperties.appendChild(builder.build())
 
     const advancedOptions = this.getAdvancedOptions()
-    builder = new U.FormBuilder(this, advancedOptions, {
+    builder = new MutatingForm(this, advancedOptions, {
       id: 'umap-feature-advanced-properties',
     })
     const advancedProperties = DomUtil.createFieldset(
@@ -305,7 +306,7 @@ class Feature {
     advancedProperties.appendChild(builder.build())
 
     const interactionOptions = this.getInteractionOptions()
-    builder = new U.FormBuilder(this, interactionOptions)
+    builder = new MutatingForm(this, interactionOptions)
     const popupFieldset = DomUtil.createFieldset(
       container,
       translate('Interaction options')
@@ -733,7 +734,7 @@ export class Point extends Feature {
       ['ui._latlng.lat', { handler: 'FloatInput', label: translate('Latitude') }],
       ['ui._latlng.lng', { handler: 'FloatInput', label: translate('Longitude') }],
     ]
-    const builder = new U.FormBuilder(this, coordinatesOptions, {
+    const builder = new MutatingForm(this, coordinatesOptions, {
       callback: () => {
         if (!this.ui._latlng.isValid()) {
           Alert.error(translate('Invalid latitude or longitude'))

diff --git a/umap/static/umap/js/modules/data/layer.js b/umap/static/umap/js/modules/data/layer.js
@@ -1,5 +1,3 @@
-// Uses U.FormBuilder not available as ESM
-
 // FIXME: this module should not depend on Leaflet
 import {
   DomUtil,
@@ -22,6 +20,7 @@ import { Point, LineString, Polygon } from './features.js'
 import TableEditor from '../tableeditor.js'
 import { ServerStored } from '../saving.js'
 import * as Schema from '../schema.js'
+import { MutatingForm } from '../form/builder.js'
 
 export const LAYER_TYPES = [
   DefaultLayer,
@@ -668,10 +667,11 @@ export class DataLayer extends ServerStored {
       ],
     ]
     DomUtil.createTitle(container, translate('Layer properties'), 'icon-layers')
-    let builder = new U.FormBuilder(this, metadataFields, {
-      callback(e) {
+    let builder = new MutatingForm(this, metadataFields, {
+      callback: (helper) => {
+        console.log(helper)
         this._umap.onDataLayersChanged()
-        if (e.helper.field === 'options.type') {
+        if (helper.field === 'options.type') {
           this.edit()
         }
       },
@@ -681,7 +681,7 @@ export class DataLayer extends ServerStored {
     const layerOptions = this.layer.getEditableOptions()
 
     if (layerOptions.length) {
-      builder = new U.FormBuilder(this, layerOptions, {
+      builder = new MutatingForm(this, layerOptions, {
         id: 'datalayer-layer-properties',
       })
       const layerProperties = DomUtil.createFieldset(
@@ -704,7 +704,7 @@ export class DataLayer extends ServerStored {
       'options.fillOpacity',
     ]
 
-    builder = new U.FormBuilder(this, shapeOptions, {
+    builder = new MutatingForm(this, shapeOptions, {
       id: 'datalayer-advanced-properties',
     })
     const shapeProperties = DomUtil.createFieldset(
@@ -721,7 +721,7 @@ export class DataLayer extends ServerStored {
       'options.toZoom',
     ]
 
-    builder = new U.FormBuilder(this, optionsFields, {
+    builder = new MutatingForm(this, optionsFields, {
       id: 'datalayer-advanced-properties',
     })
     const advancedProperties = DomUtil.createFieldset(
@@ -740,7 +740,7 @@ export class DataLayer extends ServerStored {
       'options.outlinkTarget',
       'options.interactive',
     ]
-    builder = new U.FormBuilder(this, popupFields)
+    builder = new MutatingForm(this, popupFields)
     const popupFieldset = DomUtil.createFieldset(
       container,
       translate('Interaction options')
@@ -796,7 +796,7 @@ export class DataLayer extends ServerStored {
       container,
       translate('Remote data')
     )
-    builder = new U.FormBuilder(this, remoteDataFields)
+    builder = new MutatingForm(this, remoteDataFields)
     remoteDataContainer.appendChild(builder.build())
     DomUtil.createButton(
       'button umap-verify',

diff --git a/umap/static/umap/js/modules/form/builder.js b/umap/static/umap/js/modules/form/builder.js
@@ -13,7 +13,7 @@ export class Form {
       this.form.id = this.properties.id
     }
     if (this.properties.className) {
-      this.form.classList.add(this.properties.className)
+      this.form.classList.add(...this.properties.className.split(' '))
     }
   }
 
@@ -108,14 +108,16 @@ export class Form {
     }
   }
 
-  onPostSync() {
+  onPostSync(helper) {
     if (this.properties.callback) {
-      this.properties.callback(this.obj)
+      this.properties.callback(helper)
     }
   }
+
+  finish() {}
 }
 
-export class DataForm extends Form {
+export class MutatingForm extends Form {
   constructor(obj, fields, properties) {
     super(obj, fields, properties)
     this._umap = obj._umap || properties.umap
@@ -188,22 +190,7 @@ export class DataForm extends Form {
     }
   }
 
-  getter(field) {
-    const path = field.split('.')
-    let value = this.obj
-    let sub
-    for (sub of path) {
-      try {
-        value = value[sub]
-      } catch {
-        console.log(field)
-      }
-    }
-    if (value === undefined) value = SCHEMA[sub]?.default
-    return value
-  }
-
-  finish(event) {
-    event.helper?.input?.blur()
+  finish(helper) {
+    helper.input?.blur()
   }
 }