feat: add drag and drag-end events to BrushTracker

package.json

@@ -66,11 +66,11 @@
     "@tanstack/react-form": "^1.33.5",
     "@tanstack/react-store": "^0.11.2",
     "@tanstack/react-table": "^9.2.6",
-    "@zakodium/nmr-types": "^0.5.32",
-    "@zakodium/nmrium-core": "^0.7.82",
-    "@zakodium/nmrium-core-plugins": "^0.7.119",
+    "@zakodium/nmr-types": "^0.5.34",
+    "@zakodium/nmrium-core": "^0.7.83",
+    "@zakodium/nmrium-core-plugins": "^0.7.121",
     "@zakodium/pdnd-esm": "^1.2.0",
-    "@zakodium/utils": "^0.5.1",
+    "@zakodium/utils": "^0.7.0",
     "@zip.js/zip.js": "^2.23.0",
     "cheminfo-font": "^1.28.0",
     "cheminfo-types": "^1.16.0",

src/component/1d/BrushTracker1D.tsx

@@ -260,9 +260,12 @@ export function BrushTracker1D({ children }: Required<PropsWithChildren>) {
       }
 
       const tools = new Set<Tool>(['zoom']);
+      // The region zoom is the tool action of the zoom tool, so it follows
+      // the `general.invert` preference like the other tools' actions: it
+      // is enabled when the primary key is activated (with `invert: false`
+      // that means SHIFT + drag, with `invert: true` a plain drag).
       const isDefaultBrushEnabled =
-        !tools.has(selectedTool) ||
-        (tools.has(selectedTool) && !brushData.shiftKey);
+        !tools.has(selectedTool) || (tools.has(selectedTool) && isPrimary);
 
       if (!shouldExecuteDefaultAction || selectedTool == null) {
         return;

src/component/1d/plugin_chart_brush_tracker.tsx

@@ -33,13 +33,15 @@ export function PluginChartBrushTracker() {
   if (!operatorUI) return null;
 
   const isLiveEditable = operatorUI?.isLiveEditable ?? false;
+  const isLivePreview = isLiveEditable && (liveEdit.value?.checked ?? false);
 
   return (
     <CoreOperatorChartBrushTracker
       core={core}
       operatorUI={operatorUI}
       spectrum={spectrum}
       operation={liveOperation}
+      isLivePreview={isLivePreview}
       height={height}
       width={width}
       margin={margin}

src/component/1d/plugin_svg_chart.tsx

@@ -5,9 +5,11 @@ import { useChartData } from '../context/ChartContext.tsx';
 import { useCore } from '../context/CoreContext.tsx';
 import type { ScaleLinearNumberFunction } from '../context/ScaleContext.tsx';
 import { useScaleChecked } from '../context/ScaleContext.tsx';
+import { useProcessingsMutations } from '../context/processings_mutations_context.tsx';
 import { useIndicatorLineColor } from '../hooks/useIndicatorLineColor.ts';
 import useSpectrum from '../hooks/useSpectrum.ts';
 import { useVerticalAlign } from '../hooks/useVerticalAlign.ts';
+import { useLiveEdit } from '../panels/filtersPanel/processings/use_live_edit.ts';
 import { useLiveOperation } from '../panels/filtersPanel/processings/use_live_operation.ts';
 import { CoreOperatorChartSVG } from '../utility/core_slots/core_operator_chart_svg.tsx';
 
@@ -17,7 +19,9 @@ export function PluginSVGChart1D() {
   const core = useCore();
   const spectrum = useSpectrum();
   const { height, width, margin } = useChartData();
-  const [liveOperation] = useLiveOperation();
+  const [liveOperation, setLiveOperation] = useLiveOperation();
+  const liveEdit = useLiveEdit(liveOperation?.uid);
+  const processingsMutations = useProcessingsMutations();
   const { scaleX: scaleXBuilder } = useScaleChecked();
   const indicatorLineColor = useIndicatorLineColor();
 
@@ -31,12 +35,27 @@ export function PluginSVGChart1D() {
   const operatorUI = core.slotOperator(liveOperation.operatorId);
   if (!operatorUI) return null;
 
+  const isLiveEditable = operatorUI?.isLiveEditable ?? false;
+  const isLivePreview = isLiveEditable && (liveEdit.value?.checked ?? false);
+
   return (
     <CoreOperatorChartSVG
       core={core}
       operatorUI={operatorUI}
       spectrum={spectrum}
       operation={liveOperation}
+      isLivePreview={isLivePreview}
+      onChange={(liveOperation) => {
+        liveOperation = setLiveOperation(liveOperation);
+
+        if (!isLiveEditable) return;
+        if (!liveEdit.value?.checked) return;
+
+        void processingsMutations.applyLiveChange(
+          liveOperation,
+          liveEdit.value?.shouldProcessNext ?? false,
+        );
+      }}
       height={height}
       width={width}
       margin={margin}