refactor: svg root container

cheminfo · Jan 22, 2025 · 5a6938e · 5a6938e
1 parent ad1345e
commit 5a6938e
Show file tree

Hide file tree

Showing 21 changed files with 91 additions and 111 deletions.
diff --git a/src/component/1d-2d/components/SVGRootContainer.tsx b/src/component/1d-2d/components/SVGRootContainer.tsx
@@ -0,0 +1,63 @@
+import type { ReactNode } from 'react';
+
+import { useChartData } from '../../context/ChartContext.js';
+import { usePreferences } from '../../context/PreferencesContext.js';
+
+interface SVGRootContainerProps {
+  children: ReactNode;
+  enableBoxBorder?: boolean;
+}
+
+export function SVGRootContainer(props: SVGRootContainerProps) {
+  const { children, enableBoxBorder = false } = props;
+
+  const {
+    current: {
+      general: { spectraRendering },
+    },
+  } = usePreferences();
+
+  const { width, height, margin, displayerKey } = useChartData();
+
+  const innerWidth = width - margin.left - margin.right;
+  const innerHeight = height - margin.top - margin.bottom;
+
+  return (
+    <svg
+      id="nmrSVG"
+      width={width}
+      height={height}
+      viewBox={`0 0 ${width} ${height}`}
+      fontFamily="Arial, Helvetica, sans-serif"
+      shapeRendering={spectraRendering}
+      style={{
+        position: 'absolute',
+      }}
+    >
+      <defs>
+        <clipPath id={`${displayerKey}clip-chart`}>
+          <rect
+            width={innerWidth}
+            height={innerHeight}
+            x={margin.left}
+            y={margin.top}
+          />
+        </clipPath>
+      </defs>
+
+      {enableBoxBorder && (
+        <rect
+          width={innerWidth}
+          height={innerHeight}
+          x={margin.left}
+          y={margin.top}
+          stroke="black"
+          strokeWidth="1"
+          fill="transparent"
+        />
+      )}
+
+      {children}
+    </svg>
+  );
+}
diff --git a/src/component/1d/Chart1D.tsx b/src/component/1d/Chart1D.tsx
@@ -1,5 +1,5 @@
+import { SVGRootContainer } from '../1d-2d/components/SVGRootContainer.js';
 import SpectrumInfoBlock from '../1d-2d/components/SpectrumInfoBlock.js';
-import { usePreferences } from '../context/PreferencesContext.js';
 
 import { ApodizationLine } from './ApodizationLine.js';
 import ExclusionZonesAnnotations from './ExclusionZonesAnnotations.js';
@@ -21,34 +21,10 @@ import Ranges from './ranges/Ranges.js';
 import RangesIntegrals from './ranges/RangesIntegrals.js';
 import BaseLineZones from './tool/BaseLineZones.js';
 
