feat: show label under floating molecules (#2554)

* feat: show the label under the floating molecule * feat: extract the label and include it in the exported SVG * chore: update react-ocl-nmr * refactor: molecule label * style: label * chore: update react-ocl and fix font size as a number * chore: specify color for molecule label --------- Co-authored-by: Luc Patiny <luc@patiny.com>
cheminfo · Aug 7, 2023 · 5c2ba0d · 5c2ba0d
1 parent 1426e68
commit 5c2ba0d
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 32 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -101,8 +101,8 @@
     "react-icons": "^4.10.1",
     "react-inspector": "^6.0.2",
     "react-mf": "^2.0.2",
-    "react-ocl": "^6.0.0",
-    "react-ocl-nmr": "^2.1.0",
+    "react-ocl": "^6.1.0",
+    "react-ocl-nmr": "^2.3.0",
     "react-plot": "^1.4.2",
     "react-rnd": "^10.4.1",
     "react-science": "^0.24.3",

diff --git a/src/component/1d-2d/components/FloatMoleculeStructures/DraggableStructure.tsx b/src/component/1d-2d/components/FloatMoleculeStructures/DraggableStructure.tsx
@@ -29,6 +29,8 @@ interface DraggableStructureProps {
   index?: number;
 }
 
+const AUTO_CROP_MARGIN = 30;
+
 const style = css`
   border: 1px solid transparent;
 
@@ -98,8 +100,8 @@ export function DraggableStructure(props: DraggableStructureProps) {
   return (
     <Rnd
       default={moleculeView.floating.bounding}
-      minWidth={100}
-      minHeight={100}
+      minWidth={90 + AUTO_CROP_MARGIN * 2}
+      minHeight={100 + AUTO_CROP_MARGIN * 2}
       dragHandleClassName="handle"
       enableUserSelectHack={false}
       bounds={viewerRef}
@@ -124,10 +126,14 @@ export function DraggableStructure(props: DraggableStructureProps) {
             return (
               <OCLnmr
                 OCL={OCL}
-                autoCrop
                 id={`molSVG${index || ''}`}
-                width={width}
-                height={height}
+                autoCrop
+                autoCropMargin={AUTO_CROP_MARGIN}
+                height={height - AUTO_CROP_MARGIN * 2}
+                width={width - AUTO_CROP_MARGIN * 2}
+                label={molecule.label}
+                labelFontSize={15}
+                labelColor="rgb(0,0,0)"
                 molfile={molecule.molfile}
                 setSelectedAtom={handleOnClickAtom}
                 atomHighlightColor={

diff --git a/src/component/utility/export.ts b/src/component/utility/export.ts
@@ -237,6 +237,13 @@ function getBlob(rootRef: HTMLDivElement, elementID: string): BlobObject {
   return { blob, width, height };
 }
 
+function getMatrix(element) {
+  const transform = window
+    .getComputedStyle(element)
+    .getPropertyValue('transform');
+  return new DOMMatrix(transform);
+}
+
 function getMoleculesElement(rootRef) {
   const nmriumViewer: any = (rootRef.getRootNode() as Document).querySelector(
     `#nmrium-viewer`,
@@ -245,10 +252,7 @@ function getMoleculesElement(rootRef) {
   const floatingMoleculesGroup = document.createElement('g');
 
   for (const element of nmriumViewer.querySelectorAll('.draggable-molecule')) {
-    const transform = window
-      .getComputedStyle(element)
-      .getPropertyValue('transform');
-    const matrix = new DOMMatrix(transform);
+    const matrix = getMatrix(element);
     const actionHeaderElement = element.querySelector(
       '.float-molecule-actions',
     );

diff --git a/src/data/molecules/Molecule.ts b/src/data/molecules/Molecule.ts
@@ -27,8 +27,8 @@ export const DRAGGABLE_STRUCTURE_INITIAL_BOUNDING_REACT: MoleculeBoundingRect =
   {
     x: 100,
     y: 50,
-    width: 100,
-    height: 100,
+    width: 190,
+    height: 200,
   };
 
 export type MoleculesView = Record<string, MoleculeView>;