@ulb-darmstadt/shacl-form 1.6.2 → 1.6.4

package/src/plugins/leaflet.ts

@@ -0,0 +1,196 @@
+import * as L from 'leaflet'
+import 'leaflet-editable/src/Leaflet.Editable.js'
+import leafletCss from 'leaflet/dist/leaflet.css?raw'
+import leafletFullscreenCss from 'leaflet.fullscreen/Control.FullScreen.css?raw'
+import 'leaflet.fullscreen/Control.FullScreen.js'
+import { Term } from '@rdfjs/types'
+
+import { Plugin, PluginOptions } from '../plugin'
+import { Editor, fieldFactory } from '../theme'
+import { ShaclPropertyTemplate } from '../property-template'
+import { Geometry, geometryToWkt, wktToGeometry, worldBounds } from './map-util'
+
+const css = `
+#shaclMapDialog .closeButton { position: absolute; right: 0; top: 0; z-index: 1; padding: 6px 8px; cursor: pointer; border: 0; background-color: #FFFA; font-size: 24px; z-index: 1000; }
+#shaclMapDialog { padding: 0; width:90vw; height: 90vh; margin: auto; }
+#shaclMapDialog::backdrop { background-color: #0007; }
+#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; z-index: 1000; pointer-events: none; }
+.leaflet-container { min-height: 300px; }
+.fullscreen-icon { background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjYgNTIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTIwLjYgMzYuN0gxNmEuOS45IDAgMCAxLS44LS44di00LjVjMC0uMi4yLS40LjQtLjRoMS40Yy4zIDAgLjUuMi41LjR2M2gzYy4yIDAgLjQuMi40LjV2MS40YzAgLjItLjIuNC0uNC40em0tOS45LS44di00LjVjMC0uMi0uMi0uNC0uNC0uNEg4LjljLS4zIDAtLjUuMi0uNS40djNoLTNjLS4yIDAtLjQuMi0uNC41djEuNGMwIC4yLjIuNC40LjRIMTBjLjQgMCAuOC0uNC44LS44em0wIDEwLjdWNDJjMC0uNC0uNC0uOC0uOC0uOEg1LjRjLS4yIDAtLjQuMi0uNC40djEuNGMwIC4zLjIuNS40LjVoM3YzYzAgLjIuMi40LjUuNGgxLjRjLjIgMCAuNC0uMi40LS40em02LjkgMHYtM2gzYy4yIDAgLjQtLjIuNC0uNXYtMS40YzAtLjItLjItLjQtLjQtLjRIMTZjLS40IDAtLjguNC0uOC44djQuNWMwIC4yLjIuNC40LjRoMS40Yy4zIDAgLjUtLjIuNS0uNHpNNSAxMC4zVjUuOWMwLS41LjQtLjkuOS0uOWg0LjRjLjIgMCAuNC4yLjQuNFY3YzAgLjItLjIuNC0uNC40aC0zdjNjMCAuMi0uMi40LS40LjRINS40YS40LjQgMCAwIDEtLjQtLjR6bTEwLjMtNC45VjdjMCAuMi4yLjQuNC40aDN2M2MwIC4yLjIuNC40LjRoMS41Yy4yIDAgLjQtLjIuNC0uNFY1LjljMC0uNS0uNC0uOS0uOS0uOWgtNC40Yy0uMiAwLS40LjItLjQuNHptNS4zIDkuOUgxOWMtLjIgMC0uNC4yLS40LjR2M2gtM2MtLjIgMC0uNC4yLS40LjR2MS41YzAgLjIuMi40LjQuNGg0LjRjLjUgMCAuOS0uNC45LS45di00LjRjMC0uMi0uMi0uNC0uNC0uNHptLTkuOSA1LjNWMTljMC0uMi0uMi0uNC0uNC0uNGgtM3YtM2MwLS4yLS4yLS40LS40LS40SDUuNGMtLjIgMC0uNC4yLS40LjR2NC40YzAgLjUuNC45LjkuOWg0LjRjLjIgMCAuNC0uMi40LS40eiIgZmlsbD0iY3VycmVudENvbG9yIi8+PC9zdmc+); }
+#shaclMapDialogContainer { width:100%; height: 100%; }
+`
+const dialogTemplate = `
+<dialog id="shaclMapDialog" onclick="event.target==this && this.close()">
+<div id="shaclMapDialogContainer"></div>
+<div class="hint">&#x24D8; Draw a polygon or marker, then close dialog</div>
+<button class="closeButton" type="button" onclick="this.parentElement.close()">&#x2715;</button>
+</dialog>`
+
+const defaultCenter = { lng: 8.657238961696038, lat: 49.87627570549512 }
+const attribution = '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
+const tileSource = 'https://tile.openstreetmap.de/{z}/{x}/{y}.png'
+// const tileSource = 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}'
+
+const markerIcon = L.icon({
+    iconUrl: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAApCAYAAADAk4LOAAAFgUlEQVR4Aa1XA5BjWRTN2oW17d3YaZtr2962HUzbDNpjszW24mRt28p47v7zq/bXZtrp/lWnXr337j3nPCe85NcypgSFdugCpW5YoDAMRaIMqRi6aKq5E3YqDQO3qAwjVWrD8Ncq/RBpykd8oZUb/kaJutow8r1aP9II0WmLKLIsJyv1w/kqw9Ch2MYdB++12Onxee/QMwvf4/Dk/Lfp/i4nxTXtOoQ4pW5Aj7wpici1A9erdAN2OH64x8OSP9j3Ft3b7aWkTg/Fm91siTra0f9on5sQr9INejH6CUUUpavjFNq1B+Oadhxmnfa8RfEmN8VNAsQhPqF55xHkMzz3jSmChWU6f7/XZKNH+9+hBLOHYozuKQPxyMPUKkrX/K0uWnfFaJGS1QPRtZsOPtr3NsW0uyh6NNCOkU3Yz+bXbT3I8G3xE5EXLXtCXbbqwCO9zPQYPRTZ5vIDXD7U+w7rFDEoUUf7ibHIR4y6bLVPXrz8JVZEql13trxwue/uDivd3fkWRbS6/IA2bID4uk0UpF1N8qLlbBlXs4Ee7HLTfV1j54APvODnSfOWBqtKVvjgLKzF5YdEk5ewRkGlK0i33Eofffc7HT56jD7/6U+qH3Cx7SBLNntH5YIPvODnyfIXZYRVDPqgHtLs5ABHD3YzLuespb7t79FY34DjMwrVrcTuwlT55YMPvOBnRrJ4VXTdNnYug5ucHLBjEpt30701A3Ts+HEa73u6dT3FNWwflY86eMHPk+Yu+i6pzUpRrW7SNDg5JHR4KapmM5Wv2E8Tfcb1HoqqHMHU+uWDD7zg54mz5/2BSnizi9T1Dg4QQXLToGNCkb6tb1NU+QAlGr1++eADrzhn/u8Q2YZhQVlZ5+CAOtqfbhmaUCS1ezNFVm2imDbPmPng5wmz+gwh+oHDce0eUtQ6OGDIyR0uUhUsoO3vfDmmgOezH0mZN59x7MBi++WDL1g/eEiU3avlidO671bkLfwbw5XV2P8Pzo0ydy4t2/0eu33xYSOMOD8hTf4CrBtGMSoXfPLchX+J0ruSePw3LZeK0juPJbYzrhkH0io7B3k164hiGvawhOKMLkrQLyVpZg8rHFW7E2uHOL888IBPlNZ1FPzstSJM694fWr6RwpvcJK60+0HCILTBzZLFNdtAzJaohze60T8qBzyh5ZuOg5e7uwQppofEmf2++DYvmySqGBuKaicF1blQjhuHdvCIMvp8whTTfZzI7RldpwtSzL+F1+wkdZ2TBOW2gIF88PBTzD/gpeREAMEbxnJcaJHNHrpzji0gQCS6hdkEeYt9DF/2qPcEC8RM28Hwmr3sdNyht00byAut2k3gufWNtgtOEOFGUwcXWNDbdNbpgBGxEvKkOQsxivJx33iow0Vw5S6SVTrpVq11ysA2Rp7gTfPfktc6zhtXBBC+adRLshf6sG2RfHPZ5EAc4sVZ83yCN00Fk/4kggu40ZTvIEm5g24qtU4KjBrx/BTTH8ifVASAG7gKrnWxJDcU7x8X6Ecczhm3o6YicvsLXWfh3Ch1W0k8x0nXF+0fFxgt4phz8QvypiwCCFKMqXCnqXExjq10beH+UUA7+nG6mdG/Pu0f3LgFcGrl2s0kNNjpmoJ9o4B29CMO8dMT4Q5ox8uitF6fqsrJOr8qnwNbRzv6hSnG5wP+64C7h9lp30hKNtKdWjtdkbuPA19nJ7Tz3zR/ibgARbhb4AlhavcBebmTHcFl2fvYEnW0ox9xMxKBS8btJ+KiEbq9zA4RthQXDhPa0T9TEe69gWupwc6uBUphquXgf+/FrIjweHQS4/pduMe5ERUMHUd9xv8ZR98CxkS4F2n3EUrUZ10EYNw7BWm9x1GiPssi3GgiGRDKWRYZfXlON+dfNbM+GgIwYdwAAAAASUVORK5CYII=',
+    shadowUrl: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACkAAAApCAQAAAACach9AAACMUlEQVR4Ae3ShY7jQBAE0Aoz/f9/HTMzhg1zrdKUrJbdx+Kd2nD8VNudfsL/Th///dyQN2TH6f3y/BGpC379rV+S+qqetBOxImNQXL8JCAr2V4iMQXHGNJxeCfZXhSRBcQMfvkOWUdtfzlLgAENmZDcmo2TVmt8OSM2eXxBp3DjHSMFutqS7SbmemzBiR+xpKCNUIRkdkkYxhAkyGoBvyQFEJEefwSmmvBfJuJ6aKqKWnAkvGZOaZXTUgFqYULWNSHUckZuR1HIIimUExutRxwzOLROIG4vKmCKQt364mIlhSyzAf1m9lHZHJZrlAOMMztRRiKimp/rpdJDc9Awry5xTZCte7FHtuS8wJgeYGrex28xNTd086Dik7vUMscQOa8y4DoGtCCSkAKlNwpgNtphjrC6MIHUkR6YWxxs6Sc5xqn222mmCRFzIt8lEdKx+ikCtg91qS2WpwVfBelJCiQJwvzixfI9cxZQWgiSJelKnwBElKYtDOb2MFbhmUigbReQBV0Cg4+qMXSxXSyGUn4UbF8l+7qdSGnTC0XLCmahIgUHLhLOhpVCtw4CzYXvLQWQbJNmxoCsOKAxSgBJno75avolkRw8iIAFcsdc02e9iyCd8tHwmeSSoKTowIgvscSGZUOA7PuCN5b2BX9mQM7S0wYhMNU74zgsPBj3HU7wguAfnxxjFQGBE6pwN+GjME9zHY7zGp8wVxMShYX9NXvEWD3HbwJf4giO4CFIQxXScH1/TM+04kkBiAAAAAElFTkSuQmCC',
+
+    iconSize:     [25, 41], // size of the icon
+    shadowSize:   [41, 41], // size of the shadow
+    iconAnchor:   [12, 41], // point of the icon which will correspond to marker's location
+    shadowAnchor: [14, 41],  // the same for the shadow
+    popupAnchor:  [-3, -76] // point from which the popup should open relative to the iconAnchor
+})
+
+export class LeafletPlugin extends Plugin {
+    map: L.Map | undefined
+    currentEditor: Editor | undefined
+    createdGeometry: Geometry | undefined
+    displayedShape: L.Polygon | L.Marker | undefined
+
+    constructor(options: PluginOptions) {
+        super(options, leafletCss + '\n' + leafletFullscreenCss + '\n' + css)
+    }
+
+    initEditMode(form: HTMLElement): HTMLDialogElement {
+        form.insertAdjacentHTML('beforeend', dialogTemplate)
+        const container = form.querySelector('#shaclMapDialogContainer') as HTMLElement
+        this.map = L.map(container, {
+            fullscreenControl: true,
+            editable: true,
+            layers: [ L.tileLayer(tileSource) ],
+            zoom: 5,
+            maxBounds: worldBounds,
+            center: defaultCenter
+        })
+        this.map.attributionControl.addAttribution(attribution)
+
+        const EditControl = L.Control.extend({ options: { position: 'topleft', callback: null, kind: '', html: '' },
+            onAdd: function (map: L.Map) {
+                let container = L.DomUtil.create('div', 'leaflet-control leaflet-bar')
+                let link = L.DomUtil.create('a', '', container)
+                link.href = '#';
+                link.title = 'Create a new ' + this.options.kind;
+                link.innerHTML = this.options.html;
+                L.DomEvent.on(link, 'click', L.DomEvent.stop).on(link, 'click', () => {
+                    // @ts-ignore
+                    window.LAYER = this.options.callback.call(map.editTools)
+                }, this)
+                return container
+            }
+        })
+        this.map.addControl(new (EditControl.extend({
+            options: {
+                callback: () => {
+                    this.displayedShape?.remove()
+                    this.displayedShape = this.map?.editTools.startPolygon()
+                },
+                kind: 'polygon',
+                html: '▰'
+            }
+        }))())
+        this.map.addControl(new (EditControl.extend({
+            options: {
+                callback: () => {
+                    this.displayedShape?.remove()
+                    this.displayedShape = this.map?.editTools.startMarker(undefined, { icon: markerIcon })
+                },
+                kind: 'marker',
+                html: '•'
+            }
+        }))())
+        this.map.on('editable:drawing:end', () => { this.saveChanges() })
+        this.map.on('editable:vertex:dragend', () => { this.saveChanges() })
+
+        const dialog = form.querySelector('#shaclMapDialog') as HTMLDialogElement
+        dialog.addEventListener('close', () => {
+            const scrollY = document.body.style.top
+            document.body.style.position = ''
+            document.body.style.top = ''
+            window.scrollTo(0, parseInt(scrollY || '0') * -1)
+            // set wkt in editor
+            if (this.currentEditor && this.createdGeometry) {
+                this.currentEditor.value = geometryToWkt(this.createdGeometry)
+                this.currentEditor.dispatchEvent(new Event('change', { bubbles: true }))
+            }
+        })
+        return dialog
+    }
+
+    createEditor(template: ShaclPropertyTemplate, value?: Term): HTMLElement {
+        let dialog = template.config.form.querySelector('#shaclMapDialog') as HTMLDialogElement
+        if (!dialog) {
+            dialog = this.initEditMode(template.config.form)
+        }
+        const button = template.config.theme.createButton('Open&#160;map...', false)
+        button.style.marginLeft = '5px'
+        button.classList.add('open-map-button')
+        button.onclick = () => {
+            this.currentEditor = instance.querySelector('.editor') as Editor
+            this.createdGeometry = undefined
+            this.displayedShape?.remove()
+            this.drawAndZoomToGeometry(wktToGeometry(this.currentEditor.value || ''), this.map!)
+
+            document.body.style.top = `-${window.scrollY}px`
+            document.body.style.position = 'fixed'
+            dialog.showModal()
+        }
+        const instance = fieldFactory(template, value || null)
+        instance.appendChild(button)
+        return instance
+    }
+
+    createViewer(template: ShaclPropertyTemplate, value: Term): HTMLElement {
+        const container = document.createElement('div')
+        const geometry = wktToGeometry(value.value)
+        if (geometry?.coordinates?.length) {
+            const map = L.map(container, {
+                fullscreenControl: true,
+                layers: [ L.tileLayer(tileSource) ],
+                zoom: 5,
+                center: defaultCenter,
+                maxBounds: worldBounds
+            })
+            map.attributionControl.addAttribution(attribution)
+            this.drawAndZoomToGeometry(geometry, map)
+        }
+        return container
+    }
+
+    drawAndZoomToGeometry(geometry: Geometry | undefined, map: L.Map) {
+        setTimeout(() => { map.invalidateSize() })
+        if (geometry?.type === 'Point') {
+            const coords = { lng: geometry.coordinates[0], lat: geometry.coordinates[1] }
+            this.displayedShape = L.marker(coords, { icon: markerIcon }).addTo(map)
+            map.setView(coords, 15, { animate: false })
+        } else if (geometry?.type === 'Polygon') {
+            const coords = geometry.coordinates[0].map((pos) => { return { lng: pos[0], lat: pos[1] }})
+            const polygon =  L.polygon(coords).addTo(map)
+            this.displayedShape = polygon
+            map.fitBounds(polygon.getBounds(), { animate: false })
+            setTimeout(() => {
+                map.fitBounds(polygon.getBounds(), { animate: false })
+                map.setView(polygon.getCenter(), undefined, { animate: false })
+            }, 1)
+        } else {
+            map.setZoom(5)
+        }
+    }
+
+    saveChanges() {
+        if (this.displayedShape instanceof L.Marker) {
+            const pos = this.displayedShape.getLatLng()
+            this.createdGeometry = { type: 'Point', coordinates: [pos.lng, pos.lat] }
+        } else if (this.displayedShape instanceof L.Polygon) {
+            const positions = this.displayedShape.getLatLngs() as L.LatLng[][]
+            // force closed polygon
+            if (!positions[0][0].equals(positions[0][positions[0].length - 1])) {
+                positions[0].push(positions[0][0])
+            }
+            this.createdGeometry = { type: 'Polygon', coordinates: [positions[0].map((pos) => { return [ pos.lng, pos.lat ] })] }
+        } else {
+            this.createdGeometry = undefined
+        }
+    }
+}

