Skip to content

Commit 66d9fc5

Browse files
rrahirrrahir
committed
[IMP] Dashboard: add zoom support
Following the introduction of the grid zoom, this commits adds the support for the dashboard mode. Task: 5257140
1 parent b7186b2 commit 66d9fc5

File tree

8 files changed

+101
-50
lines changed

8 files changed

+101
-50
lines changed

‎src/components/dashboard/dashboard.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -125,4 +125,9 @@ export class SpreadsheetDashboard extends Component<Props, SpreadsheetChildEnv>
125125
...this.env.model.getters.getSheetViewDimensionWithHeaders(),
126126
};
127127
}
128+
129+
get dashboardStyle() {
130+
const zoomLevel = this.env.model.getters.getViewportZoomLevel();
131+
return cssPropertiesToCss({ zoom: `${zoomLevel}` });
132+
}
128133
}

‎src/components/dashboard/dashboard.xml‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,11 @@
11
<templates>
22
<t t-name="o-spreadsheet-SpreadsheetDashboard">
3-
<div class="o-grid o-two-columns" t-ref="dashboard" tabindex="-1" t-on-wheel="onMouseWheel">
3+
<div
4+
class="o-grid o-two-columns o-zoomable"
5+
t-ref="dashboard"
6+
tabindex="-1"
7+
t-on-wheel="onMouseWheel"
8+
t-att-style="dashboardStyle">
49
<div class="mx-auto h-100 position-relative" t-ref="grid" t-att-style="gridContainer">
510
<GridOverlay
611
onGridResized.bind="onGridResized"

