Skip to content

Commit afdcddf

Browse files
MohamedAli1937MohamedAli1937
committed
chore: format with prettier
1 parent 37294ab commit afdcddf

8 files changed

Lines changed: 149 additions & 124 deletions

File tree

‎imagelab-frontend/README.md‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -17,9 +17,9 @@ If you are developing a production application, we recommend updating the config
1717

1818
```js
1919
export default defineConfig([
20-
globalIgnores(['dist']),
20+
globalIgnores(["dist"]),
2121
{
22-
files: ['**/*.{ts,tsx}'],
22+
files: ["**/*.{ts,tsx}"],
2323
extends: [
2424
// Other configs...
2525

@@ -34,40 +34,40 @@ export default defineConfig([
3434
],
3535
languageOptions: {
3636
parserOptions: {
37-
project: ['./tsconfig.node.json', './tsconfig.app.json'],
37+
project: ["./tsconfig.node.json", "./tsconfig.app.json"],
3838
tsconfigRootDir: import.meta.dirname,
3939
},
4040
// other options...
4141
},
4242
},
43-
])
43+
]);
4444
```
4545

4646
You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
4747

4848
```js
4949
// eslint.config.js
50-
import reactX from 'eslint-plugin-react-x'
51-
import reactDom from 'eslint-plugin-react-dom'
50+
import reactX from "eslint-plugin-react-x";
51+
import reactDom from "eslint-plugin-react-dom";
5252

5353
export default defineConfig([
54-
globalIgnores(['dist']),
54+
globalIgnores(["dist"]),
5555
{
56-
files: ['**/*.{ts,tsx}'],
56+
files: ["**/*.{ts,tsx}"],
5757
extends: [
5858
// Other configs...
5959
// Enable lint rules for React
60-
reactX.configs['recommended-typescript'],
60+
reactX.configs["recommended-typescript"],
6161
// Enable lint rules for React DOM
6262
reactDom.configs.recommended,
6363
],
6464
languageOptions: {
6565
parserOptions: {
66-
project: ['./tsconfig.node.json', './tsconfig.app.json'],
66+
project: ["./tsconfig.node.json", "./tsconfig.app.json"],
6767
tsconfigRootDir: import.meta.dirname,
6868
},
6969
// other options...
7070
},
7171
},
72-
])
72+
]);
7373
```

‎imagelab-frontend/eslint.config.js‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
1-
import js from '@eslint/js'
2-
import globals from 'globals'
3-
import reactHooks from 'eslint-plugin-react-hooks'
4-
import reactRefresh from 'eslint-plugin-react-refresh'
5-
import tseslint from 'typescript-eslint'
6-
import { defineConfig, globalIgnores } from 'eslint/config'
1+
import js from "@eslint/js";
2+
import globals from "globals";
3+
import reactHooks from "eslint-plugin-react-hooks";
4+
import reactRefresh from "eslint-plugin-react-refresh";
5+
import tseslint from "typescript-eslint";
6+
import { defineConfig, globalIgnores } from "eslint/config";
77

88
export default defineConfig([
9-
globalIgnores(['dist']),
9+
globalIgnores(["dist"]),
1010
{
11-
files: ['**/*.{ts,tsx}'],
11+
files: ["**/*.{ts,tsx}"],
1212
extends: [
1313
js.configs.recommended,
1414
tseslint.configs.recommended,
@@ -20,4 +20,4 @@ export default defineConfig([
2020
globals: globals.browser,
2121
},
2222
},
23-
])
23+
]);

‎imagelab-frontend/src/components/Layout.tsx‎

Lines changed: 45 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ const isMac =
5353
navigator as Navigator & {
5454
userAgentData?: { platform?: string };
5555
}
56-
).userAgentData?.platform ?? navigator.userAgent
56+
).userAgentData?.platform ?? navigator.userAgent,
5757
);
5858
const modShift = isMac ? "⌘⇧" : "Ctrl+Shift+";
5959

