From fcd09f481a671b98607cad381af6d86c4227bcf6 Mon Sep 17 00:00:00 2001 From: Misha Date: Fri, 16 Aug 2024 13:36:28 +0200 Subject: [PATCH] =?UTF-8?q?#5200=20=E2=80=93=20the=20users=20choice=20is?= =?UTF-8?q?=20not=20saved=20in=20the=20settings=20but=20is=20recalculated?= =?UTF-8?q?=20in=20px=20(#5302)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - added options to save selected measurement units - updated to use enum for units & shapshot updates --------- Co-authored-by: Mikhail Vialov --- ...quence-30-Cycled-RNAs-1-chromium-linux.png | Bin 6838 -> 6243 bytes .../form/MeasureInput/measure-input.jsx | 44 +++++++++++------- .../script/ui/component/form/form/form.jsx | 31 ++++++++---- .../script/ui/data/schema/options-schema.ts | 42 +++++++++++++++++ .../components/meta/Settings/Settings.tsx | 23 +++++++-- 5 files changed, 112 insertions(+), 28 deletions(-) diff --git a/ketcher-autotests/tests/Macromolecule-editor/Import-Saving-Files/import-saving-helm.spec.ts-snapshots/Import-correct-HELM-sequence-30-Cycled-RNAs-1-chromium-linux.png b/ketcher-autotests/tests/Macromolecule-editor/Import-Saving-Files/import-saving-helm.spec.ts-snapshots/Import-correct-HELM-sequence-30-Cycled-RNAs-1-chromium-linux.png index 1f934096eb0dca496e1784856c9edac67042728d..8a62db9d808b45b28cdc7c3786ca3bfbd69855c1 100644 GIT binary patch literal 6243 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 Mb>|;z>;fPD6Wv(wYybcN literal 6838 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 diff --git a/packages/ketcher-react/src/script/ui/component/form/MeasureInput/measure-input.jsx b/packages/ketcher-react/src/script/ui/component/form/MeasureInput/measure-input.jsx index 0bd5e6a802..8b552b409e 100644 --- a/packages/ketcher-react/src/script/ui/component/form/MeasureInput/measure-input.jsx +++ b/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 = ({
@@ -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; diff --git a/packages/ketcher-react/src/script/ui/component/form/form/form.jsx b/packages/ketcher-react/src/script/ui/component/form/form/form.jsx index c53372145e..b19efcb77b 100644 --- a/packages/ketcher-react/src/script/ui/component/form/form/form.jsx +++ b/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 ? ( diff --git a/packages/ketcher-react/src/script/ui/data/schema/options-schema.ts b/packages/ketcher-react/src/script/ui/data/schema/options-schema.ts index 1923091188..2ac875a2d7 100644 --- a/packages/ketcher-react/src/script/ui/data/schema/options-schema.ts +++ b/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,6 +185,12 @@ 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', @@ -180,6 +198,12 @@ const render: { 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,6 +243,12 @@ 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', @@ -226,6 +256,12 @@ const render: { 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', @@ -233,6 +269,12 @@ const render: { minimum: 1, maximum: 96, }, + stereoBondWidthUnit: { + title: 'Stereo (Wedge) bond width unit', + enum: Object.values(MeasurementUnits), + enumNames: Object.values(MeasurementUnits), + default: MeasurementUnits.Px, + }, }; const server: { diff --git a/packages/ketcher-react/src/script/ui/views/modal/components/meta/Settings/Settings.tsx b/packages/ketcher-react/src/script/ui/views/modal/components/meta/Settings/Settings.tsx index 828df8df8f..751a040955 100644 --- a/packages/ketcher-react/src/script/ui/views/modal/components/meta/Settings/Settings.tsx +++ b/packages/ketcher-react/src/script/ui/views/modal/components/meta/Settings/Settings.tsx @@ -153,8 +153,18 @@ const SettingsDialog = (props: Props) => { - - + + ), }; @@ -222,12 +232,19 @@ const SettingsDialog = (props: Props) => { name="doubleBondWidth" component={MeasureInput} labelPos={false} + extraName="doubleBondWidthUnit" + /> + - ),