fix node shape violation display and enhance or constraint cardinalit…

…y control

README.md

@@ -62,10 +62,10 @@ Validates the form data against the SHACL shapes graph and displays validation r
 ```typescript
 registerPlugin(plugin: Plugin)
 ```
-WIP / TBD
+Register a plugin to customize editing certain property values. Examples: [Mapbox](./src/plugins/mapbox.ts), [FixedList](./src/plugins/fixed-list.ts)
 
 ```typescript
 setClassInstanceProvider((className: string) => Promise<string>)
 ```
-Sets a callback function that is called when a SHACL property has a `sh:class` definition. The expected return value is a string (e.g. in format `text/turtle`) that contains RDF instance definitions of the given class name.
+Sets a callback function that is called when a SHACL property has a `sh:class` definition. The expected return value is a string (e.g. in format `text/turtle`) that contains RDF instance definitions of the given class.
 

src/form.ts

@@ -157,8 +157,8 @@ export class ShaclForm extends HTMLElement {
                         invalidElement.appendChild(this.createValidationErrorDisplay(result, 'node'))
                     }
                 }
-            } else {
-                this.querySelector(`:scope [data-node-id='${result.focusNode.id}']`)?.prepend(this.createValidationErrorDisplay(result))
+            } else if (!ignoreEmptyValues) {
+                this.querySelector(`:scope [data-node-id='${result.focusNode.id}']`)?.prepend(this.createValidationErrorDisplay(result, 'node'))
             }
         }
         return report.conforms

src/plugin.ts

@@ -5,11 +5,11 @@ export class Plugins {
     private plugins: Record<string, Plugin> = {}
 
     register(plugin: Plugin) {
-        this.plugins[`${plugin.predicate}:${plugin.datatype}`] = plugin
+        this.plugins[`${plugin.predicate}^${plugin.datatype}`] = plugin
     }
 
     find(predicate: string | undefined, datatype: string | undefined): Plugin | undefined {
-        let plugin = this.plugins[`${predicate}:${datatype}`]
+        let plugin = this.plugins[`${predicate}^${datatype}`]
         if (plugin) {
             return plugin
         }

src/property.ts

@@ -2,7 +2,7 @@ import { BlankNode, DataFactory, NamedNode, Store } from 'n3'
 import { Term } from '@rdfjs/types'
 import { ShaclNode } from './node'
 import { focusFirstInputElement } from './util'
-import { PREFIX_SHACL, RDF_PREDICATE_TYPE, SHAPES_GRAPH } from './constants'
+import { RDF_PREDICATE_TYPE, SHAPES_GRAPH } from './constants'
 import { createShaclOrConstraint } from './constraints'
 import { Config } from './config'
 import { ShaclPropertyTemplate } from './property-template'
@@ -65,6 +65,7 @@ export class ShaclProperty extends HTMLElement {
                 instance = createPropertyInstance(template, value, true)
             } else {
                 instance = createShaclOrConstraint(this.template.shaclOr, this, this.template.config)
+                appendRemoveButton(instance, '')
             }
 
         } else {
@@ -127,11 +128,17 @@ export function createPropertyInstance(template: ShaclPropertyTemplate, value?:
             instance = editorFactory(template, value)
         }
     }
+    appendRemoveButton(instance, template.label, forceRemovable)
+    instance.dataset.path = template.path
+    return instance
+}
+
+function appendRemoveButton(instance: HTMLElement, label: string, forceRemovable = false) {
     const removeButton = document.createElement('button')
     removeButton.innerText = '\u00d7'
     removeButton.type = 'button'
     removeButton.classList.add('control-button', 'btn', 'remove-button')
-    removeButton.title = 'Remove ' + template.label
+    removeButton.title = 'Remove ' + label
     removeButton.addEventListener('click', _ => {
         const parent = instance.parentElement
         instance.remove()
@@ -141,8 +148,6 @@ export function createPropertyInstance(template: ShaclPropertyTemplate, value?:
         removeButton.classList.add('persistent')
     }
     instance.appendChild(removeButton)
-    instance.dataset.path = template.path
-    return instance
 }
 
 window.customElements.define('shacl-property', ShaclProperty)

src/styles.css

@@ -12,7 +12,7 @@ shacl-node h1 { font-size: 1.1rem; border-bottom: 1px solid; margin-top: 2px; }
 shacl-property { display: flex; flex-direction: column; align-items: end; position: relative; }
 shacl-property:not(.may-add) > .add-button { visibility: hidden; }
 shacl-property:not(.may-remove) > .property-instance > .remove-button:not(.persistent) { visibility: hidden; }
-shacl-form .shacl-or-constraint select { margin-right: 23px; }
+shacl-property:not(.may-remove) > .shacl-or-constraint > .remove-button:not(.persistent) { visibility: hidden; }
 shacl-form .shacl-group { margin-bottom: 1em; padding-bottom: 1em; }
 shacl-form .shacl-group h2 { font-size: 1rem; border-bottom: 1px solid; margin-top: 0; color: #555; }
 shacl-form .property-instance, shacl-form .shacl-or-constraint { display: flex; align-items: flex-start; margin-top: 8px; width: 100%; position: relative; }