Skip to content

Commit

Permalink
#5200 – the users choice is not saved in the settings but is recalcul…
Browse files Browse the repository at this point in the history
…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>
  • Loading branch information
2 people authored and Guch1g0v committed Oct 17, 2024
1 parent ca581b5 commit 2ff8a77
Show file tree
Hide file tree
Showing 5 changed files with 112 additions and 28 deletions.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Original file line number Diff line number Diff line change
Expand Up @@ -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];

Expand All @@ -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}
/>
Expand All @@ -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;
Expand Down
31 changes: 23 additions & 8 deletions packages/ketcher-react/src/script/ui/component/form/form/form.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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),
};
}

Expand Down Expand Up @@ -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);
Expand All @@ -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}
/>
Expand Down
42 changes: 42 additions & 0 deletions packages/ketcher-react/src/script/ui/data/schema/options-schema.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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',
Expand Down Expand Up @@ -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',
Expand Down Expand Up @@ -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: {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>
),
};
Expand Down Expand Up @@ -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>
),
Expand Down

0 comments on commit 2ff8a77

Please sign in to comment.