Skip to content

Commit

Permalink
rebind arrow on rotation (excalidraw#2096)
Browse files Browse the repository at this point in the history
  • Loading branch information
dwelle authored Aug 29, 2020
1 parent 0e28177 commit 26ef235
Show file tree
Hide file tree
Showing 4 changed files with 101 additions and 42 deletions.
12 changes: 5 additions & 7 deletions src/components/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -143,7 +143,6 @@ import {
isLinearElementType,
isBindingElement,
isBindingElementType,
isBindableElement,
} from "../element/typeChecks";
import { actionFinalize, actionDeleteSelected } from "../actions";
import { loadLibrary } from "../data/localStorage";
Expand All @@ -168,7 +167,6 @@ import {
bindOrUnbindSelectedElements,
unbindLinearElements,
fixBindingsAfterDuplication,
maybeBindBindableElement,
getElligibleElementForBindingElementAtCoors,
fixBindingsAfterDeletion,
isLinearElementSimpleAndAlreadyBound,
Expand Down Expand Up @@ -2946,6 +2944,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
)
) {
this.maybeSuggestBindingForAll(selectedElements);
bindOrUnbindSelectedElements(selectedElements);
return;
}
}
Expand Down Expand Up @@ -3339,11 +3338,10 @@ class App extends React.Component<ExcalidrawProps, AppState> {
getNormalizedDimensions(draggingElement),
);

if (
isBindingEnabled(this.state) &&
isBindableElement(draggingElement)
) {
maybeBindBindableElement(draggingElement);
if (isBindingEnabled(this.state)) {
bindOrUnbindSelectedElements(
getSelectedElements(this.scene.getElements(), this.state),
);
}
}

Expand Down
56 changes: 28 additions & 28 deletions src/tests/__snapshots__/regressionTests.test.tsx.snap
Original file line number Diff line number Diff line change
Expand Up @@ -997,7 +997,7 @@ Object {
"versionNonce": 915032327,
"width": 10,
"x": 30,
"y": 30,
"y": 0,
}
`;

Expand Down Expand Up @@ -1025,7 +1025,7 @@ Object {
"versionNonce": 81784553,
"width": 10,
"x": 60,
"y": 60,
"y": 0,
}
`;

Expand Down Expand Up @@ -1125,7 +1125,7 @@ Object {
"versionNonce": 453191,
"width": 10,
"x": 30,
"y": 30,
"y": 0,
},
],
},
Expand Down Expand Up @@ -1191,7 +1191,7 @@ Object {
"versionNonce": 1116226695,
"width": 10,
"x": 30,
"y": 30,
"y": 0,
},
],
},
Expand Down Expand Up @@ -1255,7 +1255,7 @@ Object {
"versionNonce": 1116226695,
"width": 10,
"x": 30,
"y": 30,
"y": 0,
},
],
},
Expand Down Expand Up @@ -1318,7 +1318,7 @@ Object {
"versionNonce": 1116226695,
"width": 10,
"x": 30,
"y": 30,
"y": 0,
},
Object {
"angle": 0,
Expand All @@ -1341,7 +1341,7 @@ Object {
"versionNonce": 1604849351,
"width": 10,
"x": 60,
"y": 60,
"y": 0,
},
],
},
Expand Down Expand Up @@ -1410,7 +1410,7 @@ Object {
"versionNonce": 915032327,
"width": 10,
"x": 30,
"y": 30,
"y": 0,
},
Object {
"angle": 0,
Expand All @@ -1435,7 +1435,7 @@ Object {
"versionNonce": 81784553,
"width": 10,
"x": 60,
"y": 60,
"y": 0,
},
],
},
Expand Down Expand Up @@ -1501,7 +1501,7 @@ Object {
"versionNonce": 915032327,
"width": 10,
"x": 30,
"y": 30,
"y": 0,
},
Object {
"angle": 0,
Expand All @@ -1526,7 +1526,7 @@ Object {
"versionNonce": 81784553,
"width": 10,
"x": 60,
"y": 60,
"y": 0,
},
],
},
Expand Down Expand Up @@ -1592,7 +1592,7 @@ Object {
"versionNonce": 915032327,
"width": 10,
"x": 30,
"y": 30,
"y": 0,
},
Object {
"angle": 0,
Expand All @@ -1617,7 +1617,7 @@ Object {
"versionNonce": 81784553,
"width": 10,
"x": 60,
"y": 60,
"y": 0,
},
],
},
Expand Down Expand Up @@ -25348,7 +25348,7 @@ Object {
"versionNonce": 81784553,
"width": 10,
"x": 10,
"y": 10,
"y": 0,
}
`;

Expand Down Expand Up @@ -25377,7 +25377,7 @@ Object {
"versionNonce": 747212839,
"width": 10,
"x": 50,
"y": 50,
"y": 0,
}
`;

