sambruk/excalidraw
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: restore original opacities when alt pressed while erasing (#4954)

Browse Source
This commit is contained in:
Aakansha Doshi 2022-03-22 16:40:28 +05:30 committed by GitHub
parent 8e447b4c32
commit cded1cd63d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 37 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
src/components/App.tsx
View File

@ -50,6 +50,7 @@ import {
DEFAULT_UI_OPTIONS,
DEFAULT_VERTICAL_ALIGN,
DRAGGING_THRESHOLD,
ELEMENT_READY_TO_ERASE_OPACITY,
ELEMENT_SHIFT_TRANSLATE_AMOUNT,
ELEMENT_TRANSLATE_AMOUNT,
ENV,
@ -2783,11 +2784,17 @@ class App extends React.Component<AppProps, AppState> {
elements.forEach((element) => {
idsToUpdate.push(element.id);
if (event.altKey) {
if (pointerDownState.elementIdsToErase[element.id]) {
pointerDownState.elementIdsToErase[element.id] = false;
if (
pointerDownState.elementIdsToErase[element.id] &&
pointerDownState.elementIdsToErase[element.id].erase
) {
pointerDownState.elementIdsToErase[element.id].erase = false;
}
} else {
pointerDownState.elementIdsToErase[element.id] = true;
} else if (!pointerDownState.elementIdsToErase[element.id]) {
pointerDownState.elementIdsToErase[element.id] = {
erase: true,
opacity: element.opacity,
};
}
});
};
@ -2831,13 +2838,18 @@ class App extends React.Component<AppProps, AppState> {
: ele.id;
if (idsToUpdate.includes(id)) {
if (event.altKey) {
if (pointerDownState.elementIdsToErase[id] === false) {
if (
pointerDownState.elementIdsToErase[id] &&
pointerDownState.elementIdsToErase[id].erase === false
) {
return newElementWith(ele, {
opacity: this.state.currentItemOpacity,
opacity: pointerDownState.elementIdsToErase[id].opacity,
});
}
} else {
return newElementWith(ele, { opacity: 20 });
return newElementWith(ele, {
opacity: ELEMENT_READY_TO_ERASE_OPACITY,
});
}
}
return ele;
@ -4450,10 +4462,12 @@ class App extends React.Component<AppProps, AppState> {
scenePointer.x,
scenePointer.y,
);
hitElements.forEach(
(hitElement) =>
(pointerDownState.elementIdsToErase[hitElement.id] = true),
(pointerDownState.elementIdsToErase[hitElement.id] = {
erase: true,
opacity: hitElement.opacity,
}),
);
}
this.eraseElements(pointerDownState);
@ -4601,11 +4615,15 @@ class App extends React.Component<AppProps, AppState> {
private eraseElements = (pointerDownState: PointerDownState) => {
const elements = this.scene.getElements().map((ele) => {
if (pointerDownState.elementIdsToErase[ele.id]) {
if (
pointerDownState.elementIdsToErase[ele.id] &&
pointerDownState.elementIdsToErase[ele.id].erase
) {
return newElementWith(ele, { isDeleted: true });
} else if (
isBoundToContainer(ele) &&
pointerDownState.elementIdsToErase[ele.containerId]
pointerDownState.elementIdsToErase[ele.containerId] &&
pointerDownState.elementIdsToErase[ele.containerId].erase
) {
return newElementWith(ele, { isDeleted: true });
}

2
src/constants.ts
View File

@ -188,3 +188,5 @@ export const VERTICAL_ALIGN = {
MIDDLE: "middle",
BOTTOM: "bottom",
};
export const ELEMENT_READY_TO_ERASE_OPACITY = 20;

7
src/types.ts
View File

@ -384,7 +384,12 @@ export type PointerDownState = Readonly<{
boxSelection: {
hasOccurred: boolean;
};
elementIdsToErase: { [key: ExcalidrawElement["id"]]: boolean };
elementIdsToErase: {
[key: ExcalidrawElement["id"]]: {
opacity: ExcalidrawElement["opacity"];
erase: boolean;
};
};
}>;
export type ExcalidrawImperativeAPI = {