Dynamic scaling of skill tree scaling.

src/App.js

@@ -753,6 +753,9 @@ function App() {
 	const [LOGGEDINUSER,setLOGGEDINUSER] = useState("")
 	const [LOGGEDINHASH,setLOGGEDINHASH] = useState("")
 
+	const [gridDimensionsX,setGridDimensionsX] = useState(5)
+	const [gridDimensionsY,setGridDimensionsY] = useState(5)
+
 
 	function GetData(table,row,col,id){
 		var data = id?DATAID:DATA
@@ -833,7 +836,7 @@ function App() {
 				<Route path={process.env.PUBLIC_URL+"/skilltree"}>
 					<Box title="Skill Tree">
 						<SkillTree strokeStyle="rgba(0,0,128,1)" lineWidth={3} lineDash={[]}
-						gridDimensions={[6,6]} gridSize={[80,60]} gridPadding={[10,10]}
+						gridDimensionsX={gridDimensionsX} gridDimensionsY={gridDimensionsY} gridSize={[80,60]} gridPadding={[10,10]}
 						skillLines={["□  □  ", //─   □
 									"└□─┘□□", //│ ├┤┼
 									" │  ││", //    
@@ -845,13 +848,16 @@ function App() {
 						<hr/>
 						<br/>
 						<SkillTree strokeStyle="rgba(255,0,0,0.5)" lineWidth={10} lineDash={[10,10]}
-						gridDimensions={[5,5]} gridSize={[120,120]} gridPadding={[5,5]}
+						gridDimensionsX={5} gridDimensionsY={5} gridSize={[120,120]} gridPadding={[5,5]}
 						skillLines={["□□□□ ", //─   □
 									"│ │┌□", //│ ├┤┼
 									"│□┘□ ", //    
 									"□  │ ", //┌ ┐ ┬
 									"   □ "]}//└ ┘ ┴
 						/>
+
+						Width: <input type="number" onChange={(f)=>{setGridDimensionsX(Number(f.currentTarget.value))}} value={gridDimensionsX}/>
+						Height: <input type="number" onChange={(f)=>{setGridDimensionsY(Number(f.currentTarget.value))}} value={gridDimensionsY}/>
 					</Box>
 				</Route>
 				<Route path="/">

src/skilltree/skillTree.js

@@ -1,12 +1,20 @@
-import { useRef,useEffect } from 'react';
+import { useRef,useEffect,useState } from 'react';
 import { contextType } from 'react-modal';
 
 function SkillTree(p) {
     const canvasRef = useRef(null)
+    const [width,setWidth] = useState(0)
+    const [height,setHeight] = useState(0)
+  
+    useEffect(() => {
+      setWidth(p.gridSize[0]*p.gridDimensionsX+p.gridPadding[0]*(p.gridDimensionsX-1))
+      setHeight(p.gridSize[1]*p.gridDimensionsY+p.gridPadding[1]*(p.gridDimensionsY-1))
+    }, [p.skillLines,p.gridSize,p.gridPadding,p.gridDimensionsX,p.gridDimensionsY])
 
     useEffect(()=>{
       const canvas = canvasRef.current
       const context = canvas.getContext('2d')
+      context.clearRect(0,0,width,height)
       context.fillStyle = '#AA6666'
       /*for (var x=0;x<p.gridDimensions[0];x++) {
           for (var y=0;y<p.gridDimensions[1];y++) {
@@ -43,11 +51,11 @@ function SkillTree(p) {
         }
         y++
       }
-    }, [p.skillLines,p.gridSize,p.gridPadding,p.gridDimensions])
+    },[width,height])
     
     return <canvas
-    width={p.gridSize[0]*p.gridDimensions[0]+p.gridPadding[0]*(p.gridDimensions[0]-1)}
+    width={width}
-    height={p.gridSize[1]*p.gridDimensions[1]+p.gridPadding[1]*(p.gridDimensions[1]-1)} ref={canvasRef} {...p}/>
+    height={height} ref={canvasRef} {...p}/>
 }
 
 export {SkillTree}