Skip to content

Commit 1dbe06f

Browse files
dudewheresmycodedudewheresmycode
committed
fix: clean up
1 parent bbd04cd commit 1dbe06f

30 files changed

Lines changed: 2430 additions & 681 deletions

‎package-lock.json‎

Lines changed: 19 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@
4343
"@emotion/react": "^11.14.0",
4444
"@emotion/styled": "^11.14.1",
4545
"@geoman-io/leaflet-geoman-free": "^2.19.2",
46+
"@gltf-transform/core": "^4.3.0",
4647
"@gsap/react": "^2.1.2",
4748
"@loaders.gl/core": "^4.3.4",
4849
"@loaders.gl/las": "^4.3.4",

‎src/components/CourseMapLayer.jsx‎

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -18,11 +18,13 @@ export default function CourseMapLayer(props) {
1818

1919
return (
2020
<ListItem secondaryAction={<IconButton onClick={handleClick}><MoreIcon /></IconButton>}>
21-
<ListItemIcon
22-
sx={{ minWidth: 30 }}
23-
>
24-
{props.icon}
25-
</ListItemIcon>
21+
{props.icon ? (
22+
<ListItemIcon
23+
sx={{ minWidth: 30 }}
24+
>
25+
{props.icon}
26+
</ListItemIcon>
27+
) : null}
2628
<ListItemText
2729
primary={props.label}
2830
secondary={props.secondary}
@@ -35,6 +37,11 @@ export default function CourseMapLayer(props) {
3537
}
3638
}}
3739
/>
40+
{props.endIcon ? (
41+
<ListItemIcon sx={{ minWidth: 30 }}>
42+
{props.endIcon}
43+
</ListItemIcon>
44+
) : null}
3845
<Menu
3946
anchorEl={anchorEl}
4047
open={open}

‎src/components/CustomMesh.jsx‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
import React, { useEffect, useRef, useMemo, useState, useCallback } from 'react';
2+
import * as THREE from 'three';
3+
import { useProject } from '../contexts/Project';
4+
5+
export default function CustomMesh(props) {
6+
const { layer, registerRef } = props;
7+
const { project } = useProject();
8+
// const ref = useRef();
9+
const [meshData, setMeshData] = useState();
10+
const [material, setMaterial] = useState(new THREE.MeshBasicMaterial({
11+
wireframe: true,
12+
color: new THREE.Color(`#${props.layer.color}`),
13+
// wireframe: settings.wireframe,
14+
// vertexColors: settings.vertexColors,
15+
transparent: true,
16+
opacity: 1
17+
}));
18+
19+
const setRef = useCallback(
20+
(node) => registerRef(layer.id, node),
21+
[layer.id, registerRef]
22+
);
23+
24+
const geometry = useMemo(() => {
25+
const geometry = new THREE.BufferGeometry();
26+
if (!meshData?.points || !meshData?.triangles) {
27+
return geometry;
28+
}
29+
const positions = meshData.points;
30+
const indices = meshData.triangles;
31+
const positionAttr = new THREE.Float32BufferAttribute(positions, 3);
32+
geometry.setAttribute('position', positionAttr);
33+
geometry.setIndex(indices);
34+
35+
// geometry.setIndex(new Uint32Array(indices));
36+
geometry.computeVertexNormals();
37+
if (meshData?.colors) {
38+
geometry.setAttribute(
39+
'color',
40+
new THREE.Float32BufferAttribute(meshData.colors, 3)
41+
);
42+
}
43+
44+
// geometry.computeBoundingBox();
45+
// geometry.computeBoundingSphere();
46+
47+
return geometry;
48+
}, [meshData]);
49+
50+
const meshPosition = useMemo(() => {
51+
const km = project.settings.distance * 1000;
52+
return [-(km/2), 0, -(km/2)];
53+
}, [project.settings.distance]);
54+
55+
// const toggleColors = useCallback(() => {
56+
// material.color = !!settings.vertexColors ? new THREE.Color(1, 1, 1) : new THREE.Color(`#${props.layer.color}`);
57+
// material.vertexColors = !!settings.vertexColors;
58+
// material.wireframe = !!settings.wireframe;
59+
// material.needsUpdate = true;
60+
// // Force re-render to update material properties
61+
// setMaterial(material);
62+
// }, [material, settings.vertexColors, settings.wireframe]);
63+
64+
useEffect(() => {
65+
if (!props.meshDataState.generated || !props.layer.id) {
66+
return;
67+
}
68+
window.meshery.project.getMeshDataForLayer(props.layer.id).then(data => {
69+
setMeshData(data.mesh);
70+
});
71+
}, [props.meshDataState]);
72+
73+
74+
return (
75+
<mesh
76+
ref={setRef}
77+
visible={props.layer.visible}
78+
name={props.layer.id}
79+
geometry={geometry}
80+
position={meshPosition}
81+
material={material}
82+
></mesh>
83+
)
84+
}

‎src/components/LayerSettings.jsx‎

