#5354 - Apply new hash spacing setting to canvas (#5816)

* #5434 - Apply new hash spacing setting to canvas

* feat: add minimum lines for large hash spacing

* fix: add dedicated function for converting hash spacing to pixels

* fix: change check hash spacing condition

* update snapshots

ketcher-autotests/tests/Settings/Bonds/bonds-settings.spec.ts

@@ -946,8 +946,6 @@ test.describe('Bonds Settings', () => {
         Test case: https://github.com/epam/ketcher/issues/5152
         Description: add new setting Hash spacing
         require a number input should allow entering values with one decimal place
-        Screenshot after applying the settings should be update 
-        after implementing https://github.com/epam/ketcher/issues/5354
         */
     await openFileAndAddToCanvasAsNewProject(
       'KET/mixed-or-stereomarks.ket',
@@ -973,8 +971,6 @@ test.describe('Bonds Settings', () => {
         Test case: https://github.com/epam/ketcher/issues/5152
         Description: add new setting Hash spacing
         require a number input should allow entering values with one decimal place
-        Screenshot after applying the settings should be update 
-        after implementing https://github.com/epam/ketcher/issues/5354
         */
     await openFileAndAddToCanvasAsNewProject(
       'KET/mixed-or-stereomarks.ket',
@@ -998,8 +994,6 @@ test.describe('Bonds Settings', () => {
         Test case: https://github.com/epam/ketcher/issues/5152
         Description: add new setting Hash spacing
         require a number input should allow entering values with one decimal place
-        Screenshot after applying the settings should be update 
-        after implementing https://github.com/epam/ketcher/issues/5354
         */
     await openFileAndAddToCanvasAsNewProject(
       'KET/mixed-or-stereomarks.ket',
@@ -1023,8 +1017,6 @@ test.describe('Bonds Settings', () => {
         Test case: https://github.com/epam/ketcher/issues/5152
         Description: add new setting Hash spacing
         require a number input should allow entering values with one decimal place
-        Screenshot after applying the settings should be update 
-        after implementing https://github.com/epam/ketcher/issues/5354
         */
     await openFileAndAddToCanvasAsNewProject(
       'KET/mixed-or-stereomarks.ket',
@@ -1048,8 +1040,6 @@ test.describe('Bonds Settings', () => {
         Test case: https://github.com/epam/ketcher/issues/5152
         Description: add new setting Hash spacing
         require a number input should allow entering the whole values
-        Screenshot after applying the settings should be update 
-        after implementing https://github.com/epam/ketcher/issues/5354
         */
     await openFileAndAddToCanvasAsNewProject(
       'KET/mixed-or-stereomarks.ket',
@@ -1073,8 +1063,6 @@ test.describe('Bonds Settings', () => {
         Test case: https://github.com/epam/ketcher/issues/5152
         Description: add new setting Hash spacing
         require a number input should allow entering the whole values
-        Screenshot after applying the settings should be update 
-        after implementing https://github.com/epam/ketcher/issues/5354
         */
     await openFileAndAddToCanvasAsNewProject(
       'KET/mixed-or-stereomarks.ket',
@@ -1098,8 +1086,6 @@ test.describe('Bonds Settings', () => {
         Test case: https://github.com/epam/ketcher/issues/5152
         Description: add new setting Hash spacing
         require a number input should allow entering the whole values
-        Screenshot after applying the settings should be update 
-        after implementing https://github.com/epam/ketcher/issues/5354
         */
     await openFileAndAddToCanvasAsNewProject(
       'KET/mixed-or-stereomarks.ket',
@@ -1123,8 +1109,6 @@ test.describe('Bonds Settings', () => {
         Test case: https://github.com/epam/ketcher/issues/5152
         Description: add new setting Hash spacing
         require a number input should allow entering the whole values
-        Screenshot after applying the settings should be update 
-        after implementing https://github.com/epam/ketcher/issues/5354
         */
     await openFileAndAddToCanvasAsNewProject(
       'KET/mixed-or-stereomarks.ket',
@@ -1149,8 +1133,6 @@ test.describe('Bonds Settings', () => {
         Description: add new setting Hash spacing
         require a number input should allow entering values with one decimal place,
         the second number from the value entered after the dot is substituted
-        Screenshot after applying the settings should be update 
-        after implementing https://github.com/epam/ketcher/issues/5354
         */
     await openFileAndAddToCanvasAsNewProject(
       'KET/mixed-or-stereomarks.ket',
@@ -1175,8 +1157,6 @@ test.describe('Bonds Settings', () => {
         Description: add new setting Hash spacing
         require a number input should allow entering values with one decimal place, 
         the second number from the value entered after the dot is substituted
-        Screenshot after applying the settings should be update 
-        after implementing https://github.com/epam/ketcher/issues/5354
         */
     await openFileAndAddToCanvasAsNewProject(
       'KET/mixed-or-stereomarks.ket',
@@ -1201,8 +1181,6 @@ test.describe('Bonds Settings', () => {
         Description: add new setting Hash spacing
         require a number input should allow entering values with one decimal place, 
         the second number from the value entered after the dot is substituted
-        Screenshot after applying the settings should be update 
-        after implementing https://github.com/epam/ketcher/issues/5354
         */
     await openFileAndAddToCanvasAsNewProject(
       'KET/mixed-or-stereomarks.ket',
@@ -1227,8 +1205,6 @@ test.describe('Bonds Settings', () => {
         Description: add new setting Hash spacing
         require a number input should allow entering values with one decimal place, 
         the second number from the value entered after the dot is substituted
-        Screenshot after applying the settings should be update 
-        after implementing https://github.com/epam/ketcher/issues/5354
         */
     await openFileAndAddToCanvasAsNewProject(
       'KET/mixed-or-stereomarks.ket',
@@ -1253,8 +1229,6 @@ test.describe('Bonds Settings', () => {
         Description: add new setting Hash spacing
         require a number input should allow entering values with one decimal place, 
         the second number from the value entered after the dot is substituted
-        Screenshot after applying the settings should be update 
-        after implementing https://github.com/epam/ketcher/issues/5354
         */
     await openFileAndAddToCanvasAsNewProject(
       'KET/mixed-or-stereomarks.ket',
@@ -1279,8 +1253,6 @@ test.describe('Bonds Settings', () => {
         Description: add new setting Hash spacing
         require a number input should allow entering values with one decimal place, 
         the second number from the value entered after the dot is substituted
-        Screenshot after applying the settings should be update 
-        after implementing https://github.com/epam/ketcher/issues/5354
         */
     await openFileAndAddToCanvasAsNewProject(
       'KET/mixed-or-stereomarks.ket',
@@ -1305,8 +1277,6 @@ test.describe('Bonds Settings', () => {
         Description: add new setting Hash spacing
         require a number input should allow entering values with one decimal place, 
         the second number from the value entered after the dot is substituted
-        Screenshot after applying the settings should be update 
-        after implementing https://github.com/epam/ketcher/issues/5354
         */
     await openFileAndAddToCanvasAsNewProject(
       'KET/mixed-or-stereomarks.ket',
@@ -1331,8 +1301,6 @@ test.describe('Bonds Settings', () => {
         Description: add new setting Hash spacing
         require a number input should allow entering values with one decimal place, 
         the second number from the value entered after the dot is substituted
-        Screenshot after applying the settings should be update 
-        after implementing https://github.com/epam/ketcher/issues/5354
         */
     await openFileAndAddToCanvasAsNewProject(
       'KET/mixed-or-stereomarks.ket',

ketcher-autotests/tests/test-data/Molfiles-V2000/adenosine-triphosphate-acs-style.mol

@@ -1,5 +1,5 @@
 null
-  Ketcher 101124 9442D 1   1.00000     0.00000     0
+  Ketcher 10192413262D 1   1.00000     0.00000     0
 
  31 33  0  0  1  0  0  0  0  0999 V2000
    29.0820  -17.8093    0.0000 O   0  0  0  0  0  0  0  0  0  0  0  0

ketcher-autotests/tests/test-data/Molfiles-V3000/adenosine-triphosphate-acs-style.mol

@@ -1,5 +1,5 @@
 
-  -INDIGO-10112413482D
+  -INDIGO-10192413252D
 
   0  0  0  0  0  0  0  0  0  0  0 V3000
 M  V30 BEGIN CTAB

ketcher-autotests/tests/test-data/SDF/adenosine-triphosphate-acs-style-v2000.sdf

@@ -1,5 +1,5 @@
 
-  -INDIGO-10112413522D
+  -INDIGO-10192413182D
 
  31 33  0  0  1  0  0  0  0  0999 V2000
    29.0820  -17.8093    0.0000 O   0  0  0  0  0  0  0  0  0  0  0  0

ketcher-autotests/tests/test-data/SDF/adenosine-triphosphate-acs-style-v3000.sdf

@@ -1,5 +1,5 @@
 
-  -INDIGO-10112413502D
+  -INDIGO-10192413172D
 
   0  0  0  0  0  0  0  0  0  0  0 V3000
 M  V30 BEGIN CTAB

packages/ketcher-core/src/application/render/options.ts

@@ -148,10 +148,17 @@ function convertValue(
     measureTo === 'px' || measureTo === 'pt'
       ? ((value * measureMap[measureFrom]) / measureMap[measureTo]).toFixed()
       : ((value * measureMap[measureFrom]) / measureMap[measureTo]).toFixed(3);
-
   return Number(convertedValue);
 }
 
+function convertHashSpacingToPx(
+  value: number,
+  measureFrom: keyof typeof measureMap,
+) {
+  const convertedValue = (value * measureMap[measureFrom]) / measureMap.px;
+  return Number(convertedValue.toFixed(1));
+}
+
 export function getOptionsWithConvertedUnits(
   options: RenderOptions,
 ): RenderOptions {
@@ -164,6 +171,7 @@ export function getOptionsWithConvertedUnits(
       | 'bondThicknessInPx'
       | 'stereoBondWidthInPx'
       | 'microModeScale'
+      | 'hashSpacingInPx'
     >
   > = {};
   const defaultUnit = 'px';
@@ -226,6 +234,12 @@ export function getOptionsWithConvertedUnits(
     );
   }
 
+  if (typeof options.hashSpacing !== 'undefined') {
+    convertedOptions.hashSpacingInPx = convertHashSpacingToPx(
+      options.hashSpacing,
+      options.hashSpacingUnit || defaultUnit,
+    );
+  }
   return {
     ...options,
     ...convertedOptions,

packages/ketcher-core/src/application/render/render.types.ts

@@ -70,6 +70,9 @@ export type RenderOptions = {
   fontRLabel: number;
   fontRLogic: number;
 
+  hashSpacing: number;
+  hashSpacingUnit: MeasurementUnits;
+
   /* styles */
   lineattr: RenderOptionStyles;
   multitailArrow: RenderOptionStyles;
@@ -101,6 +104,7 @@ export type RenderOptions = {
   bondSpacingInPx: number;
   bondThicknessInPx: number;
   stereoBondWidthInPx: number;
+  hashSpacingInPx: number;
   usageInMacromolecule?: UsageInMacromolecule;
   viewOnlyMode?: boolean;
 };

packages/ketcher-core/src/application/render/restruct/rebond.ts

@@ -941,6 +941,15 @@ function stereoUpBondGetCoordinates(
   return sin > 0 ? [a1, a2] : [a2, a1];
 }
 
+function calculateLines(length: number, lineWidth: number, interval: number) {
+  const usableLength = length - lineWidth;
+  const linesCount = Math.max(
+    Math.floor(usableLength / (lineWidth + interval)),
+    0,
+  );
+  return linesCount + 2;
+}
+
 function getBondSingleDownPath(
   render: Render,
   hb1: HalfBond,
@@ -949,24 +958,36 @@ function getBondSingleDownPath(
   struct: Struct,
   isSnapping: boolean,
 ) {
+  const MIN_LINES = 4;
+  const DEFAULT_HASH_SPACING_IN_PX = 1.2;
   const a = hb1.p;
   const b = hb2.p;
   const options = render.options;
   let d = b.sub(a);
   const len = d.length() + 0.2;
   d = d.normalized();
-  const interval = 1.2 * options.lineWidth;
-  const nlines =
-    Math.max(
-      Math.floor((len - options.lineWidth) / (options.lineWidth + interval)),
-      0,
-    ) + 2;
-  const step = len / (nlines - 1);
+  let hashSpacingInPx = options.hashSpacingInPx ?? DEFAULT_HASH_SPACING_IN_PX;
+  const interval = hashSpacingInPx * options.lineWidth;
+  const gaps = MIN_LINES - 1;
+  const isHashSpacingTooLarge = interval >= len / gaps;
+
+  const nlines = calculateLines(len, options.lineWidth, interval);
+
+  if (isHashSpacingTooLarge && nlines < MIN_LINES) {
+    const averageSpacing = (len - options.lineWidth) / gaps;
+    hashSpacingInPx = averageSpacing / options.lineWidth;
+  }
+
+  const intervalAdjusted = hashSpacingInPx * options.lineWidth;
+
+  const finalLines = calculateLines(len, options.lineWidth, intervalAdjusted);
+
+  const step = len / (finalLines - 1);
   return draw.bondSingleDown(
     render.paper,
     hb1,
     d,
-    nlines,
+    finalLines,
     step,
     options,
     isSnapping,