Skip to content

Commit 61e5e2c

Browse files
lassejacolassejaco
committed
eip summit
1 parent 2912a98 commit 61e5e2c

11 files changed

Lines changed: 1770 additions & 55 deletions

File tree

‎devconnect-app/next.config.ts‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,10 +35,58 @@ const nextConfig: NextConfig = {
3535
};
3636
}
3737

38+
// Apply specific config for maps folder SVGs
39+
config.module.rules.push({
40+
test: /\.svg$/,
41+
include: /\/maps\//,
42+
use: [
43+
{
44+
loader: '@svgr/webpack',
45+
options: {
46+
svgoConfig: {
47+
plugins: [
48+
{
49+
name: 'preset-default',
50+
params: {
51+
overrides: {
52+
cleanupIds: false,
53+
},
54+
},
55+
},
56+
],
57+
},
58+
},
59+
},
60+
],
61+
});
62+
3863
return config;
3964
},
4065
turbopack: {
4166
rules: {
67+
// Prevent ID cleanup for SVGs in maps folder
68+
'**/maps/**/*.svg': {
69+
loaders: [
70+
{
71+
loader: '@svgr/webpack',
72+
options: {
73+
svgoConfig: {
74+
plugins: [
75+
{
76+
name: 'preset-default',
77+
params: {
78+
overrides: {
79+
cleanupIds: false,
80+
},
81+
},
82+
},
83+
],
84+
},
85+
},
86+
},
87+
],
88+
as: '*.js',
89+
},
4290
'*.svg': {
4391
loaders: ['@svgr/webpack'],
4492
as: '*.js',

‎devconnect-app/src/app/map/venue-map/VenueMap2.tsx‎

Lines changed: 62 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import React, {
88
useMemo,
99
} from 'react';
1010
import { usePanzoom, PanzoomControls } from './panzoom';
11-
import MapTest from './maps/MapTest';
11+
import MapTest from './maps/MapWrapper';
1212
import {
1313
svgToLookup,
1414
svgToLookupWithGroups,
@@ -56,17 +56,17 @@ const MapPane = (props: {
5656

5757
const initialFilters = {
5858
search: '', // Search term, not supported yet but added for future use
59-
selection: [], // Array for flexibility in case we want to build more complex filter combinations
59+
selection: null, // Array for flexibility in case we want to build more complex filter combinations
6060
} as {
6161
search: string;
62-
selection: string[];
62+
selection: string | null;
6363
};
6464

6565
export const VenueMap = () => {
6666
const svgRef = useRef<SVGSVGElement | null>(null);
6767
const containerRef = useRef<HTMLDivElement | null>(null);
6868
const [elementLookup, setElementLookup] = useState<SVGLookup>({});
69-
const [svgScale, setSvgScale] = useState({ scaleX: 1, scaleY: 1 });
69+
// const [svgScale, setSvgScale] = useState({ scaleX: 1, scaleY: 1 });
7070
const [hoveredElement, setHoveredElement] = useState<string | null>(null);
7171
const searchParams = useSearchParams();
7272
const [elementData, setElementData] = useState<{ [key: string]: any }>({
@@ -83,6 +83,9 @@ export const VenueMap = () => {
8383
groups: ['coworks'],
8484
},
8585
});
86+
const [zoomLevel, setZoomLevel] = useState<'zoomed-in' | 'zoomed-out'>(
87+
'zoomed-out'
88+
);
8689

8790
const [currentFilters, setCurrentFilters] =
8891
useState<typeof initialFilters>(initialFilters);
@@ -92,7 +95,7 @@ export const VenueMap = () => {
9295
if (selection) {
9396
setCurrentFilters({
9497
...currentFilters,
95-
selection: [selection],
98+
selection: selection,
9699
});
97100
}
98101
}, [searchParams]);
@@ -111,7 +114,7 @@ export const VenueMap = () => {
111114

112115
// console.log(allPossibleFilters, 'allPossibleFilters');
113116

114-
const selectedElements = useMemo(() => {
117+
const selectedElement = useMemo(() => {
115118
const { groups, elements } = allPossibleFilters;
116119

117120
// Selected filters
@@ -120,27 +123,32 @@ export const VenueMap = () => {
120123
// return filters[key];
121124
// });
122125

123-
return elements.filter((key) => {
126+
return elements.find((key) => {
124127
// const element = elementLookup[key];
125128
const element = elementData[key];
126-
const elementGroups = element?.groups;
129+
// const elementGroups = element?.groups;
127130

128131
// @ts-ignore
129-
const isInGroup = elementGroups
130-
? currentFilters.selection.some((activeGroup: string) =>
131-
elementGroups.some((g: string) => g === activeGroup)
132-
)
133-
: false;
132+
// const isInGroup = elementGroups
133+
// ? currentFilters.selection.some((activeGroup: string) =>
134+
// elementGroups.some((g: string) => g === activeGroup)
135+
// )
136+
// : false;
134137
// @ts-ignore
135-
const isSelected = currentFilters.selection.includes(key);
138+
const isSelected = currentFilters.selection === key;
136139

137-
return isInGroup || isSelected;
140+
return isSelected; // isInGroup || isSelected;
138141
});
139142
}, [currentFilters, allPossibleFilters]);
140143

144+
console.log(selectedElement, 'selectedElements');
145+
141146
// console.log(selectedElements, 'selectedElements');
142147

143-
const { panzoomInstance, interactionsLocked } = usePanzoom('venue-map');
148+
const { panzoomInstance, interactionsLocked } = usePanzoom(
149+
'venue-map',
150+
setZoomLevel
151+
);
144152

145153
useEffect(() => {
146154
const elementsWithIds = svgRef.current?.querySelectorAll(
@@ -175,19 +183,19 @@ export const VenueMap = () => {
175183
// // }
176184
// });
177185

178-
requestAnimationFrame(() => {
179-
if (svgRef.current) {
180-
const svgRect = svgRef.current.getBoundingClientRect();
181-
const viewBox = svgRef.current.viewBox.baseVal;
182-
const scaleX = svgRect.width / viewBox.width;
183-
const scaleY = svgRect.height / viewBox.height;
184-
setSvgScale({ scaleX, scaleY });
185-
}
186-
});
186+
// requestAnimationFrame(() => {
187+
// if (svgRef.current) {
188+
// const svgRect = svgRef.current.getBoundingClientRect();
189+
// const viewBox = svgRef.current.viewBox.baseVal;
190+
// const scaleX = svgRect.width / viewBox.width;
191+
// const scaleY = svgRect.height / viewBox.height;
192+
// setSvgScale({ scaleX, scaleY });
193+
// }
194+
// });
187195
}, []);
188196

189197
const hasActiveFilters =
190-
currentFilters.selection.length > 0 || currentFilters.search.length > 0;
198+
currentFilters.selection !== null || currentFilters.search.length > 0;
191199

192200
// Apply hover effect to all SVG elements dynamically
193201
useEffect(() => {
@@ -196,7 +204,7 @@ export const VenueMap = () => {
196204
const svgElements = svgRef.current.querySelectorAll('[id]:not(g)');
197205

198206
svgElements.forEach((element) => {
199-
const isSelected = selectedElements.includes(element.id);
207+
const isSelected = selectedElement === element.id;
200208
const isHovered = hoveredElement === element.id;
201209

202210
const svgElement = element as SVGElement;
@@ -210,7 +218,7 @@ export const VenueMap = () => {
210218
svgElement.style.opacity = '1';
211219
}
212220
});
213-
}, [selectedElements, hoveredElement, hasActiveFilters]);
221+
}, [selectedElement, hoveredElement, hasActiveFilters]);
214222

215223
const handleSVGMouseOver = (e: React.MouseEvent<HTMLDivElement>) => {
216224
const target = e.target as SVGElement;
@@ -240,6 +248,7 @@ export const VenueMap = () => {
240248

241249
const focusOnElement = (id: string) => {
242250
const svgElement = document.getElementById(id);
251+
243252
if (!svgElement || !panzoomInstance || !containerRef.current) return;
244253

245254
// Get actual screen positions - no scaling needed!
@@ -267,28 +276,27 @@ export const VenueMap = () => {
267276
id: string,
268277
event: React.MouseEvent<SVGElement>
269278
) => {
270-
if (elementLookup[id] && !interactionsLocked) {
271-
// const isCurrentlySelected = selectedElement === id;
272-
// setSelectedElement(isCurrentlySelected ? null : id);
279+
// if (elementLookup[id] && !interactionsLocked) {
280+
// const isCurrentlySelected = selectedElement === id;
281+
// setSelectedElement(isCurrentlySelected ? null : id);
273282

274-
setCurrentFilters({
275-
...currentFilters,
276-
selection: [id],
277-
});
283+
// console.log(id, 'id');
278284

279-
// Focus on the element if it's being selected (not deselected)
280-
// if (!isCurrentlySelected) {
281-
focusOnElement(id);
282-
// }
283-
}
285+
setCurrentFilters({
286+
...currentFilters,
287+
selection: id,
288+
});
289+
290+
focusOnElement(id);
284291
};
285292

286293
return (
287294
<div
288295
ref={containerRef}
289296
id="venue-container"
290297
className={cn(
291-
'relative w-full overflow-hidden grow flex py-8'
298+
'relative w-full overflow-hidden grow flex py-8',
299+
'gradient-background'
292300
// hasActiveFilters && css['has-selection-or-hover']
293301
)}
294302
onClick={(e) => {
@@ -328,7 +336,7 @@ export const VenueMap = () => {
328336
</div>
329337

330338
<MapPane
331-
selection={currentFilters.selection[0]}
339+
selection={currentFilters.selection}
332340
elementLookup={elementLookup}
333341
setCurrentFilters={setCurrentFilters}
334342
/>
@@ -344,19 +352,21 @@ export const VenueMap = () => {
344352
e.preventDefault();
345353
panzoomInstance?.moveTo(0, 0);
346354
panzoomInstance?.smoothZoomAbs(0, 0, 1);
347-
setCurrentFilters({ ...currentFilters, selection: [group] });
355+
setCurrentFilters({ ...currentFilters, selection: group });
348356
}}
349357
onTouchEnd={(e) => {
350358
e.stopPropagation();
351359
e.preventDefault();
352360
panzoomInstance?.moveTo(0, 0);
353361
panzoomInstance?.smoothZoomAbs(0, 0, 1);
354-
setCurrentFilters({ ...currentFilters, selection: [group] });
362+
setCurrentFilters({ ...currentFilters, selection: group });
355363
}}
356364
>
357365
{group}
358366
</button>
359367
))}
368+
369+
{zoomLevel}
360370
</div>
361371

362372
{/* Zoom controls */}
@@ -409,3 +419,11 @@ export const VenueMap = () => {
409419
4) Get current zoom level
410420
5) Show different parts of the map depending on the zoom level (low to high fidelity)
411421
*/
422+
423+
/*
424+
1) All data should be fetched and ready
425+
426+
2) On click, set id
427+
2.1) Pane should receive the current selection
428+
429+
*/

‎devconnect-app/src/app/map/venue-map/map.module.scss‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,14 @@
22
background: hsla(0, 0%, 100%, .97);
33
backdrop-filter: blur(4px);
44
-webkit-backdrop-filter: blur(4px);
5+
6+
g[id='Icons'] {
7+
display: none;
8+
}
9+
10+
g[id='Info'] {
11+
display: none;
12+
}
513
}
614

715
// .has-selection-or-hover {

‎devconnect-app/src/app/map/venue-map/maps/MapWrapper.tsx‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import React, { forwardRef, useRef } from 'react';
2+
import useSVGProps from './event-listeners';
3+
import Map from './devconnect-map.svg';
4+
5+
interface MapTestProps {
6+
onSVGElementClick: (id: string, event: React.MouseEvent<SVGElement>) => void;
7+
}
8+
9+
const MapTest = forwardRef<SVGSVGElement, MapTestProps>(
10+
({ onSVGElementClick }, ref) => {
11+
const svgProps = { ...useSVGProps({ onSVGElementClick }), ref };
12+
13+
return <Map {...svgProps} />;
14+
}
15+
);
16+
17+
export default MapTest;

0 commit comments

Comments
 (0)