Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Change step grid #181

Draft
wants to merge 4 commits into
base: main
Choose a base branch
from
Draft

Change step grid #181

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
e790bd0
adds new dropdown which changes gridSize in state
Jun 17, 2021
34eadc5
allows grid size to change from dropdown, still some kinks to work out
Jun 18, 2021
57ba5a2
Merge branch 'main' into change-step-grid
Jul 10, 2021
cada7de
fixes grid sizes and alters coordinate rounding function
Jul 10, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 23 additions & 6 deletions src/components/grapher/GrapherField.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -124,21 +124,38 @@ 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[] {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's rename this and fourStepGridOffsetsY to something more generic

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 * 2;
offsetX < this.fieldWidth;
offsetX += gridSize * 2
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You don't have to multiply by 2 here, the X/Y scale should be 1 spacing unit to 1 step. Notice in the screenshots that the 4 step grid is actually an 8 step grid (there should be a vertical line in between each line yard, since each line yard is 8 steps between each other).

) {
retVal.push(offsetX);
}
return retVal;
},
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 * 2;
offsetY < this.fieldHeight;
offsetY += gridSize * 2
) {
retVal.push(offsetY);
}
return retVal;
Expand Down
25 changes: 25 additions & 0 deletions src/components/menu-top/MenuTop.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,6 +68,27 @@
</b-checkbox>
</b-navbar-item>
</b-navbar-dropdown>

<b-navbar-dropdown label="Grid" data-test="menu-top--grid">
<b-navbar-item
data-test="menu-top--grid-one"
@click="changeStepGrid(1)"
>
One Step
</b-navbar-item>
<b-navbar-item
data-test="menu-top--grid-two"
@click="changeStepGrid(2)"
>
Two Step
</b-navbar-item>
<b-navbar-item
data-test="menu-top--grid-four"
@click="changeStepGrid(4)"
>
Four Step
</b-navbar-item>
</b-navbar-dropdown>
Comment on lines +82 to +101
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This works okay, but I don't think this should be it's own top navbar item. We should reserve creating a new dropdown at the top level for new categories (For example, see the top menu of any program you use, "File", "Edit", "View", "Help", etc.)

Let's consider other options... How about the bottom menu next to all the tool icons?

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I wonder if there is a way to get some tiered/tree menus in Buefy. I'm thinking something like the Format -> Number selection in google sheets. That way we can put it in the view section...

image

</template>
</b-navbar>

Expand Down Expand Up @@ -161,6 +182,10 @@ export default Vue.extend({
newShow(): void {
this.$store.commit(Mutations.SET_SHOW, new InitialShowState());
},

changeStepGrid(size: number): void {
this.$store.commit(Mutations.SET_GRID_SIZE, size);
},
},
});
</script>
Expand Down
2 changes: 2 additions & 0 deletions src/store/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,8 @@ export class CalChartState extends Serializable<CalChartState> {

showDotLabels = true;

gridSize = 2;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Once the x2 comment is resolved in GrapherField, let's update this

Suggested change
gridSize = 2;
gridSize = 4;


grapherSvgPanZoom?: SvgPanZoom.Instance;

invertedCTMMatrix?: DOMMatrix;
Expand Down
8 changes: 8 additions & 0 deletions src/store/mutations.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,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",
Expand Down Expand Up @@ -408,6 +410,12 @@ export const mutations: MutationTree<CalChartState> = {
state.showDotLabels = enabled;
},

// Grid Size

[Mutations.SET_GRID_SIZE](state, size: number): void {
state.gridSize = size;
},

// Tools
[Mutations.SET_GRAPHER_SVG_PAN_ZOOM](
state,
Expand Down
55 changes: 51 additions & 4 deletions tests/unit/components/grapher/GrapherField.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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", () => {
Expand Down Expand Up @@ -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(
Expand Down Expand Up @@ -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", () => {
Expand Down Expand Up @@ -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(
Expand Down
20 changes: 20 additions & 0 deletions tests/unit/components/menu-top/MenuTop.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,4 +84,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);
});
});
});