-function Chart1D({ mode, width, height, margin, displayerKey }) {
-  const {
-    current: {
-      general: { spectraRendering },
-    },
-  } = usePreferences();
-  const innerWidth = width - margin.left - margin.right;
-  const innerHeight = height - margin.bottom;
+function Chart1D({ mode }) {
   return (
     <PeakEditionProvider>
-      <svg
-        id="nmrSVG"
-        width={width}
-        height={height}
-        viewBox={`0 0 ${width} ${height}`}
-        fontFamily="Arial, Helvetica, sans-serif"
-        shapeRendering={spectraRendering}
-      >
-        <defs>
-          <clipPath id={`${displayerKey}clip-chart-1d`}>
-            <rect
-              width={innerWidth}
-              height={innerHeight}
-              x={margin.left}
-              y="0"
-            />
-          </clipPath>
-        </defs>
+      <SVGRootContainer>
         <LinesSeries />
         <ApodizationLine />
         <IntegralsSeries />
@@ -72,7 +48,7 @@ function Chart1D({ mode, width, height, margin, displayerKey }) {
         <g className="container" style={{ pointerEvents: 'none' }}>
           <XAxis showGrid mode={mode} />
         </g>
-      </svg>
+      </SVGRootContainer>
     </PeakEditionProvider>
   );
 }

diff --git a/src/component/1d/ExclusionZonesAnnotations.tsx b/src/component/1d/ExclusionZonesAnnotations.tsx
@@ -25,7 +25,7 @@ function ExclusionZonesAnnotationsInner({
   return (
     <g
       className="spectrum-exclusion-zones-group"
-      clipPath={`url(#${displayerKey}clip-chart-1d)`}
+      clipPath={`url(#${displayerKey}clip-chart)`}
     >
       {spectra
         .filter((d) => d.display.isVisible && xDomains[d.id])

diff --git a/src/component/1d/LinesSeries.tsx b/src/component/1d/LinesSeries.tsx
@@ -32,7 +32,7 @@ function LinesSeries() {
   ) || []) as Spectrum1D[];
 
   return (
-    <g clipPath={`url(#${displayerKey}clip-chart-1d)`} className="spectra">
+    <g clipPath={`url(#${displayerKey}clip-chart)`} className="spectra">
       {spectra.map((d, i) => (
         <g key={d.id}>
           <Line display={d.display} id={d.id} data={get1DDataXY(d)} index={i} />

diff --git a/src/component/1d/Viewer1D.tsx b/src/component/1d/Viewer1D.tsx
@@ -68,7 +68,6 @@ function Viewer1D({ emptyText = undefined }: Viewer1DProps) {
     xDomains,
     yDomain,
     yDomains,
-    displayerKey,
     view: {
       spectra: { activeTab },
     },
@@ -461,13 +460,7 @@ function Viewer1D({ emptyText = undefined }: Viewer1DProps) {
                       <XLabelPointer />
                       <PeakPointer />
                       <FooterBanner />
-                      <Chart1D
-                        width={widthProp}
-                        height={heightProp}
-                        margin={margin}
-                        mode={mode}
-                        displayerKey={displayerKey}
-                      />
+                      <Chart1D mode={mode} />
                       <BaseLine />
                       <PivotIndicator />
                     </MouseTracker>

diff --git a/src/component/1d/database/DatabaseSpectrum.tsx b/src/component/1d/database/DatabaseSpectrum.tsx
@@ -87,7 +87,7 @@ function DatabaseSpectrum() {
     </foreignObject>
   ) : (
     <g
-      clipPath={`url(#${displayerKey}clip-chart-1d)`}
+      clipPath={`url(#${displayerKey}clip-chart)`}
       className="database-spectrum"
     >
       <path stroke={color} fill="none" d={path} />

diff --git a/src/component/1d/database/ResurrectedDatabaseRanges.tsx b/src/component/1d/database/ResurrectedDatabaseRanges.tsx
@@ -77,7 +77,7 @@ function ResurrectedDatabaseRanges() {
 
   return (
     <g
-      clipPath={`url(#${displayerKey}clip-chart-1d)`}
+      clipPath={`url(#${displayerKey}clip-chart)`}
       className="resurrected-database-ranges"
       width="100%"
       height="100%"

diff --git a/src/component/1d/integral/IntegralsSeries.tsx b/src/component/1d/integral/IntegralsSeries.tsx
@@ -26,7 +26,7 @@ export default function IntegralsSeries() {
 
   if (!integrals) return null;
   return (
-    <g clipPath={`url(#${displayerKey}clip-chart-1d)`} className="integrals">
+    <g clipPath={`url(#${displayerKey}clip-chart)`} className="integrals">
       {integrals.values.map((integral) => (
         <Integration
           nucleus={nucleus}

diff --git a/src/component/1d/matrix/Boxplot.tsx b/src/component/1d/matrix/Boxplot.tsx
@@ -145,7 +145,7 @@ export function InnerBoxplot(props: InnerBoxplotProps) {
   const { x, max, min, median, q1, q3, yDomain } = data;
 
   return (
-    <g clipPath={`url(#${displayerKey}clip-chart-1d)`}>
+    <g clipPath={`url(#${displayerKey}clip-chart)`}>
       <RenderAreaPath
         x={x}
         y1={max}

diff --git a/src/component/1d/matrix/Stocsy.tsx b/src/component/1d/matrix/Stocsy.tsx
@@ -98,7 +98,7 @@ export function InnerStocsy({ scaleRatio, chemicalShift }) {
   const { yDomain } = stocsyData;
   const { x, y, color } = data;
   return (
-    <g clipPath={`url(#${displayerKey}clip-chart-1d)`}>
+    <g clipPath={`url(#${displayerKey}clip-chart)`}>
       <StocsyIndexPoint chemicalShift={chemicalShift} />
 
       <RenderStocsyAsSVG

diff --git a/src/component/1d/multiAnalysis/MultiAnalysisRanges.tsx b/src/component/1d/multiAnalysis/MultiAnalysisRanges.tsx
@@ -27,7 +27,7 @@ function MultiAnalysisRangesInner({
   }
 
   return (
-    <g clipPath={`url(#${displayerKey}clip-chart-1d)`}>
+    <g clipPath={`url(#${displayerKey}clip-chart)`}>
       {ranges.map((columnKey) => (
         <AnalysisRange
           key={columnKey}

diff --git a/src/component/1d/multiplicityTree/MultiplicityTrees.tsx b/src/component/1d/multiplicityTree/MultiplicityTrees.tsx
@@ -18,7 +18,7 @@ function MultiplicityTreesInner({
   displayerKey,
 }: MultiplicityTreesInnerProps) {
   return (
-    <g clipPath={`url(#${displayerKey}clip-chart-1d)`}>
+    <g clipPath={`url(#${displayerKey}clip-chart)`}>
       {ranges?.values?.map((range) => (
         <MultiplicityTreeNode key={range.id} range={range} />
       ))}

diff --git a/src/component/1d/peaks/PeakAnnotations.tsx b/src/component/1d/peaks/PeakAnnotations.tsx
@@ -15,7 +15,7 @@ function PeakAnnotations(props: PeaksAnnotationsProps) {
   const { shiftY } = useScaleChecked();
 
   return (
-    <g className="peaks" clipPath={`url(#${displayerKey}clip-chart-1d)`}>
+    <g className="peaks" clipPath={`url(#${displayerKey}clip-chart)`}>
       <g transform={`translate(0,-${(activeSpectrum?.index || 0) * shiftY})`}>
         {peaks.map((peak) => (
           <PeakAnnotation

diff --git a/src/component/1d/peaks/PeakAnnotationsSpreadMode.tsx b/src/component/1d/peaks/PeakAnnotationsSpreadMode.tsx
@@ -130,7 +130,7 @@ function PeakAnnotationsSpreadMode(props: PeakAnnotationsSpreadModeProps) {
         },
       }}
     >
-      <g className="peaks" clipPath={`url(#${displayerKey}clip-chart-1d)`}>
+      <g className="peaks" clipPath={`url(#${displayerKey}clip-chart)`}>
         <g
           transform={`translate(0,${y})`}
           style={{ visibility: boxSizeHeight > 0 ? 'visible' : 'hidden' }}

diff --git a/src/component/1d/peaks/PeaksShapes.tsx b/src/component/1d/peaks/PeaksShapes.tsx
@@ -24,7 +24,7 @@ function PeaksShapes() {
   const shift = (activeSpectrum?.index || 0) * shiftY;
 
   return (
-    <g className="peaks-shapes" clipPath={`url(#${displayerKey}clip-chart-1d)`}>
+    <g className="peaks-shapes" clipPath={`url(#${displayerKey}clip-chart)`}>
       {showPeaksShapes && <PeaksShapesItems vAlign={shift} />}
       {showPeaksSum && <PeaksShapesSum vAlign={shift} />}
     </g>

diff --git a/src/component/1d/ranges/Ranges.tsx b/src/component/1d/ranges/Ranges.tsx
@@ -27,7 +27,7 @@ function RangesInner({
 }: RangesInnerProps) {
   return (
     <ShareDataProvider>
-      <g clipPath={`url(#${displayerKey}clip-chart-1d)`}>
+      <g clipPath={`url(#${displayerKey}clip-chart)`}>
         {ranges?.values?.map((range) => (
           <Range
             key={range.id}

diff --git a/src/component/1d/ranges/RangesIntegrals.tsx b/src/component/1d/ranges/RangesIntegrals.tsx
@@ -61,7 +61,7 @@ function RangesIntegrals() {
   }
 
   return (
-    <g clipPath={`url(#${displayerKey}clip-chart-1d)`}>
+    <g clipPath={`url(#${displayerKey}clip-chart)`}>
       {integrals.values.map((integral) => {
         return (
           <Integral

diff --git a/src/component/2d/Chart2D.tsx b/src/component/2d/Chart2D.tsx
@@ -1,11 +1,10 @@
-import type { SpectraRendering, Spectrum1D } from 'nmr-load-save';
+import type { Spectrum1D } from 'nmr-load-save';
 import { memo } from 'react';
 
+import { SVGRootContainer } from '../1d-2d/components/SVGRootContainer.js';
 import SpectrumInfoBlock from '../1d-2d/components/SpectrumInfoBlock.js';
 import { useChartData } from '../context/ChartContext.js';
-import { usePreferences } from '../context/PreferencesContext.js';
 import { ShareDataProvider } from '../context/ShareDataContext.js';
-import type { Margin } from '../reducer/Reducer.js';
 
 import XAxis from './XAxis.js';
 import YAxis from './YAxis.js';
@@ -19,53 +18,9 @@ interface Chart2DProps {
   spectra?: Spectrum1D[];
 }
 
-interface Chart2DInnerProps extends Chart2DProps {
-  width: number;
-  height: number;
-  margin: Margin;
-  displayerKey: string;
-  spectraRendering: SpectraRendering;
-}
-
-function Chart2DInner({
-  spectra,
-  width,
-  height,
-  margin,
-  displayerKey,
-  spectraRendering,
-}: Chart2DInnerProps) {
+function Chart2DInner({ spectra }: Chart2DProps) {
   return (
-    <svg
-      id="nmrSVG"
-      viewBox={`0 0 ${width} ${height}`}
-      width={width}
-      height={height}
-      fontFamily="Arial, Helvetica, sans-serif"
-      shapeRendering={spectraRendering}
-      style={{
-        position: 'absolute',
-      }}
-    >
-      <defs>
-        <clipPath id={`${displayerKey}clip-chart-2d`}>
-          <rect
-            width={width - margin.left - margin.right}
-            height={height - margin.top - margin.bottom}
-            x={margin.left}
-            y={margin.top}
-          />
-        </clipPath>
-      </defs>
-      <rect
-        width={width - margin.left - margin.right}
-        height={height - margin.top - margin.bottom}
-        x={margin.left}
-        y={margin.top}
-        stroke="black"
-        strokeWidth="1"
-        fill="transparent"
-      />
+    <SVGRootContainer enableBoxBorder>
       <FTContainer spectra={spectra} />
       <FidContainer />
       <ShareDataProvider>
@@ -79,23 +34,16 @@ function Chart2DInner({
         <XAxis />
         <YAxis />
       </g>
-    </svg>
+    </SVGRootContainer>
   );
 }
 
 const MemoizedChart2D = memo(Chart2DInner);
 
 export default function Chart2D({ spectra }: Chart2DProps) {
   const { width, height, margin, displayerKey } = useChartData();
-  const {
-    current: {
-      general: { spectraRendering },
-    },
-  } = usePreferences();
 
   return (
-    <MemoizedChart2D
-      {...{ spectra, width, height, margin, displayerKey, spectraRendering }}
-    />
+    <MemoizedChart2D {...{ spectra, width, height, margin, displayerKey }} />
   );
 }
diff --git a/src/component/2d/ft/Contours.tsx b/src/component/2d/ft/Contours.tsx
@@ -124,7 +124,7 @@ function ContoursInner({ spectra, displayerKey }: ContoursInnerProps) {
   }
 
   return (
-    <g clipPath={`url(#${displayerKey}clip-chart-2d)`} className="contours">
+    <g clipPath={`url(#${displayerKey}clip-chart)`} className="contours">
       {spectra?.map((spectrum) => {
         return (
           <g key={spectrum.id}>

diff --git a/src/component/2d/zones/Zones.tsx b/src/component/2d/zones/Zones.tsx
@@ -15,7 +15,7 @@ interface ZonesInnerProps {
 
 function ZonesInner({ zones, display, displayerKey }: ZonesInnerProps) {
   return (
-    <g clipPath={`url(#${displayerKey}clip-chart-2d)`} className="2D-Zones">
+    <g clipPath={`url(#${displayerKey}clip-chart)`} className="2D-Zones">
       {display.isVisible &&
         zones.values.map((zone) => (
           <g className="zone" key={zone.id}>

diff --git a/src/component/2d/zones/ZonesAssignmentsLabels.tsx b/src/component/2d/zones/ZonesAssignmentsLabels.tsx
@@ -415,7 +415,7 @@ export function AssignmentLabel(props: AssignmentLabelProps) {
 function ZonesAssignmentsLabelsInner({ zones, displayerKey }: ZonesInnerProps) {
   return (
     <g
-      clipPath={`url(#${displayerKey}clip-chart-2d)`}
+      clipPath={`url(#${displayerKey}clip-chart)`}
       className="2d-zones-assignments-labels"
     >
       {zones.values.map((zone) => (