diff --git a/c2cgeoform/static/src/controls.js b/c2cgeoform/static/src/controls.js index 5d748474..acf3bdf2 100644 --- 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: '', - title: options.drawTooltip, - callback: () => draw.setActive(true) && modify.setActive(false), - }) - createButton(container, { - content: '', - title: options.modifyTooltip, - callback: () => modify.setActive(true) && draw.setActive(false), - }) + if (type !== 'Point') { + createButton(container, { + content: '', + title: options.drawTooltip, + callback: () => draw.setActive(true) && modify.setActive(false), + }) + createButton(container, { + content: '', + title: options.modifyTooltip, + callback: () => modify.setActive(true) && draw.setActive(false), + }) + } createButton(container, { content: '', title: options.clearTooltip, diff --git a/c2cgeoform/static/src/index.js b/c2cgeoform/static/src/index.js index 3582abb1..7eaa678e 100644 --- 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 index 1ddaeb05..cf2d0b91 100644 --- 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,20 +10,28 @@ 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 } } @@ -30,7 +39,7 @@ 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 index e74ae76f..7d16594b 100644 --- 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;