Merge pull request #1673 from theogutt/main

McStas3D

tools/Python/mcdisplay/webgl/.gitignore

@@ -1,2 +1,10 @@
+# Dependency directories
+node_modules/
+
+# Build directories
+dist/
+
+# Project specific
 instrument.json
 particles.json
+package-lock.json

tools/Python/mcdisplay/webgl/Contexts/CameraContext.jsx

@@ -10,12 +10,11 @@ const CameraContext = createContext({
   setCamPosHome: () => {},
   setCamPosSide: () => {},
   setCamPosTop: () => {},
-  logMessage: () => {},
 });
 
 export const CameraProvider = ({ children }) => {
-  const [camPos, setCamPos] = useState(new Vector3(10, 20, 30));
-  const [camPosHome, setCamPosHome] = useState(new Vector3(10, 20, 30));
+  const [camPos, setCamPos] = useState(new Vector3(0, 10, 0));
+  const [camPosHome, setCamPosHome] = useState(new Vector3(0, 10, 0));
   const [camPosSide, setCamPosSide] = useState(new Vector3(0, 0, 30));
   const [camPosTop, setCamPosTop] = useState(new Vector3(0, 30, 0));
 

tools/Python/mcdisplay/webgl/Contexts/GridContext.jsx

@@ -11,9 +11,13 @@ const GridContext = createContext({
   toggleXY: () => {},
   toggleXZ: () => {},
   toggleYZ: () => {},
+
+  showAxes: true,
+  toggleAxes: () => {},
 });
 
 export const GridProvider = ({ children }) => {
+  const [showAxes, setShowAxes] = useState(true);
   const [gridSize, setGridSize] = useState(100);
   const [gridDivisions, setGridDivisions] = useState(100);
   const updateGridSize = (size, divisions) => {
@@ -28,6 +32,7 @@ export const GridProvider = ({ children }) => {
   const toggleXY = () => setShowXY(!showXY);
   const toggleXZ = () => setShowXZ(!showXZ);
   const toggleYZ = () => setShowYZ(!showYZ);
+  const toggleAxes = () => setShowAxes(!showAxes);
 
   return (
     <GridContext.Provider
@@ -41,6 +46,8 @@ export const GridProvider = ({ children }) => {
         toggleXY,
         toggleXZ,
         toggleYZ,
+        showAxes,
+        toggleAxes,
       }}
     >
       {children}

tools/Python/mcdisplay/webgl/Contexts/InstrumentContext.tsx

@@ -0,0 +1,69 @@
+import React, {
+  ReactNode,
+  createContext,
+  useContext,
+  useState,
+  useEffect,
+} from "react";
+import { fetchJSON } from "../utils/fetch";
+import { initializeInstrument } from "../data-utils/initInstrument";
+import { Instrument } from "../model/Instrument";
+
+type InstrumentContextType = {
+  instrument: Instrument;
+  setInstrument: React.Dispatch<React.SetStateAction<Instrument>>;
+};
+
+const InstrumentContext = createContext<InstrumentContextType>({
+  instrument: {
+    name: "",
+    abspath: "",
+    params: [],
+    params_defaults: [],
+    params_values: [],
+    cmd: "",
+    components: [],
+  },
+  setInstrument: () => {},
+});
+
+interface InstrumentProviderProps {
+  children: ReactNode;
+}
+
+export const InstrumentProvider: React.FC<InstrumentProviderProps> = ({
+  children,
+}) => {
+  const [instrument, _setInstrument] = useState<Instrument>({
+    name: "",
+    abspath: "",
+    params: [],
+    params_defaults: [],
+    params_values: [],
+    cmd: "",
+    components: [],
+  });
+
+  useEffect(() => {
+    fetchJSON("../instrument.json").then((data) => {
+      if (data) {
+        const instrument = initializeInstrument(data);
+        _setInstrument(instrument);
+      } else {
+        console.warn("Instrument data is missing");
+      }
+    });
+  }, []);
+
+  const setInstrument = (newInstrument: React.SetStateAction<Instrument>) => {
+    _setInstrument(newInstrument);
+  };
+
+  return (
+    <InstrumentContext.Provider value={{ instrument, setInstrument }}>
+      {children}
+    </InstrumentContext.Provider>
+  );
+};
+
+export const useInstrumentContext = () => useContext(InstrumentContext);

tools/Python/mcdisplay/webgl/Contexts/PlotRangeContext.tsx

@@ -0,0 +1,57 @@
+import React, { createContext, useContext, ReactNode, useState } from "react";
+
+type AxisRange = [number, number];
+
+type PlotRangeContextType = {
+  plotlyRanges: {
+    [key: string]: {
+      xaxis: AxisRange;
+      yaxis: AxisRange;
+    };
+  };
+  updatePlotlyRanges: (
+    view: string,
+    newRanges: { xaxis: AxisRange; yaxis: AxisRange }
+  ) => void;
+};
+
+const PlotRangeContext = createContext<PlotRangeContextType>({
+  plotlyRanges: {
+    Top: { xaxis: [0, 100], yaxis: [-50, 50] },
+    Side: { xaxis: [0, 100], yaxis: [-50, 50] },
+    End: { xaxis: [0, 100], yaxis: [-50, 50] },
+  },
+  updatePlotlyRanges: () => {},
+});
+
+interface PlotRangeProviderProps {
+  children: ReactNode;
+}
+
+export const PlotRangeProvider: React.FC<PlotRangeProviderProps> = ({
+  children,
+}) => {
+  const [plotlyRanges, setPlotlyRanges] = useState({
+    Top: { xaxis: [0, 100] as AxisRange, yaxis: [-50, 50] as AxisRange },
+    Side: { xaxis: [0, 100] as AxisRange, yaxis: [-50, 50] as AxisRange },
+    End: { xaxis: [0, 100] as AxisRange, yaxis: [-50, 50] as AxisRange },
+  });
+
+  const updatePlotlyRanges = (
+    view: string,
+    newRanges: { xaxis: AxisRange; yaxis: AxisRange }
+  ) => {
+    setPlotlyRanges((prevRanges) => ({
+      ...prevRanges,
+      [view]: newRanges,
+    }));
+  };
+
+  return (
+    <PlotRangeContext.Provider value={{ plotlyRanges, updatePlotlyRanges }}>
+      {children}
+    </PlotRangeContext.Provider>
+  );
+};
+
+export const usePlotRangeContext = () => useContext(PlotRangeContext);

tools/Python/mcdisplay/webgl/Contexts/SceneContext.tsx

@@ -0,0 +1,71 @@
+import React, { createContext, useContext, ReactNode, useRef } from "react";
+import * as THREE from "three";
+import { initializeScene } from "../components/scene/initializeScene";
+
+type SceneContextType = {
+  gridsRef: React.MutableRefObject<any>;
+  axesRef: React.MutableRefObject<any>;
+  containerRef: React.MutableRefObject<any>;
+  primaryCameraRef: React.MutableRefObject<any>;
+  primaryControlsRef: React.MutableRefObject<any>;
+  primaryViewRef: React.MutableRefObject<any>;
+  TopView2DRef: React.MutableRefObject<any>;
+  SideView2DRef: React.MutableRefObject<any>;
+  BackView2DRef: React.MutableRefObject<any>;
+  rendererRef: React.MutableRefObject<any>;
+  sceneRef: React.MutableRefObject<any>;
+};
+
+const SceneContext = createContext<SceneContextType>({
+  gridsRef: { current: null },
+  axesRef: { current: null },
+  containerRef: { current: null },
+  primaryCameraRef: { current: null },
+  primaryControlsRef: { current: null },
+  primaryViewRef: { current: null },
+  TopView2DRef: { current: null },
+  SideView2DRef: { current: null },
+  BackView2DRef: { current: null },
+  rendererRef: { current: null },
+  sceneRef: { current: null },
+});
+
+interface SceneProviderProps {
+  children: ReactNode;
+}
+
+export const SceneProvider: React.FC<SceneProviderProps> = ({ children }) => {
+  const gridsRef = useRef({ gridXY: null, gridXZ: null, gridYZ: null });
+  const axesRef = useRef({ x_axis: null, y_axis: null, z_axis: null });
+  const containerRef = useRef(null);
+  const primaryCameraRef = useRef(null);
+  const primaryControlsRef = useRef(null);
+  const primaryViewRef = useRef(null);
+  const TopView2DRef = useRef(null);
+  const SideView2DRef = useRef(null);
+  const BackView2DRef = useRef(null);
+  const rendererRef = useRef(null);
+  const sceneRef = useRef(initializeScene());
+
+  return (
+    <SceneContext.Provider
+      value={{
+        gridsRef,
+        axesRef,
+        containerRef,
+        primaryCameraRef,
+        primaryControlsRef,
+        primaryViewRef,
+        TopView2DRef,
+        SideView2DRef,
+        BackView2DRef,
+        rendererRef,
+        sceneRef,
+      }}
+    >
+      {children}
+    </SceneContext.Provider>
+  );
+};
+
+export const useSceneContext = () => useContext(SceneContext);

tools/Python/mcdisplay/webgl/Contexts/addRays.ts

@@ -170,7 +170,7 @@ function createScatterPoints(
   scatterPoints.name = SCATTERPOINTS;
 
   vertices.forEach((vertex) => {
-    const geometry = new THREE.SphereGeometry(0.0035, 32, 32);
+    const geometry = new THREE.SphereGeometry(0.004, 4, 2);
     const material = new THREE.MeshBasicMaterial({ color });
     const sphere = new THREE.Mesh(geometry, material);
     sphere.position.copy(vertex);

tools/Python/mcdisplay/webgl/common.css

@@ -58,7 +58,11 @@ li {
   isolation: isolate;
 }
 :root {
-  --gray-color: #7c7c7c;
+  --x-axis-color: #7f2020;
+  --y-axis-color: #207f20;
+  --z-axis-color: #20207f;
+
+  --gray-color: #808080;
 
   /* Light mode colors */
   --primary-color: #3498db;
@@ -78,7 +82,7 @@ li {
   --primary-color-dark: #2980b9;
   --secondary-color-dark: #27ae60;
   --background-color-dark: #121212;
-  --text-color-dark: #000000;
+  --text-color-dark: #ffffff;
   --link-color-dark: #8ab4f8;
   --border-color-dark: #ffffff;
   --button-bg-color-dark: #2980b9;
@@ -178,6 +182,9 @@ button.active {
     background-color: var(--background-color-dark);
     color: var(--text-color-dark);
   }
+  p {
+    color: var(--text-color-dark);
+  }
 
   a {
     color: var(--link-color-dark);

tools/Python/mcdisplay/webgl/components/configure-scene/ConfigureSceneMenu.jsx

@@ -5,6 +5,7 @@ import "./configure-scene-menu.css";
 import ComponentStyler from "./component-styler/ComponentStyler";
 import RaysMenu from "./rays-menu/RaysMenu";
 import BackgroundColorButton from "./background-color-button/BackgroundColorButton";
+import AxesButton from "./axes-button/AxesButton";
 
 const ConfigureSceneMenu = () => {
   return (
@@ -13,6 +14,7 @@ const ConfigureSceneMenu = () => {
       <ComponentStyler />
       <ViewButtons />
       <GridButtons />
+      <AxesButton />
       <BackgroundColorButton />
     </div>
   );