package/src/plugins/map-util.ts

@@ -0,0 +1,41 @@
+import { Point, Polygon } from 'geojson'
+
+export type Geometry = Point | Polygon
+
+export const worldBounds: [number, number][] = [[-90, -180], [90, 180]]
+
+export function wktToGeometry(wkt: string): Geometry | undefined {
+    const pointCoords = wkt.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 = wkt.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 }
+        }
+    }
+}
+
+export function geometryToWkt(geometry: Geometry): string {
+    if (geometry.type === 'Point') {
+        return `POINT(${geometry.coordinates.join(' ')})`
+    } else if (geometry.type === 'Polygon') {
+        return `POLYGON((${geometry.coordinates[0].map(item => { return item.join(' ') }).join(',')}))`
+    } else {
+        return ''
+    }
+}

package/src/plugins/mapbox.ts

@@ -0,0 +1,157 @@
+import { Term } from '@rdfjs/types'
+import { Plugin, PluginOptions } from '../plugin'
+import { ShaclPropertyTemplate } from '../property-template'
+import { Editor, fieldFactory } from '../theme'
+import { Map, NavigationControl, FullscreenControl, LngLatBounds, LngLatLike } from 'mapbox-gl'
+import MapboxDraw from '@mapbox/mapbox-gl-draw'
+import mapboxGlCss from 'mapbox-gl/dist/mapbox-gl.css'
+import mapboxGlDrawCss from '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css'
+import { Geometry, geometryToWkt, wktToGeometry } from './map-util'
+
+const css = `
+#shaclMapDialog .closeButton { position: absolute; right: 0; top: 0; z-index: 1; padding: 6px 8px; cursor: pointer; border: 0; background-color: #FFFA; font-size: 24px; }
+#shaclMapDialog { padding: 0; width:90vw; height: 90vh; margin: auto; }
+#shaclMapDialog::backdrop { background-color: #0007; }
+#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; }
+.mapboxgl-map { min-height: 300px; }
+#shaclMapDialogContainer { width:100%; height: 100% }
+`
+const dialogTemplate = `
+<dialog id="shaclMapDialog" onclick="event.target==this && this.close()">
+<div id="shaclMapDialogContainer"></div>
+<div class="hint">&#x24D8; Draw a polygon or point, then close dialog</div>
+<button class="closeButton" type="button" onclick="this.parentElement.close()">&#x2715;</button>
+</dialog>`
+
+
+export class MapboxPlugin extends Plugin {
+    map: Map | undefined
+    draw: MapboxDraw | undefined
+    currentEditor: Editor | undefined
+    apiKey: string
+
+    constructor(options: PluginOptions, apiKey: string) {
+        super(options, mapboxGlCss + '\n' + mapboxGlDrawCss + '\n' + css)
+        this.apiKey = apiKey
+    }
+
+    initEditMode(form: HTMLElement): HTMLDialogElement {
+        form.insertAdjacentHTML('beforeend', dialogTemplate)
+        const container = form.querySelector('#shaclMapDialogContainer') as HTMLElement
+        this.map = new Map({
+            container: container,
+            style: 'mapbox://styles/mapbox/satellite-streets-v11',
+            zoom: 5,
+            center: { lng: 8.657238961696038, lat: 49.87627570549512 },
+            attributionControl: false,
+            accessToken: this.apiKey
+        })
+
+        this.draw = new MapboxDraw({
+            displayControlsDefault: false,
+            controls: { point: true, polygon: true }
+        })
+        this.map.addControl(new NavigationControl(), 'top-left')
+        this.map.addControl(this.draw, 'top-left')
+
+        this.map.on('idle', () => {
+            // this fixes wrong size of canvas
+            this.map!.resize()
+        })
+        // @ts-ignore
+        this.map.on('draw.create', () => this.deleteAllButLastDrawing())
+
+        const dialog = form.querySelector('#shaclMapDialog') as HTMLDialogElement
+        dialog.addEventListener('close', () => {
+            const scrollY = document.body.style.top
+            document.body.style.position = ''
+            document.body.style.top = ''
+            window.scrollTo(0, parseInt(scrollY || '0') * -1)
+            // set wkt in editor
+            const data = this.draw!.getAll()
+            if (data && data.features.length && this.currentEditor) {
+                const geometry = data.features[0].geometry as Geometry
+                if (geometry.coordinates?.length) {
+                    const wkt = geometryToWkt(geometry)
+                    this.currentEditor.value = wkt
+                    this.currentEditor.dispatchEvent(new Event('change', { bubbles: true }))
+                }
+            }
+        })
+        return dialog
+    }
+
+    createEditor(template: ShaclPropertyTemplate, value?: Term): HTMLElement {
+        let dialog = template.config.form.querySelector('#shaclMapDialog') as HTMLDialogElement
+        if (!dialog) {
+            dialog = this.initEditMode(template.config.form)
+        }
+        const button = template.config.theme.createButton('Open&#160;map...', false)
+        button.style.marginLeft = '5px'
+        button.classList.add('open-map-button')
+        button.onclick = () => {
+            this.currentEditor = instance.querySelector('.editor') as Editor
+            this.draw?.deleteAll()
+
+            const wkt = this.currentEditor.value || ''
+            const geometry = wktToGeometry(wkt)
+            if (geometry && geometry.coordinates?.length) {
+                this.draw?.add(geometry)
+                this.fitToGeometry(this.map!, geometry)
+            } else {
+                this.map?.setZoom(5)
+            }
+            document.body.style.top = `-${window.scrollY}px`
+            document.body.style.position = 'fixed'
+            dialog.showModal()
+        }
+        const instance = fieldFactory(template, value || null)
+        instance.appendChild(button)
+        return instance
+    }
+
+    createViewer(template: ShaclPropertyTemplate, value: Term): HTMLElement {
+        const container = document.createElement('div')
+        const geometry = wktToGeometry(value.value)
+        if (geometry?.coordinates?.length) {
+            // wait for container to be available in DOM
+            setTimeout(() => {
+                const draw = new MapboxDraw({ displayControlsDefault: false })
+                const map = new Map({
+                    container: container,
+                    style: 'mapbox://styles/mapbox/satellite-streets-v11',
+                    zoom: 5,
+                    attributionControl: false,
+                    accessToken: this.apiKey
+                })
+                map.addControl(draw)
+                map.addControl(new FullscreenControl())
+                draw.add(geometry)
+                this.fitToGeometry(map, geometry)
+            })
+        }
+        return container
+    }
+
+    fitToGeometry(map: Map, geometry: Geometry) {
+        if (typeof geometry.coordinates[0] === 'number') {
+            // e.g. Point
+            map.setCenter(geometry.coordinates as LngLatLike)
+            map.setZoom(15)
+        } else {
+            // e.g. Polygon
+            const bounds = geometry.coordinates[0].reduce((bounds, coord) => {
+                return bounds.extend(coord as mapboxgl.LngLatLike)
+            }, new LngLatBounds(geometry.coordinates[0][0] as mapboxgl.LngLatLike, geometry.coordinates[0][0] as mapboxgl.LngLatLike))
+            map.fitBounds(bounds, { padding: 20, animate: false })
+        }
+    }
+
+    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)
+        }
+    }
+}

