umap/static/umap/js/modules/browser.js

@@ -180,8 +180,9 @@ export default class Browser {
       ],
       ['options.inBbox', { handler: 'Switch', label: translate('Current map view') }],
     ]
-    const builder = new Form(this, fields)
+    const builder = new Form(this, fields, {
-    builder.on('set', () => this.onFormChange())
+      callback: () => this.onFormChange(),
+    })
     let filtersBuilder
     this.formContainer.appendChild(builder.build())
     DomEvent.on(builder.form, 'reset', () => {
@@ -189,8 +190,9 @@ export default class Browser {
     })
     if (this._umap.properties.facetKey) {
       fields = this._umap.facets.build()
-      filtersBuilder = new Form(this._umap.facets, fields)
+      filtersBuilder = new Form(this._umap.facets, fields, {
-      filtersBuilder.on('set', () => this.onFormChange())
+        callback: () => this.onFormChange(),
+      })
       DomEvent.on(filtersBuilder.form, 'reset', () => {
         window.setTimeout(filtersBuilder.syncAll.bind(filtersBuilder))
       })

umap/static/umap/js/modules/data/features.js

@@ -226,11 +226,15 @@ class Feature {
       `icon-${this.getClassName()}`
     )
 
-    let builder = new MutatingForm(this, [
+    let builder = new MutatingForm(
-      ['datalayer', { handler: 'DataLayerSwitcher' }],
+      this,
-    ])
+      [['datalayer', { handler: 'DataLayerSwitcher' }]],
-    // removeLayer step will close the edit panel, let's reopen it
+      {
-    builder.on('set', () => this.edit(event))
+        callback() {
+          this.edit(event)
+        }, // removeLayer step will close the edit panel, let's reopen it
+      }
+    )
     container.appendChild(builder.build())
 
     const properties = []
@@ -730,15 +734,16 @@ export class Point extends Feature {
       ['ui._latlng.lat', { handler: 'FloatInput', label: translate('Latitude') }],
       ['ui._latlng.lng', { handler: 'FloatInput', label: translate('Longitude') }],
     ]
-    const builder = new MutatingForm(this, coordinatesOptions)
+    const builder = new MutatingForm(this, coordinatesOptions, {
-    builder.on('set', () => {
+      callback: () => {
-      if (!this.ui._latlng.isValid()) {
+        if (!this.ui._latlng.isValid()) {
-        Alert.error(translate('Invalid latitude or longitude'))
+          Alert.error(translate('Invalid latitude or longitude'))
-        builder.restoreField('ui._latlng.lat')
+          builder.restoreField('ui._latlng.lat')
-        builder.restoreField('ui._latlng.lng')
+          builder.restoreField('ui._latlng.lng')
-      }
+        }
-      this.pullGeometry()
+        this.pullGeometry()
-      this.zoomTo({ easing: false })
+        this.zoomTo({ easing: false })
+      },
     })
     const fieldset = DomUtil.createFieldset(container, translate('Coordinates'))
     fieldset.appendChild(builder.build())

umap/static/umap/js/modules/data/layer.js

@@ -667,12 +667,14 @@ export class DataLayer extends ServerStored {
       ],
     ]
     DomUtil.createTitle(container, translate('Layer properties'), 'icon-layers')
-    let builder = new MutatingForm(this, metadataFields)
+    let builder = new MutatingForm(this, metadataFields, {
-    builder.on('set', (helper) => {
+      callback: (helper) => {
-      this._umap.onDataLayersChanged()
+        console.log(helper)
-      if (helper.field === 'options.type') {
+        this._umap.onDataLayersChanged()
-        this.edit()
+        if (helper.field === 'options.type') {
-      }
+          this.edit()
+        }
+      },
     })
     container.appendChild(builder.build())
 

umap/static/umap/js/modules/form/builder.js

@@ -3,9 +3,8 @@ import * as Utils from '../utils.js'
 import { SCHEMA } from '../schema.js'
 import { translate } from '../i18n.js'
 
-export class Form extends Utils.WithEvents {
+export class Form {
   constructor(obj, fields, properties) {
-    super()
     this.setProperties(properties)
     this.defaultProperties = {}
     this.obj = obj

umap/static/umap/js/modules/form/fields.js

@@ -97,7 +97,7 @@ class BaseElement {
 
   sync() {
     this.set()
-    this.builder.fire('set', this)
+    this.onPostSync()
   }
 
   set() {
@@ -116,6 +116,13 @@ class BaseElement {
 
   finish() {}
 
+  onPostSync() {
+    if (this.properties.callback) {
+      this.properties.callback(this)
+    }
+    this.builder.onPostSync(this)
+  }
+
   undefine() {
     this.root.classList.add('undefined')
     this.clear()

umap/static/umap/js/modules/share.js

@@ -126,8 +126,9 @@ export default class Share {
       exportUrl.value = window.location.protocol + iframeExporter.buildUrl()
     }
     buildIframeCode()
-    const builder = new MutatingForm(iframeExporter, UIFields)
+    const builder = new MutatingForm(iframeExporter, UIFields, {
-    builder.on('set', buildIframeCode)
+      callback: buildIframeCode,
+    })
     const iframeOptions = DomUtil.createFieldset(
       this.container,
       translate('Embed and link options')

umap/static/umap/js/modules/umap.js

@@ -1029,6 +1029,13 @@ export default class Umap extends ServerStored {
       ],
     ]
     const slideshowBuilder = new MutatingForm(this, slideshowFields, {
+      callback: () => {
+        this.slideshow.load()
+        // FIXME when we refactor formbuilder: this callback is called in a 'postsync'
+        // event, which comes after the call of `setter` method, which will call the
+        // map.render method, which should do this redraw.
+        this.bottomBar.redraw()
+      },
       umap: this,
     })
     slideshow.appendChild(slideshowBuilder.build())
@@ -1344,10 +1351,6 @@ export default class Umap extends ServerStored {
         }
         this.topBar.redraw()
       },
-      'properties.slideshow.active': () => {
-        this.slideshow.load()
-        this.bottomBar.redraw()
-      },
       numberOfConnectedPeers: () => {
         Utils.eachElement('.connected-peers span', (el) => {
           if (this.sync.websocketConnected) {

umap/static/umap/js/modules/utils.js

@@ -449,29 +449,6 @@ export function eachElement(selector, callback) {
   }
 }
 
-export class WithEvents {
-  constructor() {
-    this._callbacks = {}
-  }
-
-  on(eventType, callback) {
-    if (typeof callback !== 'function') return
-    if (this._callbacks[eventType] === undefined) {
-      this._callbacks[eventType] = []
-    }
-
-    this._callbacks[eventType].push(callback)
-  }
-
-  fire(eventType, ...args) {
-    if (this._callbacks[eventType] === undefined) return
-
-    for (const callback of this._callbacks[eventType]) {
-      callback(...args)
-    }
-  }
-}
-
 export const COLORS = [
   'Black',
   'Navy',

umap/tests/integration/test_websocket_sync.py

@@ -280,7 +280,7 @@ def test_websocket_connection_can_sync_cloned_polygons(
     peerB.locator("path").nth(1).drag_to(b_map_el, target_position={"x": 400, "y": 400})
     peerB.locator("path").nth(1).click()
     peerB.locator("summary").filter(has_text="Shape properties").click()
-    peerB.locator(".umap-field-color button.define").first.click()
+    peerB.locator(".header > a:nth-child(2)").first.click()
     peerB.get_by_title("Orchid", exact=True).first.click()
     peerB.locator("#map").press("Escape")
     peerB.get_by_role("button", name="Save").click()