feat: allow to customize style for spectrum info block (#4011)

Closes: zakodium/nmrium#638

Author: Sebastien-Ahkrin

package-lock.json

@@ -71,8 +71,8 @@
     "@tanstack/react-form": "^1.28.3",
     "@tanstack/react-table": "^8.21.3",
     "@zakodium/nmr-types": "^0.5.1",
-    "@zakodium/nmrium-core": "^0.6.5",
-    "@zakodium/nmrium-core-plugins": "^0.6.39",
+    "@zakodium/nmrium-core": "^0.6.6",
+    "@zakodium/nmrium-core-plugins": "^0.6.40",
     "@zakodium/pdnd-esm": "^1.0.2",
     "@zip.js/zip.js": "^2.8.20",
     "cheminfo-font": "^1.13.1",

package.json

@@ -1,10 +1,10 @@
 import type { Spectrum } from '@zakodium/nmrium-core';
 import dlv from 'dlv';
-import type { CSSProperties } from 'react';
 import { useState } from 'react';
 import { useResizeObserver } from 'react-d3-utils';
 import { BsArrowsMove } from 'react-icons/bs';
 import { FaTimes } from 'react-icons/fa';
+import { SVGStyledText } from 'react-science/ui';
 
 import { useIsInset } from '../../1d/inset/InsetProvider.js';
 import { useChartData } from '../../context/ChartContext.js';
@@ -22,22 +22,6 @@ const verticalSpace = 5;
 const boxPadding = 0;
 const dragShiftY = 24;
 
-const styles: Record<'value' | 'label' | 'colorIndicator', CSSProperties> = {
-  label: {
-    fontSize: '11px',
-    fill: 'black',
-    fontWeight: 'bold',
-  },
-  value: {
-    fontSize: '12px',
-    fill: 'black',
-  },
-  colorIndicator: {
-    width: '10px',
-    height: '2px',
-  },
-};
-
 function getInfoValue(
   spectrum: Spectrum,
   field: { jpath: string[]; format: string },
@@ -81,9 +65,10 @@ function SpectrumInfoBlock() {
     x: number;
     y: number;
   }>(coordinate);
+
   const {
     current: {
-      infoBlock: { visible, fields },
+      infoBlock: { visible, fields, nameStyle, valueStyle },
     },
   } = usePreferences();
 
@@ -95,10 +80,12 @@ function SpectrumInfoBlock() {
       : infoFields?.length - (infoFields?.length % 2)
         ? 2
         : 1) || 0);
+
   const [
     ref,
     { width: boxWidth, height: boxHeight } = { width: 0, height: 0 },
   ] = useResizeObserver();
+
   const { onPointerDown } = useDraggable({
     position: coordinate,
     onChange: (dragEvent) => {
@@ -215,12 +202,13 @@ function SpectrumInfoBlock() {
                 space={verticalSpace}
                 key={field.jpath + field.label}
               >
-                <text alignmentBaseline="middle" style={styles.label}>
+                <SVGStyledText {...nameStyle} alignmentBaseline="middle">
                   {field.label} :
-                </text>
-                <text alignmentBaseline="middle" style={styles.value}>
+                </SVGStyledText>
+
+                <SVGStyledText {...valueStyle} alignmentBaseline="middle">
                   {getInfoValue(spectrum, field)}
-                </text>
+                </SVGStyledText>
               </SVGGroup>
             );
           })}

src/component/1d-2d/components/SpectrumInfoBlock.tsx

@@ -5,6 +5,7 @@ import { useCallback, useMemo } from 'react';
 import { FaPlus, FaRegTrashAlt } from 'react-icons/fa';
 import {
   Button,
+  FieldGroupSVGTextStyleFields,
   TableDragRowHandler,
   createTableColumnHelper,
   withForm,
@@ -42,6 +43,21 @@ export const TitleBlockTab = withForm({
             {({ Checkbox }) => <Checkbox label="Display spectrum info block" />}
           </AppField>
         </Section>
+        <Section title="Text style color">
+          <FieldGroupSVGTextStyleFields
+            form={form}
+            fields="infoBlock.nameStyle"
+            label="Name text color"
+            previewText="Pulse sequence :"
+          />
+
+          <FieldGroupSVGTextStyleFields
+            form={form}
+            fields="infoBlock.valueStyle"
+            label="Value text color"
+            previewText="lon1027"
+          />
+        </Section>
         <TableSection
           title="Fields"
           actions={

src/component/modal/setting/tanstack_general_settings/tabs/title_block_tab.tsx

@@ -1,3 +1,4 @@
+import { svgTextStyleFieldsSchema } from 'react-science/ui';
 import { z } from 'zod';
 
 import { jpathCodec } from './utils.ts';
@@ -8,6 +9,7 @@ const infoBlockFieldTabValidation = z.object({
   visible: z.boolean(),
   label: z.string(),
 });
+
 export const infoBlockFieldTabValidationWithUUID = z.codec(
   z.object({ ...infoBlockFieldTabValidation.shape, uuid: z.string() }),
   infoBlockFieldTabValidation,
@@ -28,4 +30,6 @@ const infoBlockFieldsTabValidation = z.array(
 export const infoBlockTabValidation = z.object({
   visible: z.boolean(),
   fields: infoBlockFieldsTabValidation,
+  nameStyle: svgTextStyleFieldsSchema.optional(),
+  valueStyle: svgTextStyleFieldsSchema.optional(),
 });

src/component/modal/setting/tanstack_general_settings/validation/title_block_tab_validation.ts

@@ -114,6 +114,15 @@ export const workspaceDefaultProperties: Required<WorkspacePreferences> = {
   },
   infoBlock: {
     visible: false,
+    nameStyle: {
+      fontSize: 11,
+      fill: 'black',
+      fontWeight: 'bold',
+    },
+    valueStyle: {
+      fontSize: 12,
+      fill: 'black',
+    },
     fields: [
       { label: 'Name', jpath: ['info', 'name'], visible: true, format: '' },
       {