use Ox.api async mode and clear cache on change

examples/maps/map_editor/js/example.js

@@ -7,19 +7,22 @@ In this example, we use Ox.MapEditor
 Ox.load(['UI', 'Geo'], function() {
     var $storage = Ox.localStorage("map_editor")
     var places = $storage('places') || []
+    var placesAPI = Ox.api(places, {
+        geo: true,
+        sort: '-area',
+        cache: true,
+    })
     var $map = Ox.MapEditor({
             addPlace: function(place, callback) {
+                place = Ox.clone(place)
                 place.id = Ox.encodeBase26((places.length ? Ox.max(places.map(p => Ox.decodeBase26(p.id))) : 0) + 1)
+                place.editable = true
                 console.log("addPlace", place.id, place)
                 places.push(place)
                 $storage("places", places)
-                $map.options({
+                placesAPI.update(places)
-                    places: Ox.api(places, {
-                        geo: true,
-                        sort: '-area'
-                    })
-                })
                 setTimeout(() => {
+                    Ox.Request.clearCache();
                     callback({
                         status: {
                             code: 200
@@ -29,6 +32,7 @@ Ox.load(['UI', 'Geo'], function() {
                 }, 200)
             },
             editPlace: function(place, callback) {
+                place = Ox.clone(place)
                 places.forEach(p => {
                     if (p.id == place.id) {
                         Object.assign(p, place);
@@ -36,12 +40,16 @@ Ox.load(['UI', 'Geo'], function() {
                     }
                 })
                 $storage("places", places)
-                callback({
+                placesAPI.update(places)
-                    status: {
+                setTimeout(() => {
-                        code: 200
+                    Ox.Request.clearCache();
-                    },
+                    callback({
-                    data: place
+                        status: {
-                })
+                            code: 200
+                        },
+                        data: place
+                    })
+                }, 200)
             },
             getMatches: function(names, callback) {
                 console.log("getMatches", names)
@@ -51,28 +59,21 @@ Ox.load(['UI', 'Geo'], function() {
             height: 800,
             mode: 'add', // 'define',
             names: null,
-            places: Ox.api(places, {
+            places: placesAPI,
-                geo: true,
-                sort: '-area'
-            }),
             removePlace: function(place, callback) {
                 console.log("removePlace", place.id, places)
                 places = places.filter(p => { return p.id != place.id })
                 console.log("new places", places)
                 $storage("places", places)
-                $map.options({
+                placesAPI.update(places)
-                    places: Ox.api(places, {
-                        geo: true,
-                        sort: '-area'
-                    })
-                })
                 setTimeout(() => {
+                    Ox.Request.clearCache();
                     callback({
                         status: {
                             code: 200
                         },
                     })
-                }, 100)
+                }, 200)
             },
             selected: '',
             showControls: false,

source/UI/js/Map/MapEditor.js

@@ -49,7 +49,7 @@ Ox.MapEditor = function(options, self) {
             places: function() {
                 self.isAsync = Ox.isFunction(self.options.places);
                 self.$list.options({
-                    items: Ox.clone(self.options.places)
+                    items: self.isAsync ? self.options.places : Ox.clone(self.options.places)
                 })
                 self.$map.options({
                     places: self.options.places
@@ -337,7 +337,7 @@ Ox.MapEditor = function(options, self) {
             columns: self.columns,
             columnsRemovable: true,
             columnsVisible: true,
-            items: Ox.clone(self.options.places),
+            items: self.isAsync ? self.options.places : Ox.clone(self.options.places),
             //items: self.options.places,
             // area needed for icon, geoname needed for flag
             keys: ['area', 'geoname', 'matches'],