mc-react-structure-visualizer/src/StructureVisualizer/ControlBox/index.jsx at 500b73845210847a0c34f03fee7b4073b9e7e2fb · materialscloud-org/mc-react-structure-visualizer · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
import "./index.css";

const ControlBox = ({ viewerParams, onViewerParamChange, onViewerEvent }) => {
  const handleSupercellChange = (index, value) => {
    const newSupercell = [...viewerParams.supercell];
    newSupercell[index] = parseInt(value);
    onViewerParamChange("supercell", newSupercell);
  };

  const handleOptionChange = (option) => {
    onViewerParamChange(option, !viewerParams[option]);
  };

  const handleCameraEvent = (orientation) => {
    onViewerEvent("camera", orientation);
  };

  const handleIsoValueChange = (value) => {
    const pos = value;
    const neg = -value;

    const newSurfaces = [
      { ...viewerParams.surfaces[0], isoval: pos + 1e-6 },
      { ...viewerParams.surfaces[1], isoval: neg - 1e-6 },
    ];

    onViewerParamChange("surfaces", newSurfaces);
  };

  return (
    <div className="control-box">
      <div className="control-box-row">
        {/* Supercell controls */}
        {viewerParams.showSupercellButtons && (
          <div className="supercell-container">
            <label>Supercell: </label>
            <div style={{ display: "flex" }}>
              {[0, 1, 2].map((index) => (
                <input
                  key={index}
                  className="supercell-input"
                  type="number"
                  min="1"
                  max="99"
                  value={viewerParams.supercell[index]}
                  onChange={(e) => handleSupercellChange(index, e.target.value)}
                />
              ))}
            </div>
          </div>
        )}

        {/* Surfaces controls */}
        {viewerParams.surfaces?.length === 2 && (
          <div className="surface-control">
            <label>Isosurface value: </label>
            <input
              type="number"
              step="0.1"
              min="0.0"
              value={Math.abs(viewerParams.surfaces[0].isoval).toFixed(2)}
              onChange={(e) => handleIsoValueChange(parseFloat(e.target.value))}
              style={{ width: "60px", marginRight: "8px" }}
            />
          </div>
        )}
        {/* Camera controls */}
        <div className="camera-controls">
          <label>Camera: </label>
          <button
            className="camera-button"
            onClick={() => handleCameraEvent("x")}
          >
            x
          </button>
          <button
            className="camera-button"
            onClick={() => handleCameraEvent("y")}
          >
            y
          </button>
          <button
            className="camera-button"
            onClick={() => handleCameraEvent("z")}
          >
            z
          </button>
        </div>
      </div>

      {/* Options */}
      <div className="control-box-row" style={{ display: "flex" }}>
        <label className="option-checkbox">
          <input
            type="checkbox"
            checked={viewerParams.bonds}
            onChange={() => handleOptionChange("bonds")}
          />
          <span>Bonds</span>
        </label>
        <label className="option-checkbox">
          <input
            type="checkbox"
            checked={viewerParams.packedCell}
            onChange={() => handleOptionChange("packedCell")}
          />
          <span>Packed cell</span>
        </label>
        <label className="option-checkbox">
          <input
            type="checkbox"
            checked={viewerParams.atomLabels}
            onChange={() => handleOptionChange("atomLabels")}
          />
          <span>Atom labels</span>
        </label>
        <label className="option-checkbox">
          <input
            type="checkbox"
            checked={viewerParams.spaceFilling}
            onChange={() => handleOptionChange("vdwRadius")}
          />
          <span>vdW radius</span>
        </label>
      </div>
    </div>
  );
};

export default ControlBox;