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

Lock drag direction using Shift (#1858)

Browse source 
Co-authored-by: dwelle <luzar.david@gmail.com>
This commit is contained in:
Robert van Hoesel 2020-09-11 17:22:40 +02:00 • committed by GitHub
parent d07099aadd
commit c6736fa14e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 84 additions and 75 deletions
Download patch file Download diff file Expand all files Collapse all files

26
src/tests/__snapshots__/resize.test.tsx.snap
View file

@ -25,29 +25,3 @@ Object {
"y": 47,
}
`;
exports[`resize element with aspect ratio when SHIFT is clicked rectangle 1`] = `
Object {
"angle": 0,
"backgroundColor": "transparent",
"boundElementIds": null,
"fillStyle": "hachure",
"groupIds": Array [],
"height": 50,
"id": "id0",
"isDeleted": false,
"opacity": 100,
"roughness": 1,
"seed": 337897,
"strokeColor": "#000000",
"strokeSharpness": "sharp",
"strokeStyle": "solid",
"strokeWidth": 1,
"type": "rectangle",
"version": 3,
"versionNonce": 401146281,
"width": 30,
"x": 29,
"y": 47,
}
`;

56
src/tests/resize.test.tsx
View file

@ -4,6 +4,10 @@ import { render, fireEvent } from "./test-utils";
import App from "../components/App";
import * as Renderer from "../renderer/renderScene";
import { reseed } from "../random";
import { UI, Pointer, Keyboard } from "./helpers/ui";
import { getTransformHandles } from "../element/transformHandles";
const mouse = new Pointer("mouse");
// Unmount ReactDOM from root
ReactDOM.unmountComponentAtNode(document.getElementById("root")!);
@ -62,43 +66,25 @@ describe("resize element", () => {
describe("resize element with aspect ratio when SHIFT is clicked", () => {
it("rectangle", () => {
const { getByToolName, container } = render(<App />);
const canvas = container.querySelector("canvas")!;
render(<App />);
{
// create element
const tool = getByToolName("rectangle");
fireEvent.click(tool);
fireEvent.pointerDown(canvas, { clientX: 30, clientY: 20 });
fireEvent.pointerMove(canvas, { clientX: 60, clientY: 70 });
fireEvent.pointerUp(canvas);
const rectangle = UI.createElement("rectangle", {
x: 0,
width: 30,
height: 50,
});
expect(renderScene).toHaveBeenCalledTimes(5);
expect(h.state.selectionElement).toBeNull();
expect(h.elements.length).toEqual(1);
expect(h.state.selectedElementIds[h.elements[0].id]).toBeTruthy();
expect([h.elements[0].x, h.elements[0].y]).toEqual([30, 20]);
expect([h.elements[0].x, h.elements[0].y]).toEqual([30, 20]);
expect([h.elements[0].width, h.elements[0].height]).toEqual([30, 50]);
mouse.select(rectangle);
renderScene.mockClear();
}
// select the element first
fireEvent.pointerDown(canvas, { clientX: 50, clientY: 20 });
fireEvent.pointerUp(canvas);
// select a handler rectangle (top-left)
fireEvent.pointerDown(canvas, { clientX: 21, clientY: 13 });
fireEvent.pointerMove(canvas, { clientX: 20, clientY: 40, shiftKey: true });
fireEvent.pointerUp(canvas);
expect(renderScene).toHaveBeenCalledTimes(5);
expect(h.state.selectionElement).toBeNull();
expect(h.elements.length).toEqual(1);
expect([h.elements[0].x, h.elements[0].y]).toEqual([29, 47]);
expect([h.elements[0].width, h.elements[0].height]).toEqual([30, 50]);
h.elements.forEach((element) => expect(element).toMatchSnapshot());
const se = getTransformHandles(rectangle, h.state.zoom, "mouse").se!;
const clientX = se[0] + se[2] / 2;
const clientY = se[1] + se[3] / 2;
Keyboard.withModifierKeys({ shift: true }, () => {
mouse.reset();
mouse.down(clientX, clientY);
mouse.move(1, 1);
mouse.up();
});
expect([h.elements[0].width, h.elements[0].height]).toEqual([51, 51]);
});
});