Skip to content

Commit 83138ce

Browse files
TheJeranTheJeran
authored
Merge pull request #43 from EarthyScience/Points
Points
2 parents b23b7c3 + badbf7e commit 83138ce

File tree

4 files changed

+188
-100
lines changed

4 files changed

+188
-100
lines changed

‎src/components/CanvasGeometry.tsx‎

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,6 @@ interface DimCoords {
2727
plot: Pick<Coord, "units">; // Only units
2828
}
2929

30-
3130
export function CanvasGeometry() {
3231
const { variable, plotter, cmap, flipCmap } = useControls({
3332
variable: {
@@ -117,9 +116,6 @@ export function CanvasGeometry() {
117116
}
118117
setDimNames(dimNames)
119118
setDimUnits(tempDimUnits)
120-
121-
122-
123119
})
124120

125121
}
@@ -149,7 +145,6 @@ export function CanvasGeometry() {
149145
let dimCoords = coordUV.map((val,idx)=>val ? dimArrays[idx][Math.round(val*dimArrays[idx].length)] : null)
150146
const thisDimNames = dimNames.filter((_,idx)=> dimCoords[idx] !== null)
151147
const thisDimUnits = dimUnits.filter((_,idx)=> dimCoords[idx] !== null)
152-
console.log(thisDimNames)
153148
dimCoords = dimCoords.filter(val => val !== null)
154149
const dimObj = {
155150
first:{
@@ -203,14 +198,13 @@ export function CanvasGeometry() {
203198
<PlotArea height={height} coords={dimCoords as DimCoords }>
204199
<PlotLine
205200
data={timeSeries}
206-
lineWidth={5}
207-
color='orangered'
208-
range={[[-100,100],[-10,10]]}
201+
lineWidth={20}
209202
scaling={{...valueScales,colormap}}
210203
height={height}
211204
/>
212205
{dimCoords && <FixedTicks color='white' xDimArray={dimArrays[plotDim]} yRange={[valueScales.minVal,valueScales.maxVal]} coords={dimCoords as DimCoords} height={height}/>}
213206
</PlotArea>
207+
214208
{/* <Leva theme={lightTheme} /> */}
215209
</>
216210
)

‎src/components/PlotObjects/FixedTicks.tsx‎

Lines changed: 80 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import { Text } from '@react-three/drei'
1+
import { Text, OrbitControls } from '@react-three/drei'
22
import { useThree, useFrame } from '@react-three/fiber'
3-
import { useState, useMemo, useEffect } from 'react'
3+
import { useState, useMemo, useEffect, useRef } from 'react'
44
import { parseTimeUnit } from '@/utils/HelperFuncs'
55

66

@@ -62,7 +62,7 @@ export function FixedTicks({
6262
},
6363
height
6464
}: FixedTicksProps) {
65-
const { camera, size } = useThree()
65+
const { camera } = useThree()
6666
const [bounds, setBounds] = useState<ViewportBounds>({ left: 0, right: 0, top: 0, bottom: 0 })
6767

6868
const initialHeight = useMemo(()=>(window.innerHeight-height-50),[])
@@ -80,7 +80,6 @@ export function FixedTicks({
8080
const isBig = xDimArray.every(item => typeof item === "bigint");
8181
if (isBig){
8282
const unit = parseTimeUnit(coords.plot.units);
83-
console.log(unit)
8483
const timeStrings = []
8584
for (let i = 0 ; i < xDimArray.length; i++){
8685
const timeStamp = Number(xDimArray[i])*unit
@@ -109,13 +108,13 @@ export function FixedTicks({
109108

110109
const sizes = useMemo(() => {
111110
// Convert from pixels to scene units
112-
const pixelsPerUnit = size.height / ((window.innerHeight-height-50) * camera.zoom )
111+
const pixelsPerUnit = 1 / camera.zoom
113112
return {
114-
tickSize: tickSize / pixelsPerUnit,
113+
tickSize: tickSize * pixelsPerUnit,
115114
fontSize: fontSize / pixelsPerUnit,
116-
labelOffset: tickSize / pixelsPerUnit
115+
labelOffset: tickSize * pixelsPerUnit
117116
}
118-
}, [camera.zoom,tickSize, fontSize])
117+
}, [camera.zoom, tickSize, fontSize])
119118

120119
// Update bounds when camera moves
121120
// TODO: update bounds when camera zooms
@@ -141,12 +140,38 @@ export function FixedTicks({
141140

142141
useEffect(()=>{
143142
if(height){
144-
console.log(height)
145143
const newHeight = (window.innerHeight-height-50)
146-
console.log(heightRatio)
147144
setHeightRatio(newHeight/initialHeight)
148145
}
149146
},[height])
147+
148+
const timeoutRef = useRef<NodeJS.Timeout | null>(null);
149+
// @ts-ignore
150+
const cameraRef = useRef<OrbitControls | null>(null)
151+
152+
//This reset the camera position when the window is rescaled
153+
useEffect(() => {
154+
// Clear existing timeout if height changes
155+
if (timeoutRef.current){
156+
clearTimeout(timeoutRef.current);
157+
}
158+
if (cameraRef.current){
159+
// Set a timeout for 0.5 seconds
160+
timeoutRef.current = setTimeout(() => {
161+
if (cameraRef.current) {
162+
cameraRef.current.reset();
163+
}
164+
}, 100);
165+
}
166+
// Cleanup timeout when component unmounts or height changes
167+
return () => {
168+
if (timeoutRef.current !== null) {
169+
clearTimeout(timeoutRef.current);
170+
}
171+
};
172+
}, [height]);
173+
174+
150175
return (
151176
<group >
152177
{/* Grid Lines */}
@@ -157,24 +182,25 @@ export function FixedTicks({
157182
if (i === 0 || i === xTickCount-1) return null; // Skip edges
158183
const x = initialBounds.left + (initialBounds.right - initialBounds.left) * (i / (xTickCount-1))
159184
return (
160-
<line key={`vgrid-${i}`}>
161-
<bufferGeometry>
162-
<float32BufferAttribute
163-
attach="attributes-position"
164-
args={[new Float32Array([
165-
x, bounds.top, 0,
166-
x, bounds.bottom, 0
167-
]), 3]}
185+
<line key={`vgrid-${i}`} >
186+
<bufferGeometry >
187+
<float32BufferAttribute
188+
attach="attributes-position"
189+
args={[new Float32Array([
190+
x, bounds.top, 0,
191+
x, bounds.bottom, 0
192+
]), 3]}
193+
/>
194+
</bufferGeometry >
195+
<lineDashedMaterial
196+
color={color}
197+
opacity={gridOpacity}
198+
transparent
199+
dashSize={0.5}
200+
gapSize={0.5}
201+
168202
/>
169-
</bufferGeometry>
170-
<lineDashedMaterial
171-
color={color}
172-
opacity={gridOpacity}
173-
transparent
174-
dashSize={0.5}
175-
gapSize={0.5}
176-
/>
177-
</line>
203+
</line>
178204
)
179205
})}
180206

@@ -183,25 +209,25 @@ export function FixedTicks({
183209
if (i === 0 || i === yTickCount-1) return null; // Skip edges
184210
const y = (initialBounds.bottom + (initialBounds.top - initialBounds.bottom) * (i / (yTickCount-1))) * heightRatio
185211
return (
186-
<line key={`hgrid-${i}`}>
187-
<bufferGeometry>
188-
<float32BufferAttribute
189-
attach="attributes-position"
190-
args={[new Float32Array([
191-
bounds.left, y, 0,
192-
bounds.right, y, 0
193-
]), 3]}
212+
<line key={`hgrid-${i}`} >
213+
<bufferGeometry>
214+
<float32BufferAttribute
215+
attach="attributes-position"
216+
args={[new Float32Array([
217+
bounds.left, y, 0,
218+
bounds.right, y, 0
219+
]), 3]}
220+
/>
221+
</bufferGeometry>
222+
<lineDashedMaterial
223+
color={color}
224+
opacity={gridOpacity}
225+
transparent
226+
dashSize={0.}
227+
gapSize={0.5}
228+
linewidth={1}
194229
/>
195-
</bufferGeometry>
196-
<lineDashedMaterial
197-
color={color}
198-
opacity={gridOpacity}
199-
transparent
200-
dashSize={0.}
201-
gapSize={0.5}
202-
linewidth={1}
203-
/>
204-
</line>
230+
</line>
205231
)
206232
})}
207233
</>
@@ -210,7 +236,6 @@ export function FixedTicks({
210236
{Array.from({ length: xTickCount }, (_, i) => {
211237
const x = initialBounds.left + (initialBounds.right - initialBounds.left) * (i / (xTickCount-1))
212238
const normX = x/(initialBounds.right - initialBounds.left)+.5;
213-
214239
return (
215240
<group key={`top-tick-${i}`} position={[x, bounds.top, 0]}>
216241
<line>
@@ -242,7 +267,7 @@ export function FixedTicks({
242267
{/* Right Edge Ticks */}
243268
{Array.from({ length: yTickCount }, (_, i) => {
244269
const y = (initialBounds.bottom + (initialBounds.top - initialBounds.bottom) * (i / (yTickCount-1))) * heightRatio
245-
const normY = y/(initialBounds.top - initialBounds.bottom)+.5
270+
const normY = y/((initialBounds.top - initialBounds.bottom)*heightRatio)+.5
246271
return (
247272
<group key={`right-tick-${i}`} position={[bounds.right, y, 0]}>
248273
<line>
@@ -269,6 +294,14 @@ export function FixedTicks({
269294
</group>
270295
)
271296
})}
297+
<OrbitControls
298+
ref={cameraRef}
299+
enableRotate={false}
300+
enablePan={true}
301+
enableZoom={true}
302+
zoomSpeed={0.85}
303+
maxDistance={(bounds.right-bounds.left)/2}
304+
/>
272305
{/* The coordinates don't need to be here. I will move them up as they are tied inside the Canvas here. And they don't need to be here. */}
273306
</group>
274307
)

‎src/components/PlotObjects/PlotArea/PlotArea.tsx‎

Lines changed: 2 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import { Canvas } from '@react-three/fiber'
2-
import { OrbitControls } from '@react-three/drei'
32
import { parseLoc } from '@/utils/HelperFuncs'
43
import './PlotArea.css'
54

@@ -35,16 +34,11 @@ export function PlotArea({children,coords,height}: {children: React.ReactNode,co
3534
>
3635
<Canvas
3736
orthographic
38-
camera={{ position: [0, 0, 15] }}
37+
camera={{ position: [0, 0, 40] }}
3938
frameloop="demand"
4039
>
4140
{children}
42-
<OrbitControls
43-
enableRotate={false}
44-
enablePan={true}
45-
enableZoom={true}
46-
zoomSpeed={0.85}
47-
/>
41+
4842
</Canvas>
4943
{ //Only show coords when coords exist
5044
coords && coords.first.name !== 'Default' &&
@@ -55,7 +49,6 @@ export function PlotArea({children,coords,height}: {children: React.ReactNode,co
5549
<b>{`${coords['second'].name}: `}</b>
5650
{`${parseLoc(coords['second'].loc,coords['second'].units)}`}
5751
</div>
58-
5952
}
6053
</div>
6154
)

0 commit comments

Comments
 (0)