fix: properly init default child focus nodes

Author: tpluscode

.changeset/tall-rice-repeat.md

@@ -0,0 +1,5 @@
+---
+"@hydrofoil/shaperone-core": patch
+---
+
+Ensure default values are populated in resource graph

demos/examples/NestedShapesIndividually/components.ts

@@ -1,10 +1,15 @@
-import { dash } from '@tpluscode/rdf-ns-builders'
+import { dash, rdfs, schema } from '@tpluscode/rdf-ns-builders'
 import { html, SingleEditorComponent } from '@hydrofoil/shaperone-wc'
+import type { GraphPointer } from 'clownface'
+
+function label(object?: GraphPointer) {
+  return object?.out([rdfs.label, schema.name]).toArray()[0] || object?.value || ''
+}
 
 export const shapeLink: SingleEditorComponent = {
   editor: dash.DetailsEditor,
 
   render({ value }, { focusOnObjectNode }) {
-    return html`<a href="javascript:void(0)" @click="${focusOnObjectNode}">Edit ${value.object?.value}</a>`
+    return html`<a href="javascript:void(0)" @click="${focusOnObjectNode}">Edit ${label(value.object)}</a>`
   },
 }

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

@@ -28,6 +28,9 @@ function valuePlaceholder(shape: PropertyShape): GraphPointer {
     case 'http://www.w3.org/ns/shacl#IRIOrLiteral':
       return shape.pointer.namedNode('')
     default: {
+      if (shape.class) {
+        return shape.pointer.blankNode()
+      }
       if (shape.languageIn.length || shape.datatype?.equals(xsd.langString)) {
         return shape.pointer.literal('', shape.languageIn[0] || 'en')
       }

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

@@ -5,7 +5,7 @@ import type { FormState } from '../index'
 
 type StackAction = {appendToStack?: true} | {replaceStack?: true}
 
-type Params = Parameters<typeof initialiseFocusNode>[0] & StackAction & BaseParams
+export type Params = Parameters<typeof initialiseFocusNode>[0] & StackAction & BaseParams
 
 export const createFocusNodeState = formStateReducer((state: FormState, { focusNode, ...rest }: Params) => produce(state, (draft) => {
   draft.focusNodes[focusNode.value] = initialiseFocusNode({

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

@@ -1,7 +1,7 @@
 import type { Term } from 'rdf-js'
 import type { PropertyShape } from '@rdfine/shacl'
 import produce from 'immer'
-import { MultiPointer } from 'clownface'
+import { GraphPointer, MultiPointer } from 'clownface'
 import { BaseParams, formStateReducer } from '../../index'
 import type { FormState, PropertyObjectState } from '../index'
 import type { FocusNode } from '../../../index'
@@ -54,3 +54,26 @@ export const setPropertyObjects = formStateReducer((state: FormState, { focusNod
     }
   })
 }))
+
+export interface SetObjectValueParams extends BaseParams {
+  focusNode: FocusNode
+  property: PropertyShape
+  object: PropertyObjectState
+  value: GraphPointer
+  editors: EditorsState
+}
+
+export const setObjectValue = formStateReducer((state: FormState, { focusNode, property, object, value, editors }: SetObjectValueParams) => produce(state, (draft) => {
+  const focusNodeState = draft.focusNodes[focusNode.value]
+  const propertyState = focusNodeState.properties.find(p => p.shape.equals(property))
+
+  const objectState = propertyState?.objects.find(o => o.key === object.key)
+  if (!objectState) {
+    return
+  }
+
+  const suitableEditors = editors.matchSingleEditors({ shape: property, object: value })
+  objectState.editors = suitableEditors
+  objectState.selectedEditor = suitableEditors[0]?.term
+  objectState.object = value
+}))

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

@@ -0,0 +1,43 @@
+import { defaultValue } from '../../lib/defaultValue'
+import { getPathProperty } from '../../lib/property'
+import { notify } from '../../lib/notify'
+import type { Store } from '../../../../state'
+import { Params } from '../../../forms/reducers/replaceFocusNodes'
+
+export default function createFocusNodeState(store: Store) {
+  return function ({ form, focusNode }: Params) {
+    const dispatch = store.getDispatch()
+    const { editors } = store.getState()
+
+    for (const property of store.getState().forms.get(form)?.focusNodes[focusNode.value].properties || []) {
+      let shouldNotify = false
+      for (const object of property.objects) {
+        if (!object.object) {
+          const [value] = defaultValue(property.shape, focusNode)?.toArray() || []
+
+          if (value) {
+            shouldNotify = true
+            focusNode.addOut(getPathProperty(property.shape)!.id, value)
+            dispatch.forms.setObjectValue({
+              form,
+              focusNode,
+              property: property.shape,
+              object,
+              value,
+              editors,
+            })
+          }
+        }
+      }
+
+      if (shouldNotify) {
+        notify({
+          form,
+          focusNode,
+          property: property.shape,
+          store,
+        })
+      }
+    }
+  }
+}

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

@@ -3,12 +3,14 @@ import addFormField from './addFormField'
 import updateObject from './updateObject'
 import removeObject from './removeObject'
 import replaceObject from './setPropertyObjects'
+import createFocusNodeState from './createFocusNodeState'
 
 export default function (store: Store) {
   return {
     'forms/addFormField': addFormField(store),
     'forms/updateObject': updateObject(store),
     'forms/removeObject': removeObject(store),
     'forms/setPropertyObjects': replaceObject(store),
+    'forms/createFocusNodeState': createFocusNodeState(store),
   }
 }

packages/core/models/resources/lib/defaultValue.ts

@@ -11,9 +11,9 @@ export function defaultValue(property: PropertyShape, focusNode: FocusNode): Mul
     return focusNode.node(property.defaultValue)
   }
 
-  if (property.class && (nodeKind?.equals(sh.IRI) || nodeKind?.equals(sh.BlankNode) || nodeKind?.equals(sh.BlankNodeOrIRI))) {
+  const propertyClass = property.class
+  if (propertyClass || nodeKind?.equals(sh.IRI) || nodeKind?.equals(sh.BlankNode) || nodeKind?.equals(sh.BlankNodeOrIRI)) {
     const resourceNode: GraphPointer<ResourceIdentifier> = nodeKind?.equals(sh.IRI) ? focusNode.namedNode('') : focusNode.blankNode()
-    const propertyClass = property.class
     if (propertyClass && !property.get(dash.editor)?.equals(dash.InstancesSelectEditor)) {
       resourceNode.addOut(rdf.type, propertyClass.id)
     }

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

@@ -1,6 +1,6 @@
 import { describe, it } from 'mocha'
 import { PropertyShape } from '@rdfine/shacl'
-import { dash } from '@tpluscode/rdf-ns-builders'
+import { dash, schema } from '@tpluscode/rdf-ns-builders'
 import { NamedNode } from 'rdf-js'
 import { expect } from 'chai'
 import { testStore } from '../../forms/util'
@@ -77,6 +77,22 @@ describe('models/editors/lib/match', () => {
       // then
       expect(matches[2].term).to.deep.eq(dash.EnumSelectEditor)
     })
+
+    it('matches blank nodes when property has sh:class', () => {
+      // given
+      shape.class = schema.Person as any
+      singleEditors(
+        [dash.TextFieldEditor, (prop, node) => (node.term.termType === 'BlankNode' ? 0 : 10)],
+        [dash.DetailsEditor, (prop, node) => (node.term.termType === 'BlankNode' ? 10 : 0)],
+      )
+
+      // when
+      const matches = matchSingleEditors.call(editors, { shape })
+
+      // then
+      expect(matches).to.have.length(1)
+      expect(matches[0].term).to.deep.eq(dash.DetailsEditor)
+    })
   })
 
   describe('matchMultiEditors', () => {

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

@@ -3,9 +3,12 @@ import ns from '@rdf-esm/namespace'
 import cf from 'clownface'
 import $rdf from 'rdf-ext'
 import { expect } from 'chai'
-import { setPropertyObjects } from '../../../../models/forms/reducers/updateObject'
-import { testFocusNodeState, testState, testStore } from '../util'
+import * as sinon from 'sinon'
+import { setObjectValue, setPropertyObjects } from '../../../../models/forms/reducers/updateObject'
+import { RecursivePartial, testFocusNodeState, testObjectState, testState, testStore } from '../util'
 import { propertyShape } from '../../../util'
+import { Store } from '../../../../state'
+import { FormState } from '../../../../models/forms'
 
 const ex = ns('http://example.com/')
 
@@ -53,4 +56,84 @@ describe('core/models/forms/reducers/updateObject', () => {
       expect(values).to.include.members(['bar1', 'bar2', 'bar3'])
     })
   })
+
+  describe('setObjectValue', () => {
+    let store: Store
+    let form: symbol
+    let formState: {
+      focusNodes: RecursivePartial<FormState['focusNodes']>
+      focusStack: FormState['focusStack']
+    }
+
+    beforeEach(() => {
+      ({ form, store } = testStore())
+      formState = store.getState().forms.get(form)!
+    })
+
+    it('recalculates editors', () => {
+      // given
+      const graph = cf({ dataset: $rdf.dataset() })
+      const property = propertyShape()
+      const object = testObjectState(graph.literal('foo'))
+      const { editors } = store.getState()
+      editors.matchSingleEditors = sinon.stub().returns([])
+      const focusNode = graph.blankNode()
+      formState.focusNodes = {
+        [focusNode.value]: {
+          properties: [{
+            shape: property,
+            objects: [object],
+          }],
+        },
+      }
+
+      // when
+      const value = graph.literal('bar')
+      setObjectValue(store.getState().forms, {
+        form,
+        focusNode,
+        editors,
+        object,
+        property,
+        value,
+      })
+
+      // then
+      expect(editors.matchSingleEditors).to.have.been.calledWith({
+        shape: property,
+        object: value,
+      })
+    })
+
+    it('sets new value', () => {
+      // given
+      const graph = cf({ dataset: $rdf.dataset() })
+      const property = propertyShape()
+      const object = testObjectState(graph.literal('foo'))
+      const focusNode = graph.blankNode()
+      formState.focusNodes = {
+        [focusNode.value]: {
+          properties: [{
+            shape: property,
+            objects: [object],
+          }],
+        },
+      }
+
+      // when
+      const value = graph.literal('bar')
+      const afterState = setObjectValue(store.getState().forms, {
+        form,
+        focusNode,
+        editors: store.getState().editors,
+        object,
+        property,
+        value,
+      })
+
+      // then
+      const objectAfter = afterState.get(form)?.focusNodes[focusNode.value].properties[0].objects[0]
+      expect(objectAfter?.object?.term).to.deep.eq($rdf.literal('bar'))
+    })
+  })
 })