@@ -62,17 +62,27 @@ export default function Layout() {
6262
const mainRowRef = useRef<HTMLDivElement>(null);
6363
const [resetKey, setResetKey] = useState(0);
6464
const [sidebarWidth, setSidebarWidth] = useState(() =>
65-
loadStoredNumber(STORAGE_KEYS.sidebarWidth, DEFAULT_SIDEBAR_WIDTH, MIN_SIDEBAR_WIDTH, MAX_SIDEBAR_WIDTH)
65+
loadStoredNumber(
66+
STORAGE_KEYS.sidebarWidth,
67+
DEFAULT_SIDEBAR_WIDTH,
68+
MIN_SIDEBAR_WIDTH,
69+
MAX_SIDEBAR_WIDTH,
70+
),
6671
);
6772
const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(() =>
68-
loadStoredBool(STORAGE_KEYS.sidebarCollapsed)
73+
loadStoredBool(STORAGE_KEYS.sidebarCollapsed),
6974
);
7075
const [isResizing, setIsResizing] = useState(false);
7176
const [previewWidth, setPreviewWidth] = useState(() =>
72-
loadStoredNumber(STORAGE_KEYS.previewWidth, DEFAULT_PREVIEW_WIDTH, MIN_PREVIEW_WIDTH, MAX_PREVIEW_WIDTH)
77+
loadStoredNumber(
78+
STORAGE_KEYS.previewWidth,
79+
DEFAULT_PREVIEW_WIDTH,
80+
MIN_PREVIEW_WIDTH,
81+
MAX_PREVIEW_WIDTH,
82+
),
7383
);
7484
const [isPreviewCollapsed, setIsPreviewCollapsed] = useState(() =>
75-
loadStoredBool(STORAGE_KEYS.previewCollapsed)
85+
loadStoredBool(STORAGE_KEYS.previewCollapsed),
7686
);
7787
const [isPreviewResizing, setIsPreviewResizing] = useState(false);
7888

@@ -109,31 +119,37 @@ export default function Layout() {
109119
};
110120
}, []);
111121

112-
const startResizing = useCallback((e: React.MouseEvent) => {
113-
sidebarDragStartRef.current = { x: e.clientX, width: sidebarWidth };
114-
setIsResizing(true);
115-
}, [sidebarWidth]);
122+
const startResizing = useCallback(
123+
(e: React.MouseEvent) => {
124+
sidebarDragStartRef.current = { x: e.clientX, width: sidebarWidth };
125+
setIsResizing(true);
126+
},
127+
[sidebarWidth],
128+
);
116129

117130
const stopResizing = useCallback(() => {
118131
setIsResizing(false);
119132
sidebarDragStartRef.current = null;
120133
}, []);
121134

