Skip to content

Commit b5cfbec

Browse files
saumyashahimeganindya
saumyashahi
authored and
meganindya
committed
chore(masonry): resolve lint errors in brickListPanel and TowerView components
1 parent 900b403 commit b5cfbec

File tree

2 files changed

+97
-75
lines changed

2 files changed

+97
-75
lines changed

‎modules/masonry/src/palette/components/brickListPanel.tsx

Lines changed: 85 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,15 @@ import { defaultCategories as categories, PaletteMode } from '../utils/categorie
33

44
import bricksData from '../config/brick-config.json';
55
import type { BrickConfig } from '../utils/types';
6-
import { brickViews } from './registry';
6+
import { brickViews, BrickType } from './registry';
77
import '../palette.css';
88
import flow from '../assets/icons/flow.svg';
99
import music from '../assets/icons/music.svg';
1010
import graphics from '../assets/icons/graphics.svg';
1111

1212
import { useDrag } from '@react-aria/dnd';
13-
import { useSetRecoilState } from 'recoil';
14-
import { dragStateAtom } from '../../state/dragState';
13+
import { useSetRecoilState, SetterOrUpdater } from 'recoil';
14+
import { dragStateAtom, DragState } from '../../state/dragState';
1515

1616
interface BrickListPanelProps {
1717
categoryId: string;
@@ -38,6 +38,65 @@ const groupBricksByCategory = (bricks: BrickConfig[]) => {
3838
return grouped;
3939
};
4040

41+
const BrickItem: React.FC<{
42+
brick: BrickConfig;
43+
draggedBrickId: string | null;
44+
setDraggedBrickId: (id: string | null) => void;
45+
brickViews: Record<BrickType, React.FC<BrickConfig>>;
46+
setDrag: SetterOrUpdater<DragState>;
47+
}> = ({ brick, draggedBrickId, setDraggedBrickId, brickViews, setDrag }) => {
48+
const { dragProps } = useDrag({
49+
getItems() {
50+
return [
51+
{
52+
'application/json': JSON.stringify({
53+
brickType: brick.type,
54+
origin: 'palette',
55+
}),
56+
},
57+
];
58+
},
59+
});
60+
return (
61+
<div
62+
key={brick.id}
63+
className={`brick-item${draggedBrickId === brick.id ? ' dragging' : ''}`}
64+
draggable
65+
{...dragProps}
66+
onDragStart={(e) => {
67+
setDraggedBrickId(brick.id);
68+
// Find the SVG element inside the brick item
69+
const svg = e.currentTarget.querySelector('svg');
70+
if (svg) {
71+
// Clone the SVG for a cleaner drag image
72+
const clone = svg.cloneNode(true);
73+
(clone as SVGElement).style.position = 'absolute';
74+
(clone as SVGElement).style.top = '-9999px';
75+
document.body.appendChild(clone);
76+
const width = (clone as SVGSVGElement).width.baseVal.value || 40;
77+
const height = (clone as SVGSVGElement).height.baseVal.value || 40;
78+
e.dataTransfer.setDragImage(clone as Element, width / 2, height / 2);
79+
setTimeout(() => document.body.removeChild(clone), 0);
80+
}
81+
e.dataTransfer.setData(
82+
'application/json',
83+
JSON.stringify({ brickId: brick.id }),
84+
);
85+
e.dataTransfer.effectAllowed = 'copy';
86+
setDrag({ brickType: brick.type, origin: 'palette' });
87+
}}
88+
onDragEnd={() => setDraggedBrickId(null)}
89+
onDrop={() => setDraggedBrickId(null)}
90+
>
91+
{/* Directly render the brick component from the registry */}
92+
{(() => {
93+
const BrickComponent = brickViews[brick.type];
94+
return BrickComponent ? <BrickComponent {...brick} /> : null;
95+
})()}
96+
</div>
97+
);
98+
};
99+
41100
const BrickListPanel: React.FC<BrickListPanelProps> = ({
42101
categoryId,
43102
query,
@@ -55,6 +114,8 @@ const BrickListPanel: React.FC<BrickListPanelProps> = ({
55114
const [draggedBrickId, setDraggedBrickId] = useState<string | null>(null);
56115
const [dragPos, setDragPos] = useState<{ x: number; y: number } | null>(null);
57116

117+
const setDrag = useSetRecoilState(dragStateAtom);
118+
58119
useEffect(() => {
59120
setSearchQuery(query);
60121
}, [query]);
@@ -126,14 +187,14 @@ const BrickListPanel: React.FC<BrickListPanelProps> = ({
126187
const handleMouseUp = () => {
127188
setDraggedBrickId(null);
128189
setDragPos(null);
129-
window.removeEventListener('mousemove', handleMouseMove);
130-
window.removeEventListener('mouseup', handleMouseUp);
190+
window.removeEventListener('mousemove', handleMouseMove as EventListener);
191+
window.removeEventListener('mouseup', handleMouseUp as EventListener);
131192
};
132-
window.addEventListener('mousemove', handleMouseMove);
133-
window.addEventListener('mouseup', handleMouseUp);
193+
window.addEventListener('mousemove', handleMouseMove as EventListener);
194+
window.addEventListener('mouseup', handleMouseUp as EventListener);
134195
return () => {
135-
window.removeEventListener('mousemove', handleMouseMove);
136-
window.removeEventListener('mouseup', handleMouseUp);
196+
window.removeEventListener('mousemove', handleMouseMove as EventListener);
197+
window.removeEventListener('mouseup', handleMouseUp as EventListener);
137198
};
138199
}, [draggedBrickId]);
139200

@@ -215,7 +276,8 @@ const BrickListPanel: React.FC<BrickListPanelProps> = ({
215276
</div>
216277
);
217278
},
218-
(prevProps, nextProps) => prevProps.brick.id === nextProps.brick.id && prevProps.onClick === nextProps.onClick
279+
(prevProps, nextProps) =>
280+
prevProps.brick.id === nextProps.brick.id && prevProps.onClick === nextProps.onClick,
219281
);
220282

221283
return (
@@ -275,56 +337,16 @@ const BrickListPanel: React.FC<BrickListPanelProps> = ({
275337
<h4 className="category-header">{category}</h4>
276338
</div>
277339
<div className="brick-category-list">
278-
{categoryBricks.map((brick) => {
279-
const setDrag = useSetRecoilState(dragStateAtom);
280-
const { dragProps } = useDrag({
281-
getItems() {
282-
return [
283-
{
284-
'application/json': JSON.stringify({
285-
brickType: brick.type,
286-
origin: 'palette',
287-
}),
288-
},
289-
];
290-
},
291-
});
292-
293-
return (
294-
<div
295-
key={brick.id}
296-
className={`brick-item${draggedBrickId === brick.id ? ' dragging' : ''}`}
297-
draggable
298-
onDragStart={(e) => {
299-
setDraggedBrickId(brick.id);
300-
// Find the SVG element inside the brick item
301-
const svg = e.currentTarget.querySelector('svg');
302-
if (svg) {
303-
// Clone the SVG for a cleaner drag image
304-
const clone = svg.cloneNode(true);
305-
(clone as SVGElement).style.position = 'absolute';
306-
(clone as SVGElement).style.top = '-9999px';
307-
document.body.appendChild(clone);
308-
const width = (clone as SVGSVGElement).width.baseVal.value || 40;
309-
const height = (clone as SVGSVGElement).height.baseVal.value || 40;
310-
e.dataTransfer.setDragImage(clone as Element, width / 2, height / 2);
311-
setTimeout(() => document.body.removeChild(clone), 0);
312-
}
313-
e.dataTransfer.setData('application/json', JSON.stringify({ brickId: brick.id }));
314-
e.dataTransfer.effectAllowed = 'copy';
315-
setDrag({ brickType: brick.type, origin: 'palette' });
316-
}}
317-
onDragEnd={() => setDraggedBrickId(null)}
318-
onDrop={() => setDraggedBrickId(null)}
319-
>
320-
{/* Directly render the brick component from the registry */}
321-
{(() => {
322-
const BrickComponent = brickViews[brick.type];
323-
return BrickComponent ? <BrickComponent {...brick} /> : null;
324-
})()}
325-
</div>
326-
);
327-
})}
340+
{categoryBricks.map((brick) => (
341+
<BrickItem
342+
key={brick.id}
343+
brick={brick}
344+
draggedBrickId={draggedBrickId}
345+
setDraggedBrickId={setDraggedBrickId}
346+
brickViews={brickViews}
347+
setDrag={setDrag}
348+
/>
349+
))}
328350
</div>
329351
</div>
330352
),
@@ -341,7 +363,7 @@ const BrickListPanel: React.FC<BrickListPanelProps> = ({
341363
}}
342364
>
343365
{(() => {
344-
const draggedBrick = bricks.find(b => b.id === draggedBrickId);
366+
const draggedBrick = bricks.find((b) => b.id === draggedBrickId);
345367
if (!draggedBrick) return null;
346368
const BrickComponent = brickViews[draggedBrick.type];
347369
return BrickComponent ? <BrickComponent {...draggedBrick} /> : null;
@@ -415,7 +437,8 @@ const AsyncBrickView = React.memo(
415437
</div>
416438
);
417439
},
418-
(prevProps, nextProps) => prevProps.brick.id === nextProps.brick.id && prevProps.onClick === nextProps.onClick
440+
(prevProps, nextProps) =>
441+
prevProps.brick.id === nextProps.brick.id && prevProps.onClick === nextProps.onClick,
419442
);
420443

421444
export default BrickListPanel;

‎modules/masonry/src/tower/view/components/TowerView.tsx

Lines changed: 12 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -177,7 +177,7 @@ function RenderTowerNodeStack({
177177
const newX = e.clientX - rect.left;
178178
const newY = e.clientY - rect.top;
179179
// Find the tower containing this brick
180-
const tower = towers.find(t => t.hasBrick(curr.brick.uuid));
180+
const tower = towers.find((t) => t.hasBrick(curr.brick.uuid));
181181
if (tower) {
182182
tower.setBrickPosition(curr.brick.uuid, { x: newX, y: newY });
183183
setTowers([...towers]);
@@ -302,7 +302,7 @@ const TowerView: React.FC<TowerViewProps> = ({
302302
svgRef,
303303
}) => {
304304
// Mouse move handler for dragging
305-
const handleMouseMove = (e: React.MouseEvent | MouseEvent) => {
305+
const handleMouseMove = (e: MouseEvent) => {
306306
if (!draggedBrickId) return;
307307
const svg = svgRef.current;
308308
if (!svg) return;
@@ -315,17 +315,17 @@ const TowerView: React.FC<TowerViewProps> = ({
315315
};
316316

317317
// Mouse up handler to stop dragging
318-
const handleMouseUp = () => {
318+
const handleMouseUp = (e: MouseEvent) => {
319319
setDraggedBrickId(null);
320320
setIsDragging(false);
321-
window.removeEventListener('mousemove', handleMouseMove as any);
322-
window.removeEventListener('mouseup', handleMouseUp as any);
321+
window.removeEventListener('mousemove', handleMouseMove);
322+
window.removeEventListener('mouseup', handleMouseUp);
323323
};
324324

325325
// Attach global listeners when dragging starts
326326
const startGlobalDrag = () => {
327-
window.addEventListener('mousemove', handleMouseMove as any);
328-
window.addEventListener('mouseup', handleMouseUp as any);
327+
window.addEventListener('mousemove', handleMouseMove);
328+
window.addEventListener('mouseup', handleMouseUp);
329329
};
330330

331331
// Render logic (same as before, but pass handlers to each brick)
@@ -385,7 +385,10 @@ const TowerView: React.FC<TowerViewProps> = ({
385385
transform={`translate(${x},${y})`}
386386
style={{
387387
cursor: isDragging && draggedBrickId === curr.brick.uuid ? 'grabbing' : 'grab',
388-
filter: isDragging && draggedBrickId === curr.brick.uuid ? 'drop-shadow(0 4px 2px rgba(0,0,0,0.25))' : undefined,
388+
filter:
389+
isDragging && draggedBrickId === curr.brick.uuid
390+
? 'drop-shadow(0 4px 2px rgba(0,0,0,0.25))'
391+
: undefined,
389392
}}
390393
onMouseDown={handleMouseDown}
391394
>
@@ -436,11 +439,7 @@ const TowerView: React.FC<TowerViewProps> = ({
436439
));
437440
}, [tower, draggedBrickId, dragOffset, isDragging, svgRef]);
438441

439-
return (
440-
<g>
441-
{renderedTower}
442-
</g>
443-
);
442+
return <g>{renderedTower}</g>;
444443
};
445444

446445
export default TowerView;

0 commit comments

Comments
 (0)