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); + }); + }); });