#5200 – the users choice is not saved in the settings but is recalcul…

…ated in px (#5302)

- added options to save selected measurement units
- updated to use enum for units & shapshot updates

---------

Co-authored-by: Mikhail Vialov <mikhail_vialov@epam.com>

packages/ketcher-react/src/script/ui/component/form/MeasureInput/measure-input.jsx

@@ -21,50 +21,56 @@ import Input from '../Input/Input';
 import Select from '../Select';
 import styles from './measure-input.module.less';
 import { getSelectOptionsFromSchema } from '../../../utils';
+import { MeasurementUnits } from 'src/script/ui/data/schema/options-schema';
 
 const selectOptions = getSelectOptionsFromSchema({
-  enum: ['cm', 'px', 'pt', 'inch'],
+  enum: Object.values(MeasurementUnits),
 });
 
 const MeasureInput = ({
   schema,
+  extraSchema,
   value,
+  extraValue,
   onChange,
+  onExtraChange,
   name,
   className,
   ...rest
 }) => {
-  const [measure, setMeasure] = useState('px');
+  const [measure, setMeasure] = useState(
+    extraValue || extraSchema?.default || MeasurementUnits.Px,
+  );
   const [cust, setCust] = useState(value || schema.default);
 
   useEffect(() => {
-    if (measure === 'px' && cust?.toFixed() - 0 !== value) {
-      setMeasure('px');
+    if (measure === MeasurementUnits.Px && cust?.toFixed() - 0 !== value) {
+      setMeasure(MeasurementUnits.Px);
       setCust(value);
     } // Hack: Set init value (RESET)
   }, []);
 
+  useEffect(() => {
+    setMeasure(extraValue);
+  }, [extraValue]);
+
   const handleChange = (value) => {
-    const convValue = convertValue(value, measure, 'px');
+    const convValue = convertValue(value, measure, MeasurementUnits.Px);
     setCust(value);
     onChange(convValue);
   };
 
-  const handleMeasChange = (m) => {
+  const handleMeasChange = (unit) => {
     setCust((prev) => {
-      convertValue(prev, measure, m);
+      convertValue(prev, measure, unit);
     });
-    setMeasure(m);
-  };
-
-  const calcValue = () => {
-    const newValue = convertValue(value, 'px', measure);
-    setCust(newValue);
+    setMeasure(unit);
+    onExtraChange(unit);
   };
 
   useEffect(() => {
-    calcValue();
-  }, [value, measure, calcValue]);
+    setCust(convertValue(value, MeasurementUnits.Px, measure));
+  }, [value, measure]);
 
   const desc = schema || schema.properties[name];
 
@@ -74,7 +80,11 @@ const MeasureInput = ({
       <div style={{ display: 'flex' }}>
         <Input
           schema={schema}
-          step={measure === 'px' || measure === 'pt' ? '1' : '0.001'}
+          step={
+            measure === MeasurementUnits.Px || measure === MeasurementUnits.Pt
+              ? '1'
+              : '0.001'
+          }
           value={cust}
           onChange={handleChange}
         />
@@ -99,7 +109,7 @@ const measureMap = {
 function convertValue(value, measureFrom, measureTo) {
   if ((!value && value !== 0) || isNaN(value)) return null; // eslint-disable-line
 
-  return measureTo === 'px' || measureTo === 'pt'
+  return measureTo === MeasurementUnits.Px || measureTo === MeasurementUnits.Pt
     ? ((value * measureMap[measureFrom]) / measureMap[measureTo]).toFixed() - 0
     : ((value * measureMap[measureFrom]) / measureMap[measureTo]).toFixed(3) -
         0;

packages/ketcher-react/src/script/ui/component/form/form/form.jsx

@@ -71,18 +71,23 @@ class Form extends Component {
     onUpdate(instance, valid, errs);
   }
 
-  field(name, onChange) {
+  field(name, onChange, extraName) {
     const { result, errors } = this.props;
     const value = result[name];
+    const extraValue = extraName ? result[extraName] : null;
+
+    const handleOnChange = (name, value) => {
+      const newState = Object.assign({}, this.props.result, { [name]: value });
+      this.updateState(newState);
+      if (onChange) onChange(value);
+    };
 
     return {
       dataError: errors && errors[name],
       value,
-      onChange: (val) => {
-        const newState = Object.assign({}, this.props.result, { [name]: val });
-        this.updateState(newState);
-        if (onChange) onChange(val);
-      },
+      extraValue,
+      onChange: (val) => handleOnChange(name, val),
+      onExtraChange: (val) => handleOnChange(extraName, val),
     };
   }
 
@@ -126,7 +131,8 @@ function Label({ labelPos, title, children, ...props }) {
 }
 
 function Field(props) {
-  const { name, onChange, component, labelPos, className, ...rest } = props;
+  const { name, extraName, onChange, component, labelPos, className, ...rest } =
+    props;
   const [anchorEl, setAnchorEl] = useState(null);
   const handlePopoverOpen = useCallback((event) => {
     setAnchorEl(event.currentTarget);
@@ -136,13 +142,22 @@ function Field(props) {
   }, []);
   const { schema, stateStore } = useFormContext();
   const desc = rest.schema || schema.properties[name];
-  const { dataError, ...fieldOpts } = stateStore.field(name, onChange);
+  const { dataError, onExtraChange, extraValue, ...fieldOpts } =
+    stateStore.field(name, onChange, extraName);
+
+  const getExtraSchema = () => {
+    return rest.extraSchema || schema.properties[extraName];
+  };
+
   const Component = component;
   const formField = component ? (
     <Component
       name={name}
       schema={desc}
       className={className}
+      onExtraChange={onExtraChange}
+      extraValue={extraValue}
+      {...(extraName && { extraSchema: getExtraSchema() })}
       {...fieldOpts}
       {...rest}
     />

packages/ketcher-react/src/script/ui/data/schema/options-schema.ts

@@ -28,6 +28,13 @@ type ExtendedSchema = SchemaObject & {
   default?: any;
 };
 
+export enum MeasurementUnits {
+  Px = 'px',
+  Cm = 'cm',
+  Pt = 'pt',
+  Inch = 'inch',
+}
+
 const editor: {
   resetToSelect: ExtendedSchema;
   rotationStep: ExtendedSchema;
@@ -64,15 +71,20 @@ const render: {
   orFlagLabel: ExtendedSchema;
   font: ExtendedSchema;
   fontsz: ExtendedSchema;
+  fontszUnit: ExtendedSchema;
   fontszsub: ExtendedSchema;
+  fontszsubUnit: ExtendedSchema;
   carbonExplicitly: ExtendedSchema;
   showCharge: ExtendedSchema;
   showValence: ExtendedSchema;
   showHydrogenLabels: ExtendedSchema;
   aromaticCircle: ExtendedSchema;
   doubleBondWidth: ExtendedSchema;
+  doubleBondWidthUnit: ExtendedSchema;
   bondThickness: ExtendedSchema;
+  bondThicknessUnit: ExtendedSchema;
   stereoBondWidth: ExtendedSchema;
+  stereoBondWidthUnit: ExtendedSchema;
 } = {
   showValenceWarnings: {
     title: 'Show valence warnings',
@@ -173,13 +185,25 @@ const render: {
     minimum: 1,
     maximum: 96,
   },
+  fontszUnit: {
+    title: 'Font size unit',
+    enum: Object.values(MeasurementUnits),
+    enumNames: Object.values(MeasurementUnits),
+    default: MeasurementUnits.Px,
+  },
   fontszsub: {
     title: 'Sub font size',
     type: 'integer',
     default: 13,
     minimum: 1,
     maximum: 96,
   },
+  fontszsubUnit: {
+    title: 'Sub font size unit',
+    enum: Object.values(MeasurementUnits),
+    enumNames: Object.values(MeasurementUnits),
+    default: MeasurementUnits.Px,
+  },
   // Atom
   carbonExplicitly: {
     title: 'Display carbon explicitly',
@@ -219,20 +243,38 @@ const render: {
     minimum: 1,
     maximum: 96,
   },
+  doubleBondWidthUnit: {
+    title: 'Double bond width unit',
+    enum: Object.values(MeasurementUnits),
+    enumNames: Object.values(MeasurementUnits),
+    default: MeasurementUnits.Px,
+  },
   bondThickness: {
     title: 'Bond thickness',
     type: 'integer',
     default: defaultBondThickness,
     minimum: 1,
     maximum: 96,
   },
+  bondThicknessUnit: {
+    title: 'Bond thickness unit',
+    enum: Object.values(MeasurementUnits),
+    enumNames: Object.values(MeasurementUnits),
+    default: MeasurementUnits.Px,
+  },
   stereoBondWidth: {
     title: 'Stereo (Wedge) bond width',
     type: 'integer',
     default: 6,
     minimum: 1,
     maximum: 96,
   },
+  stereoBondWidthUnit: {
+    title: 'Stereo (Wedge) bond width unit',
+    enum: Object.values(MeasurementUnits),
+    enumNames: Object.values(MeasurementUnits),
+    default: MeasurementUnits.Px,
+  },
 };
 
 const server: {

packages/ketcher-react/src/script/ui/views/modal/components/meta/Settings/Settings.tsx

@@ -153,8 +153,18 @@ const SettingsDialog = (props: Props) => {
         <Field name="showValenceWarnings" />
         <Field name="atomColoring" />
         <Field name="font" component={SystemFonts} data-testid="font" />
-        <Field name="fontsz" component={MeasureInput} labelPos={false} />
-        <Field name="fontszsub" component={MeasureInput} labelPos={false} />
+        <Field
+          name="fontsz"
+          component={MeasureInput}
+          labelPos={false}
+          extraName="fontszUnit"
+        />
+        <Field
+          name="fontszsub"
+          component={MeasureInput}
+          labelPos={false}
+          extraName="fontszsubUnit"
+        />
       </fieldset>
     ),
   };
@@ -222,12 +232,19 @@ const SettingsDialog = (props: Props) => {
           name="doubleBondWidth"
           component={MeasureInput}
           labelPos={false}
+          extraName="doubleBondWidthUnit"
+        />
+        <Field
+          name="bondThickness"
+          component={MeasureInput}
+          labelPos={false}
+          extraName="bondThicknessUnit"
         />
-        <Field name="bondThickness" component={MeasureInput} labelPos={false} />
         <Field
           name="stereoBondWidth"
           component={MeasureInput}
           labelPos={false}
+          extraName="stereoBondWidthUnit"
         />
       </fieldset>
     ),