‎src/components/helpers/draw_grid_hook.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ export function useGridDrawing(refName: string, model: Model, canvasSize: () =>
3030
canvas.style.height = `${height}px`;
3131
canvas.width = width * dpr;
3232
canvas.height = height * dpr;
33-
canvas.setAttribute("style", `width:${width}px;height:${height}px;zoom:${1 / zoom}`);
33+
canvas.setAttribute("style", `width:${width}px;height:${height}px;zoom:${1 / zoom};`);
3434
if (width === 0 || height === 0) {
3535
return;
3636
}

‎tests/grid/__snapshots__/dashboard_grid_component.test.ts.snap‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,8 @@
22

33
exports[`Grid component in dashboard mode simple dashboard rendering snapshot 1`] = `
44
<div
5-
class="o-grid o-two-columns"
5+
class="o-grid o-two-columns o-zoomable"
6+
style="zoom:1; "
67
tabindex="-1"
78
>
89
<div
@@ -33,7 +34,7 @@ exports[`Grid component in dashboard mode simple dashboard rendering snapshot 1`
3334
3435
<canvas
3536
height="985"
36-
style="width:985px;height:985px;zoom:1"
37+
style="width:985px;height:985px;zoom:1;"
3738
width="985"
3839
/>
3940

‎tests/grid/__snapshots__/grid_component.test.ts.snap‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -101,7 +101,7 @@ exports[`Grid component simple rendering snapshot 1`] = `
101101
102102
<canvas
103103
height="1011"
104-
style="width:1033px;height:1011px;zoom:1"
104+
style="width:1033px;height:1011px;zoom:1;"
105105
width="1033"
106106
/>
107107

‎tests/spreadsheet/__snapshots__/spreadsheet_component.test.ts.snap‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -872,7 +872,7 @@ exports[`Simple Spreadsheet Component simple rendering snapshot 1`] = `
872872
873873
<canvas
874874
height="985"
875-
style="width:985px;height:985px;zoom:1"
875+
style="width:985px;height:985px;zoom:1;"
876876
width="985"
877877
/>
878878
@@ -1844,7 +1844,7 @@ exports[`components take the small screen into account 1`] = `
18441844
18451845
<canvas
18461846
height="985"
1847-
style="width:485px;height:985px;zoom:1"
1847+
style="width:485px;height:985px;zoom:1;"
18481848
width="485"
18491849
/>
18501850

‎tests/test_helpers/dom_helper.ts‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -133,11 +133,14 @@ export async function pointerUp(target: DOMTarget) {
133133
*/
134134
export async function hoverCell(model: Model, xc: string, delay: number) {
135135
const zone = toZone(xc);
136-
let { x, y } = model.getters.getVisibleRect(zone);
136+
const zoom = model.getters.getViewportZoomLevel();
137+
let { x, y, width, height } = model.getters.getVisibleRectWithZoom(zone);
137138
if (!model.getters.isDashboard()) {
138-
x -= HEADER_WIDTH;
139-
y -= HEADER_HEIGHT;
139+
x -= HEADER_WIDTH * zoom;
140+
y -= HEADER_HEIGHT * zoom;
140141
}
142+
x += width / 2;
143+
y += height / 2;
141144
triggerMouseEvent(".o-grid-overlay", "pointermove", x, y);
142145
jest.advanceTimersByTime(delay);
143146
await nextTick();

‎tests/zoom.test.ts‎

Lines changed: 77 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -5,55 +5,92 @@ import {
55
ZOOM_VALUES,
66
} from "@odoo/o-spreadsheet-engine/constants";
77
import { setCellContent } from "./test_helpers/commands_helpers";
8-
import { clickCell, clickHeader } from "./test_helpers/dom_helper";
8+
import { clickCell, clickHeader, hoverCell } from "./test_helpers/dom_helper";
99
import { getSelectionAnchorCellXc } from "./test_helpers/getters_helpers";
10-
import { mountSpreadsheet } from "./test_helpers/helpers";
10+
import { mountSpreadsheet, nextTick } from "./test_helpers/helpers";
1111

1212
let fixture: HTMLElement;
1313
let model: Model;
1414

15-
describe.each(ZOOM_VALUES.map((zoom) => zoom / 100))("Zoom tests selection %s", (zoom) => {
16-
beforeEach(async () => {
17-
({ model, fixture } = await mountSpreadsheet());
18-
model.dispatch("SET_ZOOM", { zoom });
19-
});
20-
test("can render a sheet with zoom", async () => {
21-
expect(fixture.querySelector(".o-grid-overlay")).not.toBeNull();
22-
});
15+
jest.useFakeTimers();
2316

24-
test("can click on a cell to select it", async () => {
25-
setCellContent(model, "B2", "b2");
26-
setCellContent(model, "B3", "b3");
27-
await clickCell(model, "C8", {}, { clickInMiddle: true });
28-
expect(getSelectionAnchorCellXc(model)).toBe("C8");
29-
});
17+
afterAll(() => {
18+
jest.useRealTimers();
19+
});
3020

31-
test("can click on the edge of a cell to select it", async () => {
32-
setCellContent(model, "B2", "b2");
33-
setCellContent(model, "B3", "b3");
34-
// by default we click on top left
35-
await clickCell(model, "C8");
36-
expect(getSelectionAnchorCellXc(model)).toBe("C8");
37-
await clickCell(
38-
model,
39-
"C8",
40-
{},
41-
{ offsetX: DEFAULT_CELL_WIDTH * zoom - 1, offsetY: DEFAULT_CELL_HEIGHT * zoom - 1 }
42-
);
43-
expect(getSelectionAnchorCellXc(model)).toBe("C8");
44-
});
21+
describe("Spreadsheet zoom tests", () => {
22+
describe.each(ZOOM_VALUES.map((zoom) => zoom / 100))("Zoom tests selection %s", (zoom) => {
23+
beforeEach(async () => {
24+
({ model, fixture } = await mountSpreadsheet());
25+
model.dispatch("SET_ZOOM", { zoom });
26+
await nextTick();
27+
});
28+
test("can render a sheet with zoom", async () => {
29+
expect(fixture.querySelector(".o-grid-overlay")).not.toBeNull();
30+
});
31+
32+
test("can click on a cell to select it", async () => {
33+
setCellContent(model, "B2", "b2");
34+
setCellContent(model, "B3", "b3");
35+
await clickCell(model, "C8", {}, { clickInMiddle: true });
36+
expect(getSelectionAnchorCellXc(model)).toBe("C8");
37+
});
4538

46-
test("can select a COL header", async () => {
47-
setCellContent(model, "B2", "b2");
48-
setCellContent(model, "B3", "b3");
49-
await clickHeader(model, "COL", 2, {});
50-
expect(getSelectionAnchorCellXc(model)).toBe("C1");
39+
test("can click on the edge of a cell to select it", async () => {
40+
setCellContent(model, "B2", "b2");
41+
setCellContent(model, "B3", "b3");
42+
// by default we click on top left
43+
await clickCell(model, "C8");
44+
expect(getSelectionAnchorCellXc(model)).toBe("C8");
45+
await clickCell(
46+
model,
47+
"C8",
48+
{},
49+
{ offsetX: DEFAULT_CELL_WIDTH * zoom - 1, offsetY: DEFAULT_CELL_HEIGHT * zoom - 1 }
50+
);
51+
expect(getSelectionAnchorCellXc(model)).toBe("C8");
52+
});
53+
54+
test("can select a COL header", async () => {
55+
setCellContent(model, "B2", "b2");
56+
setCellContent(model, "B3", "b3");
57+
await clickHeader(model, "COL", 2, {});
58+
expect(getSelectionAnchorCellXc(model)).toBe("C1");
59+
});
60+
61+
test("can select a ROW header", async () => {
62+
setCellContent(model, "B2", "b2");
63+
setCellContent(model, "B3", "b3");
64+
await clickHeader(model, "ROW", 2, {});
65+
expect(getSelectionAnchorCellXc(model)).toBe("A4");
66+
});
67+
68+
test("can hover a cell to show its error", async () => {
69+
setCellContent(model, "A10", "=1/0");
70+
expect(fixture.querySelector(".o-error-tooltip")).toBeFalsy();
71+
await hoverCell(model, "A10", 400);
72+
expect(fixture.querySelector(".o-error-tooltip")).toBeTruthy();
73+
});
5174
});
75+
});
76+
77+
describe("Dashboard zoom tests", () => {
78+
describe.each(ZOOM_VALUES.map((zoom) => zoom / 100))("Zoom tests selection %s", (zoom) => {
79+
beforeEach(async () => {
80+
({ model, fixture } = await mountSpreadsheet());
81+
model.dispatch("SET_ZOOM", { zoom });
82+
setCellContent(model, "C8", "=1/0");
83+
model.updateMode("dashboard");
84+
await nextTick();
85+
});
86+
test("can render a sheet with zoom", async () => {
87+
expect(fixture.querySelector(".o-grid-overlay")).not.toBeNull();
88+
});
5289

53-
test("can select a ROW header", async () => {
54-
setCellContent(model, "B2", "b2");
55-
setCellContent(model, "B3", "b3");
56-
await clickHeader(model, "ROW", 2, {});
57-
expect(getSelectionAnchorCellXc(model)).toBe("A4");
90+
test("can hover a cell to show its error", async () => {
91+
expect(fixture.querySelector(".o-error-tooltip")).toBeNull();
92+
await hoverCell(model, "C8", 400);
93+
expect(fixture.querySelector(".o-error-tooltip")).toBeTruthy();
94+
});
5895
});
5996
});

0 commit comments

Comments
 (0)