feat: Element locking (#4964)
Co-authored-by: dwelle <luzar.david@gmail.com> Co-authored-by: Zsolt Viczian <viczian.zsolt@gmail.com>pull/5025/head
Tom Sherman
3 years ago
committed by
GitHub
parent
c2fce6d8c4
commit
327ed0e2d1
@ -0,0 +1,63 @@
|
|||||||
|
import { newElementWith } from "../element/mutateElement";
|
||||||
|
import { ExcalidrawElement } from "../element/types";
|
||||||
|
import { KEYS } from "../keys";
|
||||||
|
import { getSelectedElements } from "../scene";
|
||||||
|
import { arrayToMap } from "../utils";
|
||||||
|
import { register } from "./register";
|
||||||
|
|
||||||
|
export const actionToggleLock = register({
|
||||||
|
name: "toggleLock",
|
||||||
|
trackEvent: { category: "element" },
|
||||||
|
perform: (elements, appState) => {
|
||||||
|
const selectedElements = getSelectedElements(elements, appState, true);
|
||||||
|
|
||||||
|
if (!selectedElements.length) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
const operation = getOperation(selectedElements);
|
||||||
|
const selectedElementsMap = arrayToMap(selectedElements);
|
||||||
|
|
||||||
|
return {
|
||||||
|
elements: elements.map((element) => {
|
||||||
|
if (!selectedElementsMap.has(element.id)) {
|
||||||
|
return element;
|
||||||
|
}
|
||||||
|
|
||||||
|
return newElementWith(element, { locked: operation === "lock" });
|
||||||
|
}),
|
||||||
|
appState,
|
||||||
|
commitToHistory: true,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
contextItemLabel: (elements, appState) => {
|
||||||
|
const selected = getSelectedElements(elements, appState, false);
|
||||||
|
if (selected.length === 1) {
|
||||||
|
return selected[0].locked
|
||||||
|
? "labels.elementLock.unlock"
|
||||||
|
: "labels.elementLock.lock";
|
||||||
|
}
|
||||||
|
|
||||||
|
if (selected.length > 1) {
|
||||||
|
return getOperation(selected) === "lock"
|
||||||
|
? "labels.elementLock.lockAll"
|
||||||
|
: "labels.elementLock.unlockAll";
|
||||||
|
}
|
||||||
|
|
||||||
|
throw new Error(
|
||||||
|
"Unexpected zero elements to lock/unlock. This should never happen.",
|
||||||
|
);
|
||||||
|
},
|
||||||
|
keyTest: (event, appState, elements) => {
|
||||||
|
return (
|
||||||
|
event.key.toLocaleLowerCase() === KEYS.L &&
|
||||||
|
event[KEYS.CTRL_OR_CMD] &&
|
||||||
|
event.shiftKey &&
|
||||||
|
getSelectedElements(elements, appState, false).length > 0
|
||||||
|
);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const getOperation = (
|
||||||
|
elements: readonly ExcalidrawElement[],
|
||||||
|
): "lock" | "unlock" => (elements.some((el) => !el.locked) ? "lock" : "unlock");
|
||||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,388 @@
|
|||||||
|
import ReactDOM from "react-dom";
|
||||||
|
import ExcalidrawApp from "../excalidraw-app";
|
||||||
|
import { render } from "../tests/test-utils";
|
||||||
|
import { Keyboard, Pointer, UI } from "../tests/helpers/ui";
|
||||||
|
import { KEYS } from "../keys";
|
||||||
|
import { API } from "../tests/helpers/api";
|
||||||
|
import { actionSelectAll } from "../actions";
|
||||||
|
import { t } from "../i18n";
|
||||||
|
import { mutateElement } from "../element/mutateElement";
|
||||||
|
|
||||||
|
ReactDOM.unmountComponentAtNode(document.getElementById("root")!);
|
||||||
|
|
||||||
|
const mouse = new Pointer("mouse");
|
||||||
|
const h = window.h;
|
||||||
|
|
||||||
|
describe("element locking", () => {
|
||||||
|
beforeEach(async () => {
|
||||||
|
await render(<ExcalidrawApp />);
|
||||||
|
h.elements = [];
|
||||||
|
});
|
||||||
|
|
||||||
|
it("click-selecting a locked element is disabled", () => {
|
||||||
|
const lockedRectangle = API.createElement({
|
||||||
|
type: "rectangle",
|
||||||
|
width: 100,
|
||||||
|
backgroundColor: "red",
|
||||||
|
fillStyle: "solid",
|
||||||
|
locked: true,
|
||||||
|
});
|
||||||
|
|
||||||
|
h.elements = [lockedRectangle];
|
||||||
|
|
||||||
|
mouse.clickAt(50, 50);
|
||||||
|
expect(API.getSelectedElements().length).toBe(0);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("box-selecting a locked element is disabled", () => {
|
||||||
|
const lockedRectangle = API.createElement({
|
||||||
|
type: "rectangle",
|
||||||
|
width: 100,
|
||||||
|
backgroundColor: "red",
|
||||||
|
fillStyle: "solid",
|
||||||
|
locked: true,
|
||||||
|
x: 100,
|
||||||
|
y: 100,
|
||||||
|
});
|
||||||
|
|
||||||
|
h.elements = [lockedRectangle];
|
||||||
|
|
||||||
|
mouse.downAt(50, 50);
|
||||||
|
mouse.moveTo(250, 250);
|
||||||
|
mouse.upAt(250, 250);
|
||||||
|
expect(API.getSelectedElements().length).toBe(0);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("dragging a locked element is disabled", () => {
|
||||||
|
const lockedRectangle = API.createElement({
|
||||||
|
type: "rectangle",
|
||||||
|
width: 100,
|
||||||
|
backgroundColor: "red",
|
||||||
|
fillStyle: "solid",
|
||||||
|
locked: true,
|
||||||
|
});
|
||||||
|
|
||||||
|
h.elements = [lockedRectangle];
|
||||||
|
|
||||||
|
mouse.downAt(50, 50);
|
||||||
|
mouse.moveTo(100, 100);
|
||||||
|
mouse.upAt(100, 100);
|
||||||
|
expect(lockedRectangle).toEqual(expect.objectContaining({ x: 0, y: 0 }));
|
||||||
|
});
|
||||||
|
|
||||||
|
it("you can drag element that's below a locked element", () => {
|
||||||
|
const rectangle = API.createElement({
|
||||||
|
type: "rectangle",
|
||||||
|
width: 100,
|
||||||
|
backgroundColor: "red",
|
||||||
|
fillStyle: "solid",
|
||||||
|
});
|
||||||
|
const lockedRectangle = API.createElement({
|
||||||
|
type: "rectangle",
|
||||||
|
width: 100,
|
||||||
|
backgroundColor: "red",
|
||||||
|
fillStyle: "solid",
|
||||||
|
locked: true,
|
||||||
|
});
|
||||||
|
|
||||||
|
h.elements = [rectangle, lockedRectangle];
|
||||||
|
|
||||||
|
mouse.downAt(50, 50);
|
||||||
|
mouse.moveTo(100, 100);
|
||||||
|
mouse.upAt(100, 100);
|
||||||
|
expect(lockedRectangle).toEqual(expect.objectContaining({ x: 0, y: 0 }));
|
||||||
|
expect(rectangle).toEqual(expect.objectContaining({ x: 50, y: 50 }));
|
||||||
|
expect(API.getSelectedElements().length).toBe(1);
|
||||||
|
expect(API.getSelectedElement().id).toBe(rectangle.id);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("selectAll shouldn't select locked elements", () => {
|
||||||
|
h.elements = [
|
||||||
|
API.createElement({ type: "rectangle" }),
|
||||||
|
API.createElement({ type: "rectangle", locked: true }),
|
||||||
|
];
|
||||||
|
h.app.actionManager.executeAction(actionSelectAll);
|
||||||
|
expect(API.getSelectedElements().length).toBe(1);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("clicking on a locked element should select the unlocked element beneath it", () => {
|
||||||
|
const rectangle = API.createElement({
|
||||||
|
type: "rectangle",
|
||||||
|
width: 100,
|
||||||
|
backgroundColor: "red",
|
||||||
|
fillStyle: "solid",
|
||||||
|
});
|
||||||
|
const lockedRectangle = API.createElement({
|
||||||
|
type: "rectangle",
|
||||||
|
width: 100,
|
||||||
|
backgroundColor: "red",
|
||||||
|
fillStyle: "solid",
|
||||||
|
locked: true,
|
||||||
|
});
|
||||||
|
|
||||||
|
h.elements = [rectangle, lockedRectangle];
|
||||||
|
expect(API.getSelectedElements().length).toBe(0);
|
||||||
|
mouse.clickAt(50, 50);
|
||||||
|
expect(API.getSelectedElements().length).toBe(1);
|
||||||
|
expect(API.getSelectedElement().id).toBe(rectangle.id);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("right-clicking on a locked element should select it & open its contextMenu", () => {
|
||||||
|
const rectangle = API.createElement({
|
||||||
|
type: "rectangle",
|
||||||
|
width: 100,
|
||||||
|
backgroundColor: "red",
|
||||||
|
fillStyle: "solid",
|
||||||
|
});
|
||||||
|
const lockedRectangle = API.createElement({
|
||||||
|
type: "rectangle",
|
||||||
|
width: 100,
|
||||||
|
backgroundColor: "red",
|
||||||
|
fillStyle: "solid",
|
||||||
|
locked: true,
|
||||||
|
});
|
||||||
|
|
||||||
|
h.elements = [rectangle, lockedRectangle];
|
||||||
|
expect(API.getSelectedElements().length).toBe(0);
|
||||||
|
mouse.rightClickAt(50, 50);
|
||||||
|
expect(API.getSelectedElements().length).toBe(1);
|
||||||
|
expect(API.getSelectedElement().id).toBe(lockedRectangle.id);
|
||||||
|
|
||||||
|
const contextMenu = UI.queryContextMenu();
|
||||||
|
expect(contextMenu).not.toBeNull();
|
||||||
|
expect(
|
||||||
|
contextMenu?.querySelector(
|
||||||
|
`li[data-testid="toggleLock"] .context-menu-option__label`,
|
||||||
|
),
|
||||||
|
).toHaveTextContent(t("labels.elementLock.unlock"));
|
||||||
|
});
|
||||||
|
|
||||||
|
it("right-clicking on element covered by locked element should ignore the locked element", () => {
|
||||||
|
const rectangle = API.createElement({
|
||||||
|
type: "rectangle",
|
||||||
|
width: 100,
|
||||||
|
backgroundColor: "red",
|
||||||
|
fillStyle: "solid",
|
||||||
|
});
|
||||||
|
const lockedRectangle = API.createElement({
|
||||||
|
type: "rectangle",
|
||||||
|
width: 100,
|
||||||
|
backgroundColor: "red",
|
||||||
|
fillStyle: "solid",
|
||||||
|
locked: true,
|
||||||
|
});
|
||||||
|
|
||||||
|
h.elements = [rectangle, lockedRectangle];
|
||||||
|
API.setSelectedElements([rectangle]);
|
||||||
|
expect(API.getSelectedElements().length).toBe(1);
|
||||||
|
expect(API.getSelectedElement().id).toBe(rectangle.id);
|
||||||
|
mouse.rightClickAt(50, 50);
|
||||||
|
expect(API.getSelectedElements().length).toBe(1);
|
||||||
|
expect(API.getSelectedElement().id).toBe(rectangle.id);
|
||||||
|
|
||||||
|
const contextMenu = UI.queryContextMenu();
|
||||||
|
expect(contextMenu).not.toBeNull();
|
||||||
|
});
|
||||||
|
|
||||||
|
it("selecting a group selects all elements including locked ones", () => {
|
||||||
|
const rectangle = API.createElement({
|
||||||
|
type: "rectangle",
|
||||||
|
width: 100,
|
||||||
|
backgroundColor: "red",
|
||||||
|
fillStyle: "solid",
|
||||||
|
groupIds: ["g1"],
|
||||||
|
});
|
||||||
|
const lockedRectangle = API.createElement({
|
||||||
|
type: "rectangle",
|
||||||
|
width: 100,
|
||||||
|
backgroundColor: "red",
|
||||||
|
fillStyle: "solid",
|
||||||
|
locked: true,
|
||||||
|
groupIds: ["g1"],
|
||||||
|
x: 200,
|
||||||
|
y: 200,
|
||||||
|
});
|
||||||
|
|
||||||
|
h.elements = [rectangle, lockedRectangle];
|
||||||
|
|
||||||
|
mouse.clickAt(250, 250);
|
||||||
|
expect(API.getSelectedElements().length).toBe(0);
|
||||||
|
|
||||||
|
mouse.clickAt(50, 50);
|
||||||
|
expect(API.getSelectedElements().length).toBe(2);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("should ignore locked text element in center of container on ENTER", () => {
|
||||||
|
const container = API.createElement({
|
||||||
|
type: "rectangle",
|
||||||
|
width: 100,
|
||||||
|
});
|
||||||
|
const textSize = 20;
|
||||||
|
const text = API.createElement({
|
||||||
|
type: "text",
|
||||||
|
text: "ola",
|
||||||
|
x: container.width / 2 - textSize / 2,
|
||||||
|
y: container.height / 2 - textSize / 2,
|
||||||
|
width: textSize,
|
||||||
|
height: textSize,
|
||||||
|
containerId: container.id,
|
||||||
|
locked: true,
|
||||||
|
});
|
||||||
|
h.elements = [container, text];
|
||||||
|
API.setSelectedElements([container]);
|
||||||
|
Keyboard.keyPress(KEYS.ENTER);
|
||||||
|
expect(h.state.editingElement?.id).not.toBe(text.id);
|
||||||
|
expect(h.state.editingElement?.id).toBe(h.elements[2].id);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("should ignore locked text under cursor when clicked with text tool", () => {
|
||||||
|
const text = API.createElement({
|
||||||
|
type: "text",
|
||||||
|
text: "ola",
|
||||||
|
x: 60,
|
||||||
|
y: 0,
|
||||||
|
width: 100,
|
||||||
|
height: 100,
|
||||||
|
locked: true,
|
||||||
|
});
|
||||||
|
h.elements = [text];
|
||||||
|
UI.clickTool("text");
|
||||||
|
mouse.clickAt(text.x + 50, text.y + 50);
|
||||||
|
const editor = document.querySelector(
|
||||||
|
".excalidraw-textEditorContainer > textarea",
|
||||||
|
) as HTMLTextAreaElement;
|
||||||
|
expect(editor).not.toBe(null);
|
||||||
|
expect(h.state.editingElement?.id).not.toBe(text.id);
|
||||||
|
expect(h.elements.length).toBe(2);
|
||||||
|
expect(h.state.editingElement?.id).toBe(h.elements[1].id);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("should ignore text under cursor when double-clicked with selection tool", () => {
|
||||||
|
const text = API.createElement({
|
||||||
|
type: "text",
|
||||||
|
text: "ola",
|
||||||
|
x: 60,
|
||||||
|
y: 0,
|
||||||
|
width: 100,
|
||||||
|
height: 100,
|
||||||
|
locked: true,
|
||||||
|
});
|
||||||
|
h.elements = [text];
|
||||||
|
UI.clickTool("selection");
|
||||||
|
mouse.doubleClickAt(text.x + 50, text.y + 50);
|
||||||
|
const editor = document.querySelector(
|
||||||
|
".excalidraw-textEditorContainer > textarea",
|
||||||
|
) as HTMLTextAreaElement;
|
||||||
|
expect(editor).not.toBe(null);
|
||||||
|
expect(h.state.editingElement?.id).not.toBe(text.id);
|
||||||
|
expect(h.elements.length).toBe(2);
|
||||||
|
expect(h.state.editingElement?.id).toBe(h.elements[1].id);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("locking should include bound text", () => {
|
||||||
|
const container = API.createElement({
|
||||||
|
type: "rectangle",
|
||||||
|
width: 100,
|
||||||
|
});
|
||||||
|
const textSize = 20;
|
||||||
|
const text = API.createElement({
|
||||||
|
type: "text",
|
||||||
|
text: "ola",
|
||||||
|
x: container.width / 2 - textSize / 2,
|
||||||
|
y: container.height / 2 - textSize / 2,
|
||||||
|
width: textSize,
|
||||||
|
height: textSize,
|
||||||
|
containerId: container.id,
|
||||||
|
});
|
||||||
|
mutateElement(container, {
|
||||||
|
boundElements: [{ id: text.id, type: "text" }],
|
||||||
|
});
|
||||||
|
|
||||||
|
h.elements = [container, text];
|
||||||
|
|
||||||
|
UI.clickTool("selection");
|
||||||
|
mouse.clickAt(container.x + 10, container.y + 10);
|
||||||
|
Keyboard.withModifierKeys({ ctrl: true, shift: true }, () => {
|
||||||
|
Keyboard.keyPress(KEYS.L);
|
||||||
|
});
|
||||||
|
|
||||||
|
expect(h.elements).toEqual([
|
||||||
|
expect.objectContaining({
|
||||||
|
id: container.id,
|
||||||
|
locked: true,
|
||||||
|
}),
|
||||||
|
expect.objectContaining({
|
||||||
|
id: text.id,
|
||||||
|
locked: true,
|
||||||
|
}),
|
||||||
|
]);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("bound text shouldn't be editable via double-click", () => {
|
||||||
|
const container = API.createElement({
|
||||||
|
type: "rectangle",
|
||||||
|
width: 100,
|
||||||
|
locked: true,
|
||||||
|
});
|
||||||
|
const textSize = 20;
|
||||||
|
const text = API.createElement({
|
||||||
|
type: "text",
|
||||||
|
text: "ola",
|
||||||
|
x: container.width / 2 - textSize / 2,
|
||||||
|
y: container.height / 2 - textSize / 2,
|
||||||
|
width: textSize,
|
||||||
|
height: textSize,
|
||||||
|
containerId: container.id,
|
||||||
|
locked: true,
|
||||||
|
});
|
||||||
|
mutateElement(container, {
|
||||||
|
boundElements: [{ id: text.id, type: "text" }],
|
||||||
|
});
|
||||||
|
h.elements = [container, text];
|
||||||
|
|
||||||
|
UI.clickTool("selection");
|
||||||
|
mouse.doubleClickAt(container.width / 2, container.height / 2);
|
||||||
|
|
||||||
|
const editor = document.querySelector(
|
||||||
|
".excalidraw-textEditorContainer > textarea",
|
||||||
|
) as HTMLTextAreaElement;
|
||||||
|
expect(editor).not.toBe(null);
|
||||||
|
expect(h.state.editingElement?.id).not.toBe(text.id);
|
||||||
|
expect(h.elements.length).toBe(3);
|
||||||
|
expect(h.state.editingElement?.id).toBe(h.elements[2].id);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("bound text shouldn't be editable via text tool", () => {
|
||||||
|
const container = API.createElement({
|
||||||
|
type: "rectangle",
|
||||||
|
width: 100,
|
||||||
|
locked: true,
|
||||||
|
});
|
||||||
|
const textSize = 20;
|
||||||
|
const text = API.createElement({
|
||||||
|
type: "text",
|
||||||
|
text: "ola",
|
||||||
|
x: container.width / 2 - textSize / 2,
|
||||||
|
y: container.height / 2 - textSize / 2,
|
||||||
|
width: textSize,
|
||||||
|
height: textSize,
|
||||||
|
containerId: container.id,
|
||||||
|
locked: true,
|
||||||
|
});
|
||||||
|
mutateElement(container, {
|
||||||
|
boundElements: [{ id: text.id, type: "text" }],
|
||||||
|
});
|
||||||
|
h.elements = [container, text];
|
||||||
|
|
||||||
|
UI.clickTool("text");
|
||||||
|
mouse.clickAt(container.width / 2, container.height / 2);
|
||||||
|
|
||||||
|
const editor = document.querySelector(
|
||||||
|
".excalidraw-textEditorContainer > textarea",
|
||||||
|
) as HTMLTextAreaElement;
|
||||||
|
expect(editor).not.toBe(null);
|
||||||
|
expect(h.state.editingElement?.id).not.toBe(text.id);
|
||||||
|
expect(h.elements.length).toBe(3);
|
||||||
|
expect(h.state.editingElement?.id).toBe(h.elements[2].id);
|
||||||
|
});
|
||||||
|
});
|
||||||
Loading…
Reference in New Issue