Lines changed: 60 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
22
import { Box, ListItemText, IconButton, ListItem, ListItemAvatar, Avatar, ListItemButton, Link, Button, ButtonBase, Typography, CircularProgress, Accordion, AccordionDetails, AccordionSummary, Slider, Stack, Tooltip, TextField, MenuItem, Collapse, Chip } from '@mui/material';
33
import RouteIcon from '@mui/icons-material/Route';
4-
import ZoomInIcon from '@mui/icons-material/ZoomIn';
54
import ErrorIcon from '@mui/icons-material/Error';
5+
import ZoomInIcon from '@mui/icons-material/ZoomIn';
66
import VisibilityIcon from '@mui/icons-material/Visibility';
77
import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
88
import RefreshIcon from '@mui/icons-material/Refresh';
@@ -13,12 +13,12 @@ import { useMeshery } from '../contexts/Meshery.jsx';
1313
import CurveEditDialog from '../dialogs/CurveEditDialog.jsx';
1414
import SurfaceSettings from './SurfaceSettings.jsx';
1515

16-
1716
export default function LayerSettings({
1817
layer,
1918
selectedLayer,
2019
onClick,
2120
onExpand,
21+
onShowHide,
2222
onZoom,
2323
onCurveEdit,
2424
}) {
@@ -82,45 +82,66 @@ export default function LayerSettings({
8282

8383

8484
const isDisabled = useMemo(() => {
85-
return layer.error || !layer.mesh || layer.pending || !layer.conformed;
85+
return layer.error || layer.pending;
8686
}, [layer]);
87+
88+
const handleShowHide = (event) => {
89+
event.preventDefault();
90+
console.log('show');
91+
if (onShowHide) onShowHide();
92+
}
93+
const handleZoom = (event) => {
94+
event.preventDefault();
95+
console.log('hide');
96+
if (onZoom) onZoom();
97+
}
8798

8899
return (
89-
<>
90-
<Box>
91-
<Box sx={{ p: 2, opacity: layer.visible ? 1 : 0.6 }}>
92-
<ButtonBase
93-
sx={{
94-
width: '100%',
95-
display: 'flex',
96-
flexDirection: 'row',
97-
gap: 3,
98-
textAlign: 'left'
99-
}}
100-
onClick={handleClick}
101-
>
102-
{layer.error ? (
103-
<Tooltip title={layer.error}>
104-
<ErrorIcon color="error" />
105-
</Tooltip>
106-
) : (
107-
isDisabled ? (
108-
<CircularProgress size={15} />
109-
) : (
110-
<Avatar sx={{ backgroundColor: `#${layer.color}`, width: 15, height: 15 }}>{' '}</Avatar>
111-
)
112-
)}
113-
<Box sx={{ flex: 1 }}>
114-
<Typography component="span">{layer.surface}</Typography>{' '}
115-
<Typography color="textSecondary" component="span">{layer.name}</Typography>
116-
117-
</Box>
118-
<Box>
119-
{expanded ? <ExpandLessIcon /> : <ExpandMoreIcon />}
120-
</Box>
121-
</ButtonBase>
122-
</Box>
123-
</Box>
124-
</>
100+
<ListItemButton
101+
onClick={handleClick}
102+
sx={{ opacity: layer.visible ? 1 : 0.6 }}
103+
>
104+
{/* <ButtonBase
105+
sx={{
106+
width: '100%',
107+
display: 'flex',
108+
flexDirection: 'row',
109+
gap: 3,
110+
textAlign: 'left'
111+
}}
112+
onClick={handleClick}
113+
> */}
114+
115+
{/* {layer.error ? (
116+
<Tooltip title={layer.error}>
117+
<ErrorIcon color="error" />
118+
</Tooltip>
119+
) : (
120+
isDisabled ? (
121+
<CircularProgress size={15} />
122+
) : (
123+
<Avatar sx={{ backgroundColor: `#${layer.color}`, width: 15, height: 15 }}>{' '}</Avatar>
124+
)
125+
)} */}
126+
<ListItemAvatar sx={{ minWidth: 30 }}>
127+
{isDisabled ? (
128+
<CircularProgress size={15} />
129+
) : (
130+
<Avatar sx={{ backgroundColor: `#${layer.color}`, width: 15, height: 15 }}>{' '}</Avatar>
131+
)}
132+
</ListItemAvatar>
133+
<ListItemText primary={layer.name} />
134+
{/* <Box sx={{ flex: 1 }}>
135+
<Typography component="span">{layer.name}</Typography>
136+
<Typography color="textSecondary" component="span">{layer.name}</Typography>
137+
</Box> */}
138+
{/* <Box>
139+
<IconButton onClick={handleZoom} size="small"><ZoomInIcon /></IconButton>
140+
<IconButton onClick={handleShowHide} size="small">
141+
{layer.visible ? <VisibilityOffIcon /> : <VisibilityIcon />}
142+
</IconButton>
143+
</Box> */}
144+
{/* </ButtonBase> */}
145+
</ListItemButton>
125146
)
126147
}

0 commit comments

Comments
 (0)