#2760 - feat: snap partially selected structure to an attachment bond

epam · Jul 7, 2023 · 2644ff2 · 2644ff2
1 parent 9d3d23c
commit 2644ff2
Show file tree

Hide file tree

Showing 8 changed files with 615 additions and 68 deletions.
diff --git a/packages/ketcher-core/src/application/render/draw.ts b/packages/ketcher-core/src/application/render/draw.ts
@@ -976,14 +976,19 @@ function bondSingle(
   halfBond1: HalfBond,
   halfBond2: HalfBond,
   options: RenderOptions,
+  isSnapping: boolean,
   color = '#000'
 ) {
   const a = halfBond1.p
   const b = halfBond2.p
-  return paper.path(makeStroke(a, b)).attr(options.lineattr).attr({
-    fill: color,
-    stroke: color
-  })
+  return paper
+    .path(makeStroke(a, b))
+    .attr(options.lineattr)
+    .attr({
+      fill: color,
+      stroke: color
+    })
+    .attr(isSnapping ? options.bondSnappingStyle : {})
 }
 
 function bondSingleUp(
@@ -992,6 +997,7 @@ function bondSingleUp(
   b2: Vec2,
   b3: Vec2,
   options: RenderOptions,
+  isSnapping: boolean,
   color = '#000'
 ) {
   // eslint-disable-line max-params
@@ -1010,6 +1016,7 @@ function bondSingleUp(
       fill: color,
       stroke: color
     })
+    .attr(isSnapping ? options.bondSnappingStyle : {})
 }
 
 function bondSingleStereoBold(
@@ -1019,6 +1026,7 @@ function bondSingleStereoBold(
   a3: Vec2,
   a4: Vec2,
   options: RenderOptions,
+  isSnapping: boolean,
   color = '#000'
 ) {
   // eslint-disable-line max-params
@@ -1035,10 +1043,11 @@ function bondSingleStereoBold(
       tfx(a4.y)
     )
     .attr(options.lineattr)
-  bond.attr({
-    stroke: color,
-    fill: color
-  })
+    .attr({
+      stroke: color,
+      fill: color
+    })
+    .attr(isSnapping ? options.bondSnappingStyle : {})
   return bond
 }
 
@@ -1048,6 +1057,7 @@ function bondDoubleStereoBold(
   b1: Vec2,
   b2: Vec2,
   options: RenderOptions,
+  isSnapping: boolean,
   color = '#000'
 ) {
   // eslint-disable-line max-params
@@ -1060,6 +1070,7 @@ function bondDoubleStereoBold(
         stroke: color,
         fill: color
       })
+      .attr(isSnapping ? options.bondSnappingStyle : {})
   ])
 }
 
