smig/excalidraw
1
0
Fork 0
mirror of https://github.com/excalidraw/excalidraw.git synced 2025-05-03 10:00:07 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Fix keypress rebinding (#2102)

Browse source 
Co-authored-by: Anton <anton.matrenin@introduct.tech>
This commit is contained in:
Anton 2020-08-29 15:12:28 +03:00 • committed by GitHub
parent 84c49ebaa1
commit 1828a93ba7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 189 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

103
src/tests/__snapshots__/move.test.tsx.snap
View file

@ -77,3 +77,106 @@ Object {
"y": 40,
}
`;
exports[`move element rectangles with binding arrow 1`] = `
Object {
"angle": 0,
"backgroundColor": "transparent",
"boundElementIds": Array [
"id2",
],
"fillStyle": "hachure",
"groupIds": Array [],
"height": 100,
"id": "id0",
"isDeleted": false,
"opacity": 100,
"roughness": 1,
"seed": 337897,
"strokeColor": "#000000",
"strokeSharpness": "sharp",
"strokeStyle": "solid",
"strokeWidth": 1,
"type": "rectangle",
"version": 3,
"versionNonce": 1014066025,
"width": 100,
"x": 0,
"y": 0,
}
`;
exports[`move element rectangles with binding arrow 2`] = `
Object {
"angle": 0,
"backgroundColor": "transparent",
"boundElementIds": Array [
"id2",
],
"fillStyle": "hachure",
"groupIds": Array [],
"height": 300,
"id": "id1",
"isDeleted": false,
"opacity": 100,
"roughness": 1,
"seed": 449462985,
"strokeColor": "#000000",
"strokeSharpness": "sharp",
"strokeStyle": "solid",
"strokeWidth": 1,
"type": "rectangle",
"version": 6,
"versionNonce": 1723083209,
"width": 300,
"x": 201,
"y": 2,
}
`;
exports[`move element rectangles with binding arrow 3`] = `
Object {
"angle": 0,
"backgroundColor": "transparent",
"boundElementIds": null,
"endBinding": Object {
"elementId": "id1",
"focus": -0.46666666666666673,
"gap": 10,
},
"fillStyle": "hachure",
"groupIds": Array [],
"height": 81.48231043525051,
"id": "id2",
"isDeleted": false,
"lastCommittedPoint": null,
"opacity": 100,
"points": Array [
Array [
0,
0,
],
Array [
81,
81.48231043525051,
],
],
"roughness": 1,
"seed": 401146281,
"startBinding": Object {
"elementId": "id0",
"focus": -0.6000000000000001,
"gap": 10,
},
"strokeColor": "#000000",
"strokeSharpness": "round",
"strokeStyle": "solid",
"strokeWidth": 1,
"type": "line",
"version": 11,
"versionNonce": 1006504105,
"width": 81,
"x": 110,
"y": 49.981789081137734,
}
`;

54
src/tests/move.test.tsx
View file

@ -4,6 +4,13 @@ import { render, fireEvent } from "./test-utils";
import App from "../components/App";
import * as Renderer from "../renderer/renderScene";
import { reseed } from "../random";
import { bindOrUnbindLinearElement } from "../element/binding";
import {
ExcalidrawLinearElement,
NonDeleted,
ExcalidrawRectangleElement,
} from "../element/types";
import { UI, Pointer, Keyboard } from "./helpers/ui";
// Unmount ReactDOM from root
ReactDOM.unmountComponentAtNode(document.getElementById("root")!);
@ -50,6 +57,53 @@ describe("move element", () => {
h.elements.forEach((element) => expect(element).toMatchSnapshot());
});
it("rectangles with binding arrow", () => {
render(<App />);
// create elements
const rectA = UI.createElement("rectangle", { size: 100 });
const rectB = UI.createElement("rectangle", { x: 200, y: 0, size: 300 });
const line = UI.createElement("line", { x: 110, y: 50, size: 80 });
// bind line to two rectangles
bindOrUnbindLinearElement(
line as NonDeleted<ExcalidrawLinearElement>,
rectA as ExcalidrawRectangleElement,
rectB as ExcalidrawRectangleElement,
);
// select the second rectangles
new Pointer("mouse").clickOn(rectB);
expect(renderScene).toHaveBeenCalledTimes(19);
expect(h.state.selectionElement).toBeNull();
expect(h.elements.length).toEqual(3);
expect(h.state.selectedElementIds[rectB.id]).toBeTruthy();
expect([rectA.x, rectA.y]).toEqual([0, 0]);
expect([rectB.x, rectB.y]).toEqual([200, 0]);
expect([line.x, line.y]).toEqual([110, 50]);
expect([line.width, line.height]).toEqual([80, 80]);
renderScene.mockClear();
// Move selected rectangle
Keyboard.keyDown("ArrowRight");
Keyboard.keyDown("ArrowDown");
Keyboard.keyDown("ArrowDown");
// Check that the arrow size has been changed according to moving the rectangle
expect(renderScene).toHaveBeenCalledTimes(3);
expect(h.state.selectionElement).toBeNull();
expect(h.elements.length).toEqual(3);
expect(h.state.selectedElementIds[rectB.id]).toBeTruthy();
expect([rectA.x, rectA.y]).toEqual([0, 0]);
expect([rectB.x, rectB.y]).toEqual([201, 2]);
expect([Math.round(line.x), Math.round(line.y)]).toEqual([110, 50]);
expect([Math.round(line.width), Math.round(line.height)]).toEqual([81, 81]);
h.elements.forEach((element) => expect(element).toMatchSnapshot());
});
});
describe("duplicate element on move when ALT is clicked", () => {