[WIP] Grid line improvements for x axis
parent
e989e66d9b
commit
4fe9d89912
|
@ -62,4 +62,28 @@ describe("<Grid/>", () => {
|
||||||
expect(majorGrid.props()).toHaveProperty("strokeWidth", "3");
|
expect(majorGrid.props()).toHaveProperty("strokeWidth", "3");
|
||||||
expect(superiorGrid.props()).toHaveProperty("strokeWidth", "6");
|
expect(superiorGrid.props()).toHaveProperty("strokeWidth", "6");
|
||||||
});
|
});
|
||||||
|
|
||||||
|
it("visualizes axis values every 100mm above 0.5 zoom", () => {
|
||||||
|
const p = fakeProps();
|
||||||
|
p.zoomLvl = 0.6;
|
||||||
|
const wrapper = shallow(<Grid {...p} />);
|
||||||
|
const axisValues = wrapper.find(".x-label").children();
|
||||||
|
expect(axisValues).toHaveLength(29);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("visualizes axis values every 200mm between 0.5 and 0.2 excluded zoom", () => {
|
||||||
|
const p = fakeProps();
|
||||||
|
p.zoomLvl = 0.5;
|
||||||
|
const wrapper = shallow(<Grid {...p} />);
|
||||||
|
const axisValues = wrapper.find(".x-label").children();
|
||||||
|
expect(axisValues).toHaveLength(14);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("visualizes axis values every 500mm on 0.2 zoom and below", () => {
|
||||||
|
const p = fakeProps();
|
||||||
|
p.zoomLvl = 0.2;
|
||||||
|
const wrapper = shallow(<Grid {...p} />);
|
||||||
|
const axisValues = wrapper.find(".x-label").children();
|
||||||
|
expect(axisValues).toHaveLength(5);
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|
|
@ -16,6 +16,22 @@ export function Grid(props: GridProps) {
|
||||||
const minorStrokeWidth = zoomLvl <= 0.5 ? "0" : "1";
|
const minorStrokeWidth = zoomLvl <= 0.5 ? "0" : "1";
|
||||||
const majorStrokeWidth = zoomLvl <= 0.5 ? "3" : "2";
|
const majorStrokeWidth = zoomLvl <= 0.5 ? "3" : "2";
|
||||||
const superiorStrokeWidth = zoomLvl <= 0.5 ? "6" : "4";
|
const superiorStrokeWidth = zoomLvl <= 0.5 ? "6" : "4";
|
||||||
|
|
||||||
|
// Start axis-values controls
|
||||||
|
// TODO: Create helper to regroup code and clean grid.tsx
|
||||||
|
// Text transform:scale value
|
||||||
|
const axisTransformValue = zoomLvl <= 1 ? 2 - zoomLvl : 1;
|
||||||
|
// Start and increment steps to visualize in grid
|
||||||
|
let axisStep = 0;
|
||||||
|
if (zoomLvl > 0.5) {
|
||||||
|
axisStep = 100;
|
||||||
|
} else if (zoomLvl <= 0.2) {
|
||||||
|
axisStep = 500;
|
||||||
|
} else if (zoomLvl <= 0.5) {
|
||||||
|
axisStep = 200;
|
||||||
|
}
|
||||||
|
// End axis-values controls
|
||||||
|
|
||||||
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>
|
||||||
|
@ -70,10 +86,21 @@ export function Grid(props: GridProps) {
|
||||||
|
|
||||||
<g id="axis-values" fontFamily="Arial" fontSize="10"
|
<g id="axis-values" fontFamily="Arial" fontSize="10"
|
||||||
textAnchor="middle" dominantBaseline="central" fill="rgba(0, 0, 0, 0.3)">
|
textAnchor="middle" dominantBaseline="central" fill="rgba(0, 0, 0, 0.3)">
|
||||||
{range(100, gridSize.x, 100).map((i) => {
|
{range(axisStep, gridSize.x, axisStep).map((i) => {
|
||||||
const location = transformXY(i, -10, mapTransformProps);
|
const location = transformXY(i, -10, mapTransformProps);
|
||||||
return <text key={"x-label-" + i}
|
return (
|
||||||
x={location.qx} y={location.qy}>{i}</text>;
|
<text key={"x-label-" + i}
|
||||||
|
fontSize="16"
|
||||||
|
fontWeight="bold"
|
||||||
|
className="x-label"
|
||||||
|
color="rgba(0, 0, 0, 0.4)"
|
||||||
|
x={location.qx}
|
||||||
|
y={location.qy}
|
||||||
|
style={{transformOrigin: "center", transformBox: "fill-box", transform: `scale(${axisTransformValue})`}}>
|
||||||
|
{i}
|
||||||
|
</text>
|
||||||
|
);
|
||||||
|
|
||||||
})}
|
})}
|
||||||
{range(100, gridSize.y, 100).map((i) => {
|
{range(100, gridSize.y, 100).map((i) => {
|
||||||
const location = transformXY(-15, i, mapTransformProps);
|
const location = transformXY(-15, i, mapTransformProps);
|
||||||
|
|
Loading…
Reference in New Issue