2020-05-30 22:48:57 +02:00
|
|
|
import { isSomeElementSelected } from "../scene";
|
2020-01-12 02:22:03 +04:00
|
|
|
import { KEYS } from "../keys";
|
2020-02-21 08:17:20 -05:00
|
|
|
import { ToolButton } from "../components/ToolButton";
|
|
|
|
import { trash } from "../components/icons";
|
|
|
|
import { t } from "../i18n";
|
2020-03-07 10:20:38 -05:00
|
|
|
import { register } from "./register";
|
2020-04-08 09:49:52 -07:00
|
|
|
import { getNonDeletedElements } from "../element";
|
2020-05-30 22:48:57 +02:00
|
|
|
import { ExcalidrawElement } from "../element/types";
|
|
|
|
import { AppState } from "../types";
|
|
|
|
import { newElementWith } from "../element/mutateElement";
|
|
|
|
import { getElementsInGroup } from "../groups";
|
2020-06-01 11:35:44 +02:00
|
|
|
import { LinearElementEditor } from "../element/linearElementEditor";
|
2020-08-08 21:04:15 -07:00
|
|
|
import { fixBindingsAfterDeletion } from "../element/binding";
|
2020-05-30 22:48:57 +02:00
|
|
|
|
|
|
|
const deleteSelectedElements = (
|
|
|
|
elements: readonly ExcalidrawElement[],
|
|
|
|
appState: AppState,
|
|
|
|
) => {
|
|
|
|
return {
|
|
|
|
elements: elements.map((el) => {
|
|
|
|
if (appState.selectedElementIds[el.id]) {
|
|
|
|
return newElementWith(el, { isDeleted: true });
|
|
|
|
}
|
|
|
|
return el;
|
|
|
|
}),
|
|
|
|
appState: {
|
|
|
|
...appState,
|
|
|
|
selectedElementIds: {},
|
|
|
|
},
|
|
|
|
};
|
|
|
|
};
|
2020-01-12 02:22:03 +04:00
|
|
|
|
2020-11-06 22:06:39 +02:00
|
|
|
const handleGroupEditingState = (
|
2020-06-01 11:35:44 +02:00
|
|
|
appState: AppState,
|
|
|
|
elements: readonly ExcalidrawElement[],
|
2020-11-06 22:06:39 +02:00
|
|
|
): AppState => {
|
2020-06-01 11:35:44 +02:00
|
|
|
if (appState.editingGroupId) {
|
|
|
|
const siblingElements = getElementsInGroup(
|
|
|
|
getNonDeletedElements(elements),
|
|
|
|
appState.editingGroupId!,
|
|
|
|
);
|
|
|
|
if (siblingElements.length) {
|
|
|
|
return {
|
|
|
|
...appState,
|
|
|
|
selectedElementIds: { [siblingElements[0].id]: true },
|
|
|
|
};
|
|
|
|
}
|
|
|
|
}
|
|
|
|
return appState;
|
2020-11-06 22:06:39 +02:00
|
|
|
};
|
2020-06-01 11:35:44 +02:00
|
|
|
|
2020-03-07 10:20:38 -05:00
|
|
|
export const actionDeleteSelected = register({
|
2020-01-12 02:22:03 +04:00
|
|
|
name: "deleteSelectedElements",
|
2020-02-01 15:49:18 +04:00
|
|
|
perform: (elements, appState) => {
|
2020-07-09 22:33:27 +02:00
|
|
|
if (appState.editingLinearElement) {
|
2020-08-08 21:04:15 -07:00
|
|
|
const {
|
|
|
|
elementId,
|
|
|
|
activePointIndex,
|
|
|
|
startBindingElement,
|
|
|
|
endBindingElement,
|
|
|
|
} = appState.editingLinearElement;
|
2020-06-01 11:35:44 +02:00
|
|
|
const element = LinearElementEditor.getElement(elementId);
|
2020-07-09 22:33:27 +02:00
|
|
|
if (!element) {
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
if (
|
|
|
|
// case: no point selected → delete whole element
|
|
|
|
activePointIndex == null ||
|
|
|
|
activePointIndex === -1 ||
|
2020-08-08 21:04:15 -07:00
|
|
|
// case: deleting last remaining point
|
2020-07-09 22:33:27 +02:00
|
|
|
element.points.length < 2
|
|
|
|
) {
|
|
|
|
const nextElements = elements.filter((el) => el.id !== element.id);
|
|
|
|
const nextAppState = handleGroupEditingState(appState, nextElements);
|
2020-06-01 11:35:44 +02:00
|
|
|
|
|
|
|
return {
|
2020-07-09 22:33:27 +02:00
|
|
|
elements: nextElements,
|
2020-06-01 11:35:44 +02:00
|
|
|
appState: {
|
2020-07-09 22:33:27 +02:00
|
|
|
...nextAppState,
|
|
|
|
editingLinearElement: null,
|
2020-06-01 11:35:44 +02:00
|
|
|
},
|
2020-07-09 22:33:27 +02:00
|
|
|
commitToHistory: false,
|
2020-06-01 11:35:44 +02:00
|
|
|
};
|
|
|
|
}
|
2020-07-09 22:33:27 +02:00
|
|
|
|
2020-08-08 21:04:15 -07:00
|
|
|
// We cannot do this inside `movePoint` because it is also called
|
|
|
|
// when deleting the uncommitted point (which hasn't caused any binding)
|
|
|
|
const binding = {
|
|
|
|
startBindingElement:
|
|
|
|
activePointIndex === 0 ? null : startBindingElement,
|
|
|
|
endBindingElement:
|
|
|
|
activePointIndex === element.points.length - 1
|
|
|
|
? null
|
|
|
|
: endBindingElement,
|
|
|
|
};
|
|
|
|
|
2020-07-09 22:33:27 +02:00
|
|
|
LinearElementEditor.movePoint(element, activePointIndex, "delete");
|
|
|
|
|
|
|
|
return {
|
2020-11-29 18:32:51 +02:00
|
|
|
elements,
|
2020-07-09 22:33:27 +02:00
|
|
|
appState: {
|
|
|
|
...appState,
|
|
|
|
editingLinearElement: {
|
|
|
|
...appState.editingLinearElement,
|
2020-08-08 21:04:15 -07:00
|
|
|
...binding,
|
2020-07-09 22:33:27 +02:00
|
|
|
activePointIndex: activePointIndex > 0 ? activePointIndex - 1 : 0,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
commitToHistory: true,
|
|
|
|
};
|
2020-06-01 11:35:44 +02:00
|
|
|
}
|
|
|
|
|
2021-11-01 15:24:05 +02:00
|
|
|
let { elements: nextElements, appState: nextAppState } =
|
|
|
|
deleteSelectedElements(elements, appState);
|
2020-08-08 21:04:15 -07:00
|
|
|
fixBindingsAfterDeletion(
|
|
|
|
nextElements,
|
|
|
|
elements.filter(({ id }) => appState.selectedElementIds[id]),
|
|
|
|
);
|
2020-05-30 22:48:57 +02:00
|
|
|
|
2020-06-01 11:35:44 +02:00
|
|
|
nextAppState = handleGroupEditingState(nextAppState, nextElements);
|
|
|
|
|
2020-01-12 02:22:03 +04:00
|
|
|
return {
|
2020-03-08 14:10:42 -07:00
|
|
|
elements: nextElements,
|
|
|
|
appState: {
|
|
|
|
...nextAppState,
|
|
|
|
elementType: "selection",
|
|
|
|
multiElement: null,
|
|
|
|
},
|
2020-04-08 09:49:52 -07:00
|
|
|
commitToHistory: isSomeElementSelected(
|
|
|
|
getNonDeletedElements(elements),
|
|
|
|
appState,
|
|
|
|
),
|
2020-01-12 02:22:03 +04:00
|
|
|
};
|
|
|
|
},
|
2020-01-21 01:14:10 +02:00
|
|
|
contextItemLabel: "labels.delete",
|
2020-03-23 13:05:07 +02:00
|
|
|
keyTest: (event) => event.key === KEYS.BACKSPACE || event.key === KEYS.DELETE,
|
2020-03-08 10:20:55 -07:00
|
|
|
PanelComponent: ({ elements, appState, updateData }) => (
|
2020-02-21 08:17:20 -05:00
|
|
|
<ToolButton
|
|
|
|
type="button"
|
|
|
|
icon={trash}
|
|
|
|
title={t("labels.delete")}
|
|
|
|
aria-label={t("labels.delete")}
|
|
|
|
onClick={() => updateData(null)}
|
2020-04-08 09:49:52 -07:00
|
|
|
visible={isSomeElementSelected(getNonDeletedElements(elements), appState)}
|
2020-02-21 08:17:20 -05:00
|
|
|
/>
|
|
|
|
),
|
2020-03-07 10:20:38 -05:00
|
|
|
});
|