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

Merge pull request #1684 from FabioDessi/grid_line_improvements 

zoom on grid now changes strokeWidth instead of zoom
pull/1687/head
Rick Carlino 2020-02-07 15:06:01 -06:00 committed by GitHub
parent cd685d6590 8f3a674f9d
commit 837cbe8a85
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 15 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -46,9 +46,9 @@ describe("<Grid/>", () => {
const minorGrid = wrapper.find("#minor_grid>path"); const minorGrid = wrapper.find("#minor_grid>path");
const majorGrid = wrapper.find("#major_grid>path"); const majorGrid = wrapper.find("#major_grid>path");
const superiorGrid = wrapper.find("#superior_grid>path"); const superiorGrid = wrapper.find("#superior_grid>path");
expect(minorGrid.props()).toHaveProperty("stroke", "rgba(0, 0, 0, 0.15)"); expect(minorGrid.props()).toHaveProperty("strokeWidth", "1");
expect(majorGrid.props()).toHaveProperty("stroke", "rgba(0, 0, 0, 0.3)"); expect(majorGrid.props()).toHaveProperty("strokeWidth", "2");
expect(superiorGrid.props()).toHaveProperty("stroke", "rgba(0, 0, 0, 0.4)"); expect(superiorGrid.props()).toHaveProperty("strokeWidth", "4");
}); });
it("change patterns strokes on 0.5 zoom and below", () => { it("change patterns strokes on 0.5 zoom and below", () => {
@ -58,8 +58,8 @@ describe("<Grid/>", () => {
const minorGrid = wrapper.find("#minor_grid>path"); const minorGrid = wrapper.find("#minor_grid>path");
const majorGrid = wrapper.find("#major_grid>path"); const majorGrid = wrapper.find("#major_grid>path");
const superiorGrid = wrapper.find("#superior_grid>path"); const superiorGrid = wrapper.find("#superior_grid>path");
expect(minorGrid.props()).toHaveProperty("stroke", "rgba(0, 0, 0, 0)"); expect(minorGrid.props()).toHaveProperty("strokeWidth", "0");
expect(majorGrid.props()).toHaveProperty("stroke", "rgba(0, 0, 0, 0.6)"); expect(majorGrid.props()).toHaveProperty("strokeWidth", "3");
expect(superiorGrid.props()).toHaveProperty("stroke", "rgba(0, 0, 0, 0.8)"); expect(superiorGrid.props()).toHaveProperty("strokeWidth", "6");
}); });
}); });

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

@ -13,27 +13,27 @@ export function Grid(props: GridProps) {
const arrowEnd = transformXY(25, 25, mapTransformProps); const arrowEnd = transformXY(25, 25, mapTransformProps);
const xLabel = transformXY(15, -10, mapTransformProps); const xLabel = transformXY(15, -10, mapTransformProps);
const yLabel = transformXY(-11, 18, mapTransformProps); const yLabel = transformXY(-11, 18, mapTransformProps);
const minorGridStroke = zoomLvl <= 0.5 ? "rgba(0, 0, 0, 0)" : "rgba(0, 0, 0, 0.15)"; const minorStrokeWidth = zoomLvl <= 0.5 ? "0" : "1";
const majorGridStroke = zoomLvl <= 0.5 ? "rgba(0, 0, 0, 0.6)" : "rgba(0, 0, 0, 0.3)"; const majorStrokeWidth = zoomLvl <= 0.5 ? "3" : "2";
const superiorGridStroke = zoomLvl <= 0.5 ? "rgba(0, 0, 0, 0.8)" : "rgba(0, 0, 0, 0.4)"; const superiorStrokeWidth = zoomLvl <= 0.5 ? "6" : "4";
return <g className="drop-area-background" onClick={props.onClick} return <g className="drop-area-background" onClick={props.onClick}
onMouseDown={props.onMouseDown}> onMouseDown={props.onMouseDown}>
<defs> <defs>
<pattern id="minor_grid" <pattern id="minor_grid"
width={10} height={10} patternUnits="userSpaceOnUse"> width={10} height={10} patternUnits="userSpaceOnUse">
<path d="M10,0 L0,0 L0,10" strokeWidth={1} <path d="M10,0 L0,0 L0,10" strokeWidth={minorStrokeWidth}
fill="none" stroke={minorGridStroke} /> fill="none" stroke="rgba(0, 0, 0, 0.15)" />
</pattern> </pattern>
<pattern id={"major_grid"} <pattern id={"major_grid"}
width={100} height={100} patternUnits="userSpaceOnUse"> width={100} height={100} patternUnits="userSpaceOnUse">
<path d="M100,0 L0,0 0,100" strokeWidth={2} <path d="M100,0 L0,0 0,100" strokeWidth={majorStrokeWidth}
fill="none" stroke={majorGridStroke} /> fill="none" stroke="rgba(0, 0, 0, 0.3)" />
</pattern> </pattern>
<pattern id="superior_grid" width={1000} height={1000} patternUnits="userSpaceOnUse"> <pattern id="superior_grid" width={1000} height={1000} patternUnits="userSpaceOnUse">
<path d="M1000,0 L0,0 0,1000" strokeWidth={2} <path d="M1000,0 L0,0 0,1000" strokeWidth={superiorStrokeWidth}
fill="none" stroke={superiorGridStroke} /> fill="none" stroke="rgba(0, 0, 0, 0.4)" />
</pattern> </pattern>
<marker id="arrow" <marker id="arrow"