smig/excalidraw
1
0
Fork 0
mirror of https://github.com/excalidraw/excalidraw.git synced 2025-05-03 10:00:07 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: update eraser cursor (#4922)

Browse source 
* feat: update eraser cursor

* fix dark theme

* check before adding active class

* use custom cursor instead of DOM manipulation

* cache canvas and redraw only when theme changes

* use oc colors

* remove

* cache preview data url

* increase linwidth

* update coords for cursor

* add white 2px outline

* improvements

* use 1px line width 6px radius for outer

* improve
This commit is contained in:
Aakansha Doshi 2022-03-15 20:56:39 +05:30 • committed by GitHub
parent 6d45430344
commit 558227f744
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 71 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

26
src/components/App.tsx
View file

@ -214,6 +214,7 @@ import {
withBatchedUpdates,
wrapEvent,
withBatchedUpdatesThrottled,
setEraserCursor,
} from "../utils";
import ContextMenu, { ContextMenuOption } from "./ContextMenu";
import LayerUI from "./LayerUI";
@ -1051,6 +1052,9 @@ class App extends React.Component<AppProps, AppState> {
) {
this.setState({ elementType: "selection" });
}
if (prevState.theme !== this.state.theme) {
setEraserCursor(this.canvas, this.state.theme);
}
// Hide hyperlink popup if shown when element type is not selection
if (
prevState.elementType === "selection" &&
@ -1873,7 +1877,7 @@ class App extends React.Component<AppProps, AppState> {
} else if (this.state.elementType === "selection") {
resetCursor(this.canvas);
} else {
setCursorForShape(this.canvas, this.state.elementType);
setCursorForShape(this.canvas, this.state);
this.setState({
selectedElementIds: {},
selectedGroupIds: {},
@ -1899,7 +1903,7 @@ class App extends React.Component<AppProps, AppState> {
private selectShapeTool(elementType: AppState["elementType"]) {
if (!isHoldingSpace) {
setCursorForShape(this.canvas, elementType);
setCursorForShape(this.canvas, this.state);
}
if (isToolIcon(document.activeElement)) {
this.focusContainer();
@ -2043,7 +2047,7 @@ class App extends React.Component<AppProps, AppState> {
editingElement: null,
});
if (this.state.elementLocked) {
setCursorForShape(this.canvas, this.state.elementType);
setCursorForShape(this.canvas, this.state);
}
this.focusContainer();
@ -2525,7 +2529,7 @@ class App extends React.Component<AppProps, AppState> {
if (isOverScrollBar) {
resetCursor(this.canvas);
} else {
setCursorForShape(this.canvas, this.state.elementType);
setCursorForShape(this.canvas, this.state);
}
}
@ -2575,7 +2579,7 @@ class App extends React.Component<AppProps, AppState> {
const { points, lastCommittedPoint } = multiElement;
const lastPoint = points[points.length - 1];
setCursorForShape(this.canvas, this.state.elementType);
setCursorForShape(this.canvas, this.state);
if (lastPoint === lastCommittedPoint) {
// if we haven't yet created a temp point and we're beyond commit-zone
@ -2689,7 +2693,9 @@ class App extends React.Component<AppProps, AppState> {
scenePointer,
hitElement,
);
if (isEraserActive(this.state)) {
return;
}
if (
this.hitLinkElement &&
!this.state.selectedElementIds[this.hitLinkElement.id]
@ -2706,8 +2712,6 @@ class App extends React.Component<AppProps, AppState> {
!this.state.showHyperlinkPopup
) {
this.setState({ showHyperlinkPopup: "info" });
} else if (isEraserActive(this.state)) {
setCursor(this.canvas, CURSOR_TYPE.AUTO);
} else if (this.state.elementType === "text") {
setCursor(
this.canvas,
@ -2998,8 +3002,6 @@ class App extends React.Component<AppProps, AppState> {
hitElement,
);
}
if (isEraserActive(this.state)) {
}
if (
this.hitLinkElement &&
!this.state.selectedElementIds[this.hitLinkElement.id]
@ -3128,7 +3130,7 @@ class App extends React.Component<AppProps, AppState> {
if (this.state.viewModeEnabled) {
setCursor(this.canvas, CURSOR_TYPE.GRAB);
} else {
setCursorForShape(this.canvas, this.state.elementType);
setCursorForShape(this.canvas, this.state);
}
}
this.setState({
@ -3253,7 +3255,7 @@ class App extends React.Component<AppProps, AppState> {
const onPointerUp = withBatchedUpdates(() => {
isDraggingScrollBar = false;
setCursorForShape(this.canvas, this.state.elementType);
setCursorForShape(this.canvas, this.state);
lastPointerUp = null;
this.setState({
cursorButton: "up",