improved mapbox plugin

package.json

@@ -44,6 +44,7 @@
         "webpack-dev-server": "^4.15.1"
     },
     "dependencies": {
+        "@mapbox/mapbox-gl-draw": "^1.4.2",
         "mapbox-gl": "^2.15.0",
         "n3": "^1.17.0",
         "rdf-validate-shacl": "^0.4.5",

src/config.ts

@@ -21,7 +21,7 @@ export class Config {
     loader = new Loader(this)
     classInstanceProvider: ClassInstanceProvider | undefined
     prefixes: Prefixes = {}
-    plugins: Plugins = {}
+    plugins = new Plugins()
 
     dataGraph = new Store()
     lists: Record<string, Term[]> = {}

src/editors.ts

@@ -163,7 +163,7 @@ export function createNumberEditor(template: ShaclPropertyTemplate, value?: Term
     return createDefaultTemplate(template, editor, value)
 }
 
-export type InputListEntry = { value: Term, label?: string }
+export type InputListEntry = { value: Term | string, label?: string }
 
 export function createListEditor(template: ShaclPropertyTemplate, listEntries: InputListEntry[], value?: Term): HTMLElement {
     const editor = document.createElement('select')
@@ -175,9 +175,10 @@ export function createListEditor(template: ShaclPropertyTemplate, listEntries: I
 
     for (const item of listEntries) {
         const option = document.createElement('option')
-        option.innerHTML = item.label ? item.label : item.value.value
-        option.value = item.value.value
-        if (value && value.equals(item.value)) {
+        const itemValue = (typeof item.value === 'string') ? item.value : item.value.value
+        option.innerHTML = item.label ? item.label : itemValue
+        option.value = itemValue
+        if (value && value.value === itemValue) {
             option.selected = true
         }
         editor.options.add(option)
@@ -188,21 +189,6 @@ export function createListEditor(template: ShaclPropertyTemplate, listEntries: I
     return result
 }
 
-function setListEntries(select: HTMLSelectElement, list: InputListEntry[], value?: Term) {
-    for (const item of list) {
-        const option = document.createElement('option')
-        option.innerHTML = item.label ? item.label : item.value.value
-        option.value = item.value.value
-        if (value && value.equals(item.value)) {
-            option.selected = true
-        }
-        select.options.add(option)
-    }
-    if (value) {
-        select.value = value.value
-    }
-}
-
 export function toRDF(editor: Editor): Literal | NamedNode | undefined {
     let datatype = editor['shacl-datatype']
     let value: number | string = editor.value

src/form.ts

@@ -95,7 +95,7 @@ export class ShaclForm extends HTMLElement {
     }
 
     public registerPlugin(plugin: Plugin) {
-        this.config.plugins[plugin.predicate] = plugin
+        this.config.plugins.register(plugin)
         this.initialize()
     }
 

src/plugin.ts

@@ -1,20 +1,38 @@
 import { ShaclPropertyTemplate } from './property-template'
-import { InputListEntry } from './editors'
-import { NamedNode } from 'n3'
 import { Term } from '@rdfjs/types'
-import { findInstancesOf } from './util';
-import { Config } from './config';
-import { SHAPES_GRAPH } from './constants';
 
-export type Plugins = {
-    [predicate: string]: Plugin;
+export class Plugins {
+    private plugins: Record<string, Plugin> = {}
+
+    register(plugin: Plugin) {
+        this.plugins[`${plugin.predicate}:${plugin.datatype}`] = plugin
+    }
+
+    find(predicate: string | undefined, datatype: string | undefined): Plugin | undefined {
+        let plugin = this.plugins[`${predicate}:${datatype}`]
+        if (plugin) {
+            return plugin
+        }
+        plugin = this.plugins[`${predicate}:${undefined}`]
+        if (plugin) {
+            return plugin
+        }
+        return this.plugins[`${undefined}:${datatype}`]
+    }
+}
+
+export type PluginOptions = {
+    predicate?: string
+    datatype?: string
 }
 
 export abstract class Plugin {
-    predicate: string
+    predicate: string | undefined
+    datatype: string | undefined
 
-    constructor(predicate: string) {
-        this.predicate = predicate
+    constructor(options: PluginOptions) {
+        this.predicate = options.predicate
+        this.datatype = options.datatype
     }
 
     abstract createInstance(template: ShaclPropertyTemplate, value?: Term): HTMLElement

src/plugins/fixed-list.ts

@@ -1,4 +1,4 @@
-import { Plugin } from '../plugin'
+import { Plugin, PluginOptions } from '../plugin'
 import { Term } from '@rdfjs/types'
 
 import { ShaclPropertyTemplate } from '../property-template'
@@ -7,8 +7,8 @@ import { createListEditor, InputListEntry } from '../editors'
 export class FixedListPlugin extends Plugin {
     entries: InputListEntry[]
 
-    constructor(predicate: string, entries: InputListEntry[]) {
-        super(predicate)
+    constructor(options: PluginOptions, entries: InputListEntry[]) {
+        super(options)
         this.entries = entries
     }
 

src/plugins/mapbox.ts

@@ -1,23 +1,29 @@
 import { Term } from '@rdfjs/types'
-import { Plugin } from '../plugin'
+import { Plugin, PluginOptions } from '../plugin'
 import { ShaclPropertyTemplate } from '../property-template'
 import { createTextEditor, Editor } from '../editors'
 import mapboxgl from 'mapbox-gl'
+import MapboxDraw from '@mapbox/mapbox-gl-draw'
 import 'mapbox-gl/dist/mapbox-gl.css'
+import '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css'
 
-const dialogTemplate = '<dialog id="shaclMapDialog" onclick="event.target==this && this.close()">\
-<div style="position: absolute; z-index: 1; padding: 2px; background-color: #EEEEEECC;">Choose a location by left clicking, then close dialog\
-<button id="closeButton" type="button" style="margin-left: 4px; padding: 6px 10px; background: white; border-radius: 4px; border: 0; cursor: pointer;">Close</button>\
-</div></dialog>'
+const dialogTemplate = '<style>#shaclMapDialog .closeButton { position: absolute; right: 0; top: 0; z-index: 1; padding: 10px 12px; cursor: pointer; border: 0; background-color: #FFFA; }\
+#shaclMapDialog .closeButton:hover { background-color: #FFF }\
+#shaclMapDialog .hint { position: absolute; right: 60px; top: 3px; z-index: 1; padding: 4px 6px; background-color: #FFFA; border-radius: 4px; }\
+</style><dialog id="shaclMapDialog" onclick="event.target==this && this.close()">\
+<div class="hint">Draw a polygon or point, then close map</div>\
+<button class="closeButton" type="button" onclick="this.parentElement.close()">&#x2715;</button>\
+</dialog>'
 
 export class MapBoxPlugin extends Plugin {
     map: mapboxgl.Map
     dialog: HTMLDialogElement
     currentEditor: Editor | undefined
     currentMarker: mapboxgl.Marker | undefined
+    draw: MapboxDraw
 
-    constructor(predicate: string, apiKey: string) {
-        super(predicate)
+    constructor(options: PluginOptions, apiKey: string) {
+        super(options)
         mapboxgl.accessToken = apiKey
 
         this.dialog = document.querySelector('#shaclMapDialog') as HTMLDialogElement
@@ -30,6 +36,7 @@ export class MapBoxPlugin extends Plugin {
             document.body.style.position = ''
             document.body.style.top = ''
             window.scrollTo(0, parseInt(scrollY || '0') * -1)
+            this.setEditorValue()
         })
         this.map = new mapboxgl.Map({
             container: 'shaclMapDialog',
@@ -38,15 +45,19 @@ export class MapBoxPlugin extends Plugin {
             zoom: 5,
             center: { lng: 8.657238961696038, lat: 49.87627570549512 }
         })
-        this.map.addControl(new mapboxgl.NavigationControl())
+        this.map.addControl(new mapboxgl.NavigationControl(), 'top-left')
+
+        this.draw = new MapboxDraw({
+            displayControlsDefault: false,
+            controls: { point: true, polygon: true },
+        });
+        this.map.addControl(this.draw, 'top-left')
+
         this.map.on('idle', () => {
             // this fixes wrong size of canvas
             this.map.resize()
         })
-        this.map.on('click', (e: mapboxgl.MapLayerTouchEvent) => {
-            this.setMarker(e.lngLat)
-        })
-        this.dialog.querySelector('#closeButton')?.addEventListener('click', () => { this.dialog.close() })
+        this.map.on('draw.create', () => this.deleteAllButLastDrawing());
     }
 
     createInstance(template: ShaclPropertyTemplate, value?: Term): HTMLElement {
@@ -55,19 +66,26 @@ export class MapBoxPlugin extends Plugin {
         button.type = 'button'
         button.innerHTML = 'Open map...'
         button.style.marginLeft = '5px'
+        button.classList.add('open-map-button')
 
         button.onclick = () => {
             this.currentEditor = instance.querySelector('.editor') as Editor
-            let markerPos: mapboxgl.LngLat | undefined
-            const matches = this.currentEditor.value.match(/^POINT\(([+\-]?[0-9]*[.]?[0-9]+),([+\-]?[0-9]*[.]?[0-9]+)\)$/)
-            if (matches?.length == 3) {
-                markerPos = { lng: parseFloat(matches[1]), lat: parseFloat(matches[2]) }
-            }
-
-            this.setMarker(markerPos)
-            if (markerPos) {
-                this.map.setZoom(15)
-                this.map.setCenter(markerPos)
+            this.draw.deleteAll()
+
+            const geometry = this.getEditorValue()
+            if (geometry && geometry.coordinates?.length) {
+                this.draw.add(geometry)
+                if (typeof geometry.coordinates[0] === 'number') {
+                    // e.g. Point
+                    this.map.setCenter(geometry.coordinates as mapboxgl.LngLatLike)
+                    this.map.setZoom(15)
+                } else {
+                    // e.g. Polygon
+                    const bounds = geometry.coordinates[0].reduce((bounds, coord) => {
+                        return bounds.extend(coord as mapboxgl.LngLatLike)
+                    }, new mapboxgl.LngLatBounds(geometry.coordinates[0][0] as mapboxgl.LngLatLike, geometry.coordinates[0][0] as mapboxgl.LngLatLike))
+                    this.map.fitBounds(bounds, { padding: 20, animate: false })
+                }
             } else {
                 this.map.setZoom(5)
             }
@@ -79,13 +97,57 @@ export class MapBoxPlugin extends Plugin {
         return instance
     }
 
-    setMarker(pos: mapboxgl.LngLat | undefined) {
-        if (this.currentMarker) {
-            this.currentMarker.remove()
+    deleteAllButLastDrawing() {
+        const data = this.draw.getAll()
+        for (let i = 0; i < data.features.length - 1; i++) {
+            this.draw.delete(data.features[i].id as string)
         }
-        if (this.currentEditor && pos) {
-            this.currentMarker = new mapboxgl.Marker().setLngLat(pos).addTo(this.map)
-            this.currentEditor.value = `POINT(${pos.lng},${pos.lat})`
+    }
+
+    getEditorValue() {
+        if (this.currentEditor) {
+            const pointCoords = this.currentEditor.value.match(/^POINT\((.*)\)$/)
+            if (pointCoords?.length == 2) {
+                const xy = pointCoords[1].split(' ')
+                if (xy.length === 2) {
+                    return { type: 'Point', coordinates: [parseFloat(xy[0]), parseFloat(xy[1])] }
+                }
+            }
+            const polygonCoords = this.currentEditor.value.match(/^POLYGON[(]{2}(.*)[)]{2}$/)
+            if (polygonCoords?.length == 2) {
+                const split = polygonCoords[1].split(',')
+                if (split.length > 2) {
+                    const coords: number[][][] = []
+                    const outer: number[][] = []
+                    coords.push(outer)
+                    for (const coord of split) {
+                        const xy = coord.split(' ')
+                        if (xy.length === 2) {
+                            outer.push([parseFloat(xy[0]), parseFloat(xy[1])])
+                        }
+                    }
+                    return { type: 'Polygon', coordinates: coords }
+                }
+            }
+        }
+        return undefined
+    }
+
+    setEditorValue() {
+        if (this.currentEditor) {
+            let value = ''
+            const data = this.draw.getAll()
+            if (data.features.length) {
+                const geometry = data.features[0].geometry
+                if (geometry.coordinates?.length) {
+                    if (geometry.type === 'Point') {
+                        value = `POINT(${geometry.coordinates.join(' ')})`
+                    } else if (geometry.type === 'Polygon') {
+                        value = `POLYGON((${geometry.coordinates[0].map(item => { return item.join(' ') }).join(',')}))`
+                    }
+                }
+            }
+            this.currentEditor.value = value
             this.currentEditor.dispatchEvent(new Event('change', { bubbles: true }))
         }
     }

src/property.ts

@@ -120,7 +120,7 @@ export function createPropertyInstance(template: ShaclPropertyTemplate, value?:
         instance.classList.add('property-instance')
         instance.appendChild(new ShaclNode(template.node, template.config, value as NamedNode | BlankNode | undefined, template.label))
     } else {
-        const plugin = template.path ? template.config.plugins[template.path] : undefined
+        const plugin = template.config.plugins.find(template.path, template.datatype?.value)
         if (plugin) {
             instance = plugin.createInstance(template, value)
         } else {