Skip to content

Commit aa23f61

Browse files
TheJeranTheJeran
authored
Merge pull request #44 from EarthyScience/dynamic-labels
Dynamic labels
2 parents 83138ce + 4b43ed0 commit aa23f61

File tree

2 files changed

+109
-115
lines changed

2 files changed

+109
-115
lines changed

‎src/components/PlotObjects/FixedTicks.tsx‎

Lines changed: 108 additions & 114 deletions
Original file line numberDiff line numberDiff line change
@@ -65,9 +65,6 @@ export function FixedTicks({
6565
const { camera } = useThree()
6666
const [bounds, setBounds] = useState<ViewportBounds>({ left: 0, right: 0, top: 0, bottom: 0 })
6767

68-
const initialHeight = useMemo(()=>(window.innerHeight-height-50),[])
69-
const [heightRatio,setHeightRatio] = useState<number>(1)
70-
7168
const xTickCount = 10;
7269
const yTickCount = 8;
7370

@@ -93,7 +90,7 @@ export function FixedTicks({
9390

9491
const initialBounds = useMemo<ViewportBounds>(()=>{
9592
const worldWidth = window.innerWidth
96-
const worldHeight = (window.innerHeight-height-48)
93+
const worldHeight = (window.innerHeight-height-50)
9794

9895
const newBounds = {
9996
left: -worldWidth / 2 + camera.position.x,
@@ -138,12 +135,6 @@ export function FixedTicks({
138135
}
139136
})
140137

141-
useEffect(()=>{
142-
if(height){
143-
const newHeight = (window.innerHeight-height-50)
144-
setHeightRatio(newHeight/initialHeight)
145-
}
146-
},[height])
147138

148139
const timeoutRef = useRef<NodeJS.Timeout | null>(null);
149140
// @ts-ignore
@@ -171,7 +162,9 @@ export function FixedTicks({
171162
};
172163
}, [height]);
173164

174-
165+
const stickyLines = 1; //This is the amount of pixels you need to zoome before the ticks readjust
166+
const vertY = (bounds.top+bounds.bottom)/2
167+
const horX = (bounds.left+bounds.right)/2 //Moved calcs here to reduce calcs
175168
return (
176169
<group >
177170
{/* Grid Lines */}
@@ -180,129 +173,130 @@ export function FixedTicks({
180173
{/* Vertical grid lines */}
181174
{Array.from({ length: xTickCount }, (_, i) => {
182175
if (i === 0 || i === xTickCount-1) return null; // Skip edges
183-
const x = initialBounds.left + (initialBounds.right - initialBounds.left) * (i / (xTickCount-1))
176+
const x = Math.round(bounds.left / stickyLines) * stickyLines +
177+
(Math.round(bounds.right / stickyLines) *stickyLines - Math.round(bounds.left / stickyLines) * stickyLines) * (i / (xTickCount-1))
178+
const normX = x/(initialBounds.right - initialBounds.left)+.5;
179+
const y = vertY
184180
return (
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-
202-
/>
203-
</line>
181+
<>
182+
<group position={[x,y,0]}>
183+
<line key={`vgrid-${i}`} >
184+
<bufferGeometry >
185+
<float32BufferAttribute
186+
attach="attributes-position"
187+
args={[new Float32Array([
188+
0, bounds.top-y, 0,
189+
0, bounds.bottom-y, 0
190+
]), 3]}
191+
/>
192+
</bufferGeometry >
193+
<lineDashedMaterial
194+
color={color}
195+
opacity={gridOpacity}
196+
transparent
197+
dashSize={0.5}
198+
gapSize={0.5}
199+
200+
/>
201+
</line>
202+
</group>
203+
204+
<group key={`top-tick-${i}`} position={[x, bounds.top, 0]}>
205+
<line>
206+
<bufferGeometry>
207+
<float32BufferAttribute
208+
attach="attributes-position"
209+
args={[new Float32Array([0, 0, 0, 0, -sizes.tickSize, 0]), 3]}
210+
/>
211+
</bufferGeometry>
212+
<lineBasicMaterial color={color} />
213+
</line>
214+
215+
{/* Only show labels for non-edge ticks */}
216+
{i !== 0 && i !== xTickCount-1 && (
217+
<Text
218+
position={[0, sizes.tickSize/4 - sizes.labelOffset, 0]}
219+
fontSize={sizes.fontSize/zoom**2}
220+
color={color}
221+
anchorX="center"
222+
anchorY="top"
223+
>
224+
{textArray?.[Math.round(normX*xDimSize)] ?? ''}
225+
</Text>
226+
)}
227+
</group>
228+
</>
204229
)
205230
})}
206231

207232
{/* Horizontal grid lines */}
208233
{Array.from({ length: yTickCount }, (_, i) => {
209234
if (i === 0 || i === yTickCount-1) return null; // Skip edges
210-
const y = (initialBounds.bottom + (initialBounds.top - initialBounds.bottom) * (i / (yTickCount-1))) * heightRatio
235+
const y = (bounds.bottom + (bounds.top - bounds.bottom) * (i / (yTickCount-1)))
236+
const normY = (y/(bounds.top - bounds.bottom)/zoom)+.5
237+
const x = horX
211238
return (
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]}
239+
<>
240+
<group position={[x,y,0]}>
241+
<line key={`hgrid-${i}`} >
242+
<bufferGeometry>
243+
<float32BufferAttribute
244+
attach="attributes-position"
245+
args={[new Float32Array([
246+
bounds.left-x, 0, 0,
247+
bounds.right-x, 0, 0
248+
]), 3]}
249+
/>
250+
</bufferGeometry>
251+
<lineDashedMaterial
252+
color={color}
253+
opacity={gridOpacity}
254+
transparent
255+
dashSize={0.}
256+
gapSize={0.5}
257+
linewidth={1}
220258
/>
221-
</bufferGeometry>
222-
<lineDashedMaterial
223-
color={color}
224-
opacity={gridOpacity}
225-
transparent
226-
dashSize={0.}
227-
gapSize={0.5}
228-
linewidth={1}
229-
/>
230-
</line>
259+
</line>
260+
</group>
261+
<group key={`right-tick-${i}`} position={[bounds.right, y, 0]}>
262+
<line>
263+
<bufferGeometry>
264+
<float32BufferAttribute
265+
attach="attributes-position"
266+
args={[new Float32Array([0, 0, 0, -sizes.tickSize, 0, 0]), 3]}
267+
/>
268+
</bufferGeometry>
269+
<lineBasicMaterial color={color} />
270+
</line>
271+
{/* Only show labels for non-edge ticks */}
272+
{i !== 0 && i !== yTickCount-1 && (
273+
<Text
274+
position={[-sizes.tickSize - sizes.labelOffset, 0, 0]}
275+
fontSize={sizes.fontSize/zoom**2}
276+
color={color}
277+
anchorX="right"
278+
anchorY="middle"
279+
>
280+
{(yRange[0]+(normY*yDimSize)).toFixed(1)}
281+
{/* {normY.toFixed(1)} */}
282+
</Text>
283+
)}
284+
</group>
285+
</>
231286
)
232287
})}
233288
</>
234289
)}
235-
{/* Top Edge Ticks */}
236-
{Array.from({ length: xTickCount }, (_, i) => {
237-
const x = initialBounds.left + (initialBounds.right - initialBounds.left) * (i / (xTickCount-1))
238-
const normX = x/(initialBounds.right - initialBounds.left)+.5;
239-
return (
240-
<group key={`top-tick-${i}`} position={[x, bounds.top, 0]}>
241-
<line>
242-
<bufferGeometry>
243-
<float32BufferAttribute
244-
attach="attributes-position"
245-
args={[new Float32Array([0, 0, 0, 0, -sizes.tickSize, 0]), 3]}
246-
/>
247-
</bufferGeometry>
248-
<lineBasicMaterial color={color} />
249-
</line>
250-
251-
{/* Only show labels for non-edge ticks */}
252-
{i !== 0 && i !== xTickCount-1 && (
253-
<Text
254-
position={[0, sizes.tickSize/4 - sizes.labelOffset, 0]}
255-
fontSize={sizes.fontSize/zoom**2}
256-
color={color}
257-
anchorX="center"
258-
anchorY="top"
259-
>
260-
{textArray?.[Math.round(normX*xDimSize)] ?? ''}
261-
</Text>
262-
)}
263-
</group>
264-
)
265-
})}
266-
267-
{/* Right Edge Ticks */}
268-
{Array.from({ length: yTickCount }, (_, i) => {
269-
const y = (initialBounds.bottom + (initialBounds.top - initialBounds.bottom) * (i / (yTickCount-1))) * heightRatio
270-
const normY = y/((initialBounds.top - initialBounds.bottom)*heightRatio)+.5
271-
return (
272-
<group key={`right-tick-${i}`} position={[bounds.right, y, 0]}>
273-
<line>
274-
<bufferGeometry>
275-
<float32BufferAttribute
276-
attach="attributes-position"
277-
args={[new Float32Array([0, 0, 0, -sizes.tickSize, 0, 0]), 3]}
278-
/>
279-
</bufferGeometry>
280-
<lineBasicMaterial color={color} />
281-
</line>
282-
{/* Only show labels for non-edge ticks */}
283-
{i !== 0 && i !== yTickCount-1 && (
284-
<Text
285-
position={[-sizes.tickSize - sizes.labelOffset, 0, 0]}
286-
fontSize={sizes.fontSize/zoom**2}
287-
color={color}
288-
anchorX="right"
289-
anchorY="middle"
290-
>
291-
{(yRange[0]+(normY*yDimSize)).toFixed(1)}
292-
</Text>
293-
)}
294-
</group>
295-
)
296-
})}
297290
<OrbitControls
298291
ref={cameraRef}
299292
enableRotate={false}
300293
enablePan={true}
301294
enableZoom={true}
302295
zoomSpeed={0.85}
303-
maxDistance={(bounds.right-bounds.left)/2}
296+
maxDistance={500}
297+
maxZoom={20}
298+
minZoom={0.5}
304299
/>
305-
{/* 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. */}
306300
</group>
307301
)
308302
}

‎src/components/PlotObjects/PlotLine.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -111,7 +111,7 @@ export const PlotLine = ({
111111
const [points,normed] = useMemo(()=>{
112112
if (!data || data.length === 0) return [[new THREE.Vector3(0,0,0)],[0]];
113113
const viewWidth = window.innerWidth;
114-
const viewHeight = (window.innerHeight-height-48); //The 48 here is the footer at the bottom
114+
const viewHeight = (window.innerHeight-height-50); //The 50 here is the footer at the bottom
115115
const xCoords = linspace(-viewWidth/2,viewWidth/2,data.length)
116116
const normed = data.map((i) => (i - minVal) / (maxVal - minVal));
117117
const points = normed.map((val,idx) => new THREE.Vector3(xCoords[idx], (val-.5)*viewHeight, 5));

0 commit comments

Comments
 (0)