122-
const resize = useCallback(
123-
(e: MouseEvent) => {
124-
if (!sidebarDragStartRef.current) return;
125-
const deltaX = e.clientX - sidebarDragStartRef.current.x;
126-
const w = Math.max(MIN_SIDEBAR_WIDTH, Math.min(MAX_SIDEBAR_WIDTH, sidebarDragStartRef.current.width + deltaX));
127-
setSidebarWidth(w);
135+
const resize = useCallback((e: MouseEvent) => {
136+
if (!sidebarDragStartRef.current) return;
137+
const deltaX = e.clientX - sidebarDragStartRef.current.x;
138+
const w = Math.max(
139+
MIN_SIDEBAR_WIDTH,
140+
Math.min(MAX_SIDEBAR_WIDTH, sidebarDragStartRef.current.width + deltaX),
141+
);
142+
setSidebarWidth(w);
143+
}, []);
144+
145+
const startPreviewResizing = useCallback(
146+
(e: React.MouseEvent) => {
147+
previewDragStartRef.current = { x: e.clientX, width: previewWidth };
148+
setIsPreviewResizing(true);
128149
},
129-
[]
150+
[previewWidth],
130151
);
131152

132-
const startPreviewResizing = useCallback((e: React.MouseEvent) => {
133-
previewDragStartRef.current = { x: e.clientX, width: previewWidth };
134-
setIsPreviewResizing(true);
135-
}, [previewWidth]);
136-
137153
const stopPreviewResizing = useCallback(() => {
138154
setIsPreviewResizing(false);
139155
previewDragStartRef.current = null;
@@ -146,12 +162,12 @@ export default function Layout() {
146162
const deltaX = previewDragStartRef.current.x - e.clientX;
147163
const w = Math.max(
148164
MIN_PREVIEW_WIDTH,
149-
Math.min(MAX_PREVIEW_WIDTH, previewDragStartRef.current.width + deltaX)
165+
Math.min(MAX_PREVIEW_WIDTH, previewDragStartRef.current.width + deltaX),
150166
);
151167
pendingPreviewWidth.current = w;
152168
scheduleWidthUpdate();
153169
},
154-
[scheduleWidthUpdate]
170+
[scheduleWidthUpdate],
155171
);
156172

157173
useEffect(() => {
@@ -244,7 +260,12 @@ export default function Layout() {
244260
onTogglePreview={togglePreview}
245261
/>
246262
<div className="flex flex-1 min-h-0 relative">
247-
<div id="sidebar-panel" role="complementary" aria-label="Blocks panel" className="flex h-full">
263+
<div
264+
id="sidebar-panel"
265+
role="complementary"
266+
aria-label="Blocks panel"
267+
className="flex h-full"
268+
>
248269
<Sidebar
249270
workspace={workspace}
250271
width={isSidebarCollapsed ? 0 : sidebarWidth}
@@ -262,7 +283,6 @@ export default function Layout() {
262283
/>
263284
)}
264285

265-
266286
<ErrorBoundary key={resetKey} onReset={handleEditorReset}>
267287
<div ref={mainRowRef} className="flex-1 flex min-w-0 bg-white relative">
268288
<div className="flex-1 flex flex-col min-w-0">

‎imagelab-frontend/src/components/Preview/PreviewPane.tsx‎

Lines changed: 57 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -67,64 +67,66 @@ export default function PreviewPane({
6767
>
6868
<div className="min-w-[200px] flex flex-col h-full">
6969
{/* Original image — top half */}
70-
<div className="flex-1 flex flex-col min-h-0 border-b border-gray-200">
71-
<div className="px-3 py-1.5 border-b border-gray-200 flex items-center gap-1.5">
72-
<Image size={14} className="text-gray-400" />
73-
<h2 className="text-xs font-semibold text-gray-500 uppercase tracking-wider">Original</h2>
74-
{originalImage && (
75-
<button
76-
onClick={clearImage}
77-
className="ml-auto p-1 rounded hover:bg-red-50 text-gray-400 hover:text-red-500 transition-colors"
78-
title="Remove image"
79-
>
80-
<Trash2 size={14} />
81-
</button>
82-
)}
83-
</div>
84-
<div className="flex-1 flex items-center justify-center p-3 bg-gray-50 overflow-auto">
85-
{originalImage ? (
86-
<ImageDisplay image={originalImage} format={imageFormat} zoomWidth={originalZoom} />
87-
) : (
88-
<p className="text-sm text-gray-400">Use the Read Image block to upload</p>
89-
)}
70+
<div className="flex-1 flex flex-col min-h-0 border-b border-gray-200">
71+
<div className="px-3 py-1.5 border-b border-gray-200 flex items-center gap-1.5">
72+
<Image size={14} className="text-gray-400" />
73+
<h2 className="text-xs font-semibold text-gray-500 uppercase tracking-wider">
74+
Original
75+
</h2>
76+
{originalImage && (
77+
<button
78+
onClick={clearImage}
79+
className="ml-auto p-1 rounded hover:bg-red-50 text-gray-400 hover:text-red-500 transition-colors"
80+
title="Remove image"
81+
>
82+
<Trash2 size={14} />
83+
</button>
84+
)}
85+
</div>
86+
<div className="flex-1 flex items-center justify-center p-3 bg-gray-50 overflow-auto">
87+
{originalImage ? (
88+
<ImageDisplay image={originalImage} format={imageFormat} zoomWidth={originalZoom} />
89+
) : (
90+
<p className="text-sm text-gray-400">Use the Read Image block to upload</p>
91+
)}
92+
</div>
93+
<ZoomControls
94+
disabled={!originalImage}
95+
onZoomIn={zoomIn(setOriginalZoom)}
96+
onZoomOut={zoomOut(setOriginalZoom)}
97+
/>
9098
</div>
91-
<ZoomControls
92-
disabled={!originalImage}
93-
onZoomIn={zoomIn(setOriginalZoom)}
94-
onZoomOut={zoomOut(setOriginalZoom)}
95-
/>
96-
</div>
9799

98-
{/* Processed image — bottom half */}
99-
<div className="flex-1 flex flex-col min-h-0">
100-
<div className="px-3 py-1.5 border-b border-gray-200 flex items-center gap-1.5">
101-
<ImageDown size={14} className="text-gray-400" />
102-
<h2 className="text-xs font-semibold text-gray-500 uppercase tracking-wider">
103-
Processed
104-
</h2>
105-
</div>
106-
<div className="flex-1 flex items-center justify-center p-3 bg-gray-50 overflow-auto">
107-
{processedImage ? (
108-
<ImageDisplay image={processedImage} format={imageFormat} zoomWidth={processedZoom} />
109-
) : (
110-
<p className="text-sm text-gray-400">
111-
{originalImage ? "Run the pipeline to see results" : "No image loaded"}
112-
</p>
113-
)}
114-
</div>
115-
{error && (
116-
<div className="px-3 py-2 bg-red-50 border-t border-red-200">
117-
<p className="text-xs text-red-600 font-semibold mb-0.5">
118-
{errorStep !== null ? `Error in Step ${errorStep}` : "Pipeline Error"}
119-
</p>
120-
<p className="text-xs text-red-600">{error}</p>
100+
{/* Processed image — bottom half */}
101+
<div className="flex-1 flex flex-col min-h-0">
102+
<div className="px-3 py-1.5 border-b border-gray-200 flex items-center gap-1.5">
103+
<ImageDown size={14} className="text-gray-400" />
104+
<h2 className="text-xs font-semibold text-gray-500 uppercase tracking-wider">
105+
Processed
106+
</h2>
121107
</div>
122-
)}
123-
<ZoomControls
124-
disabled={!processedImage}
125-
onZoomIn={zoomIn(setProcessedZoom)}
126-
onZoomOut={zoomOut(setProcessedZoom)}
127-
/>
108+
<div className="flex-1 flex items-center justify-center p-3 bg-gray-50 overflow-auto">
109+
{processedImage ? (
110+
<ImageDisplay image={processedImage} format={imageFormat} zoomWidth={processedZoom} />
111+
) : (
112+
<p className="text-sm text-gray-400">
113+
{originalImage ? "Run the pipeline to see results" : "No image loaded"}
114+
</p>
115+
)}
116+
</div>
117+
{error && (
118+
<div className="px-3 py-2 bg-red-50 border-t border-red-200">
119+
<p className="text-xs text-red-600 font-semibold mb-0.5">
120+
{errorStep !== null ? `Error in Step ${errorStep}` : "Pipeline Error"}
121+
</p>
122+
<p className="text-xs text-red-600">{error}</p>
123+
</div>
124+
)}
125+
<ZoomControls
126+
disabled={!processedImage}
127+
onZoomIn={zoomIn(setProcessedZoom)}
128+
onZoomOut={zoomOut(setProcessedZoom)}
129+
/>
128130
</div>
129131
</div>
130132
</div>

0 commit comments

Comments
 (0)