umap-project 3.1.2__py3-none-any.whl → 3.3.0__py3-none-any.whl

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

@@ -3,16 +3,21 @@ import {
   DomUtil,
   GeoJSON,
   LineUtil,
-  stamp,
 } from '../../../vendors/leaflet/leaflet-src.esm.js'
 import { uMapAlert as Alert } from '../../components/alerts/alert.js'
 import { MutatingForm } from '../form/builder.js'
 import { translate } from '../i18n.js'
+import {
+  PREFERENCES as ORS_PREFERENCES,
+  PROFILES as ORS_PROFILES,
+  Importer as OpenRouteService,
+} from '../importers/openrouteservice.js'
 import loadPopup from '../rendering/popup.js'
 import {
   LeafletMarker,
   LeafletPolygon,
   LeafletPolyline,
+  LeafletRoute,
   MaskPolygon,
 } from '../rendering/ui.js'
 import { SCHEMA } from '../schema.js'
@@ -84,6 +89,19 @@ class Feature {
     this.pushGeometry()
   }
 
+  get fields() {
+    // Fields are user defined properties
+    return [...this.datalayer.fields, ...this._umap.fields]
+  }
+
+  setter(key, value) {
+    if (key === 'datalayer') {
+      this.changeDataLayer(value)
+    } else {
+      Utils.setObjectValue(this, key, value)
+    }
+  }
+
   isOnScreen(bounds) {
     return this.ui?.isOnScreen(bounds)
   }
