Skip to content

Commit fcda31d

Browse files
Hari KiranHari Kiran
Hari Kiran
authored and
Hari Kiran
committed
Fix: Added missing PreviewModal.tsx
1 parent b60dbc4 commit fcda31d

File tree

1 file changed

+163
-0
lines changed

1 file changed

+163
-0
lines changed

‎src/components/PreviewModal.tsx‎

Lines changed: 163 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,163 @@
1+
// import React, { useEffect } from "react";
2+
3+
// const PreviewModal: React.FC<{
4+
// isOpen: boolean;
5+
// dataKey: any;
6+
// onClose: () => void;
7+
// }> = ({ isOpen, dataKey, onClose }) => {
8+
// useEffect(() => {
9+
// if (isOpen) {
10+
// console.log("🟢 Opening PreviewModal for:", dataKey);
11+
// // Call JavaScript previewdataurl function
12+
// (window as any).previewdataurl(dataKey, 0); // Ensure previewdataurl is on the window object
13+
// }
14+
// }, [isOpen, dataKey]);
15+
16+
// if (!isOpen) return null;
17+
18+
// return (
19+
// <div className="preview-modal">
20+
// <div className="modal-header">
21+
// <h3>Preview</h3>
22+
// <button className="close-btn" onClick={onClose}>
23+
// ×
24+
// </button>
25+
// </div>
26+
// <div id="renderpanel" style={{ width: "100%", height: "500px" }}></div>
27+
// <div id="canvas"></div>
28+
// </div>
29+
// );
30+
// };
31+
32+
// export default PreviewModal;
33+
34+
import React, { useEffect } from "react";
35+
36+
const PreviewModal: React.FC<{
37+
isOpen: boolean;
38+
dataKey: any;
39+
onClose: () => void;
40+
}> = ({ isOpen, dataKey, onClose }) => {
41+
useEffect(() => {
42+
if (isOpen) {
43+
console.log("🟢 Opening PreviewModal for:", dataKey);
44+
45+
setTimeout(() => {
46+
let canvas = document.querySelector("#canvas");
47+
48+
if (!canvas) {
49+
console.error("❌ Error: #canvas element not found in DOM!");
50+
return;
51+
}
52+
53+
if (typeof (window as any).initcanvas === "function") {
54+
console.log("✅ Initializing Three.js...");
55+
(window as any).initcanvas();
56+
} else {
57+
console.error("❌ initcanvas() is not defined!");
58+
}
59+
}, 100); // Small delay ensures modal is rendered first
60+
}
61+
}, [isOpen, dataKey]);
62+
63+
if (!isOpen) return null;
64+
65+
// return (
66+
// <div className="preview-modal">
67+
// <div className="modal-header">
68+
// <h3>Preview</h3>
69+
// <button className="close-btn" onClick={onClose}>×</button>
70+
// </div>
71+
72+
// {/* ✅ Render Panel UI (Needed for UI controls) */}
73+
// <div id="renderpanel" style={{ width: "100%", height: "200px", backgroundColor: "#222", padding: "10px" }}>
74+
// <label>Display Mode:</label>
75+
// <input type="radio" id="mip-radio-button" name="displaymode" value="mip" defaultChecked />
76+
// <label htmlFor="mip-radio-button">MIP</label>
77+
// <input type="radio" id="iso-radio-button" name="displaymode" value="iso" />
78+
// <label htmlFor="iso-radio-button">Isosurface</label>
79+
// </div>
80+
81+
// {/* ✅ Use an actual <canvas> element (Fixes `canvas.width is not a function`) */}
82+
// <canvas id="canvas" style={{ width: "100%", height: "500px", backgroundColor: "#000" }}></canvas>
83+
// </div>
84+
// );
85+
return (
86+
<div className="preview-modal">
87+
<div className="modal-header">
88+
<h3>Preview</h3>
89+
<button className="close-btn" onClick={onClose}>×</button>
90+
</div>
91+
92+
{/* ✅ Display Mode Section */}
93+
<div id="renderpanel" style={{ width: "100%", backgroundColor: "#222", padding: "10px", color: "#fff" }}>
94+
<b>Display Mode</b><br />
95+
<input type="radio" id="mip-radio-button" name="displaymode" value="mip" defaultChecked />
96+
<label htmlFor="mip-radio-button">MIP</label>
97+
<input type="radio" id="iso-radio-button" name="displaymode" value="iso" />
98+
<label htmlFor="iso-radio-button">Isosurface</label>
99+
100+
{/* ✅ Colormap Section */}
101+
<b>Colormap</b><br />
102+
<label htmlFor="clim-low">Lower-bound</label>
103+
<input id="clim-low" type="range" min="1" step="0.25" max="100" defaultValue="50" disabled /><br />
104+
<label htmlFor="clim-hi">Upper-bound</label>
105+
<input id="clim-hi" type="range" min="1" step="0.25" max="100" defaultValue="50" disabled /><br />
106+
<label htmlFor="isothreshold">Threshold</label>
107+
<input id="isothreshold" type="range" min="0" step="0.01" max="1" defaultValue="0.5" disabled />
108+
</div>
109+
110+
{/* ✅ Cross Sections Section */}
111+
<b>Cross Sections</b><br />
112+
<div className="controlrow">
113+
X
114+
<label htmlFor="cross-x-low">Min</label>
115+
<input id="cross-x-low" type="range" min="0" max="1" defaultValue="0" step="any" />
116+
<label htmlFor="cross-x-hi">Max</label>
117+
<input id="cross-x-hi" type="range" min="0" max="1" defaultValue="1" step="any" />
118+
</div>
119+
<div className="controlrow">
120+
Y
121+
<label htmlFor="cross-y-low">Min</label>
122+
<input id="cross-y-low" type="range" min="0" max="1" defaultValue="0" step="any" />
123+
<label htmlFor="cross-y-hi">Max</label>
124+
<input id="cross-y-hi" type="range" min="0" max="1" defaultValue="1" step="any" />
125+
</div>
126+
<div className="controlrow">
127+
Z
128+
<label htmlFor="cross-z-low">Min</label>
129+
<input id="cross-z-low" type="range" min="0" max="1" defaultValue="0" step="any" />
130+
<label htmlFor="cross-z-hi">Max</label>
131+
<input id="cross-z-hi" type="range" min="0" max="1" defaultValue="1" step="any" />
132+
</div>
133+
<div id="taxis">
134+
T
135+
<label htmlFor="cross-t">Time</label>
136+
<input id="cross-t" type="range" min="0" max="1" defaultValue="0" step="1" />
137+
</div>
138+
139+
{/* ✅ Clip Plane Section */}
140+
<b>Clip Plane</b><br />
141+
<label htmlFor="camera-near">Near</label>
142+
<input id="camera-near" type="range" min="1" max="100" defaultValue="50" /><br />
143+
<label htmlFor="camera-far">Far</label>
144+
<input id="camera-far" type="range" min="1" max="100" defaultValue="50" />
145+
146+
{/* ✅ View Section */}
147+
<b>View</b><br />
148+
<button id="neg-x-view">-X</button>
149+
<button id="pos-x-view">+X</button>
150+
<button id="neg-y-view">-Y</button>
151+
<button id="pos-y-view">+Y</button>
152+
<button id="neg-z-view">-Z</button>
153+
<button id="pos-z-view">+Z</button>
154+
155+
{/* ✅ Ensure proper rendering with <canvas> */}
156+
<canvas id="canvas" style={{ width: "100%", height: "500px", backgroundColor: "#000" }}></canvas>
157+
</div>
158+
);
159+
160+
};
161+
162+
export default PreviewModal;
163+

0 commit comments

Comments
 (0)