From 3be35f3464e1e7072013a47e929bd30fa8d36583 Mon Sep 17 00:00:00 2001 From: Mikhail Vialov Date: Wed, 14 Aug 2024 16:15:01 +0200 Subject: [PATCH] #5200 -- measure units are saved into global state --- .../src/application/render/restruct/reatom.ts | 7 ++++ .../form/MeasureInput/measure-input.jsx | 27 ++++++++------ .../script/ui/component/form/form/form.jsx | 31 +++++++++++----- .../script/ui/data/schema/options-schema.ts | 36 +++++++++++++++++++ .../components/meta/Settings/Settings.tsx | 23 ++++++++++-- 5 files changed, 102 insertions(+), 22 deletions(-) diff --git a/packages/ketcher-core/src/application/render/restruct/reatom.ts b/packages/ketcher-core/src/application/render/restruct/reatom.ts index 61fb8ad749..6380c3cd07 100644 --- a/packages/ketcher-core/src/application/render/restruct/reatom.ts +++ b/packages/ketcher-core/src/application/render/restruct/reatom.ts @@ -61,6 +61,13 @@ export enum ShowHydrogenLabels { On = 'all', } +export enum MeasurementUnits { + Px = 'px', + Cm = 'cm', + Pt = 'pt', + Inch = 'inch', +} + export enum ShowHydrogenLabelNames { Off = 'Off', Hetero = 'Hetero', 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..cc79b0cc6d 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 @@ -28,13 +28,18 @@ const selectOptions = getSelectOptionsFromSchema({ const MeasureInput = ({ schema, + extraSchema, value, + extraValue, onChange, + onExtraChange, name, className, ...rest }) => { - const [measure, setMeasure] = useState('px'); + const [measure, setMeasure] = useState( + extraValue || extraSchema?.default || 'px', + ); const [cust, setCust] = useState(value || schema.default); useEffect(() => { @@ -44,27 +49,27 @@ const MeasureInput = ({ } // Hack: Set init value (RESET) }, []); + useEffect(() => { + setMeasure(extraValue); + }, [extraValue]); + const handleChange = (value) => { const convValue = convertValue(value, measure, '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, 'px', measure)); + }, [value, measure]); const desc = schema || schema.properties[name]; 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..7f98ed8f8b 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 @@ -17,6 +17,7 @@ import { StereLabelStyleType, StereoColoringType, + MeasurementUnits, ShowHydrogenLabels, ShowHydrogenLabelNames, defaultBondThickness, @@ -64,15 +65,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 +179,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 +192,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 +237,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 +250,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 +263,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" + /> + - ),