Expand Down Expand Up @@ -25476,7 +25476,7 @@ Object {
"versionNonce": 1278240551,
"width": 10,
"x": 10,
"y": 10,
"y": 0,
},
],
},
Expand Down Expand Up @@ -25512,7 +25512,7 @@ Object {
"versionNonce": 1278240551,
"width": 10,
"x": 10,
"y": 10,
"y": 0,
},
Object {
"angle": 0,
Expand All @@ -25535,7 +25535,7 @@ Object {
"versionNonce": 453191,
"width": 10,
"x": 50,
"y": 50,
"y": 0,
},
],
},
Expand Down Expand Up @@ -25576,7 +25576,7 @@ Object {
"versionNonce": 1150084233,
"width": 10,
"x": 10,
"y": 10,
"y": 0,
},
Object {
"angle": 0,
Expand All @@ -25601,7 +25601,7 @@ Object {
"versionNonce": 1116226695,
"width": 10,
"x": 50,
"y": 50,
"y": 0,
},
],
},
Expand Down Expand Up @@ -25639,7 +25639,7 @@ Object {
"versionNonce": 1150084233,
"width": 10,
"x": 10,
"y": 10,
"y": 0,
},
Object {
"angle": 0,
Expand All @@ -25664,7 +25664,7 @@ Object {
"versionNonce": 1116226695,
"width": 10,
"x": 50,
"y": 50,
"y": 0,
},
Object {
"angle": 0,
Expand Down Expand Up @@ -25725,7 +25725,7 @@ Object {
"versionNonce": 1150084233,
"width": 10,
"x": 10,
"y": 10,
"y": 0,
},
Object {
"angle": 0,
Expand All @@ -25750,7 +25750,7 @@ Object {
"versionNonce": 1116226695,
"width": 10,
"x": 50,
"y": 50,
"y": 0,
},
Object {
"angle": 0,
Expand Down Expand Up @@ -25837,7 +25837,7 @@ Object {
"versionNonce": 1150084233,
"width": 10,
"x": 10,
"y": 10,
"y": 0,
},
Object {
"angle": 0,
Expand All @@ -25862,7 +25862,7 @@ Object {
"versionNonce": 1116226695,
"width": 10,
"x": 50,
"y": 50,
"y": 0,
},
Object {
"angle": 0,
Expand Down Expand Up @@ -25954,7 +25954,7 @@ Object {
"versionNonce": 81784553,
"width": 10,
"x": 10,
"y": 10,
"y": 0,
},
Object {
"angle": 0,
Expand All @@ -25980,7 +25980,7 @@ Object {
"versionNonce": 747212839,
"width": 10,
"x": 50,
"y": 50,
"y": 0,
},
Object {
"angle": 0,
Expand Down
49 changes: 49 additions & 0 deletions src/tests/binding.test.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
import React from "react";
import { render } from "./test-utils";
import App from "../components/App";
import { UI, Pointer } from "./helpers/ui";
import { getTransformHandles } from "../element/transformHandles";

const { h } = window;

const mouse = new Pointer("mouse");

describe("element binding", () => {
beforeEach(() => {
render(<App />);
});

// NOTE if this tests fails, skip it -- it was really flaky at one point
it("rotation of arrow should rebind both ends", () => {
const rect1 = UI.createElement("rectangle", {
x: 0,
width: 100,
height: 1000,
});
const rect2 = UI.createElement("rectangle", {
x: 200,
width: 100,
height: 1000,
});
const arrow = UI.createElement("arrow", {
x: 110,
y: 50,
width: 80,
height: 1,
});
expect(arrow.startBinding?.elementId).toBe(rect1.id);
expect(arrow.endBinding?.elementId).toBe(rect2.id);

const { rotation } = getTransformHandles(arrow, h.state.zoom, "mouse");
if (rotation) {
const rotationHandleX = rotation[0] + rotation[2] / 2;
const rotationHandleY = rotation[1] + rotation[3] / 2;
mouse.down(rotationHandleX, rotationHandleY);
mouse.move(0, 1000);
mouse.up();
}
expect(arrow.angle).toBeGreaterThan(3);
expect(arrow.startBinding?.elementId).toBe(rect2.id);
expect(arrow.endBinding?.elementId).toBe(rect1.id);
});
});
26 changes: 19 additions & 7 deletions src/tests/helpers/ui.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,11 @@
import { ToolName } from "../queries/toolQueries";
import { fireEvent, GlobalTestState } from "../test-utils";
import { KEYS, Key } from "../../keys";
import { ExcalidrawElement } from "../../element/types";
import {
ExcalidrawElement,
ExcalidrawLinearElement,
ExcalidrawTextElement,
} from "../../element/types";
import { API } from "./api";

const { h } = window;
Expand Down Expand Up @@ -174,24 +178,32 @@ export class UI {
fireEvent.click(GlobalTestState.renderResult.getByToolName(toolName));
};

static createElement(
type: ToolName,
static createElement<T extends ToolName>(
type: T,
{
x = 0,
y = x,
y = 0,
size = 10,
width = size,
height = width,
}: {
x?: number;
y?: number;
size?: number;
width?: number;
height?: number;
},
) {
): T extends "arrow" | "line" | "draw"
? ExcalidrawLinearElement
: T extends "text"
? ExcalidrawTextElement
: ExcalidrawElement {
UI.clickTool(type);
mouse.reset();
mouse.down(x, y);
mouse.reset();
mouse.up(x + size, y + size);
return h.elements[h.elements.length - 1];
mouse.up(x + (width ?? height ?? size), y + (height ?? size));
return h.elements[h.elements.length - 1] as any;
}

static group(elements: ExcalidrawElement[]) {
Expand Down

0 comments on commit 26ef235

Please sign in to comment.