feat: handle multiple empty fields

.changeset/four-dodos-punch.md

@@ -0,0 +1,5 @@
+---
+"@hydrofoil/shaperone-playground": patch
+---
+
+Do not sync resource changes in loop between form and rdf editor

.changeset/green-crabs-sleep.md

@@ -0,0 +1,6 @@
+---
+"@hydrofoil/shaperone-core": patch
+"@hydrofoil/shaperone-wc": patch
+---
+
+Handle multiple empty object fields

demos/lit-html/src/shaperone-playground-lit.ts

@@ -205,7 +205,7 @@ export class ShaperonePlayground extends connect(store(), LitElement) {
 
   __saveResource() {
     if (this.form.value) {
-      store().dispatch.resource.replaceGraph({ dataset: this.form.value })
+      store().dispatch.resource.replaceGraph({ dataset: this.form.value, updatePointer: false })
     }
   }
 

demos/lit-html/src/state/models/resource.ts

@@ -39,14 +39,22 @@ export const resource = createModel({
     selectedResource: pointer.value,
   },
   reducers: {
-    replaceGraph(state, { dataset }: { dataset: Quad[] | DatasetCore }) {
+    setResourceQuads(state, dataset: DatasetCore) {
+      return {
+        ...state,
+        quads: [...dataset],
+      }
+    },
+    replaceGraph(state, { dataset, updatePointer = true }: { dataset: Quad[] | DatasetCore; updatePointer?: boolean }) {
       const graph = Array.isArray(dataset) ? cf({ dataset: $rdf.dataset(dataset) }) : cf({ dataset })
-      let pointer
+      let { pointer } = state
 
-      if (state.selectedResource) {
-        pointer = graph.namedNode(state.selectedResource)
-      } else {
-        pointer = graph.namedNode('')
+      if (updatePointer) {
+        if (state.selectedResource) {
+          pointer = graph.namedNode(state.selectedResource)
+        } else {
+          pointer = graph.namedNode('')
+        }
       }
 
       return {

packages/core/models/forms/effects/resources/setRoot.ts

@@ -12,16 +12,15 @@ export default function (store: Store) {
       return
     }
 
-    const focusNode = rootPointer
-    if (focusNode === formState.focusStack[0]) {
+    if (rootPointer === formState.focusStack[0]) {
       return
     }
 
     if (!formState.focusStack.length || rootPointer.value !== formState.focusStack[0].value) {
-      dispatch.forms.truncateFocusNodes({ form, focusNode })
+      dispatch.forms.truncateFocusNodes({ form, focusNode: rootPointer })
       dispatch.forms.createFocusNodeState({
         form,
-        focusNode,
+        focusNode: rootPointer,
         editors,
         shouldEnableEditorChoice: formState.shouldEnableEditorChoice,
         shapes: shapes.get(form)?.shapes || [],
@@ -31,11 +30,12 @@ export default function (store: Store) {
     }
 
     for (const currentFocusNode of formState.focusStack) {
-      if (!currentFocusNode.out().values) break
+      const focusNode = rootPointer.node(currentFocusNode)
+      if (!focusNode.out().values) break
 
       dispatch.forms.createFocusNodeState({
         form,
-        focusNode: currentFocusNode,
+        focusNode,
         editors,
         shapes: shapes.get(form)?.shapes || [],
         shouldEnableEditorChoice: formState.shouldEnableEditorChoice,

packages/core/models/forms/effects/shapes/setGraph.ts

@@ -4,11 +4,12 @@ import { SetShapesGraphParams } from '../../../shapes/reducers'
 export default function setGraph(store: Store) {
   const dispatch = store.getDispatch()
 
-  return ({ form }: SetShapesGraphParams) => {
+  return ({ form, shapesGraph }: SetShapesGraphParams) => {
     const { editors, forms, shapes } = store.getState()
     const formState = forms.get(form)
+    const currentGraph = shapes.get(form)?.shapesGraph
     const graph = store.getState().resources.get(form)?.graph
-    if (!graph || !formState) {
+    if (!graph || !formState || currentGraph?.dataset === shapesGraph || currentGraph === shapesGraph) {
       return
     }
 

packages/core/models/forms/index.ts

@@ -22,6 +22,7 @@ import resourcesEffects from './effects/resources'
 import type { Store } from '../../state'
 
 export interface PropertyObjectState {
+  key: string
   object?: GraphPointer
   editors: SingleEditorMatch[]
   selectedEditor: NamedNode | undefined

packages/core/models/forms/lib/stateBuilder.ts

@@ -4,6 +4,7 @@ import { dash } from '@tpluscode/rdf-ns-builders'
 import { NamedNode, Term } from 'rdf-js'
 import RdfResource from '@tpluscode/rdfine/RdfResource'
 import TermMap from '@rdf-esm/term-map'
+import { nanoid } from 'nanoid'
 import type { EditorsState } from '../../editors/index'
 import type { FocusNodeState, PropertyGroupState, PropertyObjectState, PropertyState, ShouldEnableEditorChoice } from '../index'
 import { FocusNode } from '../../../index'
@@ -42,6 +43,7 @@ export function initialiseObjectState({ shape, editors, shouldEnableEditorChoice
     }
 
     return {
+      key: nanoid(),
       object,
       editors: matchedEditors,
       selectedEditor,

packages/core/models/forms/reducers/addFormField.ts

@@ -1,5 +1,6 @@
 import type { PropertyShape } from '@rdfine/shacl'
 import produce from 'immer'
+import { nanoid } from 'nanoid'
 import type { FocusNode } from '../../..'
 import type { FormState } from '../index'
 import { formStateReducer, BaseParams } from '../../index'
@@ -21,6 +22,7 @@ export const addFormField = formStateReducer((state: FormState, { focusNode, pro
   }
 
   currentProperty.objects.push({
+    key: nanoid(),
     editors,
     selectedEditor: editors[0]?.term,
     editorSwitchDisabled: !state.shouldEnableEditorChoice(),

packages/core/models/forms/reducers/removeObject.ts

@@ -1,15 +1,14 @@
 import type { PropertyShape } from '@rdfine/shacl'
 import produce from 'immer'
-import { GraphPointer } from 'clownface'
 import { BaseParams, formStateReducer } from '../../index'
 import type { FocusNode } from '../../../index'
 import { canAddObject, canRemoveObject } from '../lib/property'
-import type { FormState } from '../index'
+import type { FormState, PropertyObjectState } from '../index'
 
 export interface RemoveObjectParams extends BaseParams {
   focusNode: FocusNode
   property: PropertyShape
-  object: GraphPointer
+  object: PropertyObjectState
 }
 
 export const removeObject = formStateReducer((state: FormState, { focusNode, property, object }: RemoveObjectParams) => produce(state, (state) => {
@@ -20,7 +19,7 @@ export const removeObject = formStateReducer((state: FormState, { focusNode, pro
     return
   }
 
-  const objects = propertyState.objects.filter(o => !o.object?.term.equals(object?.term))
+  const objects = propertyState.objects.filter(o => o.key !== object.key)
 
   propertyState.objects = objects
   propertyState.canRemove = canRemoveObject(property, objects.length)

packages/core/models/forms/reducers/updateObject.ts

@@ -2,6 +2,7 @@ import type { Term } from 'rdf-js'
 import type { PropertyShape } from '@rdfine/shacl'
 import produce from 'immer'
 import { MultiPointer } from 'clownface'
+import { nanoid } from 'nanoid'
 import { BaseParams, formStateReducer } from '../../index'
 import type { FormState, PropertyObjectState } from '../index'
 import type { FocusNode } from '../../../index'
@@ -10,7 +11,7 @@ import { EditorsState } from '../../editors'
 export interface UpdateObjectParams extends BaseParams {
   focusNode: FocusNode
   property: PropertyShape
-  oldValue?: Term
+  object: PropertyObjectState
   newValue: Term
 }
 
@@ -21,15 +22,15 @@ export interface ReplaceObjectsParams extends BaseParams {
   editors: EditorsState
 }
 
-export const updateObject = formStateReducer((state: FormState, { focusNode, property, oldValue, newValue }: UpdateObjectParams) => produce(state, (draft) => {
+export const updateObject = formStateReducer((state: FormState, { focusNode, property, object, newValue }: UpdateObjectParams) => produce(state, (draft) => {
   const focusNodeState = draft.focusNodes[focusNode.value]
 
   const propertyState = focusNodeState.properties.find(p => p.shape.equals(property))
   if (!propertyState) {
     return
   }
 
-  const objectState = propertyState.objects.find(o => o.object?.term.equals(oldValue))
+  const objectState = propertyState.objects.find(o => o.key === object.key)
   if (objectState) {
     objectState.object = focusNodeState.focusNode.node(newValue)
   }
@@ -46,6 +47,7 @@ export const setPropertyObjects = formStateReducer((state: FormState, { focusNod
   propertyState.objects = objects.map<PropertyObjectState>((object) => {
     const suitableEditors = editors.matchSingleEditors({ shape: property, object })
     return {
+      key: nanoid(),
       object,
       editors: suitableEditors,
       selectedEditor: suitableEditors[0]?.term,

packages/core/models/resources/effects/forms/removeObject.ts

@@ -16,7 +16,7 @@ export default function (store: Store) {
 
     state.graph.node(focusNode)
       .deleteOut(pathProperty.id)
-      .addOut(pathProperty.id, objects.filter(o => !o.equals(removed.term)))
+      .addOut(pathProperty.id, objects.filter(o => !o.equals(removed.object?.term)))
 
     notify({
       store,

packages/core/models/resources/effects/forms/updateObject.ts

@@ -1,10 +1,17 @@
+import { GraphPointer } from 'clownface'
 import type { Store } from '../../../../state'
 import * as updateObject from '../../../forms/reducers/updateObject'
 import { getPathProperty } from '../../lib/property'
 import { notify } from '../../lib/notify'
 
+type Params = Omit<updateObject.UpdateObjectParams, 'object'> & {
+  object: {
+    object?: GraphPointer
+  }
+}
+
 export default function (store: Store) {
-  return function ({ form, focusNode, property, oldValue, newValue }: updateObject.UpdateObjectParams) {
+  return function ({ form, focusNode, property, object, newValue }: Params) {
     const { resources } = store.getState()
     const state = resources.get(form)
     const pathProperty = getPathProperty(property)!.id
@@ -15,7 +22,7 @@ export default function (store: Store) {
     const objects = state.graph.node(focusNode)
       .out(pathProperty)
       .terms
-      .filter(term => !term.equals(oldValue))
+      .filter(term => !term.equals(object.object?.term))
 
     state.graph.node(focusNode)
       .deleteOut(pathProperty)

packages/core/package.json

@@ -22,7 +22,8 @@
     "@tpluscode/rdfine": "^0.5.15",
     "@zazuko/rdf-vocabularies": "^2020.11.2",
     "clownface": "^1.1.0",
-    "immer": "^7.0.9"
+    "immer": "^7.0.9",
+    "nanoid": "^3.1.16"
   },
   "devDependencies": {
     "@rdf-esm/data-model": "^0.5.3",

packages/core/test/models/editors/lib/match.test.ts

@@ -6,13 +6,15 @@ import { expect } from 'chai'
 import { testStore } from '../../forms/util'
 import { Editor, EditorsState, SingleEditor, MultiEditor } from '../../../../models/editors'
 import { matchSingleEditors, matchMultiEditors } from '../../../../models/editors/lib/match'
+import { propertyShape } from '../../../util'
 
 describe('models/editors/lib/match', () => {
   let editors: EditorsState
   let shape: PropertyShape
 
   beforeEach(() => {
     ({ editors } = testStore().store.getState())
+    shape = propertyShape()
   })
 
   describe('matchSingleEditors', () => {

packages/core/test/models/forms/reducers/removeObject.test.ts

@@ -3,7 +3,7 @@ import { expect } from 'chai'
 import clownface from 'clownface'
 import $rdf from 'rdf-ext'
 import { removeObject } from '../../../../models/forms/reducers/removeObject'
-import { RecursivePartial, testStore } from '../util'
+import { RecursivePartial, testObjectState, testStore } from '../util'
 import { Store } from '../../../../state'
 import { FocusNode } from '../../../../index'
 import { propertyShape } from '../../../util'
@@ -23,47 +23,21 @@ describe('models/forms/reducers/removeObject', () => {
     formState = store.getState().forms.get(form)!
   })
 
-  it('removes state objects with matching value', () => {
+  it('removes state objects with matching key', () => {
     // given
     const property = propertyShape()
-    const object = focusNode.literal('1')
-    formState.focusNodes[focusNode.value] = {
-      properties: [{
-        shape: property,
-        objects: [{
-          object: focusNode.literal('1'),
-        }, {
-          object: focusNode.literal('1'),
-        }, {
-          object: focusNode.literal('2'),
-        }],
-      }],
-    }
-
-    // when
-    const afterState = removeObject(store.getState().forms, {
-      form,
-      focusNode,
-      object,
-      property,
+    const object = testObjectState(focusNode.literal('1'), {
+      key: 'remove',
     })
-
-    // then
-    const afterProperty = afterState.get(form)?.focusNodes[focusNode.value].properties[0]
-    expect(afterProperty?.objects).to.have.length(1)
-    expect(afterProperty?.objects[0].object?.term).to.deep.eq($rdf.literal('2'))
-  })
-
-  it('does not remove state objects without values', () => {
-    // given
-    const property = propertyShape()
-    const object = focusNode.literal('1')
     formState.focusNodes[focusNode.value] = {
       properties: [{
         shape: property,
         objects: [{
+          key: 'remove',
         }, {
+          key: 'remove',
         }, {
+          key: 'foo',
         }],
       }],
     }
@@ -78,22 +52,27 @@ describe('models/forms/reducers/removeObject', () => {
 
     // then
     const afterProperty = afterState.get(form)?.focusNodes[focusNode.value].properties[0]
-    expect(afterProperty?.objects).to.have.length(3)
+    expect(afterProperty?.objects).to.have.length(1)
+    expect(afterProperty?.objects[0].key).to.eq('foo')
   })
 
   it('updates canRemove flag', () => {
     // given
     const property = propertyShape({
       maxCount: 2,
     })
-    const object = focusNode.literal('1')
+    const object = testObjectState(focusNode.literal('1'), {
+      key: 'remove',
+    })
     formState.focusNodes[focusNode.value] = {
       properties: [{
         shape: property,
         canRemove: false,
         objects: [{
-          object: focusNode.node(object),
-        }, {}],
+          key: 'remove',
+        }, {
+          key: 'stay',
+        }],
       }],
     }
 
@@ -115,14 +94,18 @@ describe('models/forms/reducers/removeObject', () => {
     const property = propertyShape({
       maxCount: 2,
     })
-    const object = focusNode.literal('1')
+    const object = testObjectState(focusNode.literal('1'), {
+      key: 'remove',
+    })
     formState.focusNodes[focusNode.value] = {
       properties: [{
         shape: property,
         canAdd: false,
         objects: [{
-          object: focusNode.node(object),
-        }, {}],
+          key: 'remove',
+        }, {
+          key: 'stay',
+        }],
       }],
     }