diff --git a/src/components/grapher/GrapherField.vue b/src/components/grapher/GrapherField.vue
index cbc2210..4f35f86 100644
--- a/src/components/grapher/GrapherField.vue
+++ b/src/components/grapher/GrapherField.vue
@@ -124,13 +124,25 @@ export default Vue.extend({
this.$store.getters.getFrontHashOffsetY
);
},
+ // fourStepGridOffsetsX(): number[] {
+ // const offset: number = this.$store.state.yardlines ? 8 : 4;
+ // const retVal: number[] = [4, 8, this.fieldWidth - 8, this.fieldWidth - 4];
+ // for (
+ // let offsetX = 12;
+ // offsetX <= this.fieldWidth - 12;
+ // offsetX += offset
+ // ) {
+ // retVal.push(offsetX);
+ // }
+ // return retVal;
+ // },
fourStepGridOffsetsX(): number[] {
- const offset: number = this.$store.state.yardlines ? 8 : 4;
- const retVal: number[] = [4, 8, this.fieldWidth - 8, this.fieldWidth - 4];
+ const retVal: number[] = [];
+ const gridSize: number = this.$store.state.gridSize;
for (
- let offsetX = 12;
- offsetX <= this.fieldWidth - 12;
- offsetX += offset
+ let offsetX = gridSize;
+ offsetX < this.fieldWidth;
+ offsetX += gridSize
) {
retVal.push(offsetX);
}
@@ -138,7 +150,12 @@ export default Vue.extend({
},
fourStepGridOffsetsY(): number[] {
const retVal: number[] = [];
- for (let offsetY = 4; offsetY < this.fieldHeight; offsetY += 4) {
+ const gridSize: number = this.$store.state.gridSize;
+ for (
+ let offsetY = gridSize;
+ offsetY < this.fieldHeight;
+ offsetY += gridSize
+ ) {
retVal.push(offsetY);
}
return retVal;
diff --git a/src/components/menu-top/MenuTop.vue b/src/components/menu-top/MenuTop.vue
index 7cbb2c3..0249d17 100644
--- a/src/components/menu-top/MenuTop.vue
+++ b/src/components/menu-top/MenuTop.vue
@@ -78,6 +78,27 @@
+
+
+
+ One Step
+
+
+ Two Step
+
+
+ Four Step
+
+
@@ -183,6 +204,10 @@ export default Vue.extend({
newShow(): void {
this.$store.commit(Mutations.SET_NEW_SHOW, new InitialShowState());
},
+
+ changeStepGrid(size: number): void {
+ this.$store.commit(Mutations.SET_GRID_SIZE, size);
+ },
},
});
diff --git a/src/store/index.ts b/src/store/index.ts
index 4a11224..00c2457 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -34,6 +34,8 @@ export class CalChartState extends Serializable {
showDotLabels = true;
+ gridSize = 4;
+
grapherSvgPanZoom?: SvgPanZoom.Instance;
invertedCTMMatrix?: DOMMatrix;
diff --git a/src/store/mutations.ts b/src/store/mutations.ts
index 38d6180..b9db57c 100644
--- a/src/store/mutations.ts
+++ b/src/store/mutations.ts
@@ -50,6 +50,8 @@ export enum Mutations {
SET_BEAT = "setBeat",
INCREMENT_BEAT = "incrementBeat",
DECREMENT_BEAT = "decrementBeat",
+ // Grid mutations:
+ SET_GRID_SIZE = "setGridSize",
// Field view mutations:
SET_FOUR_STEP_GRID = "setFourStepGrid",
SET_YARDLINES = "setYardlines",
@@ -413,6 +415,12 @@ export const mutations: MutationTree = {
state.showDotLabels = enabled;
},
+ // Grid Size
+
+ [Mutations.SET_GRID_SIZE](state, size: number): void {
+ state.gridSize = size;
+ },
+
// Tools
[Mutations.SET_GRAPHER_SVG_PAN_ZOOM](
state,
diff --git a/src/tools/BaseTool.ts b/src/tools/BaseTool.ts
index bc41885..4cf41ca 100644
--- a/src/tools/BaseTool.ts
+++ b/src/tools/BaseTool.ts
@@ -18,8 +18,10 @@ export default abstract class BaseTool {
*/
static roundCoordinateToGrid(coordinate: [number, number]): [number, number] {
return [
- Math.round(coordinate[0] / 2) * 2,
- Math.round(coordinate[1] / 2) * 2,
+ Math.round(coordinate[0] / GlobalStore.state.gridSize) *
+ GlobalStore.state.gridSize,
+ Math.round(coordinate[1] / GlobalStore.state.gridSize) *
+ GlobalStore.state.gridSize,
];
}
diff --git a/tests/unit/components/grapher/GrapherField.spec.ts b/tests/unit/components/grapher/GrapherField.spec.ts
index f75ebf1..9389811 100644
--- a/tests/unit/components/grapher/GrapherField.spec.ts
+++ b/tests/unit/components/grapher/GrapherField.spec.ts
@@ -57,13 +57,35 @@ describe("components/grapher/GrapherField.vue", () => {
expect(rect.attributes("height")).toBe("24");
});
- it("four step grid: generates 6 vert lines and 5 horiz lines", () => {
+ it("four step grid: generates appropriate amount of vert and horiz grid lines", async () => {
+ store.commit(Mutations.SET_GRID_SIZE, 2);
+ await wrapper.vm.$nextTick();
expect(
wrapper.findAll('[data-test="grapher-field--grid-vertical"]')
- ).toHaveLength(6);
+ ).toHaveLength(7);
expect(
wrapper.findAll('[data-test="grapher-field--grid-horizontal"]')
).toHaveLength(5);
+
+ store.commit(Mutations.SET_GRID_SIZE, 1);
+ await wrapper.vm.$nextTick();
+
+ expect(
+ wrapper.findAll('[data-test="grapher-field--grid-vertical"]')
+ ).toHaveLength(15);
+ expect(
+ wrapper.findAll('[data-test="grapher-field--grid-horizontal"]')
+ ).toHaveLength(11);
+
+ store.commit(Mutations.SET_GRID_SIZE, 4);
+ await wrapper.vm.$nextTick();
+
+ expect(
+ wrapper.findAll('[data-test="grapher-field--grid-vertical"]')
+ ).toHaveLength(3);
+ expect(
+ wrapper.findAll('[data-test="grapher-field--grid-horizontal"]')
+ ).toHaveLength(2);
});
it("generates no field numbers", () => {
@@ -93,6 +115,7 @@ describe("components/grapher/GrapherField.vue", () => {
).toBeFalsy();
store.commit(Mutations.SET_FOUR_STEP_GRID, true);
+ store.commit(Mutations.SET_GRID_SIZE, 2);
await wrapper.vm.$nextTick();
expect(
@@ -149,13 +172,36 @@ describe("components/grapher/GrapherField.vue", () => {
).toBe("84");
});
- it("four step grid: generates 26 vert lines and 20 horiz lines", () => {
+ it("four step grid: generates 47/95/23 vert lines and 20/41/10 horiz lines", async () => {
+ store.commit(Mutations.SET_GRID_SIZE, 2);
+ await wrapper.vm.$nextTick();
+
expect(
wrapper.findAll('[data-test="grapher-field--grid-vertical"]')
- ).toHaveLength(26);
+ ).toHaveLength(47);
expect(
wrapper.findAll('[data-test="grapher-field--grid-horizontal"]')
).toHaveLength(20);
+
+ store.commit(Mutations.SET_GRID_SIZE, 1);
+ await wrapper.vm.$nextTick();
+
+ expect(
+ wrapper.findAll('[data-test="grapher-field--grid-vertical"]')
+ ).toHaveLength(95);
+ expect(
+ wrapper.findAll('[data-test="grapher-field--grid-horizontal"]')
+ ).toHaveLength(41);
+
+ store.commit(Mutations.SET_GRID_SIZE, 4);
+ await wrapper.vm.$nextTick();
+
+ expect(
+ wrapper.findAll('[data-test="grapher-field--grid-vertical"]')
+ ).toHaveLength(23);
+ expect(
+ wrapper.findAll('[data-test="grapher-field--grid-horizontal"]')
+ ).toHaveLength(10);
});
it("generates 18 field numbers", () => {
@@ -194,6 +240,7 @@ describe("components/grapher/GrapherField.vue", () => {
).toBeFalsy();
store.commit(Mutations.SET_FOUR_STEP_GRID, true);
+ store.commit(Mutations.SET_GRID_SIZE, 2);
await wrapper.vm.$nextTick();
expect(
diff --git a/tests/unit/components/menu-top/MenuTop.spec.ts b/tests/unit/components/menu-top/MenuTop.spec.ts
index 67da3ef..29c67dc 100644
--- a/tests/unit/components/menu-top/MenuTop.spec.ts
+++ b/tests/unit/components/menu-top/MenuTop.spec.ts
@@ -86,4 +86,24 @@ describe("components/menu-top/MenuTop", () => {
expect(store.state.showDotLabels).toBeFalsy();
});
});
+
+ describe("grid dropdown", () => {
+ it("one step grid", () => {
+ const oneStep = wrapper.find('[data-test="menu-top--grid-one"]');
+ oneStep.trigger("click");
+ expect(store.state.gridSize).toEqual(1);
+ });
+
+ it("two step grid", () => {
+ const twoStep = wrapper.find('[data-test="menu-top--grid-two"]');
+ twoStep.trigger("click");
+ expect(store.state.gridSize).toEqual(2);
+ });
+
+ it("four step grid", () => {
+ const fourStep = wrapper.find('[data-test="menu-top--grid-four"]');
+ fourStep.trigger("click");
+ expect(store.state.gridSize).toEqual(4);
+ });
+ });
});