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

2
src/constants.ts
View File

@ -188,3 +188,5 @@ export const VERTICAL_ALIGN = {
MIDDLE: "middle", MIDDLE: "middle",
BOTTOM: "bottom", 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: { boxSelection: {
hasOccurred: boolean; hasOccurred: boolean;
}; };
elementIdsToErase: { [key: ExcalidrawElement["id"]]: boolean }; elementIdsToErase: {
[key: ExcalidrawElement["id"]]: {
opacity: ExcalidrawElement["opacity"];
erase: boolean;
};
};
}>; }>;
export type ExcalidrawImperativeAPI = { export type ExcalidrawImperativeAPI = {