26f67d27ec
* Refactor: simplify linear element type * Refactor: dedupe scrollbar handling * First step towards binding - establish relationship and basic test for dragged lines * Refactor: use zoom from appstate * Refactor: generalize getElementAtPosition * Only consider bindable elements in hit test * Refactor: pull out pieces of hit test for reuse later * Refactor: pull out diamond from hit test for reuse later * Refactor: pull out text from hit test for reuse later * Suggest binding when hovering * Give shapes in regression test real size * Give shapes in undo/redo test real size * Keep bound element highlighted * Show binding suggestion for multi-point elements * Move binding to its on module with functions so that I can use it from actions, add support for binding end of multi-point elements * Use Id instead of ID * Improve boundary offset for non-squarish elements * Fix localStorage for binding on linear elements * Simplify dragging code and fix elements bound twice to the same shape * Fix binding for rectangles * Bind both ends at the end of the linear element creation, needed for focus points * wip * Refactor: Renames and reshapes for next commit * Calculate and store focus points and gaps, but dont use them yet * Focus points for rectangles * Dont blow up when canceling linear element * Stop suggesting binding when a non-compatible tool is selected * Clean up collision code * Using Geometric Algebra for hit tests * Correct binding for all shapes * Constant gap around polygon corners * Fix rotation handling * Generalize update and fix hit test for rotated elements * Handle rotation realtime * Handle scaling * Remove vibration when moving bound and binding element together * Handle simultenous scaling * Allow binding and unbinding when editing linear elements * Dont delete binding when the end point wasnt touched * Bind on enter/escape when editing * Support multiple suggested bindable elements in preparation for supporting linear elements dragging * Update binding when moving linear elements * Update binding when resizing linear elements * Dont re-render UI on binding hints * Update both ends when one is moved * Use distance instead of focus point for binding * Complicated approach for posterity, ignore this commit * Revert the complicated approach * Better focus point strategy, working for all shapes * Update snapshots * Dont break binding gap when mirroring shape * Dont break binding gap when grid mode pushes it inside * Dont bind draw elements * Support alt duplication * Fix alt duplication to * Support cmd+D duplication * All copy mechanisms are supported * Allow binding shapes to arrows, having arrows created first * Prevent arrows from disappearing for ellipses * Better binding suggestion highlight for shapes * Dont suggest second binding for simple elements when editing or moving them * Dont steal already bound linear elements when moving shapes * Fix highlighting diamonds and more precisely highlight other shapes * Highlight linear element edges for binding * Highlight text binding too * Handle deletion * Dont suggest second binding for simple linear elements when creating them * Dont highlight bound element during creation * Fix binding for rotated linear elements * Fix collision check for ellipses * Dont show suggested bindings for selected pairs * Bind multi-point linear elements when the tool is switched - important for mobile * Handle unbinding one of two bound edges correctly * Rename boundElement in state to startBoundElement * Dont double account for zoom when rendering binding highlight * Fix rendering of edited linear element point handles * Suggest binding when adding new point to a linear element * Bind when adding a new point to a linear element and dont unbind when moving middle elements * Handle deleting points * Add cmd modifier key to disable binding * Use state for enabling binding, fix not binding for linear elements during creation * Drop support for binding lines, only arrows are bindable * Reset binding mode on blur * Fix not binding lines
99 lines
3.4 KiB
TypeScript
99 lines
3.4 KiB
TypeScript
import React from "react";
|
|
import ReactDOM from "react-dom";
|
|
import { render, fireEvent } from "./test-utils";
|
|
import App from "../components/App";
|
|
import * as Renderer from "../renderer/renderScene";
|
|
import { reseed } from "../random";
|
|
|
|
// Unmount ReactDOM from root
|
|
ReactDOM.unmountComponentAtNode(document.getElementById("root")!);
|
|
|
|
const renderScene = jest.spyOn(Renderer, "renderScene");
|
|
beforeEach(() => {
|
|
localStorage.clear();
|
|
renderScene.mockClear();
|
|
reseed(7);
|
|
});
|
|
|
|
const { h } = window;
|
|
|
|
describe("move element", () => {
|
|
it("rectangle", () => {
|
|
const { getByToolName, container } = render(<App />);
|
|
const canvas = container.querySelector("canvas")!;
|
|
|
|
{
|
|
// 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);
|
|
|
|
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]);
|
|
|
|
renderScene.mockClear();
|
|
}
|
|
|
|
fireEvent.pointerDown(canvas, { clientX: 50, clientY: 20 });
|
|
fireEvent.pointerMove(canvas, { clientX: 20, clientY: 40 });
|
|
fireEvent.pointerUp(canvas);
|
|
|
|
expect(renderScene).toHaveBeenCalledTimes(3);
|
|
expect(h.state.selectionElement).toBeNull();
|
|
expect(h.elements.length).toEqual(1);
|
|
expect([h.elements[0].x, h.elements[0].y]).toEqual([0, 40]);
|
|
|
|
h.elements.forEach((element) => expect(element).toMatchSnapshot());
|
|
});
|
|
});
|
|
|
|
describe("duplicate element on move when ALT is clicked", () => {
|
|
it("rectangle", () => {
|
|
const { getByToolName, container } = render(<App />);
|
|
const canvas = container.querySelector("canvas")!;
|
|
|
|
{
|
|
// 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);
|
|
|
|
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]);
|
|
|
|
renderScene.mockClear();
|
|
}
|
|
|
|
fireEvent.pointerDown(canvas, { clientX: 50, clientY: 20 });
|
|
fireEvent.pointerMove(canvas, { clientX: 20, clientY: 40, altKey: true });
|
|
|
|
// firing another pointerMove event with alt key pressed should NOT trigger
|
|
// another duplication
|
|
fireEvent.pointerMove(canvas, { clientX: 20, clientY: 40, altKey: true });
|
|
fireEvent.pointerMove(canvas, { clientX: 10, clientY: 60 });
|
|
fireEvent.pointerUp(canvas);
|
|
|
|
// TODO: This used to be 4, but binding made it go up to 5. Do we need
|
|
// that additional render?
|
|
expect(renderScene).toHaveBeenCalledTimes(5);
|
|
expect(h.state.selectionElement).toBeNull();
|
|
expect(h.elements.length).toEqual(2);
|
|
|
|
// previous element should stay intact
|
|
expect([h.elements[0].x, h.elements[0].y]).toEqual([30, 20]);
|
|
expect([h.elements[1].x, h.elements[1].y]).toEqual([-10, 60]);
|
|
|
|
h.elements.forEach((element) => expect(element).toMatchSnapshot());
|
|
});
|
|
});
|