package/src/property-template.ts

@@ -0,0 +1,132 @@
+import { Literal, NamedNode, Quad, DataFactory } from 'n3'
+import { Term } from '@rdfjs/types'
+import { OWL_PREDICATE_IMPORTS, PREFIX_DASH, PREFIX_OA, PREFIX_RDF, PREFIX_SHACL, SHACL_PREDICATE_CLASS, SHACL_PREDICATE_TARGET_CLASS } from './constants'
+import { Config } from './config'
+import { findLabel, prioritizeByLanguage, removePrefixes } from './util'
+import { ShaclNode } from './node'
+
+const mappers: Record<string, (template: ShaclPropertyTemplate, term: Term) => void> = {
+    [`${PREFIX_SHACL}name`]:         (template, term) => { const literal = term as Literal; template.name = prioritizeByLanguage(template.config.languages, template.name, literal) },
+    [`${PREFIX_SHACL}description`]:  (template, term) => { const literal = term as Literal; template.description = prioritizeByLanguage(template.config.languages, template.description, literal) },
+    [`${PREFIX_SHACL}path`]:         (template, term) => { template.path = term.value },
+    [`${PREFIX_SHACL}node`]:         (template, term) => { template.node = term as NamedNode },
+    [`${PREFIX_SHACL}datatype`]:     (template, term) => { template.datatype = term as NamedNode },
+    [`${PREFIX_SHACL}nodeKind`]:     (template, term) => { template.nodeKind = term as NamedNode },
+    [`${PREFIX_SHACL}minCount`]:     (template, term) => { template.minCount = parseInt(term.value) },
+    [`${PREFIX_SHACL}maxCount`]:     (template, term) => { template.maxCount = parseInt(term.value) },
+    [`${PREFIX_SHACL}minLength`]:    (template, term) => { template.minLength = parseInt(term.value) },
+    [`${PREFIX_SHACL}maxLength`]:    (template, term) => { template.maxLength = parseInt(term.value) },
+    [`${PREFIX_SHACL}minInclusive`]: (template, term) => { template.minInclusive = parseInt(term.value) },
+    [`${PREFIX_SHACL}maxInclusive`]: (template, term) => { template.maxInclusive = parseInt(term.value) },
+    [`${PREFIX_SHACL}minExclusive`]: (template, term) => { template.minExclusive = parseInt(term.value) },
+    [`${PREFIX_SHACL}maxExclusive`]: (template, term) => { template.maxExclusive = parseInt(term.value) },
+    [`${PREFIX_SHACL}pattern`]:      (template, term) => { template.pattern = term.value },
+    [`${PREFIX_SHACL}order`]:        (template, term) => { template.order = parseInt(term.value) },
+    [`${PREFIX_DASH}singleLine`]:    (template, term) => { template.singleLine = term.value === 'true' },
+    [`${PREFIX_OA}styleClass`]:      (template, term) => { template.cssClass = term.value },
+    [`${PREFIX_SHACL}and`]:          (template, term) => { template.shaclAnd = term.value },
+    [`${PREFIX_SHACL}in`]:           (template, term) => { template.shaclIn = term.value },
+    // sh:datatype might be undefined, but sh:languageIn defined. this is undesired. the spec says, that strings without a lang tag are not valid if sh:languageIn is set. but the shacl validator accepts these as valid. to prevent this, we just set the datatype here to 'langString'.
+    [`${PREFIX_SHACL}languageIn`]:   (template, term) => { template.languageIn = template.config.lists[term.value]; template.datatype = DataFactory.namedNode(PREFIX_RDF + 'langString') },
+    [`${PREFIX_SHACL}defaultValue`]: (template, term) => { template.defaultValue = term },
+    [`${PREFIX_SHACL}hasValue`]:     (template, term) => { template.hasValue = term },
+    [OWL_PREDICATE_IMPORTS.id]:   (template, term) => { template.owlImports.push(term as NamedNode) },
+    [SHACL_PREDICATE_CLASS.id]:   (template, term) => {
+        template.class = term as NamedNode
+        // try to find node shape that has requested target class
+        const nodeShapes = template.config.shapesGraph.getSubjects(SHACL_PREDICATE_TARGET_CLASS, term, null)
+        if (nodeShapes.length > 0) {
+            template.node = nodeShapes[0] as NamedNode
+        }
+    },
+    [`${PREFIX_SHACL}or`]:           (template, term) => {
+        const list = template.config.lists[term.value]
+        if (list?.length) {
+            template.shaclOr = list
+        } else {
+            console.error('list not found:', term.value, 'existing lists:', template.config.lists)
+        }
+    }
+}
+
+export class ShaclPropertyTemplate  {
+    parent: ShaclNode
+    label = ''
+    name: Literal | undefined
+    description: Literal | undefined
+    path: string | undefined
+    node: NamedNode | undefined
+    class: NamedNode | undefined
+    minCount: number | undefined
+    maxCount: number | undefined
+    minLength: number | undefined
+    maxLength: number | undefined
+    minInclusive: number | undefined
+    maxInclusive: number | undefined
+    minExclusive: number | undefined
+    maxExclusive: number | undefined
+    singleLine: boolean | undefined
+    cssClass: string | undefined
+    defaultValue: Term | undefined
+    pattern: string | undefined
+    order: number | undefined
+    nodeKind: NamedNode | undefined
+    shaclAnd: string | undefined
+    shaclIn: string | undefined
+    shaclOr: Term[] | undefined
+    languageIn: Term[] | undefined
+    datatype: NamedNode | undefined
+    hasValue: Term | undefined
+    owlImports: NamedNode[] = []
+
+    config: Config
+    extendedShapes: NamedNode[] | undefined
+
+    constructor(quads: Quad[], parent: ShaclNode, config: Config) {
+        this.parent = parent
+        this.config = config
+        this.merge(quads)
+    }
+
+    merge(quads: Quad[]): ShaclPropertyTemplate {
+        for (const quad of quads) {
+            mappers[quad.predicate.id]?.call(this, this, quad.object)
+        }
+        // provide best fitting label for UI
+        this.label = this.name?.value || findLabel(quads, this.config.languages)
+        if (!this.label && !this.shaclAnd) {
+            this.label = this.path ? removePrefixes(this.path, this.config.prefixes) : 'unknown'
+        }
+        // resolve extended shapes
+        if (this.node || this.shaclAnd) {
+            this.extendedShapes = []
+            if (this.node) {
+                this.extendedShapes.push(this.node)
+            }
+            if (this.shaclAnd) {
+                const list = this.config.lists[this.shaclAnd]
+                if (list?.length) {
+                    for (const node of list) {
+                        this.extendedShapes.push(node as NamedNode)
+                    }
+                }
+            }
+        }
+        return this
+    }
+
+    clone(): ShaclPropertyTemplate {
+        const copy = Object.assign({}, this)
+        // arrays are not cloned but referenced, so create them manually
+        copy.owlImports = [ ...this.owlImports ]
+        if (this.languageIn) {
+            copy.languageIn = [ ...this.languageIn ]
+        }
+        if (this.shaclOr) {
+            copy.shaclOr = [ ...this.shaclOr ]
+        }
+        copy.merge = this.merge.bind(copy)
+        copy.clone = this.clone.bind(copy)
+        return copy
+    }
+}