Merge pull request #219 from camptocamp/map_access

Simplify point drawing on mobile
camptocamp · Jun 8, 2020 · d30068e · d30068e
2 parents a35aed8 + c6634ac
commit d30068e
Show file tree

Hide file tree

Showing 4 changed files with 76 additions and 26 deletions.
diff --git a/c2cgeoform/static/src/controls.js b/c2cgeoform/static/src/controls.js
@@ -15,7 +15,7 @@ function createButton(container, options) {
 }
 
 export function addControls(options) {
-  const { target, i18n, interactions, source } = options
+  const { target, type, interactions, source } = options
   const { draw, modify } = interactions
   const container = document.createElement('div')
   container.classList.add(
@@ -24,16 +24,18 @@ export function addControls(options) {
     'c2cgeoform-controls'
   )
 
-  createButton(container, {
-    content: '<i class="glyphicon glyphicon-pencil"></i>',
-    title: options.drawTooltip,
-    callback: () => draw.setActive(true) && modify.setActive(false),
-  })
-  createButton(container, {
-    content: '<i class="glyphicon glyphicon-move"></i>',
-    title: options.modifyTooltip,
-    callback: () => modify.setActive(true) && draw.setActive(false),
-  })
+  if (type !== 'Point') {
+    createButton(container, {
+      content: '<i class="glyphicon glyphicon-pencil"></i>',
+      title: options.drawTooltip,
+      callback: () => draw.setActive(true) && modify.setActive(false),
+    })
+    createButton(container, {
+      content: '<i class="glyphicon glyphicon-move"></i>',
+      title: options.modifyTooltip,
+      callback: () => modify.setActive(true) && draw.setActive(false),
+    })
+  }
   createButton(container, {
     content: '<i class="glyphicon glyphicon-remove"></i>',
     title: options.clearTooltip,

diff --git a/c2cgeoform/static/src/index.js b/c2cgeoform/static/src/index.js
@@ -13,7 +13,7 @@ import { getStyleFunction } from './styles'
 import { defaults as controlDefaults } from 'ol/control'
 
 const format = new GeoJSONFormat()
-const widgets = []
+const widgets = {}
 let itemIcon
 
 export function initMap(target, options) {
@@ -85,6 +85,8 @@ export function initMapWidget(oid, options) {
       zoomOptions: options,
     }),
   })
+  //Store map for oid
+  widgets[oid] = map
 
   if (options.onFocusOnly) map.getTargetElement().setAttribute('tabindex', '0')
 
@@ -106,6 +108,7 @@ export function initMapWidget(oid, options) {
         interactions,
         drawTooltip: options[`draw${type}Tooltip`],
         source,
+        type,
       })
     )
   }
@@ -116,9 +119,19 @@ export function initMapWidget(oid, options) {
 }
 
 export function checkInitialized(oid) {
-  const initialized = widgets.includes(oid)
-  widgets.push(oid)
-  return initialized
+  return oid in widgets
+}
+
+export function getObjectMap(oid) {
+  return widgets[oid]
+}
+
+export function setReadOnly(oid) {
+  const map = getObjectMap(oid)
+  map.getControls().clear()
+  map.getInteractions().clear()
+  map.getTargetElement().classList.add('c2cgeoform-readonly')
+  map.updateSize()
 }
 
 export function registerProjection(epsg, def) {

diff --git a/c2cgeoform/static/src/interactions.js b/c2cgeoform/static/src/interactions.js
@@ -1,6 +1,7 @@
 import Draw from 'ol/interaction/Draw'
 import Modify from 'ol/interaction/Modify'
 import GeoJSON from 'ol/format/GeoJSON'
+import Point from 'ol/geom/Point'
 import MultiPoint from 'ol/geom/MultiPoint'
 import MultiLineString from 'ol/geom/MultiLineString'
 import MultiPolygon from 'ol/geom/MultiPolygon'
@@ -9,28 +10,36 @@ const format = new GeoJSON()
 
 export function addInteractions(options) {
   const { input, multi, ...interactionOptions } = options
+  const store = geometry => {
+    input.value = geometry ? getGeometryJSON(geometry, multi) : ''
+    input.dispatchEvent(new Event('input', { bubbles: true }))
+  }
   const draw = addDrawInteraction(interactionOptions)
   const modify = addModifyInteraction(interactionOptions)
   modify.setActive(false)
-  options.source.on(
-    'change',
-    e =>
-      (input.value =
-        options.source.getFeatures().length > 0
-          ? getGeometryJSON(
-              options.source.getFeatures()[0].getGeometry(),
-              multi
-            )
-          : '')
+  options.source.on('change', () =>
+    store(options.source.getFeatures()[0]?.getGeometry())
   )
+  // Mobile drawing
+  if (
+    window.matchMedia('(max-width: 767px)').matches &&
+    interactionOptions.type === 'Point'
+  ) {
+    let map = options.map
+    draw.setActive(false)
+    modify.setActive(false)
+    map.getTargetElement().classList.add('cross')
+    map.updateSize()
+    map.on('moveend', () => store(new Point(map.getView().getCenter())))
+  }
   return { draw, modify }
 }
 
 export function addDrawInteraction(options) {
   const { map, source, type } = options
   const draw = new Draw({ type })
   map.addInteraction(draw)
-  draw.on('drawstart', e => source.clear())
+  draw.on('drawstart', () => source.clear())
   draw.on('drawend', e => source.addFeature(e.feature))
   return draw
 }

diff --git a/c2cgeoform/static/src/main.scss b/c2cgeoform/static/src/main.scss
@@ -7,7 +7,30 @@
   &.hovering:hover {
     cursor: pointer;
   }
+  &.cross {
+    &:before,
+    &:after {
+      position: absolute;
+      content: '';
+      background: red;
+      display: block;
+      width: 40%;
+      height: 1px;
+      transform: rotate(-90deg);
+      left: 0;
+      right: 0;
+      top: 0;
+      bottom: 0;
+      margin: auto;
+      z-index: 100;
+    }
+    &:after {
+      transform: rotate(0deg);
+    }
+    height: 60vw;
+  }
 }
+
 .c2cgeoform-locate-me-btn {
   top: 4.5em;
   left: 0.5em;
@@ -18,6 +41,9 @@
 .c2cgeoform-locate-me-btn .glyphicon {
   top: 0;
 }
+.c2cgeoform-readonly .c2cgeoform-locate-me-btn {
+  display: none;
+}
 
 .c2cgeoform-controls {
   bottom: 0.5em;