Merge pull request #49 from EarthyScience/Plot-Axis-Scaler

Implement-sperate scaling of the axis'

Author: TheJeran

src/components/PlotObjects/FixedTicks.tsx

@@ -18,7 +18,9 @@ interface FixedTicksProps {
   fontSize?: number;
   showGrid?: boolean;
   gridOpacity?: number;
-  height:number
+  height:number,
+  yScale:number,
+  xScale:number,
 }
 
 export function FixedTicks({ 
@@ -27,7 +29,9 @@ export function FixedTicks({
   fontSize = 18,
   showGrid = true,
   gridOpacity = 0.5,
-  height
+  height,
+  yScale = 1,
+  xScale=1,
 }: FixedTicksProps) {
   const { camera } = useThree()
   const [bounds, setBounds] = useState<ViewportBounds>({ left: 0, right: 0, top: 0, bottom: 0 })
@@ -143,7 +147,7 @@ export function FixedTicks({
             if (i === 0 || i === xTickCount-1) return null; // Skip edges
             const x = Math.round(bounds.left / stickyLines) * stickyLines + 
             (Math.round(bounds.right / stickyLines) *stickyLines -  Math.round(bounds.left / stickyLines) * stickyLines) * (i / (xTickCount-1))
-            const normX = x/(initialBounds.right - initialBounds.left)+.5;
+            const normX = x/xScale/(initialBounds.right - initialBounds.left)+.5;
             const y = vertY
             return (
               <>
@@ -201,7 +205,7 @@ export function FixedTicks({
           {Array.from({ length: yTickCount }, (_, i) => {
             if (i === 0 || i === yTickCount-1) return null; // Skip edges
             const y = (bounds.bottom  + (bounds.top - bounds.bottom) * (i / (yTickCount-1)))
-            const normY = (y/(bounds.top - bounds.bottom)/zoom)+.5
+            const normY = (y/yScale/(bounds.top - bounds.bottom)/zoom)+.5
             const x = horX
             return (
               <>
@@ -246,7 +250,7 @@ export function FixedTicks({
                       anchorY="middle"
                     >
                       {(yRange[0]+(normY*yDimSize)).toFixed(1)}
-                      {/* {normY.toFixed(1)} */}
+
                     </Text>
                   )}
                 </group>

src/components/PlotObjects/PlotArea/PlotArea.tsx

@@ -3,7 +3,7 @@ import { parseLoc } from '@/utils/HelperFuncs'
 import { PlotLine, FixedTicks } from '@/components/PlotObjects'
 import { useContext, useEffect, useState } from 'react'
 import { plotContext } from '@/components/Contexts'
-import { ResizeBar } from '@/components/UI'
+import { ResizeBar, YScaler,XScaler } from '@/components/UI'
 import './PlotArea.css'
 
 interface pointInfo{
@@ -53,6 +53,9 @@ export function PlotArea() {
   const [showPointInfo,setShowPointInfo] = useState<boolean>(false)
   const [height, setHeight] = useState<number>(Math.round(window.innerHeight-(window.innerHeight*0.15)-48))
 
+  const [yScale,setYScale] = useState<number>(1)
+  const [xScale,setXScale] = useState<number>(1)
+
   const pointSetters ={
     setPointID,
     setPointLoc,
@@ -73,13 +76,15 @@ export function PlotArea() {
     >
       <PointInfo pointID={pointID} pointLoc={pointLoc} showPointInfo={showPointInfo} />
       <ResizeBar height={height} setHeight={setHeight}/> 
+      <YScaler scale={yScale} setScale={setYScale} />
+      <XScaler scale={xScale} setScale={setXScale} />
       <Canvas
       orthographic
         camera={{ position: [0, 0, 40] }}
         frameloop="demand"
       >
-        <PlotLine height={height} pointSetters={pointSetters}/>
-        <FixedTicks height={height}/>
+        <PlotLine height={height} pointSetters={pointSetters} yScale={yScale} xScale={xScale}/>
+        <FixedTicks height={height} yScale={yScale} xScale={xScale}/>
       </Canvas>
       { //Only show coords when coords exist
         coords && coords.first.name !== 'Default' && 

src/components/PlotObjects/PlotLine.tsx

@@ -13,7 +13,9 @@ interface PlotLineProps {
   pointColor?: string;
   interpolation?: 'linear' | 'curved';
   height:number,
-  pointSetters:pointSetters
+  pointSetters:pointSetters,
+  yScale:number,
+  xScale:number
 }
 
 interface pointSetters{
@@ -104,10 +106,12 @@ export const PlotLine = ({
   lineWidth = 5,
   showPoints = true,
   pointSize = 5,
-  pointColor = "white",
+  pointColor = "#777777",
   interpolation = 'linear',
   height,
-  pointSetters
+  pointSetters,
+  yScale,
+  xScale
 }: PlotLineProps) => {
 
   const {scaling, timeSeries} = useContext(plotContext)
@@ -129,11 +133,11 @@ export const PlotLine = ({
     if (!data || data.length === 0) return [[new THREE.Vector3(0,0,0)],[0]];
     const viewWidth = window.innerWidth;
     const viewHeight = (window.innerHeight-height-50); //The 50 here is the footer at the bottom
-    const xCoords = linspace(-viewWidth/2,viewWidth/2,data.length)
+    const xCoords = linspace(-viewWidth*xScale/2,viewWidth*xScale/2,data.length)
     const normed = data.map((i) => (i - minVal) / (maxVal - minVal));
-    const points = normed.map((val,idx) => new THREE.Vector3(xCoords[idx], (val-.5)*viewHeight, 5)); 
+    const points = normed.map((val,idx) => new THREE.Vector3(xCoords[idx], (val-.5)*viewHeight*yScale, 5)); 
     return [points,normed]
-  }, [data, interpolation, height])
+  }, [data, interpolation, height, yScale,xScale])
 
   const geometry = useMemo(() => {
     if (!data || data.length === 0) return null;

src/components/UI/ResizeBar.css

@@ -2,7 +2,7 @@
     position: fixed;
     width: 100vw;
     height: 10px;
-    z-index: 11;
+    z-index: 5;
     cursor: n-resize;
     background-color: transparent;
 }

src/components/UI/Scalers.css

@@ -0,0 +1,19 @@
+.yScaler{
+    z-index: 5;
+    position: absolute;
+    right: 0%;
+    height: 100%;
+    background-color: transparent;
+    width: 40px;
+    cursor: n-resize;
+}
+
+.xScaler{
+    z-index:5;
+    position: absolute;
+    top: 10px;
+    width: 100%;
+    height: 20px;
+    background-color: transparent;
+    cursor: ew-resize;
+}

src/components/UI/XScaler.tsx

@@ -0,0 +1,51 @@
+import './Scalers.css'
+import { useEffect, useState, useRef } from 'react';
+
+const XScaler = ({scale,setScale}:{scale:number,setScale:React.Dispatch<React.SetStateAction<number>>}) => {
+
+    const [isResizing, setIsResizing] = useState<boolean>(false);
+    const initialPosition = useRef<number | null>(null)
+
+    // Start resizing on mousedown
+    const handleMouseDown = (e: React.MouseEvent<HTMLDivElement>) => {
+        e.preventDefault(); // Prevent text selection
+        setIsResizing(true);
+        initialPosition.current = e.clientY // Record starting height
+    };
+    
+    // Adjust height on mousemove
+    const handleMouseMove = (e: MouseEvent) => {
+    if (isResizing) {
+        e.preventDefault();
+        const sizeDelta = initialPosition.current ? (initialPosition.current - e.clientX)/1000 : 0
+        setScale(Math.min(Math.max(scale+sizeDelta,0.1),2))
+    }
+    };
+
+    // Stop resizing on mouseup
+    const handleMouseUp = () => {
+    setIsResizing(false);
+    };
+
+    // Add/remove document event listeners based on resizing state
+    useEffect(() => {
+    if (isResizing) {
+        document.addEventListener('mousemove', handleMouseMove);
+        document.addEventListener('mouseup', handleMouseUp);
+    }
+    return () => {
+        document.removeEventListener('mousemove', handleMouseMove);
+        document.removeEventListener('mouseup', handleMouseUp);
+    };
+    }, [isResizing]);
+
+  return (
+    <div className='xScaler'
+        onMouseDown={handleMouseDown}
+        onMouseUp={handleMouseUp}
+    />
+
+  )
+}
+
+export default XScaler

src/components/UI/YScaler.tsx

@@ -0,0 +1,52 @@
+import './Scalers.css'
+import { useEffect, useState, useRef } from 'react';
+
+const YScaler = ({scale,setScale}:{scale:number,setScale:React.Dispatch<React.SetStateAction<number>>}) => {
+
+    const [isResizing, setIsResizing] = useState<boolean>(false);
+    const initialPosition = useRef<number | null>(null)
+    // Start resizing on mousedown
+    const handleMouseDown = (e: React.MouseEvent<HTMLDivElement>) => {
+        e.preventDefault(); // Prevent text selection
+        setIsResizing(true);
+        initialPosition.current = e.clientY // Record starting height
+    };
+    
+    // Adjust height on mousemove
+    const handleMouseMove = (e: MouseEvent) => {
+    if (isResizing) {
+        e.preventDefault();
+        const sizeDelta = initialPosition.current ? (initialPosition.current - e.clientY)/100 : 0
+        setScale(Math.min(Math.max(scale+sizeDelta,0.1),10))
+    }
+    };
+
+    // Stop resizing on mouseup
+    const handleMouseUp = () => {
+    setIsResizing(false);
+    };
+
+    // Add/remove document event listeners based on resizing state
+    useEffect(() => {
+    if (isResizing) {
+        document.addEventListener('mousemove', handleMouseMove);
+        document.addEventListener('mouseup', handleMouseUp);
+    }
+    return () => {
+        document.removeEventListener('mousemove', handleMouseMove);
+        document.removeEventListener('mouseup', handleMouseUp);
+    };
+    }, [isResizing]);
+
+  return (
+    <div className='yScaler'
+        onMouseDown={handleMouseDown}
+        onMouseUp={handleMouseUp}
+    
+    >
+      
+    </div>
+  )
+}
+
+export default YScaler

src/components/UI/index.ts

@@ -4,11 +4,16 @@ import CanvasGeometry from "../CanvasGeometry";
 import AboutButton from "./AboutButton";
 import Metadata from "./MetaData";
 import ResizeBar from "./ResizeBar";
+import YScaler from "./YScaler";
+import XScaler from "./XScaler";
+
 export {
   Navbar,
   Footer,
   CanvasGeometry,
   AboutButton,
   Metadata,
-  ResizeBar
+  ResizeBar,
+  YScaler,
+  XScaler
 };