@@ -198,14 +216,15 @@ class Feature {
       if (this._umap.currentFeature === this) {
         this.view()
       }
-      this.datalayer.indexProperties(this)
     }
     this.redraw()
   }
 
   edit(event) {
     if (!this._umap.editEnabled || this.isReadOnly()) return
-    if (this._umap.editedFeature === this && !event.force) return
+    if (this._umap.editedFeature === this && !event?.force) return
+    // If this feature is active (popup open), let's close it.
+    this.deactivate()
     const container = DomUtil.create('div', 'umap-feature-container')
     DomUtil.createTitle(
       container,
@@ -221,51 +240,49 @@ class Feature {
     container.appendChild(builder.build())
 
     const properties = []
-    let labelKeyFound = undefined
-    for (const property of this.datalayer.allProperties()) {
-      if (!labelKeyFound && U.LABEL_KEYS.includes(property)) {
-        labelKeyFound = property
-        continue
+    for (const field of this.fields) {
+      let handler = 'Input'
+      if (field.key === 'description' || field.type === 'Text') {
+        handler = 'Textarea'
       }
-      if (property === 'description') {
-        continue
-      }
-      properties.push([`properties.${property}`, { label: property }])
-    }
-    // We always want name and description for now (properties management to come)
-    properties.unshift('properties.description')
-    if (!labelKeyFound) {
-      labelKeyFound = U.DEFAULT_LABEL_KEY
+      properties.push([`properties.${field.key}`, { label: field.key, handler }])
     }
-    properties.unshift([`properties.${labelKeyFound}`, { label: labelKeyFound }])
     builder = new MutatingForm(this, properties, {
       id: 'umap-feature-properties',
     })
     const form = builder.build()
     container.appendChild(form)
     const button = Utils.loadTemplate(
-      `<button type="button"><i class="icon icon-16 icon-add"></i>${translate('Add a new property')}</button>`
+      `<button type="button"><i class="icon icon-16 icon-add"></i>${translate('Add a new field')}</button>`
     )
     button.addEventListener('click', () => {
       this.datalayer.addProperty().then(() => this.edit({ force: true }))
     })
     form.appendChild(button)
     this.appendEditFieldsets(container)
-    const advancedActions = DomUtil.createFieldset(
-      container,
-      translate('Advanced actions')
-    )
-    this.getAdvancedEditActions(advancedActions)
-    const onLoad = this._umap.editPanel.open({ content: container })
-    onLoad.then(() => {
-      builder.helpers[`properties.${labelKeyFound}`].input.focus()
+    const [details, { fieldset }] = Utils.loadTemplateWithRefs(`
+      <details>
+        <summary>${translate('Advanced actions')}</summary>
+        <fieldset class="button-bar by2" data-ref=fieldset></fieldset>
+      </details>
+    `)
+    container.appendChild(details)
+    this.getAdvancedEditActions(fieldset)
+    const onPanelLoaded = this._umap.editPanel.open({ content: container })
+    onPanelLoaded.then(() => {
+      builder.form.querySelector('input')?.focus()
     })
     this._umap.editedFeature = this
     if (!this.ui.isOnScreen(this._umap._leafletMap.getBounds())) this.zoomTo(event)
+    return onPanelLoaded
   }
 
   toggleEditing() {
-    this.edit()
+    if (this._umap.editedFeature === this) {
+      this._umap.editPanel.close()
+    } else {
+      this.edit()
+    }
   }
 
   getAdvancedEditActions(container) {
@@ -378,8 +395,6 @@ class Feature {
 
   connectToDataLayer(datalayer) {
     this.datalayer = datalayer
-    // FIXME should be in layer/ui
-    this.ui.options.renderer = this.datalayer.renderer
   }
 
   disconnectFromDataLayer(datalayer) {
@@ -416,7 +431,6 @@ class Feature {
     if (this.datalayer) {
       this.datalayer.removeFeature(this)
     }
-
     datalayer.addFeature(this)
     this.sync.upsert(this.toGeoJSON())
     this.redraw()
@@ -505,21 +519,6 @@ class Feature {
     })
   }
 
-  getInplaceEditMenu() {
-    return [
-      {
-        action: () => this.toggleEditing(),
-        title: translate('Toggle edit mode (⇧+Click)'),
-        icon: 'icon-edit',
-      },
-      {
-        action: () => this.del(),
-        title: translate('Delete this feature'),
-        icon: 'icon-delete',
-      },
-    ]
-  }
-
   isFiltered() {
     const filterKeys = this.datalayer.getFilterKeys()
     const filter = this._umap.browser.options.filter
@@ -607,7 +606,7 @@ class Feature {
   }
 
   getRank() {
-    return this.datalayer._index.indexOf(L.stamp(this))
+    return this.datalayer.features.getIndex(this)
   }
 
   redraw() {
@@ -622,9 +621,14 @@ class Feature {
     }
   }
 
-  getContextMenuItems(event) {
+  getContextMenu(event) {
     const permalink = this.getPermalink()
-    let items = []
+    const items = []
+    if (this._umap.editEnabled && !this.isReadOnly()) {
+      items.push({
+        items: this.getEditContextMenu(event),
+      })
+    }
     if (permalink) {
       items.push({
         label: translate('Permalink'),
@@ -646,32 +650,43 @@ class Feature {
         this._umap.tooltip.open({ content: L._('✅ Copied!') })
       },
     })
-    if (this._umap.editEnabled && !this.isReadOnly()) {
-      items = items.concat(this.getContextMenuEditItems(event))
-    }
     return items
   }
 
-  getContextMenuEditItems() {
-    let items = ['-']
-    if (this._umap.editedFeature !== this) {
-      items.push({
-        label: `${translate('Edit this feature')} (⇧+Click)`,
-        action: () => this.edit(),
-      })
+  getDrawingTools(event) {
+    return [
+      {
+        title: translate('Toggle edit mode (⇧+Click)'),
+        action: () => this.toggleEditing(),
+        icon: 'icon-edit',
+      },
+    ]
+  }
+
+  getEditContextMenu(event) {
+    const items = []
+    const vertexClicked = event.vertex
+    if (vertexClicked) {
+      items.push(...this.getVertexTools(event))
+    } else {
+      items.push(...this.getDrawingTools(event))
     }
-    items = items.concat(
+    items.push(
+      '-',
       {
-        label: this._umap.help.displayLabel('EDIT_FEATURE_LAYER'),
+        title: this._umap.help.displayLabel('EDIT_FEATURE_LAYER', false),
+        icon: 'icon-layers',
         action: () => this.datalayer.edit(),
       },
       {
-        label: translate('Delete this feature'),
-        action: () => this.del(),
+        title: translate('Clone this feature'),
+        icon: 'icon-copy',
+        action: () => this.clone(),
       },
       {
-        label: translate('Clone this feature'),
-        action: () => this.clone(),
+        title: translate('Delete this feature'),
+        icon: 'icon-delete',
+        action: () => this.del(),
       }
     )
     return items
@@ -686,7 +701,10 @@ class Feature {
   }
 
   deactivate() {
-    if (this._umap.activeFeature === this) this._umap.activeFeature = undefined
+    if (this._umap.activeFeature === this) {
+      this._umap.activeFeature = undefined
+      this.ui.closePopup()
+    }
   }
 }
 
@@ -731,6 +749,7 @@ export class Point extends Feature {
     return [
       'properties._umap_options.color',
       'properties._umap_options.iconClass',
+      'properties._umap_options.iconSize',
       'properties._umap_options.iconUrl',
       'properties._umap_options.iconOpacity',
     ]
@@ -764,11 +783,11 @@ export class Point extends Feature {
 
   zoomTo(event) {
     if (this.datalayer.isClustered() && !this.ui._icon) {
-      // callback is mandatory for zoomToShowLayer
-      this.datalayer.layer.zoomToShowLayer(this.ui, event.callback || (() => {}))
-    } else {
-      super.zoomTo(event)
+      this.ui._cluster.zoomToCoverage().then(() => {
+        this.ui._cluster.spiderfy()
+      })
     }
+    super.zoomTo(event)
   }
 }
 
@@ -785,16 +804,11 @@ class Path extends Feature {
     this.ui.setLatLngs(latlngs)
   }
 
-  connectToDataLayer(datalayer) {
-    super.connectToDataLayer(datalayer)
-    // We keep markers on their own layer on top of the paths.
-    this.ui.options.pane = this.datalayer.pane
-  }
-
   edit(event) {
     if (this._umap.editEnabled) {
-      super.edit(event)
+      const promise = super.edit(event)
       if (!this.ui.editEnabled()) this.ui.makeGeometryEditable()
+      return promise
     }
   }
 
@@ -852,33 +866,6 @@ class Path extends Feature {
     return other
   }
 
-  getInplaceEditMenu(event) {
-    const items = super.getInplaceEditMenu()
-    if (this.isMulti()) {
-      items.push({
-        action: () => this.ui.enableEdit().deleteShapeAt(event.latlng),
-        title: translate('Delete this shape'),
-        icon: 'icon-delete-shape',
-      })
-      items.push({
-        action: () => this.ui.isolateShape(event.latlng),
-        title: translate('Extract shape to separate feature'),
-        icon: 'icon-extract-shape',
-      })
-    }
-    return items
-  }
-
-  getInplaceEditVertexMenu(event) {
-    return [
-      {
-        action: () => event.vertex.delete(),
-        title: translate('Delete this vertex (Alt+Click)'),
-        icon: 'icon-delete-vertex',
-      },
-    ]
-  }
-
   zoomTo({ easing, callback }) {
     // Use bounds instead of centroid for paths.
     easing = easing || this._umap.getProperty('easing')
@@ -893,62 +880,55 @@ class Path extends Feature {
     if (callback) callback.call(this)
   }
 
-  getContextMenuItems(event) {
-    const items = super.getContextMenuItems(event)
+  getContextMenu(event) {
+    const items = super.getContextMenu(event)
     items.push({
       label: translate('Display measure'),
       action: () => Alert.info(this.ui.getMeasure()),
     })
-    if (this._umap.editEnabled && !this.isReadOnly() && this.isMulti()) {
-      items.push(...this.getContextMenuMultiItems(event))
-    }
     return items
   }
 
-  getContextMenuMultiItems(event) {
-    const items = [
-      '-',
+  getVertexTools(event) {
+    return [
       {
-        label: translate('Remove shape from the multi'),
-        action: () => {
-          this.ui.enableEdit().deleteShapeAt(event.latlng)
-        },
+        action: () => event.vertex.delete(),
+        title: translate('Delete this vertex (Alt+Click)'),
+        icon: 'icon-delete-vertex',
       },
     ]
-    const shape = this.ui.shapeAt(event.latlng)
-    if (this.ui._latlngs.indexOf(shape) > 0) {
-      items.push({
-        label: translate('Make main shape'),
-        action: () => {
-          this.ui.enableEdit().deleteShape(shape)
-          this.ui.editor.prependShape(shape)
-        },
-      })
-    }
-    return items
   }
 
-  getContextMenuEditItems(event) {
-    const items = super.getContextMenuEditItems(event)
+  getDrawingTools(event) {
+    const items = super.getDrawingTools(event)
+    if (this.isMulti()) {
+      items.push(
+        {
+          title: translate('Extract shape to separate feature'),
+          icon: 'icon-extract-shape',
+          action: () => {
+            this.ui.isolateShape(event.latlng)
+          },
+        },
+        {
+          title: translate('Delete this shape'),
+          icon: 'icon-delete-shape',
+          action: () => this.ui.enableEdit().deleteShapeAt(event.latlng),
+        }
+      )
+    }
     if (
       this._umap?.editedFeature !== this &&
       this.isSameClass(this._umap.editedFeature)
     ) {
       items.push({
-        label: translate('Transfer shape to edited feature'),
+        title: translate('Transfer shape to edited feature'),
+        icon: 'icon-transfer-shape',
         action: () => {
           this.transferShape(event.latlng, this._umap.editedFeature)
         },
       })
     }
-    if (this.isMulti()) {
-      items.push({
-        label: translate('Extract shape to separate feature'),
-        action: () => {
-          this.ui.isolateShape(event.latlng)
-        },
-      })
-    }
     return items
   }
 }
@@ -980,13 +960,63 @@ export class LineString extends Path {
   }
 
   getUIClass() {
-    return super.getUIClass() || LeafletPolyline
+    const klass = super.getUIClass()
+    if (klass) return klass
+    if (this.isRoute()) {
+      return LeafletRoute
+    }
+    return LeafletPolyline
   }
 
   isSameClass(other) {
     return other instanceof LineString
   }
 
+  cancelRoute() {
+    const oldRoute = Utils.CopyJSON(this.properties._umap_options.route)
+    this.properties._umap_options.route.active = false
+    this.redraw()
+    this.edit()
+    this.sync.update('properties._umap_options.route', null, oldRoute)
+  }
+
+  restoreRoute() {
+    const oldRoute = Utils.CopyJSON(this.properties._umap_options.route)
+    this._ensureRoute()
+    delete this.properties._umap_options.route.active
+    this.redraw()
+    this.sync.update(
+      'properties._umap_options.route',
+      this.properties._umap_options.route,
+      oldRoute
+    )
+    this.edit().then((panel) => {
+      panel.scrollTo('details#edit-route')
+    })
+  }
+
+  toRoute() {
+    this._ensureRoute()
+    this.properties._umap_options.route.coordinates = Utils.CopyJSON(this.coordinates)
+    this.redraw()
+    this.sync.update(
+      'properties._umap_options.route',
+      this.properties._umap_options.route,
+      null
+    )
+    this.edit().then((panel) => {
+      panel.scrollTo('details#edit-route')
+    })
+  }
+
+  askForRouteSettings() {
+    const container = Utils.loadTemplate(
+      `<div><h3>${translate('Route settings')}</h3></div>`
+    )
+    container.appendChild(this.routeForm())
+    return this._umap.dialog.open({ template: container })
+  }
+
   toPolygon() {
     const geojson = this.toGeoJSON()
     geojson.geometry.type = 'Polygon'
@@ -1001,15 +1031,51 @@ export class LineString extends Path {
     this.del()
   }
 
+  isRoute() {
+    return (
+      !!this.properties._umap_options.route &&
+      this.properties._umap_options.route.active !== false
+    )
+  }
+
   getAdvancedEditActions(container) {
     super.getAdvancedEditActions(container)
-    DomUtil.createButton(
-      'button umap-to-polygon',
-      container,
-      translate('Transform to polygon'),
-      this.toPolygon,
-      this
-    )
+    const button = Utils.loadTemplate(`
+      <button class="button" type="button"><i class="icon icon-24 icon-polygon"></i>${translate('Transform to polygon')}</button>
+    `)
+    container.appendChild(button)
+    button.addEventListener('click', () => this.toPolygon())
+    if (this.isRoute()) {
+      const button = Utils.loadTemplate(`
+        <button class="button" type="button"><i class="icon icon-24 icon-polyline"></i>${translate('Transform to regular line')}</button>
+      `)
+      container.appendChild(button)
+      button.addEventListener('click', () => this.cancelRoute())
+    } else if (!this.isMulti() && this.coordinates.length < 10) {
+      const button = Utils.loadTemplate(`
+        <button class="button" type="button"><i class="icon icon-24 icon-route"></i>${translate('Transform to route')}</button>
+      `)
+      container.appendChild(button)
+      button.addEventListener('click', () =>
+        this.askForRouteSettings().then(() => {
+          this.toRoute()
+          this.computeRoute()
+        })
+      )
+    } else if (this.properties._umap_options.route?.coordinates) {
+      const button = Utils.loadTemplate(`
+        <button class="button" type="button"><i class="icon icon-24 icon-route"></i>${translate('Restore route')}</button>
+      `)
+      container.appendChild(button)
+      button.addEventListener('click', () => this.restoreRoute())
+    }
+    if (this._umap.properties.ORSAPIKey) {
+      const button = Utils.loadTemplate(`
+        <button class="button" type="button"><i class="icon icon-24 icon-mountain"></i>${translate('Compute elevations')}</button>
+      `)
+      container.appendChild(button)
+      button.addEventListener('click', () => this.computeElevation())
+    }
   }
 
   _mergeShapes(from, to) {
@@ -1061,38 +1127,40 @@ export class LineString extends Path {
     return !LineUtil.isFlat(this.coordinates) && this.coordinates.length > 1
   }
 
-  getContextMenuEditItems(event) {
-    const items = super.getContextMenuEditItems(event)
-    const vertexClicked = event.vertex
-    if (!this.isMulti()) {
+  getVertexTools(event) {
+    const items = super.getVertexTools(event)
+    const index = event.vertex.getIndex()
+    if (index !== 0 && index !== event.vertex.getLastIndex()) {
       items.push({
-        label: translate('Transform to polygon'),
-        action: () => this.toPolygon(),
+        title: translate('Split line'),
+        icon: 'icon-split-line',
+        action: () => event.vertex.split(),
+      })
+    } else if (index === 0 || index === event.vertex.getLastIndex()) {
+      items.push({
+        title: this._umap.help.displayLabel('CONTINUE_LINE', false),
+        icon: 'icon-continue-line',
+        action: () => event.vertex.continue(),
       })
-    }
-    if (vertexClicked) {
-      const index = event.vertex.getIndex()
-      if (index !== 0 && index !== event.vertex.getLastIndex()) {
-        items.push({
-          label: translate('Split line'),
-          action: () => event.vertex.split(),
-        })
-      } else if (index === 0 || index === event.vertex.getLastIndex()) {
-        items.push({
-          label: this._umap.help.displayLabel('CONTINUE_LINE'),
-          action: () => event.vertex.continue(),
-        })
-      }
     }
     return items
   }
 
-  getContextMenuMultiItems(event) {
-    const items = super.getContextMenuMultiItems(event)
-    items.push({
-      label: translate('Merge lines'),
-      action: () => this.mergeShapes(),
-    })
+  getDrawingTools(event) {
+    const items = super.getDrawingTools(event)
+    if (this.isMulti()) {
+      items.push({
+        title: translate('Merge lines'),
+        icon: 'icon-merge',
+        action: () => this.mergeShapes(),
+      })
+    } else {
+      items.push({
+        title: translate('Transform to polygon'),
+        icon: 'icon-polygon',
+        action: () => this.toPolygon(),
+      })
+    }
     return items
   }
 
@@ -1101,23 +1169,64 @@ export class LineString extends Path {
     return Object.assign({ gain, loss }, super.extendedProperties())
   }
 
-  getInplaceEditVertexMenu(event) {
-    const items = super.getInplaceEditVertexMenu(event)
-    const index = event.vertex.getIndex()
-    if (index === 0 || index === event.vertex.getLastIndex()) {
-      items.push({
-        action: () => event.vertex.continue(),
-        title: translate('Continue line'),
-        icon: 'icon-continue-line',
-      })
-    } else {
-      items.push({
-        action: () => event.vertex.split(),
-        title: translate('Split line'),
-        icon: 'icon-split-line',
-      })
+  _ensureRoute() {
+    if (!this.properties._umap_options.route) {
+      this.properties._umap_options.route = {}
     }
-    return items
+    this.properties._umap_options.route.profile ??= ORS_PROFILES[0][0]
+    this.properties._umap_options.route.preference ??= ORS_PREFERENCES[0][0]
+    this.properties._umap_options.route.elevation ??= false
+    this.properties._umap_options.route.coordinates ??= []
+  }
+
+  routeForm() {
+    this._ensureRoute()
+    const metadatas = [
+      [
+        'profile',
+        {
+          handler: 'Select',
+          selectOptions: ORS_PROFILES,
+          label: translate('Profile'),
+        },
+      ],
+      [
+        'elevation',
+        {
+          handler: 'Switch',
+          label: translate('Compute elevations'),
+        },
+      ],
+      [
+        'preference',
+        {
+          handler: 'Select',
+          selectOptions: ORS_PREFERENCES,
+          label: translate('Route preference'),
+        },
+      ],
+    ]
+    const form = new MutatingForm(this.properties._umap_options.route, metadatas, {
+      umap: this._umap,
+    })
+    return form.build()
+  }
+
+  _editRoute(container) {
+    const template = `
+        <details id="edit-route">
+          <summary>${translate('Route settings')}</summary>
+          <fieldset data-ref=fieldset></fieldset>
+        </details>
+      `
+    const [details, { fieldset }] = Utils.loadTemplateWithRefs(template)
+    container.appendChild(details)
+    fieldset.appendChild(this.routeForm())
+    const button = Utils.loadTemplate(
+      `<button data-ref=button type="button">${translate('Compute route')}</button>`
+    )
+    fieldset.appendChild(button)
+    button.addEventListener('click', async () => this.computeRoute())
   }
 
   addExtraEditFieldset(container) {
@@ -1135,6 +1244,34 @@ export class LineString extends Path {
     })
     const fieldset = DomUtil.createFieldset(container, translate('Line decoration'))
     fieldset.appendChild(builder.build())
+    if (this._umap.properties.ORSAPIKey && this.isRoute()) {
+      this._editRoute(container)
+    }
+  }
+
+  async computeElevation() {
+    if (!this._umap.properties.ORSAPIKey) return
+    const importer = new OpenRouteService(this._umap)
+    const geometry = await importer.elevation(this.geometry)
+    if (geometry?.type) {
+      const oldGeometry = Utils.CopyJSON(this._geometry)
+      this.geometry = geometry
+      this.ui.resetTooltip()
+      this.sync.update('geometry', this.geometry, oldGeometry)
+    }
+  }
+
+  async computeRoute() {
+    if (!this._umap.properties.ORSAPIKey) return
+    const importer = new OpenRouteService(this._umap)
+    await importer.directions(this.properties._umap_options.route).then((geometry) => {
+      if (geometry?.type) {
+        const oldGeometry = Utils.CopyJSON(this._geometry)
+        this.geometry = geometry
+        this.ui.resetTooltip()
+        this.sync.update('geometry', this.geometry, oldGeometry)
+      }
+    })
   }
 }
 
@@ -1241,29 +1378,21 @@ export class Polygon extends Path {
     )
   }
 
-  getInplaceEditMenu(event) {
-    const items = super.getInplaceEditMenu()
-    items.push({
-      action: () => this.ui.startHole(event),
-      title: translate('Start a hole here'),
-      icon: 'icon-hole',
-    })
-    return items
-  }
-
-  getContextMenuEditItems(event) {
-    const items = super.getContextMenuEditItems(event)
+  getDrawingTools(event) {
+    const items = super.getDrawingTools(event)
     const shape = this.ui.shapeAt(event.latlng)
     // No multi and no holes.
     if (shape && !this.isMulti() && (LineUtil.isFlat(shape) || shape.length === 1)) {
       items.push({
-        label: translate('Transform to lines'),
+        title: translate('Transform to lines'),
+        icon: 'icon-polyline',
         action: () => this.toLineString(),
       })
     }
     items.push({
-      label: translate('Start a hole here'),
+      title: translate('Start a hole here'),
       action: () => this.ui.startHole(event),
+      icon: 'icon-hole',
     })
     return items
   }