wip: uMap does not inherit anymore from ServerStored

Co-authored-by: David Larlet <david@larlet.fr>

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

@@ -192,7 +192,6 @@ export class MutatingForm extends Form {
   setter(field, value) {
     const oldValue = this.getter(field)
     super.setter(field, value)
-    this.obj.isDirty = true
     if ('render' in this.obj) {
       this.obj.render([field], this)
     }

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

@@ -44,6 +44,10 @@ export const SCHEMA = {
     type: Object,
     impacts: ['data'],
   },
+  center: {
+    type: Object,
+    impacts: [], // default center, doesn't need any update of the map
+  },
   color: {
     type: String,
     impacts: ['data'],

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

@@ -36,9 +36,8 @@ import Tooltip from './ui/tooltip.js'
 import URLs from './urls.js'
 import * as Utils from './utils.js'
 
-export default class Umap extends ServerStored {
+export default class Umap {
   constructor(element, geojson) {
-    super()
     // We need to call async function in the init process,
     // the init itself does not need to be awaited, but some calls
     // in the process must be blocker
@@ -197,7 +196,6 @@ export default class Umap extends ServerStored {
     // Creation mode
     if (!this.id) {
       if (!this.properties.preview) {
-        this.isDirty = true
         this.enableEdit()
       }
       this._defaultExtent = true
@@ -213,10 +211,14 @@ export default class Umap extends ServerStored {
       this.propagate()
     }
 
-    window.onbeforeunload = () => (this.editEnabled && SAVEMANAGER.isDirty) || null
+    window.onbeforeunload = () => (this.editEnabled && this.isDirty) || null
     this.backup()
   }
 
+  get isDirty() {
+    return this.sync._undoManager.isDirty()
+  }
+
   get editedFeature() {
     return this._editedFeature
   }
@@ -350,7 +352,7 @@ export default class Umap extends ServerStored {
     const items = []
     if (this.hasEditMode()) {
       if (this.editEnabled) {
-        if (!SAVEMANAGER.isDirty) {
+        if (!this.isDirty) {
           items.push({
             label: this.help.displayLabel('STOP_EDIT'),
             action: () => this.disableEdit(),
@@ -544,10 +546,10 @@ export default class Umap extends ServerStored {
       let used = true
       switch (event.key) {
         case 'e':
-          if (!SAVEMANAGER.isDirty) this.disableEdit()
+          if (!this.isDirty) this.disableEdit()
           break
         case 's':
-          if (SAVEMANAGER.isDirty) this.saveAll()
+          if (this.isDirty) this.saveAll()
           break
         case 'z':
           if (Utils.isWritable(event.target)) {
@@ -670,7 +672,7 @@ export default class Umap extends ServerStored {
   }
 
   async saveAll() {
-    // if (!SAVEMANAGER.isDirty) return
+    if (!this.isDirty) return
     if (this._defaultExtent) this._setCenterAndZoom()
     this.backup()
     await this.sync.save()
@@ -1017,35 +1019,36 @@ export default class Umap extends ServerStored {
       'button',
       boundsButtons,
       translate('Use current bounds'),
-      function () {
+      () => {
         const bounds = this._leafletMap.getBounds()
+        const oldLimitBounds = { ...this.properties.limitBounds }
         this.properties.limitBounds.south = LeafletUtil.formatNum(bounds.getSouth())
         this.properties.limitBounds.west = LeafletUtil.formatNum(bounds.getWest())
         this.properties.limitBounds.north = LeafletUtil.formatNum(bounds.getNorth())
         this.properties.limitBounds.east = LeafletUtil.formatNum(bounds.getEast())
         boundsBuilder.fetchAll()
-
-        this.sync.update(this, 'properties.limitBounds', this.properties.limitBounds)
-        this.isDirty = true
-        this._leafletMap.handleLimitBounds()
-      },
-      this
+        this.sync.update(
+          'properties.limitBounds',
+          this.properties.limitBounds,
+          oldLimitBounds
         )
-    DomUtil.createButton(
-      'button',
-      boundsButtons,
-      translate('Empty'),
-      function () {
+        this._leafletMap.handleLimitBounds()
+      }
+    )
+    DomUtil.createButton('button', boundsButtons, translate('Empty'), () => {
+      const oldLimitBounds = { ...this.properties.limitBounds }
       this.properties.limitBounds.south = null
       this.properties.limitBounds.west = null
       this.properties.limitBounds.north = null
       this.properties.limitBounds.east = null
       boundsBuilder.fetchAll()
-        this.isDirty = true
       this._leafletMap.handleLimitBounds()
-      },
-      this
+      this.sync.update(
+        'properties.limitBounds',
+        this.properties.limitBounds,
+        oldLimitBounds
       )
+    })
   }
 
   _editSlideshow(container) {
@@ -1269,7 +1272,7 @@ export default class Umap extends ServerStored {
   }
 
   disableEdit() {
-    // if (this.isDirty) return
+    if (this.isDirty) return
     this.drop.disable()
     document.body.classList.remove('umap-edit-enabled')
     this.editedFeature = null
@@ -1641,7 +1644,6 @@ export default class Umap extends ServerStored {
     )
     this.render(fields)
     this._leafletMap._setDefaultCenter()
-    this.isDirty = true
   }
 
   importUmapFile(file) {
@@ -1740,10 +1742,15 @@ export default class Umap extends ServerStored {
   }
 
   _setCenterAndZoom() {
+    const oldCenter = { ...this.properties.center }
+    const oldZoom = this.properties.zoom
     this.properties.center = this._leafletMap.getCenter()
     this.properties.zoom = this._leafletMap.getZoom()
-    this.isDirty = true
     this._defaultExtent = false
+    this.sync.startBatch()
+    this.sync.update('properties.center', this.properties.center, oldCenter)
+    this.sync.update('properties.zoom', this.properties.zoom, oldZoom)
+    this.sync.commitBatch()
   }
 
   getStaticPathFor(name) {