Eduards commited on
Commit
b6eef57
·
1 Parent(s): a8903ce
Files changed (1) hide show
  1. app/components/workbench/Preview.tsx +23 -23
app/components/workbench/Preview.tsx CHANGED
@@ -26,8 +26,6 @@ export const Preview = memo(() => {
26
 
27
  // Use percentage for width
28
  const [widthPercent, setWidthPercent] = useState<number>(37.5); // 375px assuming 1000px window width initially
29
- // Height is always 100%
30
- const height = '100%';
31
 
32
  const resizingState = useRef({
33
  isResizing: false,
@@ -44,6 +42,7 @@ export const Preview = memo(() => {
44
  if (!activePreview) {
45
  setUrl('');
46
  setIframeUrl(undefined);
 
47
  return;
48
  }
49
 
@@ -54,7 +53,10 @@ export const Preview = memo(() => {
54
 
55
  const validateUrl = useCallback(
56
  (value: string) => {
57
- if (!activePreview) return false;
 
 
 
58
  const { baseUrl } = activePreview;
59
 
60
  if (value === baseUrl) {
@@ -103,6 +105,7 @@ export const Preview = memo(() => {
103
  };
104
 
105
  document.addEventListener('fullscreenchange', handleFullscreenChange);
 
106
  return () => {
107
  document.removeEventListener('fullscreenchange', handleFullscreenChange);
108
  };
@@ -113,7 +116,9 @@ export const Preview = memo(() => {
113
  };
114
 
115
  const startResizing = (e: React.MouseEvent, side: ResizeSide) => {
116
- if (!isDeviceModeOn) return;
 
 
117
 
118
  // Prevent text selection
119
  document.body.style.userSelect = 'none';
@@ -131,12 +136,15 @@ export const Preview = memo(() => {
131
  };
132
 
133
  const onMouseMove = (e: MouseEvent) => {
134
- if (!resizingState.current.isResizing) return;
 
 
 
135
  const dx = e.clientX - resizingState.current.startX;
136
  const windowWidth = resizingState.current.windowWidth;
137
 
138
  // Apply scaling factor to increase sensitivity
139
- const dxPercent = ((dx / windowWidth) * 100) * SCALING_FACTOR;
140
 
141
  let newWidthPercent = resizingState.current.startWidthPercent;
142
 
@@ -165,11 +173,14 @@ export const Preview = memo(() => {
165
  // Handle window resize to ensure widthPercent remains valid
166
  useEffect(() => {
167
  const handleWindowResize = () => {
168
- // Optional: Adjust widthPercent if necessary
169
- // For now, since widthPercent is relative, no action is needed
 
 
170
  };
171
 
172
  window.addEventListener('resize', handleWindowResize);
 
173
  return () => {
174
  window.removeEventListener('resize', handleWindowResize);
175
  };
@@ -195,8 +206,7 @@ export const Preview = memo(() => {
195
  marginLeft: '1px',
196
  }}
197
  >
198
- •••
199
- •••
200
  </div>
201
  </div>
202
  );
@@ -204,10 +214,7 @@ export const Preview = memo(() => {
204
  return (
205
  <div ref={containerRef} className="w-full h-full flex flex-col relative">
206
  {isPortDropdownOpen && (
207
- <div
208
- className="z-iframe-overlay w-full h-full absolute"
209
- onClick={() => setIsPortDropdownOpen(false)}
210
- />
211
  )}
212
  <div className="bg-bolt-elements-background-depth-2 p-2 flex items-center gap-1.5">
213
  <IconButton icon="i-ph:arrow-clockwise" onClick={reloadPreview} />
@@ -274,16 +281,9 @@ export const Preview = memo(() => {
274
  }}
275
  >
276
  {activePreview ? (
277
- <iframe
278
- ref={iframeRef}
279
- className="border-none w-full h-full bg-white"
280
- src={iframeUrl}
281
- allowFullScreen
282
- />
283
  ) : (
284
- <div className="flex w-full h-full justify-center items-center bg-white">
285
- No preview available
286
- </div>
287
  )}
288
 
289
  {isDeviceModeOn && (
 
26
 
27
  // Use percentage for width
28
  const [widthPercent, setWidthPercent] = useState<number>(37.5); // 375px assuming 1000px window width initially
 
 
29
 
30
  const resizingState = useRef({
31
  isResizing: false,
 
42
  if (!activePreview) {
43
  setUrl('');
44
  setIframeUrl(undefined);
45
+
46
  return;
47
  }
48
 
 
53
 
54
  const validateUrl = useCallback(
55
  (value: string) => {
56
+ if (!activePreview) {
57
+ return false;
58
+ }
59
+
60
  const { baseUrl } = activePreview;
61
 
62
  if (value === baseUrl) {
 
105
  };
106
 
107
  document.addEventListener('fullscreenchange', handleFullscreenChange);
108
+
109
  return () => {
110
  document.removeEventListener('fullscreenchange', handleFullscreenChange);
111
  };
 
116
  };
117
 
118
  const startResizing = (e: React.MouseEvent, side: ResizeSide) => {
119
+ if (!isDeviceModeOn) {
120
+ return;
121
+ }
122
 
123
  // Prevent text selection
124
  document.body.style.userSelect = 'none';
 
136
  };
137
 
138
  const onMouseMove = (e: MouseEvent) => {
139
+ if (!resizingState.current.isResizing) {
140
+ return;
141
+ }
142
+
143
  const dx = e.clientX - resizingState.current.startX;
144
  const windowWidth = resizingState.current.windowWidth;
145
 
146
  // Apply scaling factor to increase sensitivity
147
+ const dxPercent = (dx / windowWidth) * 100 * SCALING_FACTOR;
148
 
149
  let newWidthPercent = resizingState.current.startWidthPercent;
150
 
 
173
  // Handle window resize to ensure widthPercent remains valid
174
  useEffect(() => {
175
  const handleWindowResize = () => {
176
+ /*
177
+ * Optional: Adjust widthPercent if necessary
178
+ * For now, since widthPercent is relative, no action is needed
179
+ */
180
  };
181
 
182
  window.addEventListener('resize', handleWindowResize);
183
+
184
  return () => {
185
  window.removeEventListener('resize', handleWindowResize);
186
  };
 
206
  marginLeft: '1px',
207
  }}
208
  >
209
+ ••• •••
 
210
  </div>
211
  </div>
212
  );
 
214
  return (
215
  <div ref={containerRef} className="w-full h-full flex flex-col relative">
216
  {isPortDropdownOpen && (
217
+ <div className="z-iframe-overlay w-full h-full absolute" onClick={() => setIsPortDropdownOpen(false)} />
 
 
 
218
  )}
219
  <div className="bg-bolt-elements-background-depth-2 p-2 flex items-center gap-1.5">
220
  <IconButton icon="i-ph:arrow-clockwise" onClick={reloadPreview} />
 
281
  }}
282
  >
283
  {activePreview ? (
284
+ <iframe ref={iframeRef} className="border-none w-full h-full bg-white" src={iframeUrl} allowFullScreen />
 
 
 
 
 
285
  ) : (
286
+ <div className="flex w-full h-full justify-center items-center bg-white">No preview available</div>
 
 
287
  )}
288
 
289
  {isDeviceModeOn && (