@open-pioneer/feature-editing 1.3.0-dev.20260512095810 → 1.3.0

package/implementation/components/property-editor/PropertyEditor.js.map

@@ -1 +1 @@
-{"version":3,"file":"PropertyEditor.js","sources":["PropertyEditor.tsx"],"sourcesContent":["// SPDX-FileCopyrightText: 2023-2025 Open Pioneer project (https://github.com/open-pioneer)\n// SPDX-License-Identifier: Apache-2.0\nimport { Box, VStack, useDisclosure } from \"@chakra-ui/react\";\nimport { useEvent } from \"@open-pioneer/react-utils\";\nimport { useReactiveSnapshot } from \"@open-pioneer/reactivity\";\nimport type { ReactElement, ReactNode } from \"react\";\nimport { usePropertyFormContext } from \"../../context/usePropertyFormContext\";\nimport { ButtonRow } from \"./ButtonRow\";\nimport { DeleteConfirmationDialog } from \"./DeleteConfirmationDialog\";\n\nexport interface PropertyEditorProps {\n    readonly children: ReactNode;\n}\n\nexport function PropertyEditor({ children }: PropertyEditorProps): ReactElement {\n    const context = usePropertyFormContext();\n    const canSave = useReactiveSnapshot(() => context.isValid, [context]);\n    const { open: dialogIsOpen, onOpen: openDialog, onClose: closeDialog } = useDisclosure();\n\n    const onSaveClick = useEvent(async () => {\n        const properties = context.getPropertiesAsObject();\n        context.feature.setProperties(properties);\n        await context.callbacks.onSave();\n    });\n\n    const onDeleteClick = useEvent(async () => {\n        await context.callbacks.onDelete();\n        closeDialog();\n    });\n\n    return (\n        <>\n            <VStack className=\"editor__property-editor\" height=\"full\" gap={5} align=\"stretch\">\n                <Box flex={1} overflowY=\"auto\">\n                    {children}\n                </Box>\n                <ButtonRow\n                    canSave={canSave}\n                    showDeleteButton={context.mode === \"update\"}\n                    onSave={onSaveClick}\n                    onDelete={openDialog}\n                    onCancel={context.callbacks.onCancel}\n                />\n            </VStack>\n            <DeleteConfirmationDialog\n                isOpen={dialogIsOpen}\n                onDelete={onDeleteClick}\n                onCancel={closeDialog}\n            />\n        </>\n    );\n}\n"],"names":[],"mappings":";;;;;;;;AAcO,SAAS,cAAA,CAAe,EAAE,QAAA,EAAS,EAAsC;AAC5E,EAAA,MAAM,UAAU,sBAAA,EAAuB;AACvC,EAAA,MAAM,UAAU,mBAAA,CAAoB,MAAM,QAAQ,OAAA,EAAS,CAAC,OAAO,CAAC,CAAA;AACpE,EAAA,MAAM,EAAE,MAAM,YAAA,EAAc,MAAA,EAAQ,YAAY,OAAA,EAAS,WAAA,KAAgB,aAAA,EAAc;AAEvF,EAAA,MAAM,WAAA,GAAc,SAAS,YAAY;AACrC,IAAA,MAAM,UAAA,GAAa,QAAQ,qBAAA,EAAsB;AACjD,IAAA,OAAA,CAAQ,OAAA,CAAQ,cAAc,UAAU,CAAA;AACxC,IAAA,MAAM,OAAA,CAAQ,UAAU,MAAA,EAAO;AAAA,EACnC,CAAC,CAAA;AAED,EAAA,MAAM,aAAA,GAAgB,SAAS,YAAY;AACvC,IAAA,MAAM,OAAA,CAAQ,UAAU,QAAA,EAAS;AACjC,IAAA,WAAA,EAAY;AAAA,EAChB,CAAC,CAAA;AAED,EAAA,uBACI,IAAA,CAAA,QAAA,EAAA,EACI,QAAA,EAAA;AAAA,oBAAA,IAAA,CAAC,MAAA,EAAA,EAAO,WAAU,yBAAA,EAA0B,MAAA,EAAO,QAAO,GAAA,EAAK,CAAA,EAAG,OAAM,SAAA,EACpE,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,GAAA,EAAA,EAAI,IAAA,EAAM,CAAA,EAAG,SAAA,EAAU,QACnB,QAAA,EACL,CAAA;AAAA,sBACA,GAAA;AAAA,QAAC,SAAA;AAAA,QAAA;AAAA,UACG,OAAA;AAAA,UACA,gBAAA,EAAkB,QAAQ,IAAA,KAAS,QAAA;AAAA,UACnC,MAAA,EAAQ,WAAA;AAAA,UACR,QAAA,EAAU,UAAA;AAAA,UACV,QAAA,EAAU,QAAQ,SAAA,CAAU;AAAA;AAAA;AAChC,KAAA,EACJ,CAAA;AAAA,oBACA,GAAA;AAAA,MAAC,wBAAA;AAAA,MAAA;AAAA,QACG,MAAA,EAAQ,YAAA;AAAA,QACR,QAAA,EAAU,aAAA;AAAA,QACV,QAAA,EAAU;AAAA;AAAA;AACd,GAAA,EACJ,CAAA;AAER;;;;"}
+{"version":3,"file":"PropertyEditor.js","sources":["PropertyEditor.tsx"],"sourcesContent":["// SPDX-FileCopyrightText: 2023-2025 Open Pioneer project (https://github.com/open-pioneer)\n// SPDX-License-Identifier: Apache-2.0\nimport { Flex, useDisclosure } from \"@chakra-ui/react\";\nimport { useEvent } from \"@open-pioneer/react-utils\";\nimport { useReactiveSnapshot } from \"@open-pioneer/reactivity\";\nimport { useCallback, useMemo, type ReactElement } from \"react\";\nimport { ButtonRow } from \"./ButtonRow\";\nimport { CancelConfirmationDialog } from \"./CancelConfirmationDialog\";\nimport { DeleteConfirmationDialog } from \"./DeleteConfirmationDialog\";\nimport { FeatureEditorProps, FormTemplateContext } from \"../../../api/editor/editor\";\nimport { CreationStep, UpdateStep } from \"../../../api/model/EditingStep\";\nimport { FeatureTemplate, FormTemplate } from \"../../../api/model/FeatureTemplate\";\nimport {\n    DeclarativeFormContext,\n    CustomFormContextImpl,\n    FormContext\n} from \"../../context/PropertyFormContext\";\nimport { EditingCallbacks } from \"../../editor/useEditingCallbacks\";\nimport { PropertyField } from \"./PropertyField\";\nimport { PropertyForm } from \"./PropertyForm\";\nimport { usePropertyFormContext } from \"../../context/usePropertyFormContext\";\n\nexport function PropertyEditor(props: {\n    editingStep: CreationStep | UpdateStep;\n    callbacks: EditingCallbacks;\n    templates: FeatureTemplate[];\n    resolveFormTemplate: FeatureEditorProps[\"resolveFormTemplate\"];\n}) {\n    const { editingStep, callbacks, templates, resolveFormTemplate } = props;\n    const formTemplate = useFormTemplate(templates, resolveFormTemplate, editingStep);\n\n    const context = useMemo(() => {\n        if (!formTemplate) {\n            return undefined;\n        }\n\n        if (formTemplate.kind === \"declarative\") {\n            return new DeclarativeFormContext(editingStep, callbacks, formTemplate);\n        } else {\n            return new CustomFormContextImpl(editingStep, callbacks, formTemplate);\n        }\n    }, [formTemplate, editingStep, callbacks]);\n\n    return (\n        context &&\n        formTemplate && (\n            <FormContext value={context}>\n                <Flex\n                    className=\"editor__property-editor\"\n                    direction=\"column\"\n                    height=\"full\"\n                    overflowY={\"hidden\"}\n                >\n                    <PropertyForm>\n                        {formTemplate.kind === \"dynamic\"\n                            ? formTemplate.renderForm()\n                            : formTemplate.fields.map((field, index) => (\n                                  <PropertyField key={index} field={field} />\n                              ))}\n                    </PropertyForm>\n                    <EditorControls></EditorControls>\n                </Flex>\n            </FormContext>\n        )\n    );\n}\n\nfunction useFormTemplate(\n    templates: FeatureTemplate[],\n    customResolver: FeatureEditorProps[\"resolveFormTemplate\"],\n    editingStep: CreationStep | UpdateStep\n): FormTemplate | undefined {\n    const defaultResolver = useDefaultFormTemplateResolver(templates);\n    const resolveFormTemplate = customResolver ?? defaultResolver;\n\n    const feature = editingStep.feature;\n    const layer = editingStep.id === \"update\" ? editingStep.layer : undefined;\n    const explicitTemplate = editingStep.id === \"creation\" ? editingStep.template : undefined;\n\n    return useMemo(() => {\n        if (explicitTemplate) {\n            return explicitTemplate;\n        } else if (editingStep.id === \"update\") {\n            return resolveFormTemplate({ feature, layer });\n        } else {\n            return undefined;\n        }\n    }, [explicitTemplate, editingStep.id, feature, layer, resolveFormTemplate]);\n}\n\nfunction useDefaultFormTemplateResolver(templates: FeatureTemplate[]) {\n    return useCallback(\n        ({ layer }: FormTemplateContext) => {\n            if (layer?.id != null) {\n                return templates.find(({ layerId }) => layer.id === layerId);\n            } else {\n                return undefined;\n            }\n        },\n        [templates]\n    );\n}\n\nfunction EditorControls(): ReactElement {\n    const context = usePropertyFormContext();\n    const canSave = useReactiveSnapshot(() => context.isValid, [context]);\n\n    const {\n        open: deleteDialogIsOpen,\n        onOpen: openDeleteDialog,\n        onClose: closeDeleteDialog\n    } = useDisclosure();\n    const {\n        open: cancelDialogIsOpen,\n        onOpen: openCancelDialog,\n        onClose: closeCancelConfirmationDialog\n    } = useDisclosure();\n\n    const onSaveClick = useEvent(async () => {\n        const properties = context.getPropertiesAsObject();\n        context.feature.setProperties(properties);\n        await context.callbacks.onSave();\n    });\n\n    const onDeleteClick = useEvent(async () => {\n        await context.callbacks.onDelete();\n        closeDeleteDialog();\n    });\n\n    const onConfirmCancelClick = useEvent(() => {\n        context.callbacks.onCancel();\n        closeCancelConfirmationDialog();\n    });\n\n    return (\n        <>\n            <ButtonRow\n                canSave={canSave}\n                showDeleteButton={context.mode === \"update\"}\n                onSave={onSaveClick}\n                onDelete={openDeleteDialog}\n                onCancel={openCancelDialog}\n            />\n            <DeleteConfirmationDialog\n                isOpen={deleteDialogIsOpen}\n                onDelete={onDeleteClick}\n                onCancel={closeDeleteDialog}\n            />\n            <CancelConfirmationDialog\n                isOpen={cancelDialogIsOpen}\n                onConfirmCancel={onConfirmCancelClick}\n                onAbortCancel={closeCancelConfirmationDialog}\n            />\n        </>\n    );\n}\n"],"names":[],"mappings":"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"}

package/implementation/components/property-editor/PropertyField.js

@@ -1,16 +1,21 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { Field } from '@chakra-ui/react';
 import { useReactiveSnapshot } from '@open-pioneer/reactivity';
-import { usePropertyFormContext } from '../../context/usePropertyFormContext.js';
+import { useIntl } from '../../../_virtual/hooks.js';
+import { useState, useMemo } from 'react';
+import { useDeclarativeFormContext, usePropertyFormContext } from '../../context/usePropertyFormContext.js';
 import { DefaultControl } from '../controls/DefaultControl.js';
 
 function PropertyField({ field }) {
+  const context = useDeclarativeFormContext();
   const isRequired = useValue(field.isRequired) ?? false;
   const isEnabled = useValue(field.isEnabled) ?? true;
   const isVisible = useValue(field.isVisible) ?? true;
-  const isValid = useValue(field.isValid) ?? true;
-  const errorText = useValue(field.errorText);
+  const isValid = useReactiveSnapshot(() => context.isFieldValid(field), [context, field]);
+  const defaultErrorText = useDefaultErrorText(field);
+  const errorText = useValue(field.errorText) ?? defaultErrorText;
   const helperText = useValue(field.helperText);
+  const [hadFocus, setHadFocus] = useState(false);
   if (isVisible) {
     return /* @__PURE__ */ jsxs(
       Field.Root,
@@ -18,8 +23,11 @@ function PropertyField({ field }) {
         className: "editor__property-field",
         required: isRequired,
         disabled: !isEnabled,
-        invalid: !isValid,
+        invalid: hadFocus && !isValid,
         "data-editor-property-name": field.propertyName,
+        onFocus: () => {
+          setHadFocus(true);
+        },
         children: [
           /* @__PURE__ */ jsxs(Field.Label, { children: [
             field.label,
@@ -35,6 +43,24 @@ function PropertyField({ field }) {
     return void 0;
   }
 }
+function useDefaultErrorText(field) {
+  const intl = useIntl();
+  return useMemo(() => {
+    if (field.type !== "number-field" || field.min == null && field.max == null) {
+      return void 0;
+    }
+    const { min, max } = field;
+    let messageId;
+    if (min != null && max != null) {
+      messageId = "propertyEditor.errors.minAndMax";
+    } else if (min != null) {
+      messageId = "propertyEditor.errors.minOnly";
+    } else {
+      messageId = "propertyEditor.errors.maxOnly";
+    }
+    return intl.formatMessage({ id: messageId }, { min, max });
+  }, [intl, field]);
+}
 function useValue(value) {
   const context = usePropertyFormContext();
   return useReactiveSnapshot(() => {

package/implementation/components/property-editor/PropertyField.js.map

@@ -1 +1 @@
-{"version":3,"file":"PropertyField.js","sources":["PropertyField.tsx"],"sourcesContent":["// SPDX-FileCopyrightText: 2023-2025 Open Pioneer project (https://github.com/open-pioneer)\n// SPDX-License-Identifier: Apache-2.0\nimport { Field } from \"@chakra-ui/react\";\nimport { useReactiveSnapshot } from \"@open-pioneer/reactivity\";\nimport { type ReactElement } from \"react\";\nimport type { PropertyFunction, PropertyFunctionOr } from \"../../../api/fields/BaseFieldConfig\";\nimport type { FieldConfig } from \"../../../api/fields/FieldConfig\";\nimport { usePropertyFormContext } from \"../../context/usePropertyFormContext\";\nimport { DefaultControl } from \"../controls/DefaultControl\";\n\nexport interface PropertyFieldProps {\n    readonly field: FieldConfig;\n}\n\nexport function PropertyField({ field }: PropertyFieldProps): ReactElement | undefined {\n    const isRequired = useValue(field.isRequired) ?? false;\n    const isEnabled = useValue(field.isEnabled) ?? true;\n    const isVisible = useValue(field.isVisible) ?? true;\n    const isValid = useValue(field.isValid) ?? true;\n    const errorText = useValue(field.errorText);\n    const helperText = useValue(field.helperText);\n\n    if (isVisible) {\n        return (\n            <Field.Root\n                className=\"editor__property-field\"\n                required={isRequired}\n                disabled={!isEnabled}\n                invalid={!isValid}\n                data-editor-property-name={field.propertyName}\n            >\n                <Field.Label>\n                    {field.label}\n                    <Field.RequiredIndicator />\n                </Field.Label>\n                <DefaultControl field={field} />\n                {helperText && <Field.HelperText>{helperText}</Field.HelperText>}\n                {errorText && <Field.ErrorText>{errorText}</Field.ErrorText>}\n            </Field.Root>\n        );\n    } else {\n        return undefined;\n    }\n}\n\nfunction useValue<T>(value: PropertyFunctionOr<T> | undefined): T | undefined {\n    const context = usePropertyFormContext();\n\n    return useReactiveSnapshot(() => {\n        if (isPropertyFunction(value)) {\n            const properties = context.getPropertiesAsObject();\n            return value(properties);\n        } else {\n            return value;\n        }\n    }, [context, value]);\n}\n\nfunction isPropertyFunction<T>(value: PropertyFunctionOr<T>): value is PropertyFunction<T> {\n    return typeof value === \"function\";\n}\n"],"names":[],"mappings":";;;;;;AAcO,SAAS,aAAA,CAAc,EAAE,KAAA,EAAM,EAAiD;AACnF,EAAA,MAAM,UAAA,GAAa,QAAA,CAAS,KAAA,CAAM,UAAU,CAAA,IAAK,KAAA;AACjD,EAAA,MAAM,SAAA,GAAY,QAAA,CAAS,KAAA,CAAM,SAAS,CAAA,IAAK,IAAA;AAC/C,EAAA,MAAM,SAAA,GAAY,QAAA,CAAS,KAAA,CAAM,SAAS,CAAA,IAAK,IAAA;AAC/C,EAAA,MAAM,OAAA,GAAU,QAAA,CAAS,KAAA,CAAM,OAAO,CAAA,IAAK,IAAA;AAC3C,EAAA,MAAM,SAAA,GAAY,QAAA,CAAS,KAAA,CAAM,SAAS,CAAA;AAC1C,EAAA,MAAM,UAAA,GAAa,QAAA,CAAS,KAAA,CAAM,UAAU,CAAA;AAE5C,EAAA,IAAI,SAAA,EAAW;AACX,IAAA,uBACI,IAAA;AAAA,MAAC,KAAA,CAAM,IAAA;AAAA,MAAN;AAAA,QACG,SAAA,EAAU,wBAAA;AAAA,QACV,QAAA,EAAU,UAAA;AAAA,QACV,UAAU,CAAC,SAAA;AAAA,QACX,SAAS,CAAC,OAAA;AAAA,QACV,6BAA2B,KAAA,CAAM,YAAA;AAAA,QAEjC,QAAA,EAAA;AAAA,0BAAA,IAAA,CAAC,KAAA,CAAM,OAAN,EACI,QAAA,EAAA;AAAA,YAAA,KAAA,CAAM,KAAA;AAAA,4BACP,GAAA,CAAC,KAAA,CAAM,iBAAA,EAAN,EAAwB;AAAA,WAAA,EAC7B,CAAA;AAAA,0BACA,GAAA,CAAC,kBAAe,KAAA,EAAc,CAAA;AAAA,UAC7B,UAAA,oBAAc,GAAA,CAAC,KAAA,CAAM,UAAA,EAAN,EAAkB,QAAA,EAAA,UAAA,EAAW,CAAA;AAAA,UAC5C,SAAA,oBAAa,GAAA,CAAC,KAAA,CAAM,SAAA,EAAN,EAAiB,QAAA,EAAA,SAAA,EAAU;AAAA;AAAA;AAAA,KAC9C;AAAA,EAER,CAAA,MAAO;AACH,IAAA,OAAO,MAAA;AAAA,EACX;AACJ;AAEA,SAAS,SAAY,KAAA,EAAyD;AAC1E,EAAA,MAAM,UAAU,sBAAA,EAAuB;AAEvC,EAAA,OAAO,oBAAoB,MAAM;AAC7B,IAAA,IAAI,kBAAA,CAAmB,KAAK,CAAA,EAAG;AAC3B,MAAA,MAAM,UAAA,GAAa,QAAQ,qBAAA,EAAsB;AACjD,MAAA,OAAO,MAAM,UAAU,CAAA;AAAA,IAC3B,CAAA,MAAO;AACH,MAAA,OAAO,KAAA;AAAA,IACX;AAAA,EACJ,CAAA,EAAG,CAAC,OAAA,EAAS,KAAK,CAAC,CAAA;AACvB;AAEA,SAAS,mBAAsB,KAAA,EAA4D;AACvF,EAAA,OAAO,OAAO,KAAA,KAAU,UAAA;AAC5B;;;;"}
+{"version":3,"file":"PropertyField.js","sources":["PropertyField.tsx"],"sourcesContent":["// SPDX-FileCopyrightText: 2023-2025 Open Pioneer project (https://github.com/open-pioneer)\n// SPDX-License-Identifier: Apache-2.0\nimport { Field } from \"@chakra-ui/react\";\nimport { useReactiveSnapshot } from \"@open-pioneer/reactivity\";\nimport { useIntl } from \"open-pioneer:react-hooks\";\nimport { useMemo, useState, type ReactElement } from \"react\";\nimport type { PropertyFunction, PropertyFunctionOr } from \"../../../api/fields/BaseFieldConfig\";\nimport type { FieldConfig } from \"../../../api/fields/FieldConfig\";\nimport {\n    useDeclarativeFormContext,\n    usePropertyFormContext\n} from \"../../context/usePropertyFormContext\";\nimport { DefaultControl } from \"../controls/DefaultControl\";\n\nexport interface PropertyFieldProps {\n    readonly field: FieldConfig;\n}\n\nexport function PropertyField({ field }: PropertyFieldProps): ReactElement | undefined {\n    const context = useDeclarativeFormContext();\n    const isRequired = useValue(field.isRequired) ?? false;\n    const isEnabled = useValue(field.isEnabled) ?? true;\n    const isVisible = useValue(field.isVisible) ?? true;\n    const isValid = useReactiveSnapshot(() => context.isFieldValid(field), [context, field]);\n\n    const defaultErrorText = useDefaultErrorText(field);\n    const errorText = useValue(field.errorText) ?? defaultErrorText;\n    const helperText = useValue(field.helperText);\n\n    const [hadFocus, setHadFocus] = useState(false);\n\n    if (isVisible) {\n        return (\n            <Field.Root\n                className=\"editor__property-field\"\n                required={isRequired}\n                disabled={!isEnabled}\n                invalid={hadFocus && !isValid}\n                data-editor-property-name={field.propertyName}\n                onFocus={() => {\n                    setHadFocus(true);\n                }}\n            >\n                <Field.Label>\n                    {field.label}\n                    <Field.RequiredIndicator />\n                </Field.Label>\n                <DefaultControl field={field} />\n                {helperText && <Field.HelperText>{helperText}</Field.HelperText>}\n                {errorText && <Field.ErrorText>{errorText}</Field.ErrorText>}\n            </Field.Root>\n        );\n    } else {\n        return undefined;\n    }\n}\n\nfunction useDefaultErrorText(field: FieldConfig): string | undefined {\n    const intl = useIntl();\n    return useMemo(() => {\n        if (field.type !== \"number-field\" || (field.min == null && field.max == null)) {\n            return undefined;\n        }\n\n        const { min, max } = field;\n        let messageId;\n        if (min != null && max != null) {\n            messageId = \"propertyEditor.errors.minAndMax\";\n        } else if (min != null) {\n            messageId = \"propertyEditor.errors.minOnly\";\n        } else {\n            messageId = \"propertyEditor.errors.maxOnly\";\n        }\n        return intl.formatMessage({ id: messageId }, { min, max });\n    }, [intl, field]);\n}\n\nfunction useValue<T>(value: PropertyFunctionOr<T> | undefined): T | undefined {\n    const context = usePropertyFormContext();\n\n    return useReactiveSnapshot(() => {\n        if (isPropertyFunction(value)) {\n            const properties = context.getPropertiesAsObject();\n            return value(properties);\n        } else {\n            return value;\n        }\n    }, [context, value]);\n}\n\nfunction isPropertyFunction<T>(value: PropertyFunctionOr<T>): value is PropertyFunction<T> {\n    return typeof value === \"function\";\n}\n"],"names":[],"mappings":"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"}

package/implementation/components/property-editor/PropertyForm.d.ts

@@ -1,8 +1,5 @@
-import { type ReactElement } from "react";
-import { FormTemplateContext } from "../../../api/editor/editor";
-import type { FeatureTemplate, FormTemplate } from "../../../api/model/FeatureTemplate";
-export interface PropertyForm {
-    readonly templates: FeatureTemplate[];
-    readonly resolveFormTemplate?: (context: FormTemplateContext) => FormTemplate | undefined;
+import { ReactNode, type ReactElement } from "react";
+export interface PropertyFormProps {
+    children?: ReactNode;
 }
-export declare function PropertyForm({ templates, resolveFormTemplate }: PropertyForm): ReactElement;
+export declare function PropertyForm(props: PropertyFormProps): ReactElement;

package/implementation/components/property-editor/PropertyForm.js

@@ -1,81 +1,63 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { Flex, Box, VStack } from '@chakra-ui/react';
-import { effect } from '@conterra/reactivity-core';
+import { Flex, VStack, Text } from '@chakra-ui/react';
 import { TitledSection, SectionHeading } from '@open-pioneer/react-utils';
 import { useIntl } from '../../../_virtual/hooks.js';
-import { useMemo, useEffect, useCallback } from 'react';
 import { usePropertyFormContext } from '../../context/usePropertyFormContext.js';
-import { PropertyField } from './PropertyField.js';
+import { useReactiveSnapshot } from '@open-pioneer/reactivity';
 
-function PropertyForm({ templates, resolveFormTemplate }) {
-  const template = useFormTemplate(templates, resolveFormTemplate);
-  const heading = useHeading(template);
-  useUpdateValidity(template);
-  return /* @__PURE__ */ jsx(Flex, { className: "editor__property-form", direction: "column", height: "full", children: /* @__PURE__ */ jsxs(TitledSection, { children: [
-    /* @__PURE__ */ jsx(SectionHeading, { mb: 2, size: "sm", children: heading }),
-    /* @__PURE__ */ jsx(Box, { flex: 1, overflowY: "auto", children: /* @__PURE__ */ jsx(
-      VStack,
-      {
-        gap: 4,
-        align: "stretch",
-        px: "1px",
-        pb: "4px",
-        children: template?.kind === "dynamic" ? template.renderForm() : template?.fields.map((field, index) => /* @__PURE__ */ jsx(PropertyField, { field }, index))
-      }
-    ) })
-  ] }) });
-}
-function useFormTemplate(templates, customResolver) {
-  const { mode, feature, template: explicitTemplate, layer } = usePropertyFormContext();
-  const defaultResolver = useDefaultFormTemplateResolver(templates);
-  const resolveFormTemplate = customResolver ?? defaultResolver;
-  return useMemo(() => {
-    if (explicitTemplate) {
-      return explicitTemplate;
-    } else if (mode === "update") {
-      return resolveFormTemplate({ feature, layer });
-    } else {
-      return void 0;
+function PropertyForm(props) {
+  const { children } = props;
+  const heading = useHeading();
+  const context = usePropertyFormContext();
+  const hasRequiredFields = useReactiveSnapshot(() => context.hasRequiredFields, [context]);
+  const { formatRichMessage } = useIntl();
+  return /* @__PURE__ */ jsx(TitledSection, { children: /* @__PURE__ */ jsxs(
+    Flex,
+    {
+      className: "editor__property-form",
+      direction: "column",
+      flex: 1,
+      overflowY: "hidden",
+      children: [
+        /* @__PURE__ */ jsx(SectionHeading, { mb: 2, size: "sm", children: heading }),
+        /* @__PURE__ */ jsx(
+          VStack,
+          {
+            gap: 4,
+            align: "stretch",
+            px: "1px",
+            pb: "4px",
+            flex: 1,
+            overflowY: "auto",
+            children
+          }
+        ),
+        hasRequiredFields && /* @__PURE__ */ jsxs(
+          Text,
+          {
+            fontSize: "sm",
+            "aria-hidden": "true",
+            textAlign: "right",
+            paddingRight: 2,
+            mb: 2,
+            children: [
+              /* @__PURE__ */ jsx(Text, { as: "span", color: "fg.error", children: "*" }),
+              " ",
+              formatRichMessage({ id: "propertyEditor.requiredFieldHint" })
+            ]
+          }
+        )
+      ]
     }
-  }, [feature, mode, explicitTemplate, layer, resolveFormTemplate]);
+  ) });
 }
-function useHeading(template) {
+function useHeading() {
   const intl = useIntl();
-  const { mode } = usePropertyFormContext();
+  const { mode, formTemplate: template } = usePropertyFormContext();
   const defaultHeading = intl.formatMessage({
     id: mode === "update" ? "propertyEditor.defaultEditHeading" : "propertyEditor.defaultCreateHeading"
   });
-  return template?.name ?? defaultHeading;
-}
-function useDefaultFormTemplateResolver(templates) {
-  return useCallback(
-    ({ layer }) => {
-      if (layer?.id != null) {
-        return templates.find(({ layerId }) => layer.id === layerId);
-      } else {
-        return void 0;
-      }
-    },
-    [templates]
-  );
-}
-function useUpdateValidity(template) {
-  const context = usePropertyFormContext();
-  useEffect(() => {
-    const handle = effect(() => {
-      if (template?.kind === "declarative") {
-        const properties = context.getPropertiesAsObject();
-        context.isValid = template.fields.every((field) => isValid(field, properties));
-      }
-    });
-    return () => handle.destroy();
-  }, [context, template]);
-}
-function isValid(field, properties) {
-  return (!isTrue(field.isRequired, properties) || properties[field.propertyName] != null) && isTrue(field.isValid, properties, true);
-}
-function isTrue(value, properties, defaultValue = false) {
-  return typeof value === "function" ? value(properties) : value ?? defaultValue;
+  return template?.name ? `${defaultHeading}: ${template?.name} ` : defaultHeading;
 }
 
 export { PropertyForm };

package/implementation/components/property-editor/PropertyForm.js.map

@@ -1 +1 @@
-{"version":3,"file":"PropertyForm.js","sources":["PropertyForm.tsx"],"sourcesContent":["// SPDX-FileCopyrightText: 2023-2025 Open Pioneer project (https://github.com/open-pioneer)\n// SPDX-License-Identifier: Apache-2.0\nimport { Box, Flex, VStack } from \"@chakra-ui/react\";\nimport { effect } from \"@conterra/reactivity-core\";\nimport { SectionHeading, TitledSection } from \"@open-pioneer/react-utils\";\nimport { useIntl } from \"open-pioneer:react-hooks\";\nimport { useCallback, useEffect, useMemo, type ReactElement } from \"react\";\nimport { FormTemplateContext } from \"../../../api/editor/editor\";\nimport type { PropertyFunctionOr } from \"../../../api/fields/BaseFieldConfig\";\nimport type { FieldConfig } from \"../../../api/fields/FieldConfig\";\nimport type { FeatureTemplate, FormTemplate } from \"../../../api/model/FeatureTemplate\";\nimport { usePropertyFormContext } from \"../../context/usePropertyFormContext\";\nimport { PropertyField } from \"./PropertyField\";\n\nexport interface PropertyForm {\n    readonly templates: FeatureTemplate[];\n    readonly resolveFormTemplate?: (context: FormTemplateContext) => FormTemplate | undefined;\n}\n\nexport function PropertyForm({ templates, resolveFormTemplate }: PropertyForm): ReactElement {\n    const template = useFormTemplate(templates, resolveFormTemplate);\n    const heading = useHeading(template);\n    useUpdateValidity(template);\n\n    return (\n        <Flex className=\"editor__property-form\" direction=\"column\" height=\"full\">\n            <TitledSection>\n                <SectionHeading mb={2} size=\"sm\">\n                    {heading}\n                </SectionHeading>\n                <Box flex={1} overflowY=\"auto\">\n                    <VStack\n                        gap={4}\n                        align=\"stretch\"\n                        // for focus ring\n                        px=\"1px\"\n                        pb=\"4px\"\n                    >\n                        {template?.kind === \"dynamic\"\n                            ? template.renderForm()\n                            : template?.fields.map((field, index) => (\n                                  <PropertyField key={index} field={field} />\n                              ))}\n                    </VStack>\n                </Box>\n            </TitledSection>\n        </Flex>\n    );\n}\n\nfunction useFormTemplate(\n    templates: FeatureTemplate[],\n    customResolver: PropertyForm[\"resolveFormTemplate\"]\n): FormTemplate | undefined {\n    const { mode, feature, template: explicitTemplate, layer } = usePropertyFormContext();\n    const defaultResolver = useDefaultFormTemplateResolver(templates);\n    const resolveFormTemplate = customResolver ?? defaultResolver;\n\n    return useMemo(() => {\n        if (explicitTemplate) {\n            return explicitTemplate;\n        } else if (mode === \"update\") {\n            return resolveFormTemplate({ feature, layer });\n        } else {\n            return undefined;\n        }\n    }, [feature, mode, explicitTemplate, layer, resolveFormTemplate]);\n}\n\nfunction useHeading(template: FormTemplate | undefined) {\n    const intl = useIntl();\n    const { mode } = usePropertyFormContext();\n    const defaultHeading = intl.formatMessage({\n        id:\n            mode === \"update\"\n                ? \"propertyEditor.defaultEditHeading\"\n                : \"propertyEditor.defaultCreateHeading\"\n    });\n    return template?.name ?? defaultHeading;\n}\n\nfunction useDefaultFormTemplateResolver(templates: FeatureTemplate[]) {\n    return useCallback(\n        ({ layer }: FormTemplateContext) => {\n            if (layer?.id != null) {\n                return templates.find(({ layerId }) => layer.id === layerId);\n            } else {\n                return undefined;\n            }\n        },\n        [templates]\n    );\n}\n\nfunction useUpdateValidity(template: FormTemplate | undefined): void {\n    const context = usePropertyFormContext();\n\n    useEffect(() => {\n        const handle = effect(() => {\n            if (template?.kind === \"declarative\") {\n                const properties = context.getPropertiesAsObject();\n                context.isValid = template.fields.every((field) => isValid(field, properties));\n            }\n        });\n        return () => handle.destroy();\n    }, [context, template]);\n}\n\nfunction isValid(field: FieldConfig, properties: Record<string, unknown>): boolean {\n    return (\n        (!isTrue(field.isRequired, properties) || properties[field.propertyName] != null) &&\n        isTrue(field.isValid, properties, true)\n    );\n}\n\nfunction isTrue(\n    value: PropertyFunctionOr<boolean> | undefined,\n    properties: Record<string, unknown>,\n    defaultValue: boolean = false\n): boolean {\n    return typeof value === \"function\" ? value(properties) : (value ?? defaultValue);\n}\n"],"names":[],"mappings":";;;;;;;;;AAmBO,SAAS,YAAA,CAAa,EAAE,SAAA,EAAW,mBAAA,EAAoB,EAA+B;AACzF,EAAA,MAAM,QAAA,GAAW,eAAA,CAAgB,SAAA,EAAW,mBAAmB,CAAA;AAC/D,EAAA,MAAM,OAAA,GAAU,WAAW,QAAQ,CAAA;AACnC,EAAA,iBAAA,CAAkB,QAAQ,CAAA;AAE1B,EAAA,uBACI,GAAA,CAAC,QAAK,SAAA,EAAU,uBAAA,EAAwB,WAAU,QAAA,EAAS,MAAA,EAAO,MAAA,EAC9D,QAAA,kBAAA,IAAA,CAAC,aAAA,EAAA,EACG,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,cAAA,EAAA,EAAe,EAAA,EAAI,CAAA,EAAG,IAAA,EAAK,MACvB,QAAA,EAAA,OAAA,EACL,CAAA;AAAA,oBACA,GAAA,CAAC,GAAA,EAAA,EAAI,IAAA,EAAM,CAAA,EAAG,WAAU,MAAA,EACpB,QAAA,kBAAA,GAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACG,GAAA,EAAK,CAAA;AAAA,QACL,KAAA,EAAM,SAAA;AAAA,QAEN,EAAA,EAAG,KAAA;AAAA,QACH,EAAA,EAAG,KAAA;AAAA,QAEF,oBAAU,IAAA,KAAS,SAAA,GACd,QAAA,CAAS,UAAA,KACT,QAAA,EAAU,MAAA,CAAO,GAAA,CAAI,CAAC,OAAO,KAAA,qBACzB,GAAA,CAAC,aAAA,EAAA,EAA0B,KAAA,EAAA,EAAP,KAAqB,CAC5C;AAAA;AAAA,KACX,EACJ;AAAA,GAAA,EACJ,CAAA,EACJ,CAAA;AAER;AAEA,SAAS,eAAA,CACL,WACA,cAAA,EACwB;AACxB,EAAA,MAAM,EAAE,IAAA,EAAM,OAAA,EAAS,UAAU,gBAAA,EAAkB,KAAA,KAAU,sBAAA,EAAuB;AACpF,EAAA,MAAM,eAAA,GAAkB,+BAA+B,SAAS,CAAA;AAChE,EAAA,MAAM,sBAAsB,cAAA,IAAkB,eAAA;AAE9C,EAAA,OAAO,QAAQ,MAAM;AACjB,IAAA,IAAI,gBAAA,EAAkB;AAClB,MAAA,OAAO,gBAAA;AAAA,IACX,CAAA,MAAA,IAAW,SAAS,QAAA,EAAU;AAC1B,MAAA,OAAO,mBAAA,CAAoB,EAAE,OAAA,EAAS,KAAA,EAAO,CAAA;AAAA,IACjD,CAAA,MAAO;AACH,MAAA,OAAO,MAAA;AAAA,IACX;AAAA,EACJ,GAAG,CAAC,OAAA,EAAS,MAAM,gBAAA,EAAkB,KAAA,EAAO,mBAAmB,CAAC,CAAA;AACpE;AAEA,SAAS,WAAW,QAAA,EAAoC;AACpD,EAAA,MAAM,OAAO,OAAA,EAAQ;AACrB,EAAA,MAAM,EAAE,IAAA,EAAK,GAAI,sBAAA,EAAuB;AACxC,EAAA,MAAM,cAAA,GAAiB,KAAK,aAAA,CAAc;AAAA,IACtC,EAAA,EACI,IAAA,KAAS,QAAA,GACH,mCAAA,GACA;AAAA,GACb,CAAA;AACD,EAAA,OAAO,UAAU,IAAA,IAAQ,cAAA;AAC7B;AAEA,SAAS,+BAA+B,SAAA,EAA8B;AAClE,EAAA,OAAO,WAAA;AAAA,IACH,CAAC,EAAE,KAAA,EAAM,KAA2B;AAChC,MAAA,IAAI,KAAA,EAAO,MAAM,IAAA,EAAM;AACnB,QAAA,OAAO,SAAA,CAAU,KAAK,CAAC,EAAE,SAAQ,KAAM,KAAA,CAAM,OAAO,OAAO,CAAA;AAAA,MAC/D,CAAA,MAAO;AACH,QAAA,OAAO,MAAA;AAAA,MACX;AAAA,IACJ,CAAA;AAAA,IACA,CAAC,SAAS;AAAA,GACd;AACJ;AAEA,SAAS,kBAAkB,QAAA,EAA0C;AACjE,EAAA,MAAM,UAAU,sBAAA,EAAuB;AAEvC,EAAA,SAAA,CAAU,MAAM;AACZ,IAAA,MAAM,MAAA,GAAS,OAAO,MAAM;AACxB,MAAA,IAAI,QAAA,EAAU,SAAS,aAAA,EAAe;AAClC,QAAA,MAAM,UAAA,GAAa,QAAQ,qBAAA,EAAsB;AACjD,QAAA,OAAA,CAAQ,OAAA,GAAU,SAAS,MAAA,CAAO,KAAA,CAAM,CAAC,KAAA,KAAU,OAAA,CAAQ,KAAA,EAAO,UAAU,CAAC,CAAA;AAAA,MACjF;AAAA,IACJ,CAAC,CAAA;AACD,IAAA,OAAO,MAAM,OAAO,OAAA,EAAQ;AAAA,EAChC,CAAA,EAAG,CAAC,OAAA,EAAS,QAAQ,CAAC,CAAA;AAC1B;AAEA,SAAS,OAAA,CAAQ,OAAoB,UAAA,EAA8C;AAC/E,EAAA,OAAA,CACK,CAAC,MAAA,CAAO,KAAA,CAAM,UAAA,EAAY,UAAU,CAAA,IAAK,UAAA,CAAW,KAAA,CAAM,YAAY,KAAK,IAAA,KAC5E,MAAA,CAAO,KAAA,CAAM,OAAA,EAAS,YAAY,IAAI,CAAA;AAE9C;AAEA,SAAS,MAAA,CACL,KAAA,EACA,UAAA,EACA,YAAA,GAAwB,KAAA,EACjB;AACP,EAAA,OAAO,OAAO,KAAA,KAAU,UAAA,GAAa,KAAA,CAAM,UAAU,IAAK,KAAA,IAAS,YAAA;AACvE;;;;"}
+{"version":3,"file":"PropertyForm.js","sources":["PropertyForm.tsx"],"sourcesContent":["// SPDX-FileCopyrightText: 2023-2025 Open Pioneer project (https://github.com/open-pioneer)\n// SPDX-License-Identifier: Apache-2.0\nimport { Flex, VStack, Text } from \"@chakra-ui/react\";\nimport { SectionHeading, TitledSection } from \"@open-pioneer/react-utils\";\nimport { useIntl } from \"open-pioneer:react-hooks\";\nimport { ReactNode, type ReactElement } from \"react\";\nimport { usePropertyFormContext } from \"../../context/usePropertyFormContext\";\nimport { useReactiveSnapshot } from \"@open-pioneer/reactivity\";\n\nexport interface PropertyFormProps {\n    children?: ReactNode;\n}\n\nexport function PropertyForm(props: PropertyFormProps): ReactElement {\n    const { children } = props;\n    const heading = useHeading();\n    const context = usePropertyFormContext();\n    const hasRequiredFields = useReactiveSnapshot(() => context.hasRequiredFields, [context]);\n    const { formatRichMessage } = useIntl();\n\n    return (\n        <TitledSection>\n            <Flex\n                className=\"editor__property-form\"\n                direction={\"column\"}\n                flex={1}\n                overflowY=\"hidden\"\n            >\n                <SectionHeading mb={2} size=\"sm\">\n                    {heading}\n                </SectionHeading>\n                <VStack\n                    gap={4}\n                    align=\"stretch\"\n                    // for focus ring\n                    px=\"1px\"\n                    pb=\"4px\"\n                    flex={1}\n                    overflowY={\"auto\"}\n                >\n                    {children}\n                </VStack>\n                {hasRequiredFields && (\n                    <Text\n                        fontSize={\"sm\"}\n                        aria-hidden=\"true\"\n                        textAlign={\"right\"}\n                        paddingRight={2}\n                        mb={2}\n                    >\n                        <Text as=\"span\" color=\"fg.error\">\n                            *\n                        </Text>{\" \"}\n                        {formatRichMessage({ id: \"propertyEditor.requiredFieldHint\" })}\n                    </Text>\n                )}\n            </Flex>\n        </TitledSection>\n    );\n}\n\nfunction useHeading() {\n    const intl = useIntl();\n    const { mode, formTemplate: template } = usePropertyFormContext();\n    const defaultHeading = intl.formatMessage({\n        id:\n            mode === \"update\"\n                ? \"propertyEditor.defaultEditHeading\"\n                : \"propertyEditor.defaultCreateHeading\"\n    });\n    return template?.name ? `${defaultHeading}: ${template?.name} ` : defaultHeading;\n}\n"],"names":[],"mappings":";;;;;;;AAaO,SAAS,aAAa,KAAA,EAAwC;AACjE,EAAA,MAAM,EAAE,UAAS,GAAI,KAAA;AACrB,EAAA,MAAM,UAAU,UAAA,EAAW;AAC3B,EAAA,MAAM,UAAU,sBAAA,EAAuB;AACvC,EAAA,MAAM,oBAAoB,mBAAA,CAAoB,MAAM,QAAQ,iBAAA,EAAmB,CAAC,OAAO,CAAC,CAAA;AACxF,EAAA,MAAM,EAAE,iBAAA,EAAkB,GAAI,OAAA,EAAQ;AAEtC,EAAA,2BACK,aAAA,EAAA,EACG,QAAA,kBAAA,IAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACG,SAAA,EAAU,uBAAA;AAAA,MACV,SAAA,EAAW,QAAA;AAAA,MACX,IAAA,EAAM,CAAA;AAAA,MACN,SAAA,EAAU,QAAA;AAAA,MAEV,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,cAAA,EAAA,EAAe,EAAA,EAAI,CAAA,EAAG,IAAA,EAAK,MACvB,QAAA,EAAA,OAAA,EACL,CAAA;AAAA,wBACA,GAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACG,GAAA,EAAK,CAAA;AAAA,YACL,KAAA,EAAM,SAAA;AAAA,YAEN,EAAA,EAAG,KAAA;AAAA,YACH,EAAA,EAAG,KAAA;AAAA,YACH,IAAA,EAAM,CAAA;AAAA,YACN,SAAA,EAAW,MAAA;AAAA,YAEV;AAAA;AAAA,SACL;AAAA,QACC,iBAAA,oBACG,IAAA;AAAA,UAAC,IAAA;AAAA,UAAA;AAAA,YACG,QAAA,EAAU,IAAA;AAAA,YACV,aAAA,EAAY,MAAA;AAAA,YACZ,SAAA,EAAW,OAAA;AAAA,YACX,YAAA,EAAc,CAAA;AAAA,YACd,EAAA,EAAI,CAAA;AAAA,YAEJ,QAAA,EAAA;AAAA,8BAAA,GAAA,CAAC,IAAA,EAAA,EAAK,EAAA,EAAG,MAAA,EAAO,KAAA,EAAM,YAAW,QAAA,EAAA,GAAA,EAEjC,CAAA;AAAA,cAAQ,GAAA;AAAA,cACP,iBAAA,CAAkB,EAAE,EAAA,EAAI,kCAAA,EAAoC;AAAA;AAAA;AAAA;AACjE;AAAA;AAAA,GAER,EACJ,CAAA;AAER;AAEA,SAAS,UAAA,GAAa;AAClB,EAAA,MAAM,OAAO,OAAA,EAAQ;AACrB,EAAA,MAAM,EAAE,IAAA,EAAM,YAAA,EAAc,QAAA,KAAa,sBAAA,EAAuB;AAChE,EAAA,MAAM,cAAA,GAAiB,KAAK,aAAA,CAAc;AAAA,IACtC,EAAA,EACI,IAAA,KAAS,QAAA,GACH,mCAAA,GACA;AAAA,GACb,CAAA;AACD,EAAA,OAAO,UAAU,IAAA,GAAO,CAAA,EAAG,cAAc,CAAA,EAAA,EAAK,QAAA,EAAU,IAAI,CAAA,CAAA,CAAA,GAAM,cAAA;AACtE;;;;"}

package/implementation/context/PropertyFormContext.d.ts

@@ -1,25 +1,41 @@
 import { type ReactiveMap } from "@conterra/reactivity-core";
 import type { Layer } from "@open-pioneer/map";
 import type { Feature } from "ol";
-import type { Mode, PropertyFormContext } from "../../api/editor/context";
+import type { CustomFormContext, Mode } from "../../api/editor/context";
+import { FieldConfig } from "../../api/fields/FieldConfig";
 import type { ModificationStep } from "../../api/model/EditingStep";
-import type { FeatureTemplate } from "../../api/model/FeatureTemplate";
+import type { DeclarativeFormTemplate, FeatureTemplate, FormTemplate } from "../../api/model/FeatureTemplate";
 import { EditingCallbacks } from "../editor/useEditingCallbacks";
-export declare class PropertyFormContextClass implements PropertyFormContext {
-    private readonly modificationStep;
+export declare abstract class BaseFormContext {
+    #private;
     readonly callbacks: EditingCallbacks;
-    private readonly propertiesMap;
-    private readonly isValidSignal;
-    constructor(modificationStep: ModificationStep, callbacks: EditingCallbacks);
+    constructor(modificationStep: ModificationStep, callbacks: EditingCallbacks, formTemplate: FormTemplate);
     getPropertiesAsObject(): Record<string, unknown>;
     get feature(): Feature;
     get mode(): Mode;
     get editingStep(): ModificationStep;
     get properties(): ReactiveMap<string, unknown>;
-    get isValid(): boolean;
-    set isValid(value: boolean);
+    get formTemplate(): FormTemplate;
     get template(): FeatureTemplate | undefined;
     get layer(): Layer | undefined;
+    abstract get isValid(): boolean;
+    abstract get hasRequiredFields(): boolean;
     private static getPropertyEntries;
 }
-export declare const PropertyFormContextObject: import("react").Context<PropertyFormContextClass | undefined>;
+export declare class DeclarativeFormContext extends BaseFormContext {
+    #private;
+    constructor(modificationStep: ModificationStep, callbacks: EditingCallbacks, template: DeclarativeFormTemplate);
+    isFieldValid(field: FieldConfig): boolean;
+    get isValid(): boolean;
+    get formTemplate(): DeclarativeFormTemplate;
+    get hasRequiredFields(): boolean;
+}
+export declare class CustomFormContextImpl extends BaseFormContext implements CustomFormContext {
+    #private;
+    constructor(modificationStep: ModificationStep, callbacks: EditingCallbacks, template: FormTemplate);
+    get isValid(): boolean;
+    set isValid(isValid: boolean);
+    get hasRequiredFields(): boolean;
+}
+export type AnyPropertyFormContext = DeclarativeFormContext | CustomFormContextImpl;
+export declare const FormContext: import("react").Context<AnyPropertyFormContext | undefined>;

package/implementation/context/PropertyFormContext.js

@@ -1,18 +1,26 @@
-import { reactiveMap, reactive } from '@conterra/reactivity-core';
+import { reactive, reactiveMap, computed } from '@conterra/reactivity-core';
 import { createContext } from 'react';
 
-class PropertyFormContextClass {
-  constructor(modificationStep, callbacks) {
-    this.modificationStep = modificationStep;
+class BaseFormContext {
+  #propertiesMap;
+  #modificationStep;
+  #formTemplate;
+  #propsAsObject;
+  callbacks;
+  constructor(modificationStep, callbacks, formTemplate) {
+    this.#modificationStep = modificationStep;
     this.callbacks = callbacks;
-    const entries = PropertyFormContextClass.getPropertyEntries(modificationStep.feature);
-    this.propertiesMap = reactiveMap(entries);
+    this.#formTemplate = formTemplate;
+    const entries = BaseFormContext.getPropertyEntries(modificationStep.feature);
+    this.#propertiesMap = reactiveMap(entries);
+    this.#propsAsObject = computed(() => {
+      const entries2 = this.properties.entries();
+      const object = Object.fromEntries(entries2);
+      return object;
+    });
   }
-  propertiesMap;
-  isValidSignal = reactive(false);
   getPropertiesAsObject() {
-    const entries = this.properties.entries();
-    return Object.fromEntries(entries);
+    return this.#propsAsObject.value;
   }
   get feature() {
     return this.editingStep.feature;
@@ -21,16 +29,13 @@ class PropertyFormContextClass {
     return this.editingStep.id === "creation" ? "create" : "update";
   }
   get editingStep() {
-    return this.modificationStep;
+    return this.#modificationStep;
   }
   get properties() {
-    return this.propertiesMap;
+    return this.#propertiesMap;
   }
-  get isValid() {
-    return this.isValidSignal.value;
-  }
-  set isValid(value) {
-    this.isValidSignal.value = value;
+  get formTemplate() {
+    return this.#formTemplate;
   }
   get template() {
     return this.editingStep.id === "creation" ? this.editingStep.template : void 0;
@@ -44,9 +49,79 @@ class PropertyFormContextClass {
     return Object.entries(properties).filter(([key, _]) => key !== geometryName);
   }
 }
-const PropertyFormContextObject = createContext(
-  void 0
-);
+class DeclarativeFormContext extends BaseFormContext {
+  #isValid;
+  #hasRequiredFields;
+  constructor(modificationStep, callbacks, template) {
+    super(modificationStep, callbacks, template);
+    this.#isValid = computed(() => {
+      const props = this.getPropertiesAsObject();
+      return this.formTemplate.fields.every((field) => this.#isFieldValidImpl(field, props));
+    });
+    this.#hasRequiredFields = computed(() => {
+      const props = this.getPropertiesAsObject();
+      return this.formTemplate.fields.some((field) => isTrue(field.isRequired, props, false));
+    });
+  }
+  isFieldValid(field) {
+    const props = this.getPropertiesAsObject();
+    return this.#isFieldValidImpl(field, props);
+  }
+  #isFieldValidImpl(field, props) {
+    const isRequired = isTrue(field.isRequired, props, false);
+    const isPresent = props[field.propertyName] != null;
+    if (!isRequired && !isPresent) {
+      return true;
+    }
+    if (isRequired && !isPresent) {
+      return false;
+    }
+    if (!isTrue(field.isValid, props, true)) {
+      return false;
+    }
+    if (field.type === "number-field") {
+      const value = props[field.propertyName];
+      if (field.min != null && (!isPresent || value < field.min)) {
+        return false;
+      }
+      if (field.max != null && (!isPresent || value > field.max)) {
+        return false;
+      }
+    }
+    return true;
+  }
+  get isValid() {
+    return this.#isValid.value;
+  }
+  get formTemplate() {
+    return super.formTemplate;
+  }
+  get hasRequiredFields() {
+    return this.#hasRequiredFields.value;
+  }
+}
+class CustomFormContextImpl extends BaseFormContext {
+  #isValid = reactive(false);
+  constructor(modificationStep, callbacks, template) {
+    super(modificationStep, callbacks, template);
+  }
+  get isValid() {
+    return this.#isValid.value;
+  }
+  set isValid(isValid) {
+    this.#isValid.value = isValid;
+  }
+  get hasRequiredFields() {
+    return false;
+  }
+}
+const FormContext = createContext(void 0);
+function isTrue(value, properties, defaultValue) {
+  if (value == null) {
+    return defaultValue;
+  }
+  return typeof value === "function" ? value(properties) : value;
+}
 
-export { PropertyFormContextClass, PropertyFormContextObject };
+export { CustomFormContextImpl, DeclarativeFormContext, FormContext };
 //# sourceMappingURL=PropertyFormContext.js.map

package/implementation/context/PropertyFormContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"PropertyFormContext.js","sources":["PropertyFormContext.ts"],"sourcesContent":["// SPDX-FileCopyrightText: 2023-2025 Open Pioneer project (https://github.com/open-pioneer)\n// SPDX-License-Identifier: Apache-2.0\nimport { reactive, reactiveMap, type ReactiveMap } from \"@conterra/reactivity-core\";\nimport type { Layer } from \"@open-pioneer/map\";\n\nimport type { Feature } from \"ol\";\nimport { createContext } from \"react\";\n\nimport type { Mode, PropertyFormContext } from \"../../api/editor/context\";\nimport type { ModificationStep } from \"../../api/model/EditingStep\";\nimport type { FeatureTemplate } from \"../../api/model/FeatureTemplate\";\nimport { EditingCallbacks } from \"../editor/useEditingCallbacks\";\n\nexport class PropertyFormContextClass implements PropertyFormContext {\n    private readonly propertiesMap: ReactiveMap<string, unknown>;\n    private readonly isValidSignal = reactive(false);\n\n    constructor(\n        private readonly modificationStep: ModificationStep,\n        readonly callbacks: EditingCallbacks\n    ) {\n        const entries = PropertyFormContextClass.getPropertyEntries(modificationStep.feature);\n        this.propertiesMap = reactiveMap(entries);\n    }\n\n    getPropertiesAsObject(): Record<string, unknown> {\n        const entries = this.properties.entries();\n        return Object.fromEntries(entries);\n    }\n\n    get feature(): Feature {\n        return this.editingStep.feature;\n    }\n\n    get mode(): Mode {\n        return this.editingStep.id === \"creation\" ? \"create\" : \"update\";\n    }\n\n    get editingStep(): ModificationStep {\n        return this.modificationStep;\n    }\n\n    get properties(): ReactiveMap<string, unknown> {\n        return this.propertiesMap;\n    }\n\n    get isValid(): boolean {\n        return this.isValidSignal.value;\n    }\n\n    set isValid(value: boolean) {\n        this.isValidSignal.value = value;\n    }\n\n    get template(): FeatureTemplate | undefined {\n        return this.editingStep.id === \"creation\" ? this.editingStep.template : undefined;\n    }\n\n    get layer(): Layer | undefined {\n        return this.editingStep.id === \"update\" ? this.editingStep.layer : undefined;\n    }\n\n    private static getPropertyEntries(feature: Feature): [string, unknown][] {\n        const properties = feature.getProperties();\n        const geometryName = feature.getGeometryName();\n        return Object.entries(properties).filter(([key, _]) => key !== geometryName);\n    }\n}\n\nexport const PropertyFormContextObject = createContext<PropertyFormContextClass | undefined>(\n    undefined\n);\n"],"names":[],"mappings":";;;AAaO,MAAM,wBAAA,CAAwD;AAAA,EAIjE,WAAA,CACqB,kBACR,SAAA,EACX;AAFmB,IAAA,IAAA,CAAA,gBAAA,GAAA,gBAAA;AACR,IAAA,IAAA,CAAA,SAAA,GAAA,SAAA;AAET,IAAA,MAAM,OAAA,GAAU,wBAAA,CAAyB,kBAAA,CAAmB,gBAAA,CAAiB,OAAO,CAAA;AACpF,IAAA,IAAA,CAAK,aAAA,GAAgB,YAAY,OAAO,CAAA;AAAA,EAC5C;AAAA,EATiB,aAAA;AAAA,EACA,aAAA,GAAgB,SAAS,KAAK,CAAA;AAAA,EAU/C,qBAAA,GAAiD;AAC7C,IAAA,MAAM,OAAA,GAAU,IAAA,CAAK,UAAA,CAAW,OAAA,EAAQ;AACxC,IAAA,OAAO,MAAA,CAAO,YAAY,OAAO,CAAA;AAAA,EACrC;AAAA,EAEA,IAAI,OAAA,GAAmB;AACnB,IAAA,OAAO,KAAK,WAAA,CAAY,OAAA;AAAA,EAC5B;AAAA,EAEA,IAAI,IAAA,GAAa;AACb,IAAA,OAAO,IAAA,CAAK,WAAA,CAAY,EAAA,KAAO,UAAA,GAAa,QAAA,GAAW,QAAA;AAAA,EAC3D;AAAA,EAEA,IAAI,WAAA,GAAgC;AAChC,IAAA,OAAO,IAAA,CAAK,gBAAA;AAAA,EAChB;AAAA,EAEA,IAAI,UAAA,GAA2C;AAC3C,IAAA,OAAO,IAAA,CAAK,aAAA;AAAA,EAChB;AAAA,EAEA,IAAI,OAAA,GAAmB;AACnB,IAAA,OAAO,KAAK,aAAA,CAAc,KAAA;AAAA,EAC9B;AAAA,EAEA,IAAI,QAAQ,KAAA,EAAgB;AACxB,IAAA,IAAA,CAAK,cAAc,KAAA,GAAQ,KAAA;AAAA,EAC/B;AAAA,EAEA,IAAI,QAAA,GAAwC;AACxC,IAAA,OAAO,KAAK,WAAA,CAAY,EAAA,KAAO,UAAA,GAAa,IAAA,CAAK,YAAY,QAAA,GAAW,MAAA;AAAA,EAC5E;AAAA,EAEA,IAAI,KAAA,GAA2B;AAC3B,IAAA,OAAO,KAAK,WAAA,CAAY,EAAA,KAAO,QAAA,GAAW,IAAA,CAAK,YAAY,KAAA,GAAQ,MAAA;AAAA,EACvE;AAAA,EAEA,OAAe,mBAAmB,OAAA,EAAuC;AACrE,IAAA,MAAM,UAAA,GAAa,QAAQ,aAAA,EAAc;AACzC,IAAA,MAAM,YAAA,GAAe,QAAQ,eAAA,EAAgB;AAC7C,IAAA,OAAO,MAAA,CAAO,OAAA,CAAQ,UAAU,CAAA,CAAE,MAAA,CAAO,CAAC,CAAC,GAAA,EAAK,CAAC,CAAA,KAAM,GAAA,KAAQ,YAAY,CAAA;AAAA,EAC/E;AACJ;AAEO,MAAM,yBAAA,GAA4B,aAAA;AAAA,EACrC;AACJ;;;;"}
+{"version":3,"file":"PropertyFormContext.js","sources":["PropertyFormContext.ts"],"sourcesContent":["// SPDX-FileCopyrightText: 2023-2025 Open Pioneer project (https://github.com/open-pioneer)\n// SPDX-License-Identifier: Apache-2.0\nimport {\n    computed,\n    reactive,\n    reactiveMap,\n    ReadonlyReactive,\n    type ReactiveMap\n} from \"@conterra/reactivity-core\";\nimport type { Layer } from \"@open-pioneer/map\";\nimport type { Feature } from \"ol\";\nimport { createContext } from \"react\";\nimport type { CustomFormContext, Mode } from \"../../api/editor/context\";\nimport { PropertyFunctionOr } from \"../../api/fields/BaseFieldConfig\";\nimport { FieldConfig } from \"../../api/fields/FieldConfig\";\nimport type { ModificationStep } from \"../../api/model/EditingStep\";\nimport type {\n    DeclarativeFormTemplate,\n    FeatureTemplate,\n    FormTemplate\n} from \"../../api/model/FeatureTemplate\";\nimport { EditingCallbacks } from \"../editor/useEditingCallbacks\";\n\nexport abstract class BaseFormContext {\n    readonly #propertiesMap: ReactiveMap<string, unknown>;\n    readonly #modificationStep: ModificationStep;\n    readonly #formTemplate: FormTemplate;\n    readonly #propsAsObject: ReadonlyReactive<Record<string, unknown>>;\n\n    readonly callbacks: EditingCallbacks;\n\n    constructor(\n        modificationStep: ModificationStep,\n        callbacks: EditingCallbacks,\n        formTemplate: FormTemplate\n    ) {\n        this.#modificationStep = modificationStep;\n        this.callbacks = callbacks;\n        this.#formTemplate = formTemplate;\n\n        const entries = BaseFormContext.getPropertyEntries(modificationStep.feature);\n        this.#propertiesMap = reactiveMap(entries);\n        this.#propsAsObject = computed(() => {\n            const entries = this.properties.entries();\n            const object = Object.fromEntries(entries);\n            return object;\n        });\n    }\n\n    getPropertiesAsObject(): Record<string, unknown> {\n        return this.#propsAsObject.value;\n    }\n\n    get feature(): Feature {\n        return this.editingStep.feature;\n    }\n\n    get mode(): Mode {\n        return this.editingStep.id === \"creation\" ? \"create\" : \"update\";\n    }\n\n    get editingStep(): ModificationStep {\n        return this.#modificationStep;\n    }\n\n    get properties(): ReactiveMap<string, unknown> {\n        return this.#propertiesMap;\n    }\n\n    get formTemplate(): FormTemplate {\n        return this.#formTemplate;\n    }\n\n    get template(): FeatureTemplate | undefined {\n        return this.editingStep.id === \"creation\" ? this.editingStep.template : undefined;\n    }\n\n    get layer(): Layer | undefined {\n        return this.editingStep.id === \"update\" ? this.editingStep.layer : undefined;\n    }\n\n    abstract get isValid(): boolean;\n    abstract get hasRequiredFields(): boolean;\n\n    private static getPropertyEntries(feature: Feature): [string, unknown][] {\n        const properties = feature.getProperties();\n        const geometryName = feature.getGeometryName();\n        return Object.entries(properties).filter(([key, _]) => key !== geometryName);\n    }\n}\n\nexport class DeclarativeFormContext extends BaseFormContext {\n    readonly #isValid: ReadonlyReactive<boolean>;\n    readonly #hasRequiredFields: ReadonlyReactive<boolean>;\n\n    constructor(\n        modificationStep: ModificationStep,\n        callbacks: EditingCallbacks,\n        template: DeclarativeFormTemplate\n    ) {\n        super(modificationStep, callbacks, template);\n\n        this.#isValid = computed(() => {\n            const props = this.getPropertiesAsObject();\n            return this.formTemplate.fields.every((field) => this.#isFieldValidImpl(field, props));\n        });\n        this.#hasRequiredFields = computed(() => {\n            const props = this.getPropertiesAsObject();\n            return this.formTemplate.fields.some((field) => isTrue(field.isRequired, props, false));\n        });\n    }\n\n    isFieldValid(field: FieldConfig) {\n        const props = this.getPropertiesAsObject();\n        return this.#isFieldValidImpl(field, props);\n    }\n\n    #isFieldValidImpl(field: FieldConfig, props: Record<string, unknown>) {\n        const isRequired = isTrue(field.isRequired, props, false);\n        const isPresent = props[field.propertyName] != null;\n        if (!isRequired && !isPresent) {\n            return true;\n        }\n\n        if (isRequired && !isPresent) {\n            return false;\n        }\n\n        // Perform user-defined validation first.\n        if (!isTrue(field.isValid, props, true)) {\n            return false;\n        }\n\n        // Fallback/default validation for builtin rules.\n        if (field.type === \"number-field\") {\n            const value = props[field.propertyName] as number | undefined;\n            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n            if (field.min != null && (!isPresent || value! < field.min)) {\n                return false;\n            }\n            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n            if (field.max != null && (!isPresent || value! > field.max)) {\n                return false;\n            }\n        }\n\n        return true;\n    }\n\n    get isValid(): boolean {\n        return this.#isValid.value;\n    }\n\n    override get formTemplate(): DeclarativeFormTemplate {\n        // See constructor\n        return super.formTemplate as DeclarativeFormTemplate;\n    }\n\n    get hasRequiredFields(): boolean {\n        return this.#hasRequiredFields.value;\n    }\n}\n\nexport class CustomFormContextImpl extends BaseFormContext implements CustomFormContext {\n    readonly #isValid = reactive(false);\n\n    constructor(\n        modificationStep: ModificationStep,\n        callbacks: EditingCallbacks,\n        template: FormTemplate\n    ) {\n        super(modificationStep, callbacks, template);\n    }\n\n    get isValid(): boolean {\n        return this.#isValid.value;\n    }\n\n    set isValid(isValid: boolean) {\n        this.#isValid.value = isValid;\n    }\n\n    get hasRequiredFields(): boolean {\n        return false;\n    }\n}\n\nexport type AnyPropertyFormContext = DeclarativeFormContext | CustomFormContextImpl;\n\nexport const FormContext = createContext<AnyPropertyFormContext | undefined>(undefined);\n\nfunction isTrue(\n    value: PropertyFunctionOr<boolean> | undefined,\n    properties: Record<string, unknown>,\n    defaultValue: boolean\n): boolean {\n    if (value == null) {\n        return defaultValue;\n    }\n    return typeof value === \"function\" ? value(properties) : value;\n}\n"],"names":["entries"],"mappings":"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"}

package/implementation/context/usePropertyFormContext.d.ts

@@ -1,2 +1,17 @@
-import { type PropertyFormContextClass } from "./PropertyFormContext";
-export declare function usePropertyFormContext(): PropertyFormContextClass;
+import { CustomFormContextImpl, DeclarativeFormContext, type AnyPropertyFormContext } from "./PropertyFormContext";
+/**
+ * Used by the property editor, internally.
+ *
+ * @internal
+ */
+export declare function usePropertyFormContext(): AnyPropertyFormContext;
+/**
+ * Used by the property editor, internally.
+ *
+ * @internal
+ */
+export declare function useDeclarativeFormContext(): DeclarativeFormContext;
+/**
+ * Used for custom form contents.
+ */
+export declare function useCustomFormContext(): CustomFormContextImpl;

package/implementation/context/usePropertyFormContext.js

@@ -1,14 +1,28 @@
 import { useContext } from 'react';
-import { PropertyFormContextObject } from './PropertyFormContext.js';
+import { CustomFormContextImpl, FormContext, DeclarativeFormContext } from './PropertyFormContext.js';
 
 function usePropertyFormContext() {
-  const context = useContext(PropertyFormContextObject);
+  const context = useContext(FormContext);
   if (context != null) {
     return context;
   } else {
     throw new Error("No property form context available");
   }
 }
+function useDeclarativeFormContext() {
+  const value = usePropertyFormContext();
+  if (!(value instanceof DeclarativeFormContext)) {
+    throw new Error("No declarative form context available");
+  }
+  return value;
+}
+function useCustomFormContext() {
+  const value = usePropertyFormContext();
+  if (!(value instanceof CustomFormContextImpl)) {
+    throw new Error("No custom form context available");
+  }
+  return value;
+}
 
-export { usePropertyFormContext };
+export { useCustomFormContext, useDeclarativeFormContext, usePropertyFormContext };
 //# sourceMappingURL=usePropertyFormContext.js.map

package/implementation/context/usePropertyFormContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"usePropertyFormContext.js","sources":["usePropertyFormContext.ts"],"sourcesContent":["// SPDX-FileCopyrightText: 2023-2025 Open Pioneer project (https://github.com/open-pioneer)\n// SPDX-License-Identifier: Apache-2.0\nimport { useContext } from \"react\";\nimport { PropertyFormContextObject, type PropertyFormContextClass } from \"./PropertyFormContext\";\n\nexport function usePropertyFormContext(): PropertyFormContextClass {\n    const context = useContext(PropertyFormContextObject);\n    if (context != null) {\n        return context;\n    } else {\n        throw new Error(\"No property form context available\");\n    }\n}\n"],"names":[],"mappings":";;;AAKO,SAAS,sBAAA,GAAmD;AAC/D,EAAA,MAAM,OAAA,GAAU,WAAW,yBAAyB,CAAA;AACpD,EAAA,IAAI,WAAW,IAAA,EAAM;AACjB,IAAA,OAAO,OAAA;AAAA,EACX,CAAA,MAAO;AACH,IAAA,MAAM,IAAI,MAAM,oCAAoC,CAAA;AAAA,EACxD;AACJ;;;;"}
+{"version":3,"file":"usePropertyFormContext.js","sources":["usePropertyFormContext.ts"],"sourcesContent":["// SPDX-FileCopyrightText: 2023-2025 Open Pioneer project (https://github.com/open-pioneer)\n// SPDX-License-Identifier: Apache-2.0\nimport { useContext } from \"react\";\nimport {\n    CustomFormContextImpl,\n    DeclarativeFormContext,\n    FormContext,\n    type AnyPropertyFormContext\n} from \"./PropertyFormContext\";\n\n/**\n * Used by the property editor, internally.\n *\n * @internal\n */\nexport function usePropertyFormContext(): AnyPropertyFormContext {\n    const context = useContext(FormContext);\n    if (context != null) {\n        return context;\n    } else {\n        throw new Error(\"No property form context available\");\n    }\n}\n\n/**\n * Used by the property editor, internally.\n *\n * @internal\n */\nexport function useDeclarativeFormContext(): DeclarativeFormContext {\n    const value = usePropertyFormContext();\n    if (!(value instanceof DeclarativeFormContext)) {\n        throw new Error(\"No declarative form context available\");\n    }\n    return value;\n}\n\n/**\n * Used for custom form contents.\n */\nexport function useCustomFormContext(): CustomFormContextImpl {\n    const value = usePropertyFormContext();\n    if (!(value instanceof CustomFormContextImpl)) {\n        throw new Error(\"No custom form context available\");\n    }\n    return value;\n}\n"],"names":[],"mappings":";;;AAeO,SAAS,sBAAA,GAAiD;AAC7D,EAAA,MAAM,OAAA,GAAU,WAAW,WAAW,CAAA;AACtC,EAAA,IAAI,WAAW,IAAA,EAAM;AACjB,IAAA,OAAO,OAAA;AAAA,EACX,CAAA,MAAO;AACH,IAAA,MAAM,IAAI,MAAM,oCAAoC,CAAA;AAAA,EACxD;AACJ;AAOO,SAAS,yBAAA,GAAoD;AAChE,EAAA,MAAM,QAAQ,sBAAA,EAAuB;AACrC,EAAA,IAAI,EAAE,iBAAiB,sBAAA,CAAA,EAAyB;AAC5C,IAAA,MAAM,IAAI,MAAM,uCAAuC,CAAA;AAAA,EAC3D;AACA,EAAA,OAAO,KAAA;AACX;AAKO,SAAS,oBAAA,GAA8C;AAC1D,EAAA,MAAM,QAAQ,sBAAA,EAAuB;AACrC,EAAA,IAAI,EAAE,iBAAiB,qBAAA,CAAA,EAAwB;AAC3C,IAAA,MAAM,IAAI,MAAM,kCAAkC,CAAA;AAAA,EACtD;AACA,EAAA,OAAO,KAAA;AACX;;;;"}

package/implementation/geometry-editing/controller/EditingController.js

@@ -13,6 +13,9 @@ class EditingController {
     this.layerFactory = layerFactory;
     this.tooltipMessages = tooltipMessages;
   }
+  mapModel;
+  layerFactory;
+  tooltipMessages;
   currentInteractions = [];
   snappingSources = [];
   interactionOptions = {};