feat: implement floating point number field

packages/form-js-editor/package.json

@@ -45,6 +45,7 @@
     "@bpmn-io/form-js-viewer": "^0.10.0-alpha.1",
     "@bpmn-io/properties-panel": "^0.25.0",
     "array-move": "^3.0.1",
+    "big.js": "^6.2.1",
     "dragula": "^3.7.3",
     "ids": "^1.0.0",
     "min-dash": "^4.0.0",

packages/form-js-editor/rollup.config.js

@@ -57,6 +57,7 @@ export default [
       'ids',
       'min-dash',
       'array-move',
+      'big.js',
       'preact',
       'preact/jsx-runtime',
       'preact/hooks',

packages/form-js-editor/src/features/properties-panel/PropertiesPanel.js

@@ -15,6 +15,7 @@ import {
   ConditionGroup,
   CustomValuesGroup,
   GeneralGroup,
+  SerializationGroup,
   ValidationGroup,
   ValuesGroups
 } from './groups';
@@ -28,6 +29,7 @@ function getGroups(field, editField) {
   const groups = [
     GeneralGroup(field, editField),
     ConditionGroup(field, editField),
+    SerializationGroup(field, editField),
     ...ValuesGroups(field, editField),
     ValidationGroup(field, editField),
     CustomValuesGroup(field, editField)

packages/form-js-editor/src/features/properties-panel/Util.js

@@ -1,3 +1,5 @@
+import Big from 'big.js';
+
 export function arrayAdd(array, index, item) {
   const copy = [ ...array ];
 
@@ -18,6 +20,17 @@ export function prefixId(id) {
   return `fjs-properties-panel-${ id }`;
 }
 
+
+export function countDecimals(number) {
+  const num = Big(number);
+  if (num.toString() === num.toFixed(0)) return 0;
+  return num.toFixed().split('.')[1].length || 0;
+}
+
+export function isValidNumber(value) {
+  return (typeof value === 'number' || typeof value === 'string') && value !== '' && !isNaN(Number(value));
+}
+
 export function stopPropagation(listener) {
   return (event) => {
     event.stopPropagation();

packages/form-js-editor/src/features/properties-panel/entries/DefaultValueEntry.js

@@ -1,20 +1,19 @@
 import {
-  isNumberFieldEntryEdited,
   isSelectEntryEdited,
   isTextFieldEntryEdited,
   isTextAreaEntryEdited,
-  NumberFieldEntry,
   SelectEntry,
   TextFieldEntry,
   TextAreaEntry
 } from '@bpmn-io/properties-panel';
 
 import { get } from 'min-dash';
 
-import { useService } from '../hooks';
+import Big from 'big.js';
 
-import { INPUTS, VALUES_INPUTS } from '../Util';
+import { useService } from '../hooks';
 
+import { countDecimals, INPUTS, isValidNumber, VALUES_INPUTS } from '../Util';
 
 export default function DefaultOptionEntry(props) {
   const {
@@ -52,7 +51,7 @@ export default function DefaultOptionEntry(props) {
     entries.push({
       ...defaultOptions,
       component: DefaultValueNumber,
-      isEdited: isNumberFieldEntryEdited
+      isEdited: isTextFieldEntryEdited
     });
   }
 
@@ -138,25 +137,50 @@ function DefaultValueNumber(props) {
     label
   } = props;
 
+  const {
+    decimalDigits,
+    serializeToString = false
+  } = field;
+
   const debounce = useService('debounce');
 
   const path = [ 'defaultValue' ];
 
-  const getValue = () => {
-    return get(field, path, '');
+  const getValue = (e) => {
+
+    let value = get(field, path);
+
+    if (!isValidNumber(value)) return;
+
+    // Enforces decimal notation so that we do not submit defaults in exponent form
+    return serializeToString ? Big(value).toFixed() : value;
   };
 
   const setValue = (value) => {
-    return editField(field, path, value);
+
+    let newValue;
+
+    if (isValidNumber(value)) {
+      newValue = serializeToString ? value : Number(value);
+    }
+
+    return editField(field, path, newValue);
   };
 
-  return NumberFieldEntry({
+  const decimalDigitsSet = decimalDigits || decimalDigits === 0;
+
+  return TextFieldEntry({
     debounce,
+    label,
     element: field,
     getValue,
     id,
-    label,
-    setValue
+    setValue,
+    validate: (value) => {
+      if (value === undefined || value === null) return;
+      if (!isValidNumber(value)) return 'Should be a valid number';
+      if (decimalDigitsSet && countDecimals(value) > decimalDigits) return `Should not contain more than ${decimalDigits} decimal digits`;
+    }
   });
 }
 

packages/form-js-editor/src/features/properties-panel/entries/NumberEntries.js

@@ -0,0 +1,123 @@
+import { NumberFieldEntry, isNumberFieldEntryEdited, TextFieldEntry, isTextFieldEntryEdited } from '@bpmn-io/properties-panel';
+
+import Big from 'big.js';
+import { get } from 'min-dash';
+import { useService } from '../hooks';
+import { countDecimals, isValidNumber } from '../Util';
+
+export default function NumberEntries(props) {
+  const {
+    editField,
+    field,
+    id
+  } = props;
+
+  const {
+    type
+  } = field;
+
+  if (type !== 'number') {
+    return [];
+  }
+
+  const entries = [];
+
+  entries.push({
+    id: id + '-decimalDigits',
+    component: NumberDecimalDigits,
+    isEdited: isNumberFieldEntryEdited,
+    editField,
+    field
+  });
+
+  entries.push({
+    id: id + '-step',
+    component: NumberArrowStep,
+    isEdited: isTextFieldEntryEdited,
+    editField,
+    field
+  });
+
+  return entries;
+}
+
+function NumberDecimalDigits(props) {
+
+  const {
+    editField,
+    field,
+    id
+  } = props;
+
+  const debounce = useService('debounce');
+
+  const getValue = (e) => get(field, [ 'decimalDigits' ]);
+
+  const setValue = (value) => editField(field, [ 'decimalDigits' ], value);
+
+  return NumberFieldEntry({
+    debounce,
+    label: 'Decimal digits',
+    element: field,
+    min: 0,
+    step: 1,
+    getValue,
+    id,
+    setValue
+  });
+
+}
+
+function NumberArrowStep(props) {
+
+  const {
+    editField,
+    field,
+    id
+  } = props;
+
+  const {
+    decimalDigits
+  } = field;
+
+  const debounce = useService('debounce');
+
+  const getValue = (e) => {
+
+    let value = get(field, [ 'increment' ]);
+
+    if (!isValidNumber(value)) return null;
+
+    return value;
+  };
+
+  const setValue = (value) => editField(field, [ 'increment' ], value);
+
+  const decimalDigitsSet = decimalDigits || decimalDigits === 0;
+
+  return TextFieldEntry({
+    debounce,
+    label: 'Increment',
+    element: field,
+    getValue,
+    id,
+    setValue,
+    validate: (value) => {
+
+      if (value === undefined || value === null) return;
+
+      if (!isValidNumber(value)) return 'Should be a valid number.';
+
+      if (Big(value).cmp(0) <= 0) return 'Should be greater than zero.';
+
+      if (decimalDigitsSet) {
+        const minimumValue = Big(`1e-${decimalDigits}`);
+
+        if (Big(value).cmp(minimumValue) < 0) return `Should be at least ${minimumValue.toString()}.`;
+        if (countDecimals(value) > decimalDigits) return `Should not contain more than ${decimalDigits} decimal digits.`;
+
+      }
+    }
+  });
+
+}