spacecruft
/
Farmbot-Web-App
1
0
Fork 0
Code Issues Pull Requests Releases Activity

[WIP] Grid line improvements for y axis

pull/1726/head
Fabio Dessi 2020-03-03 08:41:29 +01:00
parent 2aed62b9f8
commit 63b333746d
2 changed files with 34 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
frontend/farm_designer/map/background/__tests__/grid_test.tsx
View File

@ -67,39 +67,49 @@ describe("<Grid/>", () => {
const p = fakeProps(); const p = fakeProps();
p.zoomLvl = 0.6; p.zoomLvl = 0.6;
const wrapper = shallow(<Grid {...p} />); const wrapper = shallow(<Grid {...p} />);
const axisValues = wrapper.find(".x-label").children(); const xAxisValues = wrapper.find(".x-label").children();
expect(axisValues).toHaveLength(29); const yAxisValues = wrapper.find(".y-label").children();
expect(xAxisValues).toHaveLength(29);
expect(yAxisValues).toHaveLength(14);
}); });
it("visualizes axis values every 200mm between 0.5 and 0.2 excluded zoom", () => { it("visualizes axis values every 200mm between 0.5 and 0.2 excluded zoom", () => {
const p = fakeProps(); const p = fakeProps();
p.zoomLvl = 0.5; p.zoomLvl = 0.5;
const wrapper = shallow(<Grid {...p} />); const wrapper = shallow(<Grid {...p} />);
const axisValues = wrapper.find(".x-label").children(); const xAxisValues = wrapper.find(".x-label").children();
expect(axisValues).toHaveLength(14); const YAxisValues = wrapper.find(".y-label").children();
expect(xAxisValues).toHaveLength(14);
expect(YAxisValues).toHaveLength(7);
}); });
it("visualizes axis values every 500mm on 0.2 zoom and below", () => { it("visualizes axis values every 500mm on 0.2 zoom and below", () => {
const p = fakeProps(); const p = fakeProps();
p.zoomLvl = 0.2; p.zoomLvl = 0.2;
const wrapper = shallow(<Grid {...p} />); const wrapper = shallow(<Grid {...p} />);
const axisValues = wrapper.find(".x-label").children(); const xAxisValues = wrapper.find(".x-label").children();
expect(axisValues).toHaveLength(5); const yAxisValues = wrapper.find(".y-label").children();
expect(xAxisValues).toHaveLength(5);
expect(yAxisValues).toHaveLength(2);
}); });
it("use transform scale 1 for zoom above 1", () => { it("use transform scale 1 for zoom above 1", () => {
const p = fakeProps(); const p = fakeProps();
p.zoomLvl = 1.1; p.zoomLvl = 1.1;
const wrapper = shallow(<Grid {...p} />); const wrapper = shallow(<Grid {...p} />);
const textNode = wrapper.find(".x-label").first(); const xTextNode = wrapper.find(".x-label").first();
expect(textNode.prop("style")).toHaveProperty("transform", "scale(1)"); const yTextNode = wrapper.find(".y-label").first();
expect(xTextNode.prop("style")).toHaveProperty("transform", "scale(1)");
expect(yTextNode.prop("style")).toHaveProperty("transform", "scale(1)");
}); });
it("use transform scale 1.5 for zoom on 0.5", () => { it("use transform scale 1.5 for zoom on 0.5", () => {
const p = fakeProps(); const p = fakeProps();
p.zoomLvl = 0.5; p.zoomLvl = 0.5;
const wrapper = shallow(<Grid {...p} />); const wrapper = shallow(<Grid {...p} />);
const textNode = wrapper.find(".x-label").first(); const xTextNode = wrapper.find(".x-label").first();
expect(textNode.prop("style")).toHaveProperty("transform", "scale(1.5)"); const yTextNode = wrapper.find(".y-label").first();
expect(xTextNode.prop("style")).toHaveProperty("transform", "scale(1.5)");
expect(yTextNode.prop("style")).toHaveProperty("transform", "scale(1.5)");
}); });
}); });

18
frontend/farm_designer/map/background/grid.tsx
View File

@ -102,10 +102,20 @@ export function Grid(props: GridProps) {
); );
})} })}
{range(100, gridSize.y, 100).map((i) => { {range(axisStep, gridSize.y, axisStep).map((i) => {
const location = transformXY(-15, i, mapTransformProps); const location = transformXY(10, i - 10, mapTransformProps);
return <text key={"y-label-" + i} return (
x={location.qx} y={location.qy}>{i}</text>; <text key={"y-label-" + i}
fontSize="16"
fontWeight="bold"
className="y-label"
color="rgba(0, 0, 0, 0.4)"
x={location.qx}
y={location.qy}
style={{transformOrigin: "center", transformBox: "fill-box", transform: `scale(${axisTransformValue})`, textAnchor: "start"}}>
{i}
</text>
);
})} })}
</g> </g>
</g>; </g>;