#5152 - Add new settings for ACS style

ketcher-autotests/tests/Indigo-Tools/Enhanced-Stereochemistry/enhanced-stereochemistry.spec.ts

@@ -518,7 +518,7 @@ test.describe('Enhanced Stereochemistry Tool', () => {
     Description: “IUPAC style” in Label display at stereogenic centers is selected by default.
     */
     const deltaX = 0;
-    const deltaY = 50;
+    const deltaY = 100;
     await selectTopPanelButton(TopPanelButton.Settings, page);
     await page.getByText('Stereochemistry', { exact: true }).click();
     await page.mouse.wheel(deltaX, deltaY);

ketcher-autotests/tests/Macromolecule-editor/Macro-Micro-Switcher/macro-micro-switcher.spec.ts

@@ -132,13 +132,13 @@ async function setAtomAndBondSettings(page: Page) {
     .locator('fieldset')
     .filter({ hasText: 'Aromatic Bonds as' })
     .getByRole('textbox')
-    .nth(1)
+    .nth(2)
     .click();
   await page
     .locator('fieldset')
     .filter({ hasText: 'Aromatic Bonds as' })
     .getByRole('textbox')
-    .nth(1)
+    .nth(2)
     .fill('05');
   await page.getByTestId('OK').click();
 }

ketcher-autotests/tests/Settings/General/default-settings-verification.spec.ts

@@ -11,12 +11,7 @@ import {
 
 async function generalDefaultSettings(page: Page) {
   await selectTopPanelButton(TopPanelButton.Settings, page);
-  const deltaX = 0;
-  const deltaY = 150;
-  const anyX = 638;
-  const anyY = 524;
-  await page.mouse.move(anyX, anyY);
-  await page.mouse.wheel(deltaX, deltaY);
+  await page.getByTestId('General-accordion').click();
 }
 
 async function resetSelectToolOff(page: Page) {

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

@@ -35,6 +35,11 @@ export enum MeasurementUnits {
   Inch = 'inch',
 }
 
+export enum ImageResolution {
+  high = '600',
+  low = '72',
+}
+
 const editor: {
   resetToSelect: ExtendedSchema;
   rotationStep: ExtendedSchema;
@@ -85,6 +90,13 @@ const render: {
   bondThicknessUnit: ExtendedSchema;
   stereoBondWidth: ExtendedSchema;
   stereoBondWidthUnit: ExtendedSchema;
+  bondLength: ExtendedSchema;
+  bondLengthUnit: ExtendedSchema;
+  reactionComponentMarginSize: ExtendedSchema;
+  reactionComponentMarginSizeUnit: ExtendedSchema;
+  hashSpacing: ExtendedSchema;
+  hashSpacingUnit: ExtendedSchema;
+  imageResolution: ExtendedSchema;
 } = {
   showValenceWarnings: {
     title: 'Show valence warnings',
@@ -275,6 +287,51 @@ const render: {
     enumNames: Object.values(MeasurementUnits),
     default: MeasurementUnits.Px,
   },
+  bondLength: {
+    title: 'Bond length',
+    type: 'number',
+    default: 2.1,
+    minimum: 1,
+    maximum: 96,
+  },
+  bondLengthUnit: {
+    title: 'Bond length unit',
+    enum: Object.values(MeasurementUnits),
+    enumNames: Object.values(MeasurementUnits),
+    default: MeasurementUnits.Px,
+  },
+  reactionComponentMarginSize: {
+    title: 'Reaction component margin size',
+    type: 'number',
+    default: 2.3,
+    minimum: 1,
+    maximum: 96,
+  },
+  reactionComponentMarginSizeUnit: {
+    title: 'Reaction component margin size unit',
+    enum: Object.values(MeasurementUnits),
+    enumNames: Object.values(MeasurementUnits),
+    default: MeasurementUnits.Px,
+  },
+  hashSpacing: {
+    title: 'Hash spacing',
+    type: 'number',
+    default: 2.2,
+    minimum: 1,
+    maximum: 96,
+  },
+  hashSpacingUnit: {
+    title: 'Hash spacing unit',
+    enum: Object.values(MeasurementUnits),
+    enumNames: Object.values(MeasurementUnits),
+    default: MeasurementUnits.Px,
+  },
+  imageResolution: {
+    title: 'Image resolution',
+    enum: Object.values(ImageResolution),
+    enumNames: Object.keys(ImageResolution),
+    default: ImageResolution.low,
+  },
 };
 
 const server: {

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

@@ -44,6 +44,7 @@ const Accordion = ({ tabs, className, changedGroups }): React.ReactElement => {
             <div
               onClick={handleAccordionChange(label)}
               className={classes.accordionSummaryWrapper}
+              data-testid={`${label}-accordion`}
             >
               <div className={classes.accordionSummary}>
                 <Icon

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

@@ -165,6 +165,17 @@ const SettingsDialog = (props: Props) => {
           labelPos={false}
           extraName="fontszsubUnit"
         />
+        <Field
+          name="reactionComponentMarginSize"
+          component={MeasureInput}
+          labelPos={false}
+          extraName="reactionComponentMarginSizeUnit"
+        />
+        <Field
+          name="imageResolution"
+          component={Select}
+          options={getSelectOptionsFromSchema(settingsProps?.imageResolution)}
+        />
       </fieldset>
     ),
   };
@@ -228,6 +239,12 @@ const SettingsDialog = (props: Props) => {
     content: (
       <fieldset>
         <Field name="aromaticCircle" />
+        <Field
+          name="bondLength"
+          component={MeasureInput}
+          labelPos={false}
+          extraName="bondLengthUnit"
+        />
         <Field
           name="doubleBondWidth"
           component={MeasureInput}
@@ -246,6 +263,12 @@ const SettingsDialog = (props: Props) => {
           labelPos={false}
           extraName="stereoBondWidthUnit"
         />
+        <Field
+          name="hashSpacing"
+          component={MeasureInput}
+          labelPos={false}
+          extraName="hashSpacingUnit"
+        />
       </fieldset>
     ),
   };