sigonasr2/ngsplanner
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Implemented some editor features

Browse Source
This commit is contained in:
sigonasr2, Sig, Sigo 2021-08-13 06:06:28 +00:00
parent 921e8564da
commit d595aa932d
2 changed files with 29 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/skilltree/skillTree.js
View File

@ -47,7 +47,7 @@ function SkillTree(p) {
return <canvas
width={width}
height={height} ref={canvasRef} {...p}/>
height={height} ref={canvasRef} {...p}>{p.children}</canvas>
}
export {SkillTree}

31
src/skilltree/skillTreeEditor.js
View File

@ -1,12 +1,37 @@
import { SkillTree } from "./skillTree";
import { useState } from "react";
import { useEffect, useState } from "react";
function SkillTreeEditor(p) {
const [lineColor,setLineColor] = useState("#000000")
const [lineWidth,setLineWidth] = useState(3)
const [dimensionX,setDimensionX] = useState(6)
const [dimensionY,setDimensionY] = useState(6)
const [gridSizeX,setGridSizeX] = useState(80)
const [gridSizeY,setGridSizeY] = useState(60)
const [gridPaddingX,setGridPaddingX] = useState(10)
const [gridPaddingY,setGridPaddingY] = useState(10)
const [renderedInputs,setRenderedInputs] = useState([])
useEffect(()=>{
var controls = []
for (var x=0;x<dimensionX;x++) {
for (var y=0;y<dimensionY;y++) {
//controls.push(<input style={{}}>)
}
}
},[dimensionX,dimensionY,gridSizeX,gridSizeY,gridPaddingX,gridPaddingY])
return <>
<input type="color" value={}/><SkillTree strokeStyle="rgba(0,0,128,1)" lineWidth={3} lineDash={[]}
gridDimensionsX={6} gridDimensionsY={6} gridSizeX={80} gridSizeY={60} gridPaddingX={10} gridPaddingY={10}
<input style={{position:"absolute"}} type="color" value={lineColor} onChange={(f)=>{setLineColor(f.currentTarget.value)}}/>
<input type="number" value={lineWidth} onChange={(f)=>{setLineWidth(f.currentTarget.value)}}/>
<input type="number" value={dimensionX} onChange={(f)=>{setDimensionX(f.currentTarget.value)}}/>
<input type="number" value={dimensionY} onChange={(f)=>{setDimensionY(f.currentTarget.value)}}/>
<input type="number" value={gridSizeX} onChange={(f)=>{setGridSizeX(f.currentTarget.value)}}/>
<input type="number" value={gridSizeY} onChange={(f)=>{setGridSizeY(f.currentTarget.value)}}/>
<input type="number" value={gridPaddingX} onChange={(f)=>{setGridPaddingX(f.currentTarget.value)}}/>
<input type="number" value={gridPaddingY} onChange={(f)=>{setGridPaddingY(f.currentTarget.value)}}/>
<SkillTree strokeStyle={lineColor} lineWidth={lineWidth} lineDash={[]}
gridDimensionsX={dimensionX} gridDimensionsY={dimensionY} gridSizeX={gridSizeX} gridSizeY={gridSizeY} gridPaddingX={gridPaddingX} gridPaddingY={gridPaddingY}
skillLines={["□ □ ", //─ □
"└□─┘□□", //│ ├┤┼
" │ ││", //