@@ -1070,6 +1081,7 @@ function bondSingleDown(
   nlines: number,
   step: number,
   options: RenderOptions,
+  isSnapping: boolean,
   color = '#000'
 ) {
   // eslint-disable-line max-params
@@ -1087,10 +1099,14 @@ function bondSingleDown(
     q = r.addScaled(n, (-bsp * (i + 0.5)) / (nlines - 0.5))
     path += makeStroke(p, q)
   }
-  return paper.path(path).attr(options.lineattr).attr({
-    fill: color,
-    stroke: color
-  })
+  return paper
+    .path(path)
+    .attr(options.lineattr)
+    .attr({
+      fill: color,
+      stroke: color
+    })
+    .attr(isSnapping ? options.bondSnappingStyle : {})
 }
 
 function bondSingleEither(
@@ -1100,6 +1116,7 @@ function bondSingleEither(
   nlines: number,
   step: number,
   options: RenderOptions,
+  isSnapping: boolean,
   color = '#000'
 ) {
   // eslint-disable-line max-params
@@ -1115,10 +1132,14 @@ function bondSingleEither(
       .addScaled(n, ((i & 1 ? -1 : +1) * bsp * (i + 0.5)) / (nlines - 0.5))
     path += 'L' + tfx(r.x) + ',' + tfx(r.y)
   }
-  return paper.path(path).attr(options.lineattr).attr({
-    fill: color,
-    stroke: color
-  })
+  return paper
+    .path(path)
+    .attr(options.lineattr)
+    .attr({
+      fill: color,
+      stroke: color
+    })
+    .attr(isSnapping ? options.bondSnappingStyle : {})
 }
 
 function bondDouble(
@@ -1128,7 +1149,8 @@ function bondDouble(
   b1: Vec2,
   b2: Vec2,
   cisTrans: boolean,
-  options: RenderOptions
+  options: RenderOptions,
+  isSnapping: boolean
 ) {
   // eslint-disable-line max-params
   return paper
@@ -1146,14 +1168,16 @@ function bondDouble(
       tfx(b2.y)
     )
     .attr(options.lineattr)
+    .attr(isSnapping ? options.bondSnappingStyle : {})
 }
 
 function bondSingleOrDouble(
   paper: RaphaelPaper,
   halfBond1: HalfBond,
   halfBond2: HalfBond,
   nSect: number,
-  options: RenderOptions
+  options: RenderOptions,
+  isSnapping: boolean
 ) {
   // eslint-disable-line max-statements, max-params
   const a = halfBond1.p
@@ -1174,14 +1198,18 @@ function bondSingleOrDouble(
     }
     pp = pi
   }
-  return paper.path(path).attr(options.lineattr)
+  return paper
+    .path(path)
+    .attr(options.lineattr)
+    .attr(isSnapping ? options.bondSnappingStyle : {})
 }
 
 function bondTriple(
   paper: RaphaelPaper,
   halfBond1: HalfBond,
   halfBond2: HalfBond,
   options: RenderOptions,
+  isSnapping: boolean,
   color = '#000'
 ) {
   const a = halfBond1.p
@@ -1198,16 +1226,24 @@ function bondTriple(
       fill: color,
       stroke: color
     })
+    .attr(isSnapping ? options.bondSnappingStyle : {})
 }
 
 function bondAromatic(
   paper: RaphaelPaper,
   paths: string[],
   bondShift: number,
-  options: RenderOptions
+  options: RenderOptions,
+  isSnapping: boolean
 ) {
-  const l1 = paper.path(paths[0]).attr(options.lineattr)
-  const l2 = paper.path(paths[1]).attr(options.lineattr)
+  const l1 = paper
+    .path(paths[0])
+    .attr(options.lineattr)
+    .attr(isSnapping ? options.bondSnappingStyle : {})
+  const l2 = paper
+    .path(paths[1])
+    .attr(options.lineattr)
+    .attr(isSnapping ? options.bondSnappingStyle : {})
   if (bondShift !== undefined && bondShift !== null) {
     ;(bondShift > 0 ? l1 : l2).attr({ 'stroke-dasharray': '- ' })
   }
@@ -1219,42 +1255,51 @@ function bondAny(
   paper: RaphaelPaper,
   halfBond1: HalfBond,
   halfBond2: HalfBond,
-  options: RenderOptions
+  options: RenderOptions,
+  isSnapping: boolean
 ) {
   const a = halfBond1.p
   const b = halfBond2.p
   return paper
     .path(makeStroke(a, b))
     .attr(options.lineattr)
     .attr({ 'stroke-dasharray': '- ' })
+    .attr(isSnapping ? options.bondSnappingStyle : {})
 }
 
 function bondHydrogen(
   paper: RaphaelPaper,
   halfBond1: HalfBond,
   halfBond2: HalfBond,
-  options: RenderOptions
+  options: RenderOptions,
+  isSnapping: boolean
 ) {
   const a = halfBond1.p
   const b = halfBond2.p
-  return paper.path(makeStroke(a, b)).attr(options.lineattr).attr({
-    'stroke-dasharray': '.',
-    'stroke-linecap': 'square'
-  })
+  return paper
+    .path(makeStroke(a, b))
+    .attr(options.lineattr)
+    .attr({
+      'stroke-dasharray': '.',
+      'stroke-linecap': 'square'
+    })
+    .attr(isSnapping ? options.bondSnappingStyle : {})
 }
 
 function bondDative(
   paper: RaphaelPaper,
   halfBond1: HalfBond,
   halfBond2: HalfBond,
-  options: RenderOptions
+  options: RenderOptions,
+  isSnapping: boolean
 ) {
   const a = halfBond1.p
   const b = halfBond2.p
   return paper
     .path(makeStroke(a, b))
     .attr(options.lineattr)
     .attr({ 'arrow-end': 'block-midium-long' })
+    .attr(isSnapping ? options.bondSnappingStyle : {})
 }
 
 function reactingCenter(

diff --git a/packages/ketcher-core/src/application/render/options.ts b/packages/ketcher-core/src/application/render/options.ts
@@ -82,6 +82,11 @@ function defaultOptions(options: RenderOptions): RenderOptions {
       fill: '#365CFF',
       stroke: '#365CFF'
     },
+    bondSnappingStyle: {
+      fill: '#365CFF',
+      stroke: '#365CFF',
+      'stroke-width': options.bondThickness * 1.5
+    },
     /* eslint-enable quote-props */
     selectionStyle: {
       fill: '#57FF8F',

diff --git a/packages/ketcher-core/src/application/render/render.types.ts b/packages/ketcher-core/src/application/render/render.types.ts
@@ -53,6 +53,7 @@ export type RenderOptions = {
   /* styles */
   lineattr: RenderOptionStyles
   arrowSnappingStyle: RenderOptionStyles
+  bondSnappingStyle: RenderOptionStyles
   selectionStyle: RenderOptionStyles
   hoverStyle: RenderOptionStyles
   sgroupBracketStyle